javascript, html,css, Apuntes de Informática

¡Descarga javascript, html,css y más Apuntes en PDF de Informática solo en Docsity!

Índice

El gran libro de HTML5, CSS3 y Javascript Página de créditos Introducción Capítulo 1 Documentos HTML 1.1 Componentes básicos 1.2 Estructura global

<link> 1.3 Estructura del cuerpo Organización <header> <nav> <section> <aside> <footer> 1.4 Dentro del cuerpo <article> <hgroup> <figure> y <figcaption> 1.5 Nuevos y viejos elementos <mark> <small> <cite> <address> <time> 1.6 Referencia rápida Capítulo 2 Estilos CSS y modelos de caja 2.1 CSS y HTML 2.2 Estilos y estructura Elementos block Modelos de caja 2.3 Conceptos básicos sobre estilos Estilos en línea Estilos embebidos Archivos externos Referencias Referenciando con palabra clave Referenciando con el atributo id Referenciando con el atributo class

Embebido Archivos externos 4.3 Nuevos Selectores querySelector() querySelectorAll() 4.4 Manejadores de eventos Manejadores de eventos en línea Manejadores de eventos como propiedades El método addEventListener() 4.5 APIs Canvas Drag and Drop Geolocation Storage File Communication Web Workers History Offline 4.6 Librerías externas jQuery Google Maps 4.7 Referencia rápida Elementos Selectores Eventos APIs Capítulo 5 Video y audio 5.1 Reproduciendo video con HTML El elemento Atributos para 5.2 Programando un reproductor de video El diseño El código Los eventos Los métodos Las propiedades El código en operación 5.3 Formatos de video 5.4 Reproduciendo audio con HTML El elemento 5.5 Programando un reproductor de audio 5.6 Referencia rápida Elementos Atributos Atributos de video Eventos

Métodos Propiedades Capítulo 6 Formularios y API Forms 6.1 Formularios Web El elemento El elemento Tipo email Tipo search Tipo url Tipo tel Tipo number Tipo range Tipo date Tipo week Tipo month Tipo datetime Tipo datetime-local Tipo color 6.2 Nuevos atributos Atributo placeholder Atributo required Atributo multiple Atributo autofocus 6.3 Nuevos elementos para formularios El elemento El elemento El elemento El elemento 6.4 API Forms setCustomValidity() El evento invalid Validación en tiempo real Propiedades de validación willValidate 6.5 Referencia rápida Tipos Atributos Elementos Métodos Eventos Estado Capítulo 7 API Canvas 7.1 Preparando el lienzo El elemento getContext() 7.2 Dibujando en el lienzo Dibujando rectángulos

10.3 La localStorage Evento storage Espacio de almacenamiento 10.4 Referencia rápida Tipo de almacenamiento Métodos Capítulo 11 API IndexedDB 11.1 Una API de bajo nivel Base de datos Objetos y Almacenes de Objetos Índices Transacciones Métodos de Almacenes de Objetos 11.2 Implementando IndexedDB Plantilla Abriendo la base de datos Versión de la base de datos Almacenes de Objetos e índices Agregando Objetos Leyendo Objetos Finalizando el código 11.3 Listando datos Cursores Cambio de orden 11.4 Eliminando datos 11.5 Buscando datos 11.6 Referencia rápida Interface Environment (IDBEnvironment y IDBFactory) Interface Database (IDBDatabase) Interface Object Store (IDBObjectStore) Interface Cursors (IDBCursor) Interface Transactions (IDBTransaction) Interface Range (IDBKeyRangeConstructors) Interface Error (IDBDatabaseException) Capítulo 12 API File 12.1 Almacenamiento de archivos 12.2 Procesando archivos de usuario Plantilla Leyendo archivos Propiedades de archivos Blobs Eventos 12.3 Creando archivos Plantilla El disco duro Creando archivos Creando directorios

Listando archivos Manejando archivos Moviendo Copiando Eliminando 12.4 Contenido de archivos Escribiendo contenido Agregando contenido Leyendo contenido 12.5 Sistema de archivos de la vida real 12.6 Referencia rápida 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) Capítulo 13 API Communication 13.1 Ajax nivel 2 Obteniendo datos Propiedades response Eventos Enviando datos Solicitudes de diferente origen Subiendo archivos Aplicación de la vida real 13.2 Cross Document Messaging Constructor Evento message y propiedades Enviando mensajes Filtros y múltiples orígenes 13.3 Web Sockets Configuración del servidor WS Constructor Métodos Propiedades Eventos Plantilla Iniciar la comunicación Aplicación completa 13.4 Referencia rápida

Trabajando para la nube Recomendaciones finales Extras

El gran libro de HTML5,

CSS3 y Javascript

Juan Diego Gauchat

Página de créditos

El gran libro de HTML5, CSS3 y Javascript Primera edición en libro electrónico: Enero de 2012 © Juan Diego Gauchat, 2012 © MARCOMBO, S.A. 2012 Gran Via de les Corts Catalanes, 594 08007 Barcelona (España) www.marcombo.com «Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra». ISBN edición en formato electrónico: 978-84-267-1782- ISBN edición en papel: 978-84-267-1770-

y además es una buena plataforma para pruebas. Por otro lado, Firefox es uno de los mejores navegadores para desarrolladores y también provee total soporte para HTML5. Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y prueba sus códigos en cada programa disponible en el mercado. Ejecute los códigos provistos en este libro en cada uno de los navegadores disponibles. Para descargar las últimas versiones, visite los siguientes enlaces: · www.google.com/chrome · www.apple.com/safari/download · www.mozilla.com · windows.microsoft.com · www.opera.com En la conclusión del libro exploramos diferentes alternativas para hacer sus sitios webs y aplicaciones accesibles desde viejos navegadores e incluso aquellos que aún no están preparados para HTML5.

1.2 Estructura global

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

---

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

---

Listado 1-1. Usando el elemento . IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario. Hágalo usted mismo: Puede comenzar a copiar el código en su archivo de texto y agregar los próximos a medida que los vamos estudiando.

---

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento ****. Este elemento envolverá al resto del código:

** ** Listado 1-2. Usando el elemento . El atributo lang en la etiqueta de apertura **** es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español. Conceptos básicos: HTML usa un lenguaje de etiquetas para construir páginas web. Estas etiquetas HTML son palabras clave y atributos rodeados de los signos mayor y menor (por ejemplo, **** ). En este caso, html es la palabra clave y lang es el atributo con el valor es. La mayoría de las etiquetas HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el contenido se declara entre ellas. En nuestro ejemplo, **** indica el comienzo del código HTML y **** indica el final. Compare las etiquetas de apertura y cierre y verá que la de cierre se distingue por una barra invertida antes de la palabra clave (por ejemplo, **** ). El resto de nuestro código será insertado entre estas dos etiquetas: ** ... **. IMPORTANTE: HTML5 es extremadamente flexible en cuanto a la estructura y a los elementos utilizados para construirla. El elemento **** puede ser incluido sin ningún atributo o incluso ignorado completamente. Con el propósito de preservar compatibilidad (y por algunas razones extras que no vale la pena mencionar aquí) le recomendamos que siga algunas reglas básicas. En este libro vamos a enseñarle cómo construir documentos HTML de acuerdo a lo que nosotros consideramos prácticas recomendadas. Para encontrar otros lenguajes para el atributo lang puede visitar el siguiente enlace: www.w3schools.com/tags/ref_language_codes.asp.

---

Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas **** tiene que ser dividido entre

dos secciones principales. Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones en el código usando los elementos **** y **** ya conocidos. El elemento **** va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:

** **

Listado 1-3. Usando el elemento . La etiqueta no cambió desde versiones anteriores y su propósito sigue siendo exactamente el mismo. Dentro de las etiquetas **** definiremos el título de nuestra página web, declararemos el set de caracteres correspondiente, proveeremos información general acerca del documento e incorporaremos los archivos externos con estilos, códigos Javascript o incluso imágenes necesarias para generar la página en la pantalla. Excepto por el título y algunos íconos, el resto de la información incorporada en el documento entre estas etiquetas es invisible para el usuario.

---

La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas ****. Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:

** **

Listado 1-4. Usando el elemento . Conceptos básicos: Hasta el momento tenemos un código simple pero con una estructura compleja. Esto es porque el código HTML no está formado por un conjunto de instrucciones secuenciales. HTML es un lenguaje de etiquetas, un listado de elementos que usualmente se utilizan en pares y que pueden ser anidados (totalmente contenidos uno dentro del otro). En la primera línea del código del Listado 1-4 tenemos una etiqueta simple con la definición del tipo de documento e inmediatamente después la etiqueta de apertura ****. Esta etiqueta y la de cierre **** al final del listado están indicando el comienzo del código HTML y su final. Entre las etiquetas **** insertamos otras etiquetas especificando dos importantes partes de la estructura básica: **** para la cabecera y **** para el cuerpo del documento. Estas dos etiquetas también se utilizan en pares. Más adelante en este capítulo veremos que más etiquetas son insertadas entre estas últimas conformando una estructura de árbol con **** como su raíz.

---

Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta **** que especifica cómo el texto será presentado en pantalla: