HTML 5
Gua completa
Scott McCracken
Ninguna parte de este libro puede ser reproducida, grabada en sistema de almacenamiento o transmitida en forma alguna ni por cualquier procedimiento, ya
sea electrnico, mecnico, reprogrfico, magntico o cualquier otro. Asimismo queda prohibida la distribucin, alquiler, traduccin o exportacin sin la autorizacin
previa y por escrito de INFORBOOK'S, S.L.
Editado por:INFORBOOK'S, S.L.
c/ Muntaner, 181
08036 BARCELONA
934 394 055
e-mail: info@inforbooks.com
web: http://www.inforbooks.com
ISBN-13: 978-84-15033-55-4
ISBN-10: 84-15033-55-9
Depsito legal: B-27861-2012
Diseo cubierta: Aplicaciones Bsicas de la Informtica, S.L.
Maquetacin: ServiDOC
ndice general
Contenido
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
A:
B:
C:
Introduccin ................................................ 19
Estructura bsica del lenguaje .................. 39
Organizacin del texto ............................... 77
Agrupacin del texto ................................ 129
Hipertexto y semntica ............................ 151
Color e imgenes ....................................... 197
Tablas ......................................................... 231
Hojas de estilo ........................................... 263
Formularios ............................................... 305
Multimedia ................................................ 377
Interactividad y Web storage .................. 473
HTML, Javascript y jQuery.................... 513
Archivos y Drag-and-Drop ...................... 611
API geolocation ......................................... 641
Web Sockets y Web Workers ................... 657
Aplicacin de estilo con CSS 3 ................ 671
Gua de acceso rpido .............................. 701
Tablas de cdigos ...................................... 739
Prctica completa ..................................... 747
ndice.......................................................... 805
ndice general
ndice general
Captulo 1:
Introduccin ......................................................... 19
HTML sigue su evolucin............................................................................. 19
HTML 5: no es slo una tecnologa ............................................................. 19
SGML ............................................................................................................ 20
XHTML 2 ...................................................................................................... 21
De WHATWG a HTML 5............................................................................. 21
Especificaciones....................................................................................... 21
Qu necesito para aprovechar el libro? ..................................................... 22
Bibliotecas de terceras partes ................................................................ 22
Cmo se complementa este aprendizaje? ............................................ 23
La compatibilidad es fundamental................................................................ 24
Cundo finaliza el desarrollo de HTML 5? ............................................... 24
Cmo puedo usar HTML 5? ................................................................. 25
Pero... Qu navegador soporta HTML 5?................................................. 25
Usar HTML 5 hace perder visitantes? ................................................ 26
Test del nivel de soporte de los navegadores ............................................. 27
HTML 5 visto conceptualmente ................................................................... 28
Diferencias principales entre HTML 5 y HTML 4 .................................... 30
Funcionalidades incorporadas ................................................................ 30
Nuevos elementos en HTML 5 .............................................................. 31
Principales cambios en elementos ya existentes .................................. 33
Categoras y modelos de contenido en HTML 5 .................................. 34
Elementos que desaparecen en HTML 5 .............................................. 34
Esquema general de la gua .......................................................................... 34
Captulo 2:
Estructura bsica del lenguaje ........................... 39
Objetivos de HTML 5 ................................................................................... 39
Componentes de siempre del lenguaje HTML ........................................... 39
Qu sabemos de un documento HTML? ................................................... 40
Cmo se gener esta pgina? ............................................................... 41
Elemento doctype .................................................................................... 42
ndice general
Captulo 3:
Organizacin del texto ........................................ 77
Etiqueta <BODY> ......................................................................................... 77
Cmo funciona un evento? .................................................................... 79
Trabajo con texto ........................................................................................... 79
Saltos de lnea <BR> y nuevos prrafos <P> ....................................... 80
Alinear el texto ........................................................................................ 82
Direccin del texto .................................................................................. 82
Separacin de palabras ........................................................................... 82
Secciones ....................................................................................................... 82
Los elementos estructurales de HTML 5 en accin ............................. 83
<SECTION> ............................................................................................ 88
<NAV> ...................................................................................................... 89
<ARTICLE> ........................................................................................... 92
<HEADER> ............................................................................................. 97
<FOOTER> ........................................................................................... 101
<ASIDE> ................................................................................................ 103
<ADDRESS> ......................................................................................... 105
Cabeceras .............................................................................................. 106
<HGROUP> ........................................................................................... 108
Algoritmo de esquema de HTML 5 ........................................................... 108
Definicin de secciones en HTML 5 .................................................... 109
Definicin de los encabezados en HTML5......................................... 111
La Web semntica ....................................................................................... 117
Est bien estructurado nuestro documento? ........................................... 118
Diseo de una pgina de un peridico digital ............................................ 119
Captulo 4:
Agrupacin del texto ......................................... 129
Nueva lnea <BR> ................................................................................. 129
Lnea de separacin horizontal <HR> ................................................. 130
Texto preformateado <PRE> ............................................................... 131
<BLOCKQUOTE> ................................................................................ 133
Listas ...................................................................................................... 135
Etiquetas <FIGURE> y <FIGCAPTION> .......................................... 145
Etiqueta <DIV> ..................................................................................... 148
Captulo 5:
Hipertexto y semntica ..................................... 151
Etiqueta <A> ................................................................................................ 151
Usos anteriores de la etiqueta <A> ..................................................... 153
Atributo title ........................................................................................... 154
Enlace a una pgina web ....................................................................... 154
El enlace en funcionamiento ................................................................. 154
Convencin de colores en los enlaces ..................................................... 155
ndice general
Captulo 6:
Color e imgenes................................................ 197
El color en la Web ....................................................................................... 197
Otros mecanismos para especificar colores ........................................ 198
Funcin RGB() ........................................................................................... 199
10
Captulo 7:
Tablas .................................................................. 231
Etiqueta <TABLE> ..................................................................................... 231
Partes de una tabla ................................................................................ 232
La tabla ms bsica ............................................................................... 232
Filas de datos (tr) ................................................................................... 233
Datos de cada celda (td o th) ................................................................ 234
Otros atributos de la celda .................................................................... 236
Encabezamiento de celda (th) ............................................................... 237
Ttulo de tabla (caption) ........................................................................ 239
Comportamiento dispar de los navegadores ...................................... 242
Ancho de la tabla ................................................................................... 242
Espaciado y relleno de las celdas ......................................................... 246
Expansin de las celdas ........................................................................ 248
Combinacin colspan y rowspan ........................................................... 249
Agrupacin de filas y columnas ............................................................ 251
Grupos de filas ............................................................................................. 253
Elemento <THEAD> ............................................................................. 254
Elemento <TBODY> ............................................................................. 254
Elemento <TFOOT> ............................................................................. 254
Ejemplo de una barra de navegacin ................................................... 256
Tablas dentro de tablas ......................................................................... 257
Tabla como contenedor de distintos elementos ................................... 258
Cundo se usan las tablas........................................................................... 260
Captulo 8:
Hojas de estilo .................................................... 263
Cmo se lleg a CSS ................................................................................... 263
Hojas de estilo en cascada ......................................................................... 264
ndice general
11
12
Captulo 9:
Formularios ........................................................ 305
HTML 5 y los formularios web .................................................................. 306
Validacin de datos ................................................................................ 306
Formularios .................................................................................................. 307
Formularios en HTML: etiqueta <FORM>.............................................. 307
Eventos ................................................................................................... 309
Un formulario para obtener informacin ................................................... 311
Los mensajes predeterminados de los navegadores .......................... 312
Etiquetas de formulario ......................................................................... 315
Etiqueta <INPUT> ................................................................................ 316
Atributos de la etiqueta <INPUT> .......................................................... 316
Tipo input: COLOR ................................................................................... 319
Tipo input: DATE ....................................................................................... 321
Tipo input: DATETIME ............................................................................ 321
Tipo input: EMAIL .................................................................................... 322
Tipo input: FILE ........................................................................................ 323
Tipo input: HIDDEN ................................................................................. 325
Tipo input: IMAGE .................................................................................... 326
Tipo input: MONTH .................................................................................. 327
Tipo input: NUMBER ............................................................................... 328
Tipo input: PASSWORD............................................................................ 330
Tipo input: RADIO .................................................................................... 331
Tipo input: RANGE ................................................................................... 332
Tipo input: RESET .................................................................................... 334
Tipo input: SEARCH ................................................................................. 334
Tipo input: SUBMIT .................................................................................. 336
Tipo input: TELEPHONE ........................................................................ 337
Tipo input: TEXT ....................................................................................... 339
Tipo input: TIME ....................................................................................... 340
Tipo input: URL ......................................................................................... 342
Tipo input: WEEK ...................................................................................... 343
ndice general
13
Captulo 10:
Multimedia ......................................................... 377
Complementos (plugin) ............................................................................... 377
Formatos multimedia ................................................................................... 379
Qu es un plug-in? ............................................................................... 379
Flash ........................................................................................................... 380
Streaming .................................................................................................... 380
14
Captulo 11:
Interactividad y Web storage ........................... 473
Etiquetas <DETAILS> y <SUMMARY> .................................................. 475
Barra de navegacin oculta con DETAILS ......................................... 476
Etiquetas <MENU> y <COMMAND> ..................................................... 477
Almacenamiento de datos en el cliente ..................................................... 479
Seguridad de los datos .......................................................................... 481
Opciones de almacenamiento ............................................................... 482
Tipos y caractersticas del almacenamiento en el cliente .................... 483
ndice general
15
Captulo 12:
HTML, Javascript y jQuery............................. 513
JavaScript, un lenguaje cliente ................................................................... 514
JavaScript no es Java ........................................................................... 515
Lo que JavaScript no hace .................................................................... 515
La compatibilidad puesta en duda .............................................................. 517
Una decisin estratgica ....................................................................... 519
Cmo codificar con JavaScript? ............................................................... 519
Complementos en los navegadores ...................................................... 519
Extensin para desarrollador Web ....................................................... 521
Herramientas de desarrollo de Internet Explorer .............................. 522
Transferencia de servidor local a remoto ............................................ 522
Recomendaciones para el entorno de pruebas ................................... 524
Ejecucin de una aplicacin JavaScript ..................................................... 525
Conexin HTML/JavaScript mediante eventos ................................. 528
Conceptos bsicos de JavaScript ............................................................... 529
Estructura del cdigo .................................................................................. 531
Comentarios en el cdigo............................................................................ 532
Nomenclatura .............................................................................................. 533
Nomenclatura de variables ................................................................... 534
Nomenclatura de funciones .................................................................. 534
Longitud de los nombres ....................................................................... 535
Palabras reservadas .............................................................................. 535
Est activado JavaScript? ........................................................................ 536
Scripts de JavaScript .................................................................................. 536
Modo indirecto....................................................................................... 537
Uso de archivos externos ...................................................................... 539
Bloque de instrucciones .............................................................................. 540
Variables ...................................................................................................... 541
Nomenclatura de las variables ............................................................. 542
Tipo de una variable .............................................................................. 543
Sentencias condicionales ............................................................................ 544
Sentencia if ............................................................................................. 544
Operadores de comparacin de valores .............................................. 545
Combinacin de condiciones ................................................................. 545
Sentencia if/else ..................................................................................... 546
Sentencia switch..................................................................................... 547
Operador ternario .................................................................................. 547
16
Polyfill........................................................................................................... 571
jQuery........................................................................................................... 572
Conceptos de jQuery ............................................................................. 574
Selectores ............................................................................................... 576
Manipulacin del conjunto de elementos seleccionados .................... 586
Mtodos de obtencin de elementos basados en relaciones ............. 589
Mtodos de eventos .............................................................................. 592
Mtodos auxiliares ............................................................................... 602
Mtodos de efectos ms comunes ...................................................... 603
Mtodos HTML ms comunes ............................................................ 606
Captulo 13:
Archivos y Drag-and-Drop ............................... 611
Drag and Drop ............................................................................................. 611
Definicin del objeto arrastrable .......................................................... 612
Definicin de una zona para soltar objetos .......................................... 612
Qu hacer con el elemento arrastrado? ............................................. 613
Dnde soltar?....................................................................................... 613
Qu recibe el objeto receptor? ........................................................... 614
ndice general
17
Captulo 14:
API geolocation.................................................. 641
Posicionamiento geogrfico ........................................................................ 641
Cmo obtener el posicionamiento geogrfico? ....................................... 642
El posicionamiento es una informacin privada .................................. 643
Ejemplo: Determinacin del posicionamiento ..................................... 643
Parmetro PositionObjects ................................................................... 649
Ejemplo: Interaccin con el mapa de Google ...................................... 650
Captulo 15:
Web Sockets y Web Workers ............................ 657
Comunicaciones con la API WebSocket .................................................... 657
Atributos del objeto WebSocket ................................................................. 658
Mtodos del objeto WebSocket ........................................................... 658
Eventos generados por el objeto WebSocket ..................................... 659
Ejemplo: Un chat basado en WebSockets ........................................... 659
Subprocesos con Web Workers .................................................................. 664
Solucin Web Workers .......................................................................... 665
Creacin de un subproceso Web Worker ............................................ 666
Comunicacin del subproceso Web Worker con su pgina web ........ 667
Ejemplo: Implementacin de un subproceso para un script ............... 667
Subproceso Web Worker compartido .................................................. 669
Captulo 16:
Aplicacin de estilo con CSS 3 ......................... 671
Consulta de medios ..................................................................................... 671
Caractersticas que se pueden verificar .............................................. 672
Uso racionalde Media Query ............................................................... 675
Sorpresas con dispositivos Android y con IPhone ............................... 676
18