ndiceEl gran libro de HTML5, CSS3 y JavascriptPgina de crditosIntroduccinCaptulo 1 Documentos HTML5

1.1 Componentes bsicos1.2 Estructura global

1.3 Estructura del cuerpoOrganizacin

1.4 Dentro del cuerpo

y

1.5 Nuevos y viejos elementos

1.6 Referencia rpidaCaptulo 2 Estilos CSS y modelos de caja

2.1 CSS y HTML2.2 Estilos y estructura

Elementos blockModelos de caja

2.3 Conceptos bsicos sobre estilosEstilos en lneaEstilos embebidosArchivos externosReferenciasReferenciando con palabra claveReferenciando con el atributo idReferenciando con el atributo class

Referenciando con cualquier atributoReferenciando con pseudo clasesNuevos selectores

2.4 Aplicando CSS a nuestra plantilla2.5 Modelo de caja tradicional

PlantillaSelector universal *Nueva jerarqua para cabecerasDeclarando nuevos elementos HTML5Centrando el cuerpoCreando la caja principalLa cabeceraBarra de navegacinSection y asideFooterltimos toquesBox-sizing

2.6 Referencia rpidaSelector de atributo y pseudo clasesSelectores

Captulo 3 Propiedades CSS33.1 Las nuevas reglas

CSS3 se vuelve locoPlantillaBorder-radiusBox-shadowText-shadow@font-faceGradiente linealGradiente radialRGBAHSLAOutlineBorder-imageTransform y transitionTransform: scaleTransform: rotateTransform: skewTransform: translateTransformando todo al mismo tiempoTransformaciones dinmicasTransiciones

3.2 Referencia rpidaCaptulo 4 Javascript

4.1 La relevancia de Javascript4.2 Incorporando Javascript

En lnea

EmbebidoArchivos externos

4.3 Nuevos SelectoresquerySelector()querySelectorAll()

4.4 Manejadores de eventosManejadores de eventos en lneaManejadores de eventos como propiedadesEl mtodo addEventListener()

4.5 APIsCanvasDrag and DropGeolocationStorageFileCommunicationWeb WorkersHistoryOffline

4.6 Libreras externasjQueryGoogle Maps

4.7 Referencia rpidaElementosSelectoresEventosAPIs

Captulo 5 Video y audio5.1 Reproduciendo video con HTML5

El elemento Atributos para

5.2 Programando un reproductor de videoEl diseoEl cdigoLos eventosLos mtodosLas propiedadesEl cdigo en operacin

5.3 Formatos de video5.4 Reproduciendo audio con HTML5

El elemento 5.5 Programando un reproductor de audio5.6 Referencia rpida

ElementosAtributosAtributos de videoEventos

MtodosPropiedades

Captulo 6 Formularios y API Forms6.1 Formularios Web

El elemento El elemento Tipo emailTipo searchTipo urlTipo telTipo numberTipo rangeTipo dateTipo weekTipo monthTipo datetimeTipo datetime-localTipo color

6.2 Nuevos atributosAtributo placeholderAtributo requiredAtributo multipleAtributo autofocus

6.3 Nuevos elementos para formulariosEl elemento El elemento El elemento El elemento

6.4 API FormssetCustomValidity()El evento invalidValidacin en tiempo realPropiedades de validacinwillValidate

6.5 Referencia rpidaTiposAtributosElementosMtodosEventosEstado

Captulo 7 API Canvas7.1 Preparando el lienzo

El elemento getContext()

7.2 Dibujando en el lienzoDibujando rectngulos

ColoresGradientesCreando trazadosEstilos de lneaTextoSombrasTransformacionesRestaurando el estadoglobalCompositeOperation

7.3 Procesando imgenesdrawImage()Datos de imgenesPatrones

7.4 Animaciones en el lienzo7.5 Procesando video en el lienzo7.6 Referencia rpida

MtodosPropiedades

Captulo 8 API Drag and Drop8.1 Arrastrar y soltar en la web

Nuevos eventosdataTransferdragenter, dragleave y dragendSeleccionando un origen vlidosetDragImage()Archivos

8.2 Referencia rpidaEventosMtodosPropiedades

Captulo 9 API Geolocation9.1 Encontrando su lugar

getCurrentPosition(ubicacin)getCurrentPosition(ubicacin, error)getCurrentPosition(ubicacin, error, configuracin)watchPosition(ubicacin, error, configuracin)Usos prcticos con Google Maps

9.2 Referencia rpidaMtodosObjetos

Captulo 10 API Web Storage10.1 Dos sistemas de almacenamiento10.2 La sessionStorage

Implementacin de un sistema de almacenamiento de datosCreando datosLeyendo datosEliminando datos

10.3 La localStorageEvento storageEspacio de almacenamiento

10.4 Referencia rpidaTipo de almacenamientoMtodos

Captulo 11 API IndexedDB11.1 Una API de bajo nivel

Base de datosObjetos y Almacenes de ObjetosndicesTransaccionesMtodos de Almacenes de Objetos

11.2 Implementando IndexedDBPlantillaAbriendo la base de datosVersin de la base de datosAlmacenes de Objetos e ndicesAgregando ObjetosLeyendo ObjetosFinalizando el cdigo

11.3 Listando datosCursoresCambio de orden

11.4 Eliminando datos11.5 Buscando datos11.6 Referencia rpida

Interface Environment (IDBEnvironment y IDBFactory)Interface Database (IDBDatabase)Interface Object Store (IDBObjectStore)Interface Cursors (IDBCursor)Interface Transactions (IDBTransaction)Interface Range (IDBKeyRangeConstructors)Interface Error (IDBDatabaseException)

Captulo 12 API File12.1 Almacenamiento de archivos12.2 Procesando archivos de usuario

PlantillaLeyendo archivosPropiedades de archivosBlobsEventos

12.3 Creando archivosPlantillaEl disco duroCreando archivosCreando directorios

Listando archivosManejando archivosMoviendoCopiandoEliminando

12.4 Contenido de archivosEscribiendo contenidoAgregando contenidoLeyendo contenido

12.5 Sistema de archivos de la vida real12.6 Referencia rpida

Interface Blob (API File)Interface File (API File)Interface FileReader (API File)Interface LocalFileSystem (API File: Directories and System)Interface FileSystem (API File: Directories and System)Interface Entry (API File: Directories and System)Interface DirectoryEntry (API File: Directories and System)Interface DirectoryReader (API File: Directories and System)Interface FileEntry (API File: Directories and System)Interface BlobBuilder (API File: Writer)Interface FileWriter (API File: Writer)Interface FileError (API File y extensiones)

Captulo 13 API Communication13.1 Ajax nivel 2

Obteniendo datosPropiedades responseEventosEnviando datosSolicitudes de diferente origenSubiendo archivosAplicacin de la vida real

13.2 Cross Document MessagingConstructorEvento message y propiedadesEnviando mensajesFiltros y mltiples orgenes

13.3 Web SocketsConfiguracin del servidor WSConstructorMtodosPropiedadesEventosPlantillaIniciar la comunicacinAplicacin completa

13.4 Referencia rpida

XMLHttpRequest Level 2API Web MessagingAPI WebSocket

Captulo 14 API Web Workers14.1 Haciendo el trabajo duro

Creando un trabajadorEnviando y recibiendo mensajesDetectando erroresDeteniendo trabajadoresAPIs sncronasImportando cdigosTrabajadores compartidos

14.2 Referencia rpidaTrabajadoresTrabajadores dedicados (Dedicated Workers)Trabajadores compartidos (Shared Workers)

Captulo 15 API History15.1 Interface History

Navegando por la WebNuevos mtodosURLs falsasSiguiendo la pistaEjemplo real

15.2 Referencia rpidaCaptulo 16 API Offline

16.1 CachEl archivo manifiestoCategorasComentariosUsando el archivo manifiesto

16.2 API OfflineErroresOnline y offlineProcesando el cachProgresoActualizando el cach

16.3 Referencia rpidaArchivo manifiestoPropiedadesEventosMtodos

ConclusionesTrabajando para el mundo

Las alternativasModernizrLibrerasGoogle Chrome Frame

Trabajando para la nubeRecomendaciones finales

Extras

El gran libro de HTML5,CSS3 y Javascript

Juan Diego Gauchat

Pgina de crditos

El gran libro de HTML5, CSS3 y Javascript

Primera edicin en libro electrnico: Enero de 2012

Juan Diego Gauchat, 2012

MARCOMBO, S.A. 2012

Gran Via de les Corts Catalanes, 594 08007 Barcelona (Espaa) www.marcombo.com Cualquier forma de reproduccin, distribucin, comunicacin pblica o transformacin de esta obra slo puede ser realizadacon la autorizacin de sus titulares, salvo excepcin prevista por la ley. Dirjase a CEDRO (Centro Espaol de DerechosReprogrficos, www.cedro.org) si necesita fotocopiar o escanear algn fragmento de esta obra. ISBN edicin en formato electrnico: 978-84-267-1782-5

ISBN edicin en papel: 978-84-267-1770-2

Introduccin HTML5 no es una nueva versin del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnologa, sinoun nuevo concepto para la construccin de sitios web y aplicaciones en una era que combina dispositivos mviles,computacin en la nube y trabajos en red. Todo comenz mucho tiempo atrs con una simple versin de HTML propuesta para crear la estructura bsica de pginasweb, organizar su contenido y compartir informacin. El lenguaje y la web misma nacieron principalmente con la intencin decomunicar informacin por medio de texto. El limitado objetivo de HTML motiv a varias compaas a desarrollar nuevos lenguajes y programas para agregarcaractersticas a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares ypoderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendonuevas experiencias que cambiaron el concepto de la web para siempre. De las opciones propuestas, Java y Flash fueron las ms exitosas; ambas fueron masivamente adoptadas y ampliamenteconsideradas como el futuro de Internet. Sin embargo, tan pronto como el nmero de usuarios se increment e Internet pasde ser una forma de conectar amantes de los ordenadores a un campo estratgico para los negocios y la interaccin social,limitaciones presentes en estas dos tecnologas probaron ser una sentencia de muerte. El mayor inconveniente de Java y Flash puede describirse como una falta de integracin. Ambos fueron concebidos desdeel principio como complementos (plug-ins), algo que se inserta dentro de una estructura pero que comparte con la mis