Reseña del libro "El Gran Libro de Html5, Css3 y Javascript"
Vivimos una revolución. Internet ha dejado de ser sólo un instrumento de comunicación para convertirse en parte de, prácticamente, todos los aspectos de la vida humana. En este contexto, el lenguaje HTML5 ha adquirido una importancia única. Las aplicaciones de Internet a las que accedemos ahora incontables veces en un día, ya sea desde un ordenador de mesa, un teléfono móvil, una PDA o cualquier otro dispositivo, son posibles gracias a HTML5. Con este manual aprenderá, a través de ejercicios prácticos soportados por sólidos conocimientos teóricos, a crear toda clase de sitios webs y aplicaciones estructuradas en HTML5, con estilos CS3 y programadas con las más importantes y recientes herramientas de Javascript. Estudiará desde los conceptos más básicos y tradicionales de cada uno de los lenguajes hasta los más utilizados por verdaderos profesionales de la programación. En cada capítulo irá desarrollando diversos códigos que irán ganando complejidad a medida que se avanza en la lección y harán mucho más accesibles los conceptos previamente estudiados. Mediante el uso de los componentes de los tres lenguajes, las nuevas API que ofrece Javascript y librerías externas, aprenderá a escribir sus propios códigos para crear, programar y optimizar formularios, personalizar la forma en la que se reproduce un archivo de vídeo o de audio, insertar una o más pistas de subtítulos en un vídeo, controlar la entrada y salida de cualquier elemento en el modo de pantalla completa, capturar vídeo en streamig, crear gráficos y animaciones de dos y tres dimensiones, programar un vídeo juego, controlar la apariencia y la forma en la que se comporta el ratón en determinadas circunstancias, utilizar la geolocalización, manipular la historia de navegación del usuario, optimizar el funcionamiento fuera de línea de su sitio, crear aplicaciones de mensajería digital y otras formas de comunicación bidireccional, entre muchos otros conocimientos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321.3.7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321.4 La estructura del cuerpo del documento . . . . . . . . . . . . . . . . . . . . . 341.4.1 Organización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341.4.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371.4.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381.4.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391.4.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401.4.6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421.5 En el interior del cuerpo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431.5.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431.5.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471.5.3 y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481.5.4 y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501.6 Elementos nuevos y elementos antiguos . . . . . . . . . . . . . . . . . . . . . 511.6.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511.6.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511.6.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521.6.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521.6.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521.6.6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531.6.7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531.7 Nuevos atributos y viejos atributos. . . . . . . . . . . . . . . . . . . . . . . . . 541.7.1 El atributo data-* 541.7.2 reversed 541.7.3 ping y download 541.7.4 translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551.7.5 contenteditable 561.7.6 spellcheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562. Estilos CSS y modelos de caja . . . . . . . . . . . . . . . . . . . . . . . . 572.1 CSS y HTML 572.2 Breve introducción a CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572.2.1 Reglas CSS 582.2.2 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 2.2.3 Estilos en línea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602.2.4 Estilos incrustados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612.2.5 Archivos externos 612.2.6 Referencias 622.2.7 Selectores nuevos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682.3 Aplicar CSS a nuestro documento . . . . . . . . . . . . . . . . . . . . . . 692.3.1 Modelos de caja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702.4 Modelo de caja tradicional . . . . . . . . . . . . . . . . . . . . . . . . . . . 712.4.1 Documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712.4.2 Selector universal (*) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732.4.3 Títulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742.4.4 Declaración de nuevos elementos HTML5 . . . . . . . . .2.4.5 Centrar el cuerpo 752.4.6 Creación de la caja principal 752.4.7 La cabecera 762.4.8 Barra de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 772.4.9 Área principal y Barra lateral 782.4.10 Pie de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 792.4.11 Toques finales 812.4.12 box-sizing 822.5 Modelo de caja flexible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 842.5.1 Contenedor flexible 842.5.2 Documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 842.5.3 Display 852.5.4 Ejes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 2.5.5 Propiedad Flex 862.5.6 flex-direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 912.5.7 order 922.5.8 justify-content 922.5.9 align-items 952.5.10 align-self 972.5.11 flex-wrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982.5.12 align-content 993. Propiedades CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1023.1 Las nuevas reglas 1023.1.1 CSS3 ha enloquecido 1023.1.2 Documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1023.1.3 border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1043.1.4 box-shadow 1063.1.5 text-shadow 1083.1.6 @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1093.1.7 linear-gradient 1103.1.8 radial-gradient 1123.1.9 rgb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1133.1.10 hsla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1143.1.11 outline 1143.1.12 border-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1153.1.13 background 1163.1.14 Columnas 1183.2 Transformar 1203.2.1 transform: scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.2.2 transform: rotate 1213.2.3 transform: skew 1223.2.4 transform: translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1223.2.5 Transformar todo en un elemento 1233.2.6 Transformaciones dinámicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1233.2.7 Transformaciones 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1243.3 Transiciones 127 3.4 Animaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1284 Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1324.1 Breve introducción a Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . 1324.1.1 El lenguaje 1324.1.2 Variables 133 4.1.3 Condicionales y bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 4.1.4 Objetos 144 4.1.5 Constructores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 4.1.6 El objeto Window 154 4.1.7 El objeto Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 4.2 Una introducción a los eventos 156 4.2.1 Atributos de eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 4.2.2 Propiedades del evento 157 4.2.3 El método addEventListener() 157 4.3 Incorporar Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 4.3.1 En línea 158 4.3.2 Incrustado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 4.3.3 Desde un archivo externo 160 4.4 Nuevos selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1614.4.1 querySelector() 161 4.4.2 querySelectorAll() 1624.4.3 matchesSelector() 164 4.5 Interactuar con el documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 4.5.1 Estilos Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 4.5.2 ClassList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 4.5.3 Acceder a los atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 4.5.4 dataset 169 4.5.5 Crear y borrar elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 4.5.6 innerHTML, outerHtml e insertAdjacentHTML 170 4.6 Las API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 4.6.1 API nativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 4.6.2 API externas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1734.7 Errores y depuración 174 4.7.1 Consola . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 4.7.2 console.log() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 4.7.3 Evento error 176 5 Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1775.1 Formularios HTML 177 5.1.1 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 5.1.2. El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 5.1.3 Más elementos de formulario 180 5.1.4 Enviar un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 5.2 Nuevos tipos de entrada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 5.2.1 Tipo email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 5.2.2 Tipo search 182 5.2.3 Tipo url 182 5.2.4 Tipo tel 183 5.2.5 Tipo number 183 5.2.6 Tipo range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 5.2.7 Tipo date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 5.2.8 Tipo week . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 5.2.9 Tipo month 184 5.2.10 Tipo time 184 5.2.11 Tipo datetime 184 5.2.12 Tipo datetime-local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 5.2.13 Tipo color 185 5.3 Nuevos atributos 185 5.3.1 Atributo autocomplete 185 5.3.2 Atributos novalidate y formnovalidate 185 5.3.3 Atributo placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 5.3.4 Atributo required . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 5.3.5 Atributo multiple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 5.3.6 Atributo autofocus 187 5.3.7 Atributo pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 5.3.8 Atributo form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 5.4 Nuevos elementos de los formularios 188 5.4.1 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 5.4.2 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 5.4.3 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 5.4.4 El elemento 189 5.5 Nueva pseudo-clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 5.5.1 valid e invalid 189 5.5.2 optional y required . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 5.5.3 in-range y out-of-range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1915.6 Formularios API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 5.6.1 SetCustomValidity() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 5.6.2 El evento invalid y el método CheckValidity() 194 5.6.3 Validación en tiempo real con ValidityState . . . . . . . . . . . . . . . . . . . . 196 5.6.4 Restricciones de validez . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 6 Vídeo y audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 6.1 Vídeo con HTML5 199 6.1.1 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 6.1.2 Atributos del elemento 201 6.1.3 Formatos de vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 6.2 Audio con HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 6.2.1 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 6.3 Subtítulos 204 6.3.1 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 6.4 Programar un reproductor multimedia 208 6.4.1 Diseño de un reproductor de vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 6.4.2 Aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 6.4.3 Eventos 211 6.4.4 Código Javascript 212 6.4.5 Métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 6.4.6 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 6.4.7 Código en funcionamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 7 API TextTrack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 7.1 API TextTrack 218 7.1.1 Lectura de pistas o tracks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 7.1.2 Lectura de entradas o cues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 7.1.3 Adición de pistas nuevas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 8 API Fullscreen 224 8.1 Basta de ventanas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 8.1.1 Ir a pantalla completa 224 8.1.2 Estilos "Fullscreen" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 9. API Stream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 9.1 Capturar contenidos 228 9.1.1 Acceder a la cámara web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2289.1.2 Objetos MediaStreamTrack . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 9.1.3 Método stop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 10 API Canvas 233 10.1 Los gráficos para la Web 233 10.1.1 El elemento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 10.1.2 GetContext() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 10.2 Dibujar en el lienzo 234 10.2.1 Dibujar rectángulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 10.2.2 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 10.2.3 Degradados 236 10.2.4 Crear trazados 238 10.2.5 Estilos de línea 244 10.2.6 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 10.2.7 Sombras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 10.2.8 Transformaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 10.2.9 Restaurar el estado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 10.2.10 globalCompositeOperation . . . . . . . . . . . . . . . . . . . . . . . . . . 252 10.3 Procesamiento de Imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 10.3.1 drawImage() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 10.3.2 Datos de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 10.3.3 cross-Origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 10.3.4 Extracción de los datos 259 10.3.5 Patrones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 10.4 Animaciones sobre lienzo 261 10.4.1 Animaciones elementales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 10.4.2 Animaciones profesionales 262 10.5 Procesar vídeo en el lienzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 10.5.1 Mostrar vídeo en el lienzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 10.5.2 Aplicación de la vida real 268 11. WebGL y Three.js 270 11.1 Lienzo en 3D 270 11.2 Three.js 270 11.2.1 Renderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 11.2.2 scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 11.2.3 Cámara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27211.2.4 Mallas 273 11.2.5 Geométricas primitivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 11.2.6 Materiales 275 11.2.7 Implementación 278 11.2.8 Transformaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 11.2.9 Luces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 11.2.10 Texturas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 11.2.11 Aplicación UV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 11.2.12 Texturas de lienzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 11.2.13 Texturas de vídeo 289 11.2.14 Cargar modelos 3D 292 11.2.15 Animaciones en 3D 294 12 API Pointer Lock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 12.1 Nuevo puntero del ratón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 12.1.1 Capturar el ratón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 12.1.2 pointerLockElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 12.1.3 movementX y movementY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 13 API Drag and Drop 312 13.1 Arrastrar y soltar en la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 13.1.1 Eventos 312 13.1.2 DataTransfer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 13.1.3 dragenter, dragleave y dragend 316 13.1.4 Seleccionar una fuente válida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 13.1.5 setDragImage(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 13.1.6 Archivos 321 14 API Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 14.1 Dos sistemas de almacenamiento . . . . . . . . . . . . . . . . . . . . . . . . . 323 14.2 SessionStorage 324 14.2.1 Implementar un sistema de almacenamiento de datos . . . . . . . . . . . . . . . . . 324 14.2.2 Crear datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325 14.2.3 Leer datos 327 14.2.4 Eliminar datos 328 14.3 LocalStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 14.3.1 Evento storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 15 API IndexedDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33315.1 Una API de bajo nivel 333 15.1.1 Base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 15.1.2 Objetos y Almacenes de objetos 334 15.1.3 Índices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 15.1.4 Transacciones 336 15.1.5 Métodos de almacenes de objetos 336 15.2 Implementar IndexedDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 15.2.1 Plantilla 337 15.2.2 Abrir la base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 15.2.3 Almacenes de objetos e índices . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 15.2.4 Agregar objetos 340 15.2.5 Leer objetos 341 15.2.6 Finalizar y probar el código 342 15.3 Listar datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 15.3.1 Cursores 343 15.3.2 Cambio de orden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 15.4 Eliminar datos 347 15.5 Buscar datos 348 16 API File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 16.1 Almacenamiento de archivos 351 16.2 Procesar archivos de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 16.2.1 Plantilla 352 16.2.2 Leer archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 16.2.3 Propiedades de archivos 354 16.2.4 Blobs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 16.2.5 Eventos 357 16.3 Crear archivos 359 16.3.1 Documento HTML 359 16.3.2 El disco duro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 16.3.3 Crear archivos 361 16.3.4 Crear directorios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 16.3.5 Listar archivos 363 16.3.6 Manejar archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367 16.3.7 Mover archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 16.3.8 Copiar archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36916.3.9 Eliminar 370 16.4 Contenido de archivos 371 16.4.1 Escribir contenido 371 16.4.2 Agregar contenido 374 16.4.3 Leer contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 16.5 Acceder a los archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 16.6 Sistema de archivos real 378 17 API Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 17.1 Encontrar su lugar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 17.1.1 Documento HTML 383 17.1.2 getCurrentPosition(ubicación) . . . . . . . . . . . . . . . . . . . . . . . 384 17.1.3 getCurrentPosition(ubicación, error) 385 17.1.4 getCurrentPosition(ubicación, error, configuración) 386 17.1.5 watchPosition(ubicación, error, configuración) . . . . . . . . . . . . 388 17.1.6 Usos prácticos con Google Maps 389 18 API History 391 18.1 La interfaz de API History 391 18.1.1 Navegar por la Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 18.1.2 Nuevos métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 18.1.3 URL falsas 393 18.1.4 La propiedad state 394 18.1.5 Un ejemplo de la vida real . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 19 API Offline 401 19.1 El manifiesto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 19.1.1 El archivo manifiesto 401 19.1.2 Categorías 402 19.1.3 Comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 19.1.4 Uso del archivo manifiesto 404 19.2 API Offline 405 19.2.1 Los errores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 19.2.2 online y offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 19.2.3 Estado del caché 407 19.2.4 Progreso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 19.2.5 Actualización del caché . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41120 API Page Visibility 414 20.1 El estado de visibilidad 414 20 1 1 Estado actual 414 20 1 2 Una mejor experiencia 415 20 1 3 Detector completo 416 21 Ajax Level 2 418 21.1 XMLHttpRequest 418 21 1 1 Recuperar datos 419 21 1 2 Propiedades de respuesta 421 21 1 3 Eventos 422 21 1 4 Envío de datos 424 21 1 5 Solicitudes de orígenes cruzados 426 21 1 6 Cargar archivos 426 21 1 7 Una aplicación real 428 22 API Web Messaging 432 22.1 Mensajería entre documentos 432 22 1 1 Enviar un mensaje 432 22 1 2 Comunicar con un iframe 432 22 1 3 Filtros y orígenes cruzados 435 23 API WebSocket 438 23.1 WebSockets 438 23 1 1 Servidor WebSocket 438 23 1 2 Instalación y ejecución de un servidor WS 439 23 1 3 Constructor 440 23 1 4 Métodos 440 23 1 5 Propiedades 441 23 1 6 Eventos 441 23 1 7 Documento HTML 441 23 1 8 Iniciar la comunicación 442 23 1 9 Aplicación completa 443 24 API WebRTC 445 24.1 Llega la revolución 445 24 1 1 El viejo paradigma 445 24 1 2 El nuevo paradigma 44624.1.3 Requisitos 446 24.1.4 RTCPeerConnection 447 24.1.5 Candidato ICE 448 24.1.6 Oferta y respuesta 448 24.1.7 SessionDescription . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 24.1.8 Flujos de medios o streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 24.1.9 Eventos 449 24.1.10 El final 450 24.2 Ejecutar WebRTC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 24.2.1 Servidor de señalización 450 24.2.2 Servidores ICE 452 24.2.3 Documento HTML 452 24.2.4 El código Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 24.2.5 Aplicación de la vida real 458 24.3 Canales de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 24.3.1 Creación de canales de datos 458 24.3.2. Envío de datos 459 25 API Web Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 25.1 Estructura de nodos de audio 464 25.1.1 Los nodos de audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 25.1.2 Contexto Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 25.1.3 Fuentes de audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 25.1.4 Nodos de conexión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 25.1 Sonidos para la Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 25.2.1 Dos nodos básicos 468 25.2.2 Bucles y tiempos 470 25.2.3 Crear AudioNodes 471 25.2.4 AudioParam 472 25.2.5 GainNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 25.2.6 DelayNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 25.2.7 BiquadFilterNode 476 25.2.8 DynamicsCompressorNode . . . . . . . . . . . . . . . . . . . . . . . . . . . 477 25.2.9 ConvolverNode 478 25.2.10 PannerNode y sonido 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 25.12.11 AnalyserNode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 26 API Web Workers 48626.1 Hacer el trabajo duro . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 26.1.1 Crear un trabajador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 26.1.2 Enviar y recibir mensajes 487 26.1.3 Detectar errores 489 26.1.4 Detener el trabajador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 26.1.5 API asíncronas 492 26.1.6 Importación de scripts 493 26.1.7 Trabajador compartido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 Conclusiones 498 Trabajando para el mundo 498 Las alternativas 498 Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 Bibliotecas 500 Google Chrome Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Trabajar para la nube 501 Las API que no han sido incluidas 503 Lo que debe saber 503 Palabras finales del autor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
