HTML5 y CSS3Revolucione el diseo de sus sitios web (2a edicin)Es necesario que los diseadores web, a la hora de crear sitios web, dominen dos lenguajesfundamentales: el HTML (HyperText Markup Language) y el CSS (Cascading Style Sheets). Lasltimas versiones de estos dos lenguajes, el HTML5 y el CSS3, revolucionarn la forma de crearsitios web ofreciendo nuevas posibilidades de estructura, formato y composicin.Este libro va dirigido a diseadores de sitios web y grafistas con conocimientos sobre HTML 4 yCSS 2.1 que quieran evolucionar en su manera de trabajar en la creacin de sitios que integrenesos nuevos estndares. En el apartado dedicado al HTML5 se estudiar la nueva sintaxis, los nuevos elementos deestructura semntica (para el encabezado, las secciones, el men de navegacin, etc.), as comolos formularios interactivos.En el apartado de CSS3, el lector aprender a usar los nuevos selectores, el formato de texto ylos estilos para los contenedores (sombras, bordes redondeados, degradados, bordes condiseos, etc.)Tambin podr descubrir el enorme potencial de los nuevos efectosde transformacin, transicin y animacin y, por supuesto, utilizar una de las grandesnovedades: la insercin nativa de elementos multimedia (audio y vdeo).Se ha dedicado un captulo al Diseo web flexible (Responsive Web Design), que permitiradaptar los sitios web a los diferentes soportes de difusin (pantallas de ordenador, tabletastctiles y smartphones).El ltimo captulo tratar la aplicacin concreta de diseos web a partir del estudio de plantillasde sitios web concebidas ntegramente en HTML5 y CSS3.

Christophe AUBRYResponsable pedaggico en un centro de formacin y formador en tecnologas web y artesgrficas durante ms de quince aos, Christophe Aubry dirige en la actualidad la empresanetPlume, especializada en la redaccin pedaggica y la creacin de sitios web. Autor de multitudde libros publicados en Ediciones ENI, en especial sobre Dreamweaver, WordPress, Drupal, HTMLy CSS, se mantiene siempre al tantode las novedades relacionadas con la creacin de sitos web,consultando con regularidad las noticias sobre tecnologa y participando en numerosos foros.

www.FreeLibros.me

La creacin de sitios webLa creacin de sitios web es realmente un "arte" hoy en da? Si intenta enumerar las competenciasnecesarias para concebir un sitio web, puede que que la lista sea impresionante, ya que deberincluir las habilidades de diversos especialistas: grafista, diseador, ergonomista, redactor, jefe deproyecto, programador, comercial, community manager, especialista SEO, gestor de servidores,integrador, gestor de la estrategia de los contenidos, director artstico... Y nos paramos aqu, aunquepodramos seguir. Ni que decir tiene que la creacin y la gestin de un sitio web es la obra comn dediversos profesionales con habilidades complementarias, en la que cada cual ser el especialista desu rea.

www.FreeLibros.me

Los lenguajesLa base de todo proyecto web es la pgina web, esa famosa pgina que se abrir en su navegadorweb. Esta pgina web estar creada con dos lenguajes fundamentales: el HTML (HyperTextMarkup Language) y el CSS (Cascading Style Sheets).Estos dos lenguajes han conocido una evolucin significativa en su ltima versin, podramoshablar incluso de una revolucin. Las posibilidades que nos ofrecen son fantsticas! Aunque an noestn totalmente finalizados, ahora es el turno de los navegadores, quienes debern aprender agestionar perfectamente estos nuevos lenguajes.Vamos a poder crear sitios web atractivos, dinmicos e interactivos usando exclusivamente loslenguajes estndares preconizados por el W3C (World Wide Web Consortium).

www.FreeLibros.me

El libro

1. Para los diseadores webEste libro se dirige a diseadores web, y no a programadores web. HTML5 nos trae novedades encuanto a la concepcin y organizacin de la estructura de los sitios web, adems de aadir nuevoselementos para la concepcin de aplicaciones web (la geolocalizacin, el principio de drag and drop,el almacenamiento de datos, la API para los archivos, la Web sin conexin y la Web Sockets API).Esas novedades relacionadas con las aplicaciones (Web Apps) estn pensadas para losprogramadores "puros", y no para los diseadores web, as que nosotros no veremos aqu esavertiente de HTML5.

2. El contenidoVamos a analizar los lenguajes HTML5 y CSS3 con el objetivo de utilizar los elementos esencialespara el diseo web.En HTML5 veremos la nueva sintaxis, los nuevos elementos de estructura (, ...), losnuevos elementos para los formularios y presentaremos el elemento de contenidogrfico.En CSS3 estudiaremos los nuevos selectores, el formateo del texto y delos contenedores(sombras, esquinas redondeadas, degradados, diseo de los bordes...).Aprenderemos a usar los nuevos elementos de transformacin, de transicin y de animacin.Sin olvidarnos, por supuesto, de la gran novedad, la insercin nativa de contenidomultimedia:audio y vdeo.Otro tema a la moda que tambin abordaremos: el diseo adaptativo (Responsive Web Design), quele permitir adaptar su sitio web a los diferentes soportes de difusin (pantalla de ordenador,tabletas y smartphones).Por ltimo, terminaremos con el estudio de las plantillas de sitios web, totalmente en HTML5/CSS3,donde veremos las aplicaciones concretas de diseo web.

www.FreeLibros.me

Breve historia de InternetInternet, tal y como nosotros lo conocemos en la actualidad, es un avance de la tecnologa bastantereciente. En marzo de 1989, en la Organizacin Europea para la Investigacin Nuclear (CERN en sussiglas en ingls), Tim Berners-Lee redacta el artculo "fundador" de Internet. En ese artculo titulado"Information Management: A Proposal", Tim Berners-Lee habla en su introduccin de la gestin de lainformacin mediante un sistema de hipertexto: "It discusses the problems of loss of information aboutcomplex evolving systems and derives a solution based on a distributed hypertext system."Esta es la URL de dicho documento: http://www.w3.org/History/1989/proposal.htmlEn octubre de 1990, Tim Berners-Lee trabaja sobre el hipertexto con un editor y un navegador enuna estacin NeXT, y le da a ese programa el nombre de World Wide Web.Estas son las primeras capturas de pantalla:

www.FreeLibros.me

En ese mismo mes de octubre de 1990, el belga Robert Cailliau se une al equipo de Tim Berners-Leey juntos redactan la segunda propuesta llamada: "WorldWideWeb: Proposal for a HyperText Project".Este trabaja sin descanso en la concepcin de un navegador para Macintosh.A finales de 1990 se presenta la primera demostracin del primer servidor, del primer editorhipertextual, del primer navegador.En diciembre de 1992 se instala el primer servidor fuera del CERN, en la universidad de Stanford, enlos Estados Unidos.En el ao 1993 aparecen multitud de navegadores y el CERN decide liberar los protocolos web.Un ao ms tarde, en 1994, Mark Andreessen funda Mosaic Communications Corp., futura Netscape.El 1 de octubre de 1994 nace el Word Wide Web Consortium (W3C) en el MIT (MassachusettsInstitute of Technology). En ese mismo ao 1994, haba 623 servidores web en todo el mundo. En abrilde 1995 el INRIA (Instituto Nacional francs de Investigacin en Informtica y Automtica) acoge alW3C en Europa y, en septiembre de 1996, lo hace la Universidad de Keio en Japn.En esta URL podr acceder a la historia completa: http://www.w3.org/History.htmlEn el 2004, en el dcimo aniversario del W3C, se recoge en una iconografa esta evolucin, lahistoria del World Wide Web. Puede consultarla en estaURL: http://www.w3.org/2005/01/timelines/timeline-2500x998.png

www.FreeLibros.me

La evolucin del HTML

1. Las investigaciones del W3CEl lenguaje HTML es el resultado del trabajo del W3C. Estos trabajos de investigacin pasan porvarias etapas que han ido evolucionando con el tiempo. En la actualidad, los resultados de lasinvestigaciones se publican en tres etapas:

Los "borradores", Working Drafts, se publican para compartir los avances de lasinvestigaciones con los dems.Las especificaciones se publican cuando el lenguaje ya est casi terminado y listo para usar.Las recomendaciones se publican una vez que el lenguaje est oficialmente aprobado yterminado.

A veces lleva mucho tiempo pasar de una especificacin a una recomendacin, puede que inclusoaos.

2. El HyperText Markup LanguageFue en 1991 cuando Tim Berners-Lee redact los primeros "bocetos" (draft) del HTML.En junio de 1993, aparece el primer documento tcnico describiendo el lenguaje HTML: "HypertextMarkup Language (HTML) - A Representation of Textual Information and MetaInformation forRetrieval and Interchange" (http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt).El 8 de noviembre de 1993, aparece el HTML+(http://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html).La versin 2 del HTML ve la luz el 22 de septiembre de 1995 (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html) bajo los auspicios del IETF (Internet Engineering Task Force).En marzo de 1995 se publica el HTML 3 (http://www.w3.org/MarkUp/html3/) que se presenta comouna "extensin" del HTML 2. Rpidamente es remplazado por la recomendacin del HTML 3.2, el 14de enero de 1997 (http://www.w3.org/TR/REC-html32.html).La recomendacin del HTML 4.01 se publica el 24 de diciembre de 1999. Para el W3C, esta versines la ltima del HTML. EL W3C piensa que el futuro de las pginas web no est en el HTML, sino enel XML. El HTML "ha muerto", para el W3C.

3. La evolucin con el XHTMLEl lenguaje HTML conlleva limitaciones intrnsecas:

los elementos que se pueden usar se limitan a los indicados en la recomendacin,el lenguaje es muy permisivo: es posible indicar el nombre de los elementos en maysculas oen minsculas, algunas etiquetas de cierre son facultativas...los elementos no son realmente semnticos: el elemento puede contener cualquier tipode texto.

El W3C publica el 10 de febrero de 1998 (http://www.w3.org/TR/1998/REC-xml-19980210) larecomendacin de un nuevo lenguaje, el XML (eXtensible Markup Language). La quinta edicin seremonta al 26 de noviembre de 2008 (http://www.w3.org/TR/2008/REC-xml-20081126/). Estelenguaje permite superar todas las limitaciones del HTML. De este modo es posible crear todos loselementos que queramos, de forma totalmente semntica (por ejemplo, un elemento paracontener un cdigo postal o un elemento para incluir un precio) y la sintaxis es muy

www.FreeLibros.me

estricta. Se trata de un lenguaje ideal, en especial, para intercambiar datos estructurados en laweb. Pero el XML interviene adems en otros muchos lenguajes estndares del W3C (MathML,SVG...) y en otras tecnologas web.Debido a su sintaxis permisiva, el HTML es incompatible con el XML. Para resolver estaincompatibilidad, el W3C reformul la sintaxis del HTML para que fuera compatible con el XML: setrata del XHTML (eXtensible HyperText Markup Language). La primera recomendacin sale a la luzel26 de enero de 2000 (http://www.w3.org/TR/2000/REC-xhtml1-20000126/).El XHTML presenta una sintaxis ms estricta, como podemos ver en estos dos ejemplos:Si se abre un elemento, deber incluirse la etiqueta de cierre:

sintaxis correcta en HTML: Mi textosintaxis correcta en XHTML: Mi texto

El HXTML prev el cierre de los elementos que no dispongan de una etiqueta de cierre:sintaxis correcta en HTML: sintaxis correcta en XHTML:

Adems, los elementos XHTML deben escribirse en minsculas y los valores de los atributos debenestar entrecomillados (con comillas dobles ").

sintaxis correcta en HTML: sintaxis correcta en XHTML:

El W3C publica la recomendacin del XHTML 1.1 el 31 de mayo de 2001(http://www.w3.org/TR/2001/REC-xhtml11-20010531/). La ltima edicin se remonta a noviembrede 2010 (http://www.w3.org/TR/xhtml11/). Esta versin abordaba el "autntico XML", sin elementosincorrectos o que no se adaptaran a los estndares. Esto quiere decir que los documentos para laweb ya no podan usar el tipo MIME text/html.El XHTML 2 aparece solamente como Working Draft en agosto de 2002(http://www.w3.org/TR/2002/WD-xhtml2-20020805/). Esta deba ser una versin del lenguaje"puro", sin ningn compromiso con el pasado, hasta el punto de que era incompatible con elcontenido web existente! Se trat de una iniciativa demasiado radical. El W3C propona un lenguajetotalmente desconectado de la realidad, hecho para los informticos y no para los diseadores web.Al optar por la incompatibilidad con lo existente, el W3C cometi un grave error estratgico.La recomendacin del XHTML 2 no lleg nunca a publicarse. El 17 de diciembre de 2010, el W3Cdisuelve oficialmente ese grupo de trabajo.

4. Los disidentes del WHATWGAnte ese fracaso de la evolucin del HTML reconocido por el W3C, un grupo de "disidentes",encabezado por Ian Hickson (que trabajaba entonces en Opera Software), form en 2004 su propiogrupo de trabajo sobre el HTML, el Web Hypertext Application Technology Working Group, WHATWG(http://www.whatwg.org/). Los primeros miembros del WHATWG venan de Mozilla, Opera, Apple, yluego, Google. Los primeros resultados de sus investigaciones se aplicaron a los formularios. IanHickson era el editor y tomaba todas las decisiones finales. El WHATWG se ocup en un primermomento de los formularios (Web Forms 2.0) y las aplicaciones web (Web Apps 1.0). Esas dos reasde trabajo se encuentran ahora en el HTML5.

www.FreeLibros.me

El WHATWG contina con esas investigaciones (http://www.whatwg.org/specs/web-apps/current-work/multipage/), independientemente del W3C. Al HTML5 se le llama HTML Living Standard para noconfundirlo con el HTML5 del W3C.En julio de 2012, ante las dificultades del trabajo en comn y la diferencia de objetivos con respectoal W3C, el WHATWG decide separarse y seguir su propio camino de manera totalmenteindependiente (vase el documento http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Jul/0119.html). La consecuencia es que, a partir de entonces, el WHATWG propondruna versin viva del HTML y el W3C llevar a cabo la normalizacin del lenguaje. Para losdesarrolladores e integradores Web, eso complicar un tanto la tarea, ya que debern conocer loselementos HTML5 propuestos por el WHATWG y comprobar si han sido validados por el W3C y sonreconocidos por los navegadores.

www.FreeLibros.me

5. La llegada del HTML5Ante el fracaso del XHTML 2, el W3C forma su propio equipo de trabajo sobre el futuro del HTML, afinales del 2006, tomando como base las investigaciones del WHATWG, en lugar de comenzar desdecero. Una primera especificacin en Working Draft llamada "HTML 5 - A vocabulary and associated APIsfor HTML and XHTML" aparece el 22 de enero de 2008 (http://www.w3.org/TR/2008/WD-html5-20080122/). Como ancdota, fjese que haba un espacio entre HTML y 5, que no aparece en ladenominacin del WHATWG.En la actualidad (septiembre 2013), la ltima versin del HTML5 est en CandidateRecommendation y tiene fecha de 6 de agosto de 2013 (http://www.w3.org/TR/html5/).La aparicin del logotipo del HTML5 (http://www.w3.org/html/logo/) tambin provoc un granrevuelo en la web. Algunos lo adoran, otros lo detestan y multitud de parodias grficas circulan porla red: un autntico buzz!

6. Los documentos HTML5 del W3CEl W3C genera multitud de documentos sobre el HTML5 (y el CCS3).

www.FreeLibros.me

En primer lugar, veamos cules son los objetivos del HTML5:Asegurar la compatibilidad con lo que ya existe. Uno de sus principales objetivos es el de nocometer el mismo error que el XHTML 2.La especificacin describe con detalle lo que deben hacer los navegadores, lo que estosdeben mostrar. En el HTML 4.01 haba muchos puntos "oscuros", muchas imprecisiones, ycada navegador haca lo que mejor le pareca. Es necesario documentar lo que ya existe, loque los navegadores saben hacer desde hace tiempo.La especificacin regula por fin la gestin de los errores. Si un documento no es correcto,qu deber mostrar el navegador? Por ejemplo, si nos encontramos con texto , qu deber mostrar el navegador?Gestionar correctamente la interoperabilidad, la compatibilidad de los navegadores(especificar una gestin idntica del DOM).

Esos objetivos se recogen en un documento de trabajo: HTML DesignPrinciples(http://www.w3.org/TR/html-design-principles/).El documento de base y el borrador de trabajo, el Working Draft, con fecha de 6 de agosto de 2013(en el momento de redactar estas lneas): http://www.w3.org/TR/html5/. Lleva por ttulo "HTML5 -A vocabulary and associated APIs for HTML and XHTML".

Un recuadro "enorme" precisa que el documento no est terminado y que no contiene las ltimasevoluciones y correcciones.

Para conocer los ltimos avances del grupo de trabajo (HTML WG), puede consultar la versin"editors draft": http://www.w3.org/html/wg/drafts/html/CR/. La ltima versin est fechada el 19de octubre de 2011 (en el momento de redactar este libro).

www.FreeLibros.me

Otro documento bastante interesante y muy importante para los diseadores Web, es la referenciaHTML (http://dev.w3.org/html5/markup/). Este documento propone nicamente una lista de loselementos HTML utilizables por los diseadores Web y no incluye toda la parte reservada a losnavegadores web (gestin de los errores, interoperabilidad, gestin del DOM, etc.).

Cada elemento HTML aparece con los indicadores CHANGED o NEW.

www.FreeLibros.me

Si hace clic en uno de esos elementos, podr ver los elementos de sintaxis esenciales paranosotros, los diseadores web.Este es un extracto del elemento a:

Otro documento interesante es el "HTML 5 Reference - A Web Developers Guide to

www.FreeLibros.me

HTML 5":http://dev.w3.org/html5/html-author/. Se trata de un documento del 2009, pero contienemultitud de ejemplos de uso de HTML5 para los diseadores y los autores de sitios web.

7. La evolucin de las recomendacionesEl HTML5 pas a Candidate Recommendation el 6 de agosto de 2013(http://www.w3.org/TR/html5/). Las personas entendidas, como lan Hickson, predicen que pasaraRecommendation en 2022!Le parece demasiado? Recuerde que el CSS 2.1 pas a Recommendation el 7 de junio de 2011, locual no impide que usted lo est utilizando desde hace diez aos.

8. Podemos usar HTML5?Dado que, en septiembre de 2013, el HTML5 an no ha alcanzado el estado de Recommendationporparte del W3C, podemos utilizarlo sin reparos?Como veremos en el captulo La nueva sintaxis HTML5, hoy en da se puede usar HTML5 sin riesgode incompatibilidad (a no ser que se use un navegador obsoleto como Internet Explorer v6, quedata de 2001).En el captulo Los elementos de la estructura en HTML5, estudiaremos nuevos elementos deestructura que le permitirn concebir de manera semntica sus pginas web. El riesgo deincompatibilidad aqu es mayor... para los usuarios de Internet Explorer 8. Ya que este ltimo noreconoce y no permite visualizar esos nuevos elementos.Para los navegadores ms antiguos, podemos forzarlos a que reconozcan los nuevos elementosHTML5 mediante JavaScript. Con una instruccin JavaScript, solicitaremos crear estos elementos enel DOM (el Document Object Model permite acceder a los elementos de estructura de pginas Web).En el de la pgina Web, introduzca este cdigo:

www.FreeLibros.me

document.createElement("main"); document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article"); document.createElement("figure");

Este script permitir crear dinmicamente elementos de HTML5 desconocidos por anterioresnavegadores. De esta forma podrn mostrar correctamente los nuevos elementos HTML5, sinignorarlos, tal y como debera ser la regla (vase captulo Interpretacin del HTML5 por losanteriores navegadores).Tambin es posible crear un script global para crear dinmicamente todos los nuevos elementosHTML5. Google propone ese nuevo script: http://code.google.com/p/html5shim/En el de la pgina Web, introduzca este cdigo:

El resultado sera idntico al obtenido con el primer script manual.Para los navegadores recientes (posteriores a 2010, como Firefox 3.6, Chrome 4, Opera 10.5 ySafari 5), bastar con gestionar las propiedades display: block, para visualizarloscorrectamente. De lo contrario se mostrarn como elementos de tipo inline. En el captulo HTML5 y CSS3 para los formularios, veremos los nuevos elementos y los nuevos tipospara los formularios. Los nuevos tipos para los formularios (email, url, date...), cuando no seanreconocidos por el navegador, sern interpretados como objetos de tipo text. Nadademasiado grave.Por ltimo, concluiremos diciendo que: ahora es su turno! Ahora le toca a usted determinar si leconviene o no pasarse a HTML5. Lo que nosotros podemos decir es que los nuevos elementosHTML5 no presentan demasiados riesgos si usted los utiliza con precaucin e incluyendo alternativaspara los navegadores ms antiguos y menos conformes.

9. Interpretacin del HTML5 por los anteriores navegadoresNo olvide que el HTML5 y las CSS3 tambin tienen como principio la tolerancia a fallos. Esto implicaque los navegadores deben ignorar todo aquello que no saben interpretar.Tomemos un ejemplo concreto para comprender bien el proceso. Presentamos a continuacin unaestructura muy sencilla en HTML5 (estudiaremos estos nuevos elementos en el captulo Loselementos de la estructura en HTML5).

www.FreeLibros.me

Internet Explorer 6, por ejemplo, no reconoce estos nuevos elementos HTML5. Por tanto, losignorar.En cada uno de esos elementos, aadiremos contenido en los elementos standard HTML 4.1.Esta es la estructura final del documento de test:

Mi documento en HTML5 Mi pgina Web en HTML5 Link 1 Link 2 Lunes Donec ullamcorper... Martes Morbi leo risus... Mi pgina personal en HTML5

www.FreeLibros.me

Aadimos reglas CSS 2.1 para un formato sencillo:

header, nav, article, footer { width: 800px; margin: 0 auto; } header { border: 1px solid #333; background-color: silver; } h1 { text-align: center; } nav, article { border-bottom: 1px solid #333; } nav ul { margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } a { text-decoration: none; font-weight: bold; color: green; } h2 { color: #CC33FF; } p { margin-left: 20px; } footer { background-color: silver; }

Este formato CSS se aplica a elementos HTML5 (header, nav...) y HTML 4.1 (h1, h2, a...).Cmo interpretar Internet Explorer 6 esta pgina?Explorer ignorar todos los elementos desconocidos (, , ...), ya queno los conoce. Por tanto, si no los conoce, no podr aplicar su formato y las reglas CSS aplicadas aellos no se mostrarn.En cuanto a los elementos conocidos (, , ...), estos s se mostrarn, al igual que suformato CSS.Presentamos cmo se mostrara en un navegador reciente:

www.FreeLibros.me

Podemos ver todos los elementos.As es como se mostrara en Internet Explorer 6:

Internet Explorer 6 no conoce el elemento y, por tanto, lo ignora, al igual que su reglaCSS.Internet Explorer 6 conoce el elemento y su formato CSS, entonces lo mostrarcorrectamente.Dado que el formato CSS de la lista de vnculos ( y ) declarado en el elemento nav, esdesconocido para Internet Explorer 6, este no se muestra.Internet Explorer 6 conoce el color de los vnculos declarado en el elemento a y s lo muestra.ltima especificacin: si bien Internet Explorer pasa por alto los elementos desconocidos, ello noquiere decir que los elimine del cdigo fuente. Los elementos HTML5 desconocidos estarnpresentes en el cdigo fuente, pero no sern interpretados.

www.FreeLibros.me

10. Este libro y la evolucin del HTML5En definitiva, deber saber que el trabajo de investigacin an no ha terminado, que se encuentraen evolucin permanente y que los cambios son continuos. Esto quiere decir que las especificacionespresentadas en este libro podran evolucionar: podran aparecer nuevos elementos, otroselementos podran definirse de otra manera, o podran modificarse, y otros elementos podrandeclararse obsoletos o incluso podran desaparecer.Observe que los borradores de la versin 5.1 estn accesibles y datan del 28 de mayo de2013:http://www.w3.org/TR/html51/

www.FreeLibros.me

La evolucin del CSS

1. La aparicin del CSSCon el HTML 3.2 se daba formato en HTML con los elementos especficos para ello: , ... ysus respectivos atributos face="arial,helvetica,sans-serif", size="3",align="center"... Implementarlo requera mucho tiempo, actualizarlo era molesto y no resultabaproductivo.Con la llegada del HTML 4 se hizo "limpieza" de los elementos que se podan usar, pero, sobre todo,lleg acompaado de la hojas de estilo en cascada, Cascading Style Sheet o CSS. La primerarecomendacin data del 17 de diciembre de 1996: http://www.w3.org/TR/REC-CSS1-961217.html

2. La utilidad del CSSLas hojas de estilo CSS permiten:

separar la estructura de las pginas y su contenido (HTML), del formato del texto y de lapgina,tener muchas ms posibilidades de formato y de presentacin de la pgina,definir un estilo una sola vez y poder aplicarlo tantas veces como se desee,evitar los errores causados por la repeticin,reagrupar todos los estilos,hacer actualizaciones de forma extremadamente rpida.

En resumidas cuentas, todo son ventajas.

3. Las versiones del CSSLa versin "level 1" data, como dijimos, de diciembre de 1996. La versin "level 2" data del 12 demayo de 1998. Se trataba de una versin muy ambiciosa, demasiado ambiciosa incluso! La grancantidad de novedades (fuentes, sntesis vocal...) no fueron adoptadas por los navegadores. Anteese "fracaso parcial" el W3C volvi a retomar el trabajo para publicar, en el perodo de 2004-2006,la versin level 2 revision 1, que se conoce como CSS 2.1. La versin 2.1 de las CSS fue publicadacomo Recommendation el 7 de junio de 2011.

4. La llegada del CSS3Los primeros borradores del CSS3 ven la luz en 1999. Esta vez, ante el importante volumen detrabajo, el W3C no public una recomendacin "descomunal", sino una veintena de "mdulos"independientes los unos de los otros. Esto resulta bastante prctico para los navegadores, quepueden as implementar las novedades progresivamente.En esta URL podr mantenerse informado de las novedades sobre elCSS3:http://www.w3.org/Style/CSS/current-work. Volveremos a hablar de esto con ms detalle enel captulo El camino hacia el CSS3".Las principales novedades de CSS3 son las posibilidades de:

aplicar imgenes a los bordes y aadir varios bordes,crear fondos con degradados y con imgenes mltiples,

www.FreeLibros.me

usar la transparencia con los colores y con los elementos,aplicar sombras a los elementos (cajas, texto, etc.),aplicar transformaciones, transiciones y animaciones a las propiedades y a los elementos,insertar fuentes con caracteres diversos,crear sitios web que se adapten a los distintos tamaos de pantalla.

5. La llegada del CSS4El CSS 2.1 an no tiene una recomendacin oficial, el CSS3 est en plena transformacin... aun as,el W3C ya ha empezado a trabajar en el CSS4. El ltimo borrador (Working Draft) sobre losselectores CSS4 se public el 2 de mayo de 2013: http://www.w3.org/TR/selectors4/

www.FreeLibros.me

El doctype

1. La sintaxis en HTML 4 y XHTML 1.0La primera lnea de todo documento HTML corresponde a la declaracin del tipo de documento,eldoctype. Esta DTD (Document Type Declaration) sirve para indicar qu versin del lenguaje HTMLse ha utilizado en el documento.Esta sera la DTD de un documento HTML 4.01 transicional:

Y esta sera la DTD de un documento XHTML 1.0 estricto:

En esta declaracin se indica el nombre de la DTD y se facilita la URL en la que los navegadorespodrn acceder a la fuente original de dicha declaracin. Su sintaxis no siempre resulta comprensiblepara todo el mundo, aprehenderla requiere tiempo y esfuerzo. Adems, seamos realistas, todosnosotros, y yo el primero, siempre nos hemos limitado a copiar y pegar esta lnea de un proyecto aotro.

2. La sintaxis en HTML5La declaracin de la DTD en HTML5 no puede ser ms sencilla:

Lo ms sorprendente, adems de la brevedad de esta sintaxis, es la ausencia del nmero deversin. Ahora bien, podramos preguntarnos lo siguiente: "Cmo sabr el navegador qu versin deHTML hemos usado en nuestro documento?".No debemos olvidarnos de que uno de los objetivos del HTML5 es el de dar soporte a las versionesanteriores y, tambin, a las futuras versiones del lenguaje. Precisamente, por ese motivo, indicar unnmero de versin ha quedado obsoleto, incluirlo no tendra absolutamente ninguna utilidad.Recordemos qu funcin tiene exactamente la DTD: esta declaracin no est destinada en absolutoa los navegadores, quienes, pase lo que pase, interpretarn y mostrarn sus pginas web,independientemente de la versin de HTML que haya (o no) indicado. La DTD se dirigeexclusivamente a los motores de validacin HTML/CSS.No debemos olvidarnos de que es posible ver la validacin como una forma de redactar undocumento web semntico, y no como un objetivo en s mismo. Los navegadores mostrarn siempreun documento web, aun cuando este no sea totalmente vlido.En estas tres URL podr validar la sintaxis de sus pginas web en HTML5:

http://validator.w3.org/http://jigsaw.w3.org/css-validator/http://HTML5.validator.nu/

www.FreeLibros.me

El documento HTML

1. La sintaxis en XHTML 1.0El elemento indica, en una pgina web, el inicio del contenido de la pgina HTML. Esta serala sintaxis completa en XHTML 1.0 estricto:

Nuevamente, la brevedad no es aqu la prioridad.

2. La sintaxis en HTML5En HTML5 lo que prima es la simplicidad, solo se conserva lo esencial. Esta sera la sintaxis enHTML5:

Bastar con precisar el idioma de la pgina. Eso es todo.Observe que es perfectamente posible omitir el elemento , la sintaxis ser vlida.

www.FreeLibros.me

La codificacin de los caracteres

1. La sintaxis en HTML 4 y XHTML 1.0Se suele indicar qu codificacin de caracteres se ha usado en una pgina web. Antes se indicabados veces: en un elemento meta, en la cabecera http, y en el contenido, con el atributo charset.En HTML 4.01 transicional:

En XHTML 1.0 estricto:

2. La sintaxis en HTML5Una vez ms, en HTML5 se le ha dado prioridad a la simplicidad:

Disponemos as de lo estrictamente necesario para una correcta gestin por parte de losnavegadores web.

www.FreeLibros.me

Los scriptsLa declaracin de los scripts tambin ha perdido importancia y la sintaxis es ahora ms concisa. Se hapasado de:

a:

Esta simplificacin se debe a que ahora se da por sentado que los scripts estn escritos enJavaScript. Por otro lado, qu otro lenguaje se podra usar, si no?

www.FreeLibros.me

Los estilos CSSPartiendo siempre del mismo principio: simplificacin y unificacin del lenguaje en la declaracin de losestilos CSS, se ha pasado de:

a:

www.FreeLibros.me

La sintaxis de los elementos

1. ObjetivosLos objetivos que persigue la sintaxis de los elementos HTML son la simplicidad (una vez ms!) y lapermisividad. El lenguaje HTML5 no es una evolucin del XHTML, HTML5 no tiene nada que ver con elXML. Por ese motivo ya no tenemos las reglas estrictas de sintaxis del XHTML.

2. Las comillasLas comillas son facultativas para los valores de los atributos. Por ejemplo, para la codificacin delos caracteres podemos usar las tres sintaxis siguientes:

Con comillas simples, con comillas dobles o sin comillas, en los tres casos la sintaxis ser vlida.En cambio, si un atributo tiene varios valores, ser obligatorio el uso de comillas dobles:

3. Los elementos con una nica etiqueta de aperturaAlgunos elementos HTML disponen de una nica etiqueta de apertura y no tienen etiqueta decierre:img, br, etc. En esos casos ser necesario indicar el cierre del elemento en la etiqueta deapertura usando /.Ejemplos:

En HTML5 no es obligatorio indicar el cierre de esas etiquetas.Ejemplos vlidos:

4. Los elementos con etiqueta de cierre facultativaEn HTML 4 no es obligatorio incluir la etiqueta de cierre de ciertos elementos. Citemos algunos: ,, ... En XHTML, cada vez que se abre una etiqueta es obligatorio cerrarla. HTML5 retomala sintaxis permisiva del HTML 4. As, el siguiente ejemplo sera vlido en HTML5: Mi prrafosin etiqueta de cierre.

5. Las maysculas y minsculasHTML5 acepta sin problemas las maysculas y las minsculas en la sintaxis de los elementos y de losatributos. Los siguientes ejemplos son totalmente vlidos en HTML5:

www.FreeLibros.me

Es cierto que vistos as, esos ejemplos dan ganas de echarse a correr! Ms adelante veremos que,a pesar de todo, es preferible respetar ciertas normas de uso.

6. Los atributos boleanosAlgunos atributos solamente admiten valores boleanos a la hora de aplicar dicho valor.Este sera el ejemplo de una casilla que aparece seleccionada desde que se abre la pgina web. Setrata del uso del valor checked para el atributo checked.

Resulta redundante indicar ambos parmetros. En HTML5, la simple presencia del atributo essuficiente:

Nuevamente, se ha dado prioridad a la concisin de la sintaxis.

7. Los elementos HTML, HEAD y BODYEn cuanto a concisin se refiere, el HTML5 ha hecho un gran esfuerzo, colosal incluso: loselementoshtml, head y body son ahora facultativos.Este sera un documento HTML totalmente vlido y que se visualizara correctamente:

Mi primer documento HTML5 Esto es HTML5 Mi contenido

Se visualizar as:

Si examina el cdigo fuente, podr ver que los navegadores aaden ellos mismos los elementosHTML que faltan.

www.FreeLibros.me

Como puede ver, los elementos , y tambin son facultativos.

8. La sintaxis recomendadaAcabamos de ver que el HTML5 es muy permisivo. Podemos escribir nuestro cdigo como prefiramos,casi podramos decir que de cualquier manera! La ventaja de esto es que ofrece una granflexibilidad, con muy pocas restricciones. La principal desventaja reside en que las pginas asredactadas no se parecern a nada de lo que ya conocemos, de modo que cada diseador webdeber analizar durante "cierto tiempo" las pginas HTML de un proyecto "mal redactado" en lasque deba trabajar, antes de comprender lo que tiene entre manos. Al ser demasiado permisivos,nos exponemos a perder el lenguaje comn, que todos conocemos y usamos.Por ese motivo le recomiendo que respete la sintaxis del XHTML. Se trata de una sintaxis quetodos conocemos, ha sido adoptada por todos los creadores de sitios web, es la misma para todos yforma parte de las "prcticas recomendadas" para los diseadores web.Respetemos las normas de uso y de sintaxis del XHTML:

usar solamente minsculas,usar siempre las comillas,cerrar con / las etiquetas que se auto-cierran,cerrar los elementos para los cuales la etiqueta de cierre sea facultativa,sangrar el cdigo para aumentar la legibilidad.

www.FreeLibros.me

Los elementos obsoletos

1. Qu es un elemento obsoleto?En la especificacin del HTML5, determinados elementos se consideran "obsoletos". Un elementoobsoleto es un elemento que no ha sido declarado en la especificacin del HTML5. Sin embargo,como el HTML5 debe ser compatible con las versiones anteriores, los elementos HTML obsoletosseguirn siendo interpretados correctamente por los navegadores.Una pgina web que use elementos HTML obsoletos se visualizar correctamente, aunque losmotores de validacin la consideren como "no conforme".Esta es la URL de los elementos obsoletos del sitio web delW3C:http://www.w3.org/TR/html5/obsolete.html

2. Para una mejor accesibilidadLos marcos, antiguo elemento de concepcin de pginas web, se han declarado obsoletos, paraalegra de la accesibilidad de los sitios web y del posicionamiento en buscadores.Los elementos HTML , y no se deben usar.

3. Los elementos en desuso o mal utilizadosLos elementos , y se han declarado obsoletos.

www.FreeLibros.me

Los elementos redefinidosEn HTML5 se ha redefinido la funcin de determinados elementos HTML, en lugar de declararlosobsoletos. Esos elementos estn relacionados con el texto, as que los veremos en el captulodedicado al texto.

www.FreeLibros.me

Los atributos obsoletosLa lista de atributos obsoletos es larga. Los atributos que se consideran obsoletos han sidoremplazados por el CSS, que es ms eficaz. Para consultar la lista completa de los elementosobsoletos, acceda a la siguiente URL del sitio web delW3C:http://www.w3.org/TR/html5/obsolete.html

www.FreeLibros.me

Nuevos elementosHTML5 introduce algunos elementos nuevos. No debemos olvidarnos de que la especificacin delHTML5 se encuentra en continua evolucin, por lo que es posible que aparezcan otros elementosnuevos tras la redaccin de este libro. Esta lista no es exhaustiva.

1. El elemento En HTML 4, si usted quera incluir un ttulo y un subttulo en una pgina web, poda utilizar estasintaxis:

Mi sitio web Un sitio web sobre la creacin de sitios web

En este ejemplo, nada indica que exista un subttulo.Tambin podra haber usado esta sintaxis:

Mi sitio web Un sitio web sobre la creacin de sitios web

En ese caso, el resto de ttulos de la pgina deberan usar las etiquetas de ttulo que vande a .Con HTML5, el elemento permite agrupar los elementos del encabezado detipo a. Resulta prctico para incluir en una pgina un ttulo y un subttulo, perfectamentedefinidos desde un punto de vista semntico.Esta sera la sintaxis que debera usarse:

Mi sitio web Un sitio web sobre la creacin de sitios web

Los elementos dentro de no tienen que empezar necesariamente con , sinoque pueden tener el nivel de ttulo que usted prefiera. En otras palabras, no es obligatorio seguiruna jerarqua estricta a la hora de usar las etiquetas . Se trata simplemente de una lista deelementos que se pueden combinar unos con otros. El objetivo de no es el de crearun ndice.

Atencin, este elemento, propuesto en otro tiempo por el W3C, se considera en la actualidadobsoleto (vase la ltima lista de elementos obsoletos con fecha de 6 de agosto de

2013:http://www.w3.org/TR/html5/obsolete.html).

2. El elemento Este elemento permite indicar que su contenido est relacionado con el factor tiempo: fecha y/ohora. Simplemente aporta un valor semntico, no se mostrar automticamente la fecha o la hora.Estos seran algunos ejemplos de su sintaxis:

La fecha de hoy es: 05/09/2013 Hoy es 5 de septiembre.

Puede usar el atributo datetime para indicar la fecha o la hora en formato ISO 8601www.FreeLibros.me

(http://es.wikipedia.org/wiki/ISO_8601):

La fecha de hoy es: 5 de septiembre.

Tambin puede utilizar el atributo pubdate. Este atributo permite especificar que la fecha indicadaes aquella de la publicacin del ancestro ms cercano del elemento .

3. El elemento Este elemento permite resaltar un texto dentro de un texto ms general.Veamos un ejemplo:

La nueva versin del lenguaje HTML es HTML5.

El texto aparecer resaltado por lo general con un fondo amarillo.

4. El elemento Este elemento permite definir una medida determinada dentro de un contexto de valoresespecficos. Dicho elemento utiliza seis atributos:

value: el valor del dato en la escala utilizada.min: el mnimo posible.low: el mnimo alcanzado.max: el mximo posible.hight: el mximo alcanzado.optimum: el valor mnimo ideal.

Veamos un ejemplo:

Usted ha obtenido la nota de 8 sobre 10:

Cada navegador podr mostrarlo como prefiera. Esta sera la visualizacin con Google Chrome:

5. Los elementos y El elemento permite presentar un resumen de la informacin que se facilitar con elelemento .Ejemplo:

www.FreeLibros.me

Haga clic para consultar todos los detalles de su pedido. Estos son los detalles de su pedido... Y bla bla bla...

Cada navegador podr decidir cmo desea mostrar esos detalles. Esta sera la visualizacin conGoogle Chrome:

Si hace clic en el triangulito de la izquierda podr acceder a los detalles:

Puede utilizar el atributo open en el elemento . Esto permitir indicar si los detallesdeben abrirse -es decir, estar visibles-, cuando se cargue la pgina.

Haga clic para consultar todos los detalles de su pedido Estos son los detalles de su pedido... Y bla bla bla...

Este es el resultado:

6. El elemento El elemento (word break) permite proponer cesuras dentro de las palabras o frases. Estoayudar a que los motores de transcripcin efecten las cesuras en el lugar que nos parezca msapropiado. Observe que no crean una pausa, no posicionan un guion, simplemente proponen a losmotores de transcripcin un lugar por donde cortar. Nosotros deberemos situar el elemento alldonde deseemos proponer una pausa adecuada.Ejemplo:

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget

www.FreeLibros.me

metus. Maecenas sed diam eget risus varius blandit sit amet non magna. La palabra hexakosioihexekontahexaphobie quiere decir miedo al nmero 666

Vista con una anchura considerable donde las cesuras no intervienen:

Vista con una anchura reducida donde intervienen las cesuras:

Segundo ejemplo de cesura:

7. El elemento El elemento permite aislar un texto que tenga una direccin de lectura diferente, como elrabe, que se lee de derecha a izquierda.Ejemplo:

Redactor caubry: 12 artculos. Redactor miriam: 5 artculos. Redactor : 3 artculos.

Que se visualizara as:

8. El elemento El nuevo elemento permite crear barras de progresin para las tareas. El movimientode la barra de progresin se puede hacer con la ayuda de los atributos o bien con JavaScript. Este sera un ejemplo de barra de progresin con dos atributos: value, para indicar el valoractual, y max, para indicar el valor mximo de la tarea.

Los nuevos elementos de HTML5 Progresin de la tarea: 40%

www.FreeLibros.me

Nuevamente, el navegador podr decidir cmo desea mostrarlo. Esta sera la visualizacin conGoogle Chrome:

9. Los elementos relacionados con los idiomas asiticosEl elemento le permite insertar texto en un idioma asitico. El elemento permiteespecificar la pronunciacin de las palabras y el elemento permite insertar parntesis aambos lados de un texto en un idioma asitico para ocultar determinados caracteres.

10. Los elementos y El elemento permite agrupar todos los elementos constitutivos para insertar unaimagen: la imagen (elemento ) en s misma (o una foto, vdeo, animacin, etc.) y su leyendacon el nuevo elemento .Este sera un ejemplo:

Fotografa de una Sarracenia de mi jardn. sarracenia purpurea

As es como se vera:

www.FreeLibros.me

Tipos de contenido de los elementosEl HTML 4 estableca dos tipos principales de contenido: en lnea (inline) y en bloque (block).El HTML5 presenta una lista de tipos de contenido ms completa(http://www.w3.org/TR/html5/dom.html#content-models). Adems, determinados elementos puedenpertenecer a varios tipos diferentes, dependiendo del contexto en que se usen.Tenemos:

Metadata content: para los elementos de enlace entre los documentos, los elementos depresentacin o los elementos de comportamiento del contenido(base, command, link,meta, noscript, script, style y title).Flow content: para los elementos utilizados en el cuerpo de la pgina(a, article,blockquote, details, label, table...).Sectioning content: para los elementos de la estructura (article, aside, nav y section).Heading content: para los elementos de encabezado de la seccin (h1 a h6 y hgroup).Phrasing content: para los elementos de texto(a, abbr, button, canvas, em, span,strong...).Embedded content: para los elementos insertados(audio, canvas, embed, iframe, img,math, object, svg y video).Interactive content: para los elementos que impliquen interactividad con los usuarios(a,audio, button, input, label video...).

As lo representa grficamente el W3C:

Tenga en cuenta que el nico objetivo de esta clasificacin es el de organizar y clasificar los distintoselementos HTML. Esto no tendr ningn efecto, ni determinar de ninguna manera la forma en la quese visualizarn dichos elementos (consulte el apartado siguiente). Lo que queremos decir es que estaclasificacin no tendr repercusiones reales en el diseo web de nuestras pginas web.

www.FreeLibros.me

La visualizacin de los elementos

1. En HTML 4El HTML 4 "ordenaba" los elementos en funcin del tipo de visualizacin en los navegadores(http://www.w3.org/TR/html4/struct/global.html#h-7.5.3). Los elemento de tipo block se visualizana continuacin unos de otros. Es el caso de los prrafos , los ttulos , las cajas ...Los elementos de tipo inline se muestran uno al lado del otro, en la lnea de texto. Es el caso delos vnculos , de las divisiones , de los estilos , ...Tambin tenemos la visualizacin: inline-block, list-item, table, table-row...Las reglas de imbricacin establecen que:

un elemento inline solo puede contener otros elemento inline y datos, es decir, texto.un elemento block puede contener otros elemento block, as como elementos inline.

Sin embargo, con la propiedad display podemos cambiar sin problemas el tipo de visualizacin.As, con display: block es posible visualizar un vnculo como si fuera un bloque y de estemodo presentar todas las caractersticas propias de los bloques.

2. En HTML5En HTML5 esta "clasificacin" ha quedado obsoleta. Es ms, ya no se considera como un tipo declasificacin. Esto quiere decir que es usted, el autor del sitio web, quien deber indicar cmo sedeben visualizar los distintos elementos. De lo contrario, se aplicar la hoja de estilopredeterminada de cada navegador.Usted podr insertar sin problemas un elemento que contenga un ttulo y unaimagen, siempre y cuando especifique el modo de visualizacin de cada uno de los elementosen las hojas de estilo CSS con la propiedad display.Esta estructura sera correcta en HTML5:

Inicio

Los estilos CSS:

#inicio { display: block; } #titulo, #triangulo { display: inline; }

Vista:

www.FreeLibros.me

Los elementos de la estructura en HTML 4

1. Las cajas En HTML 4, el elemento principal para estructurar las pginas web es la famosa "caja ". Con elelemento es posible crear zonas de visualizacin de forma rectangular. Cada una de esaszonas, de esas cajas , puede ser identificada de manera exclusiva, mediante un cdigo deidentificacin, y de ese modo podemos aplicarle un formato con CSS. Ese cdigo de identificacinnico se establece con el atributo id.Ejemplo:

...

Tambin podemos usar las clases, cuando este formato se repita en la pgina y no se trate, por lotanto, de un formato nico.Ejemplo:

...

A continuacin, una vez que haya determinado la estructura, podr aplicar el diseo con las hojasde estilo CSS, mediante los selectores de identificacin que correspondan al cdigo de identificacino a la clase en cuestin.Ejemplo:

#bannerSuperior { ... } .comentarios{ ... }

En el siguiente ejemplo podemos ver la estructura de una pgina de tipo blog con cajas :

www.FreeLibros.me

2. La "divitis"Con HTML 4 y CSS 2.1, la estructura de las pginas, cuando esta es relativamente compleja, puederequerir una gran cantidad de cajas . Podemos llegar a crear pginas que contengandecenas y decenas de . Si usted cae en ese exceso, habr contrado la enfermedad llamada"divitis", es decir, el uso excesivo de cajas .

3. Un contenido no semnticoTodas esas cajas presentan otro problema: el de la semntica de los contenedores. Cadacaja se distingue de las dems gracias a su cdigo de identificacin nico, que el diseadorweb le habr asignado en funcin de su "humor" o de sus "ganas" en ese momento.Por ese motivo, las cajas no son semnticas: el contenido esperado no est definido porningn parmetro. Una caja identificada con id="izquierda" no nos aporta ningn datosobre su contenido. Podra tratarse de una barra de navegacin, de informacin legal o de cualquierotro tipo de contenido.Ahora bien, la evolucin del HTML se dirige hacia un mayor uso de la semntica.

www.FreeLibros.me

Los elementos de la estructura en HTML5

1. Los nuevos elementos de la estructuraCon el HTML5 llegan nuevos elementos de estructura semntica. Estos nuevos elementos han sidodefinidos y se les ha asignado un nombre tras un largo anlisis de los nombres ms usados en lascajas .

2. El elemento El nuevo elemento permite insertar una zona de visualizacin para las cabeceras. Puededefinirse esta cabecera para toda la pgina o para una zona determinada: artculo, men lateral... Debemos considerar que este elemento se puede usar desde dos puntos de vista:

a nivel de la pgina: es la tpica cabecera de la pgina, que a menudo aparece en lo alto de lapantalla, con un logotipo, un eslogan, un men de navegacin principal...a nivel del contenido: permite disponer de una zona de introduccin del contenido que seincluya a continuacin.

Esta es la definicin del W3C para el elemento : "The header element represents a group ofintroductory or navigational aids. A header element is intended to usually contain the sectionsheading (an h1-h6 element or an hgroup element), but this is not required. The header element can alsobe used to wrap a sections table of contents, a search form, or any relevant logos."Como puede ver, el elemento no tiene que aparecer obligatoriamente en la estructurade la pgina.

3. El elemento El nuevo elemento permite insertar una zona de visualizacin para los pie de pgina.Volvemos a encontrarnos con la misma semntica de los encabezados. Es posible definir un pie depgina para la pgina completa, o bien para cualquier otra zona de visualizacin o para un artculo. Esta es la definicin del W3C: "The footer element represents a footer for its nearest ancestorsectioning content or sectioning root element. A footer typically contains information about its sectionsuch as who wrote it, links to related documents, copyright data, and the like."Su uso es similar al de los , pero aplicado a los pie de pgina. Por lo tanto, no debemosseguir al "pie de la letra" la traduccin literal de "pie de pgina". Se trata ms bien de un "pie dezona de visualizacin", donde la zona de visualizacin puede ser una pgina, una seccin, unartculo...

4. El elemento El elemento , como su nombre indica, est pensado para la visualizacin de una zona denavegacin con vnculos hipertexto. Cuidado, no quiere decir que solo podr tener una zona denavegacin en cada pgina, o que tenga que crear tantos elementos como zonas denavegacin haya en sus pginas, bastar con que los identifique correctamente. Elelemento est pensado en especial para la navegacin principal del sitio web, para lainsercin de vnculos entre las pginas de dicho sitio web.La definicin del W3C es bastante clara: "The nav element represents a section of a page that links toother pages or to parts within the page: a section with navigation links. Note: Not all groups of links on apage need to be in a nav element - the element is primarily intended for sections that consist of major

www.FreeLibros.me

navigation blocks. In particular, it is common for footers to have a short list of links to various pages of asite, such as the terms of service, the home page, and a copyright page. The footer element alone issufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary."

5. El elemento El elemento permite agrupar elementos que tengan la misma temtica. De este modopodemos agrupar en un mismo elemento un contenido, con su ttulo y su pie de pgina.Esta es la definicin del W3C: "The section element represents a generic section of a document orapplication. A section, in this context, is a thematic grouping of content, typically with a heading."

6. El elemento El elemento permite insertar un contenido autnomo, que puede volver a usarse enotro lugar del sitio web, sin que por ello se anule su significado.Esta es la definicin del W3C: "The article element represents a self-contained composition in adocument, page, application, or site and that is, in principle, independently distributable or reusable, e.g.in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content."Claro est, un artculo podra tener una cabecera (), un pie de pgina () yvarios ttulos ().

7. El elemento El elemento permite mostrar un contenido relacionado con el contenido al cual estvinculado. Puede tratarse de barras laterales (sidebars), de zonas de widgets, de complementossobre artculos, etc.

8. El elemento ltimo en llegar a los borradores del W3C, el elemento permite representar el contenidoprincipal de la pgina.La definicin del W3C lo indica bien: The main element represents the main content of the body of adocument or application. The main content area consists of content that is directly related to orexpands upon the central topic of a document or central functionality of an application.De esta forma, una pgina podr estar perfectamente estructurada con un elemento parael contenido de la pgina, un encabezamiento , contenidos con elementos yun pie de pgina .

www.FreeLibros.me

El W3C indica una serie de restricciones para el uso del elemento :un solo elemento por pgina,no debe utilizarse dentro (elemento descendente) de los elementos , ,, o ,debera estar asociado con el role main () para una mejoraccesibilidad de los sitios Web.

9. Las cajas Y, por ltimo, quiero aclarar que aunque use HTML5 no tiene por qu erradicar el uso de lascajas. Todava podemos usarlas y siguen teniendo su utilidad!

www.FreeLibros.me

El atributo semntico "role"El XHTML (http://www.w3.org/1999/xhtml/vocab/#XHTMLRoleVocabulary) y el XHTML2 WorkingGrouppreconizaban el uso del atributo role (http://www.w3.org/TR/xhtml2/mod-roleAttribute.html)para definir de forma ms semntica los elementos estructurales de una pgina web.En HTML5 podemos usar el atributo role para incluir esa informacin adicional gracias al mdulo WAI-ARIA (http://www.w3.org/TR/aria-in-html/ en working Draft a 3 de octubre de 2013). Este mdulo seocupa de la gestin del contenido de las pginas web para la personas discapacitadas. Determinadoselementos HTML5 tienen un role implcito, como, por ejemplo, el elemento ,cuyo roleimplcito es navigation.Estos son los principales valores del atributo role:

main: define el contenido principal de un documento.secondary: define una parte secundaria del documento.navigation: define la barra de navegacin del documento.banner: aparece por lo general en lo alto de la pgina y suele contener el logotipo y eleslogan de la empresa.contentinfo: indica que dicho elemento aporta informacin sobre el contenido de la pgina(autores, copyrights, menciones legales...).definition: presenta la definicin de un elemento.note: corresponde, por lo general, a una nota entre parntesis o al final de la pgina.seealso: indica que el elemento contiene informacin relacionada con el contenido principalde la pgina.search: contiene el formulario de bsqueda de una pgina web.

Veamos un ejemplo simple de cmo usarlo:

...

Otro ejemplo:

...

Si desea obtener ms informacin sobre Accessible Rich Internet Applications (WAI-ARIA),consulte la Candidate Recommendation del 18 de enero de 2011: http://www.w3.org/TR/2011/CR-wai-aria-20110118/

www.FreeLibros.me

Ejemplos de estructura en HTML5

1. Una estructura simpleSi volvemos a tomar como ejemplo la estructura de pgina que usamos al principio de este captulo,podremos modificarla para adaptarla al HTML5.

En el elemento encontraremos los elementos del encabezado de la pgina, como ellogotipo y el eslogan, por ejemplo.En el elemento , situado a la izquierda, encontraremos los vnculos que nos permitirnnavegar por ese sitio web.Todos los artculos del blog estarn colocados, por supuesto, dentro de los elementos . Por ltimo, el pie de pgina, , podr contener las menciones legales o los vnculos decontacto, por ejemplo.

2. Una estructura ms elaboradaVeamos ahora la estructura de un sitio web un poco ms elaborado.

www.FreeLibros.me

Encontramos de nuevo el elemento , que ya todos conocemos.Debajo tenemos el primer elemento , para el men de navegacin general del sitio web, quenos permitir navegar por las distintas pginas.A la izquierda tenemos una segunda caja , para la navegacin secundaria, que contiene losvnculos relacionados directamente con el contenido de la pgina en cuestin.A la derecha encontramos el elemento , que muestra informacin relacionada con elcontenido de la pgina, como los vnculos promocionales o los contenidos relacionados, por ejemplo.El contenido de la pgina aparece dentro de dos elementos , de modo que podamosdistinguir con facilidad esos dos contenidos diferentes. Cada contiene unelemento para el contenido textual y un elemento para incluir los elementos deinformacin adicional relacionados con el artculo (iconografa, enlaces...).Por ltimo, la pgina presenta un pie de pgina que contiene la informacin legal, lascondiciones de venta, un vnculo de contacto, un plano de acceso...Claro est, cada elemento de la estructura deber contar con un cdigo de identificacin nico o conuna clase comn para varios elementos.

3. La estructura de un artculoVeamos ahora la estructura de lo que podra ser un artculo de un sitio web en HTML5.

www.FreeLibros.me

Tenemos un elemento como contenedor general.Nuestros artculos presentan cabeceras, introducciones, por lo que hemos usado elelemento. Este elemento contiene el ttulo del artculo y susubttulo .El contenido textual del artculo se sita entre los elementos . El artculo incluye vnculos, quecompletan el contenido facilitado, ordenados en una lista .Por ltimo, el artculo presenta un pie de pgina o, mejor dicho, un "pie de artculo", conla fecha de la publicacin, la seccin a la que pertenece dicho artculo y el nombre del autor, porejemplo.

www.FreeLibros.me

Las tcnicas de formatoLas tcnicas para dar formato a la pgina, con las cajas flotantes o las formas de posicionamiento, sepueden aplicar perfectamente a los nuevos elementos HTML5.

www.FreeLibros.me

Plantillas para sitios web en HTML5Desde que se public HTML5, multitud de diseadores web han creado plantillas de diseo de sitiosweb (en ingls, templates) que utilizan HTML5.

www.FreeLibros.me

La plantilla ArchiteXture

1. La fuenteEsta es la URL de la plantilla: http://freehtml5templates.com/architexture-html5-and-css3-template/.A partir de esta direccin podremos probarla en lnea y descargar los archivos fuente.

2. El diseo del sitio webObserve el diseo de esta plantilla, que como ve, es bastante sobrio.

Podemos distinguir fcilmente las cuatro "zonas" de visualizacin del sitio web:el men de navegacin en la parte superior,el banner de presentacin del sitio web, que contiene el nombre, un eslogan y un logotipo,

www.FreeLibros.me

la zona central, que muestra informacin general en el lado izquierdo y los artculos en laparte derecha,el pie de pgina, que contiene los vnculos, en la parte inferior.

3. La estructura generalLa estructura general del sitio web refleja fielmente la presentacin visual.Tenemos una caja que sirve de contenedor general y que permite centrarel sitio web en la ventana del navegador.Encontramos a continuacin el elemento , que contiene el men de navegacin de la parte dearriba. El diseador ha empleado correctamente el elemento , ya que lo ha usado parainsertar el men de navegacin principal del sitio web.La informacin general del sitio web se ha insertado en un elemento . Resulta bastanteacertado, ya que se trata de informacin general que se mostrar en todas las pginas del sitioweb. Efectivamente, se trata de una cabecera de pgina de sitio web.La zona central del sitio web es un elemento . Una seccin es una zona de visualizacinque rene elementos con una temtica similar. En el ejemplo se trata, simplemente, de mostrar esoselementos en la zona central de la pgina.El pie de pgina es, lgicamente, un elemento .Veamos la estructura de las cajas:

4. El cdigo de la estructuraVeamos el cdigo HTML5 de la estructura de este sitio web:

www.FreeLibros.me

ArchiteXture ... ... ... ...

5. El men de navegacinEl men de navegacin () contiene una caja que incluye la clsica lista () devnculos.Este es el cdigo:

Home About Products Services Locations Contact Us

La visualizacin del men de navegacin:

6. El banner de presentacin

www.FreeLibros.me

El banner de presentacin () contiene una caja con el logotipo, un ttulo denivel 1 () y un prrafo.Este es el cdigo:

ArchiteXture Praesent libero...

La visualizacin del banner de presentacin:

7. La zona centralLa zona central del sitio web se ha insertado en un elemento . Estecontiene a su vez otra caja para mostrar el contenido propiamentedicho del sitio web, los artculos de la parte derecha, y un elemento para mostrar informacin general en la parte izquierda.El elemento contiene, lgicamente, los elementos paralos distintos artculos del sitio web. Cada artculo contiene ttulos y prrafos .El elemento contiene diversos elementos: ttulos , listas e imgenes .Esta es la estructura de las cajas:

Veamos el cdigo de la zona central:

www.FreeLibros.me

First Article Title Lorem ipsum dolor... Second Article Title Lorem ipsum... Things To Do Play Games and Network Chat With Friends Sponsors Connect With Us Twitter Facebook

As se presenta la zona central, :

8. El pie de pginaEl pie de pgina utiliza el elemento . Este contiene dos cajas para obtener eldiseo deseado. Dentro de la segunda caja encontramos cuatro elementos , quecorresponden a las cuatro zonas de visualizacin.Este es el cdigo:

www.FreeLibros.me

Friends one linkylink two linkylinks ... ... ...

Y el diseo obtenido:

www.FreeLibros.me

La plantillaDaFrontPage

1. La fuenteEsta es la URL de dicha plantilla: http://freehtml5templates.com/dafrontpage-html5-and-css3-template/. A partir de esta direccin podremos probarla en lnea y descargar los archivos fuente.

2. El diseo del sitio webAs se presenta esta plantilla, al estilo de una revista.

www.FreeLibros.me

3. La estructura generalLa estructura general del sitio web aparece dentro de una caja .

www.FreeLibros.me

El ttulo del sitio web se encuentra dentro de un elemento de ttulo de nivel 1: .El men de navegacin se incluye, como caba esperar, dentro de un elemento .El artculo resaltado en la parte superior se encuentra dentro del elemento de la pgina.La estructura de tres columnas se encuentra dentro de un elemento , ya que las trescolumnas presentan un contenido similar.Por ltimo, el pie de pgina aparece, claro est, dentro de un elemento .Veamos la estructura de las cajas:

Veamos el cdigo de la estructura general:

Da Front Page Da Front Page ... ...

www.FreeLibros.me

... ...

4. El ttulo del sitio webEl ttulo del sitio web ha sido insertado dentro de un elemento .Da Front Page

5. El men de navegacinEl men de navegacin aparece lgicamente dentro de un elemento . En una caja ,todos los vnculos estn ordenados con la clsica lista .Este es el cdigo que se ha usado:

Top News National ...

La visualizacin del men de navegacin:

6. El encabezado del sitio webEn el elemento encontramos el artculo "en portada". Es el diseador del sitio web quienha querido mostrar un artculo como cabecera del sitio web. Siguiendo la lgica semntica, esteartculo se mostrar en todas las pginas del sitio web.

www.FreeLibros.me

El elemento contiene dos cajas : una para mostrar la imagen y otra para elcontenido textual.Este es el cdigo que se ha usado:

Fans Mourn Pop Singers Tragic Death Duis sagittis ipsum... Class aptent...

7. La zona centralLa zona central del sitio web, que contiene los artculos en columnas, utiliza elelemento. Este contiene dos elementos para presentar las dos series de artculos en tres columnas.Cada elemento contiene tres elementos . Ycada elemento contiene, como es lgico, un artculo, que incluye elementos paralos vnculos, para las imgenes y para los prrafos.Veamos la estructura de los artculos en columnas:

www.FreeLibros.me

Este es el cdigo que se ha usado:

Protest Outside Courtroom By Jeffrey Wiggins Duis sagittis ipsum... ... ... ... ... ...

As se presenta la zona central con los artculos:

www.FreeLibros.me

8. El pie de pginaEl pie de pgina usa dos cajas para su presentacin. Cada una de las cuatrozonas de visualizacin utiliza un elemento .Esta es la estructura del pie de pgina:

www.FreeLibros.me

Y este es el cdigo que se ha usado:

Friends one linkylink two linkylinks ... ... ... ...

As se visualiza el pie de pgina:

www.FreeLibros.me

La plantilla Learning Center

1. La fuenteEsta es la URL de dicha plantilla: http://www.templatemonster.com/free-templates/free-website-template-learning-center.php. A partir de esta direccin podremos probarla en lnea y descargar losarchivos fuente.

2. El diseo del sitio webVeamos el diseo de esta plantilla, de tipo portal web para centros educativos.

www.FreeLibros.me

3. La estructura generalEl sitio web se compone de dos cajas , que utilizan dos clases CSS.La primera caja permite visualizar la parte superior del sitio web. Estacontiene a su vez una caja que se ha usado para aplicar el diseo. Enesta caja encontramos un elemento que corresponde a la parte superior del sitio web,la cabecera.

www.FreeLibros.me

La segunda caja permite visualizar la parte inferior del sitio web. Estacontiene a su vez una caja que se ha usado para aplicar el diseo. Estacaja contiene un elemento para la visualizacin de la zona centraldel sitio web.

A continuacin tenemos una caja para la visualizacin del pie de pgina del sitio web.

Esta es la estructura general:

www.FreeLibros.me

4. La cabeceraComo acabamos de ver, el elemento se encuentra dentro de dos cajas . Esteelemento contiene a su vez tres cajas para las tres partes de la cabecera y unalista :

el men de navegacin,el ttulo "Learn Center",el eslogan,los tres grandes botones en una columna.

www.FreeLibros.me

5. El men de navegacinEl men de navegacin utiliza, como caba esperar, el elemento , que contiene unalista con todos los vnculos. Los tres vnculos de la derecha para las redes sociales se incluyenen otra lista .

Este es el cdigo de la primera caja : About Courses Programs Teachers Admissions Contacts

6. La continuacin de la cabeceraA continuacin, la cabecera presenta las tpicas cajas , un ttulo y una lista :

www.FreeLibros.me

Learn Center We Will Open The Worldof knowledge for you!

7. Los artculos resaltadosVeamos con mayor detalle la estructura que permite visualizar los artculos resaltados en la partesuperior de la zona central.

La zona central del sitio web es un elemento que se encuentradentro de dos cajas .Los tres artculos resaltados en la parte superior de la zona central se visualizan lgicamentegracias a tres elementos .La imagen que ilustra cada artculo se ha insertado gracias al elemento .Como puede ver, esta plantilla utiliza correctamente los nuevos elementos de estructura del HTML5.

www.FreeLibros.me

Este es el cdigo que se ha usado para la presentacin de los tres artculos resaltados:

Our Mission Statement ... ...

8. La continuacin de la zona centralLa continuacin de la zona central sigue la misma lgica, con loselementos y.

9. El pie de pginaEn el pie de pgina tambin se usan los elementos para cada uno de los seis"bloques" de visualizacin. Personalmente, yo habra usado elementos .

www.FreeLibros.me

www.FreeLibros.me

WordPress y las plantillas HTML5WordPress (http://es.wordpress.org/) es a da de hoy el CMS (Content Management System osistema de gestin de contenido) ms popular para la creacin y la administracin de sitios web. Lapresentacin visual de los sitios WordPress se gestiona mediante plantillas de diseo que se conocencomo themes. La versin actual de WordPress, la 3.6, propone un tema que utiliza HTML5 de formapredeterminada, el tema twentythirteen.No vamos a hablar aqu del funcionamiento de las pginas web dinmicas en PHP de Wordpress, sinoque nos limitaremos al resultado HTML5 obtenido.Si desea aprender a usar WordPress, le recomiendo que consulte los libros, publicados tambin con laeditorial ENI:

WordPress 3.5 - Un CMS para crear y administrar blogs y sitios webWordPress 3.5 - Las mejores extensiones

1. El tema twentythirteenEl tema predeterminado de WordPress 3.6 es twentythirteen y est estructurado en HTML5.

www.FreeLibros.me

La estructura general del tema es la siguiente:Tenemos una caja que agrupa toda la estructura. Dentro de ella, tenemos trescajas:

una caja que contiene el encabezado del sitio con el vnculo ala pgina de inicio y la barra de navegacin. Tenemos un role definido.una caja con el contenido del sitio.una caja con el pie de pgina y los widgets. Tenemos tambinun role definido.

2. El encabezadoEl encabezado del sitio WordPress contiene una imagen de fondo y el ttulo con un vnculo paravolver a la pgina de inicio del sitio. Debajo se encuentra la barra de navegacin y el cuadro debsqueda de texto.

La caja general del identificador masthead con un role definido en banner. Contiene doselementos: un vnculo a la pgina de inicio () y una caja paranavegar y buscar ().El elemento que permite regresar a la pgina de inicio contiene dos elementos de ttulo:un para el nombre del sitio y un para su descripcin. No olvide que en HTML5 podemosimbricar sin problemas elementos de visualizacin habitualmente en bloques en elementos devisualizacin habitualmente en lnea, si el diseador define bien los valores de la propiedadCSSdisplay. En este tema, el elemento tiene display: block como propiedad CSS.La caja es la que contiene la barra de navegacin.La barra de navegacin est situada en el elemento (conunrole definido en navigation) y el campo de bsqueda en

role="search">.Esta es la estructura del encabezamiento:

3. La lista de entradasLa pgina de inicio clsica de los sitios web WordPress muestra una lista con las ltimas entradaspublicadas.

www.FreeLibros.me

Esta es la estructura de la pgina de inicio:

www.FreeLibros.me

La caja principal es , contiene dos cajasms :id="primary" y id="content". Esta ltima alberga la lista de entradas de lapgina de inicio.Cada entrada del sitio se encuentra en un elemento . Cada entrada posee unidentificador nico y numerosas clases para darle formato. Cada entrada contiene un ttulo ymetadatos, que son mostrados en un elemento . El contenido de las entradas, suredactado, se sita en la caja . Por ltimo, el link a loscomentarios se sita en el elemento .

4. El pie de pginaEl pie de pgina del tema twentythirteen contiene la zona de los widgets de WordPress y lainformacin sobre el uso de WordPress.

www.FreeLibros.me

Esta es su estructura:

El elemento principal es el de la pgina: . Este elemento contiene una caja . Esta, a su vez, contiene doscajas : una para los widgets () y otra para eluso de WordPress ().La caja de los widgets contiene tantoselementos como widgets ha situado el administrador del sitio.La caja contiene nicamente un elemento de vnculo .

5. Las entradas solasCuando un visitante hace clic en el ttulo de una entrada de la pgina de inicio, la entrada semuestra en una pgina sola, con el formulario de los comentarios.

www.FreeLibros.me

Esta es la estructura de una entrada sola:

www.FreeLibros.me

Las entradas se sitan en cajas con un identificador nico y numerosas clases quedependen de las caractersticas de publicacin de cada entrada: .Las entradas cuentan con un encabezado: que contiene elttulo de la entrada (en un ) y los metadatos (en una caja ).El contenido de redaccin de la entrada se inserta en una caja .De acuerdo con las propiedades de cada entrada, es posible que se produzca el uso de metadatos.Estos se situaran en el elemento .A continuacin encontramos elementos de navegacin que permiten pasar rpidamente de unaentrada a otra. Se trata del elemento que tambin posee un role definido.Por ltimo, el cuadro de comentarios y del formulario se sita en la caja .

www.FreeLibros.me

Anlisis de la situacin

1. Los mdulos en cursoPor supuesto, el W3C ya est trabajando en el CSS3. El objetivo del W3C no es crear y redactar unanica recomendacin, sino trabajar en multitud de mdulos que permitan organizar las propiedadesCSS. As, en lugar de crear una nica y "gigantesca" especificacin, resulta ms productivo y msrpido avanzar con varias especificaciones independientes.Para mantenerse informado de la evolucin de los mdulos CSS3, vaya a la siguiente URL delW3C:http://www.w3.org/Style/CSS/current-workEste es un pequeo extracto (diciembre de 2013):

Usted podr seguir la evolucin de la redaccin con las casillas de estado actual Status:REC: Recommendation. El mdulo est oficialmente terminado y se propone comoRecomendacin.PR: Proposed Recommendation. El mdulo est tcnicamente finalizado y se ha enviado supropuesta al comit del W3C.CR: Candidate Recommendation. El mdulo cumple con todos los requisitos segn el grupo detrabajo y se ha estudiado en profundidad su implementacin.LC: Last Call. An se est trabajando en el mdulo, pero se ha presentado oficialmente antelos otros grupos de trabajo del W3C y el pblico en general.WD: Working Draft. El mdulo se est elaborando, pero se pone a la disposicin de losmiembros del W3C y del pblico en general para su estudio tcnico.

www.FreeLibros.me

2. Consultar las especificacionesEs posible acceder a los distintos mdulos mediante el vnculo que indica su situacin actual.Usted deber consultar con regularidad los avances realizados para mantenerse informado de lasnovedades, las correcciones, las cancelaciones, las precisiones...Veamos por ejemplo el CSS que hace referencia a los fondos y a los bordes. En la lista anterior demdulos, haga clic en el vnculo CSS Backgrounds and Borders Level 3.

La pgina siguiente muestra el contenido del mdulo de acuerdo con la evolucin de los trabajos.

www.FreeLibros.me

www.FreeLibros.me

Los prefijos para los navegadores

1. Las especificaciones y las recomendacionesPodemos usar CSS3 desde ya? El problema siempre es el mismo: el W3C propone lasespecificaciones, pero son los navegadores quienes tienen la ltima palabra. Son los navegadoresquienes deben estar informados de las novedades y quienes deben implementarlas en su motor devisualizacin. Para los navegadores, seguir da a da las novedades es una autntica carrera contrareloj, es una misin imposible.

2. Los navegadores y el CSS3Para evitar el estancamiento, el W3C ha encontrado una solucin alternativa. Este le deja totallibertad a los navegadores a la hora de implementar las novedades gracias a un prefijo nico queespecifica qu navegador se debe usar. Cuando la especificacin alcanza el nivel CR, CandidateRecommendation, los prefijos ya no son necesarios.Estos son los prefijos de los navegadores (conocidos como prefijos propietarios):

-moz-: para el motor de renderizado Gecko de Mozilla Firefox.-webkit-: para el motor de renderizado WebKit de Safari y Chrome.-o-: para el motor de renderizado de Opera.-ms-: para el motor de renderizado de Microsoft Internet Explorer.-khtml-: para el motor de renderizado KHTML usado por varios navegadores en Linux.

Veamos un ejemplo concreto. Supongamos que queremos usar la propiedad border-radius quepermite crear esquinas redondeadas para las cajas .Esta sera la sintaxis necesaria para que sea reconocido en "todos" los navegadores:

header { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; }

Las primeras lneas son especficas para cada motor de visualizacin mencionado anteriormente. Laltima lnea corresponde a la propiedad estndar para todos los navegadores, quienes reconocernla propiedad "ms adelante", en cuanto el W3C la haya finalizado.El orden de las lneas es importante. Al colocar la propiedad "estndar" en ltimo lugar, nosaseguramos de que tendr prioridad sobre las lneas precedentes. Por lo tanto, deber indicarprimero las propiedades con prefijos, que puede que cambien, y colocar la propiedad "oficial" al final.Esta sintaxis puede parecer "pesada", pero se trata de la mejor solucin, ya que ofrece la mejorportabilidad de las propiedades en espera de la oficializacin.

3. Los generadores de prefijos en lneaPara los diseadores web, escribir multitud de veces esas lneas resulta fastidioso. Para evitarlo,existen numerosos servicios en lnea que permiten aadir los prefijos de las propiedades: los

www.FreeLibros.me

"generadores de prefijos".En la interfaz de la herramienta, simplemente deber introducir la propiedad o propiedadesdeseadas y el generador se encargar de crear toda la sintaxis.

header { border-radius: 10px; box-shadow: 0px 0px 10px rgba(10,20,30,.8); }

4. Net Tuts PrefixrEste sitio web (http://prefixr.com/) le propone una interfaz muy fcil de usar. Introduzca su cdigoCSS en el campo de texto, indique si desea excluir determinados prefijos y seleccione las opcionesde formato.

Haga clic en el botn Prefixize. Los prefijos se aadirn automticamente.

www.FreeLibros.me

5. -prefix-my CSSEste servicio (http://prefixmycss.com/) funciona de forma similar. En la parte inferior de la pantalla seindica la lista de las propiedades CSS3 admitidas. En el recuadro de la izquierda, 1. Paste your CSS,indique sus reglas CSS y luego haga clic en el botn Prefix!. Las reglas CSS con los prefijosaparecern en el recuadro 3.Get your -prefixed-CSS.

www.FreeLibros.me

6. CSSPrefixerEste sitio web (http://cssprefixer.appspot.com/) le propone una interfaz minimalista: usted deberindicar sus reglas y hacer clic en el botn process para aadir los prefijos. No hay opciones.

7. El caso de Internet ExplorerTendremos problemas, como siempre, con el navegador de Microsoft, en espera de que llegue laprometedora versin 10 y sea adoptada por la mayora de usuarios de Windows. Las versionesanteriores no reconocen multitud de reglas CSS3.El sitio web CSS3 PIE (http://css3pie.com/) le permite descargar un script para adaptardeterminadas propiedades como border-radius, box-shadow, border-image... de modoque Internet Explorer sea capaz de "digerirlas".

www.FreeLibros.me

8. Un generador de prefijos JavaScriptEsta solucin (http://leaverou.github.io/prefixfree/) le permite vincular sus pginas HTML a unarchivo JavaScript muy ligero (de a penas 2Ko), que generar automticamente los prefijos enfuncin del navegador que use el visitante de su pgina web. No ser necesario insertar losprefijos, ni tendr que conocerlos o mantenerse informado de su evolucin!Este script aade una clase al elemento , con el valor del prefijo propietario del navegadoren cuestin. Esta solucin funciona con los navegadores siguientes: Internet Explorer 9 y versiones superiores,Opera 10 y versiones superiores, Firefox 3.5 y versiones superiores, Safari 4 y versiones superioresy Chrome. Para las versiones mviles, prefix-free funciona con Mobile Safari, Android Browser,Chrome y Opera Mobile.

www.FreeLibros.me

Simplemente genial! Lea con atencin las limitaciones.Haga clic en el botn Only 2KB gzipped, en el margen superior izquierdo (podr ver de paso unamagnfica animacin CSS!). Haga Guardar como en el archivo JavaScript y gurdelo con elnombreprefixfree.min.js.Cree una pgina HTML5 con un elemento, solamente para hacer el test.

Mi documento El ttulo de mi pgina web Cras mattis...

Inserte ahora las reglas CSS3, sin prefijos para los navegadores.

body { font: .8em Verdana, Arial, Helvetica, sans-serif; } h1, p { margin: 0; } header { width: 400px; padding: 10px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(10,20,30,.8); background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);

www.FreeLibros.me

box-sizing: border-box; cursor: zoom-in; }

Tambin puede crear un archivo .css y vincularlo a su pgina HTML:

La programadora Lea Verou recomienda crear el vnculo al archivo JavaScript debajo de la lnea deestilos:

...

Publique la pgina en Internet y visualice el cdigo fuente:

Para los navegadores que necesitan prefijos para las reglas CSS utilizadas, el JavaScript modificarel cdigo CSS del archivo. Los navegadores que no necesitan modificaciones permanecern sincambios.Este es un extracto de cdigo generado con Safari 6:Para el encabezado :

Para el estilo CSS header, tenemos el aadido del prefijo -webkit- :header { width: 400px; padding: 10px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(10,20,30,.8); background-image: -webkit-linear-gradient(0deg, transparent, rgba(10,0,0,.3)),-webkit-linear-gradient(transparent, transparent); box-sizing: border-box; cursor: -webkit-zoom-in; }

Este es un extracto del cdigo generado con Firefox 23:Para el encabezado :

Para el estilo CSS header, tenemos el aadido del prefijo -moz-:header { width: 400px;

www.FreeLibros.me

padding: 10px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(10,20,30,.8); background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent); -moz-box-sizing: border-box; cursor: -moz-zoom-in; }

www.FreeLibros.me

Cmo interpretan los navegadores el CSS3

1. Qu propiedades podemos usar?Como acabamos de ver, los mdulos CSS3 del W3C estn en constante evolucin. Los navegadoresweb intentan "seguir el movimiento" tratando de reconocer y de interpretar las nuevas propiedadesCSS3.Para facilitarle las cosas, dispone de multitud de servicios en lnea.

2. findmebyIP - HTML5 & CSS3 SupportEste sitio web (http://www.findmebyip.com/litmus/) le indica la compatibilidad con los principalesnavegadores del mercado de las propiedades CSS3 (y de los elementos de HTML5), as como de losselectores.

3. When can I useEl sitio web When can I use (http://caniuse.com/), como su nombre indica, propone un servicio muycompleto sobre el grado de compatibilidad de los navegadores con las propiedades CSS3.Si hace clic en Tables y, a continuacin, en Show options, podr ordenar la lista en funcin demultitud de criterios.

www.FreeLibros.me

Un cdigo de colores le indicar el grado de compatibilidad:

En cuanto a las propiedades, el sitio web le indica el estado actual del mdulo: WorkingDraft,Candidate recommendation, Proposed Recommendation o Recommendation.En este ejemplo, la propiedad CSS3 Text-overflow tiene el estatus de Working Draft.

Para algunas propiedades, podr encontrar recursos adicionales bajo las diferentespestaas:Notes, Known issues, Resources y Feedback.

www.FreeLibros.me

4. Examinar la compatibilidad con los selectoresEl sitio web CSS3.info (http://www.css3.info/) le permite examinar el grado de compatibilidad de sunavegador con los selectores CSS3.Abra un navegador y vaya a la URL: http://www.css3.info/selectors-test/. Haga clic en el botn Startthe CSS Selectors test.

El test comenzar y se mostrarn los resultados: no ha encontrado ni el ms mnimo error con unnavegador reciente.

www.FreeLibros.me

A continuacin se indican los problemas encontrados con un navegador ms antiguo:

5. CSS3 PleaseEste sitio web (http://css3please.com/) es muy prctico.Podemos consultar las principales propiedades CSS3, en la parte izquierda de la pgina, con losprefijos propietarios de los navegadores.

www.FreeLibros.me

Y, en la parte derecha, tenemos un ejemplo completo de una caja.

En la lista de la derecha podr desactivar las distintas propiedades con el vnculo [toggle rule off], yluego podr volver a activarlas con [toggle rule on], para ver si su navegador es capaz deinterpretarlas y comprobar si se visualizan correctamente.

Adems, podr copiar el cdigo de los ejemplos con el vnculo [to clipboard].

6. Browser Support Checklist CSS3Este sitio web (http://www.normansblog.de/demos/browser-support-checklist-css3/) presenta lalista de los elementos compatibles el 07/02/2012. Habr que ver si el responsable del sitio webmantiene la tabla actualizada.

www.FreeLibros.me

7. css3testLea Verou (http://lea.verou.me) es una desarrolladora muy conocida en la comunidad Web. Proponenumerosas herramientas (http://lea.verou.me/projects/) para ayudarnos a desarrollar nuestrossitios Web.Su pgina css3test (http://css3test.com) permite comprobar si nuestro navegador reconoce lasCSS3.Este es el extracto de un test:

www.FreeLibros.me

www.FreeLibros.me

Los selectores CSS 2

1. FuncionalidadLos selectores sirven para indicar a qu elementos se les van a aplicar los estilos definidos.

2. Los selectoresDebemos recordar que la recomendacin CSS 2.1 ya propona una amplia lista de selectores.

Selector universal: permite aplicar un estilo a la totalidad de los elementos HTML de lapgina. Sintaxis: * {...}.Selector de elemento o de tipo: permite aplicar un estilo a un elemento HTML existente.Sintaxis: p {...}.Selector de clase: permite aplicar un estilo a los elementos que utilicen esa clase.Sintaxis:.intro {...}.Selector de clase de un elemento: permite aplicar un estilo a un elemento especfico queutilice dicha clase. Sintaxis: p.intro {...}.Selector de descendientes: permite aplicar un estilo a un elemento determinado que seencuentre dentro de un elemento especfico. Sintaxis: p .nombrePropio {...}.Selector hijo: permite aplicar un estilo al primer elemento hijo de un elemento especfico.Sintaxis: p>.nombrePropio {...}.Selector adyacente: permite aplicar un estilo al elemento que se encuentre a continuacinde un elemento especfico. Sintaxis: h1+h2 {...}.Selector de atributo: permite aplicar un estilo a un elemento que utilice un atributoespecfico. Sintaxis: p[lang] {...}.Selector de ID: permite aplicar un estilo a un elemento que disponga de un cdigo deidentificacin nico. Sintaxis: