{"id":2815,"date":"2011-02-21T06:00:27","date_gmt":"2011-02-21T09:00:27","guid":{"rendered":"http:\/\/thuer.com.ar\/?p=2815"},"modified":"2012-03-26T17:33:27","modified_gmt":"2012-03-26T20:33:27","slug":"diseno-web-html5","status":"publish","type":"post","link":"https:\/\/thuer.com.ar\/?p=2815","title":{"rendered":"Dise\u00f1o web con HTML5: 10 recursos para comenzar ya"},"content":{"rendered":"<p><a href=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-post.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-3738\" title=\"html5-post\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-post-628x149.png\" alt=\"\" width=\"628\" height=\"149\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-post-628x149.png 628w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-post-200x47.png 200w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-post.png 630w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/a><\/p>\n<p>El HTML5 est\u00e1 a la vuelta de la esquina. Aunque la especificaci\u00f3n todav\u00eda no est\u00e1 aprobada, cada vez m\u00e1s dise\u00f1adores y desarrolladores web se animan a iniciar sus proyectos con el futuro est\u00e1ndar. Para que iniciar un proyecto en HTML5 no sea un quebradero de cabeza, ac\u00e1 hay una recopilaci\u00f3n de diferentes recursos que permiten comenzar r\u00e1pidamente el dise\u00f1o web en la nueva versi\u00f3n del HTML.<\/p>\n<p>Est\u00e1 lista actualiza el viejo post de 2009 con <a href=\"https:\/\/thuer.com.ar\/blog\/2009\/5-y-5-recursos-sobre-html5\">5+5 recursos para HTML5<\/a>.\u00a0Si no ten\u00e9s idea de HTML5, mir\u00e1 primero <a href=\"https:\/\/thuer.com.ar\/blog\/2009\/html-5-para-disenadores-web\">HTML5 para dise\u00f1adores web<\/a>.<\/p>\n<h2>1. Modernizr<\/h2>\n<p><a href=\"http:\/\/www.modernizr.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3729\" title=\"html5-modernizr\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-modernizr.png\" alt=\"\" width=\"265\" height=\"88\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-modernizr.png 265w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-modernizr-200x66.png 200w\" sizes=\"auto, (max-width: 265px) 100vw, 265px\" \/><\/a><\/p>\n<p>Moderniz es una librer\u00eda JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnolog\u00edas queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags sem\u00e1nticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.modernizr.com\/\" target=\"_blank\" rel=\"noopener\">M\u00e1s sobre Modernizr<\/a><\/li>\n<\/ul>\n<h2>2. HTML5 Shiv<\/h2>\n<p><a target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3733\" title=\"html5-shiv\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-shiv.png\" alt=\"\" width=\"245\" height=\"72\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-shiv.png 245w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-shiv-200x58.png 200w\" sizes=\"auto, (max-width: 245px) 100vw, 245px\" \/><\/a><\/p>\n<p>Una librer\u00eda espec\u00edficamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto est\u00e1 hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas l\u00edneas en el c\u00f3digo y es suficiente.<\/p>\n<ul>\n<li><a target=\"_blank\">M\u00e1s sobre HTML5 Shiv<\/a><\/li>\n<\/ul>\n<h2>3. HTML5 Boilerplate<\/h2>\n<p><a href=\"http:\/\/html5boilerplate.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-3730\" title=\"html5-boilerplate\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-moilerplate-628x63.png\" alt=\"\" width=\"628\" height=\"63\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-moilerplate-628x63.png 628w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-moilerplate-200x20.png 200w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-moilerplate.png 869w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/a><\/p>\n<p>Es una plantilla HTML5 para desarrollar r\u00e1pidamente un proyecto con las opciones y configuraciones m\u00e1s habituales. No es un framework, sino solo una recopilaci\u00f3n de diferentes t\u00e9cnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.<\/p>\n<ul>\n<li><a href=\"http:\/\/html5boilerplate.com\/\" target=\"_blank\" rel=\"noopener\">M\u00e1s sobre HTML5 Boilerplate<\/a><\/li>\n<\/ul>\n<h2>4. Initializr<\/h2>\n<p><a href=\"http:\/\/initializr.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3727\" title=\"html5-initializr\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-initializr.png\" alt=\"\" width=\"542\" height=\"119\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-initializr.png 542w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-initializr-200x43.png 200w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/a><\/p>\n<p>Es un proyecto que funciona como una recopilaci\u00f3n de diferentes librer\u00edas y recursos de HTML5. En su p\u00e1gina web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuraci\u00f3n para .htaccess y m\u00e1s.<\/p>\n<ul>\n<li><a href=\"http:\/\/initializr.com\/\" target=\"_blank\" rel=\"noopener\">M\u00e1s sobre Initializr<\/a><\/li>\n<\/ul>\n<h2>5. HTML5 Reset<\/h2>\n<p><a href=\"http:\/\/html5reset.org\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3731\" title=\"html5-reset\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-reset.png\" alt=\"\" width=\"407\" height=\"122\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-reset.png 407w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-reset-200x59.png 200w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>Se trata de una completa plantilla que incluye todos los elementos m\u00e1s habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la b\u00e1sica solamente con la estructura general.<\/p>\n<ul>\n<li><a href=\"http:\/\/html5reset.org\/\" target=\"_blank\" rel=\"noopener\">M\u00e1s sobre HTML5 Reset<\/a><\/li>\n<\/ul>\n<h2>6. Switch To HTML5<\/h2>\n<p><a href=\"http:\/\/switchtohtml5.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3735\" title=\"html5-switch\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-switch.png\" alt=\"\" width=\"487\" height=\"164\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-switch.png 487w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-switch-200x67.png 200w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/a><\/p>\n<p>Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados r\u00e1pidos sin complicarse demasiado.<\/p>\n<ul>\n<li><a href=\"http:\/\/switchtohtml5.com\/\" target=\"_blank\" rel=\"noopener\">M\u00e1s sobre Switch To HTML5<\/a><\/li>\n<\/ul>\n<h2>7. HTML5 Lint<\/h2>\n<p><a href=\"http:\/\/lint.brihten.com\/html\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3728\" title=\"html5-lint\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-lint.png\" alt=\"\" width=\"215\" height=\"139\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-lint.png 215w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-lint-200x129.png 200w\" sizes=\"auto, (max-width: 215px) 100vw, 215px\" \/><\/a><\/p>\n<p>Con HTML5 la validaci\u00f3n del c\u00f3digo es un asunto delicado. En lugar de la consistencia que propon\u00eda el escricto est\u00e1ndar XHTML, HTML5 vuelve a ser m\u00e1s laxo y mantener el c\u00f3digo coherente se hace m\u00e1s dif\u00edcil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a trav\u00e9s de una serie de opciones que validan la escritura en min\u00fascula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del c\u00f3digo.<\/p>\n<ul>\n<li><a href=\"http:\/\/lint.brihten.com\/html\/\" target=\"_blank\" rel=\"noopener\">M\u00e1s sobre HTML5 Lint<\/a><\/li>\n<\/ul>\n<h2>8. HTML5 Doctor<\/h2>\n<p><a href=\"http:\/\/html5doctor.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3725\" title=\"html5-doctor\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-doctor.png\" alt=\"\" width=\"407\" height=\"122\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-doctor.png 407w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-doctor-200x59.png 200w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicaci\u00f3n regular de art\u00edculos, novedades y algunos tutoriales. Tambi\u00e9n es interesante su sitio hermano HTML5 Gallery con una muy buena selecci\u00f3n de sitios web que implementan HTML5.<\/p>\n<ul>\n<li><a href=\"http:\/\/html5doctor.com\/\" target=\"_blank\" rel=\"noopener\">Ir a HTML5 Doctor<\/a><\/li>\n<\/ul>\n<h2>9. HTML5 Rocks<\/h2>\n<p><a href=\"http:\/\/www.html5rocks.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3732\" title=\"html5-rocks\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-rocks.png\" alt=\"\" width=\"301\" height=\"55\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-rocks.png 301w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-rocks-200x36.png 200w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/a><\/p>\n<p>Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqu\u00e9 una presentaci\u00f3n sobre HTML5. HTML5 Rocks combina informaci\u00f3n con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.html5rocks.com\/\" target=\"_blank\" rel=\"noopener\">Ir a HTML5 Rocks<\/a><\/li>\n<\/ul>\n<h2>10. HTML5 Reference Poster<\/h2>\n<p><a href=\"http:\/\/www.xhtml-lab.com\/html5poster\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3734\" title=\"html5-reference-poster\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-reference-poster.png\" alt=\"\" width=\"497\" height=\"80\" srcset=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-reference-poster.png 497w, https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-reference-poster-200x32.png 200w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/a><\/p>\n<p>Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un dise\u00f1o equiibrado y armonioso junto a el uso de iconos ayuda a identificar f\u00e1cilmente los diferentes aspectos de la nueva especificaci\u00f3n. Un buen recurso de decoraci\u00f3n-consulta en la oficina y para clases de tecnolog\u00eda.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.xhtml-lab.com\/html5poster\/\" target=\"_blank\" rel=\"noopener\">Ver HTML 5 Reference Poster<\/a><\/li>\n<\/ul>\n<h2>#Bonus: HTML5 for Beginners<\/h2>\n<p><a href=\"http:\/\/books.alistapart.com\/products\/html5-for-web-designers\" target=\"_blank\" rel=\"noopener\">HTML5 for Beginners<\/a><img loading=\"lazy\" decoding=\"async\" title=\"html5-book\" src=\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-book-628x288.png\" alt=\"\" width=\"628\" height=\"288\" \/><\/p>\n<p><a href=\"http:\/\/books.alistapart.com\/products\/html5-for-web-designers\" target=\"_blank\" rel=\"noopener\">HTML5 for Beginners<\/a> es un libro escrito por Jeremy Keith especialmente para dise\u00f1adores web que quieran iniciarse en los futuros est\u00e1ndares de la web. De manera \u00e1gil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos pr\u00e1cticos. Un texto breves pero tremendamente \u00fatil publicado por A Book Apart. Cuesta 18 d\u00f3lares m\u00e1s env\u00edo en versi\u00f3n papel y 9 d\u00f3lares el eBook (ePub y PDF abierto sin restricciones).<\/p>\n<p><small>Ilustraci\u00f3n principal a partir de una imagen de <a href=\"http:\/\/www.bigstockphoto.com\" target=\"_&quot;blank&quot;\" rel=\"noopener\">BigStockPhoto<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El HTML5 trae muchas mejoras. Sin embargo, comenzar desde cero puede ser complicado. Este listado de recursos puede ayudarte a comenzar a dise\u00f1ar ya con el futuro est\u00e1ndar de la web.<\/p>\n","protected":false},"author":1,"featured_media":4513,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[21,56],"tags":[45,407,101,185],"class_list":["post-2815","post","type-post","status-publish","format-standard","has-post-thumbnail","category-blog","category-diseno-web","tag-css","tag-diseno-web","tag-html5","tag-recursos","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","entry"],"featured_image_src":"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-thumb.png","featured_image_src_square":"https:\/\/thuer.com.ar\/wp-content\/uploads\/2011\/02\/html5-thumb.png","author_info":{"display_name":"Sebasti\u00e1n Th\u00fcer","author_link":"https:\/\/thuer.com.ar\/author\/diseno-web"},"_links":{"self":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts\/2815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2815"}],"version-history":[{"count":0,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/posts\/2815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=\/wp\/v2\/media\/4513"}],"wp:attachment":[{"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thuer.com.ar\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}