Éste no es un manual o guía para migrar aplicaciones de las versiones anteriores de HTML a HTML5, es un libro que introduce poco a poco al lector, en forma amable pero consistente con las alternativas que ofrece HTML5. Cuenta con recursos en línea y contenido adicional para respaldar mejor el aprendizaje obte-nido con el texto. Es un libro que ordena ideas, conceptos e información en nues-tro idioma, es una forma muy bella y eficaz de aprender HTML5. Ventajas competitivas: En la Web se encuentran todos los programas fuentes del libro ordenadospor capítulo. Conozca: Las características fundamentales de HTML5. Aprenda: A trabajar con los nuevos elementos de HTML5. A desarrollar páginas Web con HTML5. Emmanuel Herrera Ríos Es Ingeniero en Sistemas Computacionales, colaborador en el desarrollo contenidos multimedia destinados a la educación, elaborados en México y en América Latina. Ha trabajado como desarrollador de diversos sistemas de información y control para diferentes empre-sas e instituciones. También se ha desempeñado como diseñador, desarrollador y administrador de sistemas de información financiera, ha desarrollado y coordinado proyectos multimedia para institu-ciones públicas a través del Instituto Latinoamericano de la Comunicación Educativa.ÍndiceCap¡tulo 1 ¿De d¢nde viene y qu es HTML? ...... 1 Expectativa ..................................................... 2 Introducci¢n ................................................... 3 Un poco de historia ....................................... 4 El xito puede ser el mayor problema ....... 4 Round 2 (nuevos competidores) ................ 5 ¿HTML5 o una versi¢n anterior? ................ 5 HTML4 ..................................................... 5 XHTML ..................................................... 6 HTML5 ..................................................... 6 Comprendiendo las etiquetas (tags) ......... 6 Comprendiendo las hojas de estilo en cascada (CSS) ....................................... 7 JavaScript ....................................................... 8 Tecnolog¡as de p ginas activas de servidor 8 Resumen ........................................................ 9 Autoevaluaci¢n.............................................. 9 Evidencia ........................................................ 10 Referencias .................................................... 11 Bibliograf¡a ............................................. 11 Paginas Web recomendadas .............. 11 Respuestas sugeridas ................................. 12 Cap¡tulo2 Prepar ndonos para HTML5 ................ 13 Expectativa ..................................................... 14 Introducci¢n ................................................... 15 Eligiendo un navegador ............................... 15 Tipo de documento ....................................... 17 Etiqueta .................. 18 Estructura b sica de un documento HTML 18 Etiquetas y ................. 18 T¡tulo y Metadatos ........................................ 19 Ejemplo ................................................... 19 Ejercicio .................................................. 21 P rrafos y saltos de l¡nea ............................ 21 Detecci¢n de las caracter¡sticas de HTML5.................................................... 23 Resumen ........................................................ 26 Autoevaluaci¢n ............................................. 26 Evidencia ........................................................ 27 Referencias ................................................... 27 Bibliograf¡a ............................................. 27 Paginas Web recomendadas .............. 27 Respuestas sugeridas ................................ 28 Cap¡tulo 3 M s bases HTML ............................... 29 Expectativa ................................................... 30 Introducci¢n ................................................. 31 ¿HTML o XHTML? .......................................... 31 Formato de texto con etiquetas ................. 32 Cabeceras .............................................. 33 Ejercicio .................................................. 34 Negritas, cursiva, subrayado y otros .. 34 Ejercicio .................................................. 36 Sub¡ndices y super¡ndices ................... 36 Ejercicio .................................................. 37 Bloque de citas ...................................... 38 Ejercicio .................................................. 38 L¡nea Horizontal .................................... 39 Listas .............................................................. 40 Listas numeradas y listas no numeradas .................................... 41 Listas de definici¢n ............................... 42 Ejemplo ................................................... 43 Im genes ....................................................... 44 Tablas ............................................................. 46 Ejemplo ................................................... 47 Hiperv¡nculos (enlaces) ................................ 48 Ejemplo ................................................... 49 Formularios (controles cl sicos) ................. 51 Estructura del formulario ..................... 56 Campo de texto ..................................... 56 µrea de texto .......................................... 57 Campo de contrase¿a (password) ........................................... 57 Lista de selecci¢n simple (combobox) .......................................... 58 Lista de selecci¢n m£ltiple (listbox) ... 59 Lista de selecci¢n m£ltiple (listbox multiple selection) ................ 59 Lista de botones radio (radio buttons) .................................... 59 Lista de cajas (checkboxes) ................. 61 Bot¢n para enviar informaci¢n ........... 62 Bot¢n para borrar informaci¢n del formulario ............... 62 Bot¢n simple .......................................... 62 Imagen (bot¢n) ...................................... 63 Notas adicionales sobre botones ........ 63 Campo oculto ......................................... 63 Validar p ginas HTML5 ................................ 64 Resumen ........................................................ 64 Autoevaluaci¢n.............................................. 65 Evidencia ........................................................ 65 Referencias .................................................... 66 Bibliograf¡a ............................................. 66 Paginas Web recomendadas .............. 66 Respuestas sugeridas ................................. 66 Cap¡tulo 4 Los nuevos elementos HTML5 ............ 67 Expectativa ..................................................... 68 Nueva sem ntica .......................................... 69 Elementos estructurales .............................. 69 article....................................................... 69 aside ........................................................ 70 footer ....................................................... 71 header ..................................................... 71 nav ........................................................... 71 section ..................................................... 72 Elementos estructurales complementarios ....................................... 72 address .................................................... 72 hgroup ..................................................... 73 menu ....................................................... 73 Elementos sem nticos en l¡nea ................. 74 command ............................................... 74 details y summary ................................ 75 dfn ........................................................... 75 figure y figcaption ................................. 76 wbr ........................................................... 76 Media .............................................................. 76 audio ....................................................... 76 canvas ..................................................... 77 embed ..................................................... 79 svg ........................................................... 80 video ........................................................ 81 Resumen ........................................................ 83 Autoevaluaci¢n ............................................. 83 Evidencia ........................................................ 84 Referencias ................................................... 84 Bibliograf¡a ............................................. 84 Paginas Web recomendadas .............. 84 Respuestas sugeridas ................................ 84 Cap¡tulo 5 Controles nuevos en formularios HTML5 ........................... 85 Expectativa .................................................... 86 Introducci¢n .................................................. 87 Un vistazo a los controles nuevos .............. 87 Elementos independientes ......................... 90 fieldset .................................................... 90 keygen .................................................... 90 label......................................................... 91 meter ..................................................... 91 progress .................................................. 92 Elementos tipo input .................................... 92 email ....................................................... 92 number ................................................... 93 range ....................................................... 93 search .................................................... 93 tel ............................................................. 94 url ............................................................. 94 Nuevos atributos ........................................... 94 autofocus ................................................ 94 pattern .................................................... 95 placeholder ............................................ 95 Resumen ........................................................ 96 Autoevaluaci¢n ............................................. 96 Evidencia ........................................................ 97 Referencias ................................................... 97 Bibliograf¡a ............................................. 97 Paginas Web recomendadas .............. 97 Respuestas sugeridas ................................. 98 Cap¡tulo 6 Primeros pasos con CSS ...................... 99 Expectativa ..................................................... 100 Introducci¢n ................................................... 101 Un vistazo a hojas de estilo o CSS (Cascading Style Sheets) .......................... 101 Utilizar estilos a nivel local .......................... 102 Utilizar estilos a nivel documento .............. 103 Utilizar estilos a nivel de sitio (link) ............ 105 Utilizar clases y el identificador (class e id) .................................................... 107 Manipular la apariencia de una p gina .... 110 Manipular texto ...................................... 110 Manipular colores .................................. 114 Manipular Bordes .................................. 115 Agrupaci¢n de elementos (span y div) ...... 116 span ......................................................... 116 Ejemplo ................................................... 117 div............................................................. 117 Ejemplo ................................................... 118 Posicionamiento ........................................... 119 Elementos flotantes (propiedades float y clear) ........................................ 119 Posicionamiento absoluto ................... 123 posicionamiento relativo ...................... 124 Resumen ........................................................ 126 Autoevaluaci¢n.............................................. 126 Evidencia ........................................................ 127 Referencias .................................................... 127 Bibliograf¡a ............................................. 127 Paginas Web recomendadas .............. 127 Respuestas sugeridas ................................. 128 Cap¡tulo 7 Nuevo y mejorado CSS3 ......................... 129 Expectativa ..................................................... 130 Introducci¢n ................................................... 131 Motores de renderizado y CSS3 ................. 131 Nuevas notaciones para color .................... 132 Notaci¢n RGBA ...................................... 132 Notaci¢n HSL Y HSLA ............................ 132 Bordes ............................................................. 133 Bordes redondeados ............................. 135 Bordes sombreados .............................. 135 Bordes con imagen ............................... 136 Gradientes ...................................................... 138 Transformaciones ......................................... 144 Transiciones .................................................. 146 Transparencia ............................................... 150 Texto y fuentes descargables ..................... 151 text-shadow ............................................ 152 text-stroke .............................................. 152 @font-face .............................................. 153 Herramientas de selecci¢n ......................... 154 Selecci¢n por atributo .......................... 154 Selecci¢n por relaci¢n padre-hijo ....... 155 Selecci¢n inversa (not) ......................... 156 Resumen ........................................................ 158 Autoevaluaci¢n ............................................. 158 Evidencia ........................................................ 159 Referencias ................................................... 159 Bibliograf¡a ............................................. 159 Paginas Web recomendadas .............. 159 Respuestas sugeridas ................................ 160 Cap¡tulo 8 Novedades en JavaScript .................. 161 Expectativa .................................................... 162 Introducci¢n .................................................. 163 Nuevas herramientas de selecci¢n ........... 163 getElementsByClassName() ................ 163 getElementsByTagName ..................... 164 querySelector() ...................................... 164 querySelectorAll() .................................. 165 Almacenamiento de sesi¢n y local ............ 165 Almacenamiento por sesi¢n ............... 166 Almacenamiento local ......................... 166 Asignando y recuperando datos de sessionStorage y localStorage ... 166 Mtodos y propiedades de session Storage y localStorage ...................... 169 Web offline (cach) ...................................... 169 Geolocalizaci¢n ............................................. 172 WebSocket .................................................... 176 Creaci¢n interfaz ................................... 183 Conexi¢n de sockets ............................. 183 Env¡o de mensaje .................................. 184 Algunas puntualizaciones .................... 185 Web workers ................................................. 185 Creaci¢n interfaz ................................... 190 Llamar al web worker ........................... 191 Construir el c¢digo del web worker .... 192 Resumen: pasos para crear un Web worker ............................................ 193 Algunas puntualizaciones entre Web workers y navegadores ............... 194 Resumen ........................................................ 195
Éste no es un manual o guía para migrar aplicaciones de las versiones anteriores de HTML a HTML5, es un libro que introduce poco a poco al lector, en forma amable pero consistente con las alternativas que ofrece HTML5. Cuenta con recursos en línea y contenido adicional para respaldar mejor el aprendizaje obte-nido con el texto. Es un libro que ordena ideas, conceptos e información en nues-tro idioma, es una forma muy bella y eficaz de aprender HTML5. Ventajas competitivas: En la Web se encuentran todos los programas fuentes del libro ordenadospor capítulo. Conozca: Las características fundamentales de HTML5. Aprenda: A trabajar con los nuevos elementos de HTML5. A desarrollar páginas Web con HTML5. Emmanuel Herrera Ríos Es Ingeniero en Sistemas Computacionales, colaborador en el desarrollo contenidos multimedia destinados a la educación, elaborados en México y en América Latina. Ha trabajado como desarrollador de diversos sistemas de información y control para diferentes empre-sas e instituciones. También se ha desempeñado como diseñador, desarrollador y administrador de sistemas de información financiera, ha desarrollado y coordinado proyectos multimedia para institu-ciones públicas a través del Instituto Latinoamericano de la Comunicación Educativa.ÍndiceCap¡tulo 1 ¿De d¢nde viene y qu es HTML? ...... 1 Expectativa ..................................................... 2 Introducci¢n ................................................... 3 Un poco de historia ....................................... 4 El xito puede ser el mayor problema ....... 4 Round 2 (nuevos competidores) ................ 5 ¿HTML5 o una versi¢n anterior? ................ 5 HTML4 ..................................................... 5 XHTML ..................................................... 6 HTML5 ..................................................... 6 Comprendiendo las etiquetas (tags) ......... 6 Comprendiendo las hojas de estilo en cascada (CSS) ....................................... 7 JavaScript ....................................................... 8 Tecnolog¡as de p ginas activas de servidor 8 Resumen ........................................................ 9 Autoevaluaci¢n.............................................. 9 Evidencia ........................................................ 10 Referencias .................................................... 11 Bibliograf¡a ............................................. 11 Paginas Web recomendadas .............. 11 Respuestas sugeridas ................................. 12 Cap¡tulo2 Prepar ndonos para HTML5 ................ 13 Expectativa ..................................................... 14 Introducci¢n ................................................... 15 Eligiendo un navegador ............................... 15 Tipo de documento ....................................... 17 Etiqueta .................. 18 Estructura b sica de un documento HTML 18 Etiquetas y ................. 18 T¡tulo y Metadatos ........................................ 19 Ejemplo ................................................... 19 Ejercicio .................................................. 21 P rrafos y saltos de l¡nea ............................ 21 Detecci¢n de las caracter¡sticas de HTML5.................................................... 23 Resumen ........................................................ 26 Autoevaluaci¢n ............................................. 26 Evidencia ........................................................ 27 Referencias ................................................... 27 Bibliograf¡a ............................................. 27 Paginas Web recomendadas .............. 27 Respuestas sugeridas ................................ 28 Cap¡tulo 3 M s bases HTML ............................... 29 Expectativa ................................................... 30 Introducci¢n ................................................. 31 ¿HTML o XHTML? .......................................... 31 Formato de texto con etiquetas ................. 32 Cabeceras .............................................. 33 Ejercicio .................................................. 34 Negritas, cursiva, subrayado y otros .. 34 Ejercicio .................................................. 36 Sub¡ndices y super¡ndices ................... 36 Ejercicio .................................................. 37 Bloque de citas ...................................... 38 Ejercicio .................................................. 38 L¡nea Horizontal .................................... 39 Listas .............................................................. 40 Listas numeradas y listas no numeradas .................................... 41 Listas de definici¢n ............................... 42 Ejemplo ................................................... 43 Im genes ....................................................... 44 Tablas ............................................................. 46 Ejemplo ................................................... 47 Hiperv¡nculos (enlaces) ................................ 48 Ejemplo ................................................... 49 Formularios (controles cl sicos) ................. 51 Estructura del formulario ..................... 56 Campo de texto ..................................... 56 µrea de texto .......................................... 57 Campo de contrase¿a (password) ........................................... 57 Lista de selecci¢n simple (combobox) .......................................... 58 Lista de selecci¢n m£ltiple (listbox) ... 59 Lista de selecci¢n m£ltiple (listbox multiple selection) ................ 59 Lista de botones radio (radio buttons) .................................... 59 Lista de cajas (checkboxes) ................. 61 Bot¢n para enviar informaci¢n ........... 62 Bot¢n para borrar informaci¢n del formulario ............... 62 Bot¢n simple .......................................... 62 Imagen (bot¢n) ...................................... 63 Notas adicionales sobre botones ........ 63 Campo oculto ......................................... 63 Validar p ginas HTML5 ................................ 64 Resumen ........................................................ 64 Autoevaluaci¢n.............................................. 65 Evidencia ........................................................ 65 Referencias .................................................... 66 Bibliograf¡a ............................................. 66 Paginas Web recomendadas .............. 66 Respuestas sugeridas ................................. 66 Cap¡tulo 4 Los nuevos elementos HTML5 ............ 67 Expectativa ..................................................... 68 Nueva sem ntica .......................................... 69 Elementos estructurales .............................. 69 article....................................................... 69 aside ........................................................ 70 footer ....................................................... 71 header ..................................................... 71 nav ........................................................... 71 section ..................................................... 72 Elementos estructurales complementarios ....................................... 72 address .................................................... 72 hgroup ..................................................... 73 menu ....................................................... 73 Elementos sem nticos en l¡nea ................. 74 command ............................................... 74 details y summary ................................ 75 dfn ........................................................... 75 figure y figcaption ................................. 76 wbr ........................................................... 76 Media .............................................................. 76 audio ....................................................... 76 canvas ..................................................... 77 embed ..................................................... 79 svg ........................................................... 80 video ........................................................ 81 Resumen ........................................................ 83 Autoevaluaci¢n ............................................. 83 Evidencia ........................................................ 84 Referencias ................................................... 84 Bibliograf¡a ............................................. 84 Paginas Web recomendadas .............. 84 Respuestas sugeridas ................................ 84 Cap¡tulo 5 Controles nuevos en formularios HTML5 ........................... 85 Expectativa .................................................... 86 Introducci¢n .................................................. 87 Un vistazo a los controles nuevos .............. 87 Elementos independientes ......................... 90 fieldset .................................................... 90 keygen .................................................... 90 label......................................................... 91 meter ..................................................... 91 progress .................................................. 92 Elementos tipo input .................................... 92 email ....................................................... 92 number ................................................... 93 range ....................................................... 93 search .................................................... 93 tel ............................................................. 94 url ............................................................. 94 Nuevos atributos ........................................... 94 autofocus ................................................ 94 pattern .................................................... 95 placeholder ............................................ 95 Resumen ........................................................ 96 Autoevaluaci¢n ............................................. 96 Evidencia ........................................................ 97 Referencias ................................................... 97 Bibliograf¡a ............................................. 97 Paginas Web recomendadas .............. 97 Respuestas sugeridas ................................. 98 Cap¡tulo 6 Primeros pasos con CSS ...................... 99 Expectativa ..................................................... 100 Introducci¢n ................................................... 101 Un vistazo a hojas de estilo o CSS (Cascading Style Sheets) .......................... 101 Utilizar estilos a nivel local .......................... 102 Utilizar estilos a nivel documento .............. 103 Utilizar estilos a nivel de sitio (link) ............ 105 Utilizar clases y el identificador (class e id) .................................................... 107 Manipular la apariencia de una p gina .... 110 Manipular texto ...................................... 110 Manipular colores .................................. 114 Manipular Bordes .................................. 115 Agrupaci¢n de elementos (span y div) ...... 116 span ......................................................... 116 Ejemplo ................................................... 117 div............................................................. 117 Ejemplo ................................................... 118 Posicionamiento ........................................... 119 Elementos flotantes (propiedades float y clear) ........................................ 119 Posicionamiento absoluto ................... 123 posicionamiento relativo ...................... 124 Resumen ........................................................ 126 Autoevaluaci¢n.............................................. 126 Evidencia ........................................................ 127 Referencias .................................................... 127 Bibliograf¡a ............................................. 127 Paginas Web recomendadas .............. 127 Respuestas sugeridas ................................. 128 Cap¡tulo 7 Nuevo y mejorado CSS3 ......................... 129 Expectativa ..................................................... 130 Introducci¢n ................................................... 131 Motores de renderizado y CSS3 ................. 131 Nuevas notaciones para color .................... 132 Notaci¢n RGBA ...................................... 132 Notaci¢n HSL Y HSLA ............................ 132 Bordes ............................................................. 133 Bordes redondeados ............................. 135 Bordes sombreados .............................. 135 Bordes con imagen ............................... 136 Gradientes ...................................................... 138 Transformaciones ......................................... 144 Transiciones .................................................. 146 Transparencia ............................................... 150 Texto y fuentes descargables ..................... 151 text-shadow ............................................ 152 text-stroke .............................................. 152 @font-face .............................................. 153 Herramientas de selecci¢n ......................... 154 Selecci¢n por atributo .......................... 154 Selecci¢n por relaci¢n padre-hijo ....... 155 Selecci¢n inversa (not) ......................... 156 Resumen ........................................................ 158 Autoevaluaci¢n ............................................. 158 Evidencia ........................................................ 159 Referencias ................................................... 159 Bibliograf¡a ............................................. 159 Paginas Web recomendadas .............. 159 Respuestas sugeridas ................................ 160 Cap¡tulo 8 Novedades en JavaScript .................. 161 Expectativa .................................................... 162 Introducci¢n .................................................. 163 Nuevas herramientas de selecci¢n ........... 163 getElementsByClassName() ................ 163 getElementsByTagName ..................... 164 querySelector() ...................................... 164 querySelectorAll() .................................. 165 Almacenamiento de sesi¢n y local ............ 165 Almacenamiento por sesi¢n ............... 166 Almacenamiento local ......................... 166 Asignando y recuperando datos de sessionStorage y localStorage ... 166 Mtodos y propiedades de session Storage y localStorage ...................... 169 Web offline (cach) ...................................... 169 Geolocalizaci¢n ............................................. 172 WebSocket .................................................... 176 Creaci¢n interfaz ................................... 183 Conexi¢n de sockets ............................. 183 Env¡o de mensaje .................................. 184 Algunas puntualizaciones .................... 185 Web workers ................................................. 185 Creaci¢n interfaz ................................... 190 Llamar al web worker ........................... 191 Construir el c¢digo del web worker .... 192 Resumen: pasos para crear un Web worker ............................................ 193 Algunas puntualizaciones entre Web workers y navegadores ............... 194 Resumen ........................................................ 195 