{"id":706,"date":"2010-05-29T00:19:38","date_gmt":"2010-05-28T22:19:38","guid":{"rendered":"http:\/\/www.4webs.es\/blog\/?p=706"},"modified":"2010-05-29T00:21:42","modified_gmt":"2010-05-28T22:21:42","slug":"tutoriales-y-consejo-para-disenar-paginas-en-html5","status":"publish","type":"post","link":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5","title":{"rendered":"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5"},"content":{"rendered":"

\"\"<\/p>\n

El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web<\/a> siguiendo la condiciones de este sistema. Deberemos recordar como siempre pasa en estos casos, que no todos los navegadores son compatibles con este lenguaje….<\/p>\n

1-ESTRUCTURA:<\/strong>
\nEn html5 la estructura de las p\u00e1ginas web deben seguir un esquema b\u00e1sico a la hora de hacer el dise\u00f1o, un header para presentar la web donde se incluir\u00e1 el men\u00fa, una zona de contenidos, una zona para elementos adicionales y la zona footer que ser\u00e1 el pie de p\u00e1gina. En principio el dise\u00f1o sigue lo estandar aunque por la forma que quieren que sigamos como por ejemplo la sidebar , nos puede recordar a WordPress que a una p\u00e1gina normal.<\/p>\n

2-ELEMENTOS DE NAVEGACI\u00d3N:<\/strong>
\nEn html5 los men\u00fas deben realizarse medianta listas no ordenadas <li>.<\/p>\n

3-CABECERA:<\/strong>
\nLa cabecer\u00e1 deber\u00e1 incluir el logo a t\u00edtulo de la p\u00e1gina la cual deber\u00eda ser un h1, seguido de un h2 con una breve descripci\u00f3n del contenido de la p\u00e1gina web.<\/p>\n

4-ELEMENTOS DE FECHA:<\/strong>
\nCuando enviamos contenidos actualizados a la p\u00e1gina web, por ejemplo noticias o post para un blog deberemos incluir una nueva etiqueta <time\u00a0datetime=\u00bb2009-05-28T00:36:49+01:00″><\/p>\n

5-FORMULARIOS:<\/strong>
\nLos elementos de un formulario que sean obligatorios debemos marcarlos como tales. <input\u00a0name=\u00bbname\u00bb\u00a0id=\u00bbname\u00bb\u00a0type=\u00bbtext\u00bb\u00a0required\u00a0\/> .<\/p>\n

6-MAQUETACIONES:<\/strong>
\nEn CSS3 no est\u00e1 permitido el uso de tablas por lo que debemos aprender a usar los nuevos elementos.
\nUn elemento contenedor ( #content\u00a0{ display:\u00a0table;} y los elemento que queremos hacer flotar que deberos darle la propiedad display:\u00a0table-cell; para que se comporten como una tabla con td o como un div flotante.<\/p>\n

\"\"<\/a><\/p>\n

7-SOMBRAS:<\/strong>
\nPodemos conseguir efectos de sombra con la nueva propiedad css3 que a\u00f1ade efecto de sombra a los elementos, por ejemplo para a\u00f1adir una sombra con css3 deberemos usar la siguiente propiedas:
\nbox-shadow: 5px 5px 10px\u00a0#777;<\/p>\n

Mi opini\u00f3n personal es que para poder usar todos estos elementos debemos comprobar que se\u00e1n compatibles en todos los navegadores, por lo que es posible que muchas de estas t\u00e9cnicas no podremos usarlas hasta que los usuarios actualicen completamente sus navegadores, por lo que a\u00fan queda mucho camino…..<\/p>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"

El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema. Deberemos recordar como siempre pasa en estos casos, que no todos los navegadores son compatibles con este lenguaje…. 1-ESTRUCTURA: En html5 la estructura de las p\u00e1ginas web deben seguir un … Continuar leyendo \u00abTutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,3],"tags":[],"class_list":{"0":"post-706","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-actualidad","8":"category-diseno-web"},"yoast_head":"\nTutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5 | 4webs.es<\/title>\n<meta name=\"description\" content=\"El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5 | 4webs.es\" \/>\n<meta property=\"og:description\" content=\"El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5\" \/>\n<meta property=\"og:site_name\" content=\"4webs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/4webs\" \/>\n<meta property=\"article:published_time\" content=\"2010-05-28T22:19:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-05-28T22:21:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2010\/05\/estructura-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pablo Risue\u00f1o\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@4webs\" \/>\n<meta name=\"twitter:site\" content=\"@4webs\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pablo Risue\u00f1o\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5\"},\"author\":{\"name\":\"Pablo Risue\u00f1o\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"headline\":\"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5\",\"datePublished\":\"2010-05-28T22:19:38+00:00\",\"dateModified\":\"2010-05-28T22:21:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5\"},\"wordCount\":396,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/estructura-html5.png\",\"articleSection\":[\"Actualidad\",\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5\",\"name\":\"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5 | 4webs.es\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/estructura-html5.png\",\"datePublished\":\"2010-05-28T22:19:38+00:00\",\"dateModified\":\"2010-05-28T22:21:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"description\":\"El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/estructura-html5.png\",\"contentUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/05\\\/estructura-html5.png\",\"width\":600,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/tutoriales-y-consejo-para-disenar-paginas-en-html5#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.4webs.es\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/\",\"name\":\"4webs\",\"description\":\"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\",\"name\":\"Pablo Risue\u00f1o\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"caption\":\"Pablo Risue\u00f1o\"},\"sameAs\":[\"http:\\\/\\\/www.4webs.es\"],\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/author\\\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5 | 4webs.es","description":"El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5","og_locale":"es_ES","og_type":"article","og_title":"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5 | 4webs.es","og_description":"El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema.","og_url":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5","og_site_name":"4webs","article_publisher":"https:\/\/www.facebook.com\/4webs","article_published_time":"2010-05-28T22:19:38+00:00","article_modified_time":"2010-05-28T22:21:42+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2010\/05\/estructura-html5.png","type":"image\/png"}],"author":"Pablo Risue\u00f1o","twitter_card":"summary_large_image","twitter_creator":"@4webs","twitter_site":"@4webs","twitter_misc":{"Escrito por":"Pablo Risue\u00f1o","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#article","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5"},"author":{"name":"Pablo Risue\u00f1o","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"headline":"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5","datePublished":"2010-05-28T22:19:38+00:00","dateModified":"2010-05-28T22:21:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5"},"wordCount":396,"commentCount":0,"image":{"@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2010\/05\/estructura-html5.png","articleSection":["Actualidad","Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5","url":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5","name":"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5 | 4webs.es","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage"},"image":{"@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2010\/05\/estructura-html5.png","datePublished":"2010-05-28T22:19:38+00:00","dateModified":"2010-05-28T22:21:42+00:00","author":{"@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"description":"El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder dise\u00f1ar p\u00e1ginas web siguiendo la condiciones de este sistema.","breadcrumb":{"@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#primaryimage","url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2010\/05\/estructura-html5.png","contentUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2010\/05\/estructura-html5.png","width":600,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.4webs.es\/blog\/tutoriales-y-consejo-para-disenar-paginas-en-html5#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.4webs.es\/blog"},{"@type":"ListItem","position":2,"name":"Tutoriales y consejo para dise\u00f1ar p\u00e1ginas en HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.4webs.es\/blog\/#website","url":"https:\/\/www.4webs.es\/blog\/","name":"4webs","description":"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.4webs.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048","name":"Pablo Risue\u00f1o","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","caption":"Pablo Risue\u00f1o"},"sameAs":["http:\/\/www.4webs.es"],"url":"https:\/\/www.4webs.es\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/comments?post=706"}],"version-history":[{"count":8,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/706\/revisions"}],"predecessor-version":[{"id":716,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/706\/revisions\/716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media\/707"}],"wp:attachment":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media?parent=706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/categories?post=706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/tags?post=706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}