Guia completo de comandos, exemplos práticos, novos recursos, passo a passoDescrição completa
Descrição completa
HTML5 y CSS3Description complète
HTML5 y CSS3Descripción completa
Full description
Descrição completa
Descripción: herramientas
Full description
Descripción completa
html 5
Full description
Descrição completa
Tapa HTML5.qxp
20/07/2011
16:38
PÆgina 1
HTML5 CONTENIDO
En esta obra presentamos un nuevo paradigma de Internet que cambia
1 | INTRODUCCIÓN A TECNOLOGÍAS Y ESTÁNDARES WEB Los orígenes de la Web / Web 2.0 / Web 3.0 / W3C / Lenguajes de etiquetas / Navegadores / Herramientas de desarrollo / Test de compatibilidad 2 | NOVEDADES DE HTML5 Elementos HTML4/XHTML / Elementos que se retiran del estándar o cambian con HTML5 / Características que incorpora HTML5
de manera sustancial todo lo que conocíamos sobre el diseño y desarrollo web. Desde su concepción, está dirigida tanto a diseñadores como a desarrolladores web que buscan conocer las bases de HTML5 y CSS3. A lo largo de sus capítulos, aprenderemos sobre los estándares web que existen, y conoceremos las diferencias entre las versiones anteriores y la actual del lenguaje. Entre las mejoras que llegan de la mano de HTML5 se destacan las novedades en semántica, multimedia, formularios y el acceso a APIs, para
3 | ESTRUCTURA Y SEMÁNTICA Semántica / Declaración de página y cabecera del documento / Estructura semántica de documentos en HTML5 / Estructurar una página en HTML5 / Microdatos / SEO
crear la nueva generación de aplicaciones que revolucionan la Web. Al finalizar la lectura, podremos realizar desarrollos modernos y profesionales, y conocer en profundidad HTML5 y CSS3 para comenzar a aplicarlos en nuestros proyectos.
4 | TRABAJO CON ESTILOS Interacción de HTML5 con los estilos CSS / Selectores, clases y propiedades / Construcción de reglas en CSS / Nuevas características de CSS3 5 | MULTIMEDIA Audio con HTML5 / Video con HTML5 / La etiqueta / Aspectos de compatibilidad de audio y video / Incorporar los elementos multimedia utilizando HTML5 en nuestro desarrollo / Acceso a dispositivos multimedia 6 | FORMULARIOS Formularios HTML/XHTML / JavaScript y AJAX para potenciar los formularios / Características de formulario que incorpora HTML5 / Incorporar características HTML5 en un formulario 7 | DISEÑO Y DESARROLLO WEB ADAPTADO A MÓVILES Ventajas de HTML5 / Cómo saber si el móvil está preparado para HTML5 / Técnicas de detección / Herramientas de desarrollo 8 | CARACTERÍSTICAS AVANZADAS JavaScript y DOM / Canvas / SVG / WebGL (3D) / WebSockets / Geolocalización / Drag & Drop / WebStorage / Web Messaging / Server-Sent Events / Web Workers / Application cache API
NIVEL DE USUARIO PRINCIPIANTE
INTERMEDIO
AVANZADO
EXPERTO
En este sitio encontrará una gran variedad de recursos y software relacionado, que le servirán como complemento al contenido del libro. Además, tendrá la posibilidad de estar en contacto con los editores, y de participar del foro de lectores, en donde podrá intercambiar opiniones y experiencias.
Si desea más información sobre el libro puede comunicarse con nuestro Servicio de Atención al Lector: [email protected]
HTML 5 We proudly introduce a new revolution in Web design and development: HTML5. In this book, the reader will learn the new aspects of CSS3 as well as HTML5 semantics, multimedia, forms, among other possibilities to achieve a richer Web development.
por Damián De Luca
POTENCIE SUS SITIOS CON EL PODER DE AMBAS HERRAMIENTAS
CLAVES Y TÉCNICAS PARA OPTIMIZAR SITIOS DE FORMA PROFESIONAL
>> DESARROL DESARROLLO / PHP >> 432 PÁGINAS PÁGIN >> ISBN 978-987-1773-16-9 978-
>> DESARROL DESARROLLO / INTERNET PÁGINAS >> 400 PÁGIN >> ISBN 978-987-1773-09-1 978-
PROGRAMACIÓN DE SITIOS WEB PROFESIONALES
APRENDA CÓMO CREAR BLOGS ATRACTIVOS SIN CONOCIMIENTOS PREVIOS
>> DESARROL DESARROLLO / PHP PÁGINAS >> 400 PÁGIN 978-987-1773-07-7 >> ISBN 978-
De Luca, Damián HTML5. - 1a ed. - Buenos Aires : Fox Andina; Dalaga, 2011. 320 p. ; 24x17 cm. - (Manual users; 216) ISBN 978-987-1773-79-4 1. Informática. I. Título CDD 005.3
www.redusers.com
www.detodoprogramacion.com
www.FreeLibros.me
ANTES DE COMPRAR EN NUESTRO SITIO PUEDE OBTENER, DE FORMA GRATUITA, UN CAPÍTULO DE CADA UNO DE LOS LIBROS EN VERSIÓN PDF Y PREVIEW DIGITAL. ADEMÁS, PODRÁ ACCEDER AL SUMARIO COMPLETO, LIBRO DE UN VISTAZO, IMÁGENES AMPLIADAS DE TAPA Y CONTRATAPA Y MATERIAL ADICIONAL.
www.detodoprogramacion.com
www.FreeLibros.me REDISEÑO BOMBOS LIBROS - PAG 01 - Base Editable - Nov 09.indd 1
27/4/2011 13:05:51
4
PRELIMINARES
Damián de Luca Nació en la ciudad de Buenos Aires, Argentina, en 1977. Ha realizado estudios sobre electrónica y lenguajes de programación. Es autor de los libros 101 Secretos de Vista, Hardware Extremo y Webmaster Profesional. Se ha desempeñado como editor de libros relacionados con informática publicados por esta editorial. Ha colaborado como editor en la revista Users Digital Design, publicación para la cual también ha escrito notas sobre diseño y desarrollo web. Además, participa como autor en colecciones de fascículos y contenidos online relacionados con informática. Es consultor, docente y desarrollador web, con amplios conocimientos en XHTML, CSS, AJAX, PHP y Bases de datos. Es especialista en CSS3 y HTML5. E-mail: [email protected] Web: http://damiandeluca.com.ar Twitter: @damiande
Agradecimientos A todos los que confiaron en mí para este proyecto y a todos aquellos que, desde su lugar, hicieron que este libro fuera posible. También quiero agradecer especialmente a los que, a lo largo de mi vida, me ayudaron a nutrirme de conocimientos para llegar a ser hoy quien les escribe estas páginas.
Dedicatorias Dedicado especialmente a mi hijo Gael y a mi mujer Myriam por ser quienes me escuchan, me aman y me sostienen cada día. Esta obra también está dedicada a todos mis afectos, para aquellos que me quieren de verdad y siempre están a mi lado.
www.redusers.com
www.detodoprogramacion.com
www.FreeLibros.me
5
HTML5
Prólogo Decir que HTML5 ya está aquí es una realidad; también lo es expresar la idea de que ha causado aún más interés del que se esperaba. Sin duda HTML5 representa un avance en pos de una Web más amigable para los desarrolladores y usuarios. Esto se demuestra en el interés del público por las novedades que nos llegan de la mano de la versión 5 de HTML y en el trabajo dedicado por los desarrolladores a la tarea de dar soporte a este estándar. La localización geográfica y caché para aplicaciones son algunas de las novedades de HTML5. Se trata de funciones que permiten a los desarrolladores de contenido web determinar en forma bastante certera la ubicación del usuario, pudiendo desplegar información relacionada con ella. Por otro lado, gracias a la caché de aplicaciones, tendremos acceso a la posibilidad de guardar y utilizar aplicaciones online cuando no existe una conexión a Internet. Además, la posibilidad de realizar el procesamiento en segundo plano aprovechando la capacidad de la PC es una realidad mientras usamos un navegador web.Por otro lado HTML5 incorpora la capacidad de embeber videos y de que estos puedan ser reproducidos sin un plugin adicional. Como ya sabemos, HTML5 es el futuro y está entre nosotros. Como usuarios, solo nos queda disfrutar de todas las características que nos ofrece; como desarrolladores tendremos que aprender a implementarlas y, para ayudarnos a transitar este camino, nada mejor que apoyarnos en la experiencia y los conocimientos de Damián de Luca, quien ha logrado plasmar esta obra eminentemente práctica y con todo lo que necesitamos para dominar HTML5. ¡Que lo disfruten!
El libro de un vistazo Este libro está enfocado en brindarle al lector las posibilidades que introduce HTML5. Veremos la introducción a HTML5 para develar sus características principales, cómo se lo puede aplicar en la práctica, y cuáles son los lenguajes y tecnologías asociadas útiles para nuestros desarrollos.
Tecnologías
Elementos estructurales
y estándares web
y semántica
En el primer capítulo de esta obra nos encar-
En este capítulo vamos a profundizar sobre la
garemos de realizar una breve recorrida que
importancia que cobra la semántica en el len-
nos permitirá conocer la evolución que han
guaje HTML5. A través de las secciones que lo
experimentado los estándares más importan-
componen conoceremos y analizaremos cómo
tes que se emplean para el desarrollo y diseño
se debe pensar la estructura de los documen-
de sitios web. Para continuar nos daremos a
tos cuando usamos HTML5 y posteriormente
la tarea de analizar también el progreso en las
vamos a aprender de qué manera podemos
técnicas, las principales herramientas de desa-
utilizar correctamente los elementos destina-
rrollo que tenemos a nuestra disposición y el
dos a dicho fin. Además, nos introduciremos
papel de los navegadores en esta historia.
en temas importantes como Microdatos.
Novedades de HTML5
Trabajo con estilos
En la primera parte de este capítulo, cono-
A través de este importante capítulo veremos
ceremos cada uno de los elementos que nos
cómo interactúa HTML5 con las hojas de estilo
ofrecen tanto HTML4 como XHTML. Para
correspondientes a CSS 2.1 y también CSS3
continuar, haremos un análisis que nos mostra-
para acceder a representar los contenidos en
rá la forma en que evolucionan sus caracterís-
el medio de salida que consideremos adecua-
ticas con la llegada de la versión 5 de HTML.
do. Nos encargaremos de analizatr y conocer
También nos encargaremos de conocer cuáles
algunos de los principales conceptos realciona-
son los elementos que proceden a retirarse del
dos, como selectores, clases y propiedades,
estándar, los que reciben algún tipo de cambio
también aprenderemos a construir reglas de
y, por supuesto, las novedades que se incor-
estilos. Por último recorreremos las propieda-
poran a partir de HTML5, de esta forma esta-
des principales que nos llegan con CSS 2.1 y
remos preparados para enfrentar el desarrollo
CSS3, y veremos los valores que les podre-
teniendo presentes las nuevas opciones.
mos aplicar a cada una de ellas.
www.redusers.com
www.detodoprogramacion.com
www.FreeLibros.me
7
HTML5
Multimedia
Diseño y desarrollo web
Conoceremos las principales características
adaptado a móviles
multimedia que ofrece HTML5. Analizaremos
En este capítulo veremos aspectos vincu-
las posibilidades que nos brindan y de qué
lados con el desarrollo de soluciones web
manera podemos utilizar las etiquetas de
para móviles. Conoceremos las técnicas de
audio y video, que se incorporan a partir
detección de características y pantallas de
de esta versión del lenguaje. Además, nos
dispositivos móviles. Conoceremos las ven-
encargaremos de profundizar sobre los as-
tajas que introduce HTML5, y analizaremos
pectos que nos ayudarán a aprender cómo
las herramientas y los frameworks que nos
aplicarlas en nuestros proyectos web.
ayudarán en el desarrollo y testeo.
Características avanzadas
Formularios Conoceremos los aspectos relacionados con la
En el capítulo final analizaremos las caracterís-
creación de formularios web. Comenzaremos
ticas avanzadas que introducen HTML5 y las
analizando las posibilidades que nos ofrecen
APIs relacionadas. Entre los temas que aborda-
HTML4 y XHTML para la creación de formula-
remos se destaca el acceso al DOM, Canvas,
rios, luego veremos cómo se puede potenciar
SVG, WebGL, WebSockets, Geolocalización,
el desarrollo empleando JavaScript y AJAX.
Drag&Drop nativo, WebStorage, Web Messa-
Para completar, profundizaremos sobre las
ging, Server-Sent Events, Web Workers y la
características más importantes que se incor-
posibilidad de creación de aplicaciones offline
poran a partir de HTML5.
con Application cache API, entre otras.
INFORMACIÓN COMPLEMENTARIA A lo largo de este manual podrá encontrar una serie de recuadros que le brindarán información complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados. Para que pueda identificarlos en forma más sencilla, cada recuadro está identificado con diferentes iconos: Curiosidades e ideas
Atención
Datos útiles y novedades
www.detodoprogramacion.com
www.FreeLibros.me
www.redusers.com
Sitios web
8
preliminares
Contenido
Software WYSIWYG.........................................53 Otras alternativas..............................................55
Sobre el autor................................................... 4
Inspección de código desde el navegador............57
CSS..................................................................26 CSS3................................................................30 JavaScript.........................................................32 AJAX................................................................34 Tecnologías y lenguajes del lado servidor............41 Navegadores..........................................................41
Elementos estructurales y semántica Semántica............................................................100
Internet Explorer..............................................42
Declaración de página y cabecera
Mozilla Firefox..................................................44
del documento.................................................... 102
Google Chrome..................................................45
Multimedia Evolución del concepto multimedia en la Web............................................................ 186 Incorporar audio con HTML5..............................191
Trabajo con estilos
Códecs de audio.............................................. 192
Interacción de HTML5 con los estilos CSS........ 128
Incorporar video con HTML5..............................193
Selectores, clases, y propiedades.........................129
