netalia just for developers HTML5 CSS3 y JavaScript Marino Posadas ADVERTENCIA LEGAL Todos los derechos de esta obra están reservados a Marino Posadas y netalia. El editor prohibe cualquier tipo de fijación, reproducción, transforma- ción o distribución de esta obra, ya sea mediante venta, alquiler o cual- quier otra forma de cesión de uso o comunicación pública de la misma, total o parcialmente, por cualquier sistema o en cualquier soporte, ya sea por fotocopia, medio mecánico o electrónico, incluido el tratamiento informático de la misma, en cualquier lugar del mundo. La vulneración de cualesquiera de estos derechos podrá ser consi- derada como una actividad penal tipificada en los artículos 270 y si- guientes del Código Penal. La protección de esta obra se extiende al mundo entero, de acuerdo con las leyes y convenios internacionales. © Marino Posadas, 2012 © netalia, S.L. 2012 HTML5, CSS 3 y JavaScript Autor: Marino Posadas Responsable editorial: Paco Marín Diseño de cubierta: Silvia Gil Maquetación: Silvia Gil Editado por netalia http://www.netalia.es - http://www.dnmplus.net @netalia_es Editado en formato digital e impreso. Impreso Precio: 29,50€ ISBN: 978-84-939296-2-6 Edición impresa en Navarra por Ulzama Digital Precio: 9,95€ ISBN: 978-84-939296-1-9 A Juan José García y Javier García, con la promesa de que jamás les obligaré a leer nada mío. A mis sobrinos A Milagros… siempre. «Hay solo dos clases de lenguajes de programación: aquellos de los que la gente está siempre quejándose y aquellos que nadie usa» Bjarne Stroustrup «Los proveedores de software están intentando hacer sus productos más amigables para el usuario. Su mejor aproximación hasta el momen- to ha sido tomar sus antiguos folletos y estampar las palabras ‘amigable para el usuario’ en la portada» Bill Gates Agradecimientos A Paco Marín, de Netalia, por animarme siempre en estas empresas. A mis compañeros del grupo de MVP de Microsoft en España, con Cristina González Herrero a la cabeza, y los componentes del DPE y di- vulgación en Microsoft: Alfonso Rodríguez, José Bonnín, David Carmona, David Salgado y todos los demás. A Paul Cotton de la W3C, por sus palabras y ánimos en la entrevista que nos concedió en su visita a Madrid. A mis seguidores de Twitter, Facebook y otras redes sociales. Siempre son una motivación para continuar la tarea. Y a las empresas colaboradoras y amigas o que han mostrado interés en este proyecto, como Alhambra-Eidos, Aula MCT, CAS Training, DanySoft, MegaTraining, Ceticsa, MSL, Desfufor, GadeSoft. ¡Que siga- mos mucho tiempo en la brecha! índice 1. Introducción . 13 Objetivos de la W3C . .14 Objetivos de esta obra . .14 Las Herramien tas . .14 HTML 5: La n ueva propuesta . .15 El World Wide Web Con sortium . .16 Están dares, HTML y la W3C . .16 El lapso de tiempo desde el último están dar . .17 El problema de las fechas de termin ación . .18 Los n avegadores y el están dar: IE10 como objetivo . .19 Nuevas reglas del juego . .20 Los n avegadores an tiguos . .21 Los objetivos del están dar en la práctica . .22 Motores de JavaScript . .23 Librerías y Len guajes que compilan a JavaScript . .24 ¿Por qué n o esperar a que el están dar esté termin ado? . .25 El sueño de un a Web Semán tica . .26 Los Iden tificadores un iformes de recursos (URI vs. URL) . .27 URI y Semán tica . .27 Especificacion es y pruebas de laboratorio . .29 Los test . 29 Los sitios altern ativos de pruebas de con formidad . .30 Los sitios oficiales . .31 Las aplicacion es web y el n uevo modelo de aplicacion es en Win dows8 . .32 A plicacion es Win dows 8 . .33 El n uevo modelo de aplicacion es Win dows 8 . .34 La posición de Silverlight y Flash en Win dows 8 . .35 Win JS y los con troles "de fábrica" . .35 La división gran ular de JavaScript . .38 Ejecución y soporte del están dar . .39 Los motores Chakra y los dos con textos de ejecución . .40 Hablan do sobre el están dar: la opin ión de un protagon ista . .41 En trevista con Paul Cotton . .41 Referen cias . .52 Referen cias de la Web Semán tica . .52 2. Herramientas y depuración . .55 Las herramien tas de los n avegadores . .55 Herramien tas y depuración . .55 La herramien ta de desarrollo de In tern et Explorer (F12) . .56 Fiddler . .59 Version es de Fiddler y herramien tas añadidas . .60 A rquitectura de Fiddler . .62 Comparativa de capacidades de análisis de tráfico de red entre F12/IE y Fiddler 63 Generación de informes . .64 Otras extensiones de Fiddler . .66 Fiddler como complemento de navegadores . .66 FireBug para FireFox . .67 Vistas 3D de cualquier página . .69 Las herramientas de desarrolladores de Google Chrome . .70 Opera . .72 Safari . .74 El soporte de HTML 5 en Visual Studio . .75 El nuevo soporte de HTML 5 en Visual Studio 2012 . .76 Page Inspector . .78 Soporte de Hojas de Estilo . .80 Soporte de JavaScript . .84 Microsoft Expression Blend para Visual Studio 2012 . .87 Plantillas disponibles . .88 Referencias . .93 3. HTML 5: nuevas etiquetas . .95 El problema de la WHA TWG . .95 El marco de trabajo y los objetivos . .96 Compatibilidad hacia atrás . .97 Sintaxis general . .98 El tipo de documento: DOCTYPE . .99 Codificación de Caracteres (Encoding) . .100 HTML5: Los nuevos elementos . .101 Cambios genéricos para todos los elementos: A tributos globales . .103 Las nuevas etiquetas, por categorías . .105 Etiquetas estructurales o semánticas . .105 Etiqueta <Section> . .106 <section> y la noción de esquema de un documento . .108 Etiqueta <article> . ..