ndice general

HTML 5
Gua completa

Scott McCracken

Gua completa de HTML5

HTML 5 Gua completa

Scott McCracken
De la edicin: INFORBOOK'S, S.L.
Se ha puesto el mximo inters en ofrecer al lector una informacin completa
y precisa. Sin embargo, INFORBOOK'S, S.L. no asume ninguna responsabilidad
derivada de uso, ni tampoco por cualquier violacin de patentes y otros derechos
de terceras partes que pudieran ocurrir estando este libro destinado a la utilizacin de aficionados o a la enseanza. Las marcas o nombres mencionados lo son
nicamente a ttulo informativo, siendo propiedad de sus legales registradores.

Reservados todos los derechos.

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

Gua completa de HTML5

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

Gua completa de HTML5

Una rpida introduccin a HTML ................................................................ 42

Concepto de etiquetas ............................................................................. 42
Concepto de atributos de las etiquetas .................................................. 43
Reglas de los atributos ................................................................................ 43

Estructura jerrquica del documento ..................................................... 44

Cmo se conoce el cdigo fuente ........................................................... 45
El texto y los caracteres especiales ....................................................... 46
Solucin al problema: texto codificado .................................................. 47
Etiquetas ........................................................................................................ 48
Atributos ................................................................................................... 49
Atributos comunes a todas las etiquetas ................................................... 50

Consideraciones sobre el estilo de la sintaxis ............................................ 51

Comentarios ................................................................................................... 52
HTML no es Word (ni el Bloc de notas) ................................................ 54
Estructura bsica de los documentos HTML .............................................. 55
Estructura general ......................................................................................... 56
Secciones principales .............................................................................. 57
Bloques de texto ...................................................................................... 57
Marcas de caracteres ............................................................................. 57
Caracteres especiales ............................................................................. 58
Elementos de organizacin ..................................................................... 58
Enlace a otras pginas (o internos) ........................................................ 59
Imgenes .................................................................................................. 59
Scripts ....................................................................................................... 59
Qu es un agente de usuario? ................................................................. 59

Etiqueta <HTML> ........................................................................................ 60

Las dos secciones de un documento HTML ......................................... 61
Etiqueta <HEAD> ......................................................................................... 61
Etiqueta <TITLE> ................................................................................... 62
Etiqueta <BASE> .................................................................................... 63
Trabajo en localhost .................................................................................... 64
Cambio en la directiva <BASE> ............................................................... 66

Etiqueta <LINK> .................................................................................... 66

Etiqueta <META> ................................................................................... 68
Charset y cuando desaparecen los acentos y otros smbolos ................. 69

Etiqueta <STYLE> .................................................................................. 70

Etiqueta <SCRIPT> ................................................................................ 71
Atributos de la etiqueta <SCRIPT> ....................................................... 73
Validadores del cdigo .................................................................................. 73
Los navegadores y las sorpresas ................................................................. 74

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

Gua completa de HTML5

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

El enlace no est en el mismo directorio ............................................. 156

Navegar hacia atrs por los directorios ................................................. 158

Referencias interiores ........................................................................... 158

Asignacin de nombres a las secciones interiores ................................ 159
Referencia interior .................................................................................... 159

Navegacin por la red ........................................................................... 160

Atributo target ....................................................................................... 161
Otros atributos de la etiqueta <a> ....................................................... 162
Etiqueta <ABBR> ....................................................................................... 163
Etiqueta <B> ................................................................................................ 164
Etiqueta <BDO>.......................................................................................... 165
Etiqueta <BR> ............................................................................................. 166
Etiqueta <CITE> ......................................................................................... 166
Etiqueta <CODE> ....................................................................................... 167
Etiqueta <DFN> .......................................................................................... 168
Etiqueta <EM> ............................................................................................ 169
Etiqueta <I> ................................................................................................. 169
Etiquetas <INS> y <DEL> ......................................................................... 170
Etiqueta <KBD>.......................................................................................... 171
Etiqueta <MARK> ..................................................................................... 171
Etiqueta <Q> ............................................................................................... 173
Etiqueta <S> ................................................................................................ 173
Etiqueta <SAMP> ....................................................................................... 175
Etiqueta <SMALL> .................................................................................... 176
Etiqueta <SPAN> ........................................................................................ 176
Etiqueta <STRONG> ................................................................................. 177
Etiquetas <SUP> y <SUB> ......................................................................... 178
Etiqueta <TIME> ........................................................................................ 179
Etiqueta <VAR> .......................................................................................... 181
Etiqueta <WBR> ......................................................................................... 181
Cmo aadir informacin semntica con Microdata ................................ 186

ndice general

Atributos de Microdata ......................................................................... 187

WAI-ARIA ................................................................................................... 191
Roles WAI-ARIA .................................................................................. 191
Rol de marcas de navegacin ............................................................... 193

Captulo 6:
Color e imgenes................................................ 197
El color en la Web ....................................................................................... 197
Otros mecanismos para especificar colores ........................................ 198
Funcin RGB() ........................................................................................... 199

Forma recomendada para definir colores ............................................ 199

Propiedades en reemplazo de atributos .................................................. 200

Formato de archivos grficos ..................................................................... 202

Compresin de las imgenes ................................................................ 203
Formato GIF ................................................................................................ 203
Formato JPEG ............................................................................................. 204
Formato PNG ............................................................................................... 205
Cuestiones de transparencias ............................................................... 206
Imgenes animadas ............................................................................... 206
Qu formato grfico elegir? ..................................................................... 206
Etiqueta <IMG> .......................................................................................... 207
Atributo src ............................................................................................ 208
Otros formatos de imgenes ................................................................. 208
Textos alternativos: atributo alt ........................................................... 208
Dimensin de la imagen ........................................................................ 209
Bordes de la imagen .............................................................................. 210
Alineacin de la imagen ........................................................................ 211
Sin asignar estilo de alineacin ............................................................... 212
Alineacin flotante hacia la derecha (right) o izquierda (left) ............ 213

Mapas interactivos ..................................................................................... 215

Definicin del mapa con <MAP> ......................................................... 216
Las coordenadas segn la forma utilizada: circle, poly y rect ............ 218

Referencia asociada .............................................................................. 218

Uso de una imagen GIF como mapa .......................................................... 219
Grficos SVG ............................................................................................... 221
Soporte para SVG ................................................................................. 221
Tipos de objetos grficos ...................................................................... 222
SVG en HTML5 .................................................................................... 222
Elementos geomtricos ......................................................................... 222

10

Gua completa de HTML5

Dibujo de lneas con SVG ..................................................................... 223

Dibujo de crculos con SVG .................................................................. 224
Dibujo de elipses con SVG .................................................................... 225
Dibujo de rectngulos con SVG ............................................................ 226
Dibujo de polgonos con SVG ............................................................... 227
Dibujo de polilneas con SVG ............................................................... 228
Aplicacin de degradados ..................................................................... 229

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

Cmo funciona ....................................................................................... 265

Etiqueta <STYLE> ...................................................................................... 266
Aplicacin de estilo en selectores ........................................................ 269
Definicin de una clase ......................................................................... 271
Definicin de estilo con identificador ................................................... 272
Selector universal .................................................................................. 273
Selector limitado .................................................................................... 273
Limitacin a un atributo de un selector ................................................ 274
Herencia del estilo ...................................................................................... 274
Hojas de estilo en funcionamiento ............................................................. 275
Modos para asignar estilo .......................................................................... 279
Modo 1: etiqueta <STYLE> ................................................................. 279
Modo 2: uso de la etiqueta LINK ........................................................ 280
Modo 3: importando el estilo mediante la sentencia import .............. 280
Modo 4: mediante el atributo style (inline) ......................................... 281
Concurrencia de estilos (prioridad de aplicacin) ..................................... 281
Propiedades de las hojas de estilo ............................................................. 282
Unidades de medida .............................................................................. 283
Unidades de medida absolutas ................................................................ 283
Unidades de medida relativas ................................................................. 283

Unidades por porcentajes...................................................................... 283

Valores de color .................................................................................... 284
Valores de URL .................................................................................... 284
Propiedades para dar estilo al texto .................................................... 285
Ejemplos con espaciado de letras y de palabras ................................... 286
Ejemplos con decoracin y transformacin de texto ............................ 287

Propiedades asociadas a la fuente del texto........................................ 289

Ejemplos con fuentes de texto .................................................................. 290

Propiedades asociadas al color y al fondo ........................................... 291

Ejemplos con fondos de color ................................................................... 292
Ejemplo del uso de imgenes como fondo.............................................. 293

Propiedades asociadas a los cuadros de texto .................................... 295

Ejemplos con bordes, padding y mrgenes .......................................... 297

Propiedades relacionadas con el posicionamiento .............................. 298

Ejemplo de posicionamiento fijo .............................................................. 299
Ejemplo de posicionamiento relativo ...................................................... 300
Ejemplo de superposicin de elementos ................................................. 301

Propiedad display .................................................................................. 302

12

Gua completa de HTML5

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

Un truco Javascript para mostrar un calendario ................................. 344

Etiqueta <LABEL> ............................................................................... 348
Atributos de la etiqueta <Label> ............................................................. 349

Etiqueta <TEXTAREA> ....................................................................... 349

Atributos de la etiqueta <TEXTAREA> .................................................. 350

Etiqueta <SELECT> ............................................................................. 351

Atributos de la etiqueta <SELECT> ........................................................ 351

Etiqueta <OPTION> ............................................................................. 352

ndice general

13

Atributos de la etiqueta <OPTION> ....................................................... 352

Etiqueta <OPTGROUP>....................................................................... 353

Atributos de la etiqueta <OPTGROUP> ................................................. 353

Etiqueta <DATALIST> ......................................................................... 355

Etiqueta <BUTTON> ............................................................................ 356
Atributos de la etiqueta <BUTTON> ...................................................... 356

Etiqueta <FIELDSET> ......................................................................... 357

Atributos de la etiqueta <FIELDSET> ................................................... 357

Etiqueta <LEGEND> ............................................................................ 357

Etiqueta <PROGRESS> ....................................................................... 359
Atributos de la etiqueta <PROGRESS> .................................................. 359

Etiqueta <METER> .............................................................................. 360

Atributos de la etiqueta <METER> ......................................................... 361

Uso de formularios ...................................................................................... 362

Formulario con tablas ............................................................................ 362
Validacin con expresiones regulares (atributo pattern) ......................... 364
Expresiones regulares ........................................................................... 364
Aplicacin del atributo pattern ............................................................. 370
Estilo CSS en los formularios ..................................................................... 370

Captulo 10:
Multimedia ......................................................... 377
Complementos (plugin) ............................................................................... 377
Formatos multimedia ................................................................................... 379
Qu es un plug-in? ............................................................................... 379
Flash ........................................................................................................... 380
Streaming .................................................................................................... 380

Relacin formato multimedia-plugin .................................................... 381

Alternativas para la inclusin de objetos ............................................. 381
Etiqueta <EMBED> ................................................................................... 382
Etiqueta <OBJECT> ................................................................................... 383
Atributos de la etiqueta <OBJECT> ................................................... 384
Etiqueta <PARAM> .............................................................................. 386
Multimedia en HTML 5.............................................................................. 386
API de HTML 5 para multimedia......................................................... 387
VIDEO ......................................................................................................... 388
Etiqueta <VIDEO> ................................................................................ 388
Formatos de vdeo soportados .............................................................. 391
Qu pasa si se utiliza an IE 8 o anterior? ........................................ 391

14

Gua completa de HTML5

Etiqueta <SOURCE> ................................................................................. 391

Inclusin de subttulos en un vdeo....................................................... 392
AUDIO ......................................................................................................... 394
Etiqueta <AUDIO> ............................................................................... 394
Definicin audio para diferentes navegadores .................................... 395
Ejemplo: Uso de la API multimedia para controlar un vdeo .............. 398
Ejemplo: Radio con <AUDIO>, un reproductor de streaming ................. 408
CANVAS ...................................................................................................... 416
Etiqueta <CANVAS> ............................................................................. 416
Colaboracin HTML/JavaScript ............................................................. 417
Uso del canvas ........................................................................................... 418
Dibujo de una rejilla .................................................................................. 421
Ejemplo: Dibujo en un lienzo ................................................................... 452
Imagen en el lienzo ................................................................................... 454
Imgenes a escala ..................................................................................... 456
Recorte de imgenes ................................................................................. 459
Trazado de lneas ....................................................................................... 461
CANVAS y VIDEO .................................................................................... 463

Etiqueta <IFRAME> ............................................................................ 469

Control de restricciones (sandbox) .......................................................... 471

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

Almacenamiento Web (Web storage) .................................................. 483

Acceso por clave/valor .............................................................................. 483
sessionStorage ............................................................................................ 485
localStorage ................................................................................................ 486
Visualizacin del contenido del almacenamiento .................................. 488
Evento storage ............................................................................................ 496

Bases de datos Web SQL...................................................................... 504

Seguridad de los datos .......................................................................... 504
Interaccin con la base de datos ............................................................. 505

Tareas propias del lenguaje script ............................................................. 513

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

Gua completa de HTML5

Control de bucles de ejecucin ................................................................... 548

Sentencia for .......................................................................................... 548
Incremento/decremento por unidades .................................................. 550
Sentencia while ...................................................................................... 550
Sentencia do/while ................................................................................. 551
Funciones ..................................................................................................... 552
Parmetros de la funcin....................................................................... 552
Llamada de funcin .............................................................................. 553
Cmo saber cul fue la funcin llamante ............................................. 553
Una funcin que se llama a s misma ................................................... 555
mbito de variables: locales y globales .................................................... 556
Evaluacin de una cadena de cdigo JavaScript ...................................... 558
JavaScript y los motores de bsqueda ...................................................... 559
Modernizr .................................................................................................... 560
Deteccin de funcionalidades ............................................................... 561
Objeto Javascript ....................................................................................... 561
Clases CSS .................................................................................................. 561

Uso de Modernizr .................................................................................. 562

Pero si no est activado JavaScript? ................................................... 566
Uso de Modernizr para simplificar el cdigo ........................................ 569

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

Otros mtodos de dataTransfer ............................................................ 614

Ejemplo: Un juego con Drag-and-drop ................................................. 615
Otros eventos de la API Drag-and-Drop ............................................. 620
API para la gestin de archivos ................................................................. 621
Interfaz File ............................................................................................ 621
Lectura de archivos desde la pgina web ............................................ 625

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

Gua completa de HTML5

Uso de degradados CSS............................................................................. 676

Creacin de unos botones elegantes ........................................................ 678
Sombras ...................................................................................................... 678
Aplicacin de degradados ........................................................................ 680

Transiciones y transformaciones .......................................................... 683

Transiciones o animaciones? ................................................................. 688
Transiciones ................................................................................................ 688
Animaciones ............................................................................................... 692

Apndice A: Gua de acceso rpido ................. 701

Etiquetas ordenadas alfabticamente ........................................................ 701
Atributos comunes a todas las etiquetas ................................................... 706
Etiquetas ordenadas por su funcionalidad ................................................. 707
Eventos comunes ......................................................................................... 733
Eventos de ventana ..................................................................................... 734
Eventos de formulario ................................................................................. 735
Eventos de elementos multimedia.............................................................. 736

Apndice B: Tablas de cdigos ......................... 739

Cdigos y nombres de los colores estndar .............................................. 739
Cdigos de conjunto de caracteres ISO .................................................... 742
Unicode......................................................................................................... 743
Entidades principales .................................................................................. 743

Apndice C: Prctica completa........................ 747

ndice .................................................................. 805