Spanish Moac Las 98-375 Html5 Appdev Textbook 40086a

Aspectos
fundamentales
del desarrollo de
aplicaciones HTML5
Official Academic Course
Examen MTA 98-375

Microsoft Official Academic Course
Aspectos fundamentales del

desarrollo de aplicaciones
HTML5, Examen 98-375
| i
VP Y PUBLICADOR Don Fowley
EDITOR Bryan Gambrel
DIRECTOR DE VENTAS Mitchell Beaton
DIRECTOR EJECUTIVO DE MARKETING Chris Ruel
DIRECTOR DE PRODUCTO DE MICROSOFT Rob Linsky de Microsoft Learning
ASISTENTE DE PROGRAMA EDITORIAL Jennifer Lartz
DIRECTORA ADJUNTA DE MARKETING Debbie Martin
DIRECTOR SNIOR DE PRODUCCIN Janis Soo
DIRECTOR DE PRODUCCIN ASOCIADO Joel Balbin
DIRECTOR CREATIVO Harry Nolan
DISEO DE PORTADA Georgina Smith
TECNOLOGA Y MEDIOS Tom Kulesa/Wendy Ashenberg
Este libro lo realiz Aptara, Inc. usando Garamond y lo imprimi y encuadern Bind Rite Robbinsville.
La portada la imprimi Bind-Rite Robbinsville.
Copyright 2013 por John Wiley & Sons, Inc. Todos los derechos reservados.
Ninguna parte de esta publicacin puede ser reproducida, almacenada en sistemas de recuperacin o transmitida en
cualquier forma o por cualquier medio, ya sea electrnico, mecnico, fotocopia, grabacin, escaneo o de otro modo,
excepto segn lo permitido bajo las Secciones 107 o 108 de la ley de Propiedad Intelectual de Estados Unidos de
1976, sin la autorizacin previa por escrito de la editorial, o la autorizacin a travs del pago por ejemplar de la
tarifacorrespondiente al Copyright Clearance Center, Inc. 222 Rosewood Drive, Danvers, MA 01923, sitio web
www.copyright.com. Las solicitudes de permiso a la editorial debern dirigirse a Permissions Department,
JohnWiley&Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, (201)748-6011, fax (201)748-6008,
sitio web http://www.wiley.com/go/permissions.
Microsoft, ActiveX, Excel, InfoPath, Microsoft Press, MSDN, OneNote, Outlook, PivotChart, PivotTable, PowerPoint,
SharePoint, SQL Server, Visio, Visual Basic, Visual C#, Visual Studio, Windows, Windows 7, Windows Mobile,
Windows Server y Windows Vista son marcas comerciales o marcas registradas de Microsoft Corporation en los
EstadosUnidos y/u otros pases. Otros nombres de productos y compaas mencionados aqu pueden ser marcas
comerciales de sus respectivos propietarios.
Los ejemplos de compaas, organizaciones, productos, nombres de dominio, direcciones de correo electrnico,
logotipos, personas, lugares y acontecimientos mencionados son ficticios. No se pretende ni se debe inferir de
ningnmodo relacin con ninguna empresa, organizacin, producto, nombre de dominio, direccin de correo
electrnico,logotipo, persona, lugar o acontecimientos reales.
El libro expresa puntos de vista y opiniones del autor. La informacin contenida en este libro se proporciona sin
ninguna garanta expresa, implcita ni estatuaria. Ni los autores, John Wiley & Sons, Inc., Microsoft Corporation,
nisus revendedores o distribuidores sern responsables de cualquier dao causado o presuntamente causado directa
oindirectamente por este libro.
ISBN978-1-118-35993-8
Impreso en los Estados Unidos de Amrica
10987654321
www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
CONTRATO DE LICENCIA DEL USUARIO
FINAL DE WILEY PARA EL EBOOK DE MOAC
Y EL CONTENIDO PARA EL INSTRUCTOR
Este es el Contrato de Licencia del Usuario Final limitado de John Wiley and Sons, Inc. (Wiley), que rige el uso que
hace del eBook de Microsoft Official Academic Course (eBook de MOAC) y del contenido relacionado (Contenido
para el Instructor) de Wiley. AL ACCEDER, DESCARGAR O UTILIZAR EL EBOOK DE MOAC O EL CONTENIDO PARA EL
INSTRUCTOR, USTED ACEPTA LOS TRMINOS Y CONDICIONES DE ESTE CONTRATO. SI NO LOS ACEPTA, NO ACCEDA,
DESCARGUE NI UTILICE EL EBOOK DE MOAC NI EL CONTENIDO PARA EL INSTRUCTOR.
Licencia:
Por medio de este documento, Wiley concede al miembro, instructor o estudiante del Programa Microsoft IT Academy
(usted) derechos que puede ejercer en virtud de este contrato, y usted acepta una licencia no exclusiva y no
transferible para utilizar el eBook de MOAC y el Contenido para el Instructor solo segn los siguientes trminos
y condiciones:
a. Usted reconoce que los eBooks de MOAC y el Contenido para el Instructor se le licencian por un periodo
breve y que el uso que haga de estos est sujeto a los trminos y condiciones de este contrato.
b. Los siguientes son dos conjuntos independientes de derechos de uso. Solo uno de estos conjuntos
seaplicaa su caso.
i. Si usted es un miembro activo del Programa Microsoft IT Academy:
1. Los eBooks de MOAC son solo para el uso de los instructores y estudiantes.
2. Solo puede descargar la cantidad de copias del ttulo del eBook de MOAC aplicable necesarias
para los instructores que imparten la clase correspondiente a dicho ttulo y para los estudiantes
que asisten a la misma.
3. Solo puede distribuir los ttulos del eBook de MOAC a los instructores que imparten una de las
clases correspondientes a dicho ttulo y a los estudiantes que asisten a la misma, a travs de:
o correo electrnico;
o un dispositivo USB seguro conectado directamente a los dispositivos personales
delosestudiantes;
o un sitio web protegido con contrasea al que solo tengan acceso los instructores
yestudiantes.
4. Solo puede distribuir el Contenido para el Instructor a los instructores, con fines de preparacin
y enseanza de una de las clases correspondientes al ttulo del eBook de MOAC asociado.
5. Antes de proporcionar acceso de cualquier tipo a un eBook de MOAC, se le notificar a cada
persona que solo puede acceder o utilizar un eBook de MOAC si acepta hacer uso de este en
cumplimiento con los siguientes criterios:
o Solo se utilizar el eBook de MOAC para fines personales de entrenamiento.
o Solo se instalar el eBook de MOAC en un dispositivo que sea de propiedad de
lapersonao que est bajo el control de esta.
o No se copiar, modificar, imprimir, transmitir, publicar, mostrar, vincular,
reenviar ni distribuir el eBook de MOAC, ni total ni parcialmente.
o Solo se podr utilizar el ttulo del eBook de MOAC mientras dure la clase en la que la
persona est participando, es decir, mientras se ensee el ttulo del eBook de MOAC
o por un periodo de ciento ochenta (180) das, lo que sea mayor. Despus de esto, se
deben eliminar de forma segura todas las copias del ttulo del eBook de MOAC que la
persona posea o que estn bajo su control.
o El uso que se haga de los ttulos del eBook de MOAC tambin cumplir con todos los
trminos, condiciones o licencias adicionales que se apliquen, que acompaen o que
seincluyan en el eBook de MOAC.
| iii
6. Antes de proporcionar acceso de cualquier tipo al Contenido para el Instructor, se le notificar
a cada instructor que solo puede acceder o utilizar el Contenido para el Instructor si acepta
hacer uso de este en cumplimiento con los siguientes criterios:
o Solo se utilizar el Contenido para el Instructor con fines de preparar y ensear la sesin
de entrenamiento.
o Solo se instalar el Contenido para el Instructor en un dispositivo que sea de propiedad
del instructor o que est bajo el control de este.
o No se copiar, modificar, imprimir, transmitir, publicar, mostrar, vincular,
reenviar ni distribuir el Contenido para el Instructor, ni total ni parcialmente.
o Solo se podr utilizar el Contenido para el Instructor mientras dure la clase en la que el
instructor ensea el ttulo del eBook de MOAC relacionado o por un periodo de ciento
ochenta (180) das, lo que sea mayor. Despus de esto, se deben eliminar de forma
segura todas las copias del ttulo del Contenido para el Instructor que el instructor
poseao que estn bajo su control.
o El uso que se haga del Contenido para el Instructor tambin cumplir con todos los
trminos, condiciones o licencias adicionales aplicables, que acompaen o que se
incluyan en el Contenido para el Instructor.
ii.
Si es un estudiante, usted reconoce y acepta que:
1. Actualmente asiste a la clase de un miembro de IT Academy Program que ensea el eBook
de MOAC.
2. Solo utilizar los eBooks de MOAC para fines personales de entrenamiento.
3. Solo instalar el eBook de MOAC en un dispositivo que sea de su propiedad o que usted
controle.
4. No copiar, modificar, imprimir, transmitir, publicar, mostrar, vincular, reenviar
nidistribuir el eBook de MOAC, ni total ni parcialmente.
5. El uso que haga de los ttulos del eBook de MOAC tambin cumplir con todos los trminos,
condiciones o licencias adicionales que se apliquen, que acompaen o que se incluyan en
elttulo del eBook de MOAC.
c. Salvo segn se autorice expresamente en la seccin b anterior, no puede cargar, copiar, modificar,
transmitir, hacer trabajos derivados, reenviar ni distribuir ningn eBook de MOAC ni Contenido para el
Instructor, ni total ni parcialmente, creado mediante descompilacin, as como tampoco el cdigo fuente
de ningn eBook de MOAC o Contenido para el Instructor. No puede imprimir copias de ningn eBook
de MOAC ni Contenido para el Instructor completo; sin embargo, puede imprimir pginas individuales o
secciones de los captulos del eBook de MOAC especficamente para su uso en el aula. No puede utilizar
ni total ni parcialmente el eBook de MOAC ni el Contenido para el Instructor con fines de retribucin
monetaria por medio de la venta, reventa, prstamo, transmisin, contratacin o cualquier otra forma
de explotacin del eBook de MOAC o del Contenido para el Instructor. Si transmite la propiedad de
cualquier eBook de MOAC o Contenido para el Instructor a terceros, se pondr trmino a su licencia
automticamente. Dicha terminacin ser adicional y sustituir cualquier recurso de equidad, civil
odeotro tipo disponibles para Wiley.
d. Solo podr utilizar el ttulo del eBook de MOAC y el Contenido para el Instructor mientras dure la clase en
la que se ensee el ttulo del eBook de MOAC especfico o por un periodo de ciento ochenta (180) das, lo
que sea mayor. Despus de esto, deber eliminar de forma segura todas las copias del ttulo del eBook de
MOAC y del Contenido para el instructor que posea o estn bajo su control.
e. LOS EBOOKS DE MOAC Y EL CONTENIDO PARA EL INSTRUCTOR SE LICENCIAN TAL CUAL Y SEGN
DISPONIBILIDAD, SIN GARANTAS DE NINGN TIPO.
f. Usted reconoce que todos los derechos (incluyendo, sin limitacin, la propiedad intelectual, las patentes
ylos secretos empresariales) en los eBook de MOAC y el Contenido para el Instructor son propiedad nica
y exclusiva de Wiley y sus licenciantes. La aceptacin de este contrato no lo convierte en propietario de
los eBooks de MOAC ni del Contenido para el Instructor, sin embargo, s le concede una licencia limitada
para utilizar el eBook de MOAC y el Contenido para el Instructor de acuerdo con las disposiciones de este
contrato. Usted acepta proteger el eBook de MOAC y el Contenido para el Instructor del uso, la carga,
la descarga, la reproduccin o la distribucin no autorizados. Adems, acepta no traducir, descompilar,
desensamblar ni realizar ingeniera inversa de ninguno de los eBooks de MOAC ni del Contenido para el
Instructor. Wiley se reserva todos los derechos que no se le concedan expresamente en este contrato.
iv | o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
Prlogo del editor
La visin editorial de Wiley para la serie de cursos Microsoft Official Academic Course es
proporcionar a los alumnos e instructores las habilidades y los conocimientos necesarios para
usar la tecnologa de Microsoft de forma eficaz en todos los aspectos de sus vidas personales
y profesionales. Para que los educadores y alumnos aprovechen al mximo las herramientas
de software de Microsoft y sean ms productivos, se requiere una enseanza de calidad.
Por tanto, nuestra misin es hacer que nuestros programas de enseanza sean compaeros
docentes de confianza de por vida.
Para lograr esta misin, Wiley y Microsoft se han asociado y han desarrollado programas
educativos de la ms alta calidad dirigidos a trabajadores de la informacin, profesionales de
TI y desarrolladores. Los materiales creados por esta asociacin llevan el nombre comercial
Microsoft Official Academic Course, asegurando a instructores y alumnos por igual que el
contenido de estos libros de texto est totalmente respaldado por Microsoft, y que proporciona
informacin e instruccin sobre los productos de Microsoft de la ms alta calidad. Los libros
de texto de Microsoft Official Academic Course son, de alguna manera, ms oficiales:
constituyen el material didctico oficial para los miembros de Microsoft IT Academy.
La serie de cursos Microsoft Official Academic Course se centra en el desarrollo laboral.
Estos programas estn dirigidos a aquellos alumnos que buscan ingresar al mercado laboral,
cambiar de trabajo o embarcarse en nuevas carreras como trabajadores de la informacin,
profesionales de TI y desarrolladores. Los programas Microsoft Official Academic Course
atienden estas necesidades haciendo hincapi sobre escenarios con entornos de trabajo
autnticos con una gran cantidad de proyectos, ejercicios, casos prcticos y evaluaciones.
Los cursos de Microsoft Official Academic Course estn asignados a la extensa investigacin
y anlisis de trabajo en tareas de Microsoft, la misma investigacin y anlisis que se usa para
desarrollar los exmenes de Microsoft Technology Associate (MTA) y Microsoft Certified
Solutions Developer (MCSD). Los libros de texto se centran en competencias reales de los
puestos de trabajos reales. Mientras los alumnos trabajan en los proyectos y ejercicios de
los libros de texto, mejoran su nivel de conocimiento y su capacidad para aplicar la ltima
tecnologa de Microsoft a las tareas diarias. Estos alumnos tambin obtienen credenciales
paracrear un Currculum Vitae que sirva de ayuda a la hora de encontrar un trabajo,
mantenerel trabajo actual o continuar con su educacin.
El concepto de aprendizaje permanente es hoy una necesidad mxima. Los puestos de trabajo,
e incluso categoras laborales completas, estn cambiando con tanta rapidez que ninguno de
nosotros puede seguir siendo competitivo y productivo sin actualizar continuamente nuestras
habilidades y capacidades. Las ofertas de Microsoft Official Academic Course, y su enfoque
en la preparacin de exmenes de certificacin de Microsoft, proporcionan un medio para que
las personas adquieran y actualicen de forma eficaz sus habilidades y conocimientos. Wiley
apoya a los alumnos en este esfuerzo a travs de la elaboracin y distribucin de estos cursos
como editor acadmico oficial de Microsoft.
Actualmente, las publicaciones educativas deben prestar atencin a la hora de proporcionar
gran calidad de impresin y contenido electrnico slido. Mediante la integracin de los
productos Microsoft Official Academic Course, WileyPLUS y las certificaciones de Microsoft
estamos en mejores condiciones para poder ofrecer soluciones eficientes de aprendizaje a los
alumnos y profesores por igual.
Joseph Heider
Director general y Vicepresidente Senior
| v
Prefacio
Bienvenido al programa Microsoft Official Academic Course (MOAC) de Aspectos fundamentales

del desarrollo de aplicaciones HTML5. MOAC representa la colaboracin entre Microsoft Learning
y la editorial John Wiley & Sons, Inc. Microsoft y Wiley se unieron para crear una serie de libros
de texto que ofrecieran soluciones de enseanza convincentes e innovadoras para los instructores
y destrezas de aprendizaje superiores para los alumnos. Estos libros de texto maximizan la
transferencia de conocimientos en un tiempo mnimo gracias a la preparacin e instruccin por
el conocimiento en profundidad de los creadores de productos de Microsoft, as como por la
elaboracin de los libros de texto por una editorial reconocida mundialmente debido a la calidad
pedaggica de sus productos. Se desafa a los alumnos para que alcancen su potencial mediante
nuevos conocimientos tcnicos como miembros altamente productivos del rea de trabajo.
Debido a que esta base de conocimiento proviene directamente de Microsoft, creador de los
exmenes Microsoft Certified Solutions Developer (MCSD) y Microsoft Technology Associate
(MTA), (https://www.microsoft.com/learning/certification), seguro que recibir la cobertura de
contenido ms pertinente para el xito personal y profesional de los alumnos. La participacin
directa de Microsoft no solo le asegura que el contenido de los libros de texto MOAC es preciso
yest actualizado; tambin significa que los estudiantes recibirn la mejor instruccin posible
paratener xito en los exmenes de certificacin y en el entorno de trabajo.
Programa Microsoft Official Academic Course

La serie Microsoft Official Academic Course es un programa completo dirigido a instructores e
instituciones para preparar e impartir grandes cursos sobre tecnologas de software de Microsoft.
Con MOAC, reconocemos que, debido al rpido ritmo de cambios en la tecnologa y el plan de
estudios desarrollado por Microsoft, existe un conjunto de necesidades ms all de las herramientas
de instruccin acadmica para que un instructor est preparado para impartir el curso. El programa
MOAC trata de proporcionar soluciones para todas estas necesidades de manera sistemtica con
el fin de garantizar una experiencia de entrenamiento satisfactoria y gratificante para el instructor
y el alumno: aprendizaje tcnico y plan de estudios para la preparacin del instructor con nuevas
versiones de software; el propio software para que los alumnos lo usen en casa para la adquisicin
de conocimientos prcticos, evaluacin y validacin del desarrollo de habilidades; y un excelente
conjunto de herramientas para realizar la instruccin en el aula y en el laboratorio. Todas ellas son
importantes para la entrega sin problemas de un interesante curso sobre software de Microsoft, y
todas se proporcionan con el programa MOAC. Pensamos en el siguiente modelo como medida
para asegurar que le apoyamos completamente en su objetivo de impartir un curso excelente.
Al evaluar sus opciones de material de instruccin, puede que desee usar el modelo con fines
comparativos con los productos disponibles.
vi |
Recorrido por el libro ilustrado
Caractersticas pedaggicas
El libro de texto MOAC de Aspectos fundamentales del desarrollo de aplicaciones HTML5 est
diseado para cubrir todos los objetivos de aprendizaje del examen MTA 98-375, que se conoce
como su dominio del objetivo. Los objetivos del examen Microsoft Technology Associate
(MTA) se destacan a lo largo del libro de texto. Muchas caractersticas pedaggicas se han
desarrollado de forma especfica para los programas Microsoft Official Academic Course.
Mediante una extensa informacin sobre los procedimientos y conceptos tcnicos integrados, a lo
largo del libro de texto se plantean desafos para el alumno y el instructor por igual. El Recorrido
por el libro ilustrado que aparece a continuacin proporciona una gua de caractersticas que
contribuyen al plan pedaggico del programa Microsoft Official Academic Course. La siguiente
es una lista de las principales caractersticas de cada leccin diseada para preparar a los alumnos
para el xito a medida que continan con su educacin en TI, con los exmenes de certificacin
yen el entorno de trabajo:
Cada leccin comienza con una Matriz de objetivo del examen. Ms que una lista
estndar de objetivos de aprendizaje, la matriz de objetivo del examen correlaciona cada
conocimiento de software tratado en la leccin con el dominio del objetivo del examen
especfico.
Instrucciones paso a paso concisas y frecuentes ensean a los alumnos caractersticas
nuevas y ofrecen la oportunidad de ponerlas en prctica. Los pasos numerados proporcionan
instrucciones paso a paso detalladas que sirven de ayuda para que los alumnos adquieran
conocimientos de software.
Ilustraciones: las imgenes en pantalla proporcionan informacin visual a medida que
losestudiantes van realizando los ejercicios. Estas imgenes refuerzan los conceptos clave,
proporcionan pistas visuales acerca de los pasos que se deben realizar y permiten a los
alumnos comprobar su progreso.
Trminos clave: al comienzo de la leccin se muestra el vocabulario tcnico importante
con definiciones. Cuando se usan estos trminos ms adelante en la leccin, aparecen en
fuente negrita cursiva y se definen. El Glosario contiene todos los trminos clave con sus
definiciones.
Un atractivo punto de uso son las ayudas para el lector, que se encuentran a lo largo
delas lecciones e indican a los alumnos por qu un tema es importante (Conclusin)
ylesproporcionan consejos tiles (Tome nota). Las ayudas para el lector tambin
proporcionan informacin adicional relevante o general que agrega valor a la leccin.
Las caractersticas de Certificacin disponible que aparece por todo el texto sealan a
los alumnos dnde se cubre un objetivo especfico de certificacin. Proporcionan a los
estudiantes la oportunidad de comprobar el grado de comprensin sobre ese objetivo
MTAparticular y, si fuera necesario, revisar la seccin de la leccin donde se trata.
MOACofrece una preparacin completa para la certificacin MTA.
Preguntas al final de la leccin: la seccin Evaluacin de conocimientos ofrece una gran
variedad de preguntas que pueden ser de varias opciones, verdadero o falso, de relacionar
ode rellenar espacios en blanco.
Ejercicios del final de la leccin: los escenarios posibles de Evaluacin de competencias
y los escenarios posibles de Evaluacin de aptitudes son proyectos que ponen a prueba
lacapacidad de los alumnos para aplicar lo que han aprendido en la leccin.
| vii
viii | Recorrido por el libro ilustrado
Caractersticas de la leccin
Compilar la interfaz LECCIN 3

de usuario mediante
HTML5: organizacin,
entrada y validacin
M AT R I Z D E O B J E T I V O D E L E X A M E N Matriz de objetivo del examen
Habilidades y conceptos Objetivo del examen MTA Nmero de objetivo
del examen MTA
Elegir y configurar etiquetas Elegir y configurar etiquetas 2.4
HTML5 para organizar HTML5 para organizar contenido
contenido y formularios y formularios.
HTML5 para la entrada HTML5 para entrada
y validacin y validacin.
Ms informacin
Ayuda para el lector
TRMINOS CLAVE Trminos clave
elemento Article elemento Nav
elemento Aside lista ordenada
atributo Autofocus atributo de patrn Administracin del ciclo de vida de las aplicaciones | 5
validacin automtica texto de marcador de posicin
validacin del lado cliente atributo necesario MS INFORMACIN
elemento DataList elemento section Las direcciones web usadas en los ejercicios anteriores se vuelven a indicar aqu para facilitarle las cosas. Puede
atributo de correo electrnico marcado semntico marcarlas para usarlas ms adelante. Encontrar informacin sobre el estndar HTML5 en el sitio web de W3C
en http://www.w3.org/TR/html5/. El sitio web que est en
elemento footer validacin del lado servidor http://www.w3schools.com/html/default.asp proporciona tutoriales para HTML5. Microsoft proporciona
entrada de formularios tabla informacin til para nuevos desarrolladores en el Centro de aprendizaje para desarrolladores sin experiencia
(http://msdn.microsoft.com/en-us/beginner/default.aspx) y el sitio de MSDN en http://bit.ly/Hd9uzt.
atributo global lista sin ordenar
elemento header validacin
Crear aplicaciones
elemento de men formulario web
El desarrollo de aplicaciones HTML5 es mucho ms sencillo que el de aplicaciones
similares que utilizan otras tecnologas, por ejemplo Adobe Flash y Microsoft Silverlight.
HTML5, CSS y JavaScript son lenguajes interpretados, lo que significa que no
Escenario
Una de sus nuevas tareas como contratado en prcticas en Malted Milk Media es requieren compilacin. Puede depurar el cdigo en un explorador, realizar cambios
crear un formulario web que limite lo que un usuario puede escribir en los campos rpidos y, posteriormente, actualizar la ventana del explorador para ver el resultado
del formulario y valide la entrada. Con objeto de prepararse para crear el formulario de los cambios.
web, primero debe aprender a organizar o estructurar el marcado utilizando los
nuevos elementos HTML5. empresarial Aunque puede crear gran cantidad de cdigo usando un sencillo editor de texto o de HTML,
si desea empaquetar e implementar su aplicacin, tendr que usar una herramienta de
desarrollo de aplicaciones como Microsoft Visual Studio.
53
Figura 1-3
Pasos generales para
crear una aplicacin
2 | Leccin 1
En esta seccin, se describen los pasos generales que conlleva la creacin de una
Acaba de empezar un contrato en prcticas en Malted Milk Media, una agencia aplicacin. En la Figura 1-3 se indican los pasos, que se explican a continuacin.
creativa que crea aplicaciones multimedia para clientes. La compaa va a empezar Planear el proyecto: piense qu tipo de aplicacin desea crear. Elija lo que elija,
a usar HTML5 en sus proyectos prximamente. Su jefe le encarg que estudiara es mejor que sea sencillo mientras aprende a desarrollar aplicaciones HTML5.
HTML5 y las tecnologas relacionadas, y que presentara un informe con los cambios Una vez que decida la accin principal de la aplicacin, cree un esquema del
importantes de HTML 4.01 a HTML5. Tambin debe incluir informacin sobre cmo flujo general de la aplicacin de principio a fin. Determine tambin el tipo de
se puede usar HTML5 para crear aplicaciones de pantalla tctil para PC, pizarras, interactividad del usuario que desea incluir, por ejemplo una interfaz tctil, si
tabletas y smartphones. necesita guardar datos fuera de la aplicacin, y si la aplicacin debe conectarse
a otras aplicaciones o servicios (por ejemplo, una fuente RSS).
Disear la interfaz de usuario: al disear la interfaz de usuario, determine cmo
Comprender los aspectos fundamentales de la plataforma desea que los usuarios vean la aplicacin. Agrupe el contenido de manera que tenga
lgica. Empiece con el listado de los comandos que necesita para que la aplicacin
funcione como se espera. Rena imgenes y clips multimedia si es necesario.
HTML5 es el estndar HTML ms reciente y una familia de tecnologas que incluye En la actualidad, las aplicaciones requieren como mnimo un icono de selector,
HTML, CSS y JavaScript. Aunque el estndar HTML5 no estar terminado hasta que representa a la aplicacin.
CONCLUSIN dentro de unos aos, los exploradores web ms modernos ya admiten elementos Actualizar el manifiesto de la aplicacin: todas las aplicaciones requieren un archivo
de HTML5. El desarrollo de aplicaciones HTML5 para exploradores web y de de manifiesto. En el archivo de manifiesto se describen las propiedades de la aplicacin y
dispositivos mviles lleva cierto camino recorrido.
El Lenguaje de marcado de hipertexto (HTML) es el lenguaje que se utiliza para describir

Conclusin se indica qu necesita la aplicacin para funcionar (vea la Figura 1-4). El archivo contiene
informacin diversa, como el nombre para mostrar que vern los usuarios, una descripcin
de la aplicacin, la orientacin de la aplicacin (vertical, horizontal, etc.), la ruta de
pginas web. Es un lenguaje de marcado, no un lenguaje de programacin, lo que significa que archivo del icono de la aplicacin, las capacidades de la aplicacin (caractersticas
HTML usa etiquetas de marcado como <body> y <h1> para describir partes de una pgina del sistema o dispositivos que la aplicacin puede usar) y muchas otras cosas.
web. Un archivo HTML no se ejecuta como un programa. En lugar de ello, un explorador
TOME NOTA
* interpreta un archivo HTML para mostrar una pgina web en funcin de las etiquetas.
W3C es una marca
comercial (registrada en Desde 1999, el estndar para pginas web ha sido HTML 4.01, pero el mundo ha
muchos pases) de World cambiado bastante desde entonces. Los usuarios de Internet desean disponer de
Wide Web Consortium; aplicaciones web multimedia con audio, vdeo y gran cantidad de interactividad en
las marcas de W3C son los sitios web que visitan. Y con dispositivos mviles cada vez ms populares, como
registradas y conservadas pizarras, tabletas y smartphones, los usuarios quieren disfrutar de la misma experiencia e
por las instituciones MIT interactividad en las aplicaciones mviles, independientemente de qu dispositivo utilicen.
ERCIM y Keio.
Todo esto ha hecho necesario el desarrollo de un nuevo estndar, que ser HTML5.
El World Wide Web Consortium (W3C) es la entidad de estndares ms importante y
Figura 1-1 desarrolla las especificaciones de HTML5, que debe estar terminado en 2014. El logotipo
de HTML5 se muestra en la Figura 1-1.
Logotipo de HTML5
TOME NOTA
*
Si bien HTML5 se
encuentra todava en
desarrollo, la mayora
de los exploradores
web principales, como
Microsoft Internet
Explorer, Google
Chrome, Mozilla Firefox,
Opera y Apple Safari, son
compatibles con muchos
elementos HTML5. Es importante recordar que HTML5 es un estndar y, a la vez, una combinacin o familia
de nuevas etiquetas de marcado HTML, CSS, JavaScript y otras tecnologas relacionadas.
Hojas de estilo en cascada define los estilos de HTML en un archivo independiente, de
LISTO PARA CERTIFICACIN forma que resulta muy fcil cambiar fuentes, tamaos de fuente y otros atributos en un
Cules son las tres archivo CSS. Estos cambios quedan reflejados en todos los archivos HTML que hacen
tecnologas principales referencia el archivo CSS. La ltima versin de CSS es CSS3. JavaScript es un lenguaje
de la familia HTML5? de scripting (un lenguaje de programacin que utiliza scripts y no requiere un compilador)
1.1 que agrega interactividad a las pginas web.
Recorrido por el libro ilustrado | ix
Administracin del ciclo de vida de las aplicaciones | 9
Figura 1-5
Parte de la pgina web
de ejemplos de MSDN
Developer Network
2. Desplcese hacia abajo y haga clic en el vnculo HTML5 del panel izquierdo,
que actualmente est cerca de la parte de abajo de la lista.
3. Entre las muestras, busque una aplicacin que indique HTML5 despus de la descripcin
de la aplicacin, por ejemplo la muestra sobre control de existencias. Haga clic en el
vnculo a la aplicacin.
4. En la pgina que se abre se indica el programa necesario para abrir y editar los archivos
de la aplicacin, y las tecnologas incluidas en la aplicacin. La muestra de control de
existencias requiere Visual Studio 12 e incluye JavaScript y HTML5, como se muestra
en la Figura 1-6.
Figura 1-6
Ver la pgina web de una
aplicacin de ejemplo
5. Haga clic en el vnculo Explorar cdigo, en StocksSample en el panel izquierdo, en Administracin del ciclo de vida de las aplicaciones | 11
html y en dashboard.html. Se muestra el cdigo HTML. Desplcese por el marcado
para hacerse una idea del tipo de cdigo que veremos muchas veces en este libro.
6. Haga clic en css, en el panel izquierdo, y en dashboard.css. Se muestra el cdigo CSS.
Imgenes de LISTO PARA CERTIFICACIN
Cul es la diferencia entre
La administracin del estado es el proceso de mantener la informacin de la pgina web
durante varias solicitudes de la misma pgina web o de otra. La primera vez que un usuario
solicita acceso a una aplicacin, se crea el estado de la sesin. El estado termina cuando
la pantalla
estado de sesin y estado
de la aplicacin? el usuario cierra la sesin.
1.2 Una alternativa para el estado de sesin es el estado de la aplicacin. El estado de la
aplicacin se crea cuando el explorador web enva la primera solicitud para una pgina
LISTO PARA CERTIFICACIN web al servidor web y termina cuando el usuario cierra el explorador.
Cul es la importancia de La informacin de estado persistente son datos que una aplicacin necesita una vez
la informacin de estado que termina la sesin. Muchas aplicaciones web necesitan almacenar datos (hacerlos
persistente? persistentes) para que los usuarios puedan retomar donde quedaron cuando regresan al sitio.
1.2
Almacenar datos de estado mediante almacenamiento local y de sesiones
El Protocolo de transporte de hipertexto (HTTP) es el protocolo que transfiere los datos
Alerta de
en la World Wide Web. Define las acciones que realizan los servidores y exploradores
web en respuesta a los comandos de los usuarios. Por ejemplo, cuando se especifica un
localizador uniforme de recursos (URL) en el campo de direccin de un explorador, el
certificacin
60 | Leccin 3 explorador enva un comando HTTP al servidor web solicitando la pgina web. HTTP
es un protocolo sin estado, es decir, no conserva datos de una sesin para la siguiente.
Al cerrar el explorador despus de visitar un sitio web, los datos no se guardan.
disponible
Los vnculos apareceran en una pgina web como se muestra en la Figura 3-5.
El siguiente es un ejemplo de marcado para vnculos Anterior-Inicio-Siguiente, con barras Con objeto de minimizar las limitaciones del protocolo HTTP, los desarrolladores utilizan
LISTO PARA CERTIFICACIN
verticales despus de cada elemento de navegacin para separarlo visualmente de los dems: Cmo administra HTML5
las cookies, pequeos archivos que contienen informacin sobre el usuario y el sitio web
los datos de estado?
visitado, y que se guardan en el equipo del usuario. Cuando un usuario vuelve a un sitio
<nav>
1.2
visitado, el explorador enva las cookies al servidor web. Las cookies ayudan al servidor
<a href="http://www.example.com/Services">Anterior</a> | web a recordar a un usuario y personalizar la experiencia de usuario en ese sitio.
<a href="http://www.example.com">Inicio</a> |
Sin embargo, las cookies han demostrado ser un riesgo de seguridad. Adems, si la cantidad
<a href="http://www.example.com/About">Siguiente</a> de datos fuera muy grande, como todos los datos se transmiten entre el explorador y el
</nav> servidor con cada peticin, se causara una considerable disminucin del rendimiento para
<br /> el usuario. En HTML5, los desarrolladores pueden usar el almacenamiento web, que ofrece
ms flexibilidad, conjuntos de datos ms grandes y mejor rendimiento.
El mtodo localStorage permite a los usuarios guardar grandes cantidades de datos de una sesin
La navegacin aparece a menudo en una lista vertical, que aprender a crear ms adelante LISTO PARA CERTIFICACIN
para otra sesin (persistencia de datos) y no hay lmite en cuanto a la duracin de la existencia
en esta leccin. Qu dos mtodos
de los datos. El mtodo sessionStorage conserva los datos nicamente durante una sesin (hasta
JavaScript/HTML5
permiten que una
que se cierra el explorador), algo que tambin se conoce como almacenamiento por pestaa.
Figura 3-6
aplicacin almacene Utilizando estos mtodos, datos concretos se transfieren solo cuando se solicitan, de
Navegacin Anterior- datos persistentes? forma que es posible almacenar una cantidad de datos relativamente grande sin ralentizar
Inicio-Siguiente con barras 1.2 la conexin o el sitio.
verticales entre los vnculos
APPCACHE PARA ARCHIVOS SIN CONEXIN

Otra manera de usar el almacenamiento web consiste en almacenar datos localmente cuando
un usuario no est conectado. En la memoria cach de la aplicacin, o AppCache, se
almacenan recursos como imgenes, pginas HTML, archivos CSS y JavaScript, datos que
normalmente se almacenaran en un servidor. Debido a que los recursos se almacenan en el
disco duro o dispositivo del cliente, los recursos se cargan ms rpido cuando se solicitan.
Al usar AppCache, los desarrolladores usan un archivo de texto llamado manifiesto de
AGREGAR EL ELEMENTO NAV A UN DOCUMENTO HTML cach para especificar los archivos que un explorador web debe almacenar en cach sin
conexin. Incluso si el usuario presiona el botn Actualizar sin conexin, la aplicacin se
PREPRESE. Para agregar el elemento nav a un documento HTML, siga estos pasos: carga y funciona correctamente. Un archivo de manifiesto de cach es parecido al siguiente:
1. En un editor de HTML o una herramienta de desarrollo de aplicaciones, abra el archivo
L3-MiPgina.html si no lo est y gurdelo como L3-MiPgina-nav.html para crear un X REF index.html
archivo nuevo. Obtendr ms informacin StyleSheet.CSS
2. Incluya las etiquetas nav y el contenido siguientes dentro de la etiqueta <header>: sobre el uso de AppCache images/dot.png
con JavaScript en la
<header> leccin 8. scripts/Main.js
<h1>Seleccionar un estilo de concierto</h1>
<nav>
<a href="#symphonies">Sinfonas</a> |
<a href="#raves">Raves</a>
Ayuda para el lector

</nav>
</header>
Este bloque de navegacin se vincular a las secciones de sinfonas y raves

del documento HTML.
3. Para que funcionen los vnculos, modifique los encabezados <h1> de sinfonas
Referencia cruzada (XREF)
y raves como se indica a continuacin:
<h1><a id="symphonies">Sinfonas</a></h1>
<h1><a id="raves">Raves</a></h1>
Ejercicios paso a paso
x | Recorrido por el libro ilustrado
22 | Leccin 2
Los desarrolladores del sitio web de Malted Milk Media le pidieron que estudie
el nuevo marcado disponible en HTML5. Estn particularmente interesados en la
etiquetas relacionadas con multimedia y grficos. Su tarea es aprender todo lo que
pueda sobre las nuevas etiquetas de marcado HTML5, as como preparar breves
descripciones y ejemplos de cada una de ellas.
Comprender los principios bsicos de HTML
En el Lenguaje de marcado de hipertexto (HTML) se utiliza marcado para describir

el contenido que se va a mostrar en una pgina web. Un elemento es la combinacin
CONCLUSIN de etiquetas y el contenido que encierran. Podra tener que usar caracteres especiales
en una pgina web, lo que requiere la codificacin de los caracteres. Por ltimo, cada
pgina web debe tener la declaracin doctype en la parte superior de la pgina.
El Lenguaje de marcado de hipertexto (HTML) se conoce como lenguaje de marcado

porque se usa para describir (marcar) los fragmentos del contenido que se va a mostrar
en una pgina web. En una pgina web con marcado hay etiquetas, palabras clave que
contribuyen a dar estructura a una pgina HTML. Un poco ms adelante obtendr ms
informacin sobre las etiquetas. La clave para usar HTML es saber qu etiquetas usar y
cundo usarlas. La combinacin de contenido, etiquetas, tal vez grficos, multimedia, etc.,
es lo que crea una pgina web.
Es fcil identificar un documento HTML, porque tiene la extensin de archivo .htm
o .html. Cuando un explorador web o dispositivo mvil, por ejemplo un smartphone,
abre un archivo HTML, representa (interpreta y reproduce) el contenido de la pgina.
Marcado bsico y estructura de la pgina
Todas las pginas HTML contienen etiquetas. Una etiqueta es una palabra clave entre
corchetes angulares. La mayora de las etiquetas se utilizan en pares: una se conoce
como la etiqueta de apertura o inicio, y la otra es la etiqueta de cierre o final. En Ayuda para el lector
un par de etiqueta se distingue entre maysculas y minsculas, y en una etiqueta
de cierre se deben usar maysculas o minsculas de la misma forma que en la de
apertura. Una etiqueta de cierre es idntica a una etiqueta de apertura, excepto
Tome nota
que la de cierre contiene una barra diagonal antes de la palabra clave.
Las etiquetas rodean contenido y lo definen. Por ejemplo, este marcado crea un
encabezamiento de primer nivel:
<h1>Pet Care 101</h1>
HTML tambin utiliza algunas etiquetas individuales, por ejemplo <br /> para un salto
de lnea y <hr /> para una lnea horizontal. En HTML 4, estas etiquetas se denominan
etiquetas vacas porque no requieren una etiqueta de cierre. HTML5 es menos restrictivo
que HTML 4. No es necesario incluir etiquetas de cierre para todos los elementos (aunque
algunos elementos todava requieren las etiquetas inicial y final), y las etiquetas se pueden Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 55
escribir en maysculas o minsculas. Con todo, en este libro se usan etiquetas de apertura
y cierre, y solo minsculas, en aras de la homogeneidad. Figura 3-1
Hay muchas etiquetas disponibles para las pginas HTML. Algunas de las etiquetas ms Comparacin entre partes de
usadas se enumeran en la tabla 2-1. Las cuatro primeras (<html>, <head>, <title> y <body>) un documento con marcado
son necesarias en todas las pginas web. HTML 4.01 y HTML5
Observe cmo el marcado semntico de HTML5 da un significado ms concreto a partes

de un documento HTML, lo que hace que la estructura sea ms fcil de entender.
Usar etiquetas para agregar estructura a un documento HTML
Entre los nuevos elementos HTML5 para estructurar y organizar contenido en un

documento HTML estn header, footer, section, nav, article y aside.
Qu etiquetas HTML5 se
utilizan para estructurar y Ahora que comprende el marcado semntico, fijmonos en algunos de los nuevos elementos
organizar un documento? HTML5 para organizar documentos. En la tabla 3-1 se enumeran y describen las nuevas
2.4 etiquetas relacionadas con la estructura de HTML5.
Tabla 3-1
Nuevas etiquetas de Etiqueta Descripcin
marcado HTML5 para
organizar el contenido <address> Define un rea para la informacin de contacto de una pgina o seccin.
y crear la estructura <article> Define un artculo, por ejemplo de una revista o un peridico, entrada
Administrar la interfaz grfica mediante CSS | 163
de blog o contenido similar.
<body> <aside> Define contenido independiente del contenido de la pgina, pero
<div>Ejemplo de cuadro</div> relacionado con l; se parece a una barra lateral en captulos de libros
</body> y artculos de revistas.
</html>
<details> Contiene informacin adicional sobre texto que la rodea. Crea un widget
2. Guarde el archivo como L7-box-exercise.html. Visualice el archivo en un explorador interactivo que el usuario puede mostrar u ocultar
web, donde tendr un aspecto parecido al de la Figura 7-4.
<footer> Define un pie de pgina para un documento o una seccin. Puede
incluir el autor del documento, informacin de contacto, informacin
Figura 7-4 de copyright y vnculos a las condiciones de uso.
Cuadro con esquinas
redondeadas
<header> Define un encabezado para un documento o una seccin. Puede contener
contenido introductorio o vnculos de navegacin.
<hgroup> Agrupa los encabezados y subencabezados (mediante las etiquetas <h1>
3. Para agregar una sombra paralela, agregue la lnea siguiente al elemento de estilo: a <h6>) si hay encabezados de varios niveles.
box-shadow: 5px 5px 5px #999; <nav> Define un bloque de vnculos de navegacin.
4. Guarde el archivo y visualice el resultado en un explorador web. El cuadro debe <section> Define una seccin de un documento, por ejemplo captulos, partes
parecerse al de la Figura 7-5. de una tesis o partes de una pgina web, cuyo contenido es distinto
al de las dems secciones.
Figura 7-5 <summary> Define un encabezado visible para un elemento de detalles. El usuario
puede hacer clic en l para mostrar u ocultar informacin.
Cuadro con esquinas
redondeadas y una <wbr> Define un salto de lnea posible. Cuando una palabra es muy larga,
sombra paralela o existe la posibilidad de que el explorador cree un salto lnea en el
lugar equivocado, puede usar el elemento <wbr> para partir la lnea
5. Deje el archivo, la herramienta de edicin y el explorador web abiertos si va a llevar o palabra correctamente.
a cabo el siguiente ejercicio durante esta sesin.
APLICAR TRANSPARENCIA
Un elemento opaco no permite que pase la luz, mientras que s se puede ver a travs de
un elemento transparente. Si bien los trminos son contrarios, reduciendo la opacidad
de un elemento o aumentando su transparencia, finalmente se llega al mismo punto.
En la Figura 7-6 se muestra el efecto de transparencia (u opacidad reducida) en una
imagen. La imagen original est a la izquierda; la imagen con un 50 % de transparencia
aplicado est a la derecha.
Tablas de fcil lectura
Figura 7-6
Transparencia aplicado
a una imagen
Fotos
LISTO PARA CERTIFICACIN La sintaxis para aplicar una transparencia a una imagen u otro elemento es:
Qu propiedad de
CSS permite aplicar opacity: value
transparencia a una
El valor es un valor de punto flotante entre 0,0 (100 % transparente) y 1,0 (100 % opaco).
imagen o un elemento?
Para aplicar una transparencia de 45 %, por ejemplo, se usara el valor 0,55 (1,0 0,45).
3.4
Recorrido por el libro ilustrado | xi
Comprender los principios bsicos de CSS: Diseos | 133
Aunque en este ejemplo se utiliza la palabra clave auto, se puede usar cualquiera de los
valores de grid-rows y grid-columns indicados en la tabla 5-2.
La especificacin para los diseos de plantilla de cuadrcula es todava una versin en
borrador y, en el momento de escribir este libro, no la admite ningn explorador web.
Con todo, podra encontrar alguna plantilla de cuadrcula en el examen MTA 98-375.
En consecuencia, debe consultar la ltima especificacin del mdulo de diseo de
plantilla de cuadrcula CSS de W3C al prepararse para el examen.
RESUMEN DE CONOCIMIENTOS Matriz resumen

En esta leccin ha aprendido lo siguiente: de habilidades
L asinterfacesdeusuariopuedensersencillasyclaras,opuedensermscomplejas
con varias secciones, botones y controles.
DisearunainterfazqueserepresentebienenpantallasdePCgrandesyen
dispositivos mviles pequeos sola requerir gran cantidad de marcado y cdigo.
En la actualidad, los modelos de caja flexible y de diseo de cuadrcula de CSS reducen
la cantidad de cdigo necesario para lograr compatibilidad en varios dispositivos
distintos. Dado que las especificaciones CSS todava no son definitivas, tendr que
usar prefijos de proveedor delante de los nombres de propiedades CSS para que
todo funcione.
Lascajasflexiblessehandiseadoparabarrasdeherramientas,mens,formularios
y elementos similares de pginas web y aplicaciones. Las cuadrculas son ms
apropiadas para diseos ms complejos.
Tantounacajaflexiblecomosucontenidosepuedenconfigurardeformaquesu
tamao cambie, en horizontal y en vertical, cuando cambia el tamao de la pantalla
en la que se visualizan. Tambin se puede invertir la direccin y el orden de las cajas
flexibles con una lnea de cdigo.
Unacajaflexiblepuedeincluircuadrossecundariosflexiblesenalturayanchura.
La propiedad flex se usa para trabajar con cuadros secundarios. La propiedad
flex-flow establece las propiedades flex-direction y flex-wrap de una caja flexible
(el cuadro primario) a la vez.
Losdiseosdecuadrculaseparecenalashojasdeclculo,yaqueusancolumnas,
filas y celdas. En realidad, puede crear diferentes tipos de diseos que, al final, no
se parecen a una hoja de clculo en absoluto.
Laspropiedadesdisplay:grid (o display:inline-grid), grid-columns y grid-rows de CSS se usan
para crear estructuras de cuadrcula. El tamao de las columnas y filas puede ser fijo
o flexible.
Lascajasflexiblesycuadrculasestndiseadasparacambiardetamao
proporcionalmente.
Lapropiedadflex-order permite cambiar el orden de los elementos secundarios de una
caja flexible y reorganizarlos con el orden que desee sin tener que cambiarlos en el
marcado HTML.
Unaplantilladecuadrculautilizacaracteresalfabticospararepresentarlaposicinde
los objetos en una cuadrcula. Se usan caracteres alfabticos con las propiedades grid-
template, grid-rows y grid-columns para crear una cuadrcula en la que fluyen datos.
86 | Leccin 3
Evaluacin de conocimientos 10. Cul es el formato de la etiqueta de HTML5 que valida una direccin de correo
electrnico?
Rellene los espacios en blanco a. <input label="email" name="URL">
b. <form id="email">
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los c. <label for="email">Correo electrnico</label>
espacios en blanco proporcionados. d. <input type = "email" name = "email">
1. es la parte de un sitio o aplicacin web con la que interacta
el usuario. Verdadero/Falso
2. En el modelo de cuadros CSS de W3C original, el es el espacio
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
entre el borde y el contenido del cuadro.
si el enunciado es falso.
V F 1. En una tabla, el elemento tfoot debe aparecer antes del elemento tbody.
V F 2. Puede usar nmeros o letras para cada elemento de una lista ordenada.
V F 3. Puede especificar la altura de un elemento de entrada utilizando el atributo size.
V F 4. El elemento de etiqueta muestra la leyenda, o ttulo, para una tabla.
V F 5. El elemento nav define un bloque de vnculos de exploracin.
Evaluacin de competencias
Evaluacin de
Escenario 3-1: Marcado para un artculo de boletn competencias
Sally Rowe, la controladora de documentos en Malted Milk Media, desea publicar una
Evaluacin de conocimientos serie de artculos en la intranet de la empresa con respecto a la seguridad y el control de
versiones de documentos. Necesita crear un esqueleto del marcado de HTML5 para un
Preguntas
artculo que aparecer en el boletn mensual en lnea creado por uno de los desarrolladores
web. Cada artculo tendr un ttulo y subttulo, varios prrafos de texto, y su nombre y
la fecha del artculo en el pie de pgina. Cmo debe verse el marcado de su artculo?
Escenario 3-2: Visualizacin de tablas largas en HTML

Vince genera informes contables para el vicepresidente de finanzas de Momentum Strategies,
una empresa de relaciones pblicas orientada a las campaas polticas. Vince imprime
regularmente tablas de dos o tres pginas de largo y entrega copias impresas al personal de
Aunque en este ejemplo se utiliza la palabra clave auto, se puede usar cualquiera de los administracin senior. Desea publicarlas en un rea segura de la intranet de la empresa, pero
valores de grid-rows y grid-columns indicados en la tabla 5-2. las filas de datos se separan desde de los ttulos de las columnas y la lnea de totales al final.
Desea saber cmo presentar las tablas correctamente en HTML5. Qu le dice?
Con todo, podra encontrar alguna plantilla de cuadrcula en el examen MTA 98-375. Evaluacin de aptitudes
Evaluacin
En consecuencia, debe consultar la ltima especificacin del mdulo de diseo de
plantilla de cuadrcula CSS de W3C al prepararse para el examen. Escenario 3-3: Creacin de un glosario de trminos deaptitudes
RESUMEN DE CONOCIMIENTOS Waylon es un estudiante que trabaja en una monografa. Su instructor requiere que cada
estudiante d formato al documento para su visualizacin en la Web. Waylon desea incluir
un glosario de trminos al final del documento, pero no puede producir la apariencia
En esta leccin ha aprendido lo siguiente: correcta utilizando una lista desordenada. Qu marcado sera ms adecuado para el
glosario de Waylon?
L asinterfacesdeusuariopuedensersencillasyclaras,opuedensermscomplejas
DisearunainterfazqueserepresentebienenpantallasdePCgrandesyen Escenario 3-4: Usar tipos de entrada apropiados en un formulario web
En la actualidad, los modelos de caja flexible y de diseo de cuadrcula de CSS reducen Margie est creando y probando un formulario web que incluye un campo de correo
la cantidad de cdigo necesario para lograr compatibilidad en varios dispositivos electrnico, un campo de direccin web y un campo de cdigo postal, entre otros. Cuando
distintos. Dado que las especificaciones CSS todava no son definitivas, tendr que pide a unos compaeros de trabajo que prueben el formulario, descubre que a menudo
usar prefijos de proveedor delante de los nombres de propiedades CSS para que especifican la direccin de correo electrnico en el campo de direccin web por error, y a
todo funcione. veces ingresan demasiados o muy pocos nmeros en el campo de cdigo postal. No desea
Lascajasflexiblessehandiseadoparabarrasdeherramientas,mens,formularios usar una expresin de patrn porque dice que es demasiado complicado. Qu otros tipos
y elementos similares de pginas web y aplicaciones. Las cuadrculas son ms de entrada puede usar Margie?
Tantounacajaflexiblecomosucontenidosepuedenconfigurardeformaquesu
Unacajaflexiblepuedeincluircuadrossecundariosflexiblesenalturayanchura.
Losdiseosdecuadrculaseparecenalashojasdeclculo,yaqueusancolumnas,
Laspropiedadesdisplay:grid (o display:inline-grid), grid-columns y grid-rows de CSS se usan
o flexible.
Lascajasflexiblesycuadrculasestndiseadasparacambiardetamao
proporcionalmente.
Lapropiedadflex-order permite cambiar el orden de los elementos secundarios de una
marcado HTML.
Unaplantilladecuadrculautilizacaracteresalfabticospararepresentarlaposicinde
Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
el usuario.
Convenciones y caractersticas
que se usan en este libro
En este libro se usan determinadas convenciones para fuentes, smbolos y ttulos que
resaltan la informacin importante y llaman la atencin sobre determinados pasos.
Paraobtener ms informacin sobre las caractersticas de cada leccin, consulte
laseccinRecorrido por el libro ilustrado.
Convencin Significado

Esta caracterstica proporciona un breve resumen
CONCLUSIN
del material que se trata en la seccin que sigue.
CERRAR
Las palabras en letras maysculas indican instrucciones
para abrir, guardar o cerrar archivos o programas.
Tambin sealan los elementos que se deben comprobar
o las acciones que se deben realizar.
Esta caracterstica seala un punto en el texto donde se
cubre un objetivo especfico de certificacin. Proporciona
la oportunidad de comprobar el grado de comprensin
de ese objetivo MTA particular y, si fuera necesario,
revisar la seccin de la leccin donde se trata.
Las ayudas para el lector aparecen en recuadros sombreados
TOME NOTA*
* que se encuentran en el texto. Tome nota proporciona
consejos tiles relacionados con tareas o temas concretos.
Estas notas proporcionan referencias a cualquier informacin
X REF
tratada en otra parte del libro de texto o describen
caractersticas interesantes de HTML5 que no se abordan
directamente en el tema o ejercicio actual.
Alt + Alt Un signo ms (+) entre dos nombres de teclas indica que se
deben presionar ambas teclas al mismo tiempo. Las teclas
que se le indique que debe presionar en un ejercicio,
aparecern en el tipo de fuente que se muestra aqu.
Ejemplo Los trminos clave aparecen en negrita y cursiva.
xii |
Programa de apoyo para el instructor
Los programas Microsoft Official Academic Course van acompaados de una generosa
variedad de recursos que incorporan extensas imgenes del libro de texto para formar
un paquete pedaggico coherente. Estos recursos proporcionan todo el material que los
instructores necesitan usar para impartir sus cursos. Los recursos disponibles en lnea
para su descarga incluyen:
DreamSpark Premium est diseado para proporcionar herramientas de desarrollo
ms fciles y econmicas, productos y tecnologas disponibles para profesores
y alumnos en los laboratorios, aulas y en los equipos de los alumnos. Existe una
suscripcin gratuita disponible durante tres aos para usuarios MOAC cualificados.
Nota: Microsoft Visual Studio y Microsoft Expression se pueden descargar desde
DreamSpark Premium para que los estudiantes los usen en este curso.
Las Guas del instructor contiene las soluciones a todos los ejercicios del libro
detexto y programas de estudio de varios plazos. Las guas del instructor tambin
incluye resmenes de captulos y notas de la leccin. La Gua del instructor
estdisponible desde el sitio del libro complementario
(http://www.wiley.com/college/microsoft).
El banco de pruebas contiene cientos de preguntas en formato de varias opciones,
verdadero o falso, respuesta corta y redaccin, y est disponible para la descarga
desde el sitio del libro complementario del instructor
(www.wiley.com/college/microsoft). Se proporciona una clave de respuestas completa.
Un juego completo de presentaciones de PowerPoint e imgenes est disponible
enel sitio del libro complementario del instructor
(http://www.wiley.com/college/microsoft) para mejorar las presentaciones en el aula.
Se proporcionan aproximadamente 50 diapositivas de PowerPoint para cada leccin.
Adaptadas a la cobertura de actualidad del texto y a la matriz de conocimientos, estas
presentaciones estn diseadas para transmitir conceptos clave abordados en el texto.
Todas las imgenes del texto son del sitio del libro complementario del instructor
(http://www.wiley.com/college/microsoft). Puede integrarlas en las presentaciones
de PowerPoint o crear sus propias transparencias y documentos. Mediante el uso de
estas imgenes en las conversaciones en el aula, puede ayudar a centrar la atencin
de los alumnos sobre los elementos clave de las tecnologas tratadas y ayudarles
aentender cmo usarlas eficazmente en el entorno de trabajo.
Cuando se trata de mejorar la satisfaccin en el aula, no hay mejor fuente de ideas
e inspiracin que sus colegas. La red de profesorado de Wiley, Wiley Faculty
Network, conecta a los profesores con la tecnologa, facilita el intercambio de
procedimientos recomendados, y contribuye a aumentar la eficiencia y la eficacia
de la enseanza. Las actividades de la red de profesorado incluyen entrenamiento
tecnolgico y tutoriales, seminarios virtuales, intercambio de conocimientos e ideas
entre iguales, asesoramiento personal e intercambio de recursos. Para obtener ms
detalles, visite www.WhereFacultyConnect.com.
| xiii
xiv | Programa de apoyo para el instructor
DREAMSPARK PREMIUM: SUSCRIPCIN GRATUITA DE TRES

AOS DISPONIBLE PARA USUARIOS CUALIFICADOS.
DreamSpark Premium est diseado para proporcionar la forma ms fcil y econmica
de que las universidades tengan disponibles las ltimas herramientas de desarrollo,
productos y tecnologas de Microsoft para profesores y alumnos en los laboratorios, aulas
y en los equipos de los alumnos. DreamSpark Premium es un programa de suscripcin
anual para los departamentos de enseanza de cursos de ciencias, tecnologa, ingeniera y
matemticas (STEM). La suscripcin proporciona una solucin completa para mantener
los laboratorios acadmicos, profesores y alumnos a la vanguardia de la tecnologa.
El software disponible en el programa DreamSpark Premium se proporciona sin gasto
adicional para los departamentos asociados a travs de la colaboracin editorial entre
Wiley y Microsoft.
Y herramientas que los profesores pueden usar para incentivar e inspirar a los
estudiantes de tecnologas en la actualidad.
Para obtener ms detalles, pngase en contacto con su representante de Wiley.
Para obtener ms informacin sobre el programa DreamSpark Premium, vaya a:
https://www.dreamspark.com/
Nota: Microsoft Visual Studio y Microsoft Expression se pueden descargar desde
DreamSpark Premium para que los estudiantes los usen en este curso.
Direcciones web y nmeros de telfono importantes

Para localizar al representante de Wiley Higher Education de su rea, vaya a
http://www.wiley.com/college y haga clic en el vnculo Quin es mi representante?
en la parte superior de la pgina, o llame al nmero gratuito de MOAC: 1+(888)
764-7001 (solo EE. UU. y Canad).
Para obtener ms informacin sobre la certificacin y la disponibilidad del examen,
visitewww.microsoft.com/learning/mcp/mcp.
xiv |
Programa de apoyo para el alumno
Recursos adicionales
Sitio web del libro complementario (www.wiley.com/college/microsoft)
El sitio del libro complementario para alumnos de la serie MOAC incluye recursos, archivos
de ejercicios y vnculos web que se usarn junto con este curso.
Ediciones de escritorio Wiley

Las ediciones de escritorio Wiley MOAC son innovadoras versiones electrnicas de los
libros de texto impresos. Los alumnos compran la versin de escritorio con hasta el 40 % de
descuento sobre el precio del texto impreso en los EE. UU. y obtienen un valor agregado en
la permanencia y portabilidad. Las ediciones de escritorio Wiley proporcionan a los alumnos
numerosos beneficios adicionales que no se encuentran disponibles en otras soluciones de
texto electrnico.
Las ediciones de escritorio Wiley NO son suscripciones, los alumnos descargan la edicin
de escritorio Wiley en los escritorios de los equipos. Los alumnos son propietarios de los
contenidos que compran y los mantienen durante todo el tiempo que deseen. Una vez que la
edicin de escritorio Wiley se descarga en el escritorio del equipo, los alumnos tienen acceso
instantneo a todos los contenidos sin necesidad de estar en lnea. Los alumnos tambin
pueden imprimir las secciones que prefieran leer en copia impresa. Tambin, tienen acceso
a los recursos totalmente integrados dentro de la edicin de escritorio Wiley. Adems de
resaltar el texto electrnico para tomar y compartir notas, los alumnos pueden personalizar
fcilmente su edicin de escritorio Wiley mientras estn leyendo o siguiendo una clase.
cerca de la certificacin Microsoft Technology

A
Associate (MTA)
Preparacin de los recursos tecnolgicos del futuro
La tecnologa juega un papel en casi todos los negocios del mundo. Poseer el conocimiento
fundamental de cmo funciona la tecnologa y comprender su impacto en el entorno
acadmico y laboral actual cada vez es ms importante, sobre todo para aquellos alumnos
interesados en explorar profesiones que implican tecnologa. Es por eso que Microsoft ha
creado la certificacin Microsoft Technology Associate (MTA), una nueva credencial de
nivel bsico que valida el conocimiento tecnolgico fundamental entre los alumnos que
buscan desarrollar una carrera en tecnologa.
La certificacin Microsoft Technology Associate (MTA) es el camino ms indicado hacia
los prestigiosos programas de certificacin tecnolgica de Microsoft, por ejemplo Microsoft
Certified Solutions Developer (MCSD). MTA se convertir con toda probabilidad en la
credencial ms importante para aquellas personas que buscan explorar y desarrollar una
carrera profesional en tecnologa, o reforzar actividades relacionadas, como negocios
ocualquier otro campo donde la tecnologa est omnipresente.
| xv
xvi | Programa de apoyo para el alumno
Perfil del candidato MTA

El programa de certificacin MTA est especficamente diseado para alumnos de educacin
secundaria y superior interesados en explorar las opciones acadmicas y profesionales en
el campo de la tecnologa. Ofrece a los alumnos una certificacin en TI bsica y desarrollo.
Como nuevo punto de partida recomendado para las certificaciones de tecnologa de
Microsoft, MTA est especialmente diseada para los nuevos alumnos en TI y desarrollo de
software. Est disponible exclusivamente en los centros educativos y se integra fcilmente
en los programas existentes de clases de informtica.
MTA potencia a los educadores y motiva a los alumnos

MTA ofrece un nuevo estndar para medir y validar los conocimientos fundamentales de
tecnologa directamente en el aula sin que afecte al presupuesto ni a los recursos didcticos.
MTA ayuda a las instituciones que destacan como proveedores innovadores de credenciales
de la industria de alta demanda y se puede implementar fcilmente con un conjunto simple,
conveniente y asequible de exmenes de certificacin de tecnologa de nivel bsico. MTA
permite a los alumnos explorar carreras en tecnologa que no requieren una gran inversin
en tiempo y recursos, al tiempo que proporciona una base profesional y la confianza para
tener xito en estudios avanzados y futuros proyectos de aprendizaje profesional.
Adems de conceder a los alumnos una certificacin de Microsoft de nivel bsico, MTA
est diseada como plataforma para otras certificaciones de tecnologa ms avanzadas
deMicrosoft, como la certificacin Microsoft Certified Solutions Developer (MCSD).
Entrega de exmenes MTA: licencia MTA Campus

La implementacin de un nuevo programa de certificacin en el aula nunca ha sido tan
fcil como con la licencia MTA Campus. A travs de la compra de una licencia anual MTA
Campus, no se necesitarn las solicitudes de presupuesto ad hoc ni las compras peridicas
de los cupones de exmenes. Ahora, puede realizar un presupuesto de bajo costo para todo
el ao y despus administrar los exmenes MTA a sus alumnos y otros profesores de la
escuela, donde y cuando desee.
La licencia MTA Campus ofrece un conjunto conveniente y asequible de certificaciones
de tecnologa de nivel bsico diseadas para potenciar a los educadores y motivar a los
alumnos a medida que construyen una base para sus carreras.
La licencia MTA Campus est administrada por Certiport, proveedor exclusivo de exmenes
MTA de Microsoft.
Para obtener ms informacin sobre cmo llegar a ser un asociado en tecnologa de
Microsoft (Microsoft Technology Associate) y sobre la disponibilidad de exmenes,
visitewww.microsoft.com/learning/mta.
xvi |
Programa de apoyo para Contenido
el alumno |
| xvii
Activar la prueba prctica GRATUITA de MTA

La compra de este libro le da derecho a una prueba prctica gratuita MTA de GMetrix
(porun valor de 30 $). Vaya a www.gmetrix.com/mtatests y use el siguiente cdigo
devalidacin para canjear la prueba gratuita: MTA98-375-3324376A6A85.
El sistema de administracin de habilidades GMetrix Skills Management System ofrece
todo lo necesario para la prctica de la certificacin Microsoft Technology Associate (MTA).
Informacin general de las caractersticas de la prueba
Pruebas prcticas que se asignan a los objetivos del examen de Microsoft Technology
Associate (MTA).
Pruebas prcticas MTA de GMetrix que simulan el entorno real de pruebas MTA.
Ms de 50 preguntas por prueba que abarcan todos los objetivos.
Progreso a ritmo propio, guardar la prueba para reanudarla ms tarde, permite volver
alas preguntas omitidas.
Informe de resultados detallado e imprimible que destaca aquellas reas que requieren
una revisin adicional.
Para obtener el mximo rendimiento de su preparacin MTA, aproveche las ventajas
delaspruebas de prctica gratuitas MTA de GMetrix desde este momento.
Para obtener soporte tcnico sobre problemas en la instalacin o activacin del cdigo,
escriba un correo electrnico a support@gmetrix.com.
| xvii
Reconocimientos
Revisores de los fundamentos de la tecnologa MOAC MTA

Nos gustara dar las gracias a los numerosos revisores que han ledo cuidadosamente el manuscrito y han proporcionado
informacin muy valiosa al servicio de los materiales didcticos de calidad:
Yuke Wang, Universidad de Texas en Dallas Douglas Tabbutt, Blackhawk Technical College
Palaniappan Vairavan, Universidad de Bellevue David Koppy, Universidad de Baker
Harold Buz Lamson, Instituto tcnico ITT Sharon Moran, Centro de Estudios Tcnicos Superiores
Colin Archibald, Centro de Estudios Superiores de Hillsborough
de Valencia Keith Hoell, Briarcliffe College and Queens College
Catherine Bradfield, DeVry University Online (CUNY)
Robert Nelson, Universidad de Blinn Mark Hufnagel, Distrito Escolar de Lee County
Kalpana Viswanathan, Universidad de Bellevue Rachelle Hall, Centro de Estudios Superiores de Glendale
Bob Becker, Universidad de Vatterott Scott Elliott, Christie Digital Systems, Inc.
Carol Torkko, Universidad de Bellevue Gralan Gilliam, Kaplan
Bharat Kandel, Missouri Tech Steve Strom, Centro de Estudios Superiores de Butler
Linda Cohen, Centro de Estudios Tcnicos Superiores John Crowley, Centro de Estudios Superiores
de Forsyth del Condado de Bucks
Candice Lambert, Centros tecnolgicos Metro Margaret Leary, Centro de Estudios Superiores del Norte
Susan Mahon, Universidad de Collin de Virginia
Mark Aruda, Centro de Estudios Tcnicos Superiores Sue Miner, Centro de Estudios Superiores de Lehigh
de Hillsborough Carbon
Claude Russo, Centro de Estudios Tcnicos Superiores Gary Rollinson, Cabrillo College
de Brevard Al Kelly, University of Advancing Technology
Heith Hennel, Valencia College Katherine James, Seneca College
Adrian Genesir, Western Governors University David Kidd, Western Governors University
Zeshan Sattar, Zenos
xviii |
Contenido breve
Leccin 1: A
dministracin del ciclo de vida de las aplicaciones 1
Leccin 2: C
ompilar la interfaz de usuario mediante HTML5: texto,
grficos y multimedia 21
Leccin 3: C
ompilar la interfaz de usuario mediante HTML5:
organizacin, entrada y validacin 53
Leccin 4: C
omprender los principios bsicos de CSS: flujo
decontenido, posicionamiento y estilo 87
Leccin 5: C
omprender los principios bsicos de CSS: Diseos 110
Leccin 6: A
dministracin del flujo de texto mediante CSS 137
Leccin 7: A
dministracin de la interfaz grfica mediante CSS 159
Leccin 8: C
omprensin de los principios bsicos de JavaScript
ycodificacin 189
Leccin 9: C
reacin de animaciones, trabajo con grficos y acceso
adatos 215
Leccin 10: C
odificacin de JavaScript para los recursos de interfaz
tctil, dispositivo, sistema operativo y ms 243
Apndice 268
ndice 269
| xix
Contenido
Leccin 1: A
dministracin del ciclo de Comprender las entidades 24
Comprender el elemento doctype 25
vida de las aplicaciones 1 Explorar el marcado de una pgina web sencilla 26
Elegir y configurar etiquetas HTML5 para mostrar
Matriz de objetivo del examen 1 contenido de texto 29
Trminos clave 1 Elementos de texto de HTML 4 con nuevo significado
Comprender los aspectos fundamentales o funcionalidad 29
de la plataforma 2 Nuevos elementos de texto en HTML5 31
Novedades en HTML5? 3 Elementos de texto que no se usan en HTML5 32
Crear aplicaciones 5 Elegir y configurar etiquetas HTML5 para mostrar
Explorar el empaquetado y el entorno de tiempo grficos 34
de ejecucin 7 Usar los elementos figure y figcaption35
Comprender el proceso de host 7 Crear grficos con canvas 38
Comprender el paquete de la aplicacin y el contenedor Conceptos bsicos de canvas 39
de la aplicacin 8 Crear el contorno de una forma 40
Comprender las credenciales y los conjuntos Proporcionar una imagen o un texto alternativo
de permisos 10 para exploradores antiguos 41
Comprender y administrar los estados Crear grficos con SVG 42
de la aplicacin 10 Cundo usar el elemento canvas en lugar de SVG 44
Almacenar datos de estado mediante almacenamiento Elegir y configurar etiquetas HTML5 para reproducir
local y de sesiones 11 archivos multimedia 45
AppCache para archivos sin conexin 11 Comprender y usar las etiquetas de vdeo 45
Comprender las interfaces y los gestos tctiles 12 Comprender y usar las etiquetas de audio 47
Aprovechar las habilidades y el contenido HTML5 Resumen de conocimientos 49
existentes para aplicaciones de pizarra o tableta 13 Evaluacin de conocimientos 49
Depurar y aprobar aplicaciones HTML5 13 Evaluacin de competencias 51
validar cdigo HTML5 14
Evaluacin de aptitudes 52
Validar un paquete 14
Publicar una aplicacin en una tienda 16 Leccin 3: Compilar la interfaz de
Resumen de conocimientos 17
usuario mediante HTML5:
Evaluacin de conocimientos 18
Evaluacin de competencias 20
organizacin, entrada y
Evaluacin de aptitudes 20 validacin 53
Matriz de objetivo del examen 53
Leccin 2: Compilar la interfaz de usuario Trminos clave 53
mediante HTML5: texto, Elegir y configurar etiquetas HTML5 para organizar
grficos y multimedia 21 contenido y formularios 54
Comprender la semntica HTML 54
Matriz de objetivo del examen 21 Usar etiquetas para agregar estructura a un documento
Trminos clave 21 HTML55
Comprender los principios bsicos de HTML 22 Elementos de encabezado y pie de pgina 56
Marcado bsico y estructura de la pgina 22 Elemento de seccin 57
Usar atributos 23 Elemento nav 59
Anidar elementos 24 Elemento de artculo 61
xx |
Contenido | xxi
Elemento aside 61 Usar caja flexible para diseos sencillos y cuadrcula para
Usar etiquetas para crear tablas y listas 64 diseos complejos 112
Crear tablas 64 Usar una caja flexible para establecer alineacin,
Crear listas 69
direccin y orientacin de contenido 114
Elegir y configurar etiquetas HTML5 para la entrada Trabajar con cajas flexibles y elementos de caja
y validacin 72 flexible116
Comprender la entrada y los formularios 73 Aplicar escala proporcional dentro de una caja flexible 116
Explorar la creacin de formularios, y los valores y atributos Cambiar la direccin de elementos secundarios en una caja
de entrada 77 flexible122
Comprender la validacin 81 Ordenar y organizar contenido 126
Resumen de conocimientos 83 Usar diseos de cuadrcula para establecer alineacin,
Evaluacin de conocimientos 84 direccin y orientacin de contenido 128
Evaluacin de competencias 86 Crear una cuadrcula con las propiedades de CSS para
filas y columnas 130
Comprender las plantillas de red 132
Leccin 4: Comprender los principios Resumen de conocimientos 133
bsicos de CSS: flujo de Evaluacin de conocimientos 133
contenido, posicionamiento
y estilo 87
Matriz de dominio de objetivos 87
Leccin 6: Administracin del flujo de
Trminos clave 87 texto mediante CSS 137
Comprender los principios bsicos de CSS 87 Matriz de objetivo del examen 137
Usar las herramientas adecuadas 88
Explorar el vnculo entre HTML y CSS 89
Trminos clave 137
Separar contenido de estilo 91 Administrar el flujo del contenido de texto mediante
Comprender selectores y declaraciones 92 CSS 137
Entender fuentes y familias de fuentes 94 Comprender y usar regiones para hacer fluir el
Administrar el flujo de contenido 96 contenido de texto entre varias secciones 139
Posicionar elementos individuales 99 Fluir contenido dinmicamente entre contenedores 140
Aplicar posicionamiento flotante 99 Texto desbordante 142
Aplicar posicionamiento absoluto 100 Implementacin de Microsoft de regiones de CSS 142
Administrar desbordamiento de contenido 102 Usar columnas y guiones para optimizar la legibilidad
Entender el desbordamiento de desplazamiento 102 del texto 145
Entender desbordamiento visible y desbordamiento Crear columnas 146
oculto104 Usar guiones 150
Resumen de conocimientos 105 Usar exclusiones de CSS para crear flujo de texto
Evaluacin de conocimientos 106 alrededor de un objeto flotante 152
Evaluacin de competencias 108 Resumen de conocimientos 155
Evaluacin de aptitudes 109 Evaluacin de conocimientos 155
Leccin 5: Comprender los principios Evaluacin de aptitudes 158
bsicos de CSS: Diseos 110
Leccin 7: Administracin de la interfaz
Matriz de objetivo del examen 110 grfica mediante CSS 159
Trminos clave 110
Organizar el contenido de la interfaz de usuario Matriz de objetivo del examen 159
mediante CSS 111 Trminos clave 159
Administrar la interfaz grfica mediante CSS 159
xxii | Contenido
Crear efectos grficos 160 Trabajar con imgenes, formas y otros grficos 219
Crear esquinas redondeadas 160 Manipular el lienzo con JavaScript 220
Crear sombras 161
Enviar y recibir datos 224
Aplicar transparencia 163
Transmitir objetos complejos y analizar 227
Aplicar degradados de fondo 164
Comprender la tipografa y el formato de fuente abierta Cargar y guardar archivos 229
de Web (WOFF) 166 Usar la memoria cach de la aplicacin (AppCache) 231
Aplicar transformaciones de 2D y 3D 167 Comprender y usar tipos de datos 233
Traslacin 2D 168 Usar JavaScript para validar la entrada
Escalado 2D 169 de formularios 233
Rotacin 2D y 3D 171 Comprender y usar cookies 235
Sesgar 2D y 3D 172
Comprender la perspectiva 3D, Comprender y usar almacenamiento local 237
transiciones y animaciones 173 Resumen de conocimientos 239
Aplicar efectos de filtro SVG 179 Evaluacin de conocimientos 240
Usar canvas para mejorar la GUI 182 Evaluacin de competencias 242
Resumen de conocimientos 185 Evaluacin de aptitudes 242
Evaluacin de competencias 188 Leccin 10: Codificacin de JavaScript
Evaluacin de aptitudes 188 para los recursos de interfaz
tctil, dispositivo, sistema
Leccin 8: Comprensin de los principios operativo y ms 243
bsicos de JavaScript
y codificacin 189 Matriz de objetivo del examen 243
Trminos clave 243
Matriz de dominio de objetivos 189 Responder a la interfaz tctil 244
Trminos clave 189 Capturar gestos y responder a ellos 246
Administrar y mantener JavaScript 189 Codificacin de API de HTML5 adicionales 249
Crear y usar funciones 193 Codificacin para capturar la geolocalizacin 249
Usar jQuery y otras bibliotecas de terceros 197 Entender los Web Workers 252
Actualizar la UI mediante JavaScript 199 Comprender WebSockets 255
Localizar y obtener acceso a elementos 201 Usar la API de archivo para cargas de archivos 258
Escuchar y responder a eventos 203 Acceso a recursos de dispositivos y del sistema 260
Mostrar y ocultar elementos 206 Obtener acceso a recursos en memoria 260
Actualizar el contenido de los elementos 208 Acceso a capacidades de hardware 262
Agregar elementos 209 Comprender el sistema de posicionamiento
Resumen de conocimientos 211 Global (GPS) 263
Comprender el acelermetro 263
Tener acceso a una cmara 263
Resumen de conocimientos 264
Leccin 9: Creacin de animaciones, Evaluacin de competencias 267
trabajo con grficos
y acceso a datos 215
Apndice268
Matriz de dominio de objetivos 215
Trminos clave 215 ndice269
Codificar animaciones mediante JavaScript 216
Crear animaciones 216
Administracin LECCIN 1
delciclo de vida
delas aplicaciones
M AT R I Z D E O B J E T I V O D E L E X A M E N
Habilidades/Conceptos Objetivo del examen MTA Nmero de objetivo

del examen MTA
Comprender los aspectos Comprender los aspectos 1.1
fundamentales de la plataforma fundamentales de la plataforma.
Comprender y administrar Administrar el estado 1.2
los estados de la aplicacin de una aplicacin.
Comprender las interfaces Comprender los aspectos 1.1
y los gestos tctiles fundamentales de la plataforma.
Depurar y probar una aplicacin
tctil basada en HTML5. 1.3
Depurar y aprobar aplicaciones Depurar y probar una aplicacin
HTML5 tctil basada en HTML5. 1.3

Publicar una aplicacin Publicar una aplicacin 1.4
en una tienda en una tienda.
TRMINOS CLAVE
contenedor de la aplicacin lenguaje de marcado
paquete de la aplicacin consultas multimedia
AppCache Interfaz de usuario (UI) estilo Moderno
interfaz de programacin de aplicaciones (API) espacio de nombres
estado de aplicacin Conjuntos de permisos
Hojas de estilo en cascada informacin de estado persistente
cookies independiente de la plataforma
depurar lenguaje de scripting
gesto estado de sesin
Lenguaje de marcado de hipertexto (HTML) sessionStorage
Protocolo de transporte de hipertexto (HTTP) evento tctil
HTML5 simulador o emulador de pantalla tctil
permisos de identidad validador
JavaScript Windows en tiempo de ejecucin (WinRT)
icono de selector Tienda Windows
localStorage World Wide Web Consortium (W3C)
1
2|Leccin 1
Acaba de empezar un contrato en prcticas en Malted Milk Media, una agencia

creativa que crea aplicaciones multimedia para clientes. La compaa va a empezar
a usar HTML5 en sus proyectos prximamente. Su jefe le encarg que estudiara
HTML5 y las tecnologas relacionadas, y que presentara un informe con los cambios
importantes de HTML 4.01 a HTML5. Tambin debe incluir informacin sobre cmo
se puede usar HTML5 para crear aplicaciones de pantalla tctil para PC, pizarras,
tabletas y smartphones.
Comprender los aspectos fundamentales de la plataforma

HTML5 es el estndar HTML ms reciente y una familia de tecnologas que incluye
HTML, CSS y JavaScript. Aunque el estndar HTML5 no estar terminado hasta
CONCLUSIN dentro de unos aos, los exploradores web ms modernos ya admiten elementos
de HTML5. El desarrollo de aplicaciones HTML5 para exploradores web y de
El Lenguaje de marcado de hipertexto (HTML) es el lenguaje que se utiliza para describir

pginas web. Es un lenguaje de marcado, no un lenguaje de programacin, lo que significa que
HTML usa etiquetas de marcado como <body> y <h1> para describir partes de una pgina
web. Un archivo HTML no se ejecuta como un programa. En lugar de ello, un explorador
TOME NOTA
* interpreta un archivo HTML para mostrar una pgina web en funcin de las etiquetas.
W3C es una marca
comercial (registrada en Desde 1999, el estndar para pginas web ha sido HTML 4.01, pero el mundo ha
muchos pases) de World cambiado bastante desde entonces. Los usuarios de Internet desean disponer de
Wide Web Consortium; aplicaciones web multimedia con audio, vdeo y gran cantidad de interactividad en
las marcas de W3C son los sitios web que visitan. Y con dispositivos mviles cada vez ms populares, como
registradas y conservadas pizarras, tabletas y smartphones, los usuarios quieren disfrutar de la misma experiencia e
por las instituciones MIT interactividad en las aplicaciones mviles, independientemente de qu dispositivo utilicen.
ERCIM y Keio.
Todo esto ha hecho necesario el desarrollo de un nuevo estndar, que ser HTML5.
El World Wide Web Consortium (W3C) es la entidad de estndares ms importante y
Figura 1-1 desarrolla las especificaciones de HTML5, que debe estar terminado en 2014. El logotipo
de HTML5 se muestra en la Figura 1-1.
Logotipo de HTML5
TOME NOTA
*
Si bien HTML5 se
encuentra todava en
desarrollo, la mayora
de los exploradores
web principales, como
Microsoft Internet
Explorer, Google
Chrome, Mozilla Firefox,
Opera y Apple Safari, son
compatibles con muchos
elementos HTML5. Es importante recordar que HTML5 es un estndar y, a la vez, una combinacin o familia
de nuevas etiquetas de marcado HTML, CSS, JavaScript y otras tecnologas relacionadas.
Hojas de estilo en cascada define los estilos de HTML en un archivo independiente, de
LISTO PARA CERTIFICACIN forma que resulta muy fcil cambiar fuentes, tamaos de fuente y otros atributos en un
Cules son las tres archivo CSS. Estos cambios quedan reflejados en todos los archivos HTML que hacen
tecnologas principales referencia el archivo CSS. La ltima versin de CSS es CSS3. JavaScript es un lenguaje
dela familia HTML5? de scripting (un lenguaje de programacin que utiliza scripts y no requiere un compilador)
1.1 que agrega interactividad a las pginas web.
Administracin delciclo de vida delas aplicaciones|3
Si bien puede usar HTML5, CSS3 y JavaScript para crear pginas web, usted tambin
TOME NOTA
* puede usarlos en combinacin para desarrollar aplicaciones cliente que se ejecutan en
Obtendr informacin dispositivos tctiles como PC, pizarras, tabletas y smartphones. En esencia, las mismas
detallada sobre CSS3 y
tecnologas que los desarrolladores utilizan para crear pginas web se estn empezando
JavaScript en lecciones
ausar para crear aplicaciones para diferentes dispositivos.
posteriores.
HTML5 es adems independiente de la plataforma. As, con la familia de tecnologas de
HTML5 puede crear aplicaciones que se ejecuten en los sistemas operativos de distintos
dispositivos mviles y de escritorio, como Microsoft Windows, Internet Explorer y
Windows Phone. Tambin se pueden ejecutar en Mac OS X, iOS, Android y Blackberry
OS. Puesto que HTML5 se basa en un estndar abierto, los usuarios de aplicaciones
HTML5 no tienen que descargar un complemento ni usar dispositivos compatibles con
complementos. Por el contrario, puede usar cualquier explorador web, ya sea en su PC
odispositivo mvil, y obtener una experiencia igualmente satisfactoria en la Web.
Por ltimo, una parte importante del desarrollo de aplicaciones en el entorno de Windows
es la Interfaz de usuario (UI) estilo Moderno, que es la interfaz de usuario que se usa
en la ltima versin de Microsoft Windows: Windows 8. La Interfaz de usuario estilo
Moderno tiene caractersticas como una apariencia limpia y ordenada, el uso de la pantalla
completa, grandes concentradores (botones grficos) y un enfoque en el desplazamiento
lateral, por citar solo unas cuantas. Vea la Figura 1-2 como ejemplo.
Figura 1-2
La pantalla Inicio de
Windows 8 es una interfaz
de usuario estilo Moderno
Dado que este libro le ayuda a prepararse para el examen de certificacin Microsoft
Technology Associate (MTA) 98-375, Aspectos fundamentales del desarrollo de aplicaciones
HTML5, en los ejemplos de las lecciones se utilizan las herramientas de Microsoft siempre
que es posible. Con todo, el examen no se centra en un conjunto de herramientas concreto.
Puede trabajar con la familia HTML5 utilizando muchas herramientas distintas de muchas
TOME NOTA
* compaas distintas. Incluso un sencillo editor de texto como Bloc de notas o Notepad++
funciona adecuadamente para trabajar con marcado HTML, CSS y JavaScript. Necesita
herramientas ms globales, como Visual Studio, al depurar gran cantidad de cdigo,
empaquetar aplicaciones para su distribucin y tareas similares. En http://bit.ly/K8nkk1
encontrar herramientas de desarrollo gratuitas para crear aplicaciones en tiempo de ejecucin.
Novedades en HTML5?
La familia HTML5 cuenta con muchas etiquetas de marcado y tecnologas nuevas,

por ejemplo consultas multimedia, geolocalizacin, Modernizr y mucho ms. Estas
tecnologas agregan gran cantidad de funcionalidad a las aplicaciones basadas en
HTML. Contribuyen a que el producto final tenga ms estilo.
4|Leccin 1
En la lista siguiente se mencionan algunas de estas nuevas caractersticas, con una breve
descripcin:
Etiquetas de audio y vdeo: se utilizan para insertar multimedia de audio y vdeo
mediante las etiquetas de marcado HTML5 <audio> y <video>.
Canvas: elemento HTML5 que crea un contenedor de grficos y utiliza JavaScript
para dibujar los grficos segn sea necesario.
Consultas multimedia: una caracterstica de CSS3 que detecta el tipo de pantalla
delusuario y ajusta la salida segn corresponde.
Nuevas interfaces de programacin de aplicaciones (API): d acceso a las
aplicaciones a un sinfn de recursos, como archivos, cmaras web y animaciones
aceleradas por hardware.
Geolocalizacin: utiliza JavaScript para detectar la ubicacin (posicionamiento
geogrfico) del dispositivo de un cliente, ya se trate de un dispositivo Windows
Phone, Android o PC.
Modernizr: biblioteca JavaScript que le ayuda a entregar las nuevas capacidades
deHTML5 y CSS3 en exploradores ms antiguos.
Esta lista es una pequea muestra de las tecnologas y caractersticas disponibles.
Aprender a usar muchas de ellas a largo de las lecciones del curso.
EXPLORE EL ESTNDAR HTML5

PREPRESE. Para obtener informacin sobre el estndar HTML5, siga estos pasos:
1. Vaya a la pgina web de W3C en http://www.w3.org/TR/html5/.
2. Lea el contenido de las primeras pginas, hasta llegar a la tabla de contenido,
y luego aborde las siguientes cuestiones:
Cul es la ltima versin publicada del estndar?
Qu grupo de trabajo es responsable de la especificacin?
Cmo se llama la pgina web que realiza el seguimiento de errores?
Qu tres errores no se han abordado todava?
Cmo se llama la pgina web que realiza el seguimiento de cuestiones
pendientes? Qu tres cuestiones no se han abordado todava?
3. En la pgina web principal de HTML5, dedique unos 15 minutos a leer el resto
del contenido para familiarizarse con todos los temas.
EXPLORE LOS RECURSOS PARA DESARROLLADORES DE APLICACIONES

PREPRESE. Para conocer los recursos de desarrollo de aplicaciones que proporciona
Microsoft, siga estos pasos:
1. Visite el sitio web Centro de aprendizaje para desarrolladores sin experiencia en
http://msdn.microsoft.com/en-us/beginner/default.aspx.
2. Haga clic en el vnculo de Introduccin al desarrollo de aplicaciones en tiempo de
ejecucin de Windows. En la pgina que se abre, lea la informacin. Qu tecnologas
oherramientas de desarrollo puede usar para crear aplicaciones en tiempo de ejecucin?
3. Vaya a la pgina web de HTML/CSS para aplicaciones en tiempo de ejecucin en
http://bit.ly/N48F0L.
4. Haga clic en el vnculo Referencia de HTML y DOM y, continuacin, responda
lasiguiente pregunta:
Qu es Document Object Model (DOM) y qu importancia tiene para las
aplicaciones en tiempo de ejecucin?
5. Vuelva a la pgina de HTML/CSS para aplicaciones en tiempo de ejecucin en
http://bit.ly/N48F0L. Haga clic en el vnculo Referencia de hojas de estilo en cascada
y, acontinuacin, responda ala siguiente cuestin:
Nombre tres elementos de pginas web que controlan mediante hojas de estilo
en cascada.
6. Vaya al sitio de MSDN en http://bit.ly/Hd9uzt. Explrelo para familiarizarse con l.
MS INFORMACIN
Las direcciones web usadas en los ejercicios anteriores se vuelven a indicar aqu para facilitarle las cosas. Puede
marcarlas para usarlas ms adelante. Encontrar informacin sobre el estndar HTML5 en el sitio web de W3C
en http://www.w3.org/TR/html5/. El sitio web que est en
http://www.w3schools.com/html/default.asp proporciona tutoriales para HTML5. Microsoft proporciona
informacin til para nuevos desarrolladores en el Centro de aprendizaje para desarrolladores sin experiencia
(http://msdn.microsoft.com/en-us/beginner/default.aspx) y el sitio de MSDN en http://bit.ly/Hd9uzt.
Crear aplicaciones
El desarrollo de aplicaciones HTML5 es mucho ms sencillo que el de aplicaciones

similares que utilizan otras tecnologas, por ejemplo Adobe Flash y Microsoft Silverlight.
HTML5, CSS y JavaScript son lenguajes interpretados, lo que significa que no
requieren compilacin. Puede depurar el cdigo en un explorador, realizar cambios
rpidos y, posteriormente, actualizar la ventana del explorador para ver el resultado
de los cambios.
Aunque puede crear gran cantidad de cdigo usando un sencillo editor de texto o de HTML,
si desea empaquetar e implementar su aplicacin, tendr que usar una herramienta de
desarrollo de aplicaciones como Microsoft Visual Studio.
Figura 1-3
Pasos generales para
crear una aplicacin
En esta seccin, se describen los pasos generales que conlleva la creacin de una
aplicacin. En la Figura 1-3 se indican los pasos, que se explican a continuacin.
Planear el proyecto: piense qu tipo de aplicacin desea crear. Elija lo que elija,
esmejor que sea sencillo mientras aprende a desarrollar aplicaciones HTML5.
Unavez que decida la accin principal de la aplicacin, cree un esquema del
flujogeneral de la aplicacin de principio a fin. Determine tambin el tipo de
interactividad del usuario que desea incluir, por ejemplo una interfaz tctil, si
necesitaguardar datos fuera de la aplicacin, y si la aplicacin debe conectarse
aotrasaplicaciones o servicios (por ejemplo, una fuente RSS).
Disear la interfaz de usuario: al disear la interfaz de usuario, determine cmo
desea que los usuarios vean la aplicacin. Agrupe el contenido de manera que tenga
lgica. Empiece con el listado de los comandos que necesita para que la aplicacin
funcione como se espera. Rena imgenes y clips multimedia si es necesario.
Enlaactualidad, las aplicaciones requieren como mnimo un icono de selector,
querepresenta a la aplicacin.
Actualizar el manifiesto de la aplicacin: todas las aplicaciones requieren un archivo
demanifiesto. En el archivo de manifiesto se describen las propiedades de la aplicacin y
se indica qu necesita la aplicacin para funcionar (vea la Figura 1-4). El archivo contiene
informacin diversa, como el nombre para mostrar que vern los usuarios, una descripcin
de la aplicacin, la orientacin de la aplicacin (vertical, horizontal, etc.), la ruta de
archivo del icono de la aplicacin, las capacidades de la aplicacin (caractersticas
delsistema o dispositivos que la aplicacin puede usar) y muchas otras cosas.
6|Leccin 1
Figura 1-4
Ejemplo de archivo
de manifiesto
Escribir cdigo: durante esta fase, debe escribir el cdigo de la aplicacin, que puede
incluir una combinacin de HTML, CSS y JavaScript.
Compilar la aplicacin: utilizando una herramienta de desarrollo de aplicaciones
como Visual Studio, convierta el cdigo y los dems recursos en una aplicacin
propiamente dicha.
Depurar y probar: debe probar la aplicacin plenamente y solucionar los problemas
que aparezcan. Si la aplicacin utiliza una interfaz tctil, es muy importante probar
laaplicacin en un dispositivo tctil o usar un emulador tctil.
Empaquetar: al empaquetar una aplicacin se crea un contenedor en el que estn todos
los archivos necesarios para la aplicacin, por ejemplo JavaScript, imgenes, etc.
Validar: validar la aplicacin significa ejecutarla en un programa de validacin para
garantizar que no falta nada.
Implementar: cargue la aplicacin en un lugar donde se pueda vender, por ejemplo
laTienda Windows.
Las aplicaciones que piense poner a disposicin de muchos usuarios, especialmente a
travs de un lugar de venta como una tienda de aplicaciones, deben ser fiables y seguras.
Hay muchas aplicaciones que se disean para ejecutarse en varios sistemas operativos.
Asegrese de probar sus aplicaciones por completo y validarlas con las herramientas
adecuadas. Tambin debe considerar la posibilidad de ofrecer soporte tcnico para las
aplicaciones ms complejas.
PREPRESE PARA DESARROLLAR APLICACIONES

PREPRESE. Con objeto de estar preparado para trabajar con HTML5 y desarrollar
aplicaciones, siga estos pasos:
1. Busque fuentes de imgenes gratuitas, sin derechos de autor, en la Web. Incluso
si tiene capacidad para crear mucho de su material grfico, disponer de recursos y
usarlos le ser muy til.
2. Para trabajar con archivos HTML5, CSS y JavaScript, descargue e instale un editor
de texto o HTML, como Notepad++. Simplemente, busque Notepad++ utilizando un
explorador web. Una herramienta ms completa es Visual Studio Express para Web,
disponible en el sitio web de Visual Studio en http://bit.ly/eBUygk. Con Express para
Web puede abrir sus archivos en un explorador web con un solo clic y usar un gran
nmero de plantillas para crear archivos ms rpidamente.
3. Asegrese de que tiene instalada la ltima versin del explorador.
4. Para crear aplicaciones para la Tienda Windows, descargue Microsoft Visual Studio 2012
Express para Windows 8 desde http://bit.ly/K8nkk1 e instlelo. El programa requiere
que Windows 8 est instalado.
Explorar el empaquetado y el entorno de tiempo de ejecucin
El entorno de Windows en tiempo de ejecucin es la base del sistema operativo

Windows 8. Proporciona la funcionalidad para aplicaciones en tiempo de ejecucin.
Cuando se inicia una aplicacin, se considera que est en un entorno de tiempo ejecucin
(RTE). Es el entorno en el que los desarrolladores prueban las aplicaciones y los usuarios
las ejecutan. Windows tiene su propio entorno de tiempo de ejecucin, denominado
Windows en tiempo de ejecucin (WinRT).
Windows en tiempo de ejecucin es la base del sistema operativo Windows 8. Est formado
por capas que proporcionan funcionalidad a las aplicaciones en tiempo de ejecucin y al
shell de Windows. WinRT admite aplicaciones escritas en distintos lenguajes que usenla
interfaz deusuario Moderna.
La capa Windows Core se encuentra en la base. Esta capa contiene el kernel, los servicios
y el modo de usuario de Windows. Un nivel por encima, Windows Runtime Core contiene
servicios adicionales, como administracin de memoria y globalizacin. Yms arriba
todava, estn las capas relacionadas con los dispositivos, y con multimedia, redes,
almacenamiento local y remoto, y otras cosas. La capa de interfaz de usuario es
compatible con aplicaciones HTML5 y otras aplicaciones.
WinRT funciona con C#, C++, Visual Basic y JavaScript. Puede compilar aplicaciones en
tiempo de ejecucin con WinRT y con la biblioteca de Windows para API de JavaScript.
Una interfaz de programacin de aplicaciones (API) no es ms que una lista de
instrucciones que permite que un programa se comunique con otro. En una aplicacin
web,una API permite que un explorador o servidor web se comunique con otros
programas. Hay cientos de API disponibles para muchos usos distintos.
Document Object Model (DOM) es una API importante, que no se debe olvidar. El DOM
se ha diseado para HTML y Lenguaje de marcado extensible (XML). Permite que los
programas y scripts actualicen el contenido, la estructura y los estilos sobre la marcha;
TOME NOTA
* esencialmente se puede modificar cualquier cosa que haya en un archivo HTML o XML.
DOM no es HTML ni JavaScript, pero los une.
La biblioteca de Windows para JavaScript contiene archivos JavaScript y CSS que los
LISTO PARA CERTIFICACIN desarrolladores pueden usar para crear aplicaciones en tiempo de ejecucin ms fcil y
Qu entorno proporciona rpidamente. La biblioteca se utiliza junto con HTML, CSS y WinRT para crear aplicaciones.
a los desarrolladores
acceso a un dispositivo El entorno de ejecucin se ocupa del acceso a dispositivos, multimedia, redes,
de usuario? almacenamiento local y remoto, y otros elementos. Los desarrolladores pueden usar API y el
1.1 entorno de ejecucin para solicitar acceso a dispositivos de usuario desde unaaplicacin. En
una aplicacin Windows 8, por ejemplo, el dispositivo podra ser unteclado, un mouse, un
panel tctil, una impresora, una cmara web o un micrfono.
MS INFORMACIN
Para obtener ms informacin sobre Windows en tiempo de ejecucin, visite la pgina web
Caractersticas y diferencias de HTML, CSS y JavaScript (HTML) en http://bit.ly/xrofoB.
COMPRENDER EL PROCESO DE HOST

Una aplicacin, tanto si se trata de una aplicacin web como si se crea para Windows,
requiere un host de tiempo de ejecucin que la inicie. Por ejemplo, al iniciar Internet
Explorer, un proceso de host en el sistema operativo controla la ejecucin general del
explorador. (Un proceso es simplemente un programa que se est ejecutando). En este
caso, cada pestaa del explorador obtiene su propio proceso, de forma que si hay tres
pestaas abiertas, el sistema tiene tres procesos en ejecucin, uno por cada pestaa.
8|Leccin 1
Cuando se ejecuta una aplicacin en tiempo de ejecucin que se cre con JavaScript,
Internet Explorer representa el HTML como cuando se tiene acceso a una pgina web,
pero el explorador est hospedado en otro proceso, denominado WWAHost.exe. Dicho
proceso ejecuta la aplicacin dentro de un contenedor de la aplicacin. Los contenedores
de la aplicacin se describen en la siguiente seccin. WWAHost pasa el HTML, CSS
yJavaScript a la pgina default.html, que es el inicio de la aplicacin.
LISTO PARA CERTIFICACIN Para que no haya problemas, el cdigo que se ejecuta en un contenedor de la aplicacin en
Cul es el papel del tiempo de ejecucin est limitado a ciertas acciones, de forma predeterminada. Si desea que
proceso de host en la aplicacin tenga acceso a un dispositivo, otra aplicacin, Internet o cualquier cosa que
la administracin no sea la propia aplicacin, debe declarar (especificar) la interaccin en el manifiesto de la
deaplicaciones? aplicacin. Estas declaraciones se encuentran en la seccin de capacidades del manifiesto.
1.1 Cuando el usuario final instala la aplicacin, debe dar permiso para el acceso solicitado.
Las aplicaciones en tiempo de ejecucin utilizan contratos, que son esencialmente
acuerdos, y lo que se conoce como extensiones al crear interacciones entre aplicaciones.
Las API de WinRT controlan la comunicacin entre las aplicaciones.
COMPRENDER EL PAQUETE DE LA APLICACIN Y EL CONTENEDOR

DELAAPLICACIN
La finalidad de un paquete de la aplicacin es facilitar la distribucin y la implementacin.
El empaquetado de las aplicaciones empaqueta los archivos y las carpetas de una aplicacin
en un paquete que se puede distribuir. Un contenedor de la aplicacin garantiza que la
aplicacin se ejecuta en su propio espacio de memoria y no daa el sistema operativo.
El empaquetado de la aplicacin es el proceso de empaquetar una aplicacin y sus diversos
archivos en un archivo que se puede distribuir, lo que facilita la implementacin de la
aplicacin. El paquete de la aplicacin es el resultado del proceso de empaquetado. El
empaquetado es algo parecido al archivado de una carpeta que contiene archivos y subcarpetas.
Enviar todos los archivos y las subcarpetas tal cual a otro usuario no sera prctico, pero
resulta mucho ms fcil si todo se comprime en un solo archivo. Los paquetes de desarrollo de
aplicaciones como Visual Studio proporcionan funcionalidad para crear paquetes de aplicacin.
Los usuarios adquiere un paquete de la aplicacin, generalmente en una tienda de aplicaciones
Cul es el objetivo
de empaquetar una
en lnea, y lo instalan en su PC o dispositivo. La aplicacin se ejecuta en un contenedor de
aplicacin?
la aplicacin, de tiempo de ejecucin, es decir, un espacio de memoria independiente. Un
1.1
contenedor de la aplicacin evita daos en el sistema operativo si la aplicacin experimenta
unerror por algn motivo y permite que el usuario la desinstale limpiamente.
Datos importantes sobre los paquetes de la aplicacin:
Un paquete puede contener pginas web, cdigo, tablas de base de datos y
procedimientos. Si un paquete tiene una interfaz de usuario, se denomina aplicacin.
Un paquete puede contener otros paquetes.
Se pueden meter o sacar elementos de un paquete. Puesto que un paquete est en su propio
contenedor, si se mueve un paquete, todo lo que contiene se mueve como una unidad.
Un usuario puede instalar, actualizar o eliminar un paquete.
Un paquete de aplicaciones nico puede tener varias funciones. Para mantener todos los
componentes separados de manera que no entren en conflicto, un paquete define un espacio
de nombres. Un espacio de nombres es como un rea de trabajo para objetos relacionados
(pginas, cdigo, etc.).
EXPLORE APLICACIONES DE MUESTRA

PREPRESE. Para explorar los tipos de aplicaciones de muestra que se pueden descargar,
siga estos pasos:
1. Vaya a la pgina web Muestras de cdigo para desarrollador de MSDN Developer
Network (vea la Figura 1-5), en http://bit.ly/H57ZVh. Microsoft ofrece gran variedad
de aplicaciones de muestra y ejemplos de cdigo, que se pueden descargar y abrir en
una herramienta de desarrollo de aplicaciones como Visual Studio. Tambin puede
consultar el cdigo para muchas aplicaciones en lnea de muestra.
Figura 1-5
Parte de la pgina web
de ejemplos de MSDN
Developer Network
2. Desplcese hacia abajo y haga clic en el vnculo HTML5 del panel izquierdo,
que actualmente est cerca de la parte de abajo de la lista.
3. Entre las muestras, busque una aplicacin que indique HTML5 despus de la descripcin
de la aplicacin, por ejemplo la muestra sobre control de existencias. Haga clic en el
vnculo a la aplicacin.
4. En la pgina que se abre se indica el programa necesario para abrir y editar los archivos
de la aplicacin, y las tecnologas incluidas en la aplicacin. La muestra de control de
existencias requiere Visual Studio 12 e incluye JavaScript y HTML5, como se muestra
en la Figura 1-6.
Figura 1-6
Ver la pgina web de una
aplicacin de ejemplo
5. Haga clic en el vnculo Explorar cdigo, en StocksSample en el panel izquierdo, en

html y en dashboard.html. Se muestra el cdigo HTML. Desplcese por el marcado
para hacerse una idea del tipo de cdigo que veremos muchas veces en este libro.
6. Haga clic en css, en el panel izquierdo, y en dashboard.css. Se muestra el cdigo CSS.
10|Leccin 1
7. Haga clic en js, en el panel izquierdo, y en default.js. Se muestra el cdigo JavaScript.

8. Si tiene una herramienta de desarrollo de aplicaciones, como Visual Studio, ya
instalada, puede descargar y abrir la aplicacin de muestra para examinar todos
los archivos del paquete.
9. Tambin puede ir al sitio web HTML5Rocks.com, hacer clic en el men Tutoriales
de la parte superior de la pantalla, activar la casilla Muestras y, a continuacin,
consultar el funcionamiento de cada muestra, junto con su cdigo.
10. Cierre todas las ventanas abiertas.
MS INFORMACIN
Para obtener ms informacin sobre el paquete de la aplicacin, visite la pgina web Implementacin
ypaquetes de aplicaciones en http://bit.ly/H9rsFz.
Comprender las credenciales y los conjuntos de permisos
.NET Framework proporciona un entorno seguro en el que se pueden ejecutar aplicaciones

JavaScript y HTML5. En el marco de trabajo se utiliza la transparencia de seguridad
para separar los diferentes tipos de cdigo mientras se ejecutan. Tambin se utilizan
conjuntos de permisos y permisos de identidad para controlar el entorno.
La seguridad del cdigo es una prioridad para los desarrolladores de aplicaciones. Las
prdidas econmicas consecuencia de virus, troyanos, ataques de scripting entre sitios y
otro malware distribuidos por Internet son mayores cada ao. La creacin de un ambiente
seguro y protegido en el que se puedan ejecutar aplicaciones es de vital importancia para
la mayora de individuos y organizaciones en la actualidad.
Afortunadamente, con .NET Framework 4.0 se pueden compilar y ejecutar aplicaciones
en tiempo de ejecucin, entre otras tecnologas. .NET Framework es un componente de
Cmo protegen
las aplicaciones las
Windows que se ejecuta en segundo plano. Proporciona el entorno de ejecucin de cdigo
credenciales y los para cdigo de scripts o interpretado (como JavaScript), y contribuye a una ejecucin
conjuntos de permisos? con un nmero de problemas relativamente bajo. Tambin proporciona un entorno de
1.1 programacin orientado a objetos para el cdigo objeto.
La versin actual de .NET Framework depende ms de la transparencia de seguridad
que las versiones anteriores. La transparencia impide que el cdigo de las aplicaciones
se ejecute con cdigo de infraestructura. .NET Framework utiliza conjuntos de permisos
y permisos de identidad. Los conjuntos de permisos son grupos de permisos. El cdigo
transparente ejecuta comandos que no superan las limitaciones de un conjunto de
permisos. Es an ms limitado cuando se trata de cdigo crtico.
.NET Framework define varios niveles de conjuntos de permisos, que van desde cero
(no existen permisos y no se puede ejecutar cdigo) a total (el cdigo puede tener
acceso total a todos los recursos).
Los permisos de identidad protegen los ensamblados (bibliotecas de cdigo compilado) segn
pruebas, que es informacin acerca del ensamblado. Cada permiso de identidad representa un
tipo concreto de pruebas, o credenciales, que un ensamblado debe tener para poder ejecutarse.
Comprender y administrar los estados de la aplicacin
Un estado de sesin se crea la primera vez que un usuario solicita acceso a una aplicacin
y termina cuando se cierra la sesin, por ejemplo cuando el usuario cierra la sesin. Un
estado de la aplicacin existe desde que un explorador web solicita una pgina web hasta
que se cierra el explorador. La informacin de estado persistente son datos que existen
CONCLUSIN
una vez que termina una sesin. En HTML5, los desarrolladores pueden usar los mtodos
localStorage y sessionStorage de JavaScript trabajar con datos de estado. Adems, AppCache
permite que el usuario cargue datos almacenados normalmente en un servidor incluso
cuando el usuario no est conectado.
La administracin del estado es el proceso de mantener la informacin de la pgina web

Cul es la diferencia entre
durante varias solicitudes de la misma pgina web o de otra. La primera vez que un usuario
estado de sesin y estado solicita acceso a una aplicacin, se crea el estado de la sesin. El estado termina cuando
de la aplicacin? el usuario cierra la sesin.
1.2 Una alternativa para el estado de sesin es el estado de la aplicacin. El estado de la
aplicacin se crea cuando el explorador web enva la primera solicitud para una pgina
LISTO PARA CERTIFICACIN web al servidor web y termina cuando el usuario cierra el explorador.
Cul es la importancia de La informacin de estado persistente son datos que una aplicacin necesita una vez
la informacin de estado que termina la sesin. Muchas aplicaciones web necesitan almacenar datos (hacerlos
persistente? persistentes) para que los usuarios puedan retomar donde quedaron cuando regresan al sitio.
1.2
Almacenar datos de estado mediante almacenamiento local y de sesiones
El Protocolo de transporte de hipertexto (HTTP) es el protocolo que transfiere los datos

en la World Wide Web. Define las acciones que realizan los servidores y exploradores
web en respuesta a los comandos de los usuarios. Por ejemplo, cuando se especifica un
localizador uniforme de recursos (URL) en el campo de direccin de un explorador, el
explorador enva un comando HTTP al servidor web solicitando la pgina web. HTTP
es un protocolo sin estado, es decir, no conserva datos de una sesin para la siguiente.
Al cerrar el explorador despus de visitar un sitio web, los datos no se guardan.
Con objeto de minimizar las limitaciones del protocolo HTTP, los desarrolladores utilizan
Cmo administra HTML5
las cookies, pequeos archivos que contienen informacin sobre el usuario y el sitio web
los datos de estado? visitado, y que se guardan en el equipo del usuario. Cuando un usuario vuelve a un sitio
1.2
visitado, el explorador enva las cookies al servidor web. Las cookies ayudan al servidor
web a recordar a un usuario y personalizar la experiencia de usuario en ese sitio.
Sin embargo, las cookies han demostrado ser un riesgo de seguridad. Adems, si la cantidad
de datos fuera muy grande, como todos los datos se transmiten entre el explorador y el
servidor con cada peticin, se causara una considerable disminucin del rendimiento para
el usuario. En HTML5, los desarrolladores pueden usar el almacenamiento web, que ofrece
ms flexibilidad, conjuntos de datos ms grandes y mejor rendimiento.
El mtodo localStorage permite a los usuarios guardar grandes cantidades de datos de una sesin
para otra sesin (persistencia de datos) y no hay lmite en cuanto a la duracin de la existencia
Qu dos mtodos
de los datos. El mtodo sessionStorage conserva los datos nicamente durante una sesin (hasta
JavaScript/HTML5
permiten que una
que se cierra el explorador), algo que tambin se conoce como almacenamiento por pestaa.
aplicacin almacene Utilizando estos mtodos, datos concretos se transfieren solo cuando se solicitan, de
datos persistentes? forma que es posible almacenar una cantidad de datos relativamente grande sin ralentizar
1.2 la conexin o el sitio.
APPCACHE PARA ARCHIVOS SIN CONEXIN

Otra manera de usar el almacenamiento web consiste en almacenar datos localmente cuando
un usuario no est conectado. En la memoria cach de la aplicacin, o AppCache, se
almacenan recursos como imgenes, pginas HTML, archivos CSS y JavaScript, datos que
normalmente se almacenaran en un servidor. Debido a que los recursos se almacenan en el
disco duro o dispositivo del cliente, los recursos se cargan ms rpido cuando se solicitan.
Al usar AppCache, los desarrolladores usan un archivo de texto llamado manifiesto de
cach para especificar los archivos que un explorador web debe almacenar en cach sin
conexin. Incluso si el usuario presiona el botn Actualizar sin conexin, la aplicacin se
carga y funciona correctamente. Un archivo de manifiesto de cach es parecido al siguiente:
X REF index.html
Obtendr ms informacin StyleSheet.CSS

sobre el uso de AppCache images/dot.png
con JavaScript en la
leccin 8. scripts/Main.js
12|Leccin 1
MS INFORMACIN
Para obtener ms informacin sobre la administracin de estado, y sobre el almacenamiento local y de sesin,
consulte la pgina web Almacenamiento y recuperacin eficaces del estado en http://bit.ly/H9wH3u.
Comprender las interfaces y los gestos tctiles
En un dispositivo de pantalla tctil, el movimiento de un dedo se denomina gesto y la

respuesta por parte de la aplicacin a ese gesto se denomina evento. El desarrollo de
aplicaciones tctiles requiere un conocimiento profundo de cmo los dedos interactan
CONCLUSIN
con la pantalla as como la planeacin para los diferentes tamaos de los dedos. Puede
usar JavaScript para crear aplicaciones tctiles, principalmente mediante los eventos de
touchstart, touchend y touchmove.
En la actualidad, muchos monitores de PC y dispositivos mviles disponen de tecnologa

Qu es un gesto y qu
de pantalla tctil, que facilita a muchos usuarios la interaccin con los dispositivos y
importancia tiene para sus programas. Un sencillo toque con un dedo selecciona un objeto o presiona un botn,
los dispositivos tctiles? eldeslizamiento de un dedo se puede usar para recorrer una lista de fotos en la pantalla
1.3 yunpellizco aleja una imagen.
Cualquier movimiento de los dedos se denomina gesto, que puede conllevar un solo dedo
(un toque, como presionar, pulsar, mantener presionado, deslizar, etc.) o bien un dedo y
el pulgar (dos toques, como pellizcar y estirar, o bien un giro para rotar). La accin que la
aplicacin realiza en respuesta a un gesto se denomina evento tctil. Puede usar JavaScript
para crear eventos tctiles en aplicaciones que los admitan. En JavaScript, los tres eventos
tctiles principales son touchstart, touchend y touchmove.
Al disear aplicaciones para un entorno de pantalla tctil, la sensibilidad del gesto es clave.
X REF
Un rendimiento lento frustrar a la mayora de los usuarios. Incorpore efectos de fsica como
Obtendr ms aceleracin e inercia para crear una interaccin ms fluida entre el usuario yla pantalla.
informacin sobre cmo
crear cdigo JavaScript
Una respuesta visual para interacciones correctas y otras notificaciones es altamente
para interfaces tctiles importante. Esto permite que el usuario entienda si est usando el entorno tctil correctamente.
en leccin 9. Los punto de acoplamiento ayudan a los usuarios a detenerse en una ubicacin dentro
dela interfaz donde se esperaba, incluso si un gesto est un poco fuera de la marca.
Tambin debe tener en cuenta que los usuarios tienen dedos de diferentes tamaos y es un
procedimiento recomendado disear para dedos ms anchos que angostos. Y, por supuesto,
los usuarios sern o diestros o zurdos, de manera que una aplicacin bien diseada utiliza
la navegacin simtrica verticalmente y considera girar la pantalla 90 grados para pasar
de vertical a horizontal o viceversa.

En un entorno multitctil, un usuario debe presionar varios botones o ubicaciones a la vez.
Cules son algunos Es habitual con los juegos en un dispositivo de pantalla tctil, en los que el usuario utiliza
procedimientos a menudo varios dedos y los dos pulgares simultneamente o en rpida sucesin. En esta
recomendados para situacin, los deslizamientos y gestos no funcionan bien, y suelen producir acercamientos,
aplicaciones tctiles alejamientos y desplazamientos involuntarios. La solucin es desactivar el zoom y el
para los que debe desplazamiento en JavaScript.
realizar pruebas? Otro aspecto que se debe probar en una aplicacin multitctil es la reaccin a los eventos
1.3 tctiles. Habr muchos eventos que tienen lugar a la vez, lo que requiere el seguimiento
adecuado de los dedos y la representacin en un bucle para obtener un rendimiento ptimo.
Al desarrollar cualquier aplicacin tctil, asegrese de probar lo siguiente:
Fluidez y capacidad de respuesta general
Pulsar, pellizcar, girar y otros gestos comunes
Desplazamiento controlado
Movimiento panormico controlado
Capacidad de desplazamiento y movimiento panormico deshabilitados

Exactitud de los puntos de acoplamiento
Zoom o desplazamiento no intencionales, especialmente en un entorno multitctil
Reaccin de evento tctil adecuada, especialmente en un entorno multitctil
El diseo y desarrollo de aplicaciones tctiles bien formadas requiere prctica y muchas
pruebas. Si no tiene un dispositivo de pantalla tctil, puede usar eventos MouseTouch y
un emulador o simulador de pantalla tctil. Pruebe Microsoft Surface SDK y el tiempo de
ejecucin para Windows 7, o la herramienta Simulador de Windows de Visual Studio 11.
UN simulador o emulador de pantalla tctil imita un sistema que solo tiene capacidades
tctiles. Existen varios emuladores gratuitos disponibles en lnea.
INFORMACIN SOBRE APLICACIONES TCTILES Y HABILITADAS PARA GESTOS

PREPRESE. Para conocer los distintos tipos de gestos, siga estos pasos:
1. Vaya a la pgina web Interacciones tctiles para Windows en http://bit.ly/GAJjDL.
2. Lea el contenido de la pgina web.
3. Marque la pgina para su uso futuro, o busque y haga clic en el vnculo para descargar
en su equipo una versin en PDF de la pgina web.
4. Cierre la ventana del explorador.
MS INFORMACIN
Puede consultar las especificaciones tctiles de WC3 en http://bit.ly/gBZUjo. Para obtener ms
informacin sobre eventos tctiles y gestos, visite la pgina web Responder a la interaccin
del usuario en http://bit.ly/H7uO5Q.
Aprovechar las habilidades y el contenido HTML5 existentes para aplicaciones

de pizarra o tableta
Una ventaja para desarrolladores con experiencia que deseen crear aplicaciones en
tiempo de ejecucin es que sus conocimientos y cdigo de HTML5 se pueden reusar
en desarrollo de aplicaciones en tiempo de ejecucin.
Un aspecto muy flexible del desarrollo de aplicaciones tctiles en tiempo de ejecucin

es que no requiere una gran curva de aprendizaje para desarrolladores que ya utilizan
Necesita un desarrollador
HTML5 y otros mtodos de desarrollo de aplicaciones. Pueden aplicar sus conocimientos
web adquirir nuevas
habilidades para poder
existentes y el cdigo que tienen a la creacin de aplicaciones en tiempo de ejecucin casi
crear aplicaciones en
de inmediato. La experiencia de un desarrollador web con HTML, CSS, JavaScript y las
tiempo de ejecucin para bibliotecas de JavaScript es una ventaja al empezar a desarrollar aplicaciones tctiles en
dispositivos tctiles? tiempo de ejecucin.
1.1 Adems, los desarrolladores de Microsoft.NET Framework y Silverlight pueden aplicar
suexperiencia con XAML, C# y Visual Basic a proyectos de interfaz de usuario Moderna.
Los programadores de juegos que conozcan bien Microsoft DirectX 11 tambin pueden
aplicar sus habilidades a la creacin de aplicaciones en tiempo de ejecucin.
Depurar y aprobar aplicaciones HTML5

Todas las aplicaciones se deben probar y depurar a fondo para asegurar que funcionan
CONCLUSIN correctamente, y que tienen el mnimo nmero de errores posible antes de su distribucin
e implementacin.
La depuracin de una aplicacin implica detectar, encontrar y corregir errores lgicos

osintcticos. Un error sintctico es un error de escritura en el cdigo o un error similar,
que generalmente se revela durante el tiempo de ejecucin para aplicaciones interpretadas.
Un error lgico ocasiona que la aplicacin se comporte diferente de lo esperado.
14|Leccin 1
LISTO PARA CERTIFICACIN Las pruebas y la depuracin del cdigo son partes integrantes del desarrollo de aplicaciones.
Qu puede hacer La mayora de las herramientas como Visual Studio tienen caractersticas de depuracin
un desarrollador para integradas en el software. Algunos errores son fciles de detectar y corregir, pero otros pueden
contribuir a garantizar requerir horas o incluso das de trabajo, dependiendo de la complejidad de la aplicacin.
que una aplicacin nueva
En cualquier caso, la fase de prueba y depuracin es muy importante por varias razones:
es confiable y tiene el
menor nmero de errores El objetivo es ofrecer una aplicacin til, segura y confiable a los clientes. La depuracin
posible? y las pruebas ayudan a garantizar que se cumplen las tres caractersticas.
1.3 Las aplicaciones de alta calidad logran un mayor xito, lo que puede aumentar los
beneficios e impulsar las ventas de futuras aplicaciones.
Si piensa publicar una aplicacin a travs de la Tienda Windows u otro mercado de
aplicaciones en lnea bien conocido, la tienda requerir una validacin o certificacin
de que la aplicacin se ha probado.
Validar cdigo HTML5
Uno de los primeros pasos en la fase de depuracin y prueba es validar el cdigo

HTML5. Validacin significa comprobar la validez del cdigo. Un validador busca
cualquier cosa que pueda causar que el cdigo se interprete incorrectamente, como
etiquetas que faltan o estn sin cerrar, una declaracin inadecuada de DOCTYPE,
una barra a la derecha, cdigo degradado, etc. (No se preocupe de todo eso en este
momento. La informacin correspondiente est en la leccin 2).
W3C ofrece un servicio de validacin de cdigo para todas las versiones de HTML
activas en su pgina web del servicio de validacin de marcado en http://validator.w3.org/.
El servicio es gratuito para todos los usuarios. Simplemente, haga clic en un vnculo para
cargar un archivo en el servicio, o copie y pegue el contenido del archivo en un cuadro
de texto del sitio web. Despus, haga clic en el botn de comprobacin. El servicio de
validacin comprueba el cdigo y comunica los errores o problemas que se deben arreglar.
Un validador no es lo mismo que un emulador o un simulador. Un validador prueba el
cdigo e indica si hay imprecisiones, para que se puedan hacer los cambios necesarios. Los
emuladores y simuladores simplemente proporcionan un entorno en el que ejecutar cdigo.
W3C tambin proporciona un verificador de vnculos en http://validator.w3.org/checklink.

Este servicio comprueba que todos los vnculos de un archivo HTML son vlidos. El servicio
TOME NOTA
* de validacin de CSS de http://jigsaw.w3.org/css-validator/ comprueba los archivos CSS.
Validar un paquete
Microsoft ofrece una herramienta gratuita llamada Kit para la certificacin de aplicaciones
en Windows para probar aplicaciones locales. El kit es un tipo de validador que prueba
su aplicacin en el equipo antes de que intente empaquetarla y publicarla en la Tienda
Windows.
El Kit para la certificacin de aplicaciones en Windows est incluido en el Kit de desarrollo

de software Windows (SDK) para aplicaciones en tiempo de ejecucin, que est disponible
en el sitio web de Microsoft. Para usar el kit, primero debe empaquetar e instalar la
aplicacin localmente con una herramienta de desarrollo de aplicaciones. A continuacin,
abra el kit, seleccione la aplicacin que desea validar y ejecute el validador. Se muestra un
informe con todos los problemas detectados en la aplicacin. El Kit para la certificacin de
aplicaciones en Windows tambin podra estar disponible como una opcin de men en su
herramienta de desarrollo de aplicaciones.
Corrija los problemas en una herramienta de desarrollo de aplicaciones y, a continuacin,
vuelva a probar la aplicacin. Debe repetir este proceso hasta que la aplicacin est validada.
USAR EL SERVICIO DE VALIDACIN DE MARCADO DE W3C

PREPRESE. Para familiarizarse con el servicio de validacin de marcado de W3C,
siga estos pasos:
1. Vaya a la pgina web del servicio de validacin de marcado de W3C
en http://validator.w3.org/.
2. Haga clic en la pestaa Validate by File Upload (Validar mediante carga de archivo).
3. Haga clic en Examinar.
4. Busque y seleccione un archivo HTML de una de sus aplicaciones de muestra. Haga clic
en Open (Abrir) y en Check (Comprobar).
5. Desplcese por la pgina y lea los errores y las advertencias, si los hay. En la Figura 1-7
se muestra un ejemplo.
Figura 1-7
Errores y advertencias que se
obtienen al intentar validar
una pgina web HTML
6. Si el validador proporciona vnculos a ms informacin sobre los errores o las

advertencias, haga clic en al menos dos de ellos y lea la informacin.
7. Cuando haya terminado, deje el explorador web abierto.
USAR EL SERVICIO DE VALIDACIN DE CSS DE W3C

PREPRESE. Para familiarizarse con el servicio de validacin de CSS de W3C, siga estos
pasos:
1. Vaya a la pgina web del servicio de validacin de CSS de W3C
en http://jigsaw.w3.org/css-validator/ (vea la Figura 1-8).
2. Haga clic en la pestaa Mediante carga de archivo.
3. Haga clic en Examinar.
4. Busque y seleccione un archivo CSS de una de sus aplicaciones de muestra.
Haga clic en Open (Abrir) y en Check (Comprobar).
16|Leccin 1
Figura 1-8
Pgina web del servicio de
validacin de CSS de W3C
5. Desplcese por la pgina y lea los errores y las advertencias, si los hay.
6. Si el validador proporciona vnculos a ms informacin sobre los errores o las
advertencias, haga clic en al menos dos de ellos y lea la informacin.
7. Cuando haya terminado, deje el explorador web abierto.
Publicar una aplicacin en una tienda
Una vez que su aplicacin se haya probado y depurado, y el cdigo se haya validado
CONCLUSIN
o certificado, tiene que realizar unos cuantos pasos ms para que est lista para
cargarse en un lugar de venta como la Tienda Windows. Puede usar Visual Studio 12
o Visual Studio 12 Express para finalizar el proyecto.
La publicacin de su aplicacin en un mercado pblico como la Tienda Windows es el

ltimo paso de toda su planeacin, diseo, codificacin y pruebas. La Tienda Windows
es un mercado global en lnea para aplicaciones en tiempo de ejecucin. Publicar su
aplicacin para distribucin a travs de la tienda puede convertir una buena idea en
unlucrativo negocio.
Otra ventaja de vender a travs de la Tienda Windows es que obtiene acceso a varias
herramientas tiles, como Microsoft Visual Studio Express y Microsoft Expression Blend.
Tambin puede descargar datos de telemetra de aplicaciones personalizados, lo que puede
acelerar considerablemente la creacin e implementacin de aplicaciones.
Antes de publicar su aplicacin en la Tienda Windows, debe hacer lo siguiente:
Obtener una cuenta de desarrollador de la Tienda Windows, y pagar por ella, yreservar
un nombre para su aplicacin. Tambin tendr que editar el archivo demanifiesto de la
aplicacin.
LISTO PARA CERTIFICACIN Revise la lista de comprobacin de envo de la aplicacin en http://bit.ly/HAPmbk.
Cmo se publica una La lista de comprobacin incluye tareas como dar nombre a la aplicacin, elegir los
aplicacin en la Tienda detalles de venta como seleccionar los precios adecuados y la fecha de lanzamiento,
Windows? asignar una clasificacin de edad, describir la aplicacin y otras cosas.
1.4 Utilice el Kit para la certificacin de aplicaciones en Windows para probar
la aplicacin si todava no lo ha hecho.
Tome algunas capturas de pantalla de caractersticas significativas o nicas de

la aplicacin para exhibirla en la tienda. Puede usar la herramienta Recortes,
integrada en Windows 7 y Windows 8, para hacer las capturas de pantalla,
o usar otra herramienta de su eleccin.
Pida a otros probadores o desarrolladores que prueben su aplicacin en tantos
dispositivos y plataformas distintos como sea posible, sobre todo si solo prob
la aplicacin en un simulador o emulador.
Incluya una declaracin de privacidad si su aplicacin rene informacin personal
o ejecuta software con copyright.
TOME NOTA
*
Debe obtener una cuenta Cuando todo est listo, utilice su herramienta de desarrollo de aplicaciones, como Visual
de desarrollador de Studio 12 o Visual Studio 12 Express para Windows 8, para crear un paquete final de la
la Tienda Windows, aplicacin y cargarlo en la Tienda Windows.
y pagar por ella, para Es habitual esperar la aprobacin de la tienda. Si se aprueba, su aplicacin ser certificada
agregar su aplicacin
y se mostrar. Sin embargo, incluso despus de todo su trabajo preparatorio, la aplicacin
al men de la tienda.
podra ser rechazada, lo que significa que debe corregir cualquier problema observado por
personal de la tienda aplicaciones si desea volver a probar y publicar la aplicacin.
FAMILIARIZARSE CON EL MERCADO DE LA TIENDA WINDOWS

PREPRESE. Para obtener ms informacin ms sobre los requisitos de la Tienda
Windows, siga estos pasos:
1. Abra Internet Explorer y vaya a www.bing.com.
2. Realice una bsqueda del mercado de la Tienda Windows y vaya al sitio.
3. Recorra las categoras de aplicaciones. Observe las tres aplicaciones con la clasificacin
ms alta y otras tres aplicaciones que le interesan.
4. Lea la descripcin de cada aplicacin y tome notas que pudieran ayudarle a escribir
una descripcin atractiva de su aplicacin.
5. Tome nota del nmero y la calidad de las capturas de pantalla de esas aplicaciones.
6. Observe la calidad del icono del selector y cualquier otra informacin grfica.
7. Tome nota del precio y la clasificacin de edad de cada aplicacin.
8. Tome nota de cualquier otro detalle que pudiera ayudarle a vender su aplicacin
cuando est lista.
9. Cuando termine, cierre todas las ventanas abiertas.
RESUMEN DE CONOCIMIENTOS
En esta leccin ha aprendido lo siguiente:

HTML5 es el estndar HTML ms reciente y una familia de tecnologas que incluye
HTML, CSS y JavaScript. Aunque el estndar HTML5 no estar terminado hasta
dentro de unos aos, los exploradores web ms modernos ya admiten elementos
de HTML5. El desarrollo de aplicaciones HTML5 para exploradores web y de
La familia HTML5 cuenta con muchas etiquetas de marcado y tecnologas nuevas,
por ejemplo consultas multimedia, geolocalizacin, Modernizr y mucho ms.
Los pasos generales para crear una aplicacin son: planear el proyecto, disear una UI,
actualizar el manifiesto de la aplicacin, escribir cdigo, compilar la aplicacin, depurar
y probar la aplicacin, empaquetar la aplicacin e implementar la aplicacin.
El entorno de Windows en tiempo de ejecucin (WinRT) es la base del sistema
operativo Windows 8. Proporciona la funcionalidad para aplicaciones en tiempo
de ejecucin.
Las aplicaciones en tiempo de ejecucin creadas con JavaScript y que se abren en
Internet Explores se ejecutan en el proceso WWAHost.exe. No es el mismo proceso
que el proceso de host que normalmente ejecuta Internet Explorer.
La finalidad de un paquete de la aplicacin es facilitar la distribucin y la
implementacin. El empaquetado de las aplicaciones empaqueta los archivos
y las carpetas de una aplicacin en un paquete de la aplicacin.
(contina)
18|Leccin 1
.NET Framework proporciona un entorno seguro en el que se pueden ejecutar

aplicaciones JavaScript y HTML5. En el marco de trabajo se utiliza la transparencia de
seguridad para separar los diferentes tipos de cdigo mientras se ejecutan. Tambin
se utilizan conjuntos de permisos y permisos de identidad para controlar el entorno.
Un estado de sesin se crea la primera vez que un usuario solicita acceso a una
aplicacin y termina cuando se cierra la sesin.
Un estado de la aplicacin existe desde que un explorador web solicita una pgina
web hasta que se cierra el explorador.
La informacin de estado persistente son datos que existen una vez que termina una sesin.
En HTML5, los desarrolladores pueden usar los mtodos localStorage y sessionStorage
de JavaScript trabajar con datos de estado.
AppCache es un tipo de almacenamiento web que permite a un usuario cargar datos que
normalmente se almacenan en un servidor incluso cuando el usuario no est conectado.
En un dispositivo de pantalla tctil, el movimiento de un dedo se denomina gesto
y la respuesta por parte de la aplicacin a ese gesto se denomina evento.
El desarrollo de aplicaciones tctiles requiere un conocimiento profundo de cmo
los dedos interactan con la pantalla as como la planeacin para los diferentes
tamaos de los dedos.
Puede usar JavaScript para crear aplicaciones tctiles, principalmente mediante
los eventos de touchstart, touchend y touchmove.
Una ventaja para desarrolladores con experiencia que deseen crear aplicaciones
en tiempo de ejecucin es que sus conocimientos y cdigo de HTML5 se pueden
reusar en desarrollo de aplicaciones en tiempo de ejecucin.
Todas las aplicaciones se deben probar y depurar a fondo para asegurar que
funcionan correctamente, y que tienen el mnimo nmero de errores posible antes
de su distribucin e implementacin.
Una vez que su aplicacin se haya probado y depurado, y el cdigo se haya validado
o certificado, tiene que realizar unos cuantos pasos ms para que est lista para
cargarse en un lugar de venta como la Tienda Windows. Puede usar Visual Studio 11
o Visual Studio 11 Express para finalizar el proyecto.
1. HTML es un lenguaje de __________ , no un lenguaje de programacin, lo que
significa que HTML utiliza etiquetas de marcado como <body> y <h1> para describir
partes de una pgina web.
2. ____________________ define los estilos de HTML en un archivo independiente, por
lo que resulta muy fcil cambiar las fuentes, los tamaos de fuente y otros atributos.
3. Windows 8 utiliza la interfaz de usuario (UI) __________ .
4. __________ es la base del sistema operativo Windows 8. Est formado por capas que
proporcionan funcionalidad a las aplicaciones en tiempo de ejecucin y al shell de
Windows.
5. _____________ es el proceso de empaquetar una aplicacin y sus diversos archivos en
un contenedor de la aplicacin, lo cual facilita distribuir e implementar la aplicacin.
El paquete de la aplicacin es el resultado de este proceso.
6. El estado ____________ se crea cuando el explorador web enva la primera solicitud
para una pgina web al servidor web y termina cuando el usuario cierra el explorador.
7. El mtodo ___________ conserva los datos nicamente durante una sesin (hasta que se
cierra el explorador), algo que tambin se conoce como almacenamiento por pestaa.
8. Cualquier movimiento del dedo se conoce como ________, que puede implicar un
solo dedo (un toque) o bien de un dedo y el pulgar (dos toques).
9. Un ________ busca cualquier cosa que pueda causar que el cdigo se interprete
incorrectamente, como etiquetas que faltan o sin cerrar, una declaracin inadecuada
de DOCTYPE, una barra a la derecha, cdigo degradado, etc.
10. El ____________ es un mercado global en lnea para aplicaciones en tiempo
de ejecucin.
Varias opciones
Rodee con un crculo la letra correspondiente a la mejor respuesta.
1. Cules tres componentes son los principales elementos de la familia HTML5?
a. XML
b. HTML
c. CSS
d. JavaScript
2. JavaScript es un tipo de:
a. Compilador de programas
b. Lenguaje de marcado
c. Lenguaje de scripting
d. Validador
3. Todas las opciones siguientes son verdaderas respecto a HTML5 excepto:
a. Requiere Windows 8
b. Puede usarse para crear aplicaciones web y aplicaciones de PC y dispositivo
c. Es independiente de la plataforma
d. Se basa en un estndar abierto
4. Qu entorno de sistema operativo permite que un desarrollador obtenga acceso
aunacmara o cmara web?
a. localStorage
b. WinRT
c. el estado de la sesin
d. Modern UI
5. Usted est desarrollando una aplicacin en tiempo de ejecucin y quiere que la
aplicacin obtenga acceso a otra aplicacin. Dnde se declara la interaccin?
a. Manifiesto de la aplicacin
b. CSS
c. En la parte superior del archivo HTML
d. En ninguna parte, no es necesario declarar la interaccin
6. Cul de las siguientes opciones se utiliza para crear un paquete de aplicacin?
a. JavaScript
b. CSS
c. DOM
d. Una herramienta de desarrollo de aplicaciones
7. Qu API permite que los programas y scripts actualicen contenido, estructura
yestilos sobre la marcha?
a. JavaScript
b. WinRT
c. DOM
d. RTE
8. AppCache, localStorage y sessionStorage son formas de:
a. Almacenamiento web
b. Comandos HTML
c. Estndares
d. Espacios de nombres
20|Leccin 1
9. Cul de las siguientes opciones generalmente no funciona bien con entornos

multitctiles y debe deshabilitarse? (Elija dos.)
a. Seguimiento
b. Zoom
c. Desplazamiento
d. Gesticulacin
10. Qu herramienta es un tipo de validador que pone a prueba su aplicacin en el
equipo antes de que intente empaquetarla y publicarla en la Tienda Windows?
a. WinRT
b. Windows 8
c. Servicio de validacin de marcado W3C
d. Kit para la certificacin de aplicaciones en Windows
Verdadero/Falso
VF1.
Una interfaz de programacin de aplicaciones (API) es una lista de
instrucciones que permite que un programa se comunique con otro programa.
VF2.
Un procedimiento recomendado es publicar su aplicacin sin validacin para
realizar pruebas en lnea en directo.
VF3.
Un emulador analiza documentos HTML y CSS, en busca de errores.
VF4.
Un procedimiento recomendado es disear aplicaciones tctiles para dedos ms
anchos que angostos.
VF5.
Una aplicacin independiente de la plataforma puede ejecutarse en diferentes
sistemas operativos de dispositivos mviles y de escritorio.
Escenario 1-1: Comprender las nuevas caractersticas de la familia HTML5
Su gerente, Marylyne, quiere informarse sobre la familia HTML5 para decidir si la empresa
debe empezar a usarla en nuevos proyectos. Le pide que le proporcione una lista de cinco o
seis caractersticas nuevas. Qu elementos incluye en la lista?
Escenario 1-2: Crear una aplicacin

Marylyne se acerca a usted nuevamente, esta vez para saber qu implica la creacin de una
aplicacin HTML5. Le pide que proporcione un esquema. Qu pasos incluye en el esquema?
Evaluacin de aptitudes
Escenario 1-3: Compartir consejos de desarrollo de aplicaciones tctiles
Antoine est trabajando en una aplicacin tctil y le pide consejos de desarrollo y elementos
que debera asegurarse de probar en su tableta. Qu le dice?
Escenario 1-4: Publicar una aplicacin en la Tienda Windows

Sammy cre su primera aplicacin y desea publicarla en la Tienda Windows. Cules son
los tres pasos preparatorios que debe dar?
de usuario mediante
HTML5: texto, grficos
y multimedia

del examen MTA
Comprender los principios
bsicos de HTML
HTML5 para mostrar contenido HTML5 para mostrar contenido
de texto de texto.
HTML5 para mostrar grficos HTML5 para mostrar grficos.
HTML5 para reproducir archivos HTML5 para reproducir
multimedia multimedia.
TRMINOS CLAVE
atributo elemento figure
elemento audio atributo global
elemento canvas anidamiento
cdec imagen de trama
compresin representar
degradacin Scalable Vector Graphics (SVG)
tipo de documento etiquetas
elemento vlido
etiqueta vaca imagen vectorizada
entidad compresin de vdeo
elemento figcaption elemento vdeo
21
22 | Leccin 2
Los desarrolladores del sitio web de Malted Milk Media le pidieron que estudie
el nuevo marcado disponible en HTML5. Estn particularmente interesados en la
etiquetas relacionadas con multimedia y grficos. Su tarea es aprender todo lo que
pueda sobre las nuevas etiquetas de marcado HTML5, as como preparar breves
descripciones y ejemplos de cada una de ellas.
Comprender los principios bsicos de HTML
En el Lenguaje de marcado de hipertexto (HTML) se utiliza marcado para describir

el contenido que se va a mostrar en una pgina web. Un elemento es la combinacin
CONCLUSIN de etiquetas y el contenido que encierran. Podra tener que usar caracteres especiales
en una pgina web, lo que requiere la codificacin de los caracteres. Por ltimo, cada
pgina web debe tener la declaracin doctype en la parte superior de la pgina.
El Lenguaje de marcado de hipertexto (HTML) se conoce como lenguaje de marcado

porque se usa para describir (marcar) los fragmentos del contenido que se va a mostrar
en una pgina web. En una pgina web con marcado hay etiquetas, palabras clave que
contribuyen a dar estructura a una pgina HTML. Un poco ms adelante obtendr ms
informacin sobre las etiquetas. La clave para usar HTML es saber qu etiquetas usar y
cundo usarlas. La combinacin de contenido, etiquetas, tal vez grficos, multimedia, etc.,
es lo que crea una pgina web.
Es fcil identificar un documento HTML, porque tiene la extensin de archivo .htm
o.html. Cuando un explorador web o dispositivo mvil, por ejemplo un smartphone,
abreun archivo HTML, representa (interpreta y reproduce) el contenido de la pgina.
Marcado bsico y estructura de la pgina
Todas las pginas HTML contienen etiquetas. Una etiqueta es una palabra clave entre
corchetes angulares. La mayora de las etiquetas se utilizan en pares: una se conoce
como la etiqueta de apertura o inicio, y la otra es la etiqueta de cierre o final. En
un par de etiqueta se distingue entre maysculas y minsculas, y en una etiqueta
de cierre se deben usar maysculas o minsculas de la misma forma que en la de
apertura. Una etiqueta de cierre es idntica a una etiqueta de apertura, excepto
quelade cierre contiene una barra diagonal antes de la palabra clave.
Las etiquetas rodean contenido y lo definen. Por ejemplo, este marcado crea un
encabezamiento de primer nivel:
<h1>Pet Care 101</h1>
HTML tambin utiliza algunas etiquetas individuales, por ejemplo <br /> para un salto
de lnea y <hr /> para una lnea horizontal. En HTML4, estas etiquetas se denominan
etiquetas vacas porque no requieren una etiqueta de cierre. HTML5 es menos restrictivo
que HTML4. No es necesario incluir etiquetas de cierre para todos los elementos (aunque
algunos elementos todava requieren las etiquetas inicial y final), y las etiquetas se pueden
escribir en maysculas o minsculas. Con todo, en este libro se usan etiquetas de apertura
y cierre, y solo minsculas, en aras de la homogeneidad.
Hay muchas etiquetas disponibles para las pginas HTML. Algunas de las etiquetas ms
usadas se enumeran en la tabla 2-1. Las cuatro primeras (<html>, <head>, <title> y<body>)
son necesarias en todas las pginas web.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 23
Tabla 2-1
Etiquetas HTML habituales Etiqueta Descripcin
Identifica la pgina como documento HTML. La etiqueta <html>
<html>
abarca todo el contenido de la pgina excepto la declaracin
doctype de la parte superior.
Contiene el marcado y el cdigo que utiliza el explorador, como
<head>
scripts que agregan interactividad y palabras clave que ayudan a
los motores de bsqueda a encontrar la pgina. La etiqueta <head>
tambin puede contener estilos de formato para la pgina.
Muestra el ttulo de la pgina web, que aparece en la parte
<title>
superior del explorador, generalmente en la pestaa de la pgina
en los exploradores con pestaas.
Rodea el contenido que est visible en la pgina web cuando
<body>
sevisualiza en un explorador web.
<a href=URL> Se suele usar para unir una URL a texto o una imagen. Tambin
puede crear un anclaje con nombre dentro de un documento
paraestablecer vnculos a secciones del documento.
Aplica negrita al texto.
<b>
Crea un encabezado, que puede ser de primer nivel (h1) y llegar

<hx>
hasta el sexto nivel (h6).
Inserta una imagen desde un archivo u otro sitio web.
<img>
<p> Define parte del texto como un prrafo.
Un par de etiquetas o una etiqueta vaca tambin se denomina un elemento. Un elemento

puede describir contenido, insertar grficos y crear hipervnculos.
USAR ATRIBUTOS
No todas las etiquetas describen datos por s solas, o al menos no con el detalle suficiente
para la representacin. Por ello, algunos elementos deben tener atributos, modificadores
de los elementos HTML que proporcionan informacin adicional.
Los atributos son fciles de usar y son solo extensiones de los elementos. Puede agregar
atributos a elementos utilizando esta sintaxis bsica:
<tag attribute="value">
Observe que tanto el atributo como su valor estn dentro de una etiqueta. Debe incluir
un atributo dentro de una etiqueta para que el explorador sepa cmo tratar el atributo.
Un buen ejemplo de atributo es la creacin de un hipervnculo, como se indica a
continuacin:
<a href="http://www.example.com">Esto es un vnculo.</a>
El explorador utiliza la combinacin del elemento de anclaje y el atributo href para
mostrar un hipervnculo. En la Figura 2-1 se muestra cmo interpreta un explorador
webeste fragmento de marcado.
Un editor de pginas web o una herramienta de desarrollo de aplicaciones de calidad

debe mostrar los atributos que se pueden usar con un elemento, con lo que se gana
TOME NOTA
* tiempo. La herramienta tambin debe ayudar a depurar el marcado si se utiliza un atributo
incorrectamente.
24 | Leccin 2
Figura 2-1
Un hipervnculo es resultado
de usar el elemento de
anclaje con el atributo href.
Dos de los usos ms comunes de los atributos son la creacin de hipervnculos y la inclusin
de grficos sencillos. Va a aprender a trabajar con grficos ms adelante en esta leccin.
HTML5 dispone de varios atributos globales, que se pueden usar con cualquier elemento
HTML5. Ejemplos de atributos globales son id, lang y class, entre muchos otros.
ANIDAR ELEMENTOS
La forma en que un explorador web muestra el cdigo HTML depende de cmo se
combinen los elementos, sus atributos (si los hay) y el contenido. Cuando se aplican
dos o ms elementos al mismo bloque de texto, los pares de etiquetas se deben anidar
correctamente para que funcionen como se desea. Anidar significa colocar un elemento
dentro de otro. Este es un ejemplo de anidamiento correcto:
<p>Asegrese de que su mascota tiene <i><b>agua abundante</b></i> cuando hace calor.</p>
En este caso, queremos destacar las palabras agua abundante, por lo que estn en cursiva
y negrita mediante el uso de las etiquetas <i> y <b>. Si la etiqueta de cierre </b> se colocara
detrs de la etiqueta de cierre </p> (como se muestra a continuacin), las palabras agua
abundante cuando hace calor estaran en negrita, pero solo agua abundante estara en
cursiva. El resultado sera algo extrao, como se muestra en la Figura 2-2.
<p>Asegrese de que su mascota tiene <i><b>agua abundante</i>
cuando hace calor.</p></b>
La regla para anidar etiquetas es que las etiquetas anidadas se deben cerrar antes que
Figura 2-2
Anidamiento de etiquetas
incorrecto
sus etiquetas primarias. Si volvemos a fijarnos en el ejemplo correcto, se observa que

primero se abre el elemento de prrafo, seguido por el elemento de cursiva y, despus,
por el elemento de fuente. A continuacin, se cierra el elemento de negrita, seguido por
el elemento de cursiva y, finalmente, el elemento de prrafo. Los elementos de cursiva y
negrita estn completamente anidados dentro del elemento de prrafo.
COMPRENDER LAS ENTIDADES

Una entidad es un carcter especial, como el smbolo de dlar, la marca comercial registrada
(una R mayscula dentro de un crculo) y letras con tilde. El proceso de inclusin de entidades
en una pgina web se denomina codificacin de caracteres. En la actualidad, los exploradores
y las herramientas de edicin web tienen capacidad para manipular los caracteres especiales
que aparecen en el teclado, por ejemplo los que estn en la parte de arriba de las teclas
numricas. En la mayora de los casos, esos caracteres se representan sin problemas.
Con algunos exploradores, no se muestra el carcter esperado y, en su lugar, aparece un
smbolo o un carcter sin sentido. Esas situaciones son fciles de controlar. Cada carcter
especial que se puede reproducir en una pgina web tiene un nombre de entidad y un
cdigo numrico. Se puede cualquiera de los dos en una pgina web. Con todo, suele
ser ms seguro representar smbolos como el de marca registrada mediante una entidad
numrica para asegurar la representacin correcta en muchos exploradores diferentes.
Una entidad comienza con una Y comercial (&) y termina con un punto y coma (;). Por
ejemplo, la entidad ® representa el smbolo de marca registrada, y su cdigo numrico es
®. Cuando un explorador encuentra una Y comercial, trata de determinar si los caracteres
que la siguen pertenecen a una entidad. Si es as, el explorador muestra el carcter especial en
lugar de la entidad. La Tabla 2-2 contiene varias entidades que se utilizan a menudo.
Tabla 2-2
Ejemplos de entidades Smbolo Descripcin Nombre de la entidad Cdigo
para HTML5
Copyright © ©
Grado ° °
$ Dlar &dollar; $
% Porcentaje &percnt; %
Marca registrada ® ®
Otro aspecto importante de la codificacin de caracteres en HTML5 es que se debe usar

codificacin UTF-8 siempre que sea posible, porque la mayora de los exploradores
utilizan UTF-8. Por ello, debe agregar la siguiente declaracin al elemento de encabezado:
<meta charset="UTF-8">
La especificacin HTML5 requiere que todo el elemento meta quepa en los primeros
1.024 bytes del documento, razn por la que se debe incluir en la parte superior de la
pgina en el elemento de encabezado.
MS INFORMACIN
Consulte la lista de entidades admitidas en HTML5 en http://dev.w3.org/html5/html-author/charref.
COMPRENDER EL ELEMENTO DOCTYPE

doctype es una declaracin que se encuentra en la parte superior de todos los documentos
HTML. Cuando un explorador web lee una declaracin de doctype, el explorador supone
que todo en la pgina web usa el lenguaje o las reglas especificadas en la declaracin.
En HTML4, todas las declaraciones de <!DOCTYPE> requieren una referencia a una DTD,
acrnimo de Definicin de tipo de documento. La DTD es simplemente un conjunto de
reglas que ayudan a un explorador web a convertir etiquetas y contenido en las pginas
que se ven en la Web. Hay varias DTD diferentes que una pgina web HTML4 puede usar.
Como consecuencia de cmo se cre HTML5, no necesita una referencia a una DTD.
En HTML4, la declaracin de doctype especifica la DTD y el lenguaje de la pgina
HTML, y es bastante compleja. Vea este ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.example.com/TR/xhtml11/DTD/
xhtml11.dtd">
26 | Leccin 2
La declaracin de doctype en HTML5 es bastante ms sencilla:

<!doctype html>
El doctype de HTML5 no distingue entre maysculas y minsculas, por lo que la palabra
clave doctype puede estar en maysculas o minsculas. Este doctype simplificado
contribuye a que las pginas HTML5 se puedan ver fcilmente en un explorador web
enPC o en un dispositivo mvil. HTML5 se ha diseado para tener gran compatibilidad
con exploradores nuevos y antiguos, as como el entorno de dispositivos mviles.
EXPLORAR EL MARCADO DE UNA PGINA WEB SENCILLA

Un ejemplo de marcado y contenido para una pgina web HTML5 sencilla tiene este aspecto:
<!doctype html>
<html>
<head>
<title>78704 Pet Services</title>
</head>
<body>
<p>Su perro es un amigo para toda la vida. Por qu no
ofrecerle los mejores cuidados posibles?</p>
</body>
</html>
Las lneas en blanco entre partes de la pgina, por ejemplo entre la declaracin de doctype
y la etiqueta <html>, no aparecen en una pgina web. Tampoco se ve la aplicacin de
sangra, por ejemplo en los prrafos. Observe que a los elementos de prrafo se aplica
sangra respecto a las etiquetas <body>. La aplicacin de sangra y las lneas en blanco
simplemente ayudan a que sea ms fcil leer el marcado en una herramienta de edicin.
La Figura 2-3 muestra la pgina web del formato HTML anterior representada.
Figura 2-3
Una pgina web sencilla
representada en un
explorador
Recuerde que, como vimos en la leccin 1, puede usar el servicio de validacin de W3C
en http://validator.w3.org para comprobar y validar cdigo HTML. Si una pgina web
sigue las especificaciones a la perfeccin, se considera vlida.
CREAR UNA PGINA WEB SENCILLA

PREPRESE. Para crear una pgina web sencilla y ver qu efecto tienen la falta de
etiquetas, la anidacin y las entidades, siga estos pasos:
1. En el equipo o una unidad flash, cree una subcarpeta en la carpeta Mis documentos,
en la que se guardarn los archivos con los que trabaje en las lecciones de este libro.
Es la carpeta de trabajo. Puede llamar a la subcarpeta HTML5 o algo parecido.
2. Abra un editor de pginas web, una herramienta de desarrollo de aplicaciones

osencillamente un editor de texto como el Bloc de notas y escriba lo siguiente:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Cuidados y alimentacin</h1>
<p>Su perro es un amigo para toda la vida. Por qu no ofrecerle los mejores cuidados posibles?</p>
<p>Asegrese de que su mascota tiene <i><b>agua abundante</b></i> cuando hace calor.
Si saca a su perro a dar un paseo largo, lleve un plato de bolsillo y agua embotellada.
Encontrar platos para agua especiales en muchas tiendas de mascotas por 10 $
o menos.</p>
</body>
</html>
Hay una amplia gama de editores y herramientas de desarrollo que se pueden usar.
El Bloc de notas es el editor de texto integrado en Windows, pero puede descargar
Notepad++ gratuitamente desde la Web. Notepad+++ tiene funciones que facilitan la
creacin y edicin de documentos HTML. TextWrangler tiene funciones parecidas y
TOME NOTA
* est diseado para sistemas Macintosh. Otros editores HTML gratuitos son HTML-Kit
y KompoZer. Entre las herramientas de desarrollo estn Microsoft Visual Studio, Visual
Studio para Web, Microsoft Web Matrix y Microsoft Expression Web, y muchos otros.
Todas estas aplicaciones permiten crear y editar archivos HTML.
3. Guarde el archivo como L2-pet-orig.html en la carpeta de trabajo que cre en Mis

documentos.
4. Vaya a la carpeta de trabajo y abra la pgina HTML en un explorador web. Debe tener
un aspecto parecido a la Figura 2-4.
Figura 2-4
Pgina web Cuidados
y alimentacin de
78704 Pet Services
5. Para ver qu efecto tiene que falte una etiqueta de un par de etiquetas, elimine la
etiqueta de cierre </b> despus de agua. Cree un archivo nuevo para probar los
cambios, gurdelo como L2-mascotas-test.html y abrirlo en el explorador. Ahora, todo
el contenido desde agua abundante al final del documento est en negrita.
En Internet Explorer 9, el modo de explorador se puede abrir presionando F12. Este modo
permite editar pginas sin salir del explorador. Adems, puede hacer clic en Modo de
TOME NOTA
* documento en la barra de mens y, a continuacin, seleccionar, una versin anterior del
explorador para ver cmo se representa una pgina.
28 | Leccin 2
6. Para ver qu efecto tiene un anidamiento incorrecto, mueva la etiqueta de cierre </i>
de forma que est despus de la ltima etiqueta </p>. Vuelva a guardar L2-mascotas-
test.html y a verlo en el explorador. Todo el contenido desde agua abundante al final
del documento est en negrita y cursiva, como se muestra en la Figura 2-5.
Figura 2-5
Efectos del anidamiento
de etiquetas incorrecto
7. Cierre el archivo L2-mascotas-test.html en el editor y abra L2-pet-orig.html.

8. Agregue una lnea de copyright a la parte inferior de la pgina. Para hacerlo, presione
Intro unas cuantas veces despus de la etiqueta de cierre </p> y escriba <p>©
2012</p>. Cambie el ao en curso a 2012, si es necesario. Presione Intro para
agregar una lnea en blanco. Asegrese de que la lnea de copyright est encima
delasetiquetas de cierre </body> y </html>.
9. Vuelva a crear un archivo nuevo guardando L2-pet-test.html como L2-pet-copyright.
html y valo en el explorador. Aparece el smbolo del crculo con la C como se
muestra en la Figura 2-6? Si no es as, cambie © a ©, guarde el archivo
yvisualcelo nuevamente.
Figura 2-6
En la esquina inferior
izquierda aparece un
smbolode copyright
Al visualizar las pginas web que est editando, es mejor usar varios exploradores web para
asegurarse de que el marcado se representa correctamente para la mayora de los usuarios.
Algunas herramientas de edicin permiten seleccionar un explorador en una lista para obtener
TOME NOTA
* la vista previa de las pginas web. Si su herramienta no ofrece esa opcin, tendr que instalar
tres o cuatro exploradores distintos y abrir las pginas web en cada uno de ellos.
10. Vaya a la pgina web del servicio de validacin de marcado de W3C en

http://validator.w3.org/. Cargue L2-pet-copyright.html y haga clic en Check (Comprobar)
para que el servicio lo compruebe. Corrija los errores que detecte el servicio de
validacin, por ejemplo etiquetas que faltan o errores ortogrficos, si los hay.
11. Es probable que haya recibido un mensaje de error de codificacin de caracteres. Para
corregirlo, abra L2-pet-copyright.html en la herramienta de edicin e introduzca <meta
charset="UTF-8"> en el elemento de encabezado, en su propia lnea, justo antes del ttulo.
<head>
</head>
12. Guarde el archivo, vuelva a cargarlo en el comprobador de validacin y ejecute

lacomprobacin. El corrector debe indicar que el archivo es vlido.
13. Deje la herramienta de edicin y el explorador web abiertos si va a continuar
conlasiguiente seccin.
MS INFORMACIN
Si tiene dificultades con los temas de esta seccin, considere la posibilidad de realizar tutoriales como
los que se ofrecen en el sitio web W3Schools.com.
Elegir y configurar etiquetas HTML5 para mostrar contenido de texto
HTML5 usa la mayora de los mismos elementos y atributos especificados en HTML4.

Ha introducido algunas etiquetas nuevas, modificado el uso preferido de otras y ya
CONCLUSIN no admite ciertos elementos. Los nuevos elementos relacionados de texto incluyen
comando, marca, tiempo, medidor y progreso. Algunos de los elementos degradados
son basefont, center, font y strike.
Todos los elementos tratados en la primera seccin de esta leccin funcionan en HTML5,
aunque se han usado durante aos en las versiones anteriores de HTML. En su mayor parte,
HTML5 cambia muy poco de la sintaxis HTML. En consecuencia, los desarrolladores
pueden seguir utilizando la mayora de los elementos que siempre han usado. Algunos
elementos tienen la misma etiqueta pero una funcionalidad ligeramente distinta, lo que
vamos a describir muy pronto.
X REF HTML5 incluye tambin muchos elementos nuevos que aumentan la funcionalidad de las
pginas web o simplifican el marcado. Entre ellos estn elementos multimedia como audio
El marcado HTML5 y vdeo, y elementos que hacen que la estructura de una pgina web parezca ms intuitiva.
de diseo, creacin de Las etiquetas relacionadas con la estructura incluyen elementos para secciones de pgina,
secciones y creacin de encabezados, pies de pgina, navegacin e incluso barras laterales. Si crea formularios
formularios se describe web, las nuevas caractersticas de formularios facilitan mucho la creacin y validacin.
en la leccin 3. Con todo, esta seccin se centra en el marcado HTML5 para texto.
Elementos de texto de HTML4 con nuevo significado o funcionalidad
Algunos elementos de HTML4 relacionados con el texto tienen un significado o

una funcin ligeramente diferente en HTML5. Esos elementos son <b>, <i>, <strong>,
<em> y <small> El elemento <b> se debe usar ahora para desplazar texto sin expresar
importancia, por ejemplo para palabras clave o nombres de producto. El elemento <i>
indica ahora contenido con una voz o un tono alternativo, por ejemplo texto hablado.
El elemento <strong> indica gran importancia, mientras que el elemento <em> indica
nfasis. El elemento <small> debe usarse para la letra pequea, como la lnea de
copyright.
30 | Leccin 2
Veamos algunos de los elementos de texto de HTML4 que tienen diferente significado
ofuncionalidad en HTML5:
<b>: este elemento, de uso frecuente, siempre ha representado la negrita y a menudo
se utilizaba para dar nfasis o transmitir importancia. El W3C sugiere que ahora
seuse para indicar texto con un estilo destacado, sin transmitir importancia.
Use<b> para palabras clave, nombres de producto y elementos que permitan realizar
una accin, por ejemplo elementos en los que se hace clic o se presionan en una lista
deinstrucciones. Por ejemplo:
<p>Haga clic en el botn <b>Comprobar</b> y, a continuacin, en
<b>Aceptar.</b> </p>
<i>: el elemento de cursiva se utiliza ahora para el texto con una voz o un tono
alternativo. Podra ser texto hablado, pensamientos o algo similar que no transmite
importancia o nfasis. Tambin puede incluir trminos tcnicos y palabras extranjeras
transcritas. Por ejemplo:
<p><i>Tiene un buen corazn,</i> pens.
<strong>: el elemento strong se usa para dar importancia, cuando un contenido es ms
importante que las palabras adyacentes. Por ejemplo:
<p>Courtney llev la <strong>misma</strong> ropa al trabajo tres das seguidos.</p>
<em>: el elemento nfasis indica un nfasis destacado. Por ejemplo:
<p>Debe validar el marcado HTML <em>siempre</em>
antes de compartirlo con otros.</p>
<small>: el elemento small debe usarse para la letra pequea o comentarios al margen.
Resulta til para lneas de copyright o para agregar a una imagen una lnea con su
procedencia. Por ejemplo:
<p><small>Copyright 2012 XYZ
Corporation</small></p>
Las funciones previstas para algunos de estos elementos en HTML5 pueden ser confusas,
como saber cundo se debe usar el elemento cursiva. El mejor enfoque es esforzarse por
lograr consistencia dentro de una pgina o sitio web y observar cmo otros desarrolladores
usan los mismos elementos.
MODIFICAR ETIQUETAS RELACIONADAS CON TEXTO EN UNA PGINA WEB

PREPRESE. Para modificar etiquetas en una pgina web, siga estos pasos:
1. En la herramienta de edicin, abra L2-pet-copyright.html si no est abierto.
2. En el prrafo siguiente, reemplace las etiquetas de cursiva y negrita con el elemento strong.
<p>Asegrese de que su mascota tiene <i><b>agua
abundante</b></i> cuando hace calor.</p>
El marcado resultante tendr este aspecto:
<p>Asegrese de que su mascota tiene <strong>agua
abundante</strong> cuando hace calor.</p>
Observe que el elemento strong se ver como el elemento de negrita. El W3C prefiere
el uso de <strong> en lugar de <b>, aunque parecen tener resultados casi idnticos.
3. Agregue etiquetas <small> de apertura y cierre a la lnea de copyright, correctamente
anidadas dentro de las etiquetas de prrafo.
4. Guarde el archivo como L2-pet-modified.html y visualcelo en un explorador web.
Veala Figura 2-7.
Figura 2-7
Uso de las etiquetas
<strong> y <small>
5. Deje la herramienta de edicin y el explorador web abiertos si va a continuar con

lasiguiente seccin.
Nuevos elementos de texto en HTML5
Entre los nuevos elementos relacionados con texto en HTML5 estn <command>,
<mark> y <time>. El elemento <command> crea un botn de comando. Cuando el
usuario hace clic en un botn de comando, se ejecuta un comando. El elemento
<mark> resalta texto en una pgina, de forma similar a la caracterstica de resaltar
en Microsoft Word. El elemento <time> muestra la fecha y hora legible en formato
legible para mquinas, por ejemplo 10:10, 19 de julio de 2012. Es muy til para
blogs y calendarios, y podra contribuir a que los motores de bsqueda ofrezcan
mejores resultados cuando la fecha y hora forman parte de los criterios de bsqueda.
LISTO PARA CERTIFICACIN Veamos algunos de los nuevos elementos de texto en HTML5, junto con ejemplos:
Qu elementos HTML
relacionados con texto <command>: el elemento de comando se utiliza para definir un botn de comando en
sonnuevos en HTML5? el que los usuarios hacen clic para invocar un comando. Con el elemento de comando
2.1 se pueden usar muchos atributos: tipo, etiqueta, ttulo, icono, deshabilitado, activado
ygrupo de opcin. Por ejemplo:
<menu label="Gnero musical">
<command type="radio" radiogroup="musicgenre"
label="Cartula">
<command type="radio" radiogroup="musicgenre" label="Popular">
<command type="radio" radiogroup="musicgenre" label="Tradicional">
</menu>
<mark>: el elemento de marca es muy til para resaltar texto en una pgina. Se puede
usar en una pgina de resultados de bsqueda, por ejemplo, o para destacar un bloque
de texto en el que se desea que se fije el lector. Por ejemplo:
<p>Desde que empec a correr hace unos meses, he <mark style="background-
color:yellow;">adelgazado 15 kilos</mark>.</p>
<time>: el elemento de tiempo indica contenido que es una hora o fecha, que se puede
hacer legible por mquinas con el atributo datetime. El elemento de tiempo define la
hora con un reloj de 24 horas y la fecha en el calendario gregoriano. Una ventaja de
hacer que la fecha y la hora sean legibles por mquinas en una pgina web es que se
contribuye a que los motores de bsqueda produzcan mejores resultados de bsqueda.
32 | Leccin 2
Por ejemplo:
<time datetime="2013"> significa el ao 2013
<time datetime="2013-04"> significa abril de 2013
<time datetime="04-15"> significa el 15 de abril (cualquier ao)
Otros dos nuevos elementos son medidor y progreso. El elemento de medidor indica
contenido que es una fraccin de un intervalo conocido, por ejemplo el uso del disco.
Elelemento de progreso indica el progreso de una tarea hacia la finalizacin.
USAR EL ELEMENTO DE MARCA

PREPRESE. Para usar el elemento de marca para resaltar texto, siga estos pasos:
1. En la herramienta de edicin, abra L2-pet-modified.html si no est abierto.
2. Modifique el prrafo siguiente insertando el elemento de marca en torno al texto
amigo para toda la vida.
<p>Su perro es un <mark style="background-color:orange;">
amigo para toda la vida</mark>.
3. Cree otro archivo guardndolo como L2-pet-mark.html y visualcelo en un explorador

web. En la Figura 2-8 se muestra el texto resaltado.
Figura 2-8
El elemento mark resalta
partes del texto
4. Deje la herramienta de edicin y el explorador web abiertos si va a continuar con la

siguiente seccin.
Elementos de texto que no se utilizan en HTML5
Al mismo tiempo que hay nuevos elementos disponibles, el W3C seala otros
elementos que dejarn de usarse porque su funcionalidad ya no es til. La eliminacin
de elementos de la lista de elementos HTML disponibles se conoce como degradacin.
Lo mismo puede decirse de los atributos.
X REF
La degradacin puede deberse a que un nuevo elemento reemplaza la funcionalidad de
En la leccin 4 se un elemento anterior, o la preferencia de un nuevo mtodo de formato sobre un elemento
explican los aspectos anterior. Un ejemplo de esto ltimo es el formato con hojas de estilo en cascada. Si se
esenciales de CSS, y utiliza CSS para cambiar la apariencia del texto, las imgenes y otro contenido web se
la diferenciacin de diferencia el estilo del contenido. El W3C lleva tiempo indicando a los desarrolladores
presentacin (estilo) que utilicen CSS para controlar el formato de las pginas web en lugar de usar formato
ycontenido. local. No hay duda de que es el mtodo que se debe usar en HTML5.
La razn es que resulta muy fcil cambiar en CSS estilos que se aplican a toda una pgina
web o incluso todo un sitio web. El uso de estilos individuales incluso en una sola pgina
web puede dar mucho trabajo cuando es necesario realizar cambios.
Los siguientes elementos HTML se consideran degradados y no se admiten en pginas HTML5:
<acronym>: define acrnimos en HTML4 que se pueden pronunciar como si fueran
una sola palabra, por ejemplo GUI para interfaz grfica de usuario. Utilice la etiqueta
<abbr> en su lugar.
<applet>: define un applet incrustado. Utilice la etiqueta <object> en su lugar.
<basefont>: define un color de fuente, un tamao de fuente o una familia de fuentes
predeterminados para todo el texto de un documento. Utilice CSS para aplicar todas
las fuentes.
<big>: hace que el texto ms grande que el tamao de fuente actual. Utilice CSS en su lugar.
<center>: alinea el texto y el contenido en el centro. Utilice CSS en su lugar.
<dir>: define una lista de directorio. Utilice la etiqueta <ul> en su lugar.
<font>: especifica el tipo, tamao y color de la fuente del texto. Utilice CSS en su lugar.
<frame>: define un marco concreto (una ventana) dentro de un conjunto de marcos
(vase el siguiente punto).
<frameset>: define un conjunto de marcos para organizar varios marcos (ventanas).
<noframes>: muestra texto en el caso de exploradores que no admiten marcos.
<strike>: define texto tachado. Utilice la etiqueta <del> en su lugar para pequeas
cantidades de texto, o utilice CSS para grandes bloques de texto.
<tt>: define texto de teletipo o monoespaciado. Utilice la etiqueta <code> o CSS en su lugar.
El hecho de que un elemento no sea compatible no significa que no vaya a funcionar
en determinados exploradores. Muchos usuarios siguen utilizando versiones antiguas de
exploradores y hay elementos degradados que se representan bien en ellos. Sin embargo,
un procedimiento recomendado es crear pginas asumiendo que los visitantes de la pgina
web utilizan un explorador actualizado o bastante reciente, lo que conlleva usar los ltimos
elementos HTML. Si sabe que todos los visitantes de su pgina web utilizan una versin
antigua de explorador, puede usar elementos degradados. A pesar de todo, si va a aplicar
gran cantidad de formato a una pgina web, los mejor es usar CSS.
Los siguientes atributos no se utilizan en HTML5, si bien estos atributos no forman parte
de ninguna especificacin de HTML:
bgcolor: aplica un color de fondo especificado a cualquier contenido descrito por su
elemento asociado, que suele ser una tabla o una pgina. Utilice la propiedad CSS
background-color en su lugar.
bordercolor: aplica un color especificado a las esquinas superiores e izquierdas
deunacelda de una tabla. Utilice la propiedad CSS border-color en su lugar.
bordercolorlight: aplica un color especificado a las esquinas superiores e izquierdas
deuna celda de una tabla. Utilice la propiedad CSS border-color en su lugar.
bordercolordark: aplica un color especificado a las esquinas inferiores y derechas
deuna celda de una tabla. Utilice la propiedad CSS border-color en su lugar.
Lo mismo que sucede con los elementos degradados, puede usar estos atributos si sabe
que los visitantes de su pgina web utilizan exploradores antiguos. Tenga en cuenta que
sitrata de validar la pgina web obtendr errores, que puede pasar por alto si est seguro
de que los exploradores de sus usuarios admiten los atributos.
MS INFORMACIN
Para obtener informacin sobre nuevas caractersticas de HTML5, consulte la pgina web con
informacin resumida sobre HTML5 en http://msdn.microsoft.com/en-us/hh549253 y la pgina
sobre elementos HTML del W3C en http://dev.w3.org/html5/markup/elements.html#elements.
34 | Leccin 2
VER LOS EFECTOS DE ELEMENTOS DEGRADADOS

PREPRESE. Para ver los efectos de los elementos degradados en una pgina web HTML5,
siga estos pasos:
1. En la herramienta de edicin, abra L2-pet-mark.html si no est abierto.
2. Modifique el encabezado h1 para agregar el elemento de centro, como se indica:
<h1><center>Cuidados y alimentacin</center></h1>
3. Cree otro archivo guardndolo como L2-pet-temp.html y visualcelo en un explorador
web. Aparece centrado el encabezado en el explorador?
4. Agregue el elemento big al siguiente contenido, como se indica:
<p>Su perro es un <mark style="background-color:orange;">
<big>amigo para toda la vida</big></mark>.
5. Guarde el archivo y visualcelo en un explorador web. Ve el efecto del elemento big?
Vea la Figura 2-9 como ejemplo.
Figura 2-9
Efectos de los elementos
center y big

http://validator.w3.org/. Cargue L2-pet-temp.html y haga clic en Check (Comprobar)
para que el servicio lo compruebe.
7. Observe que el validador muestra errores relativos al uso de elementos degradados.
Qu puede concluir sobre el uso de elementos degradados en HTML5? (Los elementos
degradados no permiten validar, pero muchos de ellos se representan correctamente
en un explorador web).
8. Cierre L2-pet-temp.html, y deje la herramienta de edicin y el explorador abiertos
siva a continuar con la siguiente seccin.
Elegir y configurar etiquetas HTML5 para mostrar grficos
Utilice el elemento img para mostrar imgenes vinculadas en una pgina web.
Lasimgenes pueden ubicarse con los archivos HTML de pginas web, generalmente
en una subcarpeta de imgenes, o en otro servidor o sitio web. Los elementos de figura
y leyenda de figura son nuevos en HTML5. Proporcionan ms control sobre el tipo
CONCLUSIN de imagen que se muestra y la posibilidad de agregar leyendas. El elemento canvas
se usa para dibujar, representar y manipular imgenes y grficos de manera dinmica
en HTML5. Scalable Vector Graphics (SVG) permite crear objetos escalables cuyo
tamao se puede cambiar para ajustarse de la mejor manera posible a la pantalla
dondese ven, ya sea en una pantalla de PC o de smartphone.
Se pueden mostrar diferentes tipos de imgenes en una pgina web, la mayora de los
cuales pertenecen a dos categoras principales. Una imagen de trama est formada por
pxeles, mientras que una imagen vectorizada est formada por lneas y curvas basadas en
expresiones matemticas. Una fotografa es un tipo de imagen de trama, frecuentemente en
formato JPG. Otros formatos de archivos de trama que funcionan bien en las pginas web
son PNG, GIF y BMP. Una imagen vectorizada es una ilustracin, como un dibujo lineal.
Los desarrolladores a menudo convierten formatos de archivos vectorizados de programas
como Adobe Illustrator o CorelDRAW, que no son compatibles con los exploradores
web, a PNG o GIF para visualizacin web. Una diferencia importante entre los dos tipos
LISTO PARA CERTIFICACIN de archivos es que las imgenes de trama pierden calidad (se ven pixeladas) cuando se
Qu marcado se usa amplan, pero la imgenes vectorizadas mantienen su calidad incluso cuando se amplan.
para mostrar una imagen El mtodo ms usado para agregar imgenes a un documento HTML es usar el elemento
externa en una pgina web? img. Al igual que la etiqueta de anclaje, la etiqueta img no tiene ningn efecto por s misma, y
2.2 requiere atributos y valores que especifiquen la imagen que debe mostrarse en el explorador.
Por ejemplo, para insertar una imagen llamada redball.jpg que se encuentra en una
subcarpeta denominada images, escriba este elemento:
<img src="images/redball.jpg" alt="Grfico de bola roja" />
La imagen se mostrar siempre y cuando la subcarpeta de imgenes sea accesible. Los
atributos src y alt son necesarios para que el cdigo sea totalmente vlido. El valor del
atributo alt (abreviatura de texto alternativo) aparece cuando un usuario pasa el puntero
del mouse sobre la imagen; en este caso, se mostrara la frase Grfico de bola roja.
El W3C exige el atributo alt para la accesibilidad de personas con discapacidades.
Las personas con una disminucin visual pueden usar un lector de pantalla, que lee
en voz alta el texto alternativo de cada imagen. Los motores de bsqueda tambin
usan el atributo alt para identificar los tipos de imgenes y su contenido, ya que los
motores de bsqueda no pueden ver los pxeles de las imgenes.
Tambin como ejemplo, para insertar una imagen con el nombre bluelogo.png accesible
desde otro sitio web, escriba el elemento siguiente:
<img src="http://www.example.com/mrkt/images/bluelogo.png"
alt="Logo azul Company XYZ" />
El elemento img elemento utiliza varios atributos, que se describen en la tabla 2-3.
Tabla 2-3
Atributos del elemento img Atributo Valor Descripcin
src URL Especifica la ubicacin de la imagen, como una ruta o URL
alt text Especifica el texto alternativo para la imagen que se muestra
cuando el usuario pasa el puntero del mouse u otro dispositivo
sealador sobre la imagen
height pixels Especifica la altura de una imagen
width pixels Especifica la anchura de una imagen
ismap ismap Especifica una imagen como imagen interactiva del lado servidor
usemap #mapname Especifica una imagen como imagen interactiva del lado cliente
(una imagen con reas definidas que son vnculos en los que se
puede hacer clic)
Usar los elementos figure y figcaption
Dos nuevos elementos relacionados con los grficos que se han introducido en
HTML5 son los elementos figure y figcaption. El elemento figure especifica el tipo
de figura que se desea usar en un documento HTML, como una ilustracin o una
fotografa. El elemento figcaption proporciona una leyenda para la figura.
36 | Leccin 2
El elemento figure especifica el tipo de figura que est agregando, como una imagen,
un diagrama, una foto, etc. Este elemento aporta una ventaja fundamental:la capacidad
de agregar varias imgenes adyacentes. Con HTML4, para hacer esto se requiere una
cantidad de marcado considerable. El elemento figcaption es opcional. Aade una leyenda
a una imagen de una pgina web, que se puede visualizar delante o detrs de la imagen.
El marcado siguiente utiliza el elemento figure, especifica la anchura y la altura de la
imagen y aade una leyenda. El resultado se muestra en la Figura 2-10:
<figure>
<img src="doghappy.jpg" alt="Perro feliz"
width ="100"height ="125" />
<figcaption>Los perros felices son buenos perros</figcaption>
</figure>
Figura 2-10
Uso de los elementos
figure y figcaption
para mostrar una imagen
conuna leyenda
El marcado siguiente es para una figura con varias imgenes que comparten una nica
leyenda. Sus resultados se muestran en la Figura 2-11:
<figure>
width ="100"height ="125" />
<img src="dogpaws.jpg" alt="Huellas de perro"
width="100" height="125" />
<img src="dogwalk.jpg" alt="Paseando al perro"
</figure>
Figura 2-11
Uso de los elementos
figure y figcaption
para visualizar varias
imgenes adyacentes
conuna sola leyenda
MS INFORMACIN
Para obtener ms informacin sobre la visualizacin de imgenes en pginas web, vaya a
http://bit.ly/Kgg1ab. Encontrar ms informacin sobre mapas de imagen en http://bit.ly/hincW5.
MOSTRAR UNA IMAGEN EN UNA PGINA WEB

PREPRESE. Para mostrar una imagen en una pgina web, siga estos pasos:
1. Busque un archivo JPG, PNG, GIF o BMP en el equipo para usarlo en este ejercicio.
Laimagen puede representar cualquier cosa, pero sera mejor que tuviera algo que
ver con las mascotas.
2. En la herramienta de edicin, abra L2-pet-mark.html.
3. Elimine las etiquetas <mark> del primer prrafo.
4. Inserte el siguiente marcado despus del elemento h1, dejando una lnea en blanco
delante y detrs de l. Reemplace dogwalk.jpg con su propio archivo de imagen:
<figure>
</figure>
5. Cree otro archivo guardndolo como L2-pet-image.html y visualcelo en un explorador
web. La pgina debe ser parecida a la de la Figura 2-12.
Figura 2-12
La pgina web
con una imagen

conelsiguiente ejercicio.
USAR ELEMENTOS FIGURE Y FIGCAPTION

PREPRESE. Para mostrar una imagen en una pgina web, siga estos pasos:
1. Busque otros dos archivos JPG, PNG, GIF o BMP para usarlos en este ejercicio.
Laimagen puede representar cualquier cosa, pero sera mejor que tuviera algo
quever con las mascotas. Debe tener tres imgenes para realizar estos pasos.
2. En la herramienta de edicin, abra L2-pet-image.html si no est abierto.
38 | Leccin 2
3. Reemplace el marcado para la figura que hay despus del elemento h1 con el
siguiente, sustituyendo los nombres de los archivos de imagen (doghappy.jpg,
dogpaws.jpg y dogwalk.jpg) con los nombres de sus archivos de imagen:
<figure>
width ="100"height ="125" />
<img src="dogpaws.jpg" alt="Huellas de perro"
</figure>
4. Guarde el archivo como L2-pet-multipage.html y visualcelo en un explorador web.

Lapgina debe ser parecida a la de la Figura 2-13.
Figura 2-13
La pgina web con varias
imgenes y una leyenda
5. Cierre el archivo L2-pet-multpimage.html. Deje la herramienta de edicin y el explorador

web abiertos si va a continuar con el siguiente ejercicio.
Crear grficos con canvas
El elemento canvas es nuevo en HTML5 y crea un contenedor de grficos. Utiliza

JavaScript para dibujar los grficos de manera dinmica.
Con canvas, la pgina web se convierte en un bloc de dibujo. Puede usar comandos
JavaScript para dibujar formas basadas en pxeles sobre un lienzo que incluyan rellenos
de color, degradados y patrones. Canvas permite tambin representar el texto con diversos
adornos y animar objetos haciendo que se muevan, cambien de tamao, etc.
Los desarrolladores utilizan canvas para crear juegos en lnea, girar galeras de fotos,
contadores de existencias y muchas otras cosas. Las funciones de grficos y animacin
TOME NOTA
* del elemento canvas estn pensadas para proporcionar una calidad equivalente a la de las
pelculas flash.
CONCEPTOS BSICOS DE CANVAS

Para usar canvas, primero debe definir un lienzo en HTML. La sintaxis bsica del elemento
canvas es la siguiente:
<canvas id="smlRectangle" height="100"
width="200"></canvas>
Este elemento crea el bloc de dibujo. El elemento canvas requiere el atributo id para
hacer referencia al lienzo en JavaScript y agregarlo a Document Object Model (DOM).
Cul es la sintaxis bsica
Tambin debe especificar la altura y la anchura del lienzo, en pxeles. JavaScript utiliza
para el elemento canvas
lainterfaz de programacin de aplicaciones (API) de dos dimensiones (2D) para dibujar
en un documento HTML?
2.2
los elementos en el lienzo.
USAR CANVAS PARA CREAR UNA FORMA

PREPRESE. Para usar el elemento canvas para crear una forma, siga estos pasos:
1. En la herramienta de edicin, escriba el siguiente marcado:
<!doctype html>
<html>
<head>
<title>Prueba de canvas</title>
<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,255)";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height="100" width="200 ">
</canvas>
</body>
</html>
Puede incluir scripts de JavaScript en el elemento de encabezado de un documento HTML

TOME NOTA
* o en un archivo externo.
El atributo onload hace que se ejecute la funcin JavaScript del script. Este script busca
primero el elemento con el id smlRectangle:
var canvas = document.getElementById("smlRectangle");
40 | Leccin 2
El mtodo context.fillStyle rellena el rectngulo con color azul utilizando los valores
X REF
RGB 0, 0, 255. El mtodo context.fillRect crea un rectngulo de 200 pxeles de anchura
El uso de JavaScript se x 100 pxeles de altura, colocado 10 pxeles hacia abajo y 20 pxeles desplazado de la
explica en las lecciones esquina superior izquierda del lienzo y lo rellena con el color especificado por fillStyle.
8, 9 y 10. 2. Guarde el archivo como L2-canvas.html y visualcelo en un explorador web. La forma
se debe ver como se muestra en la Figura 2-14.
Figura 2-14
La pgina web con
una forma de canvas
3. Si no aparece un rectngulo azul, vaya a la pgina web del servicio de validacin de

marcado de W3C en http://validator.w3.org. Cargue L2-canvas.html y haga clic en
Check (Comprobar) para que el servicio lo compruebe. Corrija los errores que detecte
el servicio de validacin. Vuelva a guardar el archivo y visualcelo en un explorador web.
4. Deje el archivo, la herramienta de edicin y el explorador web abiertos si va a continuar
con el siguiente ejercicio.
CREAR EL CONTORNO DE UNA FORMA

Para crear el contorno de un rectngulo sin relleno de color, utilice el mtodo context.
strokeRect. Se usan los mismos valores de context.fillRect. Para modificar el color del contorno
(el color del trazo), utilice context.strokeStyle. Por ejemplo, para crear un contorno rectangular
de 200 x 100 pxeles en rojo, utilice estos mtodos en JavaScript:
context.strokeStyle = "red";
context.strokeRect(10,20,200,100);
USAR CANVAS PARA CREAR EL CONTORNO DE UNA FORMA

PREPRESE. Para usar el elemento canvas para crear el contorno de una forma, siga estos
pasos:
1. En la herramienta de edicin, guarde L2-canvas.html como L2-lona-stroke.html.
2. Reemplace las lneas de cdigo fillStyle y fillRect con lo siguiente:
context.strokeStyle = "red";
context.strokeRect(10,20,200,100);
3. Elimine los atributos de anchura y altura del elemento canvas del cuerpo del cdigo
(despus de id = "smlRectangle").
4. Guarde el archivo y visualcelo en un explorador web. La forma se debe ver como se
muestra en la Figura 2-15.
Figura 2-15
La pgina web con un
contorno de forma de canvas
5. Cierre el archivo, pero deje la herramienta de edicin y el explorador web abiertos

siva a continuar con el siguiente ejercicio.
PROPORCIONAR UNA IMAGEN O UN TEXTO ALTERNATIVO PARA

EXPLORADORES ANTIGUOS
Algunos exploradores antiguos no pueden representar dibujos o animaciones del elemento
canvas. Por lo tanto, debe agrega una imagen, texto o algn otro contenido HTML dentro
del elemento canvas para que se muestre si el dibujo no se puede mostrar. El contenido
de respaldo, tambin conocido como contenido de reserva, no aparecer si se admite
elelemento canvas. En este ejemplo se muestra una imagen (smlRectangle.jpg) parecida
ala que creara un lienzo de rectngulo relleno:
<canvas id="smlRectangle" height="100" width="200">
<img
src="http://www.example.com/images/smlRectangle.jpg"
alt="Un rectngulo azul" />
</canvas>
Para mostrar texto en lugar de una imagen, se inserta texto en lugar de la etiqueta <img>.
AGREGAR CONTENIDO DE RESERVA A UN DOCUMENTO HTML

PREPRESE. Para agregar contenido de reserva a un documento HTML, siga estos pasos:
1. En la herramienta de edicin, abra L2-canvas.html y gurdelo como L2-canvas-canvas-
fallback.html.
2. Reemplace el elemento canvas con lo siguiente:
<canvas id="smlRectangle" height="100" width="200">
Su explorador no admite la etiqueta de canvas.
</canvas>
3. Guarde el archivo y visualcelo en el explorador web Internet Explorer 9. El dibujo
delienzo debe verse.
4. Presione F12 para entrar en el modo explorador, haga clic en Modo de documento
enla barra de mens y seleccione Estndar Internet Explorer 7.
42 | Leccin 2
5. Presione F12 de nuevo. Aparece un mensaje de error, indicando que no se reconoce

una propiedad o un mtodo. Cierre el mensaje de error. En la ventana del explorador
se muestra el texto de reserva, como se muestra en la Figura 2-16.
Figura 2-16
Se muestra texto si el
explorador no es compatible
con canvas
6. Deje el archivo, la herramienta de edicin y el explorador web abiertos si va

acontinuar con el siguiente ejercicio.
MS INFORMACIN
Para obtener ms informacin sobre el elemento canvas, visite la pgina web de grficos
HTML5 de Microsoft en http://bit.ly/M8ZNkf. En el sitio web HTMLCenter, en
http://www.htmlcenter.com/blog/rgb-color-chart/, se enumeran los cdigos de los colores RGB.
Crear grficos con SVG
Scalable Vector Graphics (SVG) es un lenguaje que se utiliza para describir grficos
2D en Lenguaje de marcado extensible (XML). XML est relacionado HTML y ha
desempeado un papel importante en las pginas web HTML4.01. La tecnologa
SVG no es nueva, pero HTML5 ahora permite que los objetos SVG se incrusten en
pginas web sin usar las etiquetas <object> o <embed>. (Todos los tipos de grficos
SVG se denominan objetos y SVG los carga en el DOM.)
El objetivo principal de SVG, como indica su nombre, es crear formas grficas vectoriales
Qu tipo de objetos
escalables, pero tambin se pueden crear imgenes y texto. De forma parecida al elemento
puede crear con SVG? canvas, puede aplicar rellenos de colores slidos, degradados y patrones a los objetos
2.2 SVG, y copiar y clonar los objetos. Tambin puede usar SVG en cualquier lugar en el
queinsertara un PNG, JPG o GIF. Con SVG, proporciona instrucciones de dibujo en
lugar de un archivo de imagen.
Una de las principales ventajas de SVG es su flexibilidad. Su grfico vectorial cambia
de tamao para ajustarse a la pantalla en la que se muestra, ya sea en un monitor de 32
pulgadas o un dispositivo mvil como un smartphone. Puesto que solo se transmite el
cdigo XML que describe el grfico SVG, incluso imgenes de gran tamao no requieren
mucho ancho de banda. En consecuencia, SVG resulta prctico para su uso en fondos
de pginas web sin tener que usar la propiedad de repeticin. La mayora de los fondos
slidos de pgina web son en realidad una lnea fina que se repite usando un estilo CSS.
Por otra parte, los motores de bsqueda pueden indizar SVG porque se crea con XML.
Se pueden incluir atributos como color, rotacin, color y tamao del trazo, etc., para cada
objeto SVG. El marcado siguiente se puede incluir en un archivo HTML para crear una
bola morada:
<svg id="svgpurpball" height="200"
xmlns="http://www.w3.org/2000/svg">
<circle id="purpball" cx="40" cy="40"
r="40" fill="purple" />
</svg>
Los atributos cs, cy y r ayudan a crear el crculo definiendo los puntos x e y del centro, y el
radio. SVG tiene gran cantidad atributos, que ayudan a crear todo tipo de formas. Los atributos
estn disponibles en el sitio web de W3C, http://www.w3.org/TR/SVG/attindex.html.
MS INFORMACIN
Para obtener ms informacin sobre SVG, visite la pgina web de SVG de Microsoft en
http://msdn.microsoft.com/en-us/library/gg589525(v=vs.85).aspx.
CREAR UN GRFICO VECTORIAL SVG

PREPRESE. Para crear un grfico vectorial SVG sencillo, siga estos pasos:
1. En la herramienta de edicin, escriba el siguiente marcado:
<!doctype html>
<html>
<head>
<title>Estrella SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:aqua;stroke:orange;stroke-width:5;
fill-rule:evenodd;"/>
</svg>
</body>
</html>
El atributo points define las coordenadas x e y coordenadas de cada esquina,
opunta, del polgono. El atributo fill-rule determina como se rellena el interior
delpolgono.
2. Guarde el archivo como L2-SVG.html y visualcelo en un explorador web. La pgina
debe ser parecida a la de la Figura 2-17. Si no se muestra la pgina, comprubela con
el servicio de validacin de marcado de W3C en http://validator.w3.org y corrija los
errores.
Figura 2-17
La pgina web con
una forma SVG
44 | Leccin 2
3. Cambiar algunos de los valores de los parmetros de punta del polgono. Guarde el
archivo como L2-test.html y visualcelo en un explorador web. Por ejemplo, si cambia
el valor del primer parmetro de 100 a 50, se obtiene el polgono de la Figura 2-18.
Figura 2-18
Aunque solo se cambie
el valor de parmetro,
cambia la forma del objeto
4. Elimine fill-rule:evenodd;, guarde el archivo y, a continuacin, visualcelo en un

explorador web. Compare el polgono con la Figura 2-17.
5. Cierre los archivos de datos que estn abiertos. Deje la herramienta de edicin
y el explorador web abiertos si va a continuar con el siguiente ejercicio.
Cundo usar el elemento canvas en lugar de SVG
LISTO PARA CERTIFICACIN No hay reglas fijas para decidir si usar canvas o SVG. La eleccin depende
Cundo debe usar el principalmente de su nivel de habilidad con uno u otro y de la naturaleza de
elemento canvas en lugar cadaproyecto.
de SVG?
2.2
A continuacin se mencionan algunos aspectos que debe tener en cuenta para tomar
ladecisin correcta:
Si el dibujo es relativamente pequeo, use canvas.
Si el dibujo requiere un gran nmero de objetos, utilice canvas. SVG se degrada
cuantos ms objetos se agregan al DOM.
Por lo general, use canvas para pantallas pequeas, por ejemplo las de dispositivos
mviles. A medida que aumenta el tamao de la pantalla y se necesitan ms pxeles,
canvas empieza a producir imgenes pixeladas, por lo que debera usar SVG.
Si debe crear documentos vectorizados altamente detallados que deben escalarse
bien,utilice SVG.
Si va a visualizar la salida de datos en tiempo real, por ejemplo mapas,
superposiciones de mapa, datos meteorolgicos, etc., utilice canvas.
Comentario de Microsoft: canvas se parece a Microsoft Paint. Puede dibujar imgenes
usando formas y otras herramientas, y el resultado se basa en pxeles. SVG se parece
auna diapositiva de PowerPoint Office, en la que se utilizan objetos escalables.
MS INFORMACIN
Para obtener ms informacin sobre cmo elegir el mejor mtodo de dibujo, canvas o SVG,
vaya ahttp://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx.
Elegir y configurar etiquetas HTML5 para reproducir archivos multimedia
HTML5 introduce los elementos audio y vdeo, con lo que ya no es necesario usar
CONCLUSIN complementos ni reproductores multimedia para escuchar msica o ver vdeos en
unexplorador web.
Los elementos audio y vdeo son dos de los principales cambios en HTML5. Le permiten
LISTO PARA CERTIFICACIN proporcionar contenido multimedia desde un explorador web sin tener que usar complementos,
Qu etiquetas HTML5 por ejemplo los de Microsoft Windows Media Player, Microsoft Silverlight, Adobe Flash o
permiten incluir QuickTime de Apple. Eso significa que los usuarios no tienen ms que abrir un explorador
multimedia en una pgina compatible con HTML5 para escuchar msica o libros de audio, disfrutar de efectos
web? desonido y ver clips de vdeo o pelculas.
2.3 La especificacin de HTML5 incluye las etiquetas <video> y <audio> para incorporar
multimedia. En las siguientes secciones se describen pormenorizadamente.
Comprender y usar las etiquetas de vdeo
El elemento vdeo se utiliza junto con el atributo src para designar a un archivo de
vdeo que se va a reproducir en un documento HTML5. El uso de los atributos height
y width le permite controlar el tamao de la ventana en la que se reproduce el vdeo.
El elemento vdeo le permite incorporar vdeos en documentos HTML utilizando muy

Cul es el marcado para
poco cdigo. La estructura para incrustar vdeo es sencilla. Aqu se muestra un ejemplo
usar el elemento de vdeo demarcado para agregar un archivo MP4 a una pgina web:
HTML5? <video src="intro.mp4" width="400" height="300">
2.3 </video>
El atributo src indica el nombre del archivo de vdeo, en este caso vdeo.mp4, que se va
areproducir. Los atributos height y width especifican el tamao de la ventana en la que
sereproducir el vdeo.
Hay otros atributos disponibles que puede agregar para controlar el vdeo:
poster: muestra un archivo de imagen esttica antes de que se cargue el vdeo
autoplay: el vdeo empieza a reproducirse automticamente cuando se carga la pgina
controls: muestra un conjunto de controles para reproducir, pausar y detener el vdeo,
ypara controlar el volumen
loop: se utiliza para repetir el vdeo
Si se usaran todos los controles mencionados, el marcado sera parecido a este:
<video src="/videos/intro.mp4"
width="400" height="300"
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
</video>
Tenga en cuenta que este marcado hace referencia a un archivo de vdeo MP4. Otros
formatos populares de vdeo web son H.264, OGG y WebM, si bien WebM se utiliza
en menos del 10 por ciento de los casos. Adems de un formato de vdeo, tambin debe
especificar el cdec, una tecnologa que se usa para la compresin de datos. La compresin
46 | Leccin 2
reduce la cantidad de espacio necesario para almacenar un archivo y reduce el ancho

debanda necesario para transmitir el archivo. La compresin de vdeo reduce el tamao
de las imgenes de vdeo a la vez que retiene la ms alta calidad de vdeo con la mnima
velocidad de bits. Todo lo anterior hace que se consiga un mejor rendimiento.
En resumen, los principales formatos de vdeo junto con los cdecs (para los dos ltimos) son:
MP4 o H.264
OGG + Theora con audio Vorbis
WebM + VP8
Un procedimiento recomendado es usar el atributo type para especificar el formato de
vdeo. Tambin debe usar el atributo cdecs para especificar los cdecs, si corresponde.
Acontinuacin se muestra un ejemplo de marcado:
<vdeo
poster="78704-splash.jpg"
autoplay="autoplay"
controls="controls"
loop="loop">
<source src="intro.mp4" type="video/mp4" />
</video>
La etiqueta <source> se utiliza como contenido del elemento de vdeo de forma que se
pueda establecer el atributo type y que est disponible la opcin de varios formatos.
No todos los formatos de vdeo son compatibles con todos los exploradores. MP4/H.264
es el formato ms usado en exploradores web y dispositivos mviles. En la pgina web
sobre vdeo HTML5 en http://www.w3schools.com/html/html5_video.asp se muestra
una tabla que indica qu formatos de vdeo funcionan con cada explorador; la tabla se
actualiza peridicamente. Para contribuir a que su vdeo se pueda visualizar en la mayora
de exploradores y dispositivos, puede usar el atributo source para incluir varios formatos
en el marcado. En este ejemplo se muestra el mismo vdeo disponible en dos formatos,
yel formato OGG especifica los cdecs:
<video
width="400" height="300" poster="image.png"
autoplay="autoplay"
controls="controls"
loop="loop">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type=video/ogg;
codecs="theora, vorbis">
</video>
TRABA JAR CON EL ELEMENTO DE VDEO

PREPRESE. Para trabajar con el elemento de vdeo HTML5, siga estos pasos:
1. Busque un clip de vdeo y un archivo de imagen para usarlo como pster. Si no
tiene ningn clip de vdeo, busque un archivo MP4 de dominio pblico en la Web
ydescrguelo. Guarde los archivos de vdeo y de imagen en la carpeta de HTML5.
2. En la herramienta de edicin, cree un archivo HTML con el siguiente marcado. Cambie
los nombres de archivo por los de su archivo de imagen y clip de vdeo. Cambie el
atributo type, si es necesario, y reemplace sample.mp4 con el nombre de su archivo
de vdeo.
<!doctype html>
<html>
<head>
<title>Prueba vdeo</title>
</head>
<body>
<video
poster="sample.jpg"
autoplay="autoplay"
controls="controls">
<source src="sample.mp4" type="video/mp4" />
</video>
</body>
</html>
3. Guarde el archivo como L2-vdeo.html.

http://validator.w3.org/. Cargue L2-vdeo.html y haga clic en Check (Comprobar) para
que el servicio lo compruebe. Corrija los errores que detecte el servicio de validacin,
por ejemplo etiquetas que faltan o errores ortogrficos, si los hay.
5. Abra el archivo HTML en un explorador web. Se reproduce el vdeo
automticamente? Aparecen los controles? Debe abrir el archivo L2-vdeo.html
endistintos exploradores web, como prueba.
6. En la herramienta de edicin, elimine la lnea autoplay y reemplace controls = "controls"
con controls nicamente.
7. Vuelva a guardar el archivo y comprubelo. Se debe validar sin errores. Esto indica
queHTML5 permite usar un mtodo abreviado para especificar el atributo de
controles. El mismo principio se aplica a los atributos autoplay y loop.
conelsiguiente ejercicio.
Comprender y usar las etiquetas de audio
El elemento de audio HTML5 funciona como el elemento vdeo, pero solo para
sonido. Para usar el elemento de audio, incluya la etiqueta <audio> y una ruta al
archivo en el disco duro, o un localizador uniforme de recursos (URL) que seale al
archivo de audio.
El elemento audio le permite incluir audio, como msica y otros sonidos, en documentos
HTML. Puede incluir los mismos atributos relacionados con el control que para el
LISTO PARA CERTIFICACIN elemento de vdeo: autoplay, controls y loop. En el ejemplo siguiente se ha incluido solo el
Cul es el marcado para atributo controls:
usar el elemento HTML5
<audio src="sample.mp3" controls="controls">
audio?
2.3 </audio>
Si utiliza el atributo autoplay para que el audio se reproduzca automticamente cuando

secarga la pgina web, utilice un clip corto como efecto de sonido. A muchos usuarios
TOME NOTA
* deInternet no les gusta el sonido automtico y prefieren tener ms control.
48 | Leccin 2
Los tres tipos principales de archivos de audio admitidos por los exploradores ms
conocidos son OGG, MP3 y WAV. Sin embargo, no todos los exploradores admiten todos
los formatos de archivo de audio, por lo menos en la actualidad. En la mayora de los
casos, MP3 es la mejor opcin para obtener compatibilidad con varios exploradores.
Para garantizar que su audio se reproduce en la mayora de los exploradores y dispositivos,
utilice el atributo source para incluir varios formatos en el marcado. En este ejemplo se
muestra el mismo archivo de audio disponible en dos formatos:
<audio controls="controls">
<source src="sample.ogg" type="audio/ogg" />
<source src="sample.mp3" type="audio/mp3" />
</audio>
Puede encontrar muchos archivos de audio gratuitos, no sujetos a derechos de autor
y copyright, en http://flashkit.com. Es un buen recurso para estudiantes y para
desarrolladores que necesiten un efecto de sonido para un proyecto. Otra fuente es el
sitio web Public Domain Sherpa, en http://www.publicdomainsherpa.com/public-domain-
recordings.html. Tambin puede hacer sus propias grabaciones mediante su equipo y
software de grabacin. Windows 7 cuenta con la Grabadora de sonidos, que permite
guardar archivos de audio en formato WAV.
TRABA JAR CON EL ELEMENTO DE AUDIO

PREPRESE. Para trabajar con el elemento de audio HTML5, siga estos pasos:
1. Busque un archivo de audio.
2. En la herramienta de edicin, cree un archivo HTML con el siguiente marcado.
Cambieel nombre de archivo por el de su archivo de audio.
<!doctype html>
<html>
<head>
<title>Prueba de audio</title>
</head>
<body>
<audio src="sample.mp3" controls="controls">
</audio>
</body>
</html>
3. Guarde el archivo como L2-audio.html y visualcelo en un explorador. Debe verse de

forma parecida a la Figura 2-19. Como en el ejemplo no se incluy el atributo autoplay,
debe hacer clic en el botn de reproduccin para iniciar el clip de audio.
Figura 2-19
Controles de audio HTML5
predeterminados en un
explorador web
4. Si no aparecen los controles de audio, vaya a la pgina web del servicio de validacin
de marcado de W3C en http://validator.w3.org. Cargue L2-audio.html y haga clic en
Check (Comprobar) para que el servicio lo compruebe. Corrija los errores que detecte el
servicio de validacin, por ejemplo etiquetas que faltan o errores ortogrficos, si los hay.
5. Vuelva a guardar el archivo y bralo en un explorador web. Reproduzca el clip de
audio.
6. Cierre los archivos abiertos, y cierre tambin la herramienta de edicin y el explorador
web.
MS INFORMACIN
Para obtener ms informacin sobre la inclusin de multimedia en pginas web
HTML5, y concretamente sobre los elementos de audio y vdeo, vaya a
http://msdn.microsoft.com/en-us/library/ie/hh771805(v=vs.85).aspx.

E n el Lenguaje de marcado de hipertexto (HTML) se utiliza marcado para describir
elcontenido que se va a mostrar en una pgina web.
Un elemento es la combinacin de etiquetas y el contenido que encierran.
Podratener que usar caracteres especiales en una pgina web, lo que requiere
lacodificacin de los caracteres.
Cada pgina web debe tener la declaracin doctype en la parte superior de la pgina.
HTML5 usa la mayora de los mismos elementos y atributos especificados en HTML4.
Ha introducido algunas etiquetas nuevas, modificado el uso preferido de otras
y ya no admite ciertos elementos. Los nuevos elementos relacionados de texto
incluyen comando, marca, tiempo, medidor y progreso. Algunos de los elementos
degradados son basefont, center, font y strike.
Utilice el elemento img para mostrar imgenes vinculadas en una pgina web.
Lasimgenes pueden ubicarse con los archivos HTML de pginas web, generalmente
en una subcarpeta de imgenes, o en otro servidor o sitio web.
Los elementos figure y figure caption son nuevos en HTML5. Proporcionan ms
control sobre el tipo de imagen que se muestra y la posibilidad de agregar leyendas.
El elemento canvas se usa para dibujar, representar y manipular imgenes y
grficos de manera dinmica en HTML5.
Scalable Vector Graphics (SVG) permite crear objetos escalables cuyo tamao
sepuede cambiar para ajustarse de la mejor manera posible a la pantalla donde
seven, ya sea en una pantalla de PC o de smartphone.
HTML5 introduce los elementos audio y vdeo, con lo que ya no es necesario usar
complementos ni reproductores multimedia para escuchar msica o ver vdeos en
un explorador web.
1. Una etiqueta HTML que no requiere una etiqueta final se denomina etiqueta
.
2. Un funciona con un elemento para describir datos en suficiente
detalle para su representacin.
50 | Leccin 2
3. El es una declaracin que se encuentra en la parte superior de cada

pgina web.
4. Un elemento o atributo se ha eliminado de la lista de elementos
HTML disponibles segn el W3C.
5. Una imagen de est formada por pxeles, mientras que una
imagen vectorizada est formada por lneas y curvas basadas
enexpresiones matemticas.
6. Nuevo en HTML5, el elemento especifica el tipo de figura que
seest agregando, como una imagen, un diagrama, una foto, etc.
7. El elemento agrega una leyenda a una imagen en una pgina web
ypuede mostrar la leyenda antes o despus de la imagen.
8. Usando el elemento , la pgina web se vuelve un bloc de dibujo
ysepueden usar comandos JavaScript para dibujar formas basadas en pxeles sobre
un lienzo que incluyan rellenos de color, gradientes y patrones.
9. es un lenguaje para describir grficos 2D en Lenguaje de marcado
extensible (XML).
10. Los elementos HTML5 y permiten proporcionar
multimedia desde un explorador web sin que haga falta usar complementos.
Varias opciones
1. Cules de las siguientes etiquetas son necesarias en todas las pginas web?
(Seleccione todas las que correspondan).
a. <html>
b. <head>
c. <title>
d. <body>
2. Cul de las siguientes opciones es la sintaxis para crear un hipervnculo en HTML?
a. <link href="http://www.example.com">link</a>
b. <a href="http://www.example.com"> texto del vnculo</a>
c. <link>http://www.example.com</link >
d. <http://www.example.com>
3. Qu elemento HTML5 define un botn de comando en el que los usuarios hacen
clic para llamar un comando?
a. <objectbut>
b. <combutton>
c. <command>
d. <cbutton>
4. Qu elemento HTML5 le permite resaltar bloques de texto en un documento HTML?
a. <mark>
b. <highlight>
c. <emphasis>
d. <yellow>
5. Cules de las siguientes etiquetas se degradan en HTML5? (Seleccione todas las
respuestas que correspondan).
a. <big>
b. <center>
c. <font>
d. <time>
6. Qu etiqueta se usa con la etiqueta <figure> para mostrar una imagen?

a. <img>
b. <src>
c. <fig>
d. <a>
7. Tanto canvas como SVG requieren cul de las siguientes opciones?
a. Microsoft Silverlight
b. Un programa de dibujo externo, como Microsoft Paint
c. Una gran cantidad de espacio de almacenamiento o ancho de banda
d. JavaScript
8. Al decidir si usar canvas o SVG, cules de las siguientes consideraciones son
verdaderas?
a. Si el dibujo es relativamente pequeo, use SVG.
b. Generalmente, use canvas para pantallas pequeas y SVG para pantallas ms
grandes.
c. Si el dibujo requiere un gran nmero de objetos, utilice SVG.
d. Si debe crear documentos vectorizados altamente detallados que deben escalarse
bien, prefiera canvas.
9. Cul de las siguientes opciones es el formato general del elemento vdeo?
a. <movie src="file.mp4" width="X" height="Y">
b. <movie href="file.mp4" width="X" height="Y">
c. <video src="file.mp4" width="X" height="Y">
d. <video href="file.mp4" width="X" height="Y">
10. Cul de las siguientes opciones es el formato general del elemento audio?
a. <audio src="sample.mp3" controls="controls">
b. <audio href="sample.mp3" controls>
c. <sound src="sample.mp3" controls>
d. <sound href="sample.mp3" controls="controls">
Verdadero/Falso
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F si el
enunciado es falso.
VF1.
El elemento canvas requiere JavaScript para crear formas.
VF2.La creacin de un objeto SVG en HTML5 no requiere JavaScript.
VF3. El elemento de audio puede proporcionar controles de reproduccin con un
atributo nico.
VF4. Los elementos degradados no pueden representarse en un explorador
compatible con HTML5.
VF5. El formato ms popular para archivos de audio es MP4.
Escenario 2-1: Corregir errores de marcado sencillos
Geraldine, la asistente del dueo de la empresa, est aprendiendo HTML. Su marcado
(como se muestra a continuacin) no representa lo que ella esperaba. La negrita no se
detiene despus de jueves. La imagen del logotipo de la empresa no aparece, an
cuando est guardada en su subcarpeta de imgenes con todas las dems imgenes.
Eltexto alternativo no se muestra tampoco cuando desplaza el puntero del mouse
sobreelmarcador de posicin de la imagen. Qu le dice?
52 | Leccin 2
<!doctype html>
<html>
<head>
<title>Interno</title>
</head>
<body>
<h1>Reunin del personal</h1>
<img src="cologo.jpg" olt="Logotipo de la empresa" />
<p>Vaya a la <strong>Sala de juntas azul</strong> a las <strong>10:00</strong> el
<strong>jueves<strong> para asistir a una reunin de urgencia del personal.</p>
</body>
</html>
Escenario 2-2: Trabajar con smbolos

Petra est dando formato a algunos documentos relacionados con contabilidad que se
hospedarn en la intranet de la empresa. Dice que los signos de dlar y los smbolos de
porcentaje se ven bien cuando los ve en un explorador, pero que solo aparecen caracteres
basura cuando ve los documentos en un explorador diferente. Qu debe hacer?
Escenario 2-3: Canvas o SVG?
M.A. es una artista grfica en ClickTick Watches, un fabricante exclusivo de relojes
depulsera. Se le pidi que actualizara el logotipo de la empresa y lo creara usando
unaherramienta que escale bien si la imagen se ve en equipos porttiles o smartphones.
Tambin le pidieron que creara grficos interactivos para que el personal de ventas los
use en sus dispositivos de pizarra o tableta. Desea mantener sus habilidades actualizadas
aprendiendo todo lo que sea posible sobre las tecnologas HTML5, pero no sabe dnde
centrarse, si en canvas o SVG, para estos proyectos. Qu sugiere?
Escenario 2-4: Seleccionar cdecs y formatos de vdeo web adecuados

Sammy es responsable de organizar las reuniones para los empleados de los resorts
Clear Blue. Desea publicar en la intranet un vdeo del CEO, quien est en el extranjero
revisando posibles ubicaciones para nuevos resorts, para la prxima fiesta de agradecimiento
a los empleados. Sabe que Clear Blue se estandariz en Internet Explorer 9 y se enter de
que puede mostrar vdeo fcilmente en HTML5 pero no sabe por dnde empezar. Qu le
dira a Sammy?
de usuario mediante
HTML5: organizacin,
entrada y validacin

del examen MTA
HTML5 para organizar HTML5 para organizar contenido
contenido y formularios y formularios.
HTML5 para la entrada HTML5 para entrada
y validacin y validacin.
TRMINOS CLAVE
elemento Article elemento Nav
elemento Aside lista ordenada
atributo Autofocus atributo de patrn
validacin automtica texto de marcador de posicin
validacin del lado cliente atributo necesario
elemento DataList elemento section
atributo de correo electrnico marcado semntico
elemento footer validacin del lado servidor
entrada de formularios tabla
atributo global lista sin ordenar
elemento header validacin
elemento de men formulario web
Una de sus nuevas tareas como contratado en prcticas en Malted Milk Media es
crear un formulario web que limite lo que un usuario puede escribir en los campos
del formulario y valide la entrada. Con objeto de prepararse para crear el formulario
web, primero debe aprender a organizar o estructurar el marcado utilizando los
nuevos elementos HTML5.
53
54 | Leccin 3
Elegir y configurar etiquetas HTML5 para organizar contenido y formularios
HTML5 introduce varios elementos nuevos para organizar el contenido y los formularios.
CONCLUSIN Representan el nuevo marcado semntico que es una parte importante de HTML5.
El marcado HTML5 introduce muchas etiquetas de marcado nuevas para organizar

la estructura de los documentos HTML, lo facilita la creacin y modificacin de
documentos. Las nuevas etiquetas tienen nombres ms intuitivos que otras parecidas en
especificaciones HTML anteriores. Las etiquetas tienen nombres ms adecuados para la
parte de la pgina a la que se aplican, por ejemplo <header>, <section> y <footer>.
HTML5 tambin simplifica la creacin de tablas, ya que muchos de los atributos de tabla
que afectan a la anchura, el relleno de celdas, y la alineacin vertical y horizontal, se utilizan
en un archivo CSS.
Comprender la semntica HTML

El marcado semntico utiliza nombres de etiqueta que son intuitivos, lo que facilita
la creacin y modificacin de documentos HTML. Tambin es ms fcil su
interpretacin por parte de exploradores web y otros programas.
Una de las nuevas caractersticas muy prcticas de HTML5 es el uso de marcado

Qu es el marcado
semntico, que mejora el significado, o definicin, de varias etiquetas, que as son ms fciles
semntico? de interpretar para los usuarios, programas y exploradores web. Como se ha mencionado
2.4 en la leccin 2, no todas las etiquetas HTML se han reemplazado o actualizado para
HTML5, pero algunas de las que se han introducido en HTML5 hacen el trabajo de
creacin de pginas web mucho ms fcil.
En HTML 4.01 y especificaciones anteriores, para crear la estructura de un documento
HTML el desarrollador utiliza la etiqueta <div> con frecuencia en todo momento. La etiqueta
<div> suele incluir un atributo de clase o identificador, que tambin puede incluir estilos
CSS como background-color, height y width. Un ejemplo sencillo de etiqueta <div> es:
<div id="header" > Esto es un encabezado </div>
class e id son atributos globales, lo que significa que se pueden usar con cualquier
elemento HTML. Puede ver la lista completa de atributos HTML globales en
TOME NOTA
* http://dev.w3.org/html5/markup/global-attributes.html.
El elemento div solo no tiene mucho sentido sin el atributo id o class. Se puede hasta
asignar un valor al atributo ID, por ejemplo header, header_inner, slogan, content,
style y muchos otros. A continuacin se muestra un ejemplo de documento HTML 4.01:
<div id="header">
<div id="header_inner">
<img src="images/doghappy.jpg"
alt="Attaboy Pet Services" />
<div id="slogan">Los perros felices son buenos perros</div>
</div>
</div>
HTML5 utiliza etiquetas ms sencillas para reemplazar muchas de las etiquetas div, algunas
de las cuales se muestran en la Figura 3-1.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 55
Figura 3-1
Comparacin entre partes de
un documento con marcado
HTML 4.01 y HTML5
Observe cmo el marcado semntico de HTML5 da un significado ms concreto a partes

de un documento HTML, lo que hace que la estructura sea ms fcil de entender.
Usar etiquetas para agregar estructura a un documento HTML

documento HTML estn header, footer, section, nav, article y aside.
Qu etiquetas HTML5 se
utilizan para estructurar y Ahora que comprende el marcado semntico, fijmonos en algunos de los nuevos elementos
organizar un documento? HTML5 para organizar documentos. En la tabla 3-1 se enumeran y describen las nuevas
2.4 etiquetas relacionadas con la estructura de HTML5.
Tabla 3-1
Nuevas etiquetas de Etiqueta Descripcin
marcado HTML5 para
organizar el contenido <address> Define un rea para la informacin de contacto de una pgina o seccin.
ycrear la estructura Define un artculo, por ejemplo de una revista o un peridico, entrada
<article>
deblog o contenido similar.
Define contenido independiente del contenido de la pgina, pero
<aside>
relacionado con l; se parece a una barra lateral en captulos de libros
yartculos de revistas.
Contiene informacin adicional sobre texto que la rodea. Crea un widget
<details>
interactivo que el usuario puede mostrar u ocultar
Define un pie de pgina para un documento o una seccin. Puede
<footer>
incluir el autor del documento, informacin de contacto, informacin
decopyright y vnculos a las condiciones de uso.
Define un encabezado para un documento o una seccin. Puede contener
<header>
contenido introductorio o vnculos de navegacin.
Agrupa los encabezados y subencabezados (mediante las etiquetas <h1>
<hgroup>
a <h6>) si hay encabezados de varios niveles.
<nav> Define un bloque de vnculos de navegacin.
Define una seccin de un documento, por ejemplo captulos, partes
<section>
deuna tesis o partes de una pgina web, cuyo contenido es distinto
aldelasdems secciones.
Define un encabezado visible para un elemento de detalles. El usuario
<summary>
puede hacer clic en l para mostrar u ocultar informacin.
<wbr> efine un salto de lnea posible. Cuando una palabra es muy larga,
D
oexiste la posibilidad de que el explorador cree un salto lnea en el
lugar equivocado, puede usar el elemento <wbr> para partir la lnea
opalabra correctamente.
56 | Leccin 3
Como vio en la leccin 1, el estndar HTML5 no estar terminado hasta dentro de

varios aos, lo que significa que todava se estn haciendo cambios en la especificacin.
Los exploradores web ms importantes, como Microsoft Internet Explorer y Mozilla
Firefox, admiten muchos elementos HTML5, pero no todos. El sitio web Can I Use
TOME NOTA
* en http://caniuse.com/ es una excelente fuente para determinar qu exploradores admiten
caractersticas HTML5 concretas. El sitio web se actualiza peridicamente, por lo que debe
ser uno de sus recursos esenciales de HTML5. Adems, puede probar la compatibilidad
de cualquier explorador HTML5 visitando el sitio web de prueba de HTML5 en
http://html5test.com.
A continuacin, examinemos de cerca las etiquetas HTML5 que se muestran en la

Figura3-1, que son las etiquetas HTML5 relacionadas con la estructura ms usadas.
ELEMENTOS DE ENCABEZADO Y PIE DE PGINA

El elemento header define un encabezado para un documento, una seccin o un artculo.
En HTML 4.01, se utiliza header div, como se mencion en la seccin anterior
(<div id="header">). El elemento footer define un pie de pgina para un documento o una
seccin y generalmente contiene informacin acerca de tal documento o seccin, comoel
nombre del autor, datos de copyright, vnculos a documentos relacionados, etc. El elemento
footer no aparece de manera automtica en la parte inferior (o pie) deldocumento; debe usar
CSS para indicar al explorador dnde mostrar el pide de pgina. Los pies de pgina que
aparecen en la parte inferior de cada pgina web o documento sedenominan pies de pgina
repetidos.
A continuacin puede ver un ejemplo de un artculo con una etiqueta header y una etiqueta
footer:
<article>
<header>
<h1>Conocer HTML5</h1>
<h2>Elementos nuevos</h2>
</header>
<p>Las nuevas etiquetas HTML5 facilitan mucho el desarrollo
de aplicaciones y pginas web.</p>
<footer>
<p>Fecha de publicacin: <time datetime="2012-09-
03"3 de septiembre de 2012</time></p>
</footer>
</article>
Igual que con el elemento div, puede usar los elementos de encabezado y pie de pgina
varias veces en un documento HTML, como se muestra en la Figura 3-2.
Figura 3-2
Varias instancias del
elemento de encabezado
ELEMENTO DE SECCIN
El elemento section define una seccin en un documento, como un captulo, partes
deuna tesis o bien partes de una pgina web cuyo contenido es distinto entre s. El
WC3 especifica usos para el elemento de seccin para diferenciarlo de otros elementos
relacionados con la estructura, principalmente que contiene al menos un ttulo y que
define algo que aparecera en el esquema del documento. Por ejemplo, debe usar el
elemento section para dividir distintas partes de un sitio web de una sola pgina o para
crear una cartera de imgenes. En el ejemplo siguiente se muestra una seccin sencilla:
<section>
<h1>Total de ocho</h1>
LISTO PARA CERTIFICACIN <p>Los instructores de hip-hop suelen ensear movimientos
Cundo debo usar que son grupos de ocho partes.</p>
laetiqueta <section> </section>
en lugar de otro tipo
deelemento? En la tabla 3-2 se muestran situaciones en las que no debe usar el elemento section
2.4 yofrece una tcnica mejor.
Tabla 3-2
Situaciones en las que no Situacin Utilice
debe usar el elemento section
Separacin de contenido que es independiente del resto article
del contenido de la pgina web o el documento
Intencin de sindicar un bloque de contenido article
TOME NOTA
* Creacin de una barra lateral aside
Las nuevas etiquetas Ajuste y ubicacin de varias secciones que no estn div
HTML5 relacionadas relacionadas entre s
con la estructura
no reemplazan a Adicin de una sombra paralela o un borde a un elemento div
la etiqueta <div>
totalmente, pero reducen
considerablemente el
Cundo usar la etiqueta <section> y cundo usar otro elemento no es siempre fcil de decidir.
nmero de etiquetas
<div> necesarias en
Si est trabajando en un documento HTML y no est seguro de qu elemento usar, estudie
un documento HTML. la especificacin HTML5 del W3C o busque en la Web para ver qu han hecho otros
desarrolladores en una situacin similar.
Al definir un encabezado de seccin, que puede contener los encabezados h1 a h6, puede
usar el elemento hgroup para agrupar los encabezados. El elemento hgroup afecta a la
organizacin, pero no a la presentacin. Considere la posibilidad de usar hgroup cuando
tenga un encabezado y un subencabezado uno tras otro, como se muestra a continuacin.
<section>
<hgroup>
<h1>Rutinas de hip-hop</h1>
<h3>Mtodo de total de ocho</h3>
</hgroup>
<article>
<p>Los instructores de hip-hop suelen ensear movimientos
que son grupos de ocho partes.</p>
</article>
</section>
En una pgina web, este marcado tendra el aspecto que se muestra en la Figura 3-3.
58 | Leccin 3
Figura 3-3
Uso de hgroup para
agrupar encabezados
en un documento HTML
CREAR UN DOCUMENTO HTML CON UN ENCABEZADO, SECCIONES

Y UN PIE DE PGINA
PREPRESE. Para crear un documento HTML utilizando los elementos HTML5
deencabezado, seccin y pie de pgina, siga estos pasos:
1. Con un editor HTML o una herramienta de desarrollo de aplicaciones y un explorador
TOME NOTA
* web, cree un documento HTML sencillo que contenga las etiquetas <header>, <section>
Recuerde, dispone de y <footer>. Incluya dos secciones y asegrese de tener al menos un elemento h1
varias herramientas que dentro de las secciones. Si lo desea puede incluir imgenes. El marcado podra ser
puede usar para crear similar al siguiente:
documentos HTML.
Para PC, puede usar los <!doctype html>
editores de texto Bloc <html>
de notas o Notepad++, <head>
los editores HTML- <meta charset="utf-8" />
Kit o KompoZer, <title>Mi pgina</title>
o herramientas de
</head>
desarrollo como
Microsoft VisualStudio, <body>
Visual Studio para <header>
Web o Microsoft <h1>Seleccionar un estilo de concierto</h1>
ExpressionWeb. </header>
<section>
<h1>Sinfonas</h1>
<p>Una sinfona es un tipo de composicin musical generalmente
interpretado por una orquesta completa.</p>
</section>
<section>
<h1>Raves</h1>
<p>Una "rave" es una reunin de gente que escucha msica y
baila; casi siempre se trata de msica electrnica, interpretada por un
grupo o un DJ en directo.</p>
</section>
<footer>
<p>Autor: Nathaniel Becker</p>
</footer>
</body>
</html>
Figura 3-4
Documento HTML con
encabezado, pie de pgina
y secciones
2. Guarde el archivo como L3-MiPgina.html

3. Valide el documento utilizando el servicio de validacin de marcado de W3C
en http://validator.w3.org. Si necesita ayuda para hacerlo, consulte la leccin 2.
con el siguiente ejercicio durante esta sesin.
ELEMENTO NAV
El elemento nav define un bloque de vnculos de exploracin. El elemento nav es til
para crear un conjunto de vnculos de navegacin para la navegacin principal de su
documento, una tabla de contenido, rutas de navegacin en un pie de pgina o vnculos
Anterior-Inicio-Siguiente.
El W3C indica que no es necesario usar etiquetas <nav> para todos los vnculos de
navegacin, solo para los bloques de vnculos ms importantes. Puesto que las etiquetas
<nav> son interpretadas por parte de software de lectura de pantalla para usuarios con
discapacidad visual, el software puede determinar si los vnculos de navegacin deben
estar disponibles para disponibles inmediatamente o no, dependiendo de su importancia.
En el siguiente ejemplo se muestra el uso de la etiqueta <nav>:
<nav>
<a href="/hiphop/">Hip-hop</a>
<a href="/modern/">Moderno</a>
<a href="/swing/">Swing</a>
<a href="/tap/">Claqu</a>
</nav>
Figura 3-5
Vnculos sencillos creados
mediante el elemento nav
60 | Leccin 3
El siguiente es un ejemplo de marcado para vnculos Anterior-Inicio-Siguiente, con barras
verticales despus de cada elemento de navegacin para separarlo visualmente de los dems:
<nav>
<a href="http://www.example.com/Services">Anterior</a> |
<a href="http://www.example.com">Inicio</a> |
<a href="http://www.example.com/About">Siguiente</a>
</nav>
<br />
La navegacin aparece a menudo en una lista vertical, que aprender a crear ms adelante
en esta leccin.
Figura 3-6
Navegacin Anterior-
Inicio-Siguiente con barras
verticales entre los vnculos
AGREGAR EL ELEMENTO NAV A UN DOCUMENTO HTML

PREPRESE. Para agregar el elemento nav a un documento HTML, siga estos pasos:
L3-MiPgina.html si no lo est y gurdelo como L3-MiPgina-nav.html para crear un
archivo nuevo.
2. Incluya las etiquetas nav y el contenido siguientes dentro de la etiqueta <header>:
<header>
<h1>Seleccionar un estilo de concierto</h1>
<nav>
<a href="#symphonies">Sinfonas</a> |
<a href="#raves">Raves</a>
</nav>
</header>
Este bloque de navegacin se vincular a las secciones de sinfonas y raves

del documento HTML.
3. Para que funcionen los vnculos, modifique los encabezados <h1> de sinfonas
y raves como se indica a continuacin:
<h1><a id="symphonies">Sinfonas</a></h1>
<h1><a id="raves">Raves</a></h1>
4. Vuelva a guardar el archivo L3-MiPgina-nav.html y, luego, bralo en un explorador

web. Los vnculos de navegacin apareceran en una pgina web como se muestra
enla Figura 3-7.
Figura 3-7
Pgina a la que se han
agregado vnculos de
navegacin
5. Deje la herramienta de edicin y el explorador web abiertos si va a continuar con el

siguiente ejercicio durante esta sesin.
ELEMENTO DE ARTCULO
El elemento article define una parte de un documento HTML que consta de una
composicin autocontenida, independiente del resto del contenido del documento.
Elcontenido marcado con etiquetas <article> se puede distribuir en redifusin, de manera
que piense en l como contenido que tiene sentido propio. Redifusin web es el proceso
de hacer que el contenido de un sitio web est disponible para muchos sitios web...
El W3C aconseja usar el elemento de artculo en lugar del elemento de seccin para
TOME NOTA
* cualquier contenido que se pueda sindicar.
Ejemplos de contenido adecuado para el etiquetado con <article> son un artculo de revista,
una entrada de blog o el contenido de una fuente RSS. Tambin puede usar el elemento
article para contenido de acerca de y de contacto, que es independiente del resto de la
pgina en la que se muestra, pero que no necesariamente se va a hacer disponible por
redifusin.
ELEMENTO ASIDE
El elemento aside se usa para destacar contenido que est relacionado con el tema actual,
pero que interrumpira el flujo del documento si quedara alineado. Esencialmente, el
elemento aside se utiliza para informacin adecuada para barras laterales y notas. Este
contenido podra dar ms detalles sobre un tema, ofrecer vnculos a lecturas relacionadas
o mostrar definiciones de las palabras clave del prrafo. El elemento aside no cambia
la posicin del contenido ni como se muestra el contenido; simplemente permite que el
explorador y los motores de bsqueda sepan que se trata de contenido relacionado.
62 | Leccin 3
<article>
<header>
<h1>Comprender HTML5</h1>
<h2>Nuevos elementos</h2>
</header>
<p>Las nuevas etiquetas HTML5 hacen que el desarrollo de pginas web
y aplicaciones sea ms fcil que nunca. Una de las prcticas
caractersticas nuevas de HTML5 es el uso de
marcado semntico.</p>
<aside>
<h4><b>El marcado semntico</b></h4>
<p> da ms significado o una mejor definicin
a las etiquetas, de modo que quedan ms claras para los usuarios,
programas y exploradores web</p>
</aside>
<p>No se han reemplazado o actualizado todas las etiquetas HTML
para HTML5, pero algunas de las nuevas etiquetas introducidas en HTML5
hacen que el trabajo de creacin de pginas web sea mucho
ms fcil.</p>
<footer>
<p>Fecha de publicacin: <time datetime="2012-09-
03">3 de septiembre de 2012</time></p>
</footer>
</article>
Figura 3-8
Ejemplo de un
elemento aside
En la Figura 3-8 puede ver que el contenido del elemento aside no se destaca del resto
del contenido. Se podra agregar la etiqueta <hr /> de regla horizontal antes y despus el
contenido aside, que aparecera en un explorador web como se muestra en la Figura 3-9.
Figura 3-9
Uso de la etiqueta
<hr /> para agregar reglas
horizontales y destacar el
contenido del elemento
aside
Tambin se podra usar CSS para ajustar los mrgenes del contenido aside, de forma que
quedara sangrado a la izquierda y la derecha. En lecciones posteriores aprender tcnicas
de diseo CSS para mostrar contenido relacionado en un cuadro a lo largo del lado
izquierdo o derecho del texto del cuerpo correspondiente.
AGREGAR EL ELEMENTO ASIDE A UN DOCUMENTO HTML

PREPRESE. Para agregar el elemento aside a un documento HTML, siga estos pasos:
L3-MiPgina-nav.html si no lo est y gurdelo como L3-MiPgina-art-aside.html para
crear un archivo nuevo.
2. Incluya un elemento aside justo antes del pie de pgina, como se indica a
continuacin:
<aside>
<hr />
<p>Nota: La agencia antidrogas de Estados Unidos
tambin tiene inters por las fiestas "rave". Vaya a
http://www.justice.gov/dea/ongoing/raves.html para ms informacin.</p>
</aside>
3. Vuelva a guardar el archivo como L3-MiPgina-art-aside.html y visualcelo

en un explorador web. La pgina debe ser parecida a la de la Figura 3-10.
4. Valide el documento utilizando el servicio de validacin de marcado de W3C
en http://validator.w3.org.
5. Cierre el archivo. Deje la herramienta de edicin y el explorador web abierto
si va acontinuar con el siguiente ejercicio durante esta sesin.
MS INFORMACIN
Para obtener informacin sobre nuevas caractersticas de HTML5, consulte la pgina web con
informacin resumida sobre HTML5 en http://msdn.microsoft.com/en-us/hh549253 y la pgina
sobre elementos HTML del W3C en http://dev.w3.org/html5/markup/elements.html#elements.
64 | Leccin 3
Figura 3-10
Documento HTML con
elementos article y aside
Usar etiquetas para crear tablas y listas
Las tablas y listas dan estructura a cierta informacin de los documentos HTML.
Una tabla tiene filas y columnas, y muestra los datos en una cuadrcula. En HTML,
puede crear listas ordenadas y sin ordenar. Cada elemento de una lista ordenada est
marcado con un nmero o una letra. Una lista sin ordenar es una lista con vietas.
En esta seccin se describe cmo crear tablas y listas utilizando elementos HTML.
HTML5 introduce algunos elementos nuevos para tablas y listas, pero la mayora de
etiquetas y conceptos son iguales que en las especificaciones anteriores. Si alguna vez
hacreado una tabla o lista HTML, esta seccin le resultar muy sencilla.
CREAR TABLAS
Una tabla HTML tiene filas y columnas, y se usa para organizar y mostrar informacin
enun formato de cuadrcula. Algunos desarrolladores usan tablas por motivos de diseo,
por ejemplo para colocar o alinear contenido con imgenes, pero ese no es el mejor uso
delas tablas.

En cuanto al marcado, todas las tablas HTML empiezan con la etiqueta <table>. Las filas
Cmo se crea una tabla? se marcan con la etiqueta <tr>, en los encabezados de columna se usa la etiqueta <th> y las
2.4 celdas se definen con la etiqueta <td>.
A continuacin se muestra el marcado de una tabla muy bsica, con dos columnas y cinco
filas. Se han agregado comentarios para indicar las columnas y filas. Son meramente
informativos y no aparecen cuando el documento se visualiza en un explorador, como
semuestra en la Figura 3-11:
<table border="1">
<tr> 
<th>Trimestre</th> 
<th>Ventas totales</th> 
</tr>
<tr> 
<td>T1</td>
<td>4.349 $</td>
</tr>
<tr> 

<td>T2</td>
<td>2.984 $</td>
</tr>
<tr> 
<td>T3</td>
<td>3.570 $</td>
</tr>
<tr> 
<td>T4</td>
<td>7.215 $</td>
</tr>
</table>
Figura 3-11
Una tabla sencilla
Partiendo de una tabla sencilla, puede usar la etiqueta <caption> para agregar una leyenda
encima o debajo de la tabla. Para aplicar estilos alineados mediante HTML en lugar de CSS,
utilice la etiqueta <col> para aplicar estilos a toda una columna. Encontrar informacin
TOME NOTA
* sobre el formato alienado ms adelante. La etiqueta <colgroup> agrupa columnas dentro
Debe incluir los deuna tabla para que se pueda aplicar formato al grupo en vez de solo a una columna.
elementos thead y tfoot
antes del elemento tbody Al crear una tabla larga por la que hay que desplazarse en un explorador, utilice las
para que el explorador etiquetas <thead>, <tfoot> y <tbody>. El contenido del encabezado y el pie de pgina de
pueda representar el la tabla permanecer en la pgina, mientras que el contenido marcado con <tbody> se
encabezado y el pie de desplazar entre ellos.
la tabla antes de recibir
todas las filas de datos. La etiqueta <thead> crea encabezados de columna (en negrita de forma predeterminada),
yla etiqueta <tfoot> se utiliza para mostrar la ltima fila, por ejemplo una fila de totales.
La etiqueta <tbody> define todo el contenido entre el encabezado y el pie de pgina.
En el ejemplo siguiente se muestra el marcado de una tabla con tres columnas y cinco
filas. La primera fila es la de encabezados de columna y la ltima es la del pie de la tabla.
El marcado contiene tambin una leyenda por encima de la tabla. El marcado se muestra
en la Figura 3-12 representado en un explorador:
<table>
<caption>Ventas del empleado Id. 2387</caption>
<colgroup
span="2"
style="background-color:#EEE8AA;">
</colgroup>
66 | Leccin 3
Figura 3-12
Versin ms compleja
de una tabla sencilla
<colgroup
style="background-color:#00FA9A;">
</colgroup>
<thead>
<tr>
<th scope="col">Trimestre</th>
<th scope="col">Ventas totales</th>
<th scope="col">Objetivo conseguido?</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Total</th>
<th scope="col">18.118 $</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>T1</td>
<td>4.349 $</td>
<td>S</td>
</tr>
<tr>
<td>T2</td>
<td>2.984 $</td>
<td>No</td>
</tr>
<tr>
<td>T3</td>
<td>3.570 $</td>
<td>S</td>
</tr>
<tr>
<td>T4</td>
<td>7.215 $</td>
<td>S</td>
</tr>
</tbody>
Observe en el ejemplo anterior el uso del color de fondo de las columnas agrupadas.
Setrata de un ejemplo de formato en lnea. El atributo style utiliza uno o varios
valoresypropiedades de CSS, separados por punto y coma. Para el color HTML,
puedeusar elnombre del color o el cdigo hexadecimal. El cdigo hexadecimal
#EEE8AA produceel color ocre plido. El cdigo hexadecimal #00FA9A produce
elcolorverdeprimavera. Encontrar una carta de colores estndar de HTML en
http://www.w3schools.com/html/html_colornames.asp.
Tambin podra centrar el contenido de una celda, columna o grupo de columnas
utilizando style="text-align:center". Para encadenar varios valor y propiedades en el
mismo atributo de estilo, use una sintaxis parecida a style="color:blue;text-align:center".
CSS y sus propiedades se describen en las lecciones 4, 5 y 6 de este libro.
En la tabla 3-3 se resumen los elementos habituales usados para crear tablas en HTML5.
Tabla 3-3
Elementos habituales Elemento Descripcin
en la creacin de tablas
col Define una columna en una tabla.
colgroup Define un grupo de columnas en una tabla.
caption Marca texto como leyenda de una tabla.
table Define una tabla.
Define un grupo de filas en una tabla para realizar
tbody
tareas de formato y de desplazamiento.
td Define una celda de una tabla.
Define un grupo de filas de pie en una tabla para
tfoot
realizar tareas de formato y de desplazamiento.
th Define una celda de encabezado de tabla.
Define un grupo de filas de encabezado en una tabla
thead
para realizar tareas de formato y de desplazamiento.
Define una fila de una tabla.
tr
Si ha creado tablas con HTML 4 o versiones anteriores, quizs conozca los elementos
cellpadding, cellspacing, frame, rules, summary y width. Se han degradado y no son
TOME NOTA
* compatibles con HTML5.
68 | Leccin 3
CREAR UNA TABLA

PREPRESE. Para crear una tabla, siga estos pasos:
1. Utilizando un editor HTML o una herramienta de desarrollo de aplicaciones y un
explorador web, cree un archivo con el nombre L3-PracTable.html con el marcado
siguiente:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title>Pelculas con ms recaudacin</title>
</head>
<body>
<table border="1">
<tr>
<th>Pelcula</th>
<th>Ingresos brutos</th>
</tr>
<tr>
<td>Avatar</td>
<td>2.700 millones de dlares</td>
</tr>
<tr>
<td>Titanic</td>
</tr>
<tr>
<td>El caballero oscuro</td>
</tr>
</table>
</body>
</html>
2. Ponga en cursiva el ttulo de las pelculas utilizando las etiquetas <i>.

3. Modifique la tabla para agregar una leyenda por encima que diga Pelculas con ms
recaudacin y un pie que incluya la palabra Total y 5.800 millones.
4. Cambie el fondo de toda la tabla, desde los encabezados de columna hasta el pie,
a caqui, usando el cdigo hexadecimal #F0E68C. Para hacerlo, agregue el siguiente
marcado colgroup entre <table border="1"> y <thead>, como se indica a continuacin:
<table border="1">
<colgroup
span="2"
style="background-color:#F0E68C;">
</colgroup>
<thead>
5. Guarde el archivo y visualcelo en un explorador web. La tabla acabado debe parecerse

a la de la Figura 3-13. Revise el marcado si es necesario y vuelva a guardar el archivo.
6. Cierre el archivo. Deje la herramienta de edicin y el explorador web abierto si va a
continuar con el siguiente ejercicio durante esta sesin.
Figura 3-13
Tabla de pelculas con ms
recaudacin acabada

Cmo se crean una lista CREAR LISTAS
ordenada y una lista sin Crear listas en HTML5 es fcil, especialmente si ya las ha creado las anteriores
ordenar? especificaciones de HTML. Las reglas son casi idnticas, aunque en HTML5 se ha
2.4 modificado el uso de un elemento lista y se han introducido algunos atributos nuevos.
Existen dos tipos principales de listas de HTML:
Lista ordenada: las entradas de la lista se ordenan con nmeros, de forma predeterminada.
Se utiliza la etiqueta <ol>. En una lista ordenada se pueden usar los siguientes atributos:
a. reversed: se utiliza el valor reversed, que invierte el orden de la lista, en orden
descendente. Este atributo no es compatible con la mayora de los exploradores
en el momento de escribir este libro.
b. start number: especifica el valor inicial de la lista ordenada.
c. type: especifica el tipo de marcador que se debe usar al principio de cada elemento
de la lista. El valor 1 es el predeterminado y muestra nmeros decimales, el
valor A utiliza maysculas, el valor a utiliza minsculas, el valor I utiliza
nmeros romanos en maysculas y el valor i utiliza nmeros romanos en
minsculas.
Lista sin ordenar: muestra las entradas de la lista en una lista con vietas. Utiliza
una etiqueta <ul>.
Los elementos de una lista se marcan con <li>, que indica un elemento normal de la
lista. Veamos algunos ejemplos.
La siguiente es una lista ordenada, que se muestra en un explorador en la Figura3-14:
<p>Cupcakes favoritos:</p>
<ol>
<li>Tarta de queso con pepitas de chocolate</li>
<li>Delicia de fresa</li>
<li>Crema italiana</li>
</ol>
Esta es una lista desordenada, que se muestra en un explorador web en la Figura3-15:
<p>Sabores de cupcake:</p>
<ul>
</ul>
70 | Leccin 3
Figura 3-14
Ejemplo de una
lista ordenada
Figura 3-15
Ejemplo de una
lista sin ordenar
Puede cambiar las vietas redondas de una lista desordenada simplemente aadiendo
un atributo para cambiar el aspecto de las vietas. Para usar vietas cuadradas, agregue
type="square" a la etiqueta <ul> y para usar crculos vacos, agregue type="circle". Tambin
puede agregar los atributos a elementos concretos de la lista (marcados con <li>), para que
se vean afectados puntos concretos. Por ejemplo, para que todas las vietas se muestren
como cuadrados con relleno:
<p>Sabores de cupcake:</p>
<ul type="square">
</ul>
El marcado tendra el aspecto que se muestra en la Figura 3-16.

Figura 3-16
Los elementos con vietas
tienen cuadros rellenos como
smbolos
Otro tipo de lista es la lista de definiciones. Muestra los elementos con sus definiciones
debajo del elemento de la lista y con sangra. La etiqueta <dl> define la lista, la etiqueta
<dt> marca cada trmino del elemento y la etiqueta <dd> marca cada definicin. El
siguiente es un ejemplo del marcado y en la Figura 3-17 se muestra la lista representada.
<dl>
<dt>Delicia de fresa</dt>
<dd>Crema de merengue de fresa con
pequeas fresas silvestres</dd>
<dt>Tarta de queso con pepitas de chocolate</dt>
<dd>Pepitas de chocolate mezcladas con cremosa
tarta de queso y un fondo de brownie de chocolate,
cubierto con glaseado de queso crema</dd>
<dt>Crema italiana</dt>
<dd>Torta de crema italiana coronado con glaseado de
queso crema y coco tostado</dd>
</dl>
Figura 3-17
Ejemplo de una lista
de definiciones
72 | Leccin 3
HTML5 tambin utiliza el elemento menu, que presenta una lista o men de comandos,
TOME NOTA
* normalmente con botones. W3C prefiere que se use el elemento menu solo para mens
El elemento de men se contextuales, listas de controles de formularios y comandos, barras de herramientas y
degrad en HTML 4.01
otros elementos similares. El elemento HTML5 menu no es compatible con muchos
pero se ha redefinido
exploradores en el momento de escribir este libro.
en HTML5.
CREAR UNA LISTA ORDENADA

PREPRESE. Para crear una lista ordenada, siga estos pasos:
1. Utilizando un editor HTML o una herramienta de desarrollo de aplicaciones
y un explorador web, escriba lo siguiente:
<!doctype html>
<html>
<body>
<ol>
<li>Equipos de sobremesa</li>
<li>Porttiles</li>
<li>Tabletas</li>
<li>Smartphones</li>
</ol>
</body>
</html>
2. Guarde el archivo como L3-OrderedList.html y visualcelo en un explorador web.

3. Para cambiar los marcadores iniciales a maysculas, inserte type="A" en la etiqueta
<ol>, as: <ol type="A">
4. Guarde el archivo y visualcelo en un explorador web. Empiezan ahora los elementos
de la lista con A, B, C y D?
5. Para empezar la numeracin de la lista con el 5, inserte start="5" en la etiqueta <ol>.
Reemplace la etiqueta actual <ol> con esto: <ol start="5">
6. Guarde el archivo y visualcelo en un explorador web. Empiezan ahora los elementos
de la lista con 5 y terminan con 8?
7. Cierre el archivo. Deje la herramienta de edicin y el explorador web abierto si va
a continuar con el siguiente ejercicio durante esta sesin.
Elegir y configurar etiquetas HTML5 para la entrada y validacin

Los desarrolladores usan formularios web como la interfaz para recopilar informacin de
CONCLUSIN los usuarios del sitio web y de la aplicacin cliente. Los elementos de entrada HTML se
usan para crear la interfaz de un formulario y asegurar que la informacin de los usuarios
se recopila siempre de la misma forma. La validacin garantiza que la informacin
especificada tiene el formato correcto y se puede usar antes de enviar los datos al servidor.
En HTML, la entrada y validacin se aplican a los formularios. Un formulario web es una

pgina web que proporciona campos de entrada para que un usuario ingrese datos, que se
envan a un servidor para su procesamiento. A partir de ah, la informacin se almacena en
una base de datos o se reenva a un destinatario.
Los formularios web se utilizan como interfaz para muchas tareas distintas:
Iniciar sesin en un sitio web, servidor o red
Recopilar informacin de contacto, como nombre, direccin de correo electrnico,
nmero de telfono y direccin postal
Suscribirse al correo electrnico o los boletines de una organizacin
Captar comentarios de los usuarios despus de un artculo en un sitio web

Seleccionar las preferencias en una pgina web
Escribir informacin de reservas
Muchas aplicaciones cliente utilizan algn tipo de formulario web para interactuar con
el usuario.
Los elementos de entrada HTML se usan para crear la interfaz de un formulario y asegurar
que la informacin de los usuarios se recopila siempre de la misma forma. La validacin
garantiza que la informacin especificada tiene el formato correcto y se puede usar antes
de enviar los datos al servidor. Por ejemplo, si se escribe 637 Park Street en un campo
de direccin web en el que se espera algo como http://www.example.com, se produce
un error de validacin y se solicita al usuario que corrija la entrada. Adems, la validacin
reduce la cantidad de correo no deseado y contenido malicioso que puede llegar al
servidor o al destinatario de los datos del formulario.
Comprender la entrada y los formularios

La mayora de formularios web, o al menos muchos campos en la mayora de los
formularios, requieren que la entrada tenga un formato especfico. Los nuevos atributos
para entrada y validacin de HTML5 son intuitivos, fciles de usar y reemplazan a la
gran cantidad de scripting que se requera en HTML 4.01 y versiones anteriores.
La entrada de formulario es la informacin que el usuario ingresa en los campos de un

TOME NOTA
* formulario en una aplicacin web o de cliente. Por motivos de brevedad, utilizamos el
Compruebe en varios trmino formulario web casi siempre, pero tambin se aplica a las aplicaciones cliente.
exploradores distintos
HTML5 introduce varios nuevos atributos de elemento para entrada y formularios, por
el funcionamiento de
ejemplo url para especificar una nica direccin web, correo electrnico para especificar
todas las formas que cree
durante el desarrollo. una nica direccin de correo electrnico o una lista de direcciones de correo electrnico,
As se garantiza que los y bsqueda para pedir a los usuarios que introduzcan el texto que desean buscar. Los
elementos y atributos nuevos atributos facilitan mucho el desarrollo de formularios. Lo que sola requerir
que seleccione funcionan gran cantidad de scripting, se hacer lograr ahora con etiquetas HTML5.
correctamente o el El nico inconveniente es que muchos de los nuevos atributos todava no son compatibles
mtodo de respaldo con todos los exploradores principales. Sin embargo, si utiliza un nuevo elemento o
recopila entrada atributo que todava no es compatible, el explorador vuelve a una pantalla alternativa,
aceptable. una forma diferente de entrada u otra opcin similar.
HTML5 introduce dos atributos nuevos del elemento de formulario: autocomplete y
novalidate Todos los atributos del elemento de formulario se enumeran en la tabla 3-4;
los atributos nuevos se indican con un asterisco doble.
Tabla 3-4
Atributos del elemento de Atributo Valor Descripcin
forma usados en HTML5 accept-charset character_set Especifica el conjunto de codificaciones
decaracteres que acepta el servidor.
action URL Especifica la direccin web a la que se envan
los datos del formulario.
autocomplete** on Especifica si el rellenado automtico est
off activado o desactivado en un formulario o
un campo de entrada. Puede estar activado
(on) para campos de entrada concretos
y desactivado (off) para el formulario,
oviceversa.
enctype application/x-www-form- Especifica el tipo de codificacin de los datos
urlencoded multipart/ del formulario cuando los datos se enven a un
form-data text/plain servidor. Solo se utiliza para mtodo = "post".
(contina)
74 | Leccin 3
Tabla 3-4
continuacin Atributo Valor Descripcin
method get Especifica el mtodo HTTP (transmisin) usado
post al enviar los datos del formulario. Utilice get
para recuperar datos y post para almacenar
o actualizar datos, o para enviar correo
electrnico.
name text Especifica el nombre de un formulario, que
se utiliza para hacer referencia a los datos
del formulario una vez que el formulario
se ha enviado.
novalidate** novalidate Atributo booleano que especifica que los
datos del formulario (entrada del usuario) no
deben validarse cuando se envan. En HTML5
tambin se pueden definir atributos booleanos
mencionando el atributo sin un signo de igual
osin un valor asignado.
target _blank Especifica dnde se debe mostrar la respuesta
_self recibida despus de enviar el formulario.
_parent
_blank carga la respuesta en una nueva ventana
_top
del explorador, que no tiene nombre.
_self carga la respuesta en la ventana actual.
Esel valor predeterminado, por lo que su uso
no es necesario.
_parent carga la respuesta en la ventana
LISTO PARA CERTIFICACIN principal (la ventana del explorador que
Qu atributos especficos abre laventana del formulario).
de HTML5 se usan para
restringir la entrada en _top carga la respuesta en la ventana completa
un formulario? del explorador.
2.5
**Nuevo en HTML5.
HTML5 introduce muchos atributos para el elemento de entrada. Los atributos del
elemento de entrada se enumeran en la tabla 3-5; los atributos nuevos en HTML5 se
indican con un asterisco doble.
Tabla 3-5
Atributos del elemento de Atributo Valor Descripcin
entrada usados en HTML5
accept audio/* Especifica los tipos de archivo que acepta
vdeo/* el servidor. Solo se usa para type="file".
image/*
MIME_type
alt text Especifica el texto alternativo para las
imgenes. Solo se usa para type="image".
Se suele usar cuando se crea un botn
para enviar personalizado desde el propio
archivo de imagen.
autocomplete** on Especifica si el rellenado automtico est
off activado o desactivado en un formulario o
un campo de entrada. Puede estar activado
(on) para campos de entrada concretos
y desactivado (off) para el formulario,
o viceversa.
(contina)
Tabla 3-5
autofocus** autofocus Atributo booleano que especifica que el
foco debe estar en un control concreto
en cuanto se carga la pgina.
checked checked Especifica que un elemento de entrada
debe estar ya seleccionado cuando
se cargue la pgina. Solo se usa para
type="checkbox" o type="radio".
disabled disabled Desactiva un elemento de entrada.
form** form_id Especifica los formularios a los que

pertenece un elemento de entrada.
formaction** URL Especifica la direccin web del archivo que
procesar el control de entrada cuando se
enve el formulario.
formenctype** application/x- www- Especifica el tipo de codificacin de los
form- urlencoded datos del formulario cuando los datos se
multipart/ form-data enven a un servidor. Solo se utiliza para
text/plain mtodo = "post".
formmethod** get post Especifica el mtodo HTTP (transmisin)
usado para enviar los datos del formulario
a una direccin web.
formnovalidate** formnovalidate Atributo booleano que impide la validacin
al enviar datos de entrada.
formtarget** _blank Especifica una palabra clave que indica
_self dnde mostrar la respuesta recibida
_parent despus de enviar el formulario.
_top
height pixels Especifica la altura de un elemento

de entrada. Solo se usa con la entrada
type="image".
list** datalist_id Hace referencia a un elemento de lista
de datos con contenido predefinido para
el rellenado automtico, por ejemplo
la seleccin de un elemento en una
lista desplegable.
max** number date Especifica el valor mximo de un elemento
de entrada.
min** number date Especifica el valor mnimo de un elemento
de entrada.
multiple** multiple Atributo booleano que especifica que el
usuario puede introducir varios valores.
pattern** regexp Proporciona un formato (una expresin
regular) para el campo de entrada. El valor
del elemento de entrada se compara con
la expresin.
(contina)
76 | Leccin 3
Tabla 3-5
placeholder** text Muestra una palabra clave o frase corta
que describe el valor esperado de un
campo de entrada, por ejemplo Correo
electrnico para un campo de entrada de
correo electrnico. El marcador de posicin
desaparece cuando el usuario especifica
datos.
readonly readonly Restringe un campo de entrada a solo
lectura.
required** required Atributo booleano que exige que un campo
de entrada se rellene antes de enviar el
formulario.
size number Especifica la anchura de un elemento
deentrada, en nmero de caracteres.
src URL Especifica la direccin web de la imagen

que se usa como botn de enviar. Solo
se usa para type="image".
step** number Especifica el nmero de intervalos
aceptado para un elemento de entrada.
Sepuede usar con los atributos max y
min para crear un intervalo de valores.
Por ejemplo, imagine que va a crear un
control deslizante para realizar la entrada.
Si define step="3", cada vez que el usuario
mueva el control deslizante, el valor de
entrada aumentar o disminuir en 3.
type button, checkbox, color, Especifica el tipo de elemento de entrada
date, datetime, datetime- que se va a mostrar.
local, email, file, hidden,
image, month, number,
password, radio, range,
reset, search, submit, tel,
text, time, url, week
value text Especifica el valor de un elemento
deentrada.
width pixels Especifica la anchura de un elemento
de entrada. Solo se usa con la entrada
type="image".
**Nuevo en HTML5.
EXPLORAR LA CREACIN DE FORMULARIOS, Y LOS VALORES Y ATRIBUTOS

DEENTRADA
Para crear un formulario, utilice las etiquetas de apertura y cierre <form>. Todo el
contenido y los campos del formulario deben ir entre las dos etiquetas <form>. Casi
todos los formularios contienen tambin el atributo id en la etiqueta de apertura, as:
<form id="palabra clave">
<contenido y campos>
</form>
El elemento fieldset se utiliza en muchos formularios para agrupar elementos relacionados.

La etiqueta <fieldset> dibuja un cuadro alrededor de elementos individuales y/o alrededor
de todo el formulario, como se muestra en la Figura 3-18.
Figura 3-18
El elemento fieldset agrupa
los elementos relacionados
de un formulario y agrega
un borde.
Si el formulario est incluido en un documento HTML con otros objetos, puede usar la
etiqueta <div> al principio y al final del formulario para separarlo del resto del contenido.
Si utiliza la etiqueta <div> tambin puede incluir formato alineado, si en el formato se
utilizan etiquetas para alinear campos en vertical de forma rpida y sencilla, sin tener que
crear una hoja de estilos CSS. La etiqueta <div> utiliza el atributo id y aparece antes de la
primera etiqueta <form>. El elemento label muestra la etiqueta de cada campo. Un ejemplo
de marcado de un formulario muy sencillo es:
<div id="contact-form"
style="font-family:'Arial Narrow','Nimbus Sans
L',sans-serif;">
<form id="contact" method="post" action="">
<fieldset>
<label for="name">Nombre</label>
<input type="text" name="name" />
</fieldset>
<fieldset>
<label for="email">Correo electrnico</label>
<input type="email" name="email" />
</fieldset>
</form>
</div> 
El formulario se muestra en la Figura 3-19.

78 | Leccin 3
Figura 3-19
Un formulario muy sencillo
Veamos algunos de los nuevos atributos y valores de HTML5. Si bien en esta seccin no
se aborda todo lo mencionado en las tablas 3-4 y 3-5, se describen y muestran ejemplos
de algunos de los atributos y valores ms usados.
El atributo required requiere informacin en un campo cuando se enva el formulario.
Elatributo email (que se muestra en el ejemplo anterior) requiere que el usuario escriba
una direccin de correo electrnico. El explorador alertar al usuario con un mensaje
de error para solucionar los posibles problemas.
Un ejemplo de un elemento de entrada con los atributos required e email es:
<input type="email" required />
Para que el formulario resulte ms fcil de usar, agregue texto de marcador de posicin.
Eltexto de marcador de posicin aparece dentro de un campo de entrada cuando el
campo est vaco. Ayuda a los usuarios a entender el tipo de informacin que deben
introducir o seleccionar. Al hacer clic en el campo de entrada o se llega a l presionando
la tecla de tabulacin y se empieza a escribir, el texto que se inserta reemplaza el texto
demarcador de posicin. Un ejemplo del atributo placeholder es:
<input name="fName" placeholder="Nombre" />
El atributo pattern proporciona un formato (una expresin regular) para un campo de
entrada, que se usa para validar lo que se ingrese en el campo. Por ejemplo, supongamos
que hay un campo de entrada requerido para el identificador de empleado. Todos los
identificadores de empleado comienzan con dos letras maysculas seguidas de cuatro
dgitos. Se usara un campo de entrada de texto con los atributos de requerido y patrn
para asegurar que el campo (1) se ha rellenado cuando el usuario hace clic en el botn
para enviar y (2) contiene un valor que coincide con el formato correcto de identificador
de empleado. Si el usuario pasa el mouse sobre el campo, se muestra el mensaje del
atributo title, que se agrega por separado. Un ejemplo del atributo pattern es:
<input type="text" id="empID" name="EmployeeID"
required pattern="[A-Z]{2}[0-9]{4}"
title="El identificador de empleado est formado por dos maysculas seguidas
por cuatro dgitos">
Puede usar el atributo pattern con estos tipos de <input>: text, search, url, telephone, email
y password.
El elemento datalist le permite presentar al usuario una lista desplegable de opciones

entre las que puede elegir. Se pueden seleccionar solamente las opciones de la lista.
Alternativamente, podra insertar type="text" en el elemento input para crear un cuadro
de texto en el que el usuario escribe texto. En el siguiente ejemplo, el usuario puede
seleccionar uno de los tres pases:
<input id="country" name="country"

size="30" list="countries" />
<datalist id="countries">
<option value="Estados Unidos">
<option value="Canad">
<option value="Reino Unido">
</datalist>
El valor search del atributo type le permite crear una funcin de bsqueda para una pgina web.
Un ejemplo de marcado es:
<form>
<input name="search" required>
<input type="submit" value="Search">
</form>
Por ltimo, el atributo autofocus mueve el enfoque a un campo de entrada determinado

cuando se carga una pgina web. Un ejemplo autofocus es cuando, al abrir una pgina web
de motor de bsqueda, el punto de insercin aparece automticamente en el cuadro de
entrada para que se puedan escribir trminos de bsqueda sin tener que hacer clic primero
en el cuadro. Un ejemplo de marcado para poner el foco en un campo denominado fname
cuando se carga una pgina es:
<input type="text" name="fname"

autofocus="autofocus" />
autofocus, en el pasado, se controlaba mediante JavaScript y, si un usuario desactiva

JavaScript en un explorador web, la funcin de enfoque automtico no funciona. Para
solucionar este problema, el atributo HTML5 autofocus es compatible con todos los
principales exploradores y se comporta de la misma forma en todos los sitios web.
CREAR UN FORMULARIO WEB SENCILLO

PREPRESE. Para crear un formulario web sencillo, siga estos pasos:
1. Utilizando un editor HTML o una herramienta de desarrollo aplicaciones y un
explorador web, cree un formulario web sencillo con el siguiente marcado:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contacto</title>
</head>
<body>
<div id="contact-form">
<form id="contact" method="post" action="">

<fieldset>
<label for="custname">Nombre</label>
<input type="text" id="custname" />
80 | Leccin 3
<label for="email">Correo electrnico</label>

<input type="email" id="email" />
<label for="phone">Telfono</label>
<input type="text" id="phone" />
<label for="message">Preguntas o
comentarios</label>
<textarea name="message"></textarea>
<input type="submit" name="submit" id="submit"

value="Enviar" />
</fieldset>
</form>
</div>
</body>
</html>
2. Guarde el archivo como L3-WebForm-orig.html La versin representada se muestra

enla Figura 3-20.
Figura 3-20
El principio de un
formulario web
3. El formulario web parece no estar bien estructurado. Lo mejor sera que usara CSS
para aplicar alineacin, pero como todava no conoce CSS, puede usar otra solucin
para que los campos estn alineados verticalmente. Un mtodo es agregar etiquetas
<fieldset> de apertura y cierre en torno a cada par etiqueta/entrada. As se alinearan
verticalmente los campos y los cuadros que hay entre ellos. El uso de etiquetas de <p>
apertura y cierre en lugar de etiquetas <fieldset> obtendra el mismo resultado, pero
sin agregar cuadros. Para este ejercicio, utilice las etiquetas <p>. En la Figura 3-21 se
muestra el mismo formulario web con etiquetas <p> en torno a los pares etiqueta/
entrada, incluido el campo de comentarios.
Figura 3-21
Un formulario web con
etiquetas <p> para alinear
los campos verticalmente
4. Agregue texto de marcador de posicin a todos los campos. El resultado sera parecido
a la Figura 3-22, si se visualiza en el navegador web Mozilla Firefox.
Figura 3-22
Un formulario web con
marcadores de posicin
en cada campo
5. Guarde el archivo como L3-WebForm-placeholders.html

6. Deje el archivo y la herramienta de edicin abiertos si va a continuar con el siguiente
ejercicio durante esta sesin.
MS INFORMACIN
Para obtener ms informacin sobre los atributos del elemento de entrada de HTML5, visite el sitio
web de W3C.org en http://bit.ly/I1PW3P.
Comprender la validacin
HTML5 ofrece nuevos atributos que validan los campos de un formulario web
cuando los usuarios van introduciendo datos o cuando hacen clic en el botn
para enviar. Dichos atributos son required, email, pattern, etc.
82 | Leccin 3
Validacin es el proceso de comprobar que la informacin ingresada o captada en

un formulario est en el formato correcto y se puede usar antes de enviar los datos
alservidor. Entre otras cosas, durante la validacin se comprueba que:
No hay campos obligatorios vacos
Las direcciones de correo electrnico son vlidas
Las fechas son vlidas
No hay texto en un campo numrico, o viceversa
Al usar HTML 4.01 y especificaciones anteriores, a menudo haba que usar gran cantidad
de JavaScript o scripting de otro lenguaje para crear reglas de validez y mensajes de
respuesta personalizados, o para determinar si un elemento es vlido o no.
En HTML5, varios de los tipos de elemento de entrada descritos en la seccin anterior
proporcionan validacin automtica de la entrada, es decir, el explorador comprueba los
datos que introduce el usuario. Esto se conoce como validacin del lado cliente, porque
LISTO PARA CERTIFICACIN los datos se validan antes de su envo al servidor. En los casos en que el servidor valida
Cmo valida HTML5 los los datos recibidos desde un formulario de entrada, se denomina validacin del lado
datos que especifica un servidor. Si el usuario introduce el tipo incorrecto de datos en un campo, por ejemplo
usuario en un formulario? una direccin de correo electrnico en un campo con el atributo url, el explorador indica
2.5 al usuario que escriba una URL vlida. Echemos un vistazo a ejemplos de mensajes
de error predeterminados que se generan durante la validacin automtica.
El atributo required impide que queden vacos campos que deben rellenarse. Si un usuario
no rellena un campo requerido y hace clic en el botn para enviar, aparece un mensaje
de error como se muestra en la Figura 3-23. En este ejemplo se utiliza el explorador
web Mozilla Firefox.
Figura 3-23
Mensaje de error en el
explorador Firefox sobre
un campo obligatorio
HTML5 tambin ofrece la validacin de las direcciones web especificadas en los

campos mediante la construccin <input type="url">, y de los nmeros especificados en los
campos mediante la construccin <input type="number">. Si utiliza los atributos min y max
con type="number", recibir un mensaje de error del explorador si especifica un nmero
demasiado pequeo o demasiado grande.
Por ltimo, el atributo pattern impide que el usuario introduzca datos que no siguen la
expresin del patrn. En este ejemplo, el atributo pattern valida un cdigo postal de cinco
dgitos:
<input type= "text" name= "cdigo postal"
pattern= "[0-9] {5}"
title= "Cdigo postal de cinco dgitos" />
Si se introducen datos incorrectos en el campo Cdigo postal en el explorador Firefox
se genera el mensaje de error que se muestra en la Figura 3-24.
Figura 3-24
Mensaje de error en
el explora Firefox si se
especifica un patrn
incorrecto
Como ya se ha indicado, no hace falta ningn marcado para activar la validacin de
formularios HTML5, que est activada de forma predeterminada. Para desactivarla,
utilice el atributo novalidate para campos de entrada concretos.
AGREGAR CAMPOS DE VALIDACIN A UN FORMULARIO WEB

PREPRESE. Para agregar campos de validacin a un formulario web, siga estos pasos:
TOME NOTA
* 1. En un editor HTML o una herramienta de desarrollo de aplicaciones, abra
Tambin debe validar
los formularios web L3-WebForm-placeholders.html
de la misma forma que 2. Guarde el archivo como L3-WebForm-valid.html
los documentos HTML 3. Agregue el atributo required al campo de correo electrnico, as:
normales, utilizando el
servicio de validacin <p>
de marcado de W3C en <label for="email">Correo electrnico</label>
http://validator.w3.org. <input type="email" name="correo electrnico" required
placeholder="Direccin de correo electrnico">
</p>
4. Agregue el atributo pattern al campo de telfono. La expresin debe restringir la

entrada al prefijo de rea y nmero de telfono, con el formato XXX-XXX-XXXX, as:
<p>
<label for="phone">Telfono</label>
<input type="text" name="telfono" pattern="[0-9]{3}-
[0-9]{3}-[0-9]{4}" placeholder="Nmero de telfono">
</p>
5. Guarde el archivo y visualcelo en un explorador web. Escriba texto en todos los campos
de entrada excepto el de correo electrnico y haga clic en el botn Enviar. Recibi un
mensaje de error que se le indica que introduzca una direccin de correo electrnico?
6. Vuelva a escribir texto en todos los campos, incluido el de correo electrnico, pero
esta vez escriba un nmero de telfono sin el prefijo de rea, y haga clic en Enviar.
Recibe un error relativo al campo de nmero de telfono?
7. Cierre el archivo, la herramienta de edicin o de desarrollo de aplicaciones,
y el explorador web.

HTML5 introduce varios elementos nuevos para organizar el contenido y los
formularios. Representan el nuevo marcado semntico que es una parte importante
de HTML5.
El marcado semntico utiliza nombres de etiqueta que son intuitivos, lo que facilita la
creacin y modificacin de documentos HTML. Tambin es ms fcil su interpretacin
por parte de exploradores web y otros programas.
documento HTML estn header, footer, section, nav, article y aside. Estos elementos
reducen el nmero de etiquetas div necesarias en un documento.
Las tablas y listas dan estructura a cierta informacin de los documentos HTML. Una
tabla tiene filas y columnas, y muestra los datos en una cuadrcula. En HTML, puede
(contina)
84 | Leccin 3
crear listas ordenadas y sin ordenar. Cada elemento de una lista ordenada est
marcado con un nmero o una letra. Una lista sin ordenar es una lista con vietas.
Los desarrolladores usan formularios web como la interfaz para recopilar
informacin de los usuarios del sitio web y de la aplicacin cliente. Los elementos
de entrada HTML se usan para crear la interfaz de un formulario y asegurar que
la informacin de los usuarios se recopila siempre de la misma forma.
La mayora de formularios web, o al menos muchos campos en la mayora de los
formularios, requieren que la entrada tenga un formato especfico. Los nuevos
atributos para entrada y validacin de HTML5 son intuitivos, fciles de usar
y reemplazan a la gran cantidad de scripting que se requera en HTML 4.01
yversiones anteriores.
La validacin garantiza que la informacin especificada en un campo de entrada
de un formulario web tiene el formato correcto y se puede usar antes de enviar
los datos al servidor.
HTML5 ofrece nuevos atributos que validan los campos de un formulario web
cuando los usuarios van introduciendo datos o cuando hacen clic en el botn
para enviar. Dichos atributos son required, email, pattern, etc.
1. Una HTML contiene filas y columnas, y se usa para mostrar
informacin en un formato de cuadrcula.
2. La clase y el identificador son atributos , lo que significa que
se pueden usar con cualquier elemento HTML.
3. Una lista ordena las entradas de la lista mediante nmeros,
de forma predeterminada.
4. Una lista muestra las entradas en una lista con vietas.
5. El elemento de HTML5 presenta una lista (o men) de comandos,
generalmente con botones.
6. La de formulario es la informacin que el usuario ingresa en los
campos de informacin en una aplicacin web o cliente.
7. El atributo requiere informacin en un campo cuando se enva
el formulario.
8. El texto de aparece dentro de un campo de entrada cuando el
campo est vaco. Ayuda a los usuarios a entender el tipo de informacin que deben
introducir o seleccionar.
9. es el proceso de comprobar que la informacin ingresada o captada
en un formulario tiene el formato correcto y se puede usar antes de enviar los datos al
servidor.
10. El atributo mueve el enfoque a un campo de entrada determinado
cuando se carga una pgina web.
Varias opciones
1. Qu elemento HTML5 define subdivisiones en un documento, como captulos, partes
de una tesis o partes de una pgina web cuyo contenido es distinto de los dems?
a. aside
b. seccin
c. header
d. article
2. Qu elemento HTML5 define una parte de un documento HTML que consta

deuna composicin autnoma que es independiente del resto de los contenidos
eneldocumento y puede sindicarse?
a. aside
b. seccin
c. header
d. article
3. Qu elemento HTML5 se utiliza para definir contenido que est relacionado con
eltema actual pero que interrumpira el flujo del documento si se deja alineado?
a. aside
b. seccin
c. header
d. article
4. Qu atributo HTML5 proporciona un formato (una expresin regular) para
uncampo de entrada, que se utiliza para validar lo que se escribe en el campo?
a. pattern
b. autofocus
c. required
d. placeholder
5. Cul de las siguientes opciones no comprueba la validacin ni devuelve un error,
deforma predeterminada, si no es vlida?
a. No hay campos obligatorios vacos
b. Direcciones de correo electrnico vlidas
c. Direccin de correo electrnico al destinatario equivocado
d. Texto en un campo numrico o viceversa
6. Cul de las siguientes opciones es un uso prctico para un formulario web?
a. Reunir informacin de contacto de un usuario
b. Captar comentarios de los usuarios despus de un artculo en un sitio web
c. Respuestas a y b
d. Ni a ni b
7. Cules de las siguientes opciones son nuevos atributos de formulario en HTML5?
(Seleccione todas las respuestas que correspondan).
a. autocomplete
b. target
c. method
d. novalidate
8. Qu expresin del atributo de patrn usara para introducir un cdigo de producto
que consta de tres dgitos, separados por un guin y luego una sola letra minscula?
a. [a-z]{1}-[0-9]{3}
b. [0-9]{3}-[a-z]{1}
c. [A-Z]{3}-[0-9]{1}
d. [0-9]{1}-[a-z]{3}
9. Cul de las siguientes opciones muestra una palabra clave o una frase corta que
describe el valor esperado de un campo de entrada y luego desaparece cuando un
usuario especifica datos?
a. label
b. placeholder
c. title
d. email
86 | Leccin 3
10. Cul es el formato de la etiqueta de HTML5 que valida una direccin de correo
electrnico?
a. <input label="email" name="URL">
b. <form id="email">
c. <label for="email">Correo electrnico</label>
d. <input type = "email" name = "email">
Verdadero/Falso
VF1.
En una tabla, el elemento tfoot debe aparecer antes del elemento tbody.
VF2.Puede usar nmeros o letras para cada elemento de una lista ordenada.
VF3. Puede especificar la altura de un elemento de entrada utilizando el atributo size.
VF4. El elemento de etiqueta muestra la leyenda, o ttulo, para una tabla.
VF5. El elemento nav define un bloque de vnculos de exploracin.
Escenario 3-1: Marcado para un artculo de boletn
Sally Rowe, la controladora de documentos en Malted Milk Media, desea publicar una
serie de artculos en la intranet de la empresa con respecto a la seguridad y el control de
versiones de documentos. Necesita crear un esqueleto del marcado de HTML5 para un
artculo que aparecer en el boletn mensual en lnea creado por uno de los desarrolladores
web. Cada artculo tendr un ttulo y subttulo, varios prrafos de texto, y su nombre y
la fecha del artculo en el pie de pgina. Cmo debe verse el marcado de su artculo?
Escenario 3-2: Visualizacin de tablas largas en HTML

Vince genera informes contables para el vicepresidente de finanzas de Momentum Strategies,
una empresa de relaciones pblicas orientada a las campaas polticas. Vince imprime
regularmente tablas de dos o tres pginas de largo y entrega copias impresas al personal de
administracin senior. Desea publicarlas en un rea segura de la intranet de la empresa, pero
las filas de datos se separan desde de los ttulos de las columnas y la lnea de totales al final.
Desea saber cmo presentar las tablas correctamente en HTML5. Qu le dice?
Escenario 3-3: Creacin de un glosario de trminos
Waylon es un estudiante que trabaja en una monografa. Su instructor requiere que cada
estudiante d formato al documento para su visualizacin en la Web. Waylon desea incluir
un glosario de trminos al final del documento, pero no puede producir la apariencia
correcta utilizando una lista desordenada. Qu marcado sera ms adecuado para el
glosario de Waylon?
Escenario 3-4: Usar tipos de entrada apropiados en un formulario web

Margie est creando y probando un formulario web que incluye un campo de correo
electrnico, un campo de direccin web y un campo de cdigo postal, entre otros. Cuando
pide a unos compaeros de trabajo que prueben el formulario, descubre que a menudo
especifican la direccin de correo electrnico en el campo de direccin web por error, y a
veces ingresan demasiados o muy pocos nmeros en el campo de cdigo postal. No desea
usar una expresin de patrn porque dice que es demasiado complicado. Qu otros tipos
de entrada puede usar Margie?
Comprender los LECCIN 4
principios bsicos de
CSS: flujo de contenido,
posicionamiento yestilo

del examen MTA
Comprender los principios bsicos Entender los conceptos bsicos 3.1
de CSS de CSS.
TRMINOS CLAVE
posicionamiento absoluto propiedad de familia de fuentes
flujo de bloque desbordamiento oculto
cuadro de lmite flujo alineado
Hojas de estilo en cascada monospace
clase reglas
CSS3 sans serif
declaracin desbordamiento de desplazamiento
posicionamiento flotante selector
font desbordamiento visible
Un diseador de su compaa, Malted Milk Media, ha creado un diseo de prueba

de una aplicacin en lnea para un nuevo cliente, Trusty Lawn Care, Inc., y a usted
le piden que trabaje en el proyecto. Necesita comprender bien el funcionamiento
de CSS y cmo sacarle el mximo partido.
Comprender los principios bsicos de CSS
CSS es una herramienta fundamental para conseguir, en gran medida, el aspecto y el

comportamiento de aplicaciones mviles modernas y de sitios web. Para crear la parte
de una aplicacin o un sitio web que utiliza el usuario, y especialmente para mantener
CONCLUSIN su aspecto correcto y agradable segn se realizan cambios funcionales durante su vida
til, debe entender bien CSS y su funcionamiento CSS con otras herramientas, incluidos
HTML y JavaScript. Tambin le resultar mucho ms fcil estimar la cantidad de trabajo
necesario para proyectos concretos cuando conozca plenamente los conceptos de estilo
de interfaz de usuario tal como se usan en CSS.
87
88 | Leccin 4
Piense en el sitio web de Trusty Lawn Care. En la parte superior estn las palabras Trusty
Lawn Care: es el ttulo o encabezado. En ese encabezado, cada una de las letras podra
mostrarse en cursiva, negrita o incluso en color. Las letras tendrn un tamao concreto
y pertenecern a una fuente especfica. Los desarrolladores web experimentados tienen
a su disposicin muchos otros efectos especiales. Todos estos elementos de presentacin,
que no son contenido, forman parte del estilo del sitio web. Hojas de estilo en cascada
(CSS) es un lenguaje que define el estilo de los elementos HTML.
Qu significa aqu en cascada? La razn es que uno de los principios originales de
LISTO PARA CERTIFICACIN HTML es que el aspecto de un elemento se controla no solo mediante CSS, sino tambin
Cul es la finalidad mediante la forma en que el usuario configura su explorador o escritorio. Un usuario final
de CSS? con discapacidad visual puede, por ejemplo, solicitar que el contenido se muestre en un
3.1 tamao de fuente especialmente grande. En la teora de HTML, la definicin del aspecto
se aplica en cascada entre estas distintas hojas de estilo.
Es habitual que los diseadores web llamen el archivo que contiene las reglas CSS hoja de
TOME NOTA
* estilo o la CSS. Algunos codificadores de estilo y muchos programadores lo denominan
el origen CSS o archivo CSS.
Como se ha descrito en lecciones anteriores, HTML controla la estructura del contenido.

CSS controla el formato del contenido. CSS3 es la versin de CSS que corresponde a
HTML5 y casi todos los exploradores web modernos admiten CSS3. Este libro parte
del principio de que las herramientas modernas aprovechan los mismos estndares para
la creacin de aplicaciones mviles: HTML, CSS y JavaScript tambin permiten crear
aplicaciones.
Un aspecto positivo de CSS3 es que es compatible con versiones anteriores de CSS,
de modo que puede empezar a usar CSS3 con pginas web existentes sin tener que
cambiar nada. Por lo general, CSS3 agrega caractersticas y funcionalidad en lugar
de cambiar la forma en que CSS se ha usado siempre.
Algunas novedades importantes de CSS3 son los selectores, el modelo de cuadros,
las transformaciones 2D y 3D, las animaciones y el diseo de varias columnas. CSS3
tambin permite crear bordes redondeados, agregar sombras a cuadros y texto, usar varias
imgenes en un fondo, y usar cualquier fuente, aunque no est en el equipo del usuario.
Estos temas se tratan en esta leccin, o en las lecciones 5 y 6 de este libro. De forma
similar a HTML5, CSS3 todava se est desarrollando en el momento de escribir este
libro. Sin embargo, como la mayora de los exploradores ya admiten CSS3, muchos
desarrolladores estn incorporando CSS3 a sus sitios y aplicaciones web.
Usar las herramientas adecuadas
Puede crear archivos CSS completos desde un editor de texto sencillo como Bloc
de notas. Muchos editores de HTML y herramientas de desarrollo de aplicaciones
proporcionan una funcin de depuracin que ayuda a encontrar errores en el cdigo
y el marcado rpidamente. Estas herramientas suelen incluir un botn para abrir un
explorador web en lugar de tener que hacerlo manualmente.
Al empezar a trabajar con CSS, determine qu herramientas de edicin necesita: puede

trabajar con marcado y cdigo fuente usando cualquier herramienta, como el programa
Bloc de notas integrado de Windows, un entorno de desarrollo integrado (IDE) concreto
o un entorno para dispositivos mviles determinado.
Igual que sucede al trabajar con HTML, en todo momento tendr por lo menos dos
aplicaciones abiertas:
Un editor (abierto con un origen CSS y un documento HTML), que puede ser Bloc
de notas, Microsoft Visual Studio, Microsoft Expression Blend, Expression Studio,
Notepad++ para Windows, textwrangler para Mac OS, Microsoft Web Matrix, entre
otros.
Un explorador web como Internet Explorer 9, Firefox, etc.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 89
Puede usar lo que le resulte ms prctico, pero Bloc de notas tiene limitaciones y no se
X REF
dise como editor completo. Muchos editores de HTML y herramientas de desarrollo
En la leccin 2 conoci de aplicaciones disponen de funciones para ahorrar tiempo, como depuracin y nmeros
los conceptos bsicos de lnea, y un botn para abrir un explorador web.
para editar cdigo HTML
y visualizar la pantalla
resultante. Utilice las Explorar el vnculo entre HTML y CSS
mismas habilidades
para trabajar con CSS. El elemento <link> vincula un archivo HTML a un archivo CSS. En esta seccin se
explican brevemente los estilos CSS y la vinculacin entre archivos HTML y CSS.
Cuando se crea una pgina HTML y se desea usar los estilos de un archivo CSS, es
necesario incluir en la pgina HTML un elemento <link> al archivo CSS. En una en pgina
HTML se puede hacer referencia a ms de un archivo CSS. El siguiente es un ejemplo
desintaxis correcta para un <link>:
<link href = "nombre de archivo.css" rel = "stylesheet"
type = "text/css">
Un archivo HTML puede llamarse miproyecto.html o archivo1.htm; un nombre de archivo
CSS tpico es miproyecto.css. Tambin sus contenidos son bastante diferentes: el origen
deHTML se organiza con etiquetas, mientras que, como veremos ms abajo, CSS es
unasecuencia de reglas.
Las organizaciones empresariales, a menudo, imponen sistemas de archivos determinados.
Por ejemplo, podra desarrollar un origen CSS que cumpla requisitos especficos.
Aldesarrollar cdigo, podra referirse a su trabajo como ... href = "mytheme.css" ...
Elrestodel equipo podra no dejarlo claro, pero espera una referencia del tipo
... href = "styles/mytheme.css" ...
LISTO PARA CERTIFICACIN Es importante recordar que si se escribe incorrectamente el nombre del archivo CSS, o
Cmo se crea contenido
stylesheet o text/css, en el marcado de la pgina HTML, la pgina web resultante no
con HTML y, luego, se le
aplica ninguno de los estilos del archivo CSS. La pgina HTML simplemente considera
aplica estilo con CSS?
que falta el vnculo a la CSS. El comportamiento predeterminado de todos los principales
3.1
exploradores web es no advertir sobre el error ortogrfico.
EJEMPLO DE USO SENCILLO DE CSS CON HTML

PREPRESE. Existen varias formas de aplicar estilo a una pgina HTML con estilos CSS.
Esta es una forma bsica para empezar:
1. Use un editor de texto o una herramienta de desarrollo de aplicaciones para crear
un archivo con el nombre e1.html en su directorio particular y con el siguiente
contenido:
<!doctype html>
<html>
<head>
<title>Trusty Lawn Care, Inc.</title>
<link href = "e1.css" rel = "stylesheet"
type = "text/css">
</head>
<body>
<h1>Trusty Lawn Care, Inc.</h1>
<p id = "slogan">Un verde permanente.</p>
< p>Trusty Lawn Care puede mantener su csped sano y vigoroso toda la temporada. Solo
utilizamos fertilizantes, mantillo y suelos naturales para mejorar la salud de la hierba.</p>
</body>
</html>
90 | Leccin 4
2. Cree otro archivo en la misma carpeta que el .html de origen. Dele el nombre e1.css
y use el siguiente contenido:
#slogan {
font-size: 20px;
color: green;
font-style: italic;
}
3. Abra el archivo e1.html en un explorador web. La pgina debe verse como la de la

Figura 4-1.
Figura 4-1
Pgina de inicio ms
simple posible para
Trusty Lawn Care
En este ejemplo, el archivo HTML (e1.html) define el contenido y la estructura: tiene las
palabras Trusty Lawn Care, Inc., identifica cinco palabras como parte de un eslogan,
etc. El archivo CSS (e1.css) proporciona estilo a ese contenido. Para que ciertos caracteres
estn en verde, el archivo CSS no usa pintura ni luz verde, sino la palabra verde para
indicar al explorador qu color debe tener el eslogan. Los archivos se vinculan mediante
el elemento <link> del archivo HTML.
Puede especificar color mediante un nombre o un valor hexadecimal. Por ejemplo,

para usar el color azul estndar, el nombre del color es azul y el valor hexadecimal
TOME NOTA
* es #0000FF. Puede ver la lista de nombres de los colores y sus valores en el
http://www.w3schools.com/cssref/css_colornames.asp.
LISTO PARA CERTIFICACIN Vamos a intentar crear una pgina web y un archivo CSS, para despus modificar el
Cules son los principios archivo CSS y ver cmo afectan los cambios a la pgina web. As entender cmo
de estilo esenciales de CSS? HTML y CSS funcionan en conjunto para crear presentaciones en el explorador
3.1 web o la aplicacin mvil.
CREAR UNA PGINA WEB BSICA Y UN ARCHIVO CSS

PREPRESE. Para explorar un estilo CSS bsico, siga estos pasos:
1. Cree una pgina web llamada e1.html y un archivo CSS llamado e1.css,
usando el marcado que se ha mostrado anteriormente.
2. Dirija su explorador web a e1.html para visualizar la pgina representada.
3. Edite e1.css para hacer que el eslogan aparezca en una fuente ms grande,
por ejemplo 25px. Cambie el color de verde a #00CC00. Cambie el estilo de
cursiva a negrita (bold). Despus de hacer cada cambio, compruebe que la
pantalla correspondiente se actualiza como espera. La pgina web acabada
debe parecerse a la Figura 4-2.
Figura 4-2
Pgina web de Trusty Lawn
Care modificada
4. Cierre los archivos HTML y CSS. Deje la herramienta de edicin y el explorador web
abiertos si va a continuar con la siguiente seccin.
Es esencial que se sienta cmodo con los aspectos bsicos de CSS. Si tiene dificultades
con los conceptos bsicos al trabajar con las lecciones y los ejercicios, considere la
posibilidad de realizar tutoriales en lnea sobre CSS, por ejemplo los que se ofrecen
en el sitio web W3Schools.com.
Separar contenido de estilo
En los documentos HTML, es habitual disponer de archivos HTML, que tienen el

contenido, y simplemente hacer referencia a un archivo CSS independiente, que
contiene cdigo para aplicar estilo al contenido de los archivos HTML. As, puede
cambiar los estilos en un solo archivo (el archivo CSS) y ver automticamente los
cambios aplicados en todos los archivos HTML asociados. Cuando se trabaja en un
archivo HTML pequeo e independiente, en el que es probable que los estilos no
cambien, es aceptable incluir cdigo de estilo CSS en el propio archivo HTML.
Puede crear pginas como HTML puro, es decir, con un solo archivo de cdigo fuente
HTML y sin ningn archivo CSS. HTML tiene capacidad para especificar cursiva, negrita,
color y muchas otras cosas. Los sitios web sencillos, a veces, no usan CSS o lo usan en
una sintaxis insertada.
Incluso algo tan simple como aplicar color verde a un bloque de texto puede hacerse
de varias formas distintas. En los manuales y el material de referencia, en ocasiones,
sepasa de una forma a otra sin dar una explicacin clara. Es posible que vea
<div style = color:green in HTML, or div {color:green in CSS, or <style
TOME NOTA
* > div {color:green </style> en HTML, e incluso otras combinaciones ms extraas.
Elprimer mtodo se denomina insertado, para indicar que la especificacin CSS aparece
en las mismas expresiones HTML que definen estructura y contenido.
Sin embargo, separar HTML y CSS en archivos distintos es un concepto fundamental que
Cmo administran los
debe entender. Separacin de contenido y el estilo es una frase que usan con frecuencia
sitios web contenido quienes que trabajan con sitios web y aplicaciones mviles. El HTML controla el contenido
y estilo? y CSS controla el estilo. Esta divisin del trabajo suele reflejar la organizacin de los equipos
3.1 de proyecto: personas distintas son responsables del contenido y el estilo. La separacin de
HTML y CSS contribuye a que sea posible que dos personas trabajen simultneamente sin
interferir entre s.
Adems, la separacin de contenido y presentacin ayuda a crear mejor HTML5, que se est
convirtiendo en el nuevo estndar para pginas web y aplicaciones.
92 | Leccin 4
En esta leccin se explican las correspondencias entre CSS y una pgina web. Tenga en
cuenta que la pgina web depende de una configuracin mayor, que normalmente cuenta
como mnimo con un archivo HTML y un explorador. No asuma que puede aprender a usar
CSS como algo aislado de esos otros elementos. Existe una segunda correspondencia entre
CSS y la presentacin de una aplicacin mvil concreta creada con ese CSS. Aunque su
TOME NOTA
* finalidad al aprender y usar CSS podra ser desarrollar aplicaciones, todas las instrucciones
de este captulo estn dirigidas a las pginas web. Las herramientas para aplicaciones mviles
cambian rpidamente y no estn tan estandarizadas como el explorador web Internet Explorer
(IE). Por lo tanto, todos los ejemplos se muestran con la versin 9 de IE. Todo lo que aprenda
sobre CSS es aplicable tambin a la programacin de aplicaciones.
Comprender selectores y declaraciones
Una vez que est familiarizado con los conceptos bsicos, puede estudiar ms
detenidamente los archivos de cdigo fuente CSS. Un archivo CSS suele contener
una secuencia de especificaciones o reglas de estilo, y puede incluir una regla @
import inicial. El orden de las reglas tendr importancia en lecciones posteriores.
Cada regla individual consta de dos partes principales: un selector, y una o varias
declaraciones. El selector suele ser el elemento HTML al que desea aplicar estilo.
Ladeclaracin es el estilo para un sector especfico. Una declaracin tiene una propiedad,
que es un atributo de estilo, y un valor. La sintaxis general de una declaracin consta
de una palabra clave de propiedad seguida por un punto y coma y un espacio, un valor
y, finalmente, un punto y coma final. Una declaracin va entre llaves. Estos conceptos
seilustran en la Figura 4-3.
Figura 4-3
Describir un selector
y una declaracin
Observe este ejemplo:

/* Este es el contenido del archivo e1.css. */
p {color: brown;}
#slogan {
font-size:20px;
color: green;
font-style: italic;
}
El contenido entre /* y */ en un archivo CSS se conoce como comentario. Es una nota

insertada por el desarrollador por motivos meramente informativos, y no afecta al CSS ni
TOME NOTA
* la pgina web. Los comentarios pueden aparecer en cualquier parte de una hoja de estilo.
En este ejemplo hay dos reglas, una para p y otra para #slogan. La primera regla
seaplica a todo el contenido de todas las etiquetas de prrafo (o tipo) <p> de la pgina web.
La segunda regla se aplica solamente al elemento HTML con el identificador eslogan.
La parte de selector de una regla puede ser bastante complicada. Por el momento, piense
que los selectores pueden ser:
Etiquetas HTML, como <p> en el ejemplo anterior. Las reglas CSS tambin suelen
seleccionar etiquetas como <h...>, <table>, <a>, etc.
Selectores de Id., como #slogan en el ejemplo anterior. En estos, el smbolo #
esunprefijo que determina que la seleccin se hace por identificador.
Selectores de clase, como en el ejemplo siguiente.
Tenga en cuenta que un identificador debe ser nico dentro de una instancia de HTML
concreta. Sin embargo, varios elementos pueden compartir una clase. Clase es un
atributo que un autor web usa para proporcionar estructura a un documento ms all
del significado en que se compila HTML con elementos como prrafo, encabezado, etc.
Podramos decidir etiquetar parte del contenido de una pgina opinin y otra parte
hechos. Estos tipos de categoras son fciles de implementar como clases, porque
CSSpuede administrar contenido en funcin de sus definiciones de clase. El marcado
siguiente ilustra el uso de una clase.
Es el contenido de un archivo HTML, que tiene el nombre e2.html:
<!doctype html>
<html>
<head>
<title>Ejemplo de clase</title>
type = "text/css">
</head>
<body>
<h1>Acerca de los estados</h1>
< p class = "fact">Alaska es el estado ms grande de Estados Unidos
en cuanto a superficie.</p>
< p class = "opinion">Nueva Jersey se merece su
apodo de "El estado jardn".</p>
< p class = "fact">Un nico congresista representa
a Wyoming en el Congreso
Nacional.</p>
</body>
</html>
El contenido del archivo CSS asociado, llamado e2.css, es:
p {color: black;}
/* The prefix for a class selector is a period: '.' */
.opinion {color: gray;}
Con estos dos archivos en uso, al abrir el archivo e2.html se muestra una pantalla
parecida a la de la Figura 4-4.
Figura 4-4
Uso de un selector de
clase para especificar
el color de un prrafo
Cmo se puede recordar la sintaxis para diferentes selectores? Existe un mtodo nemotcnico
que funciona para algunos de ellos: el prefijo de una clase es el punto, y en el colegio las clases
TOME NOTA
* son un punto importante que no se debe olvidar. El prefijo para un Id. es un '#', que se suele
denominar signo de nmero. Un identificador habitual es el nmero del documento nacional
de identidad, o sea, un nmero es un Id.
94 | Leccin 4
Hay que prestar atencin a los identificadores. Es fcil comprender que tienen que ser
nicos en el cdigo HTML. Tambin pueden parecer en JavaScript y CSS. Muchos equipos
se dan cuenta de que tienen que hacer un gran esfuerzo para que los identificadores sean
TOME NOTA
* nicos en todas estas formas de cdigo fuente. Si hay un error, si alguien especifica un
identificador que ya se est utilizando en otra pgina, puede ser difcil de depurar los
errores subsiguientes.
Entender fuentes y familias de fuentes
La tipografa tiene que ver con el aspecto de las letras, los nmeros y otros caracteres.
La tipografa es un tema amplio y complejo, que queda fuera del mbito de esta
leccin. Con todo, es importante conocer parte de su vocabulario.
Una fuente es un conjunto de caracteres de un tamao y estilo determinados. Los artistas

grficos suelen tener opiniones bastante fijas sobre la facilidad de lectura y el atractivo
visual de las diferentes fuentes. Por eso, a usted se le podra pedir que organice una
pantalla o partes de una pantalla con fuentes especficas, o fuentes con caractersticas
particulares. Monospace se usa a menudo para material tcnico como frmulas, nmeros,
cdigos, etc. Las serifas son los detalles al final de letras determinadas; mire la d,
pyt en esta oracin para ver ejemplos de caracteres serif. Las fuentes Sans serif
sonsimplemente estilos de tipografa que se dibujan sin serifas, como la fuente Arial.
Valos ejemplos de la Figura 4-5.
Figura 4-5
Ejemplos de una fuente
serif y una sans serif
La forma principal de especificar fuentes en un archivo CSS es usar la propiedad font-family.

La propiedad font-family puede declarar una fuente concreta, como Garamond o Arial, o
una familia ms amplia con varias fuentes diferentes, por ejemplo serif. Especialmente
al desarrollar aplicaciones para dispositivos mviles, es ms seguro especificar una familia,
como monospace o sans serif, porque no se puede predecirqufuentes estarn disponibles
en un telfono concreto.
Por ejemplo, si incluye font-family: monospace en un archivo CSS, est indicando al
explorador que elija caracteres de forma que cada letra ocupe la misma anchura en lalnea,
a pesar de que la letra pueda ser ancha como la m o estrecha como la i. Noespecifica
una fuente monospace especfica, solo la familia monospace.
EXPERIMENTAR CON FAMILIAS DE FUENTES

PREPRESE. Para entender los conceptos bsicos de control de fuentes, siga estos pasos:
1. Abra los archivos e1.html y e1.css del ejercicio anterior en una herramienta
deedicin. Gurdelos como e3.html y e3.css, respectivamente.
2. Cambie e1.css a e3.css en el elemento de vnculo del archivo e3.html y,
acontinuacin, guarde el archivo.
3. En e3.css, agregue una nueva regla para #slogan que declare font-family: monospace:
p {color: brown;}
#slogan {
familia de fuentes: monospace
font-size:20px;
color: green;
font-style: italic;
}
4. Guarde el archivo CSS y, a continuacin, visualice el archivo HTML en el explorador
web. El resultado se muestra en la Figura 4-6.
Figura 4-6
Aplicar la familia de
fuentes monospace
5. En el archivo CSS, cambie la regla a font-family: sans-serif;

6. Guarde el archivo CSS y, a continuacin, visualice el archivo HTML en el explorador
web. El resultado se muestra en la Figura 4-7.
Figura 4-7
Aplicar la familia de
fuentes sans serif
7. Cambie la regla a font-family: Garamond;, guarde el archivo CSS y, a continuacin, visualice

el archivo HTML en el explorador web. El resultado se muestra en la Figura 4-8.
Figura 4-8
Aplicar una fuente especfica
al elemento de eslogan
8. Cierre los archivos e3.html y e3.css. Deje la herramienta de edicin y el explorador

web abiertos si va a continuar con la siguiente seccin.
96 | Leccin 4
Con anterioridad a CSS3, los desarrolladores deban usar fuentes web seguras o fuentes
que el desarrollador saba que estaban instaladas en el sistema del usuario de una pgina
web. La lista de fuentes web seguras es relativamente corta y no ofrece mucha variedad.
La utilizacin de fuentes que no fueran seguras para la Web sola conllevar tener que
crearimgenes para encabezamientos y ttulos, y usar otras soluciones.
CSS3 proporciona la regla @font-face, que permite a los desarrolladores usar la fuente
quedeseen. Para ello, primero se crea una regla de tipo de letra asignando un nombre a
la fuente. La fuente debe encontrarse en el servidor web, o se puede incluir una direccin
URL que seale a la ubicacin de la fuente si est en otro servidor web. El siguiente es un
ejemplo de la regla para una fuente denominada Euphemia, que se encuentra en su propio
servidor web:
@font-face
{
font-famly: TrustyHomePage;
src: url('Euphemia.ttf'),
}
Al igual que con las imgenes, usted, o un cliente para el que trabaje, debe poseer una
copia legal de la fuente para usarla en las pginas web que cree.
MS INFORMACIN
Para obtener ms informacin sobre los conceptos bsicos de CSS, visite la pgina web de Microsoft
sobre hojas de estilo en cascada en http://bit.ly/IKmcZd. Tambin puede consultar los tutoriales
gratuitos sobre CSS en el sitio web W3schools.com en http://www.w3schools.com/css/default.asp.
Administrar el flujo de contenido
Puede administrar el flujo de contenido de un documento HTML mediante las

propiedades de flujo alineado y flujo de bloque de CSS.

El flujo o estilo de visualizacin es un concepto fundamental de HTML. Su funcin es
Cmo administran
los sitios web el flujo
la de llenar las lneas horizontales de izquierda a derecha en la pantalla, y la de separar
de contenido? laslneas de arriba abajo al ir descendiendo por la pantalla.
3.1 Analice estas dos opciones para la presentacin de un elemento visual:
Flujo alineado: solo se llena la anchura que sea necesaria
Flujo de bloque: se llena toda la anchura que haya disponible
El control de la geometra de la interfaz de usuario y, particularmente, el tamao horizontal
de la pantalla, es importante. Por ello, es tambin importante entender el flujo. Unos
cuantos ejemplos le servirn de ayuda.
El flujo alineado ajusta. No impone ninguna lnea antes o despus del elemento alineado,
sino que simplemente coloca el elemento entre el contenido y despus del elemento alineado.
Observe este prrafo:
Este es un prrafo en el que una palabra aparece en negrita y otra est en cursiva.
En una codificacin HTML tpica, las palabras negrita y cursiva aparecen como
LISTO PARA CERTIFICACIN elementos <b> y <i>, respectivamente. Estos elementos estn alineados: solo ocupan
Cul es la diferencia enlaslneas de texto el espacio necesario y no se ponen en lneas nuevas.
entre flujo alineado En el flujo de bloque, a diferencia del flujo alineado, un elemento est separado de otros
y flujo de bloque? elementos por nuevas lneas por encima y por debajo, y llena de izquierda derecha el
3.1 espacio horizontal en el que aparece.
El prrafo que est leyendo ahora mismo es un elemento de flujo de bloque: por encima
ypor debajo hay lneas nuevas, y el prrafo llena todo su espacio de izquierda a derecha.
Puede controlar el flujo de presentacin. Los elementos de lista, por ejemplo, utilizan
deforma predeterminada el flujo de bloque. Con CSS, sin embargo, puede alinearlos
para lograr un aspecto distinto y especial. Si bien siguen siendo elementos de lista,
con losatributos y el comportamiento habituales de los elementos de lista, un cambio
en elestilo de visualizacin permite que aparezcan uno tras otro en una horizontal,
deizquierda a derecha.
Prepare el editor. Ahora va a probar unos breves fragmentos de CSS.
Al comienzo de esta leccin se explic detenidamente cmo los archivos HTML y CSS
funcionan juntos para lograr efectos de diseo. En el siguiente ejemplo y los posteriores,
sin embargo, el estilo CSS est incluido en el archivo de cdigo fuente HTML. HTML
reconoce el elemento <style>, que hace que esto sea posible. Al estudiar los atributos CSS,
TOME NOTA
* suele ser mucho ms prctico trabajar en un nico archivo de cdigo fuente, de modo que
toda la leccin, excepto las secciones ms sencillas, se implementa en un solo origen de
HTML. Tenga en cuenta que, en el mundo real, casi todo el trabajo se estructurar con
orgenes de HTML y CSS distintos.
EXPLORAR EL FLUJO ALINEADO Y EL FLUJO DE BLOQUE

PREPRESE. Para explorar el flujo alineado y el flujo en bloque, siga estos pasos:
1. Cree el archivo e4.html con este contenido:
<!doctype html>

<html>
<head>
<title>Flujo de bloque y alineado</title>
type = "text/css">
<style type = 'text/css'>
.toolbar li {
}
</style>
</head>
<body>
<h1>Flujo de bloque y alineado</h1>
<p>Puede elegir entre las siguientes opciones:</p>

<ul class = "toolbar">
<li>Automvil</li>
<li>Bicicleta</li>
<li>Motocicleta</li>
<li>Taxi</li>
<li>A pie</li>
</ul>
</body>
</html>
98 | Leccin 4
2. Al visualizar este cdigo fuente en un explorador, su aspecto ser como el de la Figura 4-9.
Figura 4-9
Aspecto predeterminado
de los elementos de lista
3. Modifique el cdigo fuente de e4.html de forma que el segmento <style> sea as:
<style type = "text/css">
.toolbar li {
display:inline;
background-color: #EEE;
borde: 1px solid;
border-color: #F3F3F3 #BBB #BBB #F3F3F3;
margen: 2px;
relleno: .5em;
}
</style>
4. Guarde el archivo y actualice el explorador. La presentacin de la lista se actualiza y se
ve como en la Figura 4-10. Observe cmo este ejemplo ilustra que el control del flujo
es til para efectos visuales.
Figura 4-10
Aspecto de los elementos
de lista con diseo mediante
flujo alineado
5. Cierre el archivo e4.html. Deje la herramienta de edicin y el explorador web abiertos

si va a continuar con la siguiente seccin.
MS INFORMACIN
Para obtener ms informacin sobre la propiedad de presentacin de CSS y la administracin del flujo
de contenido, visite la pgina web de la propiedad de presentacin de CSS del CSS W3schools.com en
http://www.w3schools.com/cssref/pr_class_display.asp.

Posicionar elementos individuales
Cmo se colocan los
distintos elementos HTML y CSS admiten varias maneras de especificar dnde aparecen elementos
independientes en una HTML individuales dentro de una pantalla. Los dos ms importantes para nuestro
pgina HTML mediante objetivo son el posicionamiento flotante y el posicionamiento absoluto.
CSS?
3.1
El mtodo de posicionamiento predeterminado para todos los elementos es esttico,
es decir, inmediatamente despus del elemento anterior en el documento. Si desea
colocar cualquier elemento en cualquier otra posicin, utilice CSS para cambiar
Cmo se usa el elvalorpredeterminado a flotante o absoluto.
posicionamiento flotante?
3.1 APLICAR POSICIONAMIENTO FLOTANTE
El posicionamiento flotante suele resultar til para una disposicin en columnas, al
menosparcialmente. Flotar un elemento es hacer que se aleje lo ms posible, ya sea
aladerecha o izquierda; el texto entonces se ajusta al elemento.
X REF
Las columnas sencillas se crean haciendo que varios elementos diferentes floten uno
La administracin del
detrs de otro. Imagine que tiene que crear un diseo en cuatro columnas de contenido
flujo de contenido y el
uso de columnas para
de texto. Aplique estilo de flotador posicionado a cada una de las partes de contenido
facilitar la lectura se que debe aparecer en columnas sucesivas. Cada elemento flota hacia el lado, pero se
describen detalladamente mantiene separado de los anteriores y los siguientes. Tenga en cuenta que en este tipo
en la leccin 6. de columna, el texto que sobrepasa la parte inferior de una columna no fluye a la parte
superior de la siguiente.
USAR POSICIONAMIENTO FLOTANTE CON VARIAS COLUMNAS

PREPRESE. Para aplicar posicionamiento flotante a varias columnas, siga estos pasos:
1. Cree el archivo e5.html con este contenido:
<!doctype html>

<html>
<head>
<title>Posicionamiento flotante</title>
#col1 {
float: izquierda;
width: 150px;
background-color: lightskyblue;
}
#col2 {
float: izquierda;
width: 120px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Posicionamiento flotante</h1>
<p id = "col1">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui
sit amet felis. Integer sit amet diam. Phasellus
ultricesviverra velit.
ultrices viverra velit.
100 | Leccin 4

ultrices viverra velit.
</body>
</html>
En esta seccin y la siguiente no se presenta siempre marcado HTML y CSS completo,

sino que se muestran solo las lneas esenciales. Este tipo de acortamiento es comn en
materiales de referencia y en las comunicaciones diarias entre desarrolladores. Se espera
TOME NOTA
* que se incruste este tipo de lnea en el archivo de cdigo fuente ms grande en la posicin
correcta. Es algo parecido a una leccin sobre limpieza de las bujas de un automvil, en la
que se supone que ya sabe cmo arrancar el motor, abrir el cap, usar una llave inglesa, etc.
El texto Lorem ipsum se llama relleno o texto simulado, que los desarrolladores utilizan
a menudo. Aunque parece latn, en realidad no significa nada. No es ms que texto que
TOME NOTA
* parece contenido por la secuencia y frecuencia de los caracteres. Tambin es fcil generar
texto simulado en Word, por ejemplo, escribiendo =lorem() en un documento en blanco
ypresionar la tecla Intro.
2. Visualice e5.html, como se muestra en la Figura 4-11. Observe cmo el contenido

aparece en columnas, indicadas por los colores de fondo que hay tras el texto.
Figura 4-11
Varias columnas con el
atributo float aplicado
3. En el explorador, col1 y col2 aparecen como dos columnas de anchura fija, y col3 llena
el espacio restante. Si cambia los dos atributos float de CSS de izquierda a derecha,
cmo se ve la pantalla?
4. Haga el cambio.
5. Adivin correctamente? Se ve el cdigo fuente HTML modificado como esperaba?
APLICAR POSICIONAMIENTO ABSOLUTO

Con posicionamiento absoluto, un elemento se quita de su posicin en el cuerpo de
un documento y se coloca en una posicin geomtrica en la pantalla. Aqu, posicin
geomtrica significa una ubicacin a una distancia definida desde dos lados de la
pantalla, el lado superior y el derecho, por ejemplo.
USAR POSICIONAMIENTO ABSOLUTO CON VARIAS COLUMNAS

PREPRESE. Para aplicar posicionamiento absoluto a varias columnas, siga estos pasos:
1. Cree e6.html abriendo e5.html y guardando una copia como e6.html.
2. Reemplace el comentario de la parte superior con:

Reemplace el contenido de las etiquetas <head> con lo siguiente:
<title>Posicionamiento absoluto</title>
#col1 {
posicionamiento: absoluto;
bottom: 100px;
right: 100px;
}
#col2 {
}
</style>
3. En el elemento de cuerpo, cambie el encabezado <h1> a:

<h1>Posicionamiento absoluto</h1>
4. Visualice e6.html, como se muestra en la Figura 4-12. En este ejemplo, los prrafos
col2 (fondo amarillo ) y col3 (sin color de fondo) aparecen normales, cerca de la
partesuperior de la pantalla. Col1, sin embargo, termina en una posicin bloqueada
enla esquina inferior izquierda de la ventana de visualizacin.
Figura 4-12
Varias columnas con el
atributo absolute aplicado
5. Cambie el tamao de la ventana y observe cmo se ajustan los tres prrafos distintos.
En general, el posicionamiento absoluto no se ha usado tanto en el desarrollo web como

elposicionamiento flotante. Sin embargo, las aplicaciones mviles suelen tener una
ventana de visualizacin con un tamao conocido, definido y relativamente pequeo.
Enel caso de las aplicaciones mviles, a diferencia de la mayora de las aplicaciones
web,es relativamente habitual usar el posicionamiento absoluto.
102 | Leccin 4
MS INFORMACIN
Para obtener ms informacin sobre el posicionamiento flotante en CSS, visite
http://www.w3schools.com/css/css_float.asp. Puede obtener informacin adicional sobre
la propiedad de posicin de CSS en http://www.w3schools.com/css/css_positioning.asp
yhttp://www.w3schools.com/cssref/pr_class_position.asp.
Administrar el desbordamiento de contenido
Otro concepto esencial en el diseo HTML es el cuadro de lmite. En esta seccin

seexplica el desbordamiento en relacin con los cuadros de lmite.
Al ver letras y caracteres en una pgina, piense que son marcas en lugar de letras.
Cadaelemento HTML ocupa un rectngulo. La palabra rectngulo, por ejemplo, no es
especialmente rectangular: la t y la l sobresalen por encima, y la g cuelga por debajo.
Sin embargo, en lo que se refiere a HTML, rectngulo cabe dentro de un rectngulo
pequeo (o cuadro de lmite) que contiene todas las letras de la palabra con su fondo,
como se muestra en la Figura 4-13. El estilo CSS se expresa en relacin con este cuadro.
Figura 4-13
Ejemplo de cuadro de lmite
En concreto, CSS permite limitar la anchura de un elemento. Qu sucede si el elemento

LISTO PARA CERTIFICACIN no cabe en el espacio que CSS define por l? La regla de desbordamiento de CSS controla
Qu propiedad CSS esta situacin.
controla el desbordamiento
de contenido?
3.1 ENTENDER EL DESBORDAMIENTO DE DESPLAZAMIENTO
Cuando un elemento se desborda de su cuadro y su desbordamiento se ha establecido
paradesplazarse, todo el contenido del elemento permanece dentro del cuadro. Ninguna
parte del desbordamiento aparece fuera del cuadro. Esto se conoce como desbordamiento
LISTO PARA CERTIFICACIN de desplazamiento.
Qu valor de la propiedad
de desbordamiento de CSS El contenido debe estar dentro de la caja, pero no cabe, cmo se puede solucionar
impide el desplazamiento elproblema? Simule que el cuadro tiene debajo una zona ms grande, y que el usuario
de desbordamiento? puede moverse por esta zona mayor mediante barras de desplazamiento. Esta es una
3.1 manera de que el usuario llegue a todo el contenido. Puede conseguir este comportamiento
con el valor scroll de la propiedad overflow.
Observe esto con el siguiente experimento. Utilice un editor para experimentar con
eleficaz mecanismo de desplazamiento.
TRABA JAR CON EL DESBORDAMIENTO DE DESPLAZAMIENTO

PREPRESE. Para practicar con el desbordamiento de desplazamiento, siga estos pasos:
1. Cree e7.html con el siguiente contenido:

<!doctype html>
<html>
<head>
<title>Desbordamiento de desplazamiento</title>
<style type = "text/css">
#col1 {
width: 200px;
height: 200px;
desbordamiento de desplazamiento: scroll;
}
#col3 {
}
</style>
</head>
<body>
<h1>Desbordamiento de desplazamiento</h1>
<p id = 'col1'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper.
</p>
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</p>
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</p>
</body>
</html>
2. Este cdigo fuente se representa de forma parecida a la Figura 4-14.
Figura 4-14
Visualizacin de barras de
desplazamiento creadas
como controles de
desbordamiento
3. Experimente con el cdigo fuente para ver cmo se representa el HTML en

distintascircunstancias. Por ejemplo, qu pasa si la anchura es de 400 px?
104 | Leccin 4
4. Cmo se ve la pantalla si se elimina la mitad del texto de col1 de e7.html?

5. No guarde los cambios de e7.html. Deje abierto el explorador web y abra el archivo
e7.html en una herramienta de edicin si va a continuar con la siguiente seccin.
ENTENDER DESBORDAMIENTO VISIBLE Y DESBORDAMIENTO OCULTO

El desbordamiento visible sobrescribe el contenido que le sigue. El desbordamiento
LISTO PARA CERTIFICACIN oculto hace que el desbordamiento no se vea.
Qu valores de Vuelva a pensar en la situacin que se cre en la ltima seccin: la pantalla asigna una
la propiedad de zona fija a una parte concreta del contenido, pero el contenido es demasiado largo y
desbordamiento no cabe en el espacio asignado. En la ltima seccin se demostr cmo las barras de
de CSS muestran desplazamiento dan al usuario la posibilidad de ver todo el contenido sin que ocupe ms
el desbordamiento espacio de la pantalla. Otras dos tcnicas para esta situacin son el uso de la propiedad
visible y lo ocultan?
overflow con los valores visible y hidden. Entender mejor estas alternativas cuando
3.1 experimente con ellas y con las pantallas que producen.
TRABA JAR CON DESBORDAMIENTO VISIBLE Y DESBORDAMIENTO OCULTO

PREPRESE. Para practicar con el desbordamiento visible y oculto, siga estos pasos:
1. Abra el archivo e7.html del ejercicio anterior si no lo est.
2. Cambie el overflow de e7.html de scroll a visible.
3. Guarde el archivo y visualcelo en el explorador web, como se muestra en la Figura 4-15.
Figura 4-15
El desbordamiento visible
sobrescribe el contenido
que le sigue
4. Fjese en los detalles de esta pantalla. Visible es el valor predeterminado de overflow.

Con visible establecido, los elementos de la pantalla HTML se presentan en orden y
eldesbordamiento que haya simplemente se superpone a los dems elementos.
5. Observe quebackground-color no se aplica al contenido del desbordamiento: col1 tiene
un fondo azul claro, pero el texto del desbordamiento tiene el fondo predeterminado.
6. Ahora, cambie el overflow de e7.html de scroll a hidden.
7. Guarde el archivo y visualcelo en el explorador web, como se muestra en la Figura 4-16.

Con el desbordamiento oculto, el desbordamiento simplemente no se ve.
Figura 4-16
El desbordamiento oculto
simplemente no se ve
8. Cierre la herramienta de edicin y el explorador web.
El desbordamiento oculto mantiene un diseo lgico: garantiza que el desbordamiento

no estropea un diseo agradable con partes en lugares inadecuados. Por otro lado, el
desbordamiento oculto puede dar sorpresas. Si un usuario final con discapacidad visual,
por ejemplo, especifica una fuente ms grande de la prevista, el uso del desbordamiento
oculto podra hacer que elementos esenciales del diseo queden completamente invisibles
e inaccesibles. En el peor de los casos, el usuario podra encontrarse con una pantalla
sin controles visibles y sin forma de volver a la pgina de inicio.
MS INFORMACIN
Para obtener ms informacin sobre el desbordamiento en CSS, visite la pgina
web de la propiedad de desbordamiento de CSS de W3schools.com CSS en
http://www.w3schools.com/cssref/pr_pos_overflow.asp. Tambin puede buscar flujo
contenido css msdn, posicionamiento css msdn y desbordamiento css msdn con
su motor de bsqueda favorito.

C
SS es una herramienta fundamental para conseguir, en gran medida, el aspecto y
el comportamiento de aplicaciones mviles modernas y de sitios web. Para crear la
parte de una aplicacin o un sitio web que utiliza el usuario, y especialmente para
mantener su aspecto correcto y agradable segn se realizan cambios funcionales
durante su vida til, debe entender bien CSS y su funcionamiento CSS con otras
herramientas, incluidos HTML y JavaScript. Tambin le resultar mucho ms fcil
estimar la cantidad de trabajo necesario para proyectos concretos cuando conozca
plenamente los conceptos de estilo de interfaz de usuario tal como se usan en CSS.
(contina)
106 | Leccin 4
P uede crear archivos CSS completos desde un editor de texto sencillo como Bloc
de notas. Muchos editores de HTML y herramientas de desarrollo de aplicaciones
proporcionan una funcin de depuracin que ayuda a encontrar errores en el cdigo
y el marcado rpidamente. Estas herramientas suelen incluir un botn para abrir un
explorador web en lugar de tener que hacerlo manualmente.
El elemento <link> vincula un archivo HTML a un archivo CSS.
En los documentos HTML, es habitual disponer de archivos HTML, que tienen el
contenido, y simplemente hacer referencia a un archivo CSS independiente, que
contiene cdigo para aplicar estilo al contenido de los archivos HTML. As, puede
cambiar los estilos en un solo archivo (el archivo CSS) y ver automticamente los
cambios aplicados en todos los archivos HTML asociados.
Cuando se trabaja en un archivo HTML pequeo e independiente, en el que es
probable que los estilos no cambien, es aceptable incluir cdigo de estilo CSS
en el propio archivo HTML.
Un archivo CSS suele contener una secuencia de especificaciones o reglas de estilo,
y puede incluir una regla @import inicial.
La tipografa tiene que ver con el aspecto de las letras, los nmeros y otros caracteres.
Puede administrar el flujo de contenido de un documento HTML mediante las
propiedades de flujo alineado y flujo de bloque de CSS.
HTML y CSS admiten varias maneras de especificar dnde aparecen elementos
HTML individuales dentro de una pantalla. Los dos ms importantes para nuestro
objetivo son el posicionamiento flotante y el posicionamiento absoluto.
El cuadro de lmite de HTML es un rectngulo que contiene todas las letras de un
bloque de texto y su fondo. El estilo CSS se expresa en relacin con este cuadro.
De forma predeterminada, el cuadro de lmite no est visible en las pginas web.
1. HTML se ocupa del contenido y CSS del ___.
2. Un archivo de origen HTML se refiere a un archivo de origen CSS externo con
elelemento _________.
3. Un archivo de origen CSS consta de cero o ms _________ individuales.
4. Una regla CSS individual tiene dos partes: un _______ y una o varias declaraciones.
5. Una declaracin individual dentro de una regla CSS consta de una _________,
seguida de dos puntos, luego un valor y un punto y coma al final.
6. Los selectores CSS ms comunes son: elemento o tipo, Id. y _________.
7. Los dos flujos de contenido HTML son _________ y bloque.
8. Para que los elementos HTML aparezcan en columnas, es comn aplicar
posicionamiento _________.
9. Supongamos que un elemento est sujeto a desbordamiento: podra crecer ms all
del tamao asignado para l en la pantalla. Para darle barras de desplazamiento
que hagan posible que un usuario final vea el elemento completo, declare que la
propiedad overflow tenga el valor de _________.
10. Los valores ms comunes de la propiedad float son _________ y _________.
Varias opciones
1. Cul de las siguientes opciones resume mejor un modelo til para el desarrollo
comercial?
a. Las pginas web se escriben en HTML.
b. Los diseadores deben aprender Java o Ruby para disear pantallas.
c. CSS asume la responsabilidad de estilo visual.
d. CSS define la estructura y HTML asigna colores y fuentes.
2. Cul de las siguientes opciones codifica un comentario en CSS?
a. 
b. /* */
c. # d.
d. // ...
3. Cuntas reglas diferentes dentro de un archivo de origen CSS vlido pueden
declararel estilo de un elemento de prrafo <p>?
a. 0
b. 1
c. 1 o 2, dependiendo de si se utiliza HTML5
d. 0 o ms
4. A veces los colores se expresan con palabras en ingls y a veces se expresan
connmeros simblicos. Cul de las siguientes opciones significa azul?
a. 009
b. #0000FF
c. !008000
d. (128, 128, 128)
5. Un prrafo aparece en una pantalla importante codificado como <p id = 'introduction'>
Trusty Lawn Care se ocupa . . .. Le han dicho que este prrafo debe aparecer en la fuente
Tahoma. Cul de las siguientes opciones le ayudar de la mejor manera a definir una
regla adecuada?
a. p {font: Tahoma;}
b. #introduction {font-family: Tahoma;}
c. .introduction {font: Tahoma;}
d. .p {font-family: Tahoma;}
6. Alguien ha creado una pgina web con HTML que se vincula a tres diferentes archivos
de origen CSS. El nombre de uno de los archivos de origen est mal escrito en HTML.
Cul de las siguientes opciones es la ms probable que muestre un explorador web?
a. Muestra una pantalla como si el vnculo al CSS con un nombre mal escrito
simplemente faltara.
b. Muestra el nombre del origen de CSS mal escrito junto con un mensaje de error.
c. Muestra la pantalla tanto como sea posible, usando el ltimo CSS vinculado
correctamente en lugar del CSS con un nombre mal escrito.
d. Muestra una advertencia de que el CSS no se encuentra y pregunta si desea
continuar de todos modos.
7. La etiqueta delimitadora <a > es el elemento HTML definido para la definicin de
hipervnculos, entre otras cosas. Nombre el flujo de contenido predeterminado para
un delimitador.
a. Alineado
b. Bloque
c. Oculto
d. Visible
108 | Leccin 4
8. Su equipo est construyendo una aplicacin que incorpora una declaracin de licencia
larga que los usuarios finales deben tener la oportunidad de leer y aprobar. Desea
limitar la cantidad de espacio en pantalla que ocupa la licencia, al mismo tiempo
quedeja cada palabra de ella disponible para los usuarios finales que elijan leerla
porcompleto. Cul de las siguientes opciones es ms probable que le ayude
acodificar esto?
a. {position: scrolling;}
b. {fixed: scrolling;}
c. {overflow: scrolling;}
d. {overflow: scroll;}
9. El ltimo estndar CSS que est todava en desarrollo pero que se usa ampliamente es:
a. CSS8
b. CSS5
c. CSS3
d. CSS2
10. Cuando HTML se vincula a CSS que ha escrito, qu opcin es ms probable que sea
una parte til del vnculo?
a. type = text/css
b. CSS = SOME_NAME.css
c. type = "style/CSS"
d. Web = "style/css"
Verdadero/Falso
sielenunciado es falso.
VF1.
Un archivo de origen CSS incluye dos reglas diferentes para la fuente de un
elemento h1. Su explorador web aplica la regla ms cerca a la parte superior
del archivo de origen y pasa por alto la que aparece ms cerca de la parte
inferior.
VF2.
El desbordamiento de un elemento determinado se define a travs de CSS para
desplazarse. Sucede que no hay ningn desbordamiento, porque el contenido
del elemento es inusualmente corto por el momento. Incluso en este caso,
labarra de desplazamiento es visible.
VF3.
Se le pidi que disponga un diseo con columnas. Es ms probable que el
posicionamiento flotante sea ms til que el posicionamiento absoluto en
estasituacin.
VF4.
Si utiliza el estndar CSS ms reciente en su codificacin, se advertir a los
usuarios finales que dependen de exploradores web antiguos que sus pginas
presentan riesgos de seguridad.
VF5.
Antes de que pueda probar el CSS que escribe, debe asegurarse de que haya
uncompilador de Python instalado en su equipo.
Escenario 4-1: Flujo de trabajo bsico
Su equipo est desarrollando una aplicacin. Usted debe ocuparse del diseo de estilo.
Qu archivos es probable que actualice?
Escenario 4-2: Consulta del cliente

Un cliente ha definido un esquema bastante rgido en que un elemento noticioso ocupa
unlugar fijo dentro de la pantalla. El elemento noticioso tiene el potencial de desbordar
elrea asignada a l. Cree rpidamente pantallas de ejemplo que muestren al cliente cmo
funciona el diseo con las barras de desplazamiento para el elemento noticioso, o con
elelemento noticioso simplemente truncado si desborda el cuadro que tiene asignado.
Escenario 4-3: Dilogo teatral
Una aplicacin ya en uso muestra dilogo de diferentes actores. La pantalla vista por un
actor determinado tiene sus lneas en fuente normal, mientras que todo lo dicho por otros
est en cursiva. Esto se implement originalmente al colocar cada discurso en su propio
prrafo, con prrafos sucesivos etiquetados como paragraph1, paragraph2, etc. CSS
luego dio estilo a los prrafos por orador. Muestre a su equipo una manera ms eficiente
yfcil de mantener de usar CSS para lograr el mismo resultado.
Escenario 4-4: Cooperacin internacional

Usted es miembro de un equipo de desarrollo distribuido. Una empresa de relaciones
pblicas de Virginia es responsable de la copia que aparecer en un sitio web. Al mismo
tiempo, una consultora belga est proporcionando tipografa de moda, mientras que los
codificadores en Egipto se aseguran de que el diseo tiene la apariencia y el esquema
decolor perfectos. Cmo delineara la estructura de archivos de este proyecto?
5 LECCIN
Comprender los
principios bsicos
de CSS: Diseos

del examen MTA
Organizar el contenido de la interfaz Organizar el contenido de la interfaz 3.2
de usuario mediante CSS de usuario mediante CSS.
Usar una caja flexible para establecer Organizar el contenido de la interfaz 3.2
alineacin, direccin y orientacin de usuario mediante CSS.
de contenido
Usar diseos de cuadrcula para Organizar el contenido de la interfaz 3.2
establecer alineacin, direccin de usuario mediante CSS.
y orientacin de contenido
TRMINOS CLAVE
elemento de nivel de bloque plantilla de cuadrcula
borde elemento alineado
contenido margen
caja flexible (flexbox) consultas multimedia
elemento flexbox relleno
modelo de caja flexible relacin primario-secundario
elemento de cuadrcula interfaz de usuario
diseo de cuadrcula prefijo de proveedor
modelo de diseo de cuadrcula
Stacey, administrador del sitio web de Malted Milk Media, oy que usted est
trabajando con el equipo de desarrollo de aplicaciones cliente, y que est estudiando
HTML5 y CSS3. Stacey tambin est mejorando sus habilidades de HTML5 y le
gustara empezar a introducir cajas flexibles y diseos de cuadrcula en el sitio web
de Malted Milk Media una vez que las especificaciones estn ms generalizadas.
Le gustara que usted obtuviera datos sobre las cajas flexibles y los diseos de
cuadrcula, por ejemplo su compatibilidad con los exploradores actuales, y creara
una hoja informativa sobre su propiedades de CSS.
110
Organizar el contenido de la interfaz de usuario mediante CSS
Las interfaces de usuario pueden ser sencillas y claras, o pueden ser ms complejas con
varias secciones, botones y controles. Disear una interfaz que se represente bien en pantallas
de PC grandes y en dispositivos mviles pequeos sola requerir gran cantidad de marcado
y cdigo. En la actualidad, los modelos de caja flexible y de diseo de cuadrcula de CSS
reducen la cantidad de cdigo necesario para lograr compatibilidad en varios dispositivos
CONCLUSIN distintos. Las cajas flexibles contienen texto, imgenes y otro contenido, y el explorador
ajusta automticamente el tamao de la caja en funcin del tamao de pantalla usado para
visualizar el documento HTML. El mismo principio se aplica a los diseos de cuadrcula, que
no son ms que columnas y filas que controlan la distribucin del contenido en un documento
HTML. Dado que las especificaciones CSS todava no son definitivas, tendr que usar prefijos
especficos del proveedor delante de los nombres de propiedades CSS para que todo funcione.
Una interfaz de usuario es la parte de un sitio web o una aplicacin con la cual un usuario
interacta. La interfaz de usuario tiene un diseo, que puede ser sumamente sencillo, con solo
un botn o dos, o sumamente complejo, con muchas partes, cada una a su vez con uno o varios
botones, mens, barras de herramientas, formularios, etc.
Con una variedad de diseos tan grande, crear interfaces de usuario adecuadas para sitios web y
aplicaciones que se visualicen en dispositivos mviles puede resultar difcil. Elposicionamiento
y el cambio de tamao automtico de los elementos de la interfaz son ahora fundamentales en
un diseo de calidad. Por ejemplo, el posicionamiento relativo de los elementos de la interfaz de
usuario es adecuado para muchas pginas web. Los desarrolladores web han usado la propiedad
float muchos aos para lograr flexibilidad en sus diseos. La propiedad float se ha explicado
en la leccin 4. Por su parte, el posicionamiento relativo no funciona en la mayora de las
aplicaciones web mviles, porquegenera una superposicin de elementos inadecuada o
hacequelos elementos aparezcan en lugares errneos.
Una combinacin de posicionamiento absoluto y cajas flexibles (contenedores) funciona mucho
mejor para aplicaciones web mviles y ciertas partes de las pginas web en general. Por ejemplo,
para un elemento de interfaz de usuario que debe aparecer siempre en el mismo lugar de la
pantalla, por ejemplo un encabezado o pie de pgina, debe usarse el posicionamiento absoluto.
Por su parte, el modelo de caja flexible de CSS3 es ideal para elementos cuyo tamao debe
ajustarse o que deben reposicionarse (horizontal o verticalmente), dependiendo del tamao
LISTO PARA CERTIFICACIN de lapantalla. Otro modelo relacionado con la interfaz de usuario es el modelo de diseo de
Cmo se utiliza CSS para cuadrcula de CSS3, que proporciona ms control sobre diseos complejos que el modelo de
controlar la disposicin de cajaflexible. Esta leccin se centra enlosmodelos de caja flexible y de diseo de cuadrcula.
una interfaz de usuario?
3.2
Antes de profundizar en los temas de esta leccin, debe entender ciertos aspectos sobre la
compatibilidad de CSS3 y los exploradores. Como HTML5, la especificacin de CSS3 an
esten fase de desarrollo y sujeta a modificaciones. Los nombres de algunas propiedades
pueden cambiar de una versin de la especificacin de borrador CSS3 a lasiguiente y se
puedenintroducir nuevos valores de las propiedades, mientras otros seeliminan.
Para contribuir a garantizar que los estilos CSS3 funcionan durante esta etapa de transicin,
muchos de los principales exploradores web ofrecen nombres de propiedad alternativos. Estas
soluciones alternativas simplemente agregan un prefijo de proveedor, que es una palabra clave
rodeada de guiones, al inicio del nombre de propiedad CSS3. Al trabajar conpropiedades
deCSS3, tenga en cuenta lo siguiente:
Internet Explorer usa el prefijo -ms-.
Firefox admite el prefijo -moz-.
Opera admite el prefijo -o-.
Chrome y Safari admiten el prefijo -webkit-.
Por ejemplo, una propiedad de CSS3 que va a conocer en esta leccin es la propiedad flexbox.
Para aplicar el estilo de caja flexible a elementos y visualizarlos en Firefox, actualmente tiene
que usar la propiedad -moz-flexbox.
112 | Leccin 5
Es recomendable incluir todos los cuatro prefijos de proveedor para las caractersticas de
CSS3 que todava estn en desarrollo. De esa forma, es mayor la probabilidad de que la
pgina web se visualice correctamente en cualquiera de los exploradores ms conocidos.
Con todo, el uso de los cuatro prefijos de proveedor en el cdigo lo hace ms largo y no
garantiza que la caracterstica de CSS3 funcione en todos los exploradores. Si un explorador
no admite la caracterstica o la propiedad de prefijo de proveedor, la caracterstica no
se mostrar correctamente. El sitio web When Can I Use, en caniuse.com, ayuda a
determinar qu exploradores admiten caractersticas especficas de CSS3 y HTML5.
Otro procedimiento recomendado, especialmente durante la transicin a CSS3, es usar familias

de fuentes genricas para evitar posibles problemas de visualizacin en distintos exploradores.
La mejor forma de evitar resultados imprevistos es usar una familia de fuentes monospace,
TOME NOTA
* serif o sans serif. Sin embargo, CSS3 tambin ofrece la posibilidad de usar cualquier tipo de
fuente que desee. La clave es saber cundo usar monospace y cundo usar una fuente ms
elaborada. Obtendr ms informacin sobre tipografa y fuentes en la leccin 7.
Usar caja flexible para diseos sencillos y cuadrcula para diseos complejos
Las cajas flexibles se han diseado para barras de herramientas, mens, formularios
Hace aos, el W3C cre especificaciones para un modelo de cuadros simple, denominado
LISTO PARA CERTIFICACIN modelo de cuadros CSS. El modelo describe los cuadros que rodean el contenido en un
Cul es la finalidad del documento HTML, tanto si el documento se convierte en una pgina web como en una
modelo de cuadros CSS? aplicacin web. Considere que todas las partes de un documento HTML estn en un
3.2 cuadro. Cada cuadro debe ajustarse a las reglas definidas por el modelo de cuadros.
El modelo de cuadros CSS se muestra en la Figura 5-1. Las partes del modelo de cuadros
CSS son margen, borde, relleno y contenido.
Figura 5-1
Modelo de cuadros
CSS tradicional
El margen es transparente y est en el extremo exterior del cuadro, proporcionando espacio

entre el cuadro y los dems cuadros del documento. El borde rodea el cuadro propiamente
dicho. Un borde puede ser transparente, o ser de un color y tener un patrn como una
lnea discontinua. El relleno es el espacio entre el borde del cuadro y su contenido.
Generalmente, el relleno tiene el mismo color que el fondo del cuadro. El contenido es
lo que se muestra en el cuadro, por ejemplo texto e imgenes. Use las propiedades CSS
border, margin, padding, height y width para modificar las diversas partes del modelo
decuadros.
Un problema con el modelo de cuadros CSS es que diferentes exploradores aplican
las propiedades CSS de forma distinta. Por ejemplo, si bien el W3C establece que las
propiedades height y width definen la altura y la anchura del contenido de un cuadro,
enversiones anteriores de Internet Explorer se aplican las mismas propiedades a la
alturayla anchura del borde, lo que incluye el relleno y el contenido.
Los diseadores de pginas y aplicaciones web suelen recurrir al uso de valores de

propiedades CSS personalizados para que Internet Explorer utilice etiquetas CSS que
TOME NOTA
* otrosexploradores no tienen en cuenta. El concepto es similar a los prefijos de proveedor
depropiedades CSS mencionados en la seccin anterior.
Otros dos conceptos del modelo de cuadros CSS que es necesario entender son los
elementos de nivel de bloque y alineados. Un elemento de nivel de bloque crea cuadros
que contribuyen al diseo del documento. Secciones, artculos, prrafos, listas e imgenes
son ejemplos de elementos de nivel de bloque. Los elementos alineados estn diseados
para distribuir el texto y no interrumpir el flujo del documento. Aplicar negrita y el nuevo
elemento mark de HTML5 son ejemplos de elementos alineados.
Por ltimo, la relacin primario-secundario es importante cuando se trabaja con CSS.
En esencia, un cuadro primario puede contener uno o varios cuadros secundarios. Los
cuadros contenidos dentro de un cuadro primario se conocen como cuadros secundarios.
En la Figura 5-2 se muestra un ejemplo sencillo de cuadro primario con un cuadro
secundario anidado. Un secundario puede heredar estilos CSS de un primario, es decir,
los estilos aplicados a un primario se aplican tambin a un secundario. No todas las
propiedades CSS se pueden heredar. Al aplicar estilos, debe consultar la especificacin
CSS para determinar la herencia de propiedades.
Figura 5-2
Cuadros primarios
y secundarios
Desde sus inicios, CSS carece de una manera fcil de organizar elementos en horizontal
Qu es el modelo de caja
y vertical en los documento HTML, para usar CSS en el control del diseo y que este se
flexible? represente bien en diversos exploradores y en distintos tamaos de pantalla. Los modelos
3.2 de CSS3 de caja flexible y diseo de cuadrcula abordan este problema.
El modelo de cuadros flexibles de CSS es un modo de diseo para el uso de cuadros
flexibles en interfaces de usuario. El modelo forma parte del borrador de la especificacin
de CSS3. Una caja flexible ofrece diseos flexibles para interfaces de usuario. Puede crear
pginas web y aplicaciones mviles con elementos, controles, barras de herramientas,
mens y formularios que se redimensionan y reposicionan automticamente cuando el
usuario cambia el tamao de la ventana del explorador. El explorador toma en cuenta
elespacio disponible y calcula las dimensiones para el usuario, lo cual permite tamaos
relativos y posicionamiento.
Por ejemplo, en la Figura 5-3 se muestra una barra de herramientas horizontal con iconos
en una caja flexible. La caja flexible primaria se indica mediante el fondo sombreado y los
iconos son los cuadros secundarios. Cuando un usuario aumenta el tamao de la pantalla
horizontalmente, la caja flexible tambin y distribuye una cantidad uniforme de espacio
entre los elementos secundarios.
Figura 5-3
Una barra de herramientas
flexible
114 | Leccin 5
El contenido de una caja flexible se puede distribuir dinmicamente en cualquier direccin:

izquierda, derecha, arriba o abajo. Tambin se puede cambiar el orden de los cuadros, y
modificar su tamao y posicin para llenar el espacio disponible. Una caja flexible de
varias lneas ajusta el contenido en varias lneas, de forma parecida al ajuste de texto
enprrafos de los procesadores de texto.
El diseo de caja flexible se parece al diseo de bloques, pero en l no se usan columnas ni

elementos flotantes. Adems, mientras que en el diseo de bloques el contenido se dispone
TOME NOTA
* normalmente en vertical (y el diseo alineado tiende a colocar contenido en horizontal), una
caja flexible cambia de tamao en cualquier direccin.
Mientras el modelo de caja flexible es adecuado para cosas sencillas como botones, barras
LISTO PARA CERTIFICACIN de herramientas y muchos formularios, puede usar el modelo de diseo de cuadrcula
Qu es el modelo de para diseos ms complejos. El modelo de diseo de cuadrcula le permite controlar
diseo de cuadrcula? el diseo de secciones o de documentos completos basados en HTML mediante CSS3.
3.2 Talcomo implica el nombre, un diseo de cuadrcula usa filas y columnas para lograr
queeldiseo se vea ms limpio y estructurado; vea la Figura 5-4.
Figura 5-4
Ilustracin de un diseo
de cuadrcula
El diseo de cuadrcula tambin ofrece modularidad, de forma que es muy fcil soltar
elementos en una cuadrcula, o mover las partes de una cuadrcula a otra zona de un
documento. Las cuadrculas son mucho ms flexibles y fciles de usar que las tablas,
oincluso las columnas y los elementos flotantes, de HTML para estructurar el diseo.
El sitio web de The New York Times (www.nytimes.com) es un ejemplo de diseo

TOME NOTA
* decuadrcula, como casi todos los sitios de peridicos en lnea.
Usar una caja flexible para establecer alineacin, direccin y orientacin

decontenido
Tanto una caja flexible como su contenido se pueden configurar de forma que su
CONCLUSIN
Un elemento se define como caja flexible mediante las propiedades CSS display:flexbox
LISTO PARA CERTIFICACIN odisplay:inline-flexbox, descritas a continuacin:
Cmo se utiliza la caja
flexible para establecer la flexbox: establece la caja flexible como elemento de nivel de bloque
orientacin, direccin y inline-flexbox: establece la caja flexible como elemento alineado
alineacin de contenido?
3.2 Un cuadro dentro de otro cuadro es un cuadro secundario, que puede ser una caja flexible
o no. Un cuadro secundario se conoce como elemento de caja flexible.
La propiedad flexbox introduce adems otras nueve propiedades, descritas en la tabla 5-1.
En secciones posteriores va a aprender a usar muchas de estas propiedades y valores.
Tabla 5-1
Propiedades y valores Propiedad Valor Descripcin
decaja flexible
flex pos-flex Hace que los cuadros secundarios sean
neg-flex flexibles en altura y anchura.
preferred-size
none
flex-align start Establece la alineacin predeterminada de
end los cuadros secundarios. Si la orientacin
center del cuadro primario es horizontal,
baseline flex-align determina la alineacin vertical
stretch de los cuadros secundarios, y viceversa.
flex-direction row Controla la direccin de los cuadros
row-reverse secundarios en el cuadro primario;
column tambin afecta a la propiedad flex-pack.
column-reverse
flex-flow flex-direction Establece las propiedades flex-direction
flex-wrap y flex-wrap a la vez.
flex-item-align auto Invalida la alineacin predeterminada de los
start cuadros secundarios cuyo estilo se establece
end con la propiedad flex-align.
center
baseline
stretch
flex-line-pack start Establece la alineacin de los cuadros
end secundarios dentro del cuadro primario
center si existe espacio adicional.
justify
distribute
stretch
flex-order nmero Asigna los cuadros secundarios a grupos
y controla el orden en que aparecen en
un diseo, comenzando por el grupo
con el nmero ms bajo.
flex-pack start Justifica la alineacin de los cuadros
end secundarios dentro una caja flexible
center para garantizar que se llena todo el
espacio en blanco del cuadro primario.
flex-wrap nowrap Determina si los cuadros secundarios crean
wrap automticamente una nueva lnea y se
wrap-reverse ajustan a ella, o desbordan la caja flexible.
Utilice la tabla anterior como referencia al aprender a crear cajas flexibles y elementos
decaja flexible.
MS INFORMACIN
Para obtener ms informacin sobre cajas flexibles, visite la pgina web del mdulo de diseo
decuadro flexible CSS del W3C en http://www.w3.org/TR/css3-flexbox/.
116 | Leccin 5
Trabajar con cajas flexibles y elementos de caja flexible
Una caja flexible puede incluir cuadros secundarios flexibles en altura y anchura.
La propiedad flex hace que los cuadros secundarios sean flexibles. La propiedad
Echemos un vistazo al funcionamiento de una caja flexible. Suponga que una empresa
ofrece tres tipos de servicios principales, que se muestran y describen brevemente en tres
prrafos en una pgina web. Los tres prrafos forman tres contenedores de informacin,
como se muestra en la Figura 5-5.
Figura 5-5
Una caja flexible primaria
con tres cuadros secundarios
(elementos de caja flexible)
Observe el espacio adicional que hay a la derecha del ltimo cuadro secundario, etiquetado
Secundario 3. Puede modificar el CSS que controla los cuadros de forma que los tres
cuadros secundarios aumenten de tamao automtica y uniformemente para llenar el
espacio disponible en la caja flexible. Tambin puede modificar un cuadro secundario,
por ejemplo Secundario 3, de forma que sea flexible y llene el espacio, como se muestra
en la Figura 5-6.
Figura 5-6
Modificacin del tercer
cuadro secundario para
llenar el espacio disponible
APLICAR ESCALA PROPORCIONAL DENTRO DE UNA CAJA FLEXIBLE

El W3C especifica la propiedad flex, que controla la altura y la anchura de los elementos
de caja flexible. Mientras que la propiedad display: flexbox crea un cuadro primario flexible,
la propiedad flex es la que da su naturaleza flexible a los cuadros secundarios.
La propiedad display: flexbox se utiliza sin valores adicionales.
La propiedad flex puede tomar un valor de flex positivo o negativo, un tamao preferido
y la clave none, as:
flex: pos-flex neg-flex preferred-size none
Los valores de flex positivos y negativos indican flexibilidad. A pesar de que se usa la
palabra negativo, ambos son nmeros positivos, como 1, 2, 3 y as sucesivamente.
Tambin se puede usar 1.0, 2.0, 3.0, etc.
Si queda espacio en la caja flexible cuando aumenta el tamao de la pantalla, los elementos
de la caja flexible se amplan para llenar el espacio de acuerdo con el valor de flex positivo.
Un valor de 1 significa que cada elemento de la caja flexible ocupar una parte igual del
espacio disponible, un valor de 2 significa que cada elemento ocupar dos partes iguales,
y as sucesivamente. Si los elementos de la caja flexible se desbordan del cuadro primario
porque, juntos, son ms anchos que el cuadro primario, el explorador utiliza el valor de
flex negativo para determinar la altura o anchura de cada elemento.
Si no se especifica un valor de flex positivo, su valor predeterminado es 1. Si se omite
el valor de flex negativo, su valor predeterminado es 0.
El valor de tamao preferido puede ser cualquier valor vlido para las propiedades CSS
height y width, como 100px. Si no se especifica un valor de tamao preferido, el valor
predeterminado es 0px. Tambin puede establecer el valor de tamao preferido en auto,
en cuyo caso se usa el valor de la propiedad width o height como tamao preferido.
La palabra clave none equivale a 0 0 auto.
El valor de la propiedad flex requiere una explicacin ms detallada. Suponga que tiene una
caja flexible con tres cuadros secundarios. El valor de flex para Secundario1 y Secundario2
es 1 y es 2 para Secundario3. Un elemento secundario con un valor flex de 2 es el doble de
flexible que un elemento secundario con un valor de 1. Esto no significa necesariamente
TOME NOTA
* que Secundario3 ser dos veces ms ancho que Secundario1 y Secundario2. El valor de
flexin es un clculo basado en el espacio disponible para estiramiento o disminucin;
el cambio se asigna en funcin de la parte de flexibilidad en comparacin con los dems
cuadros secundarios.

La ventaja de los elementos de caja flexible es que pueden cambiar de escala o ajustar
Cmo proporciona
dinmicamente su tamao principal con libertad. Los elementos aumentan o disminuyen
una caja flexible escala en tamao segn el espacio disponible en la caja flexible en la que se encuentran.
proporcional a los En el siguiente cdigo CSS y marcado HTML, la caja flexible contiene cuatro elementos
elementos? de caja flexible. Cada elementos secundario tiene el valor de flex 1 y est establecido
3.2 en auto. Si el usuario cambia el tamao de la ventana del explorador, los elementos
secundarios deben expandirse y contraerse de la misma forma que el elemento primario.
<!doctype html>
<html>
<head>
<title>Ejemplo de cuadro secundario flexible</title>
<style>
div { display: flexbox;
outline: 2px solid silver
}
p { flex: 1 auto; margin: 1em;
font-family: sans-serif;
color: white;
background: tomato;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Este es el cuadro Secundario1.</p>
<p>Este es Secundario3.</p>
</div>
</body>
</html>
En la Figura 5-7 se muestran el antes y el despus del cambio de tamao de la ventana

delexplorador.
118 | Leccin 5
Figura 5-7
Cuadros secundarios flexibles
en un cuadro primario
CREAR UNA CA JA FLEXIBLE CON ELEMENTOS DE CA JA FLEXIBLE

PREPRESE. Para aprender a crear una caja flexible con elementos de caja flexible con
una altura fija y una anchura flexible, siga estos pasos:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un archivo HTML
que contenga el siguiente cdigo CSS y marcado:
<!doctype html>
<html>
<head>
<title>Ejemplo de cuadro secundario flexible</title>
<style>
div { display: flexbox;
outline: 2px solid silver }
p { flex: 1 auto; margin: 1em;
color: white;
background: limegreen;
height: 25px;
padding: 1em;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
La propiedad display: flexbox crea el cuadro primario: la caja flexible. Se crea un
contorno color plata para la caja flexible, que simplemente ayuda a visualizar la caja
flexible en la ventana del explorador en este ejercicio. Los estilos de prrafo (p) se
aplican a los elementos de la caja flexible (los cuadros secundarios). La propiedad
flex aplica flexibilidad a cada cuadro secundario. Los elementos tienen una anchura
preferida de 75 pxeles. Si queda espacio en la caja flexible cuando aumenta el tamao
de la pantalla, los elementos de la caja flexible se amplan horizontalmente para llenar
el espacio.
El contorno alrededor de la caja flexible (cuadro primario) se usa para que resulte ms fcil
identificar los bordes de la caja flexible. No es necesario incluir un contorno alrededor de
TOME NOTA
* las cajas flexibles en las aplicaciones o pginas web.
2. Guarde el archivo como L5-flexbox-exercise.html y bralo en un explorador web.

Lapantalla debe ser parecida a la de la Figura 5-8.
Figura 5-8
Crear una caja flexible con
elementos de caja flexible
3. Cambie el tamao de la ventana del explorador, estrechndola y ensanchndola,

arrastrando el borde derecho de la ventana hacia el centro de la pantalla y luego de
nuevo hacia la derecha. Observe cmo los elementos de la caja flexible se amplan
yse reducen con la caja flexible.
4. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos
sivaa continuar con el siguiente ejercicio durante esta sesin.
120 | Leccin 5
Alternativamente, puede usar la funcin flex de CSS con la propiedad height o width de CSS
para controlar la altura y la anchura de los elementos de caja flexible. La propiedad flex y la
funcin flex tienen el mismo comportamiento, pero su sintaxis no es la misma, yaque una
funcin contiene valores entre parntesis.
En el ejercicio siguiente se muestra cmo usar la funcin flex y se presenta la propiedad
flex-wrap. La propiedad flex-wrap determina si los cuadros secundarios crean automticamente
una nueva lnea y se ajustan a ella, como se muestra en la Figura 5-9. La propiedad flex-wrap
utiliza los valores nowrap, wrap y wrap-reverse.
Figura 5-9
Ejemplo de ajuste mediante
la propiedad flex-wrap: wrap
Como veremos, el cdigo CSS utiliza prefijos de proveedor (-ms-, -moz-, -o- y -webkit-),
necesarios para que funcione la propiedad flex-wrap. Recuerde, los prefijos de proveedor
se utilizan con frecuencia durante la transicin a CSS3 para que el cdigo sea compatible
con tantos exploradores como sea posible.
CREAR ELEMENTOS DE CA JA FLEXIBLE CON LA FUNCIN FLEX

PREPRESE. Para crear elementos de caja flexible con la funcin flex y usar la propiedad
flex-wrap, siga estos pasos:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento

HTML con el marcado siguiente:
<!doctype html>
<html>
<head>
<title>Ejemplo de funcin flex</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-o-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
height: 200px;
padding: 1em;
color: white;
outline: 2px solid silver;
}
div>div {
width: 75px;
width: -ms-flex(1 75px);
width: -moz-flex(1 75px);
width: -o-flex(1 75px);
width: -webkit-flex(1 75px);
margin: 1em;
height: 100px;
background-color: #b200ff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>Servicio 1</div>
</div>
</body>
</html>
Igual que en el ltimo ejercicio, la propiedad display: flexbox crea el cuadro primario:
la caja flexible. El segundo grupo de estilos div (div>div, que no es ms que una
formaresumida para aplicar estilos a un grupo de elementos HTML sin asignar clases)
se aplica a los elementos de la caja flexible: la propiedad width junto con la funcin
flex controlan la anchura de los elementos de la caja flexible, que tienen una anchura
preferida de 75 pxeles, pero llenarn el espacio disponible cuando aumente el tamao
de la pantalla. La propiedad flex-wrap con la funcin wrap hace que los elementos de la
caja flexible se ajusten a ella.
2. Guarde el archivo como L5-flexfunction-exercise.html y bralo en un explorador web.
Maximice la ventana. La pgina debe ser parecida a la de la Figura 5-10.
Figura 5-10
Elementos de caja flexible en
una caja flexible primaria
122 | Leccin 5
3. Reduzca un poco la anchura de la ventana del explorador arrastrando su borde

derecho hacia el centro de la pantalla. Observe que, al contraerse la caja flexible,
como queda indicado por el contorno color plata, los elementos de la caja flexible se
reducen de manera uniforme. La Figura 5-11 muestra la caja flexible con elementos
decaja flexible despus de reducir el tamao de la ventana del explorador.
Figura 5-11
La caja flexible y los
se reducen cuando se
reduce el tamao de la
ventana del explorador
4. Reduzca ms el tamao de la ventana hasta que los artculos de la caja flexible queden
ajustado a la lnea.
5. Abra el archivo en cada uno de los otros exploradores ms importantes para ver si el
archivo se representa correctamente.
6. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos si va
Una buena manera de determinar si un explorador web puede representar las propiedades
de la caja flexible es usar los controles de la pgina web Flexin en
http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html. Haga clic en cada control
TOME NOTA
* para ver si cambian la caja flexible y los elementos de la caja flexible de ejemplo.
Porejemplo, algunos exploradores representan la justificacin horizontal correctamente
yotros no. Lo mismo puede decirse de la flexin de elementos secundarios.
Otras propiedades que podra usar bastante a menudo con las cajas flexibles son:
flex-pack: justifica la alineacin de los cuadros secundarios dentro de una caja flexible
y minimiza el espacio en blanco en el cuadro primario. Esta propiedad acepta uno
decuatro valores: start, end, justify, or center.
flex-align: establece la alineacin predeterminada de los cuadros secundarios, con
un rasgo especial. Si la orientacin del cuadro primario es horizontal, flex-align
determina la alineacin vertical de los cuadros secundarios y viceversa.
Una vez que se han adaptado los elementos secundarios de una caja flexible, si todava
queda espacio disponible en dicha caja, los elementos secundarios se pueden alinear con
las propiedades flex-pack y flex-align (o flex-item-align). Lo ms importante que debe recordar
es aplicar la propiedad flex-pack a la caja flexible primaria en el cdigo CSS y aplicar
flex-align a los elementos secundarios.
CAMBIAR LA DIRECCIN DE ELEMENTOS SECUNDARIOS EN UNA CAJA FLEXIBLE

La propiedad flex-direction afecta a la direccin de los cuadros secundarios del cuadro
primario. Usa los valores row, row-reverse, column y column-reverse.
La propiedad flex-flow configura las propiedades flex-direction y flex-wrap a la vez.
Enelejemplo siguiente se utiliza la propiedad flex-flow con el valor de columna.
<!doctype html>
<html>
<head>
<title>Ejemplo de flex-flow</title>
<style>
div {
display: flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
color: white;
font-weight:bold;
}
p{
width: 100px;
margin: 1em;
height: 100px;
background-color: dodgerblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>Secundario1</p>
<p>Secundario2</p>
<p>Secundario3</p>
</div>
</body>
</html>
El resultado de representar este cdigo y marcado en el explorador web se muestra
enlaFigura 5-12.
Figura 5-12
Tres cuadros secundarios
en orden numrico
124 | Leccin 5
Para invertir el orden de los cuadros secundarios, cambie cada uno de los valores
delacolumna flex-flow a column-reverse, as:
flex-flow: column-reverse;
-ms-flex-flow: column-reverse;
-moz-flex-flow: column-reverse;
-o-flex-flow: column-reverse;
-webkit-flex-flow: column-reverse;
Compare la Figura 5-13 con la Figura 5-12 para ver los efectos del valor de inversin.
Figura 5-13
Los mismos cuadros
secundarios en orden
inverso
INVERTIR EL ORDEN DE LOS ELEMENTOS DE UNA CA JA FLEXIBLE

PREPRESE. Para crear una caja flexible que invierta el orden de los elementos
quecontiene, siga estos pasos:
HTML con el marcado siguiente:
<!doctype html>
<html>
<head>
<title>Ejemplo de orden inverso de elementos de caja flexible</title>
<style>
div {
display: flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
color: white;
font-weight: bold;
}
p{
width: 300px;
margin: 1em;
height: 100px;
background-color: olive;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>Roca</p>
<p>Papel</p>
<p>Tijeras</p>
</div>
</body>
</html>
2. Guarde el archivo como L5-reverseorder-exercise.html y bralo en un explorador

web. Ajuste el tamao de la ventana del explorador web de forma que la pantalla
seaparecida a la de la Figura 5-14.
Figura 5-14
Una caja flexible con
en orientacin vertical
3. Abra el archivo en cada uno de los otros exploradores ms importantes para ver
sielarchivo se representa correctamente.
126 | Leccin 5
4. En el archivo HTML, invierta el orden de las columnas utilizando el valor flex-flow:

column-reverse, as:
flex-flow: column-reverse;
-ms-flex-flow: column-reverse;
-moz-flex-flow: column-reverse;
-o-flex-flow: column-reverse;
-webkit-flex-flow: column-reverse;
5. Vuelva a guardar el archivo y bralo en el explorador web. La pantalla debe ser

parecida a la de la Figura 5-15.
Figura 5-15
Los elementos de la
caja flexible estn
en orden inverso
6. Abra el archivo en cada uno de los otros exploradores ms importantes para ver
sielarchivo se representa correctamente.
ORDENAR Y ORGANIZAR CONTENIDO

El orden y la organizacin del contenido de una caja flexible se pueden controlar con
LISTO PARA CERTIFICACIN la propiedad flex-order. Esta propiedad reorganiza los elementos secundarios de una caja
Cmo se utilizan cajas flexible. Para hacerlo, la propiedad asigna los elementos secundarios a grupos y, despus,
flexibles para ordenar controla el orden en que aparecen en un diseo, comenzando con el grupo que tiene el
y organizar contenido? nmero ms bajo.
3.2
Veamos cmo funciona la propiedad flex-order. El siguiente cdigo y marcado CSS crea
tres cuadros secundarios en una caja flexible:
<!doctype html>
<html>
<head>
<title>Ejemplo de orden flexible</title>
<style media="screen">
div {
display: flexbox;
flex-flow: row;
-ms-flex-flow: row;
-moz-flex-flow: row;
-o-flex-flow: row;
-webkit-flex-flow: row;
height: 200px;
padding: 1em;
background-color: palegoldenrod;
font: bold 100%/1 sans-serif;
}
div>div {
width: 100px;
margin: 1em;
height: 100px;
background-color: dodgerblue;
text-align: center;
color: white;
font-size: x-large;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>Llaves</div>
<div>Telfono</div>
<div>Cartera</div>
</div>
</body>
</html>
Al abrir el archivo en el explorador se ve el resultado que se muestra en la Figura 5-16.
Figura 5-16
Tres cuadros secundarios
en una caja flexible con
orientacin horizontal
El elemento de estilo HTML anterior incluye el atributo media=screen, que es una

consulta multimedia. Las consultas multimedia permiten adaptar un documento HTML a
dispositivos de usuario final. Los tipos de elemento multimedia HTML son: aural, braille,
TOME NOTA
* handheld, print, projection, screen, tty y tv. Se puede usar la misma sintaxis tambin con las
reglas CSS @media y @import. La regla @media all indica que se debe aplicar CSS a todas
las salidas multimedia.
La propiedad flex-order pone los cuadros secundarios en grupos ordenados. El grupo

predeterminado es 0. Los grupos se declaran y reciben un nmero en CSS con la
propiedad flex-order. Los elementos secundarios que no se asignan expresamente a un
grupo permanecen en el grupo 0 y los grupos declarados aparecen antes de grupo 0.
128 | Leccin 5
As, para reordenar los cuadros secundarios y que los cuadros de Llaves y Cartera
aparezcan antes del cuadro Telfono, agregue este cdigo al final de la seccin de estilo:
div>div:first-child,
div>div:last-child {
flex-order: 1;
-ms-flex-order: 1;
-moz-flex-order: 1;
-o-flex-order: 1;
-webkit-flex-order: 1;
}
Al abrir el archivo en el explorador web se ve el resultado que se muestra en la Figura 5-17.
Figura 5-17
Reordenacin de
cuadros secundarios
en un cuadro primario
EXPLORAR LA PROPIEDAD FLEX-ORDER

PREPRESE. Para explorar la propiedad flex-order, siga estos pasos:
HTML con el cdigo que se ha mostrado para la Figura 5-16.
2. Guarde el archivo como L5-flexorder-exercise.html.
3. Agregue el cdigo siguiente al final de la seccin de estilo:
div>div:first-child,
div>div:last-child {
flex-order: 1;
-ms-flex-order: 1;
-moz-flex-order: 1;
-o-flex-order: 1;
-webkit-flex-order: 1;
}
4. Guarde el archivo y visualcelo en un explorador web. Debe tener el aspecto
delaFigura 5-17.
5. Abra el archivo en cada uno de los otros exploradores ms importantes para ver si el
archivo se representa correctamente. Tome nota de qu exploradores son compatibles
con las propiedades flex-flow y flex-order.
Usar diseos de cuadrcula para establecer alineacin,

direccin y orientacin de contenido
Los diseos de cuadrcula se parecen a las hojas de clculo, ya que usan columnas,
CONCLUSIN filas y celdas. En realidad, puede crear diferentes tipos de diseos que, al final, no se
parecen a una hoja de clculo en absoluto.
Los diseos de cuadrcula resultan perfectos para diseos complejos que no son fciles de
administrar con cajas flexibles. Los diseos de cuadrcula son adecuados para interfaces
de juegos y para diseos de peridicos (vase la Figura 5-18). Un diseo de cuadrcula
permite colocar filas y columnas para tener control preciso sobre el diseo, con menos
cdigo CSS del que sera necesario con tcnicas ms antiguas. Otra ventaja de las
cuadrculas es su modularidad. Para mover bloques de contenido de una parte de
una pgina o aplicacin a otra, solo hay que mover unas lneas de cdigo en CSS.
Figura 5-18
Un diseo de peridico
con una cuadrcula
Un elemento (diseo) de cuadrcula se define con la propiedad display:grid o display:inline-

grid de CSS. As se crea el contenedor para el diseo.
LISTO PARA CERTIFICACIN Los elementos secundarios de una cuadrcula se denominan elementos de cuadrcula,
Cmo se utiliza el quese colocan y dimensionan segn:
diseo de cuadrcula para
establecer la orientacin, Trayectorias de cuadrcula: son las columnas y las filas de la cuadrcula. Las
direccin y alineacin trayectorias de cuadrcula se definen con las propiedades grid-rows y grid-columns.
de contenido? Lneas de cuadrcula: son las lneas horizontales y verticales que dividen las
3.2 columnas o las filas.
Celdas de cuadrcula: es el espacio lgico usado para colocar elementos
decuadrcula, similares a una celda de una hoja de clculo.
Las propiedades de cuadrcula y sus valores se enumeran en la tabla 5-2.
Tabla 5-2
Propiedades y valores Propiedad Valor Descripcin
de cuadrcula
Propert grid-columns length Especifica parmetros para una o varias
o percentage columnas o filas de una cuadrcula
grid-rows fraction
max-content
min-content
minmax
(min, max)
auto
grid-template string+ Proporciona una visualizacin de la estructura
none del elemento de cuadrcula y define las celdas
de la cuadrcula
grid-cell string Coloca un elemento secundario en una celda
none de la cuadrcula con nombre
grid-column [integer o Coloca elementos secundarios en una
o string start] cuadrcula
grid-row [integer o
string end]
auto
grid-column-span integer Define las dimensiones de una celda de la
o cuadrcula especificando la distancia (en lneas)
grid-row-span desde la lnea inicial hasta la lnea final
(contina)
130 | Leccin 5
Tabla 5-2
(contina) Propiedad Valor Descripcin
grid-column-sizing track-minmax Cambia el tamao de columnas o filas
o implcitas, cuyo tamao es automtico
grid-row-sizing de forma predeterminada
grid-flow none rows columns Crea columnas o filas adicionales

segn sea necesario para que quepa
el contenido
grid-column-align start end center Controla la alineacin de un elemento
o stretch secundario dentro de una celda
grid-row-align
Con todas las propiedades disponibles, es fcil imaginar que la estructura de la cuadrcula,
y la posicin y el tamao de sus elementos, se pueden especificar de muchas maneras.
Crear una cuadrcula con las propiedades de CSS para filas y columnas
Las propiedades display:grid (o display:inline-grid), grid-columns y grid-rows de CSS se usan

o flexible.
Las propiedades principales para crear una cuadrcula son display:grid (o display:inline-grid),
grid-columns y grid-rows.
Las columnas y filas se pueden definir de forma que tengan un tamao fijo, que no
cambia cuando cambia el tamao de la pantalla, o un tamao fraccionario relativo al
de la cuadrcula. Los tamaos fraccionarios se definen mediante fr, de modo que una
fila definida como 2fr tendr un tamao doble que el de una fila definida como 1fr.
LISTO PARA CERTIFICACIN El valor 1fr indica una fraccin. Tambin se puede usar el valor auto para que las columnas
Cules son las o filas se ajusten a su contenido.
propiedades de CSS
El siguiente cdigo CSS y marcado HTML proporcionan un ejemplo de diseo de
para las filas y columnas
cuadrcula. El prefijo de proveedor -ms- se incluye al principio de todas las construcciones
de una cuadrcula?
relacionadas con cuadrculas porque, en el momento de escribir este libro, solo Microsoft
3.2
Internet Explorer 10 admite diseos de cuadrcula. Esto se ilustra en la Figura 5-19.
Figura 5-19
Diseo de cuadrcula sencilla
<!doctype html>
<html>
<head>
<title>Ejemplo de cuadrcula</title>
<style type="text/css">
#grid {
background: palegoldenrod;
border: silver;
display: -ms-grid;
color: white;
font-weight: bold;
-ms-grid-columns: 150px auto 2fr;
-ms-grid-rows: 50px 6em auto;
}
#logo {
background: dodgerblue;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#item {
background: olive;
-ms-grid-row: 2;
-ms-grid-column: 2;
}
</style>
</head>
<body>
<div>
<div id="grid">
<div id="logo">Logotipo</div>
<div id="item">Elemento</div>
</div>
</div>
</body>
</html>
En este ejemplo, la estructura de la cuadrcula tiene tres columnas y tres filas. La primera
columna tiene una anchura fija de 150 pxeles. La anchura de la segunda columna se
ajusta al contenido de la columna, como indica la palabra clave auto. La tercera columna
mide dos unidades fraccionarias del espacio que queda en la cuadrcula.
La primera fila tiene una altura de 50 pxeles, la segunda fila tiene una altura de 6 ems
yla altura de la tercera fila se ajusta al contenido de la fila.
CREAR UN DISEO DE CUADRCULA SENCILLO

PREPRESE. Para crear un diseo de cuadrcula sencillo, siga estos pasos:
HTML con el cdigo que se ha mostrado para la Figura 5-19.
2. Guarde el archivo como L5-grid-exercise.html.
3. Abra L5-grid-exercise.html en Internet Explorer 10. La representacin del archivo
HTML en cualquier otro explorador producir resultados impredecibles. El diseo
debetener un aspecto como el de la Figura 5-19.
132 | Leccin 5
4. Agregue otro elemento a la cuadrcula, de modo que aparezca una celda en la tercera
fila y tercera columna. Para ello, escriba el cdigo siguiente al final de la seccin
deestilo:
#item2 {
background: orange;
-ms-grid-row: 3;
-ms-grid-column: 3;
}
5. Escriba lo siguiente despus del elemento div en la seccin de cuerpo:

<div id="item2">Elemento2</div>
6. Vuelva a guardar el archivo y visualcelo en un explorador web. El diseo debe tener

un aspecto como el de la Figura 5-20.
Figura 5-20
Un tercer elemento agregado
a la cuadrcula
7. Cierre la herramienta de edicin y el explorador web.
MS INFORMACIN
Para obtener ms informacin sobre diseos de cuadrcula, visite la pgina de diseo de cuadrcula
CSS en http://www.w3.org/TR/css3-grid-layout/.
Comprender las plantillas de red
Una plantilla de cuadrcula utiliza caracteres alfabticos para representar la posicin de

LISTO PARA CERTIFICACIN El mdulo de diseo de plantillas de cuadrcula de CSS de W3C ofrece otra forma de
Qu es una plantilla disear cuadrculas: la creacin de una plantilla de cuadrcula, que es como una tabla
de cuadrcula? vaca en la que se pueden incorporar datos. Una plantilla de cuadrcula utiliza caracteres
3.2 alfabticos para representar la posicin de los objetos en una cuadrcula.
Se usa la propiedad grid-position y se asigna un carcter alfabtico como valor de posicin.
Enlos ejemplos siguientes se muestra la propiedad grid-position definida para cuatro elementos:
news { grid-position: a; }
weather { grid-position: b; }
sports { grid-position: c; }
events { grid-position: d; }
Despus de asignar posiciones, se crea un diseo mediante cadenas de caracteres. Una
cadena equivale a una fila y cada carcter de la cadena es una columna. Por ejemplo,
para crear una cuadrcula con una fila y cuatro columnas cuyo tamao se ajusta al
contenido, se usara la siguiente sintaxis:
div { grid-template: "abcd"; grid-rows: auto;
grid-columns: auto;}
Aunque en este ejemplo se utiliza la palabra clave auto, se puede usar cualquiera de los
valores de grid-rows y grid-columns indicados en la tabla 5-2.
Con todo, podra encontrar alguna plantilla de cuadrcula en el examen MTA 98-375.
Enconsecuencia, debe consultar la ltima especificacin del mdulo de diseo de
plantillade cuadrcula CSS de W3C al prepararse para el examen.

L as interfaces de usuario pueden ser sencillas y claras, o pueden ser ms complejas
Disear una interfaz que se represente bien en pantallas de PC grandes y en
En la actualidad, los modelos de caja flexible y de diseo de cuadrcula de CSS reducen
la cantidad de cdigo necesario para lograr compatibilidad en varios dispositivos
distintos. Dado que las especificaciones CSS todava no son definitivas, tendr que
usar prefijos de proveedor delante de los nombres de propiedades CSS para que
todo funcione.
Las cajas flexibles se han diseado para barras de herramientas, mens, formularios
Tanto una caja flexible como su contenido se pueden configurar de forma que su
Una caja flexible puede incluir cuadros secundarios flexibles en altura y anchura.
Los diseos de cuadrcula se parecen a las hojas de clculo, ya que usan columnas,
Las propiedades display:grid (o display:inline-grid), grid-columns y grid-rows de CSS se usan
o flexible.
Las cajas flexibles y cuadrculas estn diseadas para cambiar de tamao
proporcionalmente.
La propiedad flex-order permite cambiar el orden de los elementos secundarios de una
marcado HTML.
Una plantilla de cuadrcula utiliza caracteres alfabticos para representar la posicin de
elusuario.
134 | Leccin 5
3. En el modelo de cuadros CSS de W3C, un crea cuadros que

contribuyen al diseo del documento.
4. Los elementos secundarios de una caja flexible se denominan
ysedistribuyen mediante el modelo de caja flexible.
5. Los elementos secundarios de una cuadrcula se denominan .
6. Una ofrece diseos flexibles para el diseo de interfaces de usuario,
principalmente para crear controles, barras de herramientas, mens y formularios que
se reajustan y reposicionan de manera automtica cuando el usuario cambia el tamao
de la ventana del explorador.
7. La relacin describe cmo un cuadro primario puede contener
unoo varios cuadros secundarios.
8. Una es como una tabla vaca a la que se pueden incorporar datos.
9. Un elemento est diseado para disponer texto y no interrumpe
elflujo de un documento. Entre los ejemplos se incluyen la negrita y el nuevo
elemento de marca de HTML5.
10. Mientras el modelo de cuadros flexibles es adecuado para cosas sencillas como
botones, barras de herramientas y muchos formularios, puede usar el modelo
para diseos ms complejos.
Varias opciones
1. El modelo de cuadros CSS de W3C original no incluye cul de las siguientes
opciones?
a. margen
b. borde
c. barra de herramientas
d. relleno
2. Cul de las siguientes opciones es la que mejor se adapta a botones y barras
deherramientas?
a. modelo de caja flexible
b. modelo de cuadros de CSS
c. modelo de diseo de cuadrcula
d. ninguna de las anteriores
3. Est usando CSS para crear una caja flexible en un documento HTML para el trabajo.
Todos en el trabajo utilizan el explorador web Internet Explorer. Qu prefijo debe
usarse con los nombres de propiedad CSS para asegurar la compatibilidad mientras
se visualiza el documento HTML?
a. -moz-
b. -ms-
c. -webkit-
d. -o-
4. Qu propiedad de las cajas flexibles hace que los cuadros secundarios sean flexibles
en altura y ancho?
a. flex
b. flex-child
c. flex-wrap
d. flex-align
5. Desea asegurarse de que el espacio adicional en una ventana del explorador se

distribuye equitativamente respecto del tamao de todos los cuadros secundarios
deuna caja flexible. Qu propiedad CSS debe usarse?
a. flex-align
b. flex-wrap
c. flex-order
d. flex-pack
6. Qu propiedad de caja flexible asigna elementos secundarios a grupos para controlar
la disposicin dentro de una caja flexible?
a. flex
b. flex-group
c. flex-direction
d. flex-order
7. Cul de las siguientes opciones coloca elementos secundarios en una cuadrcula?
a. grid-columns
b. grid-column
c. grid-flow
d. grid-pack
8. Cul de las siguientes opciones le permite adaptar un documento HTML a dispositivos
de usuario final?
a. Consultas multimedia
b. El modelo de cuadros de CSS
c. La propiedad grid-template
d. @import
9. Cul de las siguientes opciones es el mejor uso de un diseo de cuadrcula?
a. Men
b. Barra de herramientas
c. Footer
d. Interfaz de juego
10. Cul es el propsito principal de una plantilla de cuadrcula?
a. Dar estilo a una cuadrcula
b. Crear una tabla que contenga datos
c. Asegurar que su cuadrcula tiene igual nmero de filas y columnas
d. Ninguna de las anteriores
Verdadero / Falso
VF1. A una caja flexible la define un elemento con las propiedades CSS
display:boxflex o display:inline-boxflex.
VF2. Una caja principal puede contener una o ms cajas secundarias.
VF3. No se puede invertir el orden de las cajas secundarias dentro de una caja flexible.
VF4. Una caja flexible requiere un color de contorno o de fondo.
VF5. Un uso apropiado para un diseo de cuadrcula es en un peridico o juego
enlnea.
136 | Leccin 5
Escenario 5-1: Distinguir entre el modelo de caja flexible y el modelo
dediseo de cuadrcula
Una compaera de trabajo llamada Cynthia confunde el modelo de caja flexible CSS
deW3C con el modelo de diseo de cuadrcula. Qu le dice para aclarar ambos?
Escenario 5-2: Comprender cajas flexibles y elementos de cajas flexibles

La seorita Takeet es una maestra en Barely Tall Academy, un preescolar privado. Desea
desarrollar un juego de memoria para ayudar a sus estudiantes a aprender sobre animales
africanos. El juego incluir muchos cuadros que contienen imgenes y preguntas. Ha
decidido usar un diseo flexible pero no tiene ninguna experiencia con HTML5 o CSS,
y se est frustrando al tratar de entender las cajas flexibles y los elementos de las cajas
flexibles. Qu le dice a la seorita Takeet?
Escenario 5-3: Solucionar la incompatibilidad del explorador de manera
alternativa
Ed dice que no importa cun cuidadosamente comprueba su cdigo CSS y marcado
HTML, y que ha validado su documento en la pgina web Servicio de validacin de
marcado W3C: el documento no se representa como se esperaba en el explorador web.
Algunas de las propiedades de la caja flexible simplemente no funcionan. Qu le dice
aEd?
Escenario 5-4: Comprender la propiedad de flexin

Ed est de vuelta con otro problema. Est experimentando con la propiedad de flexin
para crear partes de una pgina web. Quiere que un cuadro secundario sea el doble de
tamao que el otro cuadro secundario de la misma fila. Dice que usa un valor de flexin
2 para el segundo cuadro, pero no se representa con el doble de tamao que el primer
cuadro secundario. Qu le dice usted para ayudarle a entender mejor la propiedad
deflexin?
Administrar el flujo LECCIN 6
de texto mediante
CSS

del examen MTA
Administrar el flujo del contenido Administrar el flujo del contenido 3.3
de texto mediante CSS de texto mediante CSS.
Comprender y usar regiones para Administrar el flujo del contenido 3.3
hacer fluir el contenido de texto de texto mediante CSS.
entre varias secciones
TRMINOS CLAVE
contenedor de contenido guiones
origen de contenido iframe
exclusiones de CSS diseo con varias columnas
regiones CSS flujo con nombre
flow-from flotador posicionado
flow-into
Stacey, el administrador del sitio web de Malted Milk Media, ha disfrutado estudiando
HTML5 y CSS3 con su ayuda. Le pide un ltimo favor: le gustara aprender ms
sobre las tcnicas de flujo contenido mediante CSS3. Quiere preparar una presentacin
electrnica sobre regiones CSS, diseo con varias columnas, guiones y exclusiones de
CSS. Le gustara presentar la informacin en un almuerzo de trabajo para el personal
lasemana que viene.
Administrar el flujo del contenido de texto mediante CSS
Tradicionalmente, el flujo de contenido ha sido un procedimiento manual en los

CONCLUSIN documentos HTML. En la actualidad, las regiones CSS, las exclusiones de CSS y los
diseos de varias columnas contribuyen a que el contenido fluya de forma dinmica.
137
138 | Leccin 6
El complejo diseo de pginas de publicaciones impresas como libros, peridicos y revistas

se ha mejorado mucho con el software de fabricantes como Adobe y Microsoft. Adobe
InDesign, Microsoft Publisher e incluso Microsoft Word 2010 controlan eficientemente
el flujo de contenido entre columnas. InDesign y Publisher son especialmente tiles para
hacer que el contenido fluya entre reas de un documento que no son adyacentes (se tocan),
por ejemplo las que estn separadas por imgenes, cuadros de contenido o pginas.
Elsoftware de autoedicin facilita la conexin de contenido en reas distintas, de forma
que los cambios realizados en un rea permitan que el contenido fluya correctamente
enotras reas conectadas.
En los documentos HTML, el flujo de contenido ha sido un reto para los diseadores
web y de aplicaciones durante aos. La visualizacin de un diseo complejo en HTML
requiere la misma colocacin flexible de cuadros que el software de autoedicin, pero las
LISTO PARA CERTIFICACIN herramientas para llevar a cabo este tipo de flujo de contenido no han estado disponibles
Cmo se usa CSS para hasta hace poco.
administrar el flujo de
Microsoft y Adobe colaboraron con el W3C para crear el concepto de regiones CSS para
contenido de texto en
un documento HTML?
flujo de contenido basado en web. Las regiones CSS permiten que los desarrolladores hagan
fluir contenido de manera dinmica entre varios cuadros, o contenedores, en documentos
3.3
HTML con diseos fluidos. El contenido se ajusta y muestra correctamente tanto si el
usuario visualiza el documento en una pantalla grande o en la de una tableta pequea.
Figura 6-1
Un diseo web con columnas
TOME NOTA
* Si bien CSS3 permite usar diseos de varias columnas para separar el contenido en
Microsoft recomienda columnas (vea la Figura 6-1), las regiones CSS ofrecen un mejor control del flujo de
usar regiones CSS para contenido en diseos ms complejos. Las regiones CSS se usan conjuntamente con
el diseo de pginas y tcnicas de diseo CSS como columnas, cajas flexibles y diseos de cuadrcula.
JavaScript en el desarrollo Los guiones, que parten las palabras entre slabas al final de las lneas, son tambin
de aplicaciones en importantes para lograr diseos fluidos, ya que permiten la justificacin completa de
tiempo de ejecucin en losprrafos independientes y los que estn en columnas. Los flotadores posicionados,
Windows8 e Internet queahora se denominan exclusiones CSS, permiten ajustar texto por completo alrededor
Explorer 10. de imgenes, formas y contenedores de texto.
En esta leccin se tratan las regiones CSS, varias columnas de CSS3, los guiones de CSS3
y los flotadores posicionados para ayudarle a aprender a fluir y presentar contenido en
diseos HTML que se ajustan dinmicamente.
MS INFORMACIN
Para obtener ms informacin sobre regiones CSS, guiones y varias columnas, Adobe y Microsoft
ofrecen buenos recursos de consulta. Visite la pgina de Adobe sobre regiones CSS3: y diseo
depginas con HTML en http://adobe.ly/kN7MUy. Para obtener ms informacin de Microsoft,
visitesu pgina web sobre CSS en http://bit.ly/rZLwOr.
Administrar el flujo de texto mediante CSS | 139
Comprender y usar regiones para hacer fluir el contenido de texto

entre varias secciones
Las regiones CSS permiten que el contenido fluya entre las reas adyacentes o distantes
CONCLUSIN de un documento HTML. Las regiones CSS son reas definidas de un documento HTML
en las que puede fluir contenido. Si hay demasiado contenido para caber en una regin,
el contenido que queda fluye automticamente a la regin siguiente. Es algo parecido al
funcionamiento de los programas de diseo de pginas.
En un documento HTML tpico, el contenido se puede mostrar en distintas secciones o

reas, pero cada rea es independiente. Si desea que el texto de desbordamiento pase de un
rea a otra, por lo general debe hacerlo manualmente. Este enfoque no funciona bien cuando
un usuario cambia el tamao de la pantalla o usa herramientas de accesibilidad como un
ampliador de pantalla. Este mtodo tampoco se presta al cambio automtico de orientacin,
de vertical a horizontal, en tabletas y smartphones. Una solucin son las regiones CSS.
Las regiones CSS son reas definidas de un documento HTML en las que puede fluir
contenido. De forma similar a un programa de diseo de pginas, cuando hay demasiado
contenido para que se ajuste a una regin, el contenido restante fluye automticamente a la
Qu son las regiones CSS?
regin siguiente. Vea la Figura 6-2. Si un usuario cambia el tamao de la pantalla en la que
3.3
se visualiza el documento, o visualiza el documento en una pantalla ms pequea o ms
grande, el contenido se redimensiona y se ajusta automticamente a las distintas regiones.
Figura 6-2
Flujo de contenido
con regiones CSS
Las regiones no tienen que estar juntas en el documento y se puede controlar el orden en que
aparece el contenido que fluye. En la Figura 6-3 se muestra flujo de contenido entre regiones
no contiguas. Este tipo de flujo permite agregar citas y barras laterales a un documento sin
interrumpir el flujo del contenido.
Figura 6-3
Flujo de contenido no
contiguo entre regiones
140 | Leccin 6
Fluir contenido dinmicamente entre contenedores
Para implementar regiones CSS, debe especificar un origen de contenido y contenedores

de contenido. Las dos tareas se realizan con las propiedades flow-into y flow-from.
Un origen de contenido puede ser un bloque de texto, o varios, del mismo documento
LISTO PARA CERTIFICACIN HTML o de otro, que tiene el contenido que desea que fluya por todo un diseo.
Qu es un origen de Elcontenido se conoce como una corriente de contenido.
contenido y un contenedor
de contenido en relacin Tambin necesita contenedores de contenido, que son las reas hacia las que fluye el
con las regiones CSS? contenido. Un documento HTML con contenedores de contenido acta como una pgina
3.3 maestra, como una plantilla, en la cual el tamao y la posicin de cada contenedor se
coloca donde desea que aparezca contenido, pero cada contenedor est inicialmente vaco.
Dentro del origen de contenido, al elemento que contiene el contenido que se va a fluir
sele asigna la propiedad CSS flow-into. El valor de esta propiedad se conoce como flujo
LISTO PARA CERTIFICACIN con nombre.
Cmo se puede hacer
fluir texto entre varias
El ejemplo siguiente comienza con cdigo CSS para un origen de contenido. El valor de
flow-into es main, que es el flujo con nombre. Como en realidad el contenido aparecer
regiones?
3.3
en otro lugar (en los contenedores de contenido), este elemento de origen no se mostrar
en la pgina HTML.
<style>
#source {
flow-into: main;
}
.region {
flow-from: main;
background: #9ACD32;
}
</style>
<body>
<div id="source">
<p>Lorem ipsum dolor ...</p>
</div>
<div id="region1" class="region"></div>
</body>
El W3C define las regiones CSS en la especificacin de regiones CSS, un trabajo que
todava no ha terminado en el momento de escribir este libro. Por ello, como sucede con las
*
TOME NOTA
cajas flexibles y las cuadrculas descritas en la leccin 5, debe usar prefijos de proveedor
con los nombres de propiedades. Ver el uso del prefijo de proveedor en el siguiente
ejercicio paso a paso.
Continuando con el mismo ejemplo, la propiedad CSS flow-from crea el contenedor de

contenido, que es una regin CSS. El valor de la propiedad flow-from debe coincidir con
el valor del flujo con nombre de la propiedad flujo-into. Esta es la forma en que se asocian
el origen de contenido y el contenedor de contenido. En el ejemplo de esta seccin el
origen de contenido se incluye en el mismo documento HTML que los contenedores

de contenido, por comodidad. En una situacin real, lo ms probable es que usara
documentos HTML distintos para el origen y los contenedores.
Cuando la pgina con los contenedores de contenido se representa en un explorador,
elcontenido fluye en los contenedores y se ve en la pantalla como se muestra en la
Figura6-4. Si cambia el tamao de la pantalla, el contenido vuelve a fluir como se
muestra en la Figura 6-5.
Figura 6-4
Flujo de contenido
en contenedores
Figura 6-5
Si cambia el tamao de la
pantalla, el contenido fluye
de otra manera
Tambin puede tener varios orgenes y asignar la propiedad flow-into a varios elementos.
El contenido se obtendr desde el origen en el orden en el que aparece en el Document
Object Model (DOM). Esto se conoce como el orden del documento.
El DOM se explic en la leccin 1, pero debe revisarse aqu. El DOM es una especificacin
del W3C que describe la estructura de documentos HTML y Extensible Markup Language
TOME NOTA
* (XML) dinmicos de una manera que un explorador web puede manipular. El DOM permite
que los programas y scripts actualicen el contenido, la estructura y los estilos sobre la marcha.
Se puede modificar todo lo que haya en un archivo HTML o XML.
142 | Leccin 6
TEXTO DESBORDANTE
Con objeto de que funcionen las regiones CSS, el flujo del contenido no puede afectar a la
altura de una regin: las alturas de las regiones se deben definir en CSS de forma que no
sean flexibles. Una regin recibe tanto contenido como puede albergar y, a continuacin,
fluye el contenido restante a la regin siguiente.
Si todava queda contenido una vez que se han llenado todas las regiones, puede
producirse una de tres situaciones. El contenido desbordante de la ltima regin:
Se truncar
Continuar el desbordamiento y ser visible
Continuar el desbordamiento pero estar oculto
El contenido desbordante de la ltima regin se puede controlar mediante las propiedades
region-overflow y overflow.
region-overflow se establece en auto o break. Con el valor auto la propiedad overflow
se puede establecer en visible u oculta. Por ejemplo, si desea que el contenido de
desbordamiento contine fluyendo y est visible, debe usar la siguiente sintaxis:
.region {
region-overflow:auto;
overflow:visible;
}
En la Figura 6-6 se muestra contenido visible que fluye ms all del final de la ltima
regin.
Figura 6-6
Contenido de desbordamiento
visible
Si se usa el valor break en region-overflow se impide que el contenido se desborde ms

allde la ltima regin. El contenido se trunca en ese punto. La sintaxis es:
.region {
region-overflow:break;
}
IMPLEMENTACIN DE MICROSOFT DE REGIONES DE CSS

El mtodo de Microsoft para implementar regiones CSS no es exactamente igual quela
versin de W3C descrita anteriormente. Microsoft usa iframes como origen del contenido.
Son cuadros en miniatura en una pgina web con contenido externo incrustado en un
documento HTML. Tambin es necesario usar el prefijo de proveedor -ms- con las
propiedades flow-into y flow-from.
Por ejemplo, a continuacin se muestra un elemento iframe con un identificador nico,

que se agregara a una pgina maestra:
<iframe id="main-data-source" src="source.html" />
A continuacin, se creara el flujo con nombre mediante un selector CSS que especifica
elorigen de los datos:
#main-data-source { -ms-flow-into: main; }
Para crear contenedores de contenido, asigne un nombre de clase a los elementos que
desea usar como contenedores:
<div class="region"></div>
<div class="region"></div>
El uso de region en ambos casos no es un error. Al igual que al aplicar cualquier regla CSS,
puede identificar regiones mediante un nombre de clase compartido (como en este ejemplo)
TOME NOTA
* o enumerarlas mediante identificadores individuales (como en el primer ejemplo).
A continuacin, cree un selector CSS que especifique la fuente de datos desde la cual
aceptar el flujo de contenido:
.region { -ms-flow-from: main; }
Si compara este cdigo y marcado especficos de Microsoft con el ejemplo general

anterior, ver las similitudes con bastante claridad.
Hay unas cuantas cosas ms que debe tener en cuenta sobre la versin de Microsoft
delasregiones CSS, que pueden aparecer en el examen del curso 98-375:
msRegionUpdate: permite manipular regiones dinmicamente

msRegionOverflow: controla el desbordamiento de contenido, de forma similar
alapropiedad region-overflow
msGetRegionContent: mtodo de scripting que Microsoft define diciendo que devuelve
un conjunto de instancias de intervalo correspondiente al contenido del flujo de
regin que est situado en la regin
Podra ver estas construcciones al estudiar o desarrollar regiones CSS para su uso
enWindows 8 o Internet Explorer 10.
CREAR REGIONES CSS

PREPRESE. Para crear regiones CSS, siga estos pasos:
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>Ejemplo de regiones CSS</title>
144 | Leccin 6
body, html { height:100%; width:100%; }
body{
font-family: serif;
color: black;
font-size: large;
}
#source{
-webkit-flow-into: main;
}
.region{
-webkit-flow-from: main;
margin: 0 25px 0 0;
background: #EEE8AA;
padding: 20px;
}
#region1{
width: 20%;
height: 50%;
float: izquierda;
}
#region2{
width: 20%;
height: 50%;
float: izquierda;
}
#workarea{
posicionamiento: absoluto;
padding: 25px;
}
</style>
</head>
<body>
<div id="source">
<p>Lorem ipsum dolor . . . mollis un ipsum.</p>
</div>
<div id="workarea">
</div>
</body>
</html>
Los puntos suspensivos (. . .) en el prrafo de Lorem ipsum indican que se ha emitido
parte del contenido por motivos de presentacin. En el documento HTML, incluya un
prrafo de texto simulado de entre 8 y 10 lneas.
2. Guarde el archivo como L6-regions-exercise.html.
3. Aplique negrita alineada a algn texto que est hacia la mitad de un prrafo.
4. Vuelva a guardar el archivo.
5. Observe que el cdigo CSS usa el prefijo de proveedor -webkit-. Debe una marca de
la lnea de comandos para habilitar las regiones CSS en el explorador. Para hacerlo,
seleccione Inicio, escriba el nombre del explorador en el cuadro de bsqueda, haga

clic con el botn secundario en el nombre del explorador en la lista de resultados y,
a continuacin, seleccione Propiedades. Se abre el cuadro de dilogo Propiedades.
En el campo de destino, ponga el cursor al final del campo, escriba un espacio y,
acontinuacin, escriba --enable-css-regions.
6. Haga clic en Aceptar.
7. Abra L6-regions-exercise.html en el explorador web. Haga que la ventana del explorador
tenga un tamao para que haya contenido en los dos contenedores y el contenido
en negrita est en el contenedor de la izquierda. El resultado debe ser parecido
alaFigura 6-7.
Figura 6-7
El contenido fluye
en los contenedores
de las regiones CSS
8. Reduzca el tamao de la ventana del explorador para ver el efecto del contenido
dedesbordamiento.
9. Cmo puede impedir que contenido pase al segundo contenedor? Haga los cambios
necesarios en el cdigo CSS, vuelva a guardar el archivo y vea el resultado en el
explorador.
MS INFORMACIN
Visite la pgina web del mdulo de nivel 3 de regiones de CSS del W3C en
http://www.w3.org/TR/2012/WD-css3-regions-20120823/ para obtener la informacin ms reciente sobre
laimplementacin de regiones de CSS. Puede realizar una prueba de uso de regiones de CSS en el sitio web
de Microsoft, en http://bit.ly/veOZX2. (Nota: Es posible que esta pgina requiera Internet Explorer 10 para
unarepresentacin adecuada.)
Usar columnas y guiones para optimizar la legibilidad del texto
CSS3 permite crear diseos de varias columnas que funcionan de forma muy parecida
a la caracterstica de columnas de Microsoft Word. Tambin puede habilitar los guiones
para partir correctamente las palabras al final de las lneas. As se evita el problema de
las palabras largas que se ajustan a la lnea siguiente y dejando un hueco en la lnea
anterior.
Otras de las caractersticas nuevas de CSS3 son los diseos de varias columnas y los
guiones. Ahora puede crear varias columnas, con el estilo de un peridico, en documentos
HTML que se escalan en funcin del tamao de la pantalla del usuario. Los guiones parten
palabras al final de las lneas para crear un margen derecho ms uniforme yeliminar
huecos de espacio en blanco en los prrafos.
146 | Leccin 6
CREAR COLUMNAS
Las propiedades de CSS3 para el diseo de varias columnas le permiten crear columnas
dividiendo texto en varias columnas, especificar la cantidad de espacio que aparece entre
columnas (la separacin), hacer que aparezcan lneas verticales (reglas) entre columnas
ydefinir dnde se parten las columnas.
Las principales propiedades de CSS que se usan para crear y manipular varias columnas
en un documento HTML son:
column-count: establece el nmero de columnas en las que se debe dividir un elemento.
Tambin se puede usar la propiedad de columnas con valores para establecer las
propiedades column-count y column-width a la vez.
column-gap: especifica la distancia entre las columnas.
column-rule: crea una lnea vertical en la separacin entre las columnas y establece
elancho, el estilo (lnea simple o doble, continua, discontinua, 3D, etc.) y el color
delaregla.
En el diseo de varias columnas de CSS3 se usa el concepto de cuadro de columna en
referencia al contenedor en el que se encuentra el contenido, que se muestra en columnas.
El cuadro de columna est entre el cuadro de contenido y el contenido en el modelo de
cuadros de CSS original. Consulte la leccin 5 si necesita informacin sobre el modelo
decuadros.
En la tabla 6-1 se indican todas las propiedades de columna de CSS3.
Tabla 6-1
Propiedades de varias Propiedad Valor Descripcin
columnas usadas en CSS3
break-after auto Inserta un salto despus del cuadro
always de columnas generado
avoid
left
right
page
column
region
avoid-page
avoid-column
avoid-region
break-before (los mismos Inserta un salto antes del cuadro
que break-after) de columnas generado
break-inside auto Inserta un salto dentro del cuadro
avoid de columnas generado
avoid-page
avoid-column
avoid-region
column-count integer Establece el nmero de columnas
auto que usar un elemento
column-fill auto Especifica cmo llenar las columnas.
balance Equilibra el contenido uniformemente
entre las columnas, si se puede, o llena
las columnas secuencialmente.
(contina)
Tabla 6-1
(contina) Propiedad Valor Descripcin
column-gap length Especifica el espacio entre columnas
normal
column-rule column-rule-width Es una propiedad resumida que establece
column-rule-style las propiedades column-rule-width,
column-rule-color column-rule-style y column-rule-color
transparent en el mismo lugar de una hoja de estilos
column-rule-color color Especifica el color de la regla entre
columnas
column-rule-style border-style Especifica el estilo de la regla entre las
columnas, por ejemplo continua, doble,
discontinua, etc.
column-rule-width border-width Especifica el ancho de la regla entre
columnas
column-span none Especifica si un elemento debe abarcar
all todas las columnas o ninguna
column-width length Especifica el ancho de una o varias
auto columnas
columns column-width Establece las propiedades column-width
column-count y column-count a la vez
Veamos ahora cmo funciona el cdigo CSS. Este cdigo usa la propiedad column-count
Cmo se crean varias
para crear tres columnas con el texto del marcado HTML siguiente:
columnas con CSS en <head>
un documento HTML? <style>
.tricolumn { column-count: 3; }
3.3 </style>
</head>
<body>
<h2>Tres columnas</h2>
<div class="tricolumn">
Lorem ipsum. . . orci.
</div>
</body>
Dado que las columnas CSS3 todava se encuentran en fase de desarrollo, podra tener que
agregar prefijos de proveedor a los nombres de propiedades de columnas. En este caso,
hemos modificado el cdigo como se indica a continuacin para los cuatro exploradores
ms conocidos:
<style>
.tricolumn {
-ms-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-webkit-column-count: 3;
}
</style>
148 | Leccin 6
El resultado se ve como indica la Figura 6-8 en el explorador web Mozilla Firefox.

Figura 6-8
Tres columnas
Puede crear varias columnas usando la propiedad columnas, que es una ms breve de
establecer el nmero y el ancho de las columnas en una sola declaracin. En el siguiente
cdigo se usa el valor auto para el ancho de las columnas:
.tricolumn { columns: 3 auto; }
Otra forma de usar la propiedad de columnas es asignar un valor numrico a column-width
y column-count establecido en auto. En este ejemplo, column-width se establece en 15em,
loque significa que el elemento de varias columnas tendr una anchura de columna
de15ems (o 15 veces el ancho del tamao de la fuente del contenido de la columna):
columns: auto 15em;
Agreguemos ahora una regla de columna. Esta propiedad establece el ancho, el estilo y
el color de la regla que hay entre todas las columnas. La sintaxis de una lnea discontinua
azul de 3 pxeles de anchura es:
column-rule: 3px dashed blue;
Para controlar el tamao del espacio entre columnas, use la propiedad column-gap.
Estapropiedad usa un valor entero, como se muestra abajo, o la palabra clave normal.
column-gap: 3em;
El efecto final de tres columnas con una regla de columna y un hueco de 3em se muestra
en la Figura 6-9 (con prefijos de proveedor aplicados). Si se cambia el tamao de la
ventana del explorador tambin cambia el tamao de las columnas y se distribuye su
contenido, como se muestra en la Figura 6-10.
Figura 6-9
Tres columnas con un
espacio grande y una regla
Figura 6-10
Si se cambia el tamao de
la ventana del explorador,
cambia el de las columnas
Para especificar si un elemento como un encabezamiento debe abarcar las columnas, use
la propiedad column-span. Esta propiedad se establece en el nmero de columnas que se
deben abarcar, o usa las palabras clave all o none, que significan que un elemento abarca
todas las columnas o ninguna columna, respectivamente.
column-span: all;
Como puede ver, las propiedades relacionadas con las columnas proporcionan una
presentacin flexible del contenido con muy pocas declaraciones CSS.
CREAR UN DISEO DE VARIAS COLUMNAS

PREPRESE. Para crear un diseo de varias columnas, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Tres columnas</title>
<style>
.tricolumn {
}
</style>
</head>
<body>
<h2>Mis tres columnas</h2>
<div class="tricolumn">
Lorem ipsum. . . orci.
</div>
</body>
</html>
Los puntos suspensivos (. . .) en el prrafo de Lorem ipsum indican que se ha emitido
parte del contenido por motivos de presentacin. En el documento HTML, incluya
un prrafo de texto simulado que tenga por lo menos 10 lneas. Observe tambin
el uso del prefijo de proveedor para Mozilla (-moz-). Podramos haber incluido
todos los prefijos de proveedor, pero hemos usado solo no por simplificar.
2. Guarde el archivo como L6-columns-exercise.html.
3. Especifique una separacin entre columnas de 2em y una regla de columna verde
de 2px de anchura. La sintaxis para las propiedades column-gap y column-rule es la
siguiente:
.tricolumn {
-moz-column-gap: 2em;
-moz-column-rule: 2px solid green;
}
4. Vuelva aguardar el archivo y visualcelo en el explorador Firefox. El resultado debe

serparecido a la Figura 6-11.
Figura 6-11
Resultado del ejercicio
de tres columnas
150 | Leccin 6
5. Cambie el tamao de la ventana del explorador para ver qu sucede con las columnas.
6. (Opcional) Reemplace Mis tres columnas con un encabezado ms largo. Trate de que
el encabezado abarque las tres columnas.
7. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos si va
MS INFORMACIN
Para obtener ms informacin sobre diseos de varias columnas, visite la seccin sobre regiones de
varias columnas de la pgina web del mdulo de regiones de CSS en http://bit.ly/IA03vV y la pgina
sobre varias columnas de CSS3 de W3schools.com en http://bit.ly/KpY0Gz.
USAR GUIONES
Los guiones unen dos palabras con un guion (-) o dividen las palabras entre slabas al
final de una lnea. Los guiones resultan muy tiles en diseos de varias columnas para
eliminar los espacios en blanco que crean en las columnas las palabras largas que se
LISTO PARA CERTIFICACIN ajustan automticamente a la lnea siguiente. El uso de guiones hace que el texto tenga
Cmo se habilitan los unaspecto ms profesional. En general, con los guiones automticos se intenta justificar
guiones con CSS en un el texto en el margen derecho.
documento HTML?
3.3 CSS3 introduce la propiedad hyphens, que controla los guiones. La propiedad usa los
valores none, manual y auto:
auto: permite la separacin automtica con guiones de palabras segn las opciones
de salto de lnea dentro de palabras o por un recurso de separacin por guiones
apropiado para el idioma.
manual: permite la separacin por guiones de palabras segn las opciones de salto
delnea dentro de palabras.
none: impide la separacin por guiones.
El W3C seala que se debe declarar un idioma mediante los atributos lang de HTML
TOME NOTA
* o xml:lang de XML para que el uso de guiones automtico sea correcto. As, si todo un
Hay una lista de cdigos
documento HTML est en el mismo idioma (ingls, por ejemplo) y quiere habilitar los
de idioma disponible
guiones automticos, debe agregar el atributo al elemento HTML o la declaracin doctype:
en la pgina web de
referencia de cdigos <!doctype html>
de idiomas para HTML <html lang="es-es">
de W3schools.com en o
http://www.w3schools.
com/tags/ref_language_ <html xmlns="http://www.w3.org/1999/xhtml"
codes.asp. xml:lang="es" lang="es">
Es necesario incluir prefijos de proveedor con la propiedad de guiones, es decir,
-ms-hyphens para Internet Explorer 10, -moz-hyphens para Firefox, etc.
Microsoft proporciona ms propiedades de guiones especficas para entornos Microsoft,
como se indica a continuacin:
-ms-hyphenate-limit-zone: especifica el ancho del espacio en blanco final (la zona de
guiones, como se ve en la Figura 6-12) que puede dejarse en una lnea antes de que se
usen los guiones. El valor de la propiedad es una longitud en pxeles o un porcentaje.
-ms-hyphenate-limit-chars: especifica el nmero mnimo de caracteres de una palabra para
que se puedan usar guiones. Si el nmero es menor que el mnimo, no se pueden usar
guiones en la palabra.
Figura 6-12
La zona de guiones
-ms-hyphenate-limit-lines: especifica el nmero mximo de lneas con guiones

consecutivas que pueden contener palabras con guion.
En el siguiente marcado con CSS alineado se usa la propiedad -ms-hyphens, establecida

enauto:
<!doctype html>
<html lang="es-es">
<body>
<div style="width: 200px;
border: 2px solid orange;">
<p style="-ms-hyphens: auto;

text-align: justify;
font-size: 14pt;">
Lorem ipsum . . .
dignissim.</p>
</div>
</body>
</html>
Este marcado se ve en Internet Explorer 10 como se muestra en la Figura 6-13.
Figura 6-13
La propiedad -ms-hyphens
representada en Internet
Explorer 10
152 | Leccin 6
Si bien Microsoft ha habilitado varias propiedades de guiones en usos de Internet Explorer 10

y Windows 8, la especificacin del W3C para guiones se sigue desarrollando. En el momento
*
TOME NOTA
de escribir este libro, el W3C sigue trabajando en las propiedades hyphenate-character,
hyphenate-limit-zone, hyphenate-limit-word, hyphenate-limit-lines y hyphenate-limit-last.
HABILITAR LOS GUIONES AUTOMTICOS

PREPRESE. Para habilitar los guiones automticos, siga estos pasos:
HTML con el siguiente contenido. Observe que usamos el prefijo de proveedor de
Mozilla como ejemplo en este ejercicio. Reemplace el texto del prrafo que comienza
con El uso de guiones consiste en con una biografa de cuatro lneas de alguien:
lasuya misma, del instructor, un compaero de clase, etc.:
<!doctype html>
<html lang="es-es">
<head>
<title>Ejemplo de guiones</title>
</head>
<body>
<div style="width: 200px;
border: 2px solid orange;">
<p style="-moz-hyphens: auto;

text-align: justify;
font-size: 14pt;">
Lorem ipsum . . . dignissim.</p>
</body>
</html>
2. Guarde el archivo como L6-hyphen-exercise.html y visualcelo en el explorador

Firefox.
MS INFORMACIN
Para obtener ms informacin sobre los guiones, consulte la seccin correspondiente en la pgina
web sobre el nivel 3 de texto CSS del W3C en http://www.w3.org/TR/css-text-3/#hyphens. Microsoft
proporciona informacin sobre las propiedades de guiones especficas de Internet Explorer en
http://bit.ly/IQpgj4.
Usar exclusiones de CSS para crear flujo de texto alrededor de un objeto

flotante
Un flotador posicionado es una construccin de CSS que permite posicionar imgenes,

texto y cuadros en cualquier parte de un documento HTML y luego ajustar el texto
completamente en torno a estos elementos. Los flotadores posicionados se denominan
exclusiones CSS en la ltima especificacin del W3C.
Quizs observ que en el ejercicio sobre regiones anterior de esta leccin se usaron
flotadores. A los dos flotadores se les asigno el valor left, por lo que se ven juntos
LISTO PARA CERTIFICACIN cuando se representan. La posicin era relativa al resto del documento. Adems, si no
Qu es un flotador se especifica la altura o anchura de un flotador, el elemento cambia automticamente
posicionado o exclusin detamao para que quepa el contenido.
de CSS? Con las exclusiones CSS puede controlar la posicin de un flotador con precisin, a
3.3 una distancia especificada desde la parte superior, inferior, izquierda o derecha de un
contenedor. Tambin puede crear un flotador con cualquier forma: rectangular, circular,
triangular y prcticamente cualquier otra. Las dems partes del documento simplemente
fluyen alrededor de la exclusin.
En el ejemplo de exclusiones de CSS de la Figura 6-14 se usa un diseo de varias
columnas con una exclusin (denominada flotador posicionado en el sitio web) en
elmedio. Puede mover el cuadro a cualquier lugar del diseo de ejemplo y ver que
eltexto circundante automticamente fluye alrededor del cuadro azul.
Figura 6-14
Un flotador posicionado en
un diseo de varias columna
en Internet Explorer 10
En otro ejemplo de exclusiones, la Figura 6-15, se muestra texto alrededor de un crculo

en el centro de un prrafo. En esta ejemplo hay un margen alrededor del crculo, pero el
texto podra llegar al crculo hasta tocarlo.
Figura 6-15
Un contenedor personalizado
con forma de crculo
154 | Leccin 6
En la tabla 6-2 se mencionan las propiedades del W3C relacionadas con las exclusiones
de CSS.
Tabla 6-2
Propiedades de exclusiones Propiedad Valor Descripcin
de CSS
shape-outside auto Crea la forma general de una exclusin
shape
url
shape-inside outside-shape Modifica el contenido de una forma
auto
shape
uri
wrap wrap-flow Es un mtodo abreviado para establecer
wrap-margin las propiedades wrap-flow, wrap-margin
wrap-padding y wrap-padding en una declaracin
wrap-flow auto Especifica cmo afectan las exclusiones al
both contenido alineado dentro de elementos
start del nivel de bloque
end
maximum
clear
wrap-margin length Proporciona un desplazamiento para
el contenido fuera del elemento
wrap-padding length Proporciona un desplazamiento para
el contenido dentro de un elemento
wrap-through wrap Especifica cmo se debe ajustar el
none contenido alrededor de un elemento
de exclusin
Para crear una exclusin de CSS sencilla, use la propiedad wrap-flow: both para que el
contenido se muestre en todos los lados de la exclusin. Otra opcin es usar wrap-flow:
clear, que muestra contenido por encima y por debajo de la exclusin, pero deja los
ladosen blanco.
Una forma de exclusin se declara con las propiedades shape-inside y shape-outside,
quedefinen el contenido y la forma general de una exclusin, respectivamente.
En la actualidad, las exclusiones de CSS no funcionan correctamente en ninguno de
los principales exploradores. Si desea experimentar con exclusiones de CSS, pruebe
con Internet Explorer 10. Para usar propiedades de las exclusiones de CSS para su
representacin en Internet Explorer 10, agregue el prefijo de proveedor -ms-. Microsoft
usa tambin las propiedades -ms-wrap-side y -ms-flow-wrap, que no forman parte de la
especificacin del W3C.
EXPLORAR LAS PROPIEDADES DE LAS EXCLUSIONES DE CSS

PREPRESE. Para explorar las propiedades de las exclusiones de CSS, siga estos pasos:
1. En un explorador web, vaya a la pgina web del mdulo de formas y exclusiones
deCSS del W3C en http://www.w3.org/TR/css3-exclusions/.
2. Estudie los ejemplos de exclusiones de CSS.
3. En Internet Explorer 10, copie el cdigo del ejemplo que le interese, cree
undocumento HTML adecuado y pruebe el archivo en Internet Explorer 10.
4. Visite la unidad de prueba de flotadores posicionados de Microsoft en

http://bit.ly/lQulDB. Abra la pgina con cada uno de los exploradores
principales.Seleccione cada ajuste de uno en uno para ver el efecto.
5. Cierre los archivos y programas que estn abiertos.
MS INFORMACIN
Para obtener ms informacin sobre exclusiones de CSS, visite la pgina web de nivel 3 del mdulo
deexclusiones y formas de CSS del W3C en http://www.w3.org/TR/css3-exclusions/. La pgina web
sobre exclusiones de Microsoft, en http://bit.ly/ImadRV, proporciona informacin sobre lasexclusiones
de CSS y las propiedades especficas de Microsoft para usos con Windows 8 eInternet Explorer 10.

T radicionalmente, el flujo de contenido ha sido un procedimiento manual en los
documentos HTML. En la actualidad, las regiones CSS, las exclusiones de CSS y los
diseos de varias columnas contribuyen a que el contenido fluya de forma dinmica.
Las regiones CSS permiten que el contenido fluya entre las reas adyacentes o
distantes de un documento HTML.
Para crear regiones CSS y trabajar con ellas, debe identificar un origen de contenido
y crear contenedores de contenido. Las dos tareas se realizan con las propiedades
flow-into y flow-from.
CSS3 permite crear varias columnas, como en un peridico, en documentos HTML
que se escalan en funcin del tamao de la pantalla del usuario.
Los guiones parten palabras al final de las lneas para crear un margen derecho
msuniforme y eliminar huecos de espacio en blanco en los prrafos.
Un flotador posicionado es una construccin de CSS que permite posicionar
imgenes, texto y cuadros en cualquier parte de un documento HTML y luego
ajustar el texto completamente en torno a estos elementos. Los flotadores
posicionados se denominan exclusiones CSS en la ltima especificacin del W3C.
1. son reas definidas de un documento HTML en las que puede
fluirel contenido. Se usan en lugar de varias columnas en diseos ms complejos.
2. Las propiedades de CSS3 para el le permiten crear columnas
dividiendo texto en varias columnas, especificar la cantidad de espacio que aparece
entre columnas (la separacin), hacer que aparezcan lneas verticales (reglas) entre
columnas y definir dnde se parten las columnas.
3. Un puede ser uno o varios bloques de texto en el mismo documento
HTML, o en otro, que incluye el contenido que desea que fluya a travs de un diseo
de CSS Regions.
4. son la parte de las regiones CSS en las que es fluye el contenido.
5. es el proceso de conectar dos palabras con un guion (-) o dividir
palabras entre slabas al final de una lnea.
6. Un es un flotador posicionado que permite posicionar imgenes,
texto y cuadros en cualquier parte de un documento HTML y luego ajustar el texto
completamente en torno a estos elementos.
156 | Leccin 6
7. La propiedad de CSS crea un contenedor de contenido para

regiones CSS.
8. La propiedad de CSS identifica el origen de contenido de las
regiones CSS.
9. Un es un documento HTML mini incrustado en un documento
HTML.
10. El valor de la propiedad flow-into se conoce como .
Varias opciones
1. Va a crear un origen de contenido de CSS Regions denominado principal.
Culdelas siguientes opciones es la sintaxis correcta?
a. flow-from: main
b. flow-into: main
c. main: flow-into
d. main: flow-from
2. Va a crear un contenedor de contenido de CSS Regions para que se asocie con un
origen de contenido denominado principal. Cul de las siguientes opciones es
lasintaxis correcta?
a. flow-from: main
b. flow-into: main
c. main: flow-into
d. main: flow-from
3. Cules son las opciones para manipular texto de desbordamiento en el ltimo
contenedor de una regin CSS? (Seleccione todas las respuestas que correspondan).
a. Truncamiento
b. Continuar el desbordamiento y ser visible
c. Continuar el desbordamiento pero estar oculto
d. Duplicacin
4. En qu difiere la implementacin de regiones CSS de Microsoft de la especificacin
de W3C?
a. Microsoft usa la propiedad flow-into.
b. Microsoft usa la propiedad flow-from.
c. Microsoft no usa iframes.
d. Microsoft usa iframes.
5. Qu propiedad de CSS3 crea columnas escalables?
a. column-count
b. add-columns
c. wrap-columns
6. Qu propiedad de CSS3 crea una lnea entre columnas en un diseo de varias
columnas?
a. break-inside
b. column-fill
c. column-gap
d. column-rule
7. Cul de las siguientes opciones no es un valor admitido para la propiedad
deguiones CSS3?
a. none
b. lines
c. manual
d. auto
8. Cul de las siguientes opciones especifica el ancho del espacio en blanco final
quepuede dejarse en una lnea antes de que ocurra la unin por guion?
a. -ms-hyphenate-limit-chars
b. -ms-hyphenate-limit-lines
c. -ms-hyphenate-limit-zone
9. Cul de las siguientes opciones era el trmino usado anteriormente para exclusiones
de CSS?
a. flotadores de izquierda/derecha
b. flotadores posicionados
c. cambiador de forma
d. DOM
10. Qu propiedad de CSS3 crea una exclusin de CSS?
a. wrap-flow
b. flow-wrapper
c. shape-wrapper
d. wrapper-shape
Verdadero/Falso
VF1.Una exclusin de CSS debe ser de forma circular o rectangular.
VF2.Debe declarar un idioma mediante el atributo lang de HTML o xml:lang
de XML para que el uso de guiones sea correcto.
VF3.Puede centrar un encabezado en varias columnas mediante la propiedad
column-span: all
VF4.Las regiones CSS se usan conjuntamente con tcnicas de diseo CSS como
columnas, cajas flexibles y diseos de cuadrcula.
VF5.En las regiones CSS, el valor de la propiedad flow-from debe ser el mismo
que el de la propiedad flow-into.
Escenario 6-1: Flujo de contenido en un boletn
Changpu es compaero en prcticas en Malted Milk Media. Su gerente le pidi que creara
un diseo de boletn con HTML5 y CSS3. El boletn ser visto por empleados que usan
equipos, tabletas y, quizs, smartphones. Changpu cre una plantilla con secciones, artculos,
un encabezado y pie de pgina, y caractersticas adicionales. Desea que algunos elementos
muevan automticamente contenido de desbordamiento a distintas reas del diseo, pero no
est seguro de cmo hacerlo. Cmo lo aconseja?
Escenario 6-2: Distincin entre origen de contenido y contenedores

decontenido
Changpu decidi usar regiones CSS para proporcionar un flujo de contenido dinmico en su
boletn, pero est confundido sobre los orgenes de contenido y contenedores de contenido.
Cmo explica estas dos caractersticas a Changpu?
158 | Leccin 6
Escenario 6-3: Comprender los requisitos del uso de guiones
Salih es un amigo suyo de la universidad. Est creando un documento HTML que tiene
contenido en rabe para su grupo de habilidades de lenguaje y quiere que el documento
contenga guiones. Us la propiedad de guiones y est visualizando el documento en un
explorador web compatible, pero los guiones no funcionan correctamente. Hay algo
msque Salih deba hacer en el documento?
Escenario 6-4: Comprender los principios bsicos de las exclusiones de CSS

Gladys acaba de incorporarse al equipo de desarrollo web y de aplicaciones procedente
del equipo de mantenimiento del sitio web. Est empezando a investigar las exclusiones
de CSS y lo ve pasar a usted por su rea de trabajo. Se detiene y le pide que le d
informacin bsica sobre las propiedades de las exclusiones de CSS.
Administrar la LECCIN 7
interfaz grfica
mediante CSS

del examen MTA
Administrar la interfaz grfica Administrar la interfaz grfica 3.4
mediante CSS mediante CSS.
TRMINOS CLAVE
animacin escalar
propiedad border-radius sesgar
sombra paralela filtro SVG
degradado transformar
fotograma clave transicin
degradado lineal trasladar
opacity transparencia
perspectiva Web Open Font Format (WOFF)
degradado radial Web segura
girar
El equipo de desarrollo de Malted Milk Media desea actualizar su propio sitio web
para que tenga una imagen ms moderna. A usted le han pedido que revise las reas
principales del sitio y que sugiera mejoras grficas basadas en CSS3. Esperan que
todo ello ayude a Malted Milk Media a destacar frente a la competencia.
Administrar la interfaz grfica mediante CSS
Las nuevas propiedades de CSS3 facilitan la creacin de interfaces de usuario ms

CONCLUSIN grficas y atractivas para aplicaciones y sitios web.
CSS3 permite crear impresionantes elementos grficos para sitios y aplicaciones web,
que aumentan la satisfaccin de la experiencia del usuario. Se pueden crear efectos
grficos como esquinas redondeadas y sombras paralelas, y aplicar transformaciones
159
160 | Leccin 7
2D y 3D como rotaciones y escala. Las transiciones y animaciones, realizadas totalmente

De qu manera se puede
mediante HTML y CSS3, hacen que las imgenes, los cuadros y el texto cobren vida.
administrar la interfaz Adems, muchas de las mismas propiedades de CSS3 se pueden aplicar a figuras de canvas,
grfica de usuario con CSS? y SVG dispone de un completo conjunto de filtros que producen efectos parecidos a los de
3.4 las propiedades de CSS3.
Crear efectos grficos
CSS3 ofrece la propiedad border-radius para crear esquinas redondeadas, la propiedad

box-shadow para sombras paralelas, la propiedad opacity para efectos de transparencia,
y las propiedades linear-gradient y radial-gradient para degradados de fondo.
LISTO PARA CERTIFICACIN CSS3 permite aplicar con facilidad varios efectos grficos a los elementos HTML, con
Qu nuevos efectos lo que la interfaz de usuario resulta ms atractiva. Algunos de los nuevos efectos grficos
grficos se pueden crear son las esquinas redondeadas, las sombras paralelas, la transparencia y los degradados
con CSS3? de fondo. Algunas de estas propiedades, como las sombras, se pueden aplicar incluso
3.4 al texto.
CREAR ESQUINAS REDONDEADAS

La propiedad border-radius de CSS3 se usa para crear esquinas redondeadas en torno a
LISTO PARA CERTIFICACIN elementos de diseo, como encabezados, pies de pgina, barras laterales, cajas de grficos
Qu propiedad de CSS y contornos alrededor de imgenes. border-radius es una longitud que se suele expresar
crea esquinas redondeas en pxeles o ems, pero puede ser un porcentaje. La longitud es el radio del crculo que
alrededor de elementos define l redondez de cada esquina de un cuadro. Cuanto ms pequeo es el nmero,
de diseo? menos redondeada es la esquina. Algunos exploradores tienen problemas para representar
3.4 el porcentaje correctamente, por lo que se recomienda usar una longitud en pxeles o ems
siempre que sea posible.
Para crear un cuadro con un borde redondeado, el cdigo CSS y el marcado podran ser as:
<!doctype html>
<html>
<head>
<title>Esquinas redondeadas</title>
div {
padding: 40px 40px;
width: 400px;
color: #fff;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div>Cuadro con esquinas redondeadas</div>
</body>
</html>
El cuadro redondeado se representa en un explorador web como se muestra en la

Figura7-1.
Figura 7-1
Cuadro con cuatro
esquinas redondeadas
Tambin se puede redondear una sola esquina de un cuadro con las propiedades siguientes:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
En la Figura 7-2 se muestra un ejemplo de cada cuadro.
Figura 7-2
Cuadros con una esquina
redondeada cada uno
Si va a usar una sola esquina redondeada en varios elementos de un documento HTML,

puede ahorrar tiempo creando una clase independiente para cada una (superior izquierda,
superior derecha, inferior izquierda e inferior derecha). La sintaxis sera parecida a:
.top-left-corner { border-top-left-radius:25px; }
En la pgina web de Microsoft sobre: border-radius, en http://ie.microsoft.com/testdrive/

TOME NOTA
* Graphics/hands-on-css3/hands-on_border-radius.htm, se ilustra cmo los cambios realizados
en la longitud de border-radius afectan a las esquinas del cuadro.
CREAR SOMBRAS
CSS3 introduce la propiedad box-shadow para crear sombras alrededor de elementos de
diseo. Una sombra paralela es un efecto visual en el cual un objeto se repite detrs y
levemente por debajo de s mismo para crear la ilusin de que el objeto flota sobre su fondo.
162 | Leccin 7
LISTO PARA CERTIFICACIN La sintaxis de CSS para crear una sombra es:
Qu propiedad de CSS box-shadow: h-shadow v-shadow blur spread color inset;
crea sombras paralelas
alrededor de elementos Los atributos h-shadow y v-shadow indican la posicin horizontal y vertical de la sombra
de diseo? en relacin con el cuadro. Estos dos atributos son obligatorios. El valor h-shadow define
3.4 el desplazamiento horizontal de la sombra. Un valor positivo desplaza la sombra hacia
laderecha del elemento y un valor negativo hacia la izquierda. El valor v-shadow define
eldesplazamiento vertical de la sombra. Un valor positivo desplaza la sombra desde la
parte inferior del elemento y un valor negativo desde la parte superior.
Los dems atributos son opcionales. El atributo blur, en pxeles, indica la cantidad de
desenfoque que se aplica a la sombra. El atributo spread indica el tamao de la sombra,
color especifica el color de la sombra paralela e inset lleva la sombra del exterior al
interior de la caja.
En la Figura 7-3 se muestra un ejemplo de cuadro con esquinas redondeadas y sombra
paralela. La sombra se cre a partir de estos valores, que especifican la posicin horizontal
y vertical de la sombra, la cantidad de desenfoque y el color de la sombra:
box-shadow: 10px 10px 5px #808080;
Figura 7-3
Sombra paralela aplicada
a un cuadro
CSS3 tambin proporciona la propiedad text-shadow para aplicar sombra a texto.

Losatributos son los mismos que los de la propiedad sombras, excepto spread e inset.
CREAR UN CUADRO CON ESQUINAS REDONDEADAS Y SOMBRA

PREPRESE. Para crear un cuadro con esquinas redondeadas y sombra, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Esquinas redondeadas</title>
div {
border: 3px solid #000;
background-color: #000;
padding: 1em;
width: 300px;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
color: #fff;
font-size: large;
text-align: center;
}
</style>
</head>
<body>
<div>Ejemplo de cuadro</div>
</body>
</html>
2. Guarde el archivo como L7-box-exercise.html. Visualice el archivo en un explorador

web, donde tendr un aspecto parecido al de la Figura 7-4.
Figura 7-4
Cuadro con esquinas
redondeadas
3. Para agregar una sombra paralela, agregue la lnea siguiente al elemento de estilo:
box-shadow: 5px 5px 5px #999;
4. Guarde el archivo y visualice el resultado en un explorador web. El cuadro debe

parecerse al de la Figura 7-5.
Figura 7-5
Cuadro con esquinas
redondeadas y una
sombra paralela
5. Deje el archivo, la herramienta de edicin y el explorador web abiertos si va a llevar

acabo el siguiente ejercicio durante esta sesin.
APLICAR TRANSPARENCIA
Un elemento opaco no permite que pase la luz, mientras que s se puede ver a travs de
unelemento transparente. Si bien los trminos son contrarios, reduciendo la opacidad
deun elemento o aumentando su transparencia, finalmente se llega al mismo punto.
En la Figura 7-6 se muestra el efecto de transparencia (u opacidad reducida) en una
imagen. La imagen original est a la izquierda; la imagen con un 50 % de transparencia
aplicado est a la derecha.
Figura 7-6
Transparencia aplicado
a una imagen
LISTO PARA CERTIFICACIN La sintaxis para aplicar una transparencia a una imagen u otro elemento es:
Qu propiedad de
CSS permite aplicar opacity: value
transparencia a una
El valor es un valor de punto flotante entre 0,0 (100 % transparente) y 1,0 (100 % opaco).
imagen o un elemento?
Para aplicar una transparencia de 45 %, por ejemplo, se usara el valor 0,55 (1,0 0,45).
3.4
164 | Leccin 7
AGREGAR TRANSPARENCIA A UN CUADRO

PREPRESE. Para agregar transparencia a un cuadro, siga estos pasos:
1. Abra L7-box-exercise.html en una herramienta de edicin o de desarrollo
deaplicaciones si no est abierto.
2. Agregue la siguiente lnea al elemento de estilo:
opacity: 0.6;
3. Guarde el archivo como L7-transparency-exercise.html y visualice el resultado

enunexplorador web. El cuadro debe parecerse al de la Figura 7-7.
Figura 7-7
Cuadro con esquinas
redondeadas, sombra
paralela y el 40 %
de transparencia
4. Deje el archivo, la herramienta de edicin y el explorador web abiertos si va a llevar
acabo el siguiente ejercicio durante esta sesin.
APLICAR DEGRADADOS DE FONDO

Un degradado es un cambio suave de color, ya sea dentro de la misma tonalidad, como
de verde oscuro a verde claro, o partiendo con un color y terminando con otro color,
por ejemplo, partir con azul y terminar con amarillo. Los desarrolladores suelen usar
gradientes para obtener un sombreado suave en fondos, botones y otros elementos.
Los diferentes tipos o mtodos de gradientes CSS3 son:
linear-gradient: crea un degradado de arriba hacia abajo o viceversa, o de esquina

aesquina.
radial-gradient: crea un degradado que se irradia desde un punto central.
repeating-linear-gradient: crea un degradado lineal que se repite, que se traduce
enbandas rectas de color degradado.
repeating-radial-gradient: crea un degradado radial que se repite, que se traduce
enbandas circulares de color degradado.
Para aplicar un degradado a una imagen HTML, use la propiedad background con uno de
LISTO PARA CERTIFICACIN los mtodos de degradado enumerados anteriormente, junto con los parmetros especficos
Qu propiedad de de cada mtodo. Los valores posibles para los mtodos se enumeran en la pgina web del
CSS permite agregar un mdulo de nivel 3 de valores de imgenes y contenido reemplazado de CSS del W3C,
degradado de fondo a enhttp://dev.w3.org/csswg/css-images-3/#repeating-gradients.
un contenedor HTML?
3.4 A degradado lineal es un degradado horizontal, vertical o diagonal. Para crear un
degradado lineal del negro al blanco, use el siguiente cdigo CSS:
background: linear-gradient(black, white);
El degradado predeterminado va desde arriba hacia abajo. Puede insertar top, bottom,
right o left como primer valor para controlar la direccin del degradado. En la
Figura7-8 se muestra el degradado de negro a blanco que va de arriba abajo.
Figura 7-8
Degradado lineal del negro
(arriba) al blanco (abajo)
Un degradado diagonal es un tipo de degradado lineal que va en diagonal de una esquina

a otra en un contenedor. El cdigo para un degradado diagonal que parte de la esquina
inferior izquierda y va hasta la esquina superior derecha de un contenedor es:
background: linear-gradient(45deg, white, black);
Los degradados de CSS3 tambin admiten la interpolacin de color en el espacio
decolor alfa, que es parte del modelo de color rojo azul verde alfa (RGBA), para
obtener transiciones de color ms suaves en los degradados. Es probable que haya
visto degradados en los que la transicin de un tono al siguiente se ve a simple vista,
que parecen finas bandas de color. La interpolacin de color en el espacio de color
alfaelimina ese aspecto de bandas. Puede especificar varias paradas de color, con
uncolorRGBA y una posicin para cada una.
El siguiente es un ejemplo del uso de colores RGBA:
linear-gradient(to right, rgba(255,255,255,0)
Los degradados radiales comienza desde un punto central e irradian color a los bordes
debun contenedor. Los valores de los degradados radiales son algo distintos de los
valoresde los degradados lineales. La sintaxis general para degradados radiales es:
radial-gradient(position,size and shape,color stops);
Veamos un ejemplo de un degradado radial que empieza con azul claro (indicado
por el cdigo hexadecimal #99CCFF) en el centro y cambia a un azul ms oscuro
(indicado mediante #3D5266) en los bordes. El cdigo podra parecerse al siguiente
ysurepresentacin en un explorador se muestra en la Figura 7-9.
radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);
Figura 7-9
Degradado radial
El primer conjunto de porcentajes (50% 50%) define los valores horizontal y vertical del
centro. En este caso, el degradado empieza en el centro del elemento. El segundo conjunto
de porcentajes (70% 70%) especifica el tamao y la forma del degradado. Puesto que un
degradado radial se parece a una elipse, los porcentajes hacen referencia a los radios. Los
cdigos hexadecimales del ejemplo son las paradas de color. La primera parada de color
es el punto inicial y la segunda es el punto final.
En ocasiones podra ver la propiedad background-image en algunos cdigos. Su funcionamiento

TOME NOTA
* es igual que el de la propiedad abreviada fondo.
APLICAR UN DEGRADADO DE FONDO A UN CUADRO

PREPRESE. Para aplicar un degradado de fondo a un cuadro, siga estos pasos:
1. Abra L7-tranparency-exercise.html en una herramienta de edicin o de desarrollo
2. Agregue las siguientes lneas al elemento de estilo:
background: linear-gradient(black, white);
background: -ms-linear-gradient(black,white);
background: -moz-linear-gradient(black,white);
background: -o-linear-gradient(black,white);
background: -webkit-linear-gradient(black,white);
166 | Leccin 7
Observe el uso de prefijos de proveedor en este cdigo. La inclusin de todos los prefijos
de proveedor principales, es ms probable que el documento HTML se represente
correctamente para un gran nmero de usuarios. Sin embargo, como ya hemos visto en
la leccin 5, la inclusin de los cuatro prefijos de proveedor en el cdigo no garantiza
que la caracterstica de CSS3 funcione en todos los exploradores. Un explorador que no
TOME NOTA
* admita una caracterstica concreta no la mostrar correctamente, incluso con un prefijo
de proveedor. Algunos exploradores ofrecen compatibilidad parcial con una funcin, lo
que puede dar lugar a resultados irregulares. Durante la transicin a CSS3, debe probar
elcdigo en todos los exploradores principales antes de usar una caracterstica concreta
endocumentos HTML/CSS que se vayan a mostrar a un pblico amplio.
4.
Quite el borde (no el radio del borde), la opacidad y las lneas de sombra del cuadro
del CSS.
5.
Guarde el archivo como L7-gradient-exercise.html y visualcelo en distintos
exploradores web. Se muestra el degradado en todos ellos? El cuadro debe parecerse
al de la Figura 7-10 en todo explorador compatible con degradados lineales.
Figura 7-10
Cuadro con un degradado
de fondo aplicado
6. Cierre el archivo y los exploradores web, pero deje la herramienta de edicin abierta
siva a realizar el siguiente ejercicio durante esta sesin.
MS INFORMACIN
La pgina web Explorar nuevas ideas en el diseo y la distribucin de sitios web de Microsoft,
en http://bit.ly/KtYr1W, contiene vnculos a informacin sobre cmo crear esquinas redondeadas,
sombras paralelas y muchas ms cosas. La pgina web del mdulo de nivel 3 sobre el color en CSS del
W3C, en http://www.w3.org/TR/css3-color/, contiene la especificacin de las propiedades de color y
opacidad. Tambin puede visitar el sitio web W3schools.com, y buscar CSS3 y el tema que desee.
Comprender la tipografa y el formato Web Open Font Format
Los desarrolladores web estn empezando a usar el Web Open Font Format (WOFF)
como forma de mejorar las interfaces de usuario con casi cualquier fuente disponible
o fuentes personalizadas. La flexibilidad de poder usar cualquier fuente es un cambio
muy importante respecto a restricciones sobre el uso de fuentes en los documentos
HTML anteriores a WOFF.
La tipografa consiste en organizar las letras, histricamente en material impreso, y

las fuentes desempean un papel destacado en la tipografa. Para aplicar estilo a los
documentos HTML, se usan propiedades de CSS relacionadas con las fuentes como font-
family, font-size, font-style, font-variant y font-weight. Durante aos, los desarrolladores web y
X REF de aplicaciones se han visto limitados a un conjunto de fuentes estndar que se consideran
En la leccin 4 se seguras para la Web, es decir, que normalmente se encuentran en el equipo del usuario
describen los aspectos y,por ello, se representan de la misma forma en casi todos los exploradores.
relacionados con CSS Las fuentes seguras para la Web no funcionan en todos los casos. Por ejemplo, muchas
de la tipografa, como empresas usan fuentes concreta como parte de su identidad de marca, que a menudo no
fuentes, familias de forman parte del conjunto de fuentes seguras para la Web. Los diseadores y desarrolladores
fuentes, monospace
se esfuerzan en hacer que los sitios tengan un aspecto interesante, ms atractivo y nico,
y la regla @font-face.
loque no siempre se puede lograr con las fuentes seguras para la Web.
Para usar una fuente no estndar en un encabezado, ttulo o bloque de texto, los
desarrolladores tenan que crear el contenido en un programa de diseo de pginas
odegrficos, guardarlo como imagen y, despus, usar la etiqueta <img> en los
documentosHTML. Este mtodo tiene varios inconvenientes:
Requiere mucho tiempo.
Afecta negativamente a los lectores de pginas de accesibilidad, ya que las imgenes
de texto no se pueden leer en voz alta.
LISTO PARA CERTIFICACIN Reduce la efectividad de la optimizacin del motor de bsqueda (SEO), porque
Cul es el objetivo del losmotores de bsqueda buscan texto, no imgenes de texto.
Web Open Font Format
(WOFF)? Los desarrolladores tambin deban usar fuentes incrustadas, que son conjuntos de
3.4 fuentes cargados en servidores. El diseador inserta un vnculo al conjunto de fuentes
en un documento HTML o archivo CSS, lo que ayuda a que la fuente se represente
correctamente en el explorador. Si bien las fuentes incrustadas se usando mucho,
WOFFes una tcnica nueva y mejor para el uso de fuentes no estndar.
El Web Open Font Format (WOFF) es un mtodo para mejorar tipografa en la Web.
WOFF permite a los desarrolladores web usar fuentes personalizadas, prcticamente
cualquier fuente, en lugar de tener que limitarse a las fuentes estndar para web. Los
archivos WOFF son fuentes comprimidas True Type, OpenType u Open Font Format
quecontienen metadatos adicionales.
Para usar WOFF, las fuentes se pueden guardar en el servidor o usar un servicio de
fuentes web. Hay fuentes gratuitas disponibles en diversos lugares, como fontsquirrel y
Open Font Library. Entre los servicios de fuentes estn FontFont y FontShop. Requieren
una suscripcin de pago, que da derecho a usar la fuente en un sitio web mientras la
suscripcin est vigente.
Para usar una fuente WOFF del sitio de un proveedor de fuentes, por ejemplo, incluya
laregla @font-face en el archivo CSS, como se indica a continuacin:
<style>
@font-face {
font-family: "font-family-name";
src: url("http://website/fonts/fontfile")
}
</style>
Algunas fuentes WOFF funcionan mejor que otras segn el explorador en el que se
visualicen. Por ejemplo, una fuente puede representarse en un explorador web perfectamente
y en otro puede aparecer en forma de mapa de bits o en una negrita inadecuada. Antes de
comprar fuentes WOFF, obtenga informacin sobre ellas en Internet para saber si otros
desarrolladores tuvieron problemas al usarlas. Algunos vendedores de fuentes ofrecen la
forma de obtener su vista previa en los exploradores principales antes de comprarlas.
MS INFORMACIN
La especificacin de WOFF est en el sitio web del W3C, en http://www.w3.org/TR/WOFF/. Para
obtener informacin sobre WOFF, visite la pgina sobre fuentes la Web, en http://www.w3.org/Fonts/,
y la pgina de preguntas frecuentes sobre WOFF, en http://www.w3.org/Fonts/WOFF-FAQ.html.
Aplicar transformaciones 2D y 3D
TOME NOTA
* La propiedad de transformacin de CSS3 traduce, escala, gira, sesga y hasta hacer
Se necesitara JavaScript girar elementos 2D y 3D.
o alguna otra forma
de scripting para ver En HTML5/CSS3, una transformacin es un efecto que permite cambiar el tamao, la
como tiene lugar una forma y la posicin de un elemento. Las transformaciones son 2D o 3D, y pueden ser el
transformacin 2D o 3D. traslado, el cambio de tamao, la rotacin, el sesgo (estiramiento) y el giro de los elementos.
Sin scripting, solo se ve
el resultado final de una Se usa la propiedad transform de CSS para especificar distintos tipos de transformaciones
transformacin. realizadas en elementos HTML. La propiedad transform usa varios mtodos para las
transformaciones 2D y 3D, que se describen en la tabla 7-1.
168 | Leccin 7
Tabla 7-1
Mtodos para la propiedad Valor Descripcin
de transformacin
matrix (n,n,n,n,n,n) Especifica una transformacin 2D mediante
una matriz de seis valores
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Especifica una transformacin 3D mediante
una matriz 4 x 4 de 16 valores
Especifica una vista en perspectiva para
perspective(n)
un elemento 3D que se ha transformado
rotate (angle) Gira un elemento en 2D
rotate3d (x,y,z,angle) Gira un elemento en 3D
rotateX (angle) Gira un elemento en 3D a lo largo del eje X
rotateY (angle) Gira un elemento en 3D a lo largo del eje Y
rotateZ (angle) un elemento en 3D a lo largo del eje Z
scale (x,y) Escala un elemento en 2D (anchura y altura)
scale3d (x,y,z) Escala un elemento en 3D (anchura, altura
y un vector arbitrario en el espacio 3D)
scaleX (x) Escala un elemento en 3D a lo largo del eje X
scaleY (y) Escala un elemento en 3D a lo largo del eje Y
scaleZ (z) Escala un elemento en 3D a lo largo del eje Z
(un vector en el espacio 3D)
skew (x-angle,y-angle) Sesga un elemento en 2D a lo largo de los ejes
XeY
skewX (angle) Sesga un elemento en 3D a lo largo del eje X
skewY (angle) Sesga un elemento en 3D a lo largo del eje Y
translate (x,y) Traslada (mueve) un elemento en 2D
translate3d (x,y,z) Traslada (mueve) un elemento en 3D
translateX (x) Traslada un elemento en 3D usando el eje X
translateY (y) Traslada un elemento en 3D usando el eje Y
translateZ (z) Traslada un elemento en 3D usando el eje Z
Tras haber explicado lo esencial de las transformaciones 2D y 3D, echemos un vistazo

aalgunos ejemplos concretos.

TRASLACIN 2D
Qu propiedad de CSS
transforma elementos? Trasladar un elemento significa moverlo, sin rotar, sesgar ni girar de ninguna manera la
3.4 imagen. Para mover un elemento, se usa el mtodo translate() de CSS, y se proporcionan
los valores de los ejes X e Y para colocar el elemento en relacin con su posicin original
o predeterminada. El valor del eje X especifica la posicin izquierda del elemento y el
LISTO PARA CERTIFICACIN valor del eje Y especifica la posicin superior. Por ejemplo, el siguiente cdigo mueve
Qu significa trasladar un elelemento 100 pxeles desde la izquierda y 50 pxeles desde la parte superior:
elemento?
3.4 transform: translate(100px,50px);
Un ejemplo de un elemento trasladado se muestra en la Figura 7-11.

Figura 7-11
El cuadro trasladado aparece
en la esquina inferior derecha
ESCALADO 2D
Escalar un elemento es aumentar o disminuir su tamao. Para que un elemento aumente
odisminuya de tamao dinmicamente, se usa el mtodo scale() de CSS, y se proporcionan
Qu significa escalar
los valores de los ejes X (anchura) e Y (altura). Por ejemplo, el cdigo siguiente aumenta
un elemento?
la anchura del elemento dos veces su tamao original y aumenta la altura cuatro veces su
3.4
tamao original:
transform: scale(2,4);
Un ejemplo de un elemento escalado se muestra en la Figura 7-12.
Figura 7-12
El cuadro escalado es
dos veces ms ancho y
cuatro veces ms alto
que el original
TRASLADAR Y ESCALAR UNA FORMA 2D

PREPRESE. Para trasladar y escalar una forma 2D, siga estos pasos:
<!doctype html>
<html>
<head>
<title></title>
div
{
padding: 20px 20px;
background: tomato;
width: 150px;
height: 75px;
color: #fff;
font-size: x-large;
}
</style>
</head>
170 | Leccin 7
<body>
<div>Este elemento se puede mover</div>
</body>
2.
Guarde el archivo como L7-translate-exercise.html y visualcelo en dos exploradores
distintos como mnimo. El cuadro debe aparecer en la esquina superior izquierda de
laventana del explorador.
3.
Agregue las siguientes lneas al elemento de estilo:
transform: translate(200px,100px);
-ms-transform: translate(200px,100px);
-moz-transform: translate(200px,100px);
-o-transform: translate(200px,100px);
-webkit-transform: translate(200px,100px);
4.
Guarde el archivo y visualcelo en los mismos exploradores web. El cuadro se debe
haber movido hacia abajo y hacia la derecha.
5.
Para cambiar la escala del cuadro de forma que sea el doble de ancho y el doble
dealto que el cuadro original, agregue scale(2,2) a las lneas de transformacin, as:
transform: translate(200px,100px) scale(2,2);
-ms-transform: translate(200px,100px) scale(2,2);
-moz-transform: translate(200px,100px) scale(2,2);
-o-transform: translate(200px,100px) scale(2,2);
-webkit-transform: translate(200px,100px) scale(2,2);
6.
Cambie el texto de div a Este elemento se puede escalar.
7.
Guarde el archivo como L7-scale-exercise.html y visualcelo en los exploradores web.
La pantalla debe ser parecida a la de la Figura 7-13.
Figura 7-13
El cuadro se ha movido y
es dos veces ms grande
que el original
8. Cierre el archivo, pero deje la herramienta de edicin y los exploradores web abiertos
si va a realizar el siguiente ejercicio durante esta sesin.
ROTACIN 2D Y 3D
Girar un elemento consiste en moverlo en el sentido de las agujas del reloj una cantidad
concreta de grados. Para girar un elemento, se usa el mtodo rotate() de CSS y se especifican
los grados de giro.
Por ejemplo, el cdigo siguiente gira un elemento 30 grados en el plano 2D:
transform: rotate(30deg);
Figura 7-14
Imagen original e imagen
rotada 2D
En la Figura 7-14 se muestra un ejemplo de un elemento 2D girado.

Qu mtodo de En el giro 3D se usan los mtodos rotateX() y rotateY() . Con rotateX(), el elemento gira
transformacin gira alrededor de su eje X y con rotateY() gira alrededor de su eje Y.
un elemento en 3D
alrededor del eje X? El cdigo siguiente gira un elemento 180 grados. Si el elemento contiene texto, el texto
3.4 aparecer hacia abajo despus del giro, como se muestra en la Figura 7-15. Recuerde que
para ver que el efecto 3D se necesita JavaScript o alguna otra forma de scripting. Lo que
se ve en la Figura 7-15 es el resultado final del giro.
transform: rotateX(180deg);
Figura 7-15
La imagen original y
la imagen 3D girada
por el eje X
Si se usa el mtodo rotateY(180deg) con un elemento que contiene texto, en el resultado

eltexto aparece al revs, como se muestra en la Figura 7-16.
Figura 7-16
La imagen original y
la imagen 3D girada
por el eje Y
172 | Leccin 7
SESGAR 2D Y 3D
Sesgar un elemento es estirarlo en una o varias direcciones. Para sesgar un elemento
mediante CSS, se usa el mtodo skew() y se proporcionan los valores, en grados, de
los ejes X e Y para crear una forma angular. Por ejemplo, el cdigo siguiente gira
unelemento 20 grados alrededor del eje X y 30 grados alrededor del eje Y:
transform: skew(20deg,30deg);
En la Figura 7-17 se muestra un ejemplo de un elemento sesgado.
Figura 7-17
Un elemento sesgado

Qu mtodo de
En el sesgado 3D se usan los mtodos skewX() y skewY() para sesgar un elemento en torno
transformacin sesga a su ejes X e Y, respectivamente. Por ejemplo, el siguiente cdigo sesga un elemento
un elemento en 3D 45grados, como se muestra en la Figura 7-18.
en torno al eje Y? transform: skewX(45deg);
3.4
Figura 7-18
Un sesgo 3D en torno
al eje X
GIRAR Y SESGAR UNA FORMA 2D

PREPRESE. Para girar y sesgar una forma 2D, siga estos pasos:
1. Abra L7-scale-exercise.html en una herramienta de edicin o de desarrollo
2. Modifique las lneas de transformacin para reemplazar la escala con un giro
de30grados, como se indica a continuacin:
transform: translate(200px,100px) rotate(30deg);
-ms-transform: translate(200px,100px) rotate(30deg);
-moz-transform: translate(200px,100px) rotate(30deg);
-o-transform: translate(200px,100px) rotate(30deg);
-webkit-transform: translate(200px,100px) rotate(30deg);
3.
Cambie el texto de div a Este elemento est rotado.
4.
Guarde el archivo como L7-rotate-exercise.html y visualcelo en los exploradores web.
Aparecen el cuadro y el texto girados como se muestra en la Figura 7-19?
Figura 7-19
Un cuadro girado con
un ngulo de 30 grados
5.
Para sesgar el cuadro 45 grados, reemplace el giro con un sesgo en las lneas
detransformacin, como se indica a continuacin:
transform: translate(200px,100px) skew(45deg);
-ms-transform: translate(200px,100px) skew(45deg);
-moz-transform: translate(200px,100px) skew(45deg);
-o-transform: translate(200px,100px) skew(45deg);
-webkit-transform: translate(200px,100px) skew(45deg);
6.
Cambie el texto de div a Este elemento est sesgado.
7.
Guarde el archivo como L7-skew-exercise.html y visualcelo en los exploradores web.
La pantalla debe ser parecida a la de la Figura 7-20.
Figura 7-20
Un cuadro sesgado con
un ngulo de 45 grados
8. Cierre el archivo, pero deje la herramienta de edicin y los exploradores web abiertos
COMPRENDER LA PERSPECTIVA 3D, TRANSICIONES Y ANIMACIONES

La perspectiva, cuando se habla de dibujos e ilustraciones, es la convergencia de lneas
LISTO PARA CERTIFICACIN que da la ilusin de profundidad. La propiedad de perspectiva 3D de CSS3 define cmo un
Cul es la finalidad de la
explorador representa la profundidad de un elemento de transformacin 3D. La propiedad
propiedad de perspectiva
perspective toma un valor numrico: los valores ms bajos (en el rango de 1 a 1000)
3D de CSS3?
crean un efecto ms pronunciado que los valores ms altos. Otra cosa importante es
3.4
quelaperspectiva se aplica solo a elementos transformados 3D.
La sintaxis general para la perspectiva es:
perspective: number;
Un ejemplo de perspectiva con un giro 3D aplicado es:
perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg);
El siguiente ejemplo es un marcado completo de perspectiva y se muestra en la Figura 7-21
en un explorador compatible con webkit.
<!doctype html>
<html>
<head>
div
{
padding: 40px 40px;
background: #B8860B;
width: 150px;
174 | Leccin 7
color: #fff;
}
div#div2
{
margin: 100px;
perspective: 600; margin: 100px 0 0 50px;
-ms-perspective: 600; margin: 100px 0 0 50px;
-moz-perspective: 600; margin: 100px 0 0 50px;
-o-perspective: 600; margin: 100px 0 0 50px;
-webkit-perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg);

-ms-transform: rotate3d(0, 1, 1, 45deg);
-moz-transform: rotate3d(0, 1, 1, 45deg);
-o-transform: rotate3d(0, 1, 1, 45deg);
-webkit-transform: rotate3d(0, 1, 1, 45deg);
}
</style>
</head>
<body>
<div>Elemento original</div>
<div id="div2">Elemento transformado</div>
</body>
</html>
Figura 7-21
Perspectiva aplicada con
un giro de 45 grados
A continuacin, vamos a centrarnos en las transiciones y animaciones. Una transicin es

un cambio de una cosa a otra; en CSS, una transicin es el cambio de un estilo a otro en
un elemento.
Un degradado se puede considerar un tipo de transicin, porque el fondo de un contenedor
cambia de un color a otro. Sin embargo, un gradiente en s mismo es algo esttico: est o
no est. En CSS3, la accin de una transicin es visible. Los cambios se representa en la
pantalla de forma animada como si los controlara un script, pero no se usa ningn script.
Para crear una transicin de CSS3 se usa la propiedad de transicin. Es necesario
especificar, como mnimo, la propiedad CSS con la que se actuar durante la transicin.
LISTO PARA CERTIFICACIN Puede ser la posicin, el tamao, el color, el color de fondo, el espaciado, el giro, etc. de
Qu es una transicin? un elemento. En la mayora de los casos se especifica tambin la duracin de la transicin.
3.4 Si no se establece el valor de duracin, el valor predeterminado es 0. Las transiciones
deCSS3 se especifican mediante las propiedades descritas en la tabla 7-2.
Tabla 7-2
Propiedades de las Propiedad Descripcin
transiciones de CSS3
Es la forma abreviada de especificar la configuracin
transition
de transition-property, transition-delay, transition-duration
y transition-timing-function a la vez.
Especifica las propiedades de CSS que van a ser objeto
transition-property
de la transicin.
Especifica la cantidad de tiempo que pasa una vez que
transition-delay
cambia el valor y antes de que comience la transicin,
en segundos o milisegundos.
Especifica la duracin de la transicin en segundos
transition-duration
o milisegundos; comienza despus de la propiedad
transition-delay.
Especifica la curva de velocidad del efecto de transicin;
transition-timing-function
permite que la velocidad de la transicin cambie
mientras dura.
Valor predeterminado = ease, que comienza
relativamente rpido y se ralentiza hacia el final.
El siguiente es un ejemplo de una transicin sencilla que muestra texto en un cuadro.

Cuando un usuario desplaza el puntero del mouse sobre el cuadro, el texto cambia.
En la Figura 7-22 se muestran los cuadros antes y despus de la transicin.
#wrapper { transition-property: opacity;
transition-duration: 3s;
transition-delay: 1s;
transition-timing-function: linear; }
#wrapper #before, #wrapper:hover #after {
opacity: 1; }
#wrapper:hover #before, #wrapper #after {
opacity: 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="before">Ahora me ves</div>
<div id="after">Y ahora no</div>
</div>
</body>
Figura 7-22
Esta transicin simple oculta
un texto y muestra otro texto
cuando se pasa el puntero
del mouse por encima
176 | Leccin 7
CREAR UNA TRANSICIN CON CSS

PREPRESE. Para crear una transicin con CSS, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Ejemplo de transicin y opacidad</title>
#wrapper {
padding: 40px 40px;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
color: #fff;
}
#wrapper #front, #wrapper:hover #back {

opacity:1;
-ms-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
-webkit-opacity: 1;
transition-property: opacity;
-ms-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-duration: 1s;
-ms-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-timing-function: linear;
-ms-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
#wrapper:hover #front, #wrapper #back {

opacity: 0;
-ms-opacity: 0;
-moz-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="front">Toc-toc</div>
<div id="back">Quin llama?</div>
</div>
</body>
</html>
2.
Guarde el archivo como L7-transition-exercise.html. Abra el archivo en los distintos
exploradores web principales. Pase el puntero del mouse sobre el cuadro en cada
explorador. La pantalla debe ser parecida a la de la Figura 7-23.
Figura 7-23
Una transicin simple
3.
Para agregar un retraso, escriba lo siguiente despus de las lneas de la propiedad
deduracin de la transicin:
transition-delay: 1s;
-ms-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-webkit-transition-delay: 1s;
4. Guarde el archivo como L7-transition-delay.html. Abra el archivo en los distintos

exploradores web y pase el puntero del mouse por encima del cuadro. Se aprecia
elretraso?
Una animacin es la visualizacin de una secuencia de imgenes estticas a una velocidad

lo bastante rpida para crear la ilusin de movimiento. Al igual que las transiciones, las
animaciones afectan a las transformaciones y propiedades de CSS, y tambin se puede
especificar la temporizacin. Tambin hay diferencias, por ejemplo que las animaciones
usan fotogramas clave, una construccin que permite cambiar valores en cualquier punto
de la animacin. Adems, las animaciones se pueden pausar y reanudar, e invertir la
direccin de su reproduccin.
Para crear una animacin, debe empezar especificando un estilo CSS en la regla @
keyframes. Por ejemplo, la regla para un fundido de salida podra parecerse a:
Qu es un fotograma
clave?
@keyframes fadeout {
3.4
from { opacity: 1; }
to { opacity: 0; }
}
A continuacin, se deben especificar las propiedades de la animacin. Muchas propiedades

de las animaciones son similares a las transiciones. Las propiedades de las animaciones se
describen en la tabla 7-3.
178 | Leccin 7
Tabla 7-3
Propiedades de animacin Propiedad Valor Descripcin
de CSS3 predeterminado
@keyframes Crea la animacin.
Es una forma abreviada de especificar

animation
todas las propiedades de animacin a
la vez, excepto la propiedad animation-
play-state.
Especifica el nombre de la animacin
animation-name
@keyframes.
Especifica la duracin de una animacin,

animation-duration 0
en segundos o milisegundos.
animation-timing-function ease Especifica cmo progresa la animacin
durante un ciclo.
animation-delay 0 Especifica cundo se inicia la animacin.
animation-iteration-count 1 Especifica el nmero de ciclos de una

animacin.
Especifica los valores que aplica la
animation-fill-mode none
animacin fuera del tiempo en el
que se ejecuta.
Especifica si la animacin se reproduce
animation-direction normal
a la inversa en ciclos alternos.
animation-play-state Especifica el estado de la animacin;
en ejecucin
los valores son running o paused.
El siguiente es un fragmento de cdigo que configura las propiedades de animacin

deunfundido de salida:
X REF div { animation-duration: 3s;
En la leccin 9 se describe animation-delay: 0s;
cmo crear animaciones animation-timing-function: ease; }
mediante JavaScript. div:hover { animation-name: fadeout; }
Este fundido de salida se inicia inmediatamente cuando el usuario pasa el puntero del mouse
por encima de un elemento div, dura tres segundos y usa la funcin de temporizacin.
CREAR UNA ANIMACIN CON CSS

PREPRESE. Para crear una animacin con CSS, siga estos pasos:
div { width: 200px;
height: 200px;
background: limegreen;
animation: a1 3s; }
@keyframes a1 { from {background: limegreen;}
to {background: dodgerblue;} }
</style>
</head>
<body>
<div></div>
</body>
2.
Guarde el archivo como L7-animation-exercise.html. Abra el archivo en los distintos
exploradores web principales. La animacin consiste en un cuadro rectangular que
cambia de verde a azul y de azul a verde repetidamente. Funcion la animacin
en todos los exploradores web? Tome nota de qu exploradores web admiten
animaciones.
3.
Reemplace la lnea de animacin de la seccin div de CSS con lo siguiente:
animation-name: a1;
animation-duration: 4s;
animation-delay: 2s;
4. Guarde el archivo como L7-animation-mod-exercise.html. Abra el archivo en los

exploradores web en los que la animacin funcion inicialmente. Se aprecia el
retraso?
Aplicar efectos de filtro SVG
Los filtros SVG son una forma de aplicar estilo a los grficos SVG. Hay un gran
nmero de filtros, como el filtro feBlend, que combina imgenes, o el filtro feOffset,
que desplaza la imagen respecto a su posicin actual. Otros filtros afectan a la forma
en que se calcula la iluminacin de una ilustracin.
En la leccin 2 se ha descrito SVG, o Scalable Vector Graphics, un lenguaje para describir

grficos 2D en Lenguaje de marcado extensible (XML). En la leccin se muestran varios
ejemplos de cmo crear imgenes vectoriales sencillas con SVG y se explica que se
representan bien tanto en pantallas grandes como pequeas.
En esta seccin se describen los efectos de filtro que se pueden aplicar a los grficos
LISTO PARA CERTIFICACIN SVG. Un filtro SVG es un conjunto de operaciones que usan CSS para dar estilo o
Cul es la finalidad
modificar de alguna otra forma un grfico SVG. El grfico mejorado se visualiza en un
de un filtro SVG?
explorador mientras que el grfico original no se toca. Los filtros disponibles en SVG son:
3.4
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
180 | Leccin 7
feTile
feTurbulence
feDistantLight
fePointLight
feSpecularLighting
feSpotLight
Muchos de los nombres de los filtros son bastante intuitivos. Por ejemplo, el filtro feBlend
combina imgenes, feColorMatrix filtra por transformaciones de color y feOffset mueve
una imagen en relacin con su posicin actual. Los cuatro ltimos de la lista filtran
poriluminacin.
Para definir filtros SVG se usa el elemento de filtro. Es necesario incluir el atributo
id para dar nombre al filtro. Por ejemplo, el siguiente cdigo es un ejemplo de filtro
feGaussianBlur, cuyos resultados se muestran en la Figura 7-24:
Figura 7-24
Un filtro de desenfoque
gaussiano aplicado a
un grfico SVG
<body>
<svg>
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="20" />
</filter>
</defs>
<rect width="150" height="150" stroke="plum"
stroke-width="3" fill="plum" filter="url(#a1)" />
</svg>
</body>
El atributo id del elemento de filtro especifica el nombre del filtro. El elemento feGaussianBlur
especifica el efecto de desenfoque. Dentro de este elemento estn in="SourceGraphic", que
indica que todo el elemento estar desenfocado y el atributo stdDeviation, que especifica
la cantidad del desenfoque. El rectngulo que se crea se vincula con el filtro mediante
elatributo filter="url(#a1)" del elemento rect.
En otro ejemplo, el siguiente filtro feOffset crea una sombra paralela debajo de un rectngulo.
Una sombra se ajusta a la accin del filtro de desplazamiento, porque una sombra es
simplemente un cuadro desplazado hacia abajo y hacia la derecha de la imagen original.
Losatributos dx y dy especifican cunto hay que mover la imagen a lo largo de los ejes
XeY, respectivamente. La imagen representada se muestra en la Figura 7-25.
Figura 7-25
Un filtro de desplazamiento
aplicado a un grfico SVG
<body>
<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey"
filter="url(#i1)" />
<rect width="150" height="150" fill="plum" />
</svg>
</body>
APLICAR UN DESPLAZAMIENTO Y UN DESENFOQUE GAUSSIANO

A UN DIBUJO SVG
PREPRESE. Para aplicar un desplazamiento y un desenfoque gaussiano a un dibujo SVG,
siga estos pasos:
1.
En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
<!doctype html>
<html>
<head>
<title>Ejemplo de desplazamiento y desenfoque gaussiano SVG</title>
</head>
</style>
<body>
<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey"
filter="url(#i1)" />
<rect width="150" height="150" fill="springgreen"
/>
</svg>
</body>
</html>
182 | Leccin 7
2.
Guarde el archivo como L7-SVGoffset-exercise.html. Abra el archivo en todos
losexploradores web principales. El resultado debe ser parecido a la Figura 7-26.
Serepresent la imagen con un desplazamiento en todos los exploradores web?
Tome nota de que los exploradores web que admiten el desplazamiento.
Figura 7-26
Un grfico SVG con
una sombra paralela
3.
Agregue la siguiente lnea en el elemento de filtro para aplicar el filtro de desenfoque
gaussiano:
<feGaussianBlur stdDeviation="5" />
4.
Guarde el archivo como L7-SVGgblur-exercise.html y visualcelo en los exploradores
web que admiten la funcin de desplazamiento de SVG. El resultado debe ser parecido
a la Figura 7-27.
Figura 7-27
Un grfico SVG con sombra
paralela y un desenfoque
gaussiano aplicado
aldesplazamiento

Usar canvas para mejorar la GUI
Puede usar propiedades de CSS para agregar color y degradados al objeto canvas,
aplicarle transformaciones y animaciones, y mejorarlo de otras formas.
LISTO PARA CERTIFICACIN Adems de SVG, en la leccin 2 se describe el elemento canvas. Canvas se puede usar para
Cmo se puedes el dibujar formas basadas en pxeles. Si bien el elemento canvas solo acepta dos atributos
elemento canvas para (altura y anchura), casi todas las propiedades de CSS se pueden usar para aplicarle estilo,
mejorar la interfaz grfica agregando color, degradados, rellenos de patrn, transformaciones, animaciones y muchas
de usuario? otras cosas. En esta seccin se describen algunos de los efectos de estilo que se pueden
3.4 aplicar a dibujos de canvas para mejorar la interfaz grfica de usuario (GUI).
El siguiente cdigo crea un cuadro de canvas bsico:

<script>
function f1() {
var canvas =
context.fillStyle = "blue";
}
</script>

<canvas id="smlRectangle" height='300' width='500'>
</canvas>
</body>
En este ejemplo se usa el atributo fillStyle para el objeto getContext("2d"). Vamos a cambiar
el color para aplicar un degradado con el coral como color de inicio y el caqui como color
final. Reemplace la lnea fillStyle con lo siguiente, que se representa como se muestra en la
Figura 7-28:
var grd=context.createLinearGradient(0,0,150,0);
grd.addColorStop(0.3,"coral");
grd.addColorStop(0.7,"khaki");
Figura 7-28
Un objeto de canvas con
un degradado aplicado
context.fillStyle=grd;
Para girar el objeto canvas se usa la frmula degrees*Math.PI/180. Tambin se debe agregar
el giro antes de que se genere el rectngulo. As, para girar el objeto canvas 20 grados,
agregue la lnea siguiente de la lnea context-fillRect:
context.rotate(20*Math. PI/180);
Figura 7-29
Un objeto de canvas
girado 20 grados
El resultado se muestra en la Figura 7-29. Tambin puedes trasladar (mover), escalar

ysesgar el objeto de forma parecida a como se transforman los elementos HTML.
Por ltimo, veamos cmo generar texto mediante el objeto canvas (vea la Figura 7-30).
Debe usar los mtodos fillText y font:
<body>
<canvas id="myText" width="400" height="250" style="border:3px solid #0000FF;">
</canvas>
184 | Leccin 7
<script type = "text/javascript">

var canvas = document.getElementById("myText");
context.font = "30px Arial";
context.fillText("Texto generado mediante canvas", 40, 120);
</script>
</body>
Figura 7-30
Texto generado mediante
canvas rodeado con un
borde
Mientras que el mtodo fillText crea texto con relleno slido de cualquier color (negro de
manera predeterminada), fillText se puede reemplazar con strokeText para letras sin relleno,
solo con bordes.
MEJORAR UN OBJETO CANVAS

PREPRESE. Para mejorar un objeto canvas, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Ejercicio de canvas</title>
<script>
function f1() {
var canvas =
context.fillStyle = "coral";
}
</script>
</head>
<canvas id="smlRectangle" height='300' width='500'>
</canvas>
</body>
</html>
2.
Guarde el archivo como L7-canvas-exercise.html. Abra el archivo en un explorador
web para comprobar que se ve un rectngulo de color coral.
3.
Reemplace el color slido con un degradado que empiece con azul claro y termine
conazul oscuro. Para ello, reemplace la lnea de fillStyle con lo siguiente:
var grd = context.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(0.3, "lightblue");
grd.addColorStop(0.7, "darkblue");
context.fillStyle = grd;
4.
Escale el rectngulo de forma que sea cinco veces ms ancho y cinco veces ms alto
que el rectngulo original. Para ello, agregue lo siguiente despus de la nueva lnea
fillStyle:
context.scale(5,5);
5.
Vuelva a guardar el archivo y visualcelo en un explorador web. El resultado debe ser
parecido a la Figura 7-31.
Figura 7-31
Un rectngulo de canvas con
un degradado y escalado
para ser cinco veces ms
grande que el original
6. Cierre todas los archivos y aplicaciones.

Algunos de los nuevos efectos grficos que se pueden obtener fcilmente con CSS3
son esquinas redondeadas, sombras paralelas, transparencia y degradados de fondo.
La propiedad border-radius crea esquinas redondeadas, la propiedad box-shadow
crea sombras paralelas, la propiedad opacity crea efectos de transparencia y
la propiedad background, con uno de los cuatro atributos de degradado, crea
degradados lineales y radiales.
El Web Open Font Format (WOFF) es un mtodo para mejorar tipografa en la Web.
WOFF permite a los desarrolladores web usar casi cualquier fuente y no tener que
limitarse a las fuentes web estndar.
Los archivos WOFF son fuentes comprimidas True Type, OpenType u Open Font
Format que contienen metadatos adicionales.
La propiedad de transformacin de CSS3 traduce, escala, gira, sesga y hasta hacer
girar elementos 2D y 3D.
La perspectiva, cuando se habla de dibujos e ilustraciones, es la convergencia
delneas que da la ilusin de profundidad.
(contina)
186 | Leccin 7
Una transicin es un cambio de una cosa a otra; en CSS, una transicin es el cambio
de un estilo a otro en un elemento.
Una animacin es la visualizacin de una secuencia de imgenes estticas a una
velocidad lo bastante rpida para crear la ilusin de movimiento.
Un filtro SVG es un conjunto de operaciones que usan CSS para dar estilo o
modificar de alguna otra forma un grfico SVG. El grfico mejorado se visualiza
enun explorador mientras que el grfico original no se toca.
Si bien el elemento canvas solo acepta dos atributos (altura y anchura), casi todas
las propiedades de CSS se pueden usar para aplicarle estilo, agregando color,
degradados, rellenos de patrn, transformaciones, animaciones y muchas otras
cosas.
1. Un es un cambio suave de color, ya sea dentro de la misma
tonalidad o partiendo con un color y terminando con otro.
2. un elemento es aumentar o disminuir su tamao.
3. Una es un efecto visual en el cual un objeto se repite detrs
ylevemente por debajo de s mismo para crear la ilusin de que el objeto flota
sobresufondo.
4. Una es un cambio de una cosa a otra; en CSS, es el cambio
enunelemento de un estilo a otro.
5. permite a los desarrolladores web usar fuentes
personalizadas, prcticamente cualquier fuente, en lugar de tener que limitarse
alasfuentes estndar para web.
6. La propiedad de CSS3 permite crear esquinas redondeadas en torno
a elementos de diseo, como encabezados, pies de pgina, barras laterales, cajas de
grficos y contornos alrededor de imgenes.
7. es opacidad reducida.
8. un elemento significa moverlo, sin rotar, sesgar ni girar de ninguna
manera la imagen.
9. En HTML5/CSS3, una es un efecto que permite cambiar el tamao,
la forma y la posicin de un elemento.
10. Un es un conjunto de operaciones que usan CSS para dar estilo
omodificar de alguna otra forma un grfico SVG.
Varias opciones
1. Cul de las siguientes opciones crea un degradado de arriba abajo, de izquierda
aderecha, o de esquina a esquina, sin reiterar colores?
a. linear-gradient
b. radial-gradient
c. repeating-linear-gradient
d. repeating-radial-gradient
2. Cul de las siguientes opciones no es verdadera de la propiedad border-radius?

a. Crea esquinas redondeadas alrededor de elementos de diseo.
b. Se puede expresar en pxeles.
c. Se puede expresar como un porcentaje.
d. Puede animar un objeto.
3. Para aplicar un 60 % de transparencia a una imagen o un elemento,
qupropiedadusa?
a. opacity: 40
b. opacity: 0.4
c. transparency: 40
d. transparency: 0.4
4. Cul de las siguientes opciones son las desventajas de las fuentes seguras
paralaWeb? (Seleccione todas las respuestas que correspondan).
a. Deben cargarse en un servidor web.
b. Son limitadas en nmero y variedad.
c. Hacen que la identidad de marca se difcil de lograr en la Web.
d. Son muy costosas.
5. Los fotogramas clave se asocian con cul de las siguientes opciones?
a. Esquinas redondeadas.
b. Transiciones.
c. Animaciones.
d. Ninguna de las anteriores.
6. Cuando se crea una transicin, cul de las siguientes opciones debe especificarse?
a. Un retardo de inicio.
b. La propiedad CSS sobre la que se actuar durante la transicin.
c. La funcin de sincronizacin de transicin.
d. El fotograma clave.
7. Cul es una ventaja principal de usar la interpolacin de color en el espacio
decoloralfa?
a. Produce transiciones de color ms suaves en degradados.
b. Le permite agregar color a los dibujos SVG.
c. Respuestas a y b
d. Ni A ni B
8. Cul de las siguientes opciones usa para agregar color al texto lienzo?
a. fillStyle
b. strokeStyle
c. textColor
d. strokeColor
9. Cules son los dos estados de una animacin?
a. iniciada
b. running
c. en pausa
d. reanudada
10. En el siguiente ejemplo de cdigo, qu controla la cantidad de desenfoque?
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="20" />
</filter>
</defs>
a. feGaussianBlur
b. SourceGraphic
c. stdDeviation
188 | Leccin 7
Verdadero/Falso
V F 1. Un elemento opaco no permite que pase la luz, mientras que s se puede ver
atravs de un elemento transparente.
V F 2. En CSS, rotar un elemento lo gira a la izquierda por un nmero determinado
degrados.
V F 3. Una animacin es la visualizacin de una secuencia de imgenes estticas
auna velocidad lo bastante rpida para crear la ilusin de movimiento.
V F 4. Los degradados radiales comienza desde un punto central e irradian color
alosbordes de un contenedor.
V F 5. La perspectiva, cuando se habla de dibujos e ilustraciones, es la convergencia
de lneas que da la ilusin de profundidad.
Escenario 7-1: Solucin de problemas cdigo CSS3
Ali es un entusiasta de coches de poca que restaura los coches viejos y los vende para
obtener ganancias. Cuelga fotos y descripciones en su sitio web, que mantiene l mismo.
Ali est en transicin a HTML5 y CSS3 tanto como sea posible. Ha estado tratando de
aplicar las transformaciones de traslado y escala a una imagen 2D en su sitio pero ninguna
transformacin funciona. Este es el cdigo que est usando:
<style>
img { transform: translate(100px,50px);
transform: scale(2,4); }
</style>
Qu consejo le da a Ali?
Escenario 7-2: Visualizacin antes y despus de imgenes

La esposa de Ali, Linda, cree que su sitio web de coches de poca podra usar algunas
mejoras para atraer a ms visitantes. Una de sus sugerencias es mostrar fotos de los coches
que Ali ha restaurado antes y despus. Le a usted preguntan qu opciones tienen al usar
CSS3 para facilitar a los usuarios ver las fotos. Qu les dice?
Escenario 7-3: Creacin de botones con mejoras
Edward est creando un conjunto de botones para una aplicacin web y quiere que los
botones tengan esquinas redondeadas y una pequea sombra paralela levemente borrosa.
Le pregunta qu propiedades CSS3 usar. Qu le dice?
Escenario 7-4: Comprensin de la perspectiva 3D

Meghan es una estudiante universitaria que est estudiando para un grado de bellas artes.
Est aprendiendo sobre grfica digital en uno de sus cursos y un compaero le dijo que
est interesado en la perspectiva 3D de CSS3. Ella no saba odo nada de esto antes, as
que le pide a usted que se lo explique brevemente. Qu le dice?
Comprensin de los LECCIN 8
principios bsicos de
JavaScript y codificacin

del examen MTA
Administrar y mantener JavaScript Administrar y mantener JavaScript. 4.1
Actualizar la UI mediante JavaScript Actualizar la interfaz de usuario 4.2
mediante JavaScript.
TRMINOS CLAVE
devolucin de llamada biblioteca JavaScript
programa jQuery
aplicacin dinmica biblioteca
controlador de eventos mtodos
eventos subrutinas
funcin validacin
identificadores variable
interactividad
Malted Milk Media tiene una aplicacin mvil de mucho xito. Con todo, no es fcil
de usar. Los usuarios deben presionar ms teclas y esperar ms de lo que sera deseable.
El equipo de desarrollo ha decidido que JavaScript mejorar mucho la aplicacin,
haciendo que funcione mejor para los usuarios.
Administrar y mantener JavaScript
HTML5 y CSS3 son un punto de partida excelente para su sitio web o aplicacin mvil.
Con todo, para hacer algo ms que la mera presentacin de contenido estructurado,
(responder con datos individualizados sobre un usuario concreto, realizar transacciones de
CONCLUSIN comercio en lnea u obtener resultados derivados de los datos especificados, por ejemplo)
se necesita programacin de verdad. JavaScript es un lenguaje de programacin con
grandes posibilidades para expresar las interacciones que los usuarios finales necesitan
en una aplicacin.
189
190 | Leccin 8
Imagine una aplicacin mvil de servicio que muestre la hora de la prxima visita de
servicio a un cliente. Ofrece un hipervnculo para llamar por telfono a un repartido si es
necesario cambiar la hora de la entrega. No es algo muy prctico fuera de horas de oficina,
porque no habr nadie para responder la llamada. Cmo podra cambiar el hipervnculo
en funcin de la hora del da?
Cualquier trabajo de este tipo, que requiere una decisin, un clculo o un estudio por parte
de una persona, exige el uso de programacin. Para nosotros, un programa es una receta que
pedimos al equipo que ejecute y que genera una visualizacin o accin determinada. Muchas
pginas web estn diseadas para ser estticas, es decir, tienen el mismo aspecto para todos
LISTO PARA CERTIFICACIN los usuarios, en todos los casos. Con la programacin de JavaScript las aplicaciones pueden
Cmo hace JavaScript
ser dinmicas e interactivas, se adaptan y responden a usuarios finales concretos y a sus
que una aplicacin sea
acciones. La interactividad permite que un usuario final realice una accin en una aplicacin,
dinmica e interactiva?
generalmente haciendo clic en un botn o presionando una tecla. Una aplicacin dinmica
4.1
se adapta y responde a las acciones de los usuarios finales. Por otra parte, JavaScript ofrece
ms oportunidades para animar las pantallas, es decir, para que partes de la pantalla tengan
movimiento y se actualicen mientras un usuario final las visualiza.
Con los programas de JavaScript, varios elementos distintos tienen que cooperar para obtener
el resultado deseado. JavaScript difiere de CSS y HTML en algunos aspectos clave. En
este manual se describen nuevos conceptos para hacer el mejor uso de JavaScript. HTML y
CSS, por ejemplo, se centran en gran medida en que las cosas tengan un aspecto concreto.
En JavaScript, se presta ms atencin a cmo actan las cosas. Para probar un programa
de JavaScript, a menudo es necesario observar la pantalla en momentos distintos y, quizs,
interactuar con ella.
El trabajo con JavaScript, incluso ms que con HTML y CSS, depende de un entorno de
desarrollo que resulta conocido y con el que uno se siente cmodo. Un entorno de desarrollo
til puede ser tan simple como una copia del Bloc de notas e Internet Explorer, o tan
complejo como un entorno de desarrollo integrado (IDE) con editor, depurador, generador
de aplicaciones, etc. integrados. Si bien en los ejercicios de esta leccin se presupone que
se usan las herramientas ms sencillas, son fciles de adaptar a instalaciones ms complejas.
Los trminos programa y script son casi sinnimos. Algunas personas dicen script para
destacar que un cdigo fuente es pequeo, que no est en C o Java, o incluso por otras
TOME NOTA
* razones ms vagas. No se preocupes por las diferencias. En esta leccin, los trminos
programa, script, archivo de cdigo fuente y cdigo son prcticamente lo mismo.
Esta leccin se centra en la creacin de programas de JavaScript y el uso de funciones. Se

describe cmo crear programas sencillos desde cero, y cmo usar cdigo de las bibliotecas
JavaScript, jQuery y de terceros. Tambin se explica cmo buscar elementos y tener acceso
a ellos, escuchar y responder a eventos, mostrar y ocultar elementos, actualizar el contenido
de elementos y agregar elementos sobre la marcha.
CREAR UN PROGRAMA DE JAVASCRIPT SENCILLO
PREPRESE. Para crear un programa de JavaScript sencillo, siga estos pasos:
1. Con una herramienta de edicin o de desarrollo de aplicaciones, cree un archivo
conelsiguiente contenido:
<!doctype html>
<html>
<head>
<title>Mi primer programa de JavaScript</title>
</head>
<body>
<h1>Mi primer programa de JavaScript</h1>
<p>Esto es texto.
<button type = 'button' onclick = "alert('Hizo clic en el botn');">Soy un botn, haga clic enm</
button>
</body>
</html>
2. Guarde el archivo como L8-js1.html.
Comprensin de los principios bsicos de JavaScript y codificacin| 191
3. Para ejecutar el programa de JavaScript, abra L8-js1.html en un explorador web.

Elresultado debe ser parecido a la Figura 8-1.
Figura 8-1
Su primer programa
de JavaScript
Si no aparece el programa de JavaScript, debe activar JavaScript en la configuracin

de preferencias del explorador web. En Internet Explorer 9, por ejemplo, seleccione
Herramientas > Opciones de Internet. En el cuadro de dilogo Opciones de Internet,
haga clic en la pestaa Seguridad. Haga clic en el botn Nivel personalizado o Nivel
predeterminado, segn cul est disponible. En el cuadro de dilogo Configuracin de
seguridad, desplcese hacia abajo hasta la seccin Scripting (vea la Figura 8-2). Haga
clic en el botn de opcin Habilitar que hay debajo de Active scripting y, a continuacin,
haga clic en Aceptar dos veces para cerrar los cuadros de dilogo. Vuelva a abrir el
archivo L8-js1.html en el explorador web para ejecutar el programa de JavaScript.
Figura 8-2
Comprobar la configuracin
de JavaScript en Internet
Explorer
192 | Leccin 8
4. Haga clic en el botn que cre en JavaScript, que se ve en la pantalla. Se muestra un

cuadro de alerta, como se muestra en la Figura 8-3. Esto indica que el programa de
JavaScript funciona correctamente.
Figura 8-3
Un cuadro de alerta es una
forma prctica de probar
el funcionamiento de un
programa de JavaScript
X REF
En lecciones anteriores
aprendi los fundamentos
de la edicin de marcado
HTML y cdigo CSS,
y de la visualizacin de 5. Haga clic en Aceptar para cerrar el cuadro de alerta.
la pantalla resultante.
Use los mismos 6. Deje el archivo HTML, la herramienta de edicin y el explorador web abiertos si va
conocimientos para allevar a cabo el siguiente ejercicio durante esta sesin.
trabajar con JavaScript.
Este es su primer programa de JavaScript. Adems de tener un aspecto concreto en la
pantalla, su aspecto cambia. Esto es habitual en los programas: responden a acciones
delos usuarios.
Con todo, es un programa algo especial, porque la parte de JavaScript es casi invisible.
Ve el programa de JavaScript? Es el nico fragmento entre comillas, as:
alert('Hizo clic en el botn');
No es recomendable que el texto alert() se vea en el cdigo de produccin que se publica
para que lo usen los usuarios, por lo que casi nunca aparece en la documentacin de
referencia. Al mismo tiempo, es la forma ms sencilla de empezar con JavaScript
ypuedeser extremadamente til durante el desarrollo o la depuracin.
Un programa normal de JavaScript es una secuencia de declaraciones. Las declaraciones
se separan con punto y coma, como se indica en el siguiente ejercicio.
CREAR UN PROGRAMA DE JAVASCRIPT CON VARIAS DECLARACIONES

PREPRESE. Para crear un programa de JavaScript con varias declaraciones, siga estos
pasos:
1. En una herramienta de edicin o de desarrollo de aplicaciones, actualice L8-js1.html
reemplazando alert() con lo siguiente:
alert('Esta es la primera alerta'); alert('Esta es la
segunda alerta');
2. Guarde el archivo.
3. Ejecute el programa de JavaScript actualizado; para ello, abra el archivo HTML

enunexplorador web.
4. Cuando se muestre el primer cuadro de alerta, cirrelo haciendo clic en Aceptar.
Elprograma de JavaScript va a su prxima declaracin, es decir, la segunda alerta.
Lasegunda alerta se muestra en la Figura 8-4.
Figura 8-4
El segundo cuadro de alerta
se hace visible despus
de que el primero ha
desaparecido
5. Cierre la segunda alerta haciendo clic en Aceptar.

6. Cierre el archivo HTML, pero deje la herramienta de edicin y el explorador web
abiertos si va a realizar el siguiente ejercicio durante esta sesin.
MS INFORMACIN
Para obtener ms informacin sobre, JavaScript, visite la pgina web de JavaScript de W3schools.com
en http://www.w3schools.com/js/default.asp. Para obtener ms informacin sobre Microsoft
y JavaScript, busque msdn javascript con el buscador que prefiera.
Crear y usar funciones
Una funcin es un segmento de un programa definido y ejecutado en aislamiento

de otras partes. La accin de una funcin es la secuencia de las acciones de las
declaraciones que contiene.
En principio, se podra escribir un programa de JavaScript completo con una declaracin tras
otra en la secuencia exacta en la que se deben ejecutar. Con todo, para los programadores
resulta ms til introducir smbolos, o nombres, para partes especiales de un programa.
La primera de estas partes es una funcin. En programacin, una funcin es un segmento
LISTO PARA CERTIFICACIN de un programa que se define y realiza de manera aislada respecto a otras partes. Piense
Qu es una funcin ahora en una receta de cocina. No es necesario en todas las recetas explicar cada uno
de programacin?
de los pasos que se siguen para separar la clara de un huevo. En una receta normal
4.1
simplemente se dice agregar una clara de huevo y se supone que el usuario sabe
194 | Leccin 8
cmobuscar el huevo, abrirlo, sacar la clara, etc. En la cocina, incluso podra haber un
ayudante que prepara claras de huevo sin que la persona que elabora la receta participe
directamente en ello. La programacin funciona de forma parecida. Es habitual usar
funciones escritas por otras personas, a veces sin detenerse a analizar cmo funcionan.
Escribir una funcin de programacin tiene dos finalidades principales:
Se puede definir una sola vez una tarea que se lleva a cabo en varias situaciones.
Luego, puede usarse en muchos casos con confianza de que su comportamiento
ser el mismo. Este tipo de atajo es ms conciso y menos dado a errores que la
repeticin de toda una secuencia de pasos en cada contexto en el que la secuencia
podra ser necesaria.
Para facilitar las cosas a quien escribe, mantiene o lee el programa, es til e
informativo identificar segmentos significativos de funcionamiento con nombres
de funcin. De la misma forma que los libros tienen captulos, con ttulos que
informan sobre su contenido o tema, los programas tienen funciones.
Es importante entender que la accin de una funcin es la secuencia de las acciones de
lasdeclaraciones que contiene. Cuando se ejecuta un programa que contiene una funcin,
elprograma simplemente ejecuta las declaraciones que hay en la funcin.
Es tambin importante distinguir entre definicin y ejecucin de una funcin. La expresin
de una funcin (la parte function example1() {. . .}) no lleva a cabo ninguna parte del cdigo
de la funcin. Lo que se ve en el cdigo fuente es solo la definicin de una funcin. Solo
cuando la funcin se invoca, ejecuta o inicia (trminos sinnimos en este caso), se produce
un resultado til.
USAR UNA FUNCIN DE JAVASCRIPT

PREPRESE. Para aprender a usar una funcin de JavaScript, siga estos pasos:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree L8-js2.html
<!doctype html>
<html>
<head>
<title>Primer uso de una funcin</title>
function example1() {
alert("Esta es la primera alerta.");
alert("Esta es la segunda alerta.");
}
</script>
</head>
<body>
<h1>Primer uso de una funcin</h1>
<p>Esto es texto.
<button type = 'button' onclick = "example1();">Soy un botn, haga clic en m</button>
</p>
</body>
</html>
2. Abra L8-js2.html en un explorador. Se muestra el programa, como se ve en la

Figura8-5. Observe el texto y el botn. En este momento, no se aprecia nada
deJavaScript.
Figura 8-5
Este programa tiene
el mismo aspecto
que L8-js1.html
3. Haga clic en el botn. Compare la accin de esta pgina con el comportamiento del
archivo L8-js1.html que contiene dos alertas. Ve cmo actan igual aunque estn
escritos de forma un poco diferente? El cuadro de alerta tiene el mismo aspecto
yaseabra desde dentro de la definicin de una funcin o no.
En este ejemplo se presentan al menos dos otros conceptos nuevos, adems del uso de
unafuncin. En primer lugar, el JavaScript se muestra incrustado en etiquetas <script> en
el HTML. Existen varias formas de conectar un programa de JavaScript con el HTML
al que se aplica. Este uso de <script> dentro <head> es habitual, especialmente en proyectos
de JavaScript de tamao medio.
Tambin debemos fijarnos en el nombre example1 de la funcin. Nosotros controlamos
este nombre. Al escribir href como parte de un hipervnculo, o alert() para que aparezca una
alerta, contamos con palabras clave definidas en los estndares de HTML y JavaScript,
respectivamente. Con todo, el nombre de funcin example1, no se encuentra en ninguno
de los estndares. Es nuestra eleccin. Simplemente, debemos ser coherentes: si escribimos
"my_example" en lugar de example1 en la definicin de la funcin, debemos usar tambin
"my_example".
Aunque el nombre de la funcin est bajo nuestro control, hay algunas restricciones
ennuestra eleccin: el nombre debe constar de letras, dgitos, guiones bajos y signos
de dlar, y el primer carcter del nombre debe ser una letra, un guion bajo o un signo
dedlar. "example$1" es un nombre de funcin de JavaScript aceptable, pero "not.with.
periods", "1wrong" y "first name/last name" no lo son.
Los programas de JavaScript tienen otro tipo de abreviatura simblica, o nombre, que
es habitual. Es lo que se conoce como variable. Mientras que una funcin enuncia una
secuencia de acciones, una variable representa un dato. Se usa la sintaxis var para definir
una variable nueva en JavaScript.
Las reglas para los identificadores de JavaScript (bsicamente, los nombres de variables y
funciones) son en realidad algo ms complicadas que lo que se ha descrito. Los identificadores
no pueden ser iguales a palabras ya usadas en el lenguaje; por ejemplo, if tiene un significado
TOME NOTA
* especial en declaraciones de JavaScript y no est disponible como nombre de variable.
Sin embargo, los caracteres permitidos en un nombre podran pertenecer a alfabetos que
no son el del ingls en determinadas circunstancias. La definicin completa de las reglas
de nomenclatura de JavaScript est fuera del alcance de esta leccin.
196 | Leccin 8
USAR UNA VARIABLE EN UN PROGRAMA DE JAVASCRIPT

PREPRESE. Para usar una variable en un programa de JavaScript, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Primer uso de una variable</title>
function example1() {
var version_name = "serial number X358-AA-3T601-22"
alert("Esta es la primera alerta de " + version_name);
alert("Esta es la segunda alerta de " + version_name);
}
</script>
</head>
<body>
<h1>Primer uso de una variable</h1>
<p>Esto es texto.
<button type = 'button' onclick = "example1();">Soy un botn, haga clic en m</button>
</body>
</html>
2. Abra L8-js3.html en un explorador y haga clic en el botn. La primera alerta aparece

en la pantalla, como se muestra en la Figura 8-6.
Figura 8-6
El valor de una variable
se muestra en un cuadro
de alerta
3. Haga clic en Aceptar para descartar la primera alerta y pasar a la segunda. Ve cmo
una variable puede ser til? Un nmero de serie u otra cantidad importante se podra
mostrar en distintos lugares de un programa. No es necesario copiar el valor en cada
lugar, porque JavaScript permite usar el nombre de la variable que contiene el valor.
4. Haga clic en Aceptar para cerrar el cuadro de la segunda alerta.
Usar jQuery y otras bibliotecas de terceros
Los programadores con ms experiencia saben hacer buen uso de lo que otros
escriben. Una biblioteca de programacin contiene fragmentos de cdigo, subrutinas,
clases y otros recursos que se pueden reusar para crear software. Hay muchas
bibliotecas de JavaScript disponibles y jQuery es una de las ms populares.
Otros programadores han pensado ya en muchas de las tareas a las que usted tendr
que hacer frente, ya trabaje comprobando que los nmeros de tarjetas de crdito no son
vlidos, visualizando imgenes mdicas o creando un sistema de chat para un equipo
repartido por cuatro continentes. Puede aprovechar lo que otros ya han escrito mediante
el uso de bibliotecas de JavaScript. Una biblioteca es una coleccin de recursos, como
cdigo y subrutinas de funcin preescritos, que los desarrolladores usan para crear
programas. Los programadores de JavaScript a veces denominan subrutinas las funciones
que no devuelven ningn valor. Una biblioteca de JavaScript es cdigo de JavaScript
preescrito.
La mayora de lugares de trabajo tienen establecida una poltica sobre qu bibliotecas
se pueden usar y cmo invocarlas. La Web est llena de consejos sobre las bibliotecas
y su uso, y constituye un gran mercado de bibliotecas disponibles. Muchas, si bien no
LISTO PARA CERTIFICACIN todas, estn disponibles de forma gratuita. Algunas cuentan con polticas de soporte
Qu es jQuery? ms o menos establecidas, es decir, un compromiso de respuesta si se notifican errores.
4.1 Algunos estn destinadas a un nmero reducido de programadores, por ejemplo, una
biblioteca que facilita el desarrollo de aplicaciones para controlar panaderas industriales,
pero otras estn destinadas a cualquiera que escriba cdigo en JavaScript.
jQuery es la principal biblioteca de JavaScript de este tipo. En ms de la mitad de los
10.000 sitios web ms visitados del mundo se usa jQuery. jQuery se puede usar de forma
gratuita y con muy pocas restricciones. Por supuesto, debe consultar a un abogado para
informarse sobre cmo le afectan a usted las licencias de la biblioteca. Adems, tenga
encuenta que Microsoft y otros lderes del sector hacen copias de jQuery disponibles
paraque cualquier persona las descargue y las use.
USAR JQUERY
PREPRESE. Para usar jQuery, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Primer uso de jQuery</title>
<script type = "text/javascript"
src =
"http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
// Una vez que cargue el documento HTML, ejecutar
// la funcin de ready().
$(document).ready(function() {
// Cada prrafo recibe una accin de "clic":
// ocultar ese prrafo concreto.
$("p").click(function() {
$(this).hide();
});
});
</script>
</head>
198 | Leccin 8
<body>
<p>Este es el primer prrafo. Haga clic en m para hacerme
desaparecer.
<p>Este es el segundo prrafo.
<p>Este es el tercer prrafo.
</body>
</html>
2. Abra L8-js4.html en un explorador. Se muestra pgina, como se ve en la Figura 8-7.

Observe que se muestran tres lneas.
Figura 8-7
Una pantalla de HTML
sencilla, antes de que se
haya ejecutado JavaScript
3. Haga clic en cualquier lugar de la primera lnea. La lnea desaparece, como se muestra
en la Figura 8-8.
Figura 8-8
JavaScript ha actuado para
ocultar un prrafo
4. Haga clic en cualquier lugar de la segunda lnea para hacerla desaparecer.

Como puede ver, este es un modelo de comportamiento til en una de sus aplicaciones
LISTO PARA CERTIFICACIN web, para mviles o para consola de juegos. Podra interesarle que la informacin que se
Qu otras bibliotecas de muestra a los usuarios finales cambie segn las circunstancias. Si bien se puede escribir
terceros existen, aparte JavaScript puro, sin jQuery, que se comporte como hemos visto en L8-js4.html, la
de jQuery?
codificacin es bastante ms lenta. jQuery acorta muchas de las operaciones habituales,
4.1
facilita su comprensin y simplifica la forma de expresarlas correctamente.
Es posible que tenga que usar muchas bibliotecas de terceros adems de jQuery. A menudo,
recibir instrucciones concretas sobre qu biblioteca debe usar. Cuando tenga la opcin
de elegir, no le ser difcil encontrar abundante informacin en Internet realizando una
bsqueda por el nombre de la biblioteca. Adems de jQuery, otras bibliotecas populares

incluyen Dojo, MooTools y YUI. Cuando use una biblioteca de terceros, por lo general
tendr que incluir un elemento como el siguiente:
<script type = "text/javascript"
src = "direccin web o local del origen de la biblioteca de JavaScript"></script>
Por qu es necesario incluir esta etiqueta? Cuando desee usar la funcin wonderful_function()
de una biblioteca de terceros en una de las pginas que est escribiendo, la nica forma de
que el explorador sepa qu quiere decir con wonderful_function() es mediante la referencia
asu presencia en la biblioteca. <script ...> proporciona esa referencia.
Tambin debe leer la documentacin de la biblioteca que vaya a usar y, si es necesario,
obtener las licencias correspondientes.
Actualizar la UI mediante JavaScript
JavaScript es prcticamente imprescindible en casi todos los efectos de las aplicaciones

CONCLUSIN modernas y tiles basadas en HTML.
Ya conoce los conceptos bsicos de HTML: navegacin mediante hipervnculos y el

botn Atrs, datos obtenidos al enviar formularios, y todo el estilo visual del marcado
LISTO PARA CERTIFICACIN HTML tradicional. Trusty Lawn Care desea ofrecer una aplicacin mejor. Es necesario
Cmo se usa JavaScript que muestre actualizaciones constantes sobre los horarios de los empleados, que reaccione
para actualizar la interfaz con rapidez y precisin en relacin con la informacin de las cuentas, que personalice
de usuario? sugerencias en funcin del usuario y el clima, etc. Solo JavaScript hace posible todo
4.2 este dinamismo y esta interactividad.
Como ejemplo de lo que JavaScript puede hacer, cree una pequea calculadora en
el navegador.
CREAR UNA CALCULADORA EN EL EXPLORADOR MEDIANTE JAVASCRIPT

PREPRESE. Para crear una calculadora en el explorador mediante JavaScript, siga estos
pasos:
<!doctype html>
<html>
<head>
<title>Calculadora en explorador</title>
</head>
</body>
<h1>Calculadora en explorador</h1>
<form name="calculator">
<table border=4>
<tr>
<td>
<input type="text" name="Input" Size="20">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 "
200 | Leccin 8
OnClick="calculator.Input.value
+= '1'">
<input type="button" name="two" value=" 2 "
OnCLick="calculator.Input.value
+= '2'">
<input type="button" name="three" value=" 3 "
+= '3'">
<input type="button" name="plus" value="
+ " OnClick="calculator.Input.value
+= ' + '">
<br>
<input type="button" name="four" value=" 4 "
+= '4'">
<input type="button" name="five" value=" 5 "
+= '5'">
<input type="button" name="six" value=" 6 "
+= '6'">
<input type="button" name="minus" value=" - "
+= ' - '">
<br>
<input type="button" name="seven" value=" 7 "
+= '7'">
<input type="button" name="eight" value=" 8 "
+= '8'">
<input type="button" name="nine" value=" 9 "
+= '9'">
<input type="button" name="times" value=" x "
+= ' * '">
<br>
<input type="button" name="clear" value=" c "
= ''">
<input type="button" name="zero" value=" 0 "
+= '0'">
<input type="button" name="DoIt" value=" = "
= eval(calculator.Input.value)">
<input type="button" name="div" value=" / "
+= ' / '">
</td>
</tr>
</table>
</form>
</body>
</html>
2. Abra L8-js5.html en un explorador. La calculadora se muestra como se ve en la

Figura8-9.
Figura 8-9
Una calculadora creada
con JavaScript
3. Pruebe la calculadora. Haga clic en los botones 7 14 + 2 = y observe el resultado.

Esel resultado 100, como se muestra en la Figura 8-10?
Figura 8-10
Al hacer clic o tocar en el
signo igual de la calculadora
de JavaScript, el resultado
se calcula inmediatamente,
lo mismo que sucedera
con una calculadora de
mano convencional

Este pequeo ejemplo ilustra que un programa de JavaScript dentro del explorador puede
esencialmente todo lo que hace cualquier otra aplicacin, y a veces con solo unas cuantas
lneas de cdigo fuente. Entre las capacidades de JavaScript estn la entrada de datos, la
respuesta a movimientos del teclado y el mouse, la presentacin de resultados, clculos
complejos y mucha ms cosas, como veremos en los siguientes ejercicios. Por supuesto,
las aplicaciones mviles creadas partiendo de HTML5 tienen las mismas capacidades.
Localizar elementos y obtener acceso a ellos
Si ve algo en el explorador, JavaScript puede ocuparse de ello y controlarlo mediante

programacin. Puede usar el mtodo getElementById() para tener acceso a elementos de
visualizacin.
202 | Leccin 8
Con frecuencia en su carrera de programacin, podr dar una descripcin en lenguaje

Qu mtodo de
cotidiano de lo que quiere, por ejemplo as que tenemos que comprobar que lo que
JavaScript devuelve ha especificado el usuario final es..., pero no sabe cmo traducir la idea a JavaScript.
una referencia al primer Muchas veces, el reto ser identificar y aislar lo que ocurre con un elemento determinado
elemento con un atributo que se ve en la pantalla. Elemento puede ser un botn, un campo de entrada, una figura,
ID o NAME concreto? un fragmento de texto, etc.
4.2 Una manera importante de obtener acceso a elementos de visualizacin es a travs
delmtodo getElementById(). Este mtodo devuelve una referencia al primer objeto
conelatributo id o NAME especificado.
Objeto es el trmino en programacin para referirse a cosa o elemento, la categora

ms general de elementos que se tiene en cuenta. Tcnicamente, JavaScript es un lenguaje
TOME NOTA
* basado en objetos, es decir, hace hincapi en que instancias programticas como primer
prrafo tienen propiedades y mtodos que proporcionan informacin sobre el prrafo y
oportunidades para actuar sobre el prrafo.
USAR EL MTODO GETELEMENTBYID() PARA LA ENTRADA DE USUARIO

PREPRESE. Para aprender a usar el mtodo getElementByID() para recopilar la entrada
delusuario, siga estos pasos:
<!doctype html>
<html>>
<head>
<title>Validacin de la entrada del usuario</title>

function validate() {
var value = document.getElementById("input1").value;
if (isNaN(value)) {
modifier = "no ";
} else {
modifier = "";
}
var report = "Ha especificado "' + value + "'; " +
modifier + "es un nmero vlido.";
alert(report);
}
</script>
</head>
<body>
<h1>Validacin de la entrada del usuario</h1>

<input type = "text" id = "input1"></input>
<button type = "button" onclick = "validate();">Haga clic en m para ver qu me parece lo que
ha especificado</button>
</form>
</body>
</html>
2. Abra L8-js6.html en un explorador.

3. Escriba una palabra corta en el cuadro de entrada y haga clic en el botn. El resultado
se muestra en la Figura 8-11. Haga clic en Aceptar para aplicar los cambios y cerrar el
cuadro de dilogo.
Figura 8-11
Un modelo para la validacin
de la entrada del usuario
conJavaScript
4. Escriba un nmero en el cuadro de entrada y haga clic en el botn. Cmo cambi

el mensaje respecto al paso anterior? Haga clic en Aceptar para aplicar los cambios
y cerrar el cuadro de dilogo.
La validacin es una tarea importante en JavaScript: ha especificado el usuario una

cifra que se ajusta a una limitacin de presupuesto? Es un nmero de tarjeta de crdito
vlido? Es una direccin de correo electrnico vlida y no est en conflicto con otra
que ya existe? El archivo L8-js6.html es un modelo resumido para el tema de validacin
en general. A menudo tenemos que confirmar que la entrada de un usuario es, de hecho,
numrica; por ejemplo, 0 y 3,141 son nmeros correctos, pero abc y 3,141. no lo son. Si
bien sera lgico que JavaScript tuviera una funcin is_a_number(), por razones histricas
parte de isNaN.
Por qu decimos que getElementById es un mtodo? No parte JavaScript de una
biblioteca de funciones para llevar a cabo tareas tiles?
S y no. Aunque JavaScript se basa en una biblioteca de funciones tiles para muchas
operaciones habituales, algunas funciones de JavaScript estn muy ligadas a objetos
concretos que HTML define. Estas capacidades se denominan mtodos Los mtodos
se diferencian de las funciones nicamente en que siempre se asocian y se usan con
unobjeto determinado. isNaN() es un ejemplo de una funcin JavaScript, que prueba
noun nmero. Si isNaN() devuelve un valor de 0 (false), el valor es un nmero.
document.getElementById() es un ejemplo de un mtodo JavaScript. getElementById
solosepuede usar de forma eficaz con el objeto de documento especial.
Escuchar y responder a eventos
Un evento es un concepto fundamental en la programacin interactiva. Mucha de

la programacin de JavaScript tiene que ver con las respuestas cuando sucede algo.
El evento Load se usa y desencadena normalmente cuando se finaliza su propietario.
Muchos requisitos de las aplicaciones conllevan eventos, que son acciones que desencadenan
otras acciones. Las descripciones que explican cuando o si, por lo general, se codifican
en JavaScript como eventos. Los programadores acostumbrados a usar otros lenguajes,
enlosque lo principal es la secuencia, pueden encontrar esto un tanto sorprendente:
1. Hacer lo primero.
2.A continuacin, hacer lo segundo.
204 | Leccin 8
3. Luego, hacer lo tercero.

4. Finalizar la secuencia.
Por su parte, la programacin basada en eventos, parece ms bien un dilogo: un usuario
realiza una accin, el programa de JavaScript responde y as sucesivamente.
Todos los ejemplos de programas de JavaScript presentados hasta este momento constan
de eventos. La asignacin de un valor al controlador de eventos onClick para el evento Click
tiene este efecto: cuando el usuario hace clic en el elemento en cuestin, se ejecuta el
script dado por el valor de onClick. En este caso, la accin clic es el evento y el script
esla respuesta, o devolucin de llamada.
Las referencias de JavaScript tabula todos los eventos reconocidos. Entre los que se
programan a menudo, adems de hacer clic en un elemento, estn los siguientes:
envo de un formulario
pulsaciones de tecla
otros movimientos del mouse, como los dobles clic y desplazar el mouse
seleccin de un elemento de un cuadro de lista
tiempo en el que una imagen ha terminado de cargarse
El controlador de eventos onLoad es ms importante de lo que muchos principiantes
LISTO PARA CERTIFICACIN creen. OnLoad pertenece a los elementos HTML y se desencadena cuando finaliza
Qu hace el controlador
supropietario. El evento onLoad para una imagen <img> se produce cuando la imagen
de eventos onLoad?
estcompletamente representada y visible. El evento onLoad para una <table> se
4.2
produceuna vez que se han dibujado todas las celdas de la tabla.
USAR EL CONTROLADOR DE EVENTOS ONLOAD

PREPRESE. Para usar el controlador de eventos onLoad, siga estos pasos:
1. En un editor de texto o una herramienta de desarrollo de aplicaciones,
cree L8-js7.html con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>El controlador de eventos onLoad</title>

function validate() {
var value = document.getElementById("input1").value;
if (isNaN(value)) {
modifier = "no ";
} else {
modifier = "";
}
var report = "Ha especificado "' + value + "'; " +
modifier + "es un nmero vlido.";
alert(report);
}
function init() {
alert("En este momento, se garantiza que se han
cargado todos los elementos HTML.")
;
}
</script>
</head>
<body onload = "init();">
<h1>El controlador de eventos onLoad</h1>

<input type = "text" id = "input1"></input>
<button type = "button" onclick = "validate();">Haga clic en m para ver qu me parece lo que
ha especificado</button>
</form>
</body>
</html>
2. Abra L8-js7.html en un explorador. Se muestra un formulario, como se ve en la

Figura8-12. La alerta visible indica que <body> ha terminado de cargarse. Eso es
loquesignifica onload = "init();".
Figura 8-12
Una vez que se ha
cargado todo el HTML,
se desencadena el
eventoonLoad
3. Haga clic en Aceptar para cerrar el cuadro de dilogo.

4. Especifique un valor en el campo de entrada y haga clic en el botn. Observe la
reaccin de este programa al valor, de la que se muestra un ejemplo en la Figura 8-13.
Figura 8-13
El JavaScript de este ejemplo
reacciona ante el valor
especificado
206 | Leccin 8
5. Experimente con otros valores.

Un sntoma frecuente de que un programa de JavaScript tiene errores es que su

comportamiento es inesperado: produce resultados distintos en momentos distintos.
Enalgunos casos, la causa es que el programa est escrito de tal manera que depende de
la existencia de un elemento particular de la pantalla, pero no garantiza que el elemento
existe. El inicio del programa en distintos momentos puede producir un orden de carga
algo distinto y, en consecuencia, resultados que parecen impredecibles. Una solucin
para este tipo de problema es empezar los clculos despus de que onLoad se haya
desencadenado, como en L8-js7.html.
Mostrar y ocultar elementos
Puede mostrar y ocultar elementos mediante el atributo HTML display para que sus
visualizaciones sean inteligentes, mostrando al usuario final informacin pertinente
y ocultarla cuando ya no se necesita.
Una pantalla concreta podra mostrar distintos tipos de informacin dependiendo de

las circunstancias: un nmero de telfono alternativo fuera del horario comercial, una
LISTO PARA CERTIFICACIN advertencia sobre el uso exclusivo durante un mes con mucho trfico o avisos sobre la
Qu atributo HTML se actividad de otros usuarios solo cuando dichos usuarios han iniciado sesin. Una manera
puede usar para mostrar prctica de organizar estas diferencias es disear la pantalla con todos los mensajes
elementos mediante posibles y, despus, mostrar solo los que sean pertinentes. Los elementos HTML
JavaScript? disponende un atributo de pantalla que resulta til para este enfoque.
4.2
En el siguiente ejercicio tiene que crear una pequea aplicacin que muestra y oculta
un prrafo en funcin del valor que especifica el usuario final. El programa muestra
unmensaje si el usuario especifica el valor 80 o superior.
OCULTAR PARTES DE LA PANTALLA EN FUNCIN DE LA ACCIN

DELUSUARIO
PREPRESE. Para crear una aplicacin que muestre y oculte un prrafo en funcin
delvalor que especifique el usuario final, siga estos pasos:
1. En un editor de texto o una herramienta de desarrollo de aplicaciones,
cree L8-js8.html con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>Mostrar u ocultar como reaccin</title>
function check_range() {
var value = document.getElementById("price1").value;
var paragraph_list = document.getElementsByTagName("p");
var first_paragraph = paragraph_list[0];
if (value >= 80) {
display = "block";
} else {
display = "none";
}
first_paragraph.style.display = display;
}
</script>
</head>
<body>
<h1>Mostrar u ocultar como reaccin</h1>

<form>
Especifique un precio: <input type = "number" id = "price1"
min = "1" max = "100"
oninput = "check_range();
></input>
</form>
<p style = "display:none;">Advertencia: Se encuentra en el
20 % de su lmite.</p>
</body>
</html>
2. Abra L8-js8.html en un explorador. El resultado se muestra en la Figura 8-14.
Figura 8-14
La interfaz del programa
3. Mediante el teclado, especifique estos precios presionando la tecla Entrar despus

de cada uno: 1, 50, 79, 80, 90, and 60. Despus de especificar 80 y 90 aparece una
advertencia, como se muestra en la Figura 8-15.
Figura 8-15
El programa de JavaScript
avisa cuando el valor
especificado se aproxima a
un intervalo determinado

Un error habitual entre los principiantes es olvidarse de mostrar o de ocultar. Al abrir,

L8-js8.html, el prrafo de advertencia est oculto y, despus, se usa JavaScript para que
se muestre en determinadas circunstancias. Cuando pruebe la funcin de mostrar/ocultar,
208 | Leccin 8
recuerde que para que el cdigo de JavaScript se vuelva a ocultar una vez que pasan las
condiciones para mostrar debe asignar el atributo display. Si no lo hace as, una vez que
se muestre no se volver a ocultar.
Actualizar el contenido de los elementos
Hay alguna parte de una pantalla que depende de otra? Use JavaScript y la propiedad
innerHTML para que las dos se sincronicen al instante.

En el ltimo ejercicio, se produca una respuesta a la especificacin de un precio, mostrando
Qu propiedad usa
u ocultando un prrafo de advertencia. JavaScript tiene la capacidad de hacer clculos
JavaScript para actualizar
el contenido de los
mucho ms complejos que simplemente mostrar u ocultar. Puede calcular una distancia,
elementos HTML?
hacer una recomendacin o, como se muestra en L8-js9.html, calcular el precio total.
4.2 JavaScript usa la propiedad innerHTML para cambiar el contenido actual de los elementos
HTML (conocidos como contenido interior) o para insertar contenido nuevo.
ACTUALIZAR EL CONTENIDO VISIBLE EN LA PANTALLA

PREPRESE. Para crear una aplicacin que actualice el contenido visible en la pantalla,
siga estos pasos:
<!doctype html>
<html>
<head>
<title>Calcular el elemento</title>

// check_range assigns the display style
// of the first paragraph as a function of
// the displayed pricewhether it's 80 and
// above, or 79 and below.
function check_range() {
var paragraph_list = document.getElementsByTagName("p");
var first_paragraph = paragraph_list[0];
if (value >= 80) {
display = "block";
} else {
display = "none";
}
first_paragraph.style.display = display;
}
// compute_total() has the responsibility
// to update the display with the total of
// the price and its tax.
function compute_total() {
if (isNaN(value)) {
total = "INDETERMINADO";
} else {
// Assume an 8% tax.
total = 1.08 * value;
total = total.toFixed(2);
}
var total_slot = document.getElementById("total");
total_slot.innerHTML = total;
}
</script>
</head>
<body><h1>Calcular el elemento</h1>
<form>
Especifique un precio: <input type = "number" id = "price1" min = "1" max = "100"
oninput = "check_range(); compute_total();"
></input> El precio total, impuestos incluidos,
es <span id = "total">INDETERMINADO</span>.
</form>
<p style = "display:none;">Advertencia: Se encuentra en el 20 % de su lmite.</p>
</body>
</html>
2. Abra L8-js9.html en un explorador web.
3. Mediante el teclado, escriba el nmero 1 en el cuadro de texto. Aparece un mensaje,
que se muestra en la Figura 8-16, mostrando el precio ms el 8 % de impuestos en
unelemento de 1 $. Observe con qu rapidez se actualiz la pantalla.
Figura 8-16
JavaScript puede calcular
inmediatamente un total,
con el impuesto de ventas
incluido, en funcin de una
entrada del usuario
4. Presione Entrar.
5. Escriba 50 en el cuadro de texto y observe cmo cambia el mensaje que aparece.
6. Repita los pasos 3 y 4 usando los valores 79, 80, 90 y 60 cada vez.
Agregar elementos
Puede usar el comando createElement comando y el mtodo appendChild en JavaScript

LISTO PARA CERTIFICACIN para agregar elementos despus de completar el cdigo HTML.
Qu hace el comando
createElement? JavaScript permite realizar modificaciones todava ms radicales en la pantalla. Cuando
sea necesario, se pueden crear nuevos elementos y ubicarlos en una pantalla existente.
4.2 Para hacerlo se usan el comando createElement y el mtodo appendChild.
210 | Leccin 8
AGREGAR UN ELEMENTO A LA PANTALLA

PREPRESE. Para crear una aplicacin que agregue elementos a la pantalla, siga estos
pasos:
conel siguiente contenido:
<!doctype html>
<html>
<head>
<title>Crear un elemento nuevo</title>
function add_paragraph() {
var original = document.getElementById("original");
var new_paragraph = document.createElement("p");
var current_time = new Date()
var this_text = "Este nuevo prrafo apareci en " +
current_time + ".";
// Even after the browser has rendered
// all HTML, it's possible to add *new*
// HTML elements. createTextNode()-
// appendChild()-insertBefore() is one
// typical pattern for adding new textual
// content.
var new_content = document.createTextNode(this_text);
new_paragraph.appendChild(new_content);
document.body.insertBefore(new_paragraph, original);
}
</script>
</head>
<body>
<h1>Crear un elemento nuevo</h1>
<p id = "original">Este es el texto que aparece cuando se
carga la primera pantalla.</p>
< button type = "button" onclick =
"add_paragraph();">Haga clic en m
para agregar contenido nuevo</button>
<p style = "display:none;">Advertencia: Se encuentra en el 20 % de su lmite.</p>
</body>
</html>
2. Abra L8-js10.html en un explorador web. Se muestra el programa, como se ve
enlaFigura 8-17.
Figura 8-17
La interfaz del programa
inicial
3. Haga clic en el botn. La pantalla cambia, como se muestra en la Figura 8-18.
Figura 8-18
Una pantalla formada por
elementos HTML simples
junto con otros creados
mediante JavaScript en
respuesta a la accin
delusuario
4. Presione el botn varias veces ms para ver los resultados.

Crear un elemento es una operacin algo ms delicada que actualizar uno existente.
Es necesario usar JavaScript para crear relaciones que, de otra forma, HTML realiza
automticamente.

H TML5 y CSS3 son un punto de partida excelente para su sitio web o aplicacin
mvil. Con todo, para hacer algo ms que la mera presentacin de contenido
estructurado, (responder con datos individualizados sobre un usuario concreto,
realizar transacciones de comercio en lnea u obtener resultados derivados de los
datos especificados, por ejemplo) se necesita programacin de verdad. JavaScript
es un lenguaje de programacin con grandes posibilidades para expresar las
interacciones que los usuarios finales necesitan en una aplicacin.
Una funcin es un segmento de un programa definido y ejecutado en aislamiento
de otras partes. La accin de una funcin es la secuencia de las acciones de las
declaraciones que contiene.
Los programadores con ms experiencia saben hacer buen uso de lo que otros
escriben. Una biblioteca de programacin contiene fragmentos de cdigo, subrutinas,
clases y otros recursos que se pueden reusar para crear software. Hay muchas
bibliotecas de JavaScript disponibles y jQuery es una de las ms populares.
JavaScript es prcticamente imprescindible en casi todos los efectos de las
aplicaciones modernas y tiles basadas en HTML.
Si ve algo en el explorador, JavaScript puede ocuparse de ello y controlarlo
mediante programacin. Puede usar el mtodo getElementById() para tener
accesoaelementos de visualizacin.
Un evento es un concepto fundamental en la programacin interactiva. Mucha
de la programacin de JavaScript tiene que ver con las respuestas cuando sucede
algo. El evento onLoad se usa y desencadena normalmente cuando se finaliza su
propietario.
Puede mostrar y ocultar elementos mediante el atributo HTML display para que
sus visualizaciones sean inteligentes, mostrando al usuario final informacin
pertinente y ocultarla cuando ya no se necesita.
Puede usar el comando createElement comando y el mtodo appendChild en JavaScript
para agregar elementos despus de completar el cdigo HTML.
212 | Leccin 8
Complete las oraciones siguientes escribiendo la palabra o palabras correctas
enlosespacios en blanco proporcionados.
1. Un es una receta que pedimos al equipo que ejecute a fin
deobtenercomo resultado una visualizacin o accin determinada.
2. Se usa la sintaxis var para definir una nueva en JavaScript.
3. Muchos requisitos de aplicaciones conllevan , que son acciones,
como un clic del mouse, que desencadenan que ocurran otras acciones.
4. Usted se da cuenta de que una parte del programa de JavaScript representa una
secuencia de acciones que est lgicamente aparte de otras partes del programa.
Probablemente sea til definir que una para que realice esa
secuencia especfica.
5. El evento asociado con <body> constituye una garanta de que
sehamostrado todo el HTML.
6. Un patrn de codificacin comn es vincular un identificador a un elemento HTML
especfico, para luego obtener acceso a dicho elemento a travs de JavaScript con
.
7. JavaScript son los nombres de variables y funciones.
8. Una es una coleccin de recursos, como cdigo y subrutinas
preescritos, que los desarrolladores usan para crear programas.
9. Una es cdigo de JavaScript preescrito.
10. Ms de la mitad de los sitios web ms importantes usan la
biblioteca de JavaScript.
Varias opciones
1. La programacin JavaScript hace que las aplicaciones sean de qu tipo?
(Seleccionetodas las respuestas que correspondan).
a. estticas
b. dinmicas
c. sintcticamente correctas
d. interactivas
2. Cules de las siguientes opciones son bibliotecas de JavaScript?
(Seleccione todas lasrespuestas que correspondan).
a. Dojo
b. MooTools
c. YUI
d. jQuery
3. Cul de las siguientes opciones nombra una variable JavaScript vlida?
a. my.variable
b. 1st-variable
c. ord['a']
d. [TBC]var1_$
Comprensin de los principios bsicos de JavaScript y codificacin | 213
4. Cundo no se puede usar JavaScript?

a. Con HTML 4.01 y anterior
b. Cuando el usuario ha establecido una preferencia de explorador para deshabilitar
JavaScript
c. Cuando el usuario no ha instalado JavaScript en el escritorio
5. Qu propiedad usa JavaScript para cambiar el contenido actual de los elementos
HTML?
a. changeHTML
b. modInnerHTML
c. innerHTML
d. HTMLinner
6. Una pgina web concreta tiene un solo <form>. Cmo logra esto de la mejor manera
JavaScript?
a. document. getElementsByTagName("form")[0]
b. document. getElementsByTagName("form")[1]
c. document. getElementsByTagName("form")
d. [document. getElementsByTagName("form")]
7. El usuario ha marcado un cuadro en un formulario que indica que no ha viajado

recientemente por un pas con una elevada incidencia de hepatitis. Cmo usara
JavaScript para ocultar un prrafo de advertencia?
a. warning.style.display = "none"
b. warning.style.display = 0
c. hide(warning)
d. warning.style.hide()
8. Una declaracin individual en JavaScript termina en un ________.

a. signo numeral
b. parntesis de cierre
c. punto
d. punto y coma
9. Cul de las siguientes opciones usa JavaScript para agregar elementos nuevos
aunapantalla de programa? (Seleccione todas las respuestas que correspondan).
a. createElement
b. appendChild
c. getElement
d. addChild
10. Cul de las siguientes opciones puede usar para mostrar y ocultar elementos
enunprograma de JavaScript?
a. atributo display
b. atributo show-hide
c. comando show
d. innerHTML
214 | Leccin 8
Verdadero/Falso
VF1.
Los nombres de las funciones se enumeran en el estndar de JavaScript.
VF2.
En cdigo HTML, JavaScript aparece normalmente dentro de un elemento
<script>.
VF3.
Es posible escribir cdigo JavaScript de tal manera que se ejecute antes
dequese carguen todas las imgenes.
VF4.
Si la funcin f2() usa la funcin f1() y las definiciones de las dos funciones
aparecen en el mismo <script>, la definicin de f1() debe estar primero.
VF5.
El mtodo getElementByElement() devuelve una referencia al primer objeto
conelatributo id o NAME especificado.
Escenario 8-1: Validacin de entrada
Le pidieron codificar una funcin JavaScript que juzga si una entrada de usuario podra
ser un nmero de Seguro Social vlido o no. Cmo lo hara? Qu entregara de vuelta
asu equipo?
Escenario 8-2: Comprensin de los nombres de funcin

Raymond est creando un programa que incluye varias funciones. Enumer los nombres
de sus funciones y sus descripciones en una tabla para que sea fcil consultarlas mientras
desarrolla su aplicacin. Algunas de sus aplicaciones no estn funcionando, as que le
pide consejo a usted. Usted se da cuenta de que las funciones en cuestin comienzan
connumerales o barras diagonales. Qu le dice a Raymond sobre la nomenclatura
delasfunciones?
Escenario 8-3: Seleccin de una biblioteca de JavaScript
CiCi desea comenzar a usar bibliotecas de JavaScript para reducir el tiempo de produccin
de sus programas, pero no est segura cmo empezar. Hay tantas bibliotecas disponibles
que es difcil elegir. Qu le dice?
Escenario 8-4: Distincin entre mtodos y funciones

Andre es nuevo en programacin de JavaScript y le cuesta entender la diferencia entre
mtodos y funciones. Qu le dice?
Creacin de LECCIN 9
animaciones,
trabajo con grficos
y acceso a datos

del examen MTA
Codificar animaciones mediante Codificar animaciones mediante 4.3
JavaScript JavaScript.
Trabajar con imgenes, formas Codificar animaciones mediante 4.3
y otros grficos JavaScript.
Enviar y recibir datos Tener acceso a datos mediante 4.4
JavaScript.
Cargar y guardar archivos Tener acceso a datos mediante 4.4
JavaScript.
Usar JavaScript para validar Tener acceso a datos mediante 4.4
la entrada de formularios JavaScript.
Comprender y usar las cookies Tener acceso a datos mediante 4.4
JavaScript.
Comprender y usar Tener acceso a datos mediante 4.4
el almacenamiento local JavaScript.
TRMINOS CLAVE
animacin JSON
AppCache LocalStorage
elemento canvas anlisis
cookies recursin
tipo de datos API XMLHttpRequest
encapsular
El equipo de desarrollo de Malted Milk Media tiene que terminar dos proyectos para
clientes esta semana. Attaboy Pet Services quiere que su logotipo tenga animacin
la primera vez que los usuarios abren la pgina de inicio de la empresa. Desea que
el logotipo se cree mediante el elemento canvas. El proyecto de aplicacin mvil
de Trusty Lawn Care se encuentra en un punto en el que es necesario agregar cdigo
para intercambiar datos con un servidor. El equipo de desarrollo quiere aprovechar
los dos proyectos para aprender ms sobre estos aspectos del uso de JavaScript.
215
216 | Leccin 9
Codificar animaciones mediante JavaScript
HTML y CSS ofrecen diversas funciones para agilizar la animacin de efectos habituales.
CONCLUSIN Sin embargo, JavaScript es mucho ms flexible y puede producir resultados excelentes.
Animacin es la visualizacin de una secuencia de imgenes estticas a una velocidad

LISTO PARA CERTIFICACIN lo suficientemente rpida como para crear la ilusin de movimiento. Al hablar de una
Qu es una animacin? interfaz de usuario, la animacin se refiere al cambio de una visualizacin para que
4.3 sea dinmica, es decir, no un cambio que se produce una sola vez. La flexibilidad de
JavaScript, si se usa correctamente, permite obtener efectos de animacin espectaculares.
La recursin es una parte clave de la animacin. La recursin es una tcnica de
programacin en la cual una funcin se invoca a s misma. Una tcnica comn en
animacin de JavaScript es usar setTimeout recursivamente, es decir, que se invoque
otra ejecucin de la misma funcin desde la cual se llam a setTimeout(). Suele ser
la forma ms eficaz de introducir un elemento de temporizacin en JavaScript.
Aparte de la programacin, la recursin no siempre se considera un comportamiento deseable.

Al escribir el trmino de un diccionario o glosario, por ejemplo, es ms recomendable definir
un trmino sin usar las mismas palabras que aparecen en el trmino. Imaginemos que vamos a
TOME NOTA
* definir la palabra poltica. Muchos lexicgrafos podran considerar que una definicin como
el campo de comportamiento poltico no es muy acertada porque se usa poltico. Por el
contrario, en programacin, la recursin no est solo permitida, sino que es muy eficaz.
Crear animaciones
Recuerde que JavaScript es un lenguaje de programacin general con muchas

funciones. Si se le ocurre una animacin concreta, probablemente hay una forma
para crearla en JavaScript.
La animacin, como otros efectos de JavaScript, se controla mediante programacin. Con

Qu funcin de JavaScript
una codificacin inteligente, se puede conseguir que la animacin sea como uno desea.
se puede usar para crear La funcin move_paragraph() del cdigo fuente del ejercicio siguiente se considera
una animacin? recursiva porque move_paragraph() aparece en la ltima declaracin que define la funcin.
4.3 En este ejercicio se crea una animacin que se actualiza constantemente con el estilo de
una cinta de teletipo.
CREAR UNA ANIMACIN SENCILLA

PREPRESE. Para crear una animacin sencilla, siga estos pasos:
1. Cree L9-js1.html con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>Animar con JavaScript</title>

// Crear un efecto de "cinta de teletipo" deslizando
// el prrafo de texto un pxel a la
// derecha, una y otra vez, hasta llegar al
// lmite de 300 pxeles. En ese
//punto, reiniciar la animacin desde
// el extremo izquierdo.
Creacin de animaciones, trabajo con grficos y acceso a datos | 217
function move_paragraph() {
next = current + "px";
current += 1;
if (current > 300) {
current = 0;
}
paragraph.style.left = next;
// Detener durante 18 milisegundos antes
// del siguiente movimiento.
var rate = 18;
setTimeout(move_paragraph, rate);
}
function init() {
paragraph = document.getElementById("original");
paragraph.style.position = "absolute";
current = 0;
move_paragraph();
}
</script>
</head>
<h1>Animar con JavaScript</h1>
<p id = "original">Me ve desplazarme por la
pantalla?</p>
</body>
</html>
2. Abra L9-js1.html en el explorador web. Se mueve el prrafo por la pantalla, como

se muestra en la Figura 9-1?
3. Cierre el archivo, pero deja abiertos la herramienta de edicin y el explorador web.
Figura 9-1
Dos instantneas de
una pantalla de cinta
de teletipo en distintos
momentos temporales
218 | Leccin 9
CREAR UNA ANIMACIN INTERACTIVA

PREPRESE. Para crear una animacin que reaccione a la accin de un usuario, siga estos
pasos:
<!doctype html>
<html>
<head>
<title>Animar con JavaScript</title>

// Esta pgina se comporta de forma muy parecida a la de L9-js1.html,
// con la excepcin de que la frecuencia
// de movimiento del prrafo depende del valor numrico
// que el usuario final ha especificado en el campo
// de entrada.
function move_paragraph() {
next = current + "px";
current += 1;
if (current > 300) {
current = 0;
}
paragraph.style.left = next;
var rate = document.getElementById("rate").value;
setTimeout(move_paragraph, rate);
}
function init() {
paragraph = document.getElementById("original");
paragraph.style.position = "absolute";
current = 0;
move_paragraph();
}
</script>
</head>
<h1>Animar con JavaScript</h1>


<form>
<input id = "rate" type = "number" value = "18" min =
"5" max = "100"></input>
</form>
<p id = "original">Me ve desplazarme por la pantalla?</p>
</body>
</html>
2. Abra L9-js2.html en un explorador web. La interfaz se muestra como se ve

enlaFigura9-2.
Figura 9-2
Casi todo lo que se ve
en la pantalla se controla
mediante JavaScript, incluida
la velocidad de la animacin.
3. Reemplace el valor de velocidad (que es 18 inicialmente) con un nmero mayor

o menor, y observe el efecto que tiene sobre la animacin. Ve cmo la velocidad
de la animacin acelerar y desacelera al ajustar la entrada?
si va a continuar con el siguiente ejercicio durante esta sesin.
MS INFORMACIN
Para obtener informacin bsica y procedimientos recomendados en el diseo de animaciones
paralainterfaz de usuario, visite la pgina web sobre animaciones y transiciones de Microsoft en
http://bit.ly/ziqs0G. La biblioteca de animaciones, en http://bit.ly/IgGj0f, proporciona un conjunto de
animaciones desarrollado por Microsoft, que puede usar para crear aplicaciones en tiempo de ejecucin.
Trabajar con imgenes, formas y otros grficos
Puede usar JavaScript para visualizar una imagen cuando se hace clic en un botn o
CONCLUSIN bien ocurre algn otro evento. El mtodo createElement funciona bien para este uso.
JavaScript puede mostrar diferentes tipos de grficos, desde archivos JPG y PNG a
formas como cuadros y crculos. Un forma de hacerlo es usar el mtodo createElement().
Este mtodo crea una funcin reutilizable para mostrar una imagen:
Cmo se puede mostrar
un archivo de imagen function show_image(src, width, height, alt) {
mediante JavaScript? var img = document.createElement("img");
4.3 img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// La agrega a la etiqueta <body>

document.body.appendChild(img);
}
Para que se muestre la imagen, agregue este cdigo:
<button onclick="show_image
('ruta/nombre de archivo', 276,110, 'Logo');">
Logotipo para mostrar</button>
Hacer que se muestre una imagen al hacer clic en un botn es una tarea bastante sencilla.
La creacin de grficos sobre la marcha exige usar el elemento canvas o SVG. En esta
leccin se describe la creacin de grficos con el elemento canvas.
220 | Leccin 9
Manipular el elemento canvas con JavaScript
JavaScript, con HTML5, puede controlar textos, formas e imgenes estticas y, adems,
dibujar grficos complejos.
El elemento canvas de HTML5 es un rea de dibujo que se controla mediante programacin.

Hasta ahora, los nicos elementos grficos habituales en HTML estticos, como PNG
o JPG. Los efectos dinmicos, y sobre todo los interactivos, eran difciles de conseguir.
Con el elemento canvas, todo eso cambia.
Como vimos en la leccin 2, el elemento canvas crea un contenedor de grficos y usa
JavaScript para dibujar los grficos dinmicamente. Con JavaScript, tambin se pueden
animar objetos haciendo que se muevan, cambien de tamao, etc.
LISTO PARA CERTIFICACIN Para dibujar un objeto canvas, se usan sobre todo las funciones getElementById() para
Cmo se usa JavaScript buscar el elemento canvas y canvas.getContext (a veces abreviado a c.getContext) para crear
para manipular elementos el objeto canvas. Despus, se pueden usar diversos mtodos para dibujar formas, incluir
de canvas? imgenes, etc.
4.3
Se han creado aplicaciones enteras, incluidos juegos y simuladores excelentes, con el
elemento canvas de HTML5.
USAR CANVAS PARA CREAR UN RELOJ CON MANECILLAS EN MOVIMIENTO

PREPRESE. Para conocer el uso de canvas de HTML5, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Esfera de reloj analgico como ilustracin del control de canvas
mediante JavaScript</title>

function draw_leg(fraction) {
dctx.lineTo(center_x + length * Math.sin(2 *
Math.PI * fraction),
center_y - length * Math.cos(2 *
Math.PI * fraction));
}
function init() {
var canvas =
document.getElementById("clockface");
// Las siguientes variables se crean como
// globales, para que otras funciones puedan
// tener acceso a ellas con facilidad.
dctx = canvas.getContext('2d');
dctx.fillStyle = "black";
center_x = 100;
center_y = 100;
length = 100;
show_hands();
}
// Se dibuja una sola manecilla como un tringulo

issceles // del centro al borde de la esfera del reloj.
function show_hand(fraction, width) {

dctx.beginPath();
dctx.moveTo(center_x, center_y);
draw_leg(fraction - width);
draw_leg(fraction + width);
dctx.fill();
}
function show_hands() {
// Borrar todo lo que haya en el rea
// que representa la esfera del reloj.
dctx.clearRect(0, 0, 200, 200);
// Qu hora es *ahora*?
var now = new Date();
seconds = now.getSeconds();
minutes = now.getMinutes() + seconds / 60;
hours = now.getHours() + minutes / 60;
// La manecilla de los segundos es la ms fina de las tres.
show_hand(seconds / 60, 0.002);
show_hand(minutes / 60, 0.005);
// La manecilla de las horas es el doble de ancha que la de los
// minutos.
show_hand(hours / 12, 0.01);
var rate = 1000;
setTimeout(show_hands, rate);
}
</script>
</head>
<h1>Esfera de reloj analgico como ilustracin del control de canvas

mediante JavaScript</h1>
<canvas id = "clockface" width = "200" height =
"200"></canvas>
</body>
</html>
2. Abra L9-js3.html en un explorador web. Aparece la pantalla, como se muestra

enlaFigura 9-3.
Figura 9-3
Una instantnea de las
agujas del reloj codificadas
con JavaScript y que
representan la hora 11:47:28
222 | Leccin 9
3. Cierre el archivo y el explorador web, pero deje la herramienta de edicin abierta si va

En el siguiente ejercicio se crea un dibujo abstracto colocando bloques sobre un canvas

de HTML5. El ejercicio ilustra que se necesitan solo unas pocas lneas de JavaScript
para producir efectos bastante complicados.
CREAR CUADROS ANIMADOS MEDIANTE CANVAS

PREPRESE. Para crear formas animadas con el elemento canvas, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Bloques</title>

// Esta pgina es para jugar. Simplemente, se ponen bloques de
// color en la pantalla de forma aleatoria
// para lograr efectos visuales interesantes.
// Se usa la recursin de un par de formas distintas
// ms abajo: place_blocks() calls draw_spiral(), y
// draw_spiral() calls either place_blocks() or
// draw_spiral(), segn la parte de una espiral
// que se haya dibujado recientemente.
function init() {
var canvas =
document.getElementById("drawing_area");
dctx = canvas.getContext('2d');
place_blocks();
}
function draw_spiral() {
// Una vez que un bloque se sale del dibujo,
// detener la espiral actual y crear
// otra.
if (x > 500 || y > 500 || x < 0 || y < 0) {
place_blocks();
}
ratio = 1.6;
newx = x;
newy = y;
dx = size;
dy = size;
// Cada bloque se gira 90 grados
// a partir del ltimo.
switch (direction) {
case "up":
dy = -size;
newy += dy;
direction = "left";
break;
case "left":
dx = -size;
dy = -size;
newx += dx;
direction = "down";
break;
case "down":
dx = -size;
newy += dy;
direction = "right";
break;
case "right":
newx += dx;
direction = "up";
break;
}
dctx.fillRect(x, y, dx, dy);
// Cada bloque que se dibuja a continuacin es ms grande
// que el anterior.
size *= ratio;
x = newx;
y = newy;
setTimeout(draw_spiral, delay);
}
function place_blocks() {
d
ctx.fillStyle =
'#'+Math.floor(Math.random()*16777215).toString(16
);
x = 100 + 300 * Math.random();
y = 100 + 300 * Math.random();
delay = 100 + 2000 * Math.random();
size = 3 + 7 * Math.random();
direction = "up";
draw_spiral();
}
</script>
</head>
<h1>Bloques</h1>
<canvas id = "drawing_area" width = "500" height =
"500"></canvas>
</body>
</html>
2. Abra L9-js4.html en un explorador web. La pantalla se llena de bloques de colores,

siva a continuar con el siguiente ejercicio durante esta sesin.
224 | Leccin 9
Figura 9-4
Una instantnea de un
dibujo abstracto realizado
colocando bloques sobre un
elemento canvas de HTML5
Enviar y recibir datos
Si una aplicacin accesible desde su equipo le muestra datos como usuario final, es
muy probable que haya una forma de que JavaScript tenga acceso a esos datos. Una
CONCLUSIN de las funciones ms importantes de JavaScript es comunicarse en tiempo real con
orgenes de datos remotos.
Parte de la eficacia de las aplicaciones informticas modernas es su capacidad de

coordinar informacin de muchos orgenes en una pantalla que resulte til: JavaScript
puede reunir, para realizar comparaciones y clculos, bases de datos de servidor con
historiales de clientes, la memoria local del equipo de sobremesa o porttil, selecciones
de compra vigentes, el contenido de la pgina actual y actualizaciones remotas de precios
o los datos del tiempo.
La creacin de programas de JavaScript que enven y reciban datos puede ser complejo,
no porque los conceptos sean difciles, sino porque JavaScript tiene una estructura distinta
a la de cualquier otra aplicacin. Casi todos los ejemplos de JavaScript de la leccin 8
se generan como pginas HTML pequeas e independientes. Cada pgina individual
se puede cargar en un explorador y usar en el explorador de forma aislada.
Sin embargo, un programa de JavaScript que enva y recibe datos debe tener ms
partes: debe haber un destinatario o remitente en algn lugar con el que el programa
de JavaScript puede intercambiar datos. A menudo, las pginas HTML o aplicaciones
mviles se comunican con un servidor de red en una aplicacin central.
Las transacciones de datos de JavaScript se suelen presentar como difciles y solo
disponibles para quienes dominan AJAX, XML, JSON y otras muchas siglas de ese tipo.
Esto no es cierto. Las funciones son algo ya conocido: las funciones son como pequeas
cajas especiales a las que se suministran cero o ms argumentos y, a continuacin, la
caja hace algo y tal vez devuelve un resultado. La comunicacin en red de JavaScript es
algo muy parecido: se pasan cero o ms piezas de datos y se recibe un resultado. La gran
dificultad estriba en crear en primer lugar un laboratorio con las piezas necesarias para
que este dilogo funcione. Una vez que ese primer canal funciona sin problemas, ver que
aprende rpidamente las reglas de seguridad, flujo de control y codificacin especficas
de las comunicaciones de datos de JavaScript.
Qu API permite Una de las tcnicas esenciales para la transferencia de datos implica el uso de la API
intercambiar cadenas XMLHttpRequest (a veces abreviada a XHR). XMLHttpRequest permite usar JavaScript para
de datos entre un cliente pasar datos en forma de cadenas de texto entre un cliente y un servidor. La sintaxis
y un servidor? general puede tener un aspecto parecido al siguiente:
4.4
function load(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
callback(xhr.responseText);
}
xhr.send(data);
}
El objeto XMLHttpRequest crea una llamada al servidor. El mtodo open especifica el

mtodo HTTP para ponerse en contacto con el servidor y proporciona la direccin web
del servidor. La funcin de devolucin de llamada obtiene una respuesta del servidor.
Finalmente, xhr.send(data) enva los datos.
Unos cuantos ejercicios posteriores, como pronto veremos, requieren un servidor web.
La memoria cach de la aplicacin, por ejemplo, solo existe para sitios a los que se tiene
acceso a travs de una conexin de red. Con el enfoque correcto, casi todos los servidores
web son buenos compaeros para practicar. Su instructor configurar el acceso a un servidor
web para que pueda probar la memoria cach de la aplicacin sin dificultades. Enviar y
recibir datos explcitamente en JavaScript es distinto. Para ello, se necesita un servidor
web dinmico y programacin en el servidor. Debe tener estas diferencias muy claras:
La mayora de las funciones de JavaScript: se pueden demostrar con un explorador
desde el sistema de archivos local.
ApplicationCache y algunas otras funciones de HTML5 en JavaScript: requieren
un servidor web. Se puede usar cualquier servidor web.
XmlHttpRequest y otras funciones de transmisin de datos de JavaScript parecidas,
incluidas algunas introducidas en HTML5: requieren un servidor web dinmico.
Si no se dispone de un servidor web dinmico, en el ejercicio siguiente se muestra un
ejemplo de acceso a datos muy sencillo. Si decide trabajar con servidores web, tendr
bastantes opciones que son relativamente fciles para un novato con los servicios web.
wamp para Windows, mamp para Mac y lamp para Linux estn entre los puntos de partida
ms sencillos.
ACCESO A DATOS
PREPRESE. Como un pequeo ejemplo de la capacidad de JavaScript para tener acceso
a datos, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Acceso a datos con JavaScript</title>
226 | Leccin 9
function init() {
var paragraph_object =
document.getElementById('paragraph');
m
essage = "Observe que el ttulo de esta pgina es
'" + document.title + "'.";
paragraph_object.innerHTML = message;
}
</script>
</head>
Cmo se usa la funcin <h1>Acceso a datos con JavaScript</h1>
getElementById() para tener <p id = "paragraph"></p>
acceso a datos?
</body>
</html>
4.4
2. Abra L9-js5.html en un explorador web. Aparece la pantalla, como se muestra
enlaFigura 9-5.
Figura 9-5
Una pgina HTML sencilla,
con un prrafo computado
por JavaScript
3. Tenga en cuenta que JavaScript puede tener acceso a contenido HTML.

Qu se intenta ilustrar con este ejemplo? Si un programador necesita el ttulo de una

pgina web, por qu no lo copia y lo pega desde HTML?
Una respuesta habitual: el JavaScript de este tipo est pensado para usarse en una biblioteca
para todo el sitio. Podra haber un estilo o poltica que se debe aplicar a todas las pginas.
En ese caso, es mucho ms prctico y sencillo encapsular la poltica en una biblioteca de
JavaScript que puede recuperar el ttulo automticamente, en lugar de tener que copiar y
pegar el ttulo de todas las pginas del sitio. De esta forma, todas las pginas tendrn una
copia idntica de la biblioteca de JavaScript.
Poltica es un trmino que los programadores usan para indicar, ms o menos, estilo de
accin. Un estilo visual podra ser algo que los seres humanos expresamos como todas las
pginas deben aparecer con esta sutil imagen de fondo concreta. Un ejemplo de poltica es
TOME NOTA
* cada pgina debe hacer su texto visible casi instantneamente y debe ser legible incluso si
cambia de tamao horizontalmente. Las funciones auxiliares de JavaScript y los estndares
de codificacin para todo un sitio pueden contribuir a conseguir polticas de este tipo.
Encapsular es un trmino que los programadores emplean a menudo. En la aplicacin de

JavaScript que dibuj una esfera de reloj analgica en un elemento canvas, la funcin show_
hand() encapsula toda la trigonometra que conlleva la creacin de una manecilla, ya sea
para las horas, los minutos o los segundos. El programador usa show_hand() sin preocuparse
*
TOME NOTA
de los detalles de lo que hay dentro (la cpsula). En la mayora de los casos, es mucho ms
fcil dibujar un cuadro o cpsula en torno a una pieza de funcionalidad, dar un nombre a la
cpsula y considerar la cpsula como un todo, en lugar de considerar todos y cada uno de sus
componentes cada vez que se usa.
Transmitir objetos complejos y analizar
Como lenguaje de uso general, JavaScript puede comunicar informacin estructurada

mucho ms compleja que los sencillos valores empleados en casi toda esta leccin.
En programacin en situaciones reales, JavaScript puede hacer frente a operaciones muy

Qu es anlisis?
complicadas. Se podra, por ejemplo, recibir un informe sobre los precios de la gasolina
en una larga lista de puntos de venta y necesitar la capacidad de aislar una de esas cifras.
4.4
Anlisis es un trmino que se usa para describir el anlisis de informacin compleja por
las partes que la forman.
ANALIZAR DATOS COMPLEJOS

PREPRESE. Para demostrar la capacidad de JavaScript de analizar datos complejos,
sigaestos pasos:
<!doctype html>
<html>
<head>
<title>Anlisis de datos complejos</title>
// La siguiente instruccin debe aparecer

// en una sola lnea.
sample_data = "Mobil-17: 3.49; Kroger-03: 3.36;
E xxon-01: 3.59; Kroger-04: 3.49;
Valero-A: 3.41; Chevron-01: 3.52";
of_interest = "Kroger-04";
// sample_data es un ejemplo de un fragmento tpico de

// datos estructurados: una cadena con partes separadas
// por punto y coma, donde cada una parte tiene dos
// subpartes separadas por dos puntos. Muchos otros formatos
// son posibles. Para analizar este formato concreto,
// init() se divide segn dos separadores distintos.
function init() {
var paragraph_object =
document.getElementById("paragraph");
var data_list = sample_data.split(';');
for (j = 0; j < data_list.length; j++) {
parts = data_list[j].split(':');
var site = parts[0].trim()
if (site == of_interest) {
228 | Leccin 9
var message = "Segn los datos de la muestra '" +

sample_data + "', este programa filtr el
precio $" + parts[1].trim() + " para la ubicacin " + site +
" site.";
paragraph_object.innerHTML = message;
}
}
}
</script>
</head>
<h1>Anlisis de datos complejos</h1>

<p id = "paragraph">Bienvenidos.</p>
</body>
</html>
2. Abra L9-js6.html en un explorador web. La pantalla debe ser parecida a la Figura 9-6.
Figura 9-6
JavaScript puede extraer
los datos incrustados en
un formato complejo

JavaScript y las bibliotecas de JavaScript, disponibles de forma gratuita, proporcionan

gran variedad de servicios de anlisis. La extraccin de datos desde una pgina web
externa legible es solo un ejemplo entre muchos de cmo JavaScript puede analizar datos.
Tambin podra usar un subconjunto de JavaScript denominado JSON (JavaScript Object
Notation) para intercambiar objetos de JavaScript con un servidor. Si se usan las API
JSON.parse y JSON.stringify, el cdigo podra parecerse al siguiente:
function loadJSON(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
callback( JSON.parse(xhr.responseText) );
}
xhr.send( JSON.stringify(data) );
}
loadJSON("my.json", { id : 1 }, function(response) {
setTitle(response.title);
});
Este cdigo es casi idntico al ejemplo de cdigo de XMLHttpRequest usado anteriormente

en la leccin. El objeto XMLHttpRequest crea una llamada al servidor, y el mtodo open
especifica el mtodo de HTTP para ponerse en contacto con el servidor y proporciona
la direccin del servidor web. La funcin callback usa JSON parse para obtener una
respuesta del servidor. Cuando el servidor responde, se llama a la API JSON.parse,
que crea el objeto de JavaScript. El objeto se devuelve al servidor. Los datos, por
su parte, primero se convierte en cadenas.
Cargar y guardar archivos
JavaScript puede tener acceso a archivos en el equipo local y, con HTML5, puede
CONCLUSIN validar el tipo de archivo antes de cargarlo. Con JavaScript, la carga de archivos
es un proceso ms interactivo y con menos errores.
Muchas aplicaciones web o mviles incluyen una funcin de carga de archivos. Este ha
LISTO PARA CERTIFICACIN sido durante mucho tiempo un punto dbil de HTML, donde no hay ninguna forma eficaz
Cmo puedo restringir de especificar, por ejemplo, permitir solo cargas de imgenes, y no de documentos, y
el tipo de archivo que solo si las imgenes ocupan menos de 1,1 MB. Sin esta capacidad, sucede con frecuencia
se carga? que los usuarios, por error, tratan de cargar algo que no deseaban o que la aplicacin no
4.4 admite, y los retrasos en la red hacen que la correccin del error sea lenta.
La capacidad de HTML5 de tener acceso a archivos locales implica que una imagen que se
va a cargar se puede ver primero como miniatura y validar antes de su carga. Las acciones
inmediatas de JavaScript contribuyen a que la carga sea un proceso ms interactivo y sin
errores.
TENER ACCESO A UN ARCHIVO LOCAL

PREPRESE. Para demostrar la capacidad de JavaScript de acceso a un archivo local,
sigaestos pasos:
<!doctype html>
<html>
<head>
<title>Acceso a archivos locales mediante JavaScript</title>

funcin acknowledge(file_handle) {
var size = file_handle.size;
var fname = file_handle.name;
var message = "Eligi el archivo '" +
fname + "'. Parece ser una imagen
irreconocible, con un total de "+ size +"bytes de tamao.";
alert(message);
function complain(fname) {
v ar message = "El archivo de nombre '" + fname + "'
parece no tener una extensin aceptable.";
alert(message);
}
230 | Leccin 9
function handle_file_selection(item) {
var f = item.files[0];
var fname = f.name;
var last_index = fname.lastIndexOf('.');
if (last_index == -1) {
complain(fname);
return;
}
var ext = fname.substr(last_index + 1);
if (ext.toLowerCase() in {'gif': '',
'jpg': '',
'png': '',
'tif': ''
}) {
acknowledge(f);
} else {
complain(fname);
}
}
</script>
</head>
<body>
<h1>Acceso a archivos locales mediante JavaScript</h1>

<input type = 'file'
onchange = 'handle_file_selection(this);' />
</body>
</html>
2. Abra L9-js7.html en un explorador web.

3. Haga clic en Examinar, y busque y seleccione un archivo que no sea una imagen en el
equipo local. Haga clic en Abrir. La pantalla debe ser parecida a la Figura 9-7. El cuadro
de mensaje informa de que se seleccion el tipo de archivo incorrecto. Haga clic en
Aceptar para cerrar el cuadro de mensaje.
Figura 9-7
JavaScript puede analizar los
archivos antes de su carga
y rechazar los que no se
ajusten a las restricciones
4. Repita el paso 3 y, esta vez, abra un archivo que sea una imagen. El cuadro de mensaje
TOME NOTA
* resultante debe parecerse al de la Figura 9-8, e informa de que se selecciono un tipo
Este ejercicio se llev a de archivo acceptable. Haga clic en Aceptar para cerrar el cuadro de mensaje.
cabo con el explorador
Mozilla Firefox.
Figura 9-8
Este archivo cumple
los requisitos de
carga de archivos

Observe que este programa no carga el archivo seleccionado. El objetivo de este ejercicio
es mostrar cmo JavaScript puede tener acceso al archivo y su contenido, y administrarlo,
antes de cargarlo.
Usar la memoria cach de la aplicacin (AppCache)
Los usuarios desean poder explorar un incluso sin conexin. La API de memoria cach
de la aplicacin (AppCache) lo hace posible. AppCache se diferencia de la memoria cach
del explorador en que esta ltima contiene todas las pginas web visitadas, mientras
que AppCache guarda solo los archivos mencionados en el manifiesto de cach.
AppCache guarda una copia de los archivos del sitio web de forma local, de manera
estructurada. Los archivos contienen HTML, CSS y JavaScript, junto con otros recursos
que el sitio necesita para funcionar. Despus de que un visitante visita el sitio una vez,
Cul es la finalidad
en las visitas posteriores los recursos se cargan rpidamente desde la copia local en lugar
de AppCache?
de tener esperar a que haya conexin de red.
4.4
Como vimos en la leccin 1, AppCache usa un archivo de texto denominado manifiesto
de cach para especificar los archivos que el explorador web debe almacenar en la
memoria cach sin conexin. Incluso si un usuario actualiza el explorador mientras
trabaja sin conexin, la pgina se carga y funciona correctamente.
AppCache no es lo mismo que la memoria cach de un explorador. Mientras que la
memoria cach de un explorador guarda todas las pginas web visitadas, AppCache
guarda solo los archivos que aparecen en el manifiesto de la memoria cach. Puede
aplicar AppCache a una sola pgina o un sitio completo.
232 | Leccin 9
Para que AppCache funcione, el servidor web debe estar configurado con el tipo MIME
correcto, que es text/cache-manifest. Adems, la extensin de archivo preferida para
los archivos de manifiesto es .appcache.
USAR APPCACHE
PREPRESE. Para probar AppCache, siga estos pasos:
1. Obtenga del instructor privilegios para usar un servidor web. El servidor debe tener
el tipo MIME configurado en text/cache-manifest. AppCache solo se puede usar para
accesos de red. No funciona cuando un recurso web es local.
2. Cree L9-appcache.html con el siguiente contenido:
<!doctype html>
<html manifest = "test.appcache">
<head>
<title>Ejemplo breve de AppCache</title>
</head>
<body>
<h1>Ejemplo breve de AppCache</h1>
<p>Esta pgina se debe volver a cargar despus de
desconectar deInternet y actualizar la pgina web.
</body>
</html>
3. Cierre L9-appcache.html y, a continuacin cargue el archivo en el servidor web.

Elinstructor le dar la direccin web del archivo.
4. En un explorador web, vaya a la direccin web. Se abre el archivo L9-appcache.html.
5. Aparece la pantalla, como se muestra en la Figura 9-9. Se vuelve a cargar la pgina
como se esperaba?
Figura 9-9
Pgina web extrada
de AppCache
6. Desconecte el equipo local de Internet.

7. Compruebe que no tiene acceso a pginas web, por ejemplo la de MSDN.
8. Actualice la imagen de L9-appcache.html en el explorador.
9. Observe que se muestra rpidamente, incluso ahora que L9-appcache.html no est
disponible.
abiertos si va a continuar con el siguiente ejercicio durante esta sesin.
MS INFORMACIN
Si desea consultar un tutorial sobre AppCache, visite la pgina web de la gua del principiante para el uso
de la memoria cach de la aplicacin, en http://www.html5rocks.com/en/tutorials/appcache/beginner/.
Comprender y usar tipos de datos
En JavaScript, los datos pueden ser diversos. Los ms comunes son cadenas y
nmeros. Otros tipos de datos son matriz, booleano, Null, objeto y sin definir.
En JavaScript, los valores aparecen con unos aspectos especiales, que se conocen como
tipos de datos. Los ms habituales son nmeros y cadenas. ABCD y 1234 son dos
ejemplos de cadenas. Adems, el segundo ejemplo contiene solo dgitos. El numeral 3
es un nmero, pero 3 dlares es una cadena.
Qu tipos de datos hay
disponibles en JavaScript? Otros tipos de datos son ms especializados, como matriz, booleano, Null, objeto y sin
4.4 definir. Su uso es relativamente raro y no se describe en esta leccin.
Lo ms importante de los tipos de datos en este nivel es que su definicin da lugar
aalgunas sorpresas. En JavaScript, el ejemplo siguiente tiene el valor 123:
"'1' + 2 + 3"
Pero el ejemplo siguiente tiene el valor 6 o '33', segn qu lector de JavaScript se use:
"1 + 2 + '3'"
Hay reglas que definen todo este comportamiento, y cada tipo de datos tiene sus usos.
En relacin con esta leccin, debe tener clara la diferencia entre, por ejemplo, un nmero
y los caracteres que representan ese nmero. Si, por casualidad, encuentra una operacin
en la JavaScript manipula los tipos de forma inesperada, consulte el material de referencia
de MSDN sobre tipos de datos. Entretanto, programe JavaScript de forma sencilla y atenta.
Usar JavaScript para validar la entrada de formularios
Cuando los usuarios finales especifican datos en un formulario, JavaScript puede

CONCLUSIN validar las entradas al instante y sugerir alternativas.
En la leccin 3 se describi la entrada y validacin de formularios de HTML.

Con JavaScript, los formularios pueden llevar a cabo muchas ms operaciones.
Cmo se usa JavaScript Supongamos, por ejemplo, que un usuario final debe especificar un nmero de serie
para realizar la validacin con el formato XXX-XXX-XX-X, donde cada X es un dgito. En los inicios de las
de entradas del lado aplicaciones web, los usuarios finales lo escriban lo mejor que podan y enviaban
cliente? un formulario rellenado. El servidor comprobaba si haba errores y los notificaba.
4.4
Con JavaScript, lo que se especifica en el formulario en el cliente se valida mediante
sugerencias y correcciones al instante.
ADMINISTRAR UN FORMULARIO CON JAVASCRIPT

PREPRESE. Para demostrar la capacidad de JavaScript de administrar un formulario,
sigaestos pasos:
1. Cree L9-js8.html con el contenido:
<!doctype html>
<html>
<head>
<title>Administracin de formularios</title>
234 | Leccin 9

// La accin de la funcin
correct() es la de
// comparar los caracteres que el usuario ha
especificado
// con el patrn 'XXX-XXX-XX-
X'. Si la
// entrada del usuario no coincide con este
pattern,
// se debe eliminar el ltimo carcter. As,
el usuario
// tiene la impresin de que
solo puede
// especificar caracteres vlidos.
function correct() {
var input_object =
document.getElementById("serial");
var value = input_object.value;
var current_length = value.length;
if (current_length) {
var last_character =
value.substring(current_length - 1);
switch (current_length) {
case 4:
case 8:
case 11:
if (last_character != '-') {
value = value.substring(0,
current_length - 1);
}
break;
default:
if (!/\d/.test(last_character)) {
value = value.substring(0,
current_length - 1);
}
}
if (current_length > 12) {
value = value.substring(0, current_length
- 1);
}
current_length = value.length;
switch (current_length) {
case 3:
case 7:
case 10:
value += "-";
}
input_object.value = value;
}
}
</script>
</head>
<body>
<h1>Administracin de formularios</h1>
<form>
Especifique aqu un nmero de serie con el patrn XXX-XXX-XX-

X, donde cada X es un dgito: <input id = "serial"
type = 'text' size = '12'
onkeyup =
"correct();">.
</form>
</body>
</html>
2. Abra L9-js8.html en un explorador web. Aparece la pantalla, como se muestra en la
Figura 9-10.
3. Empiece a escribir caracteres. Observe que el campo de entrada solo acepta caracteres
que coinciden con el patrn XXX-XXX-XX-X, y pasa por alto los que no coinciden.
Figura 9-10
La validacin de entradas del
lado cliente es una tarea que
realiza JavaScript

En el mundo real, una aplicacin exigira una mayor validacin: no basta con que una
entrada parezca un nmero de serie, sino que la aplicacin debe confirmar que es un nmero
de serie. Siempre cabe la posibilidad de que el usuario final especifique un valor incorrecto,
pero la sencilla comprobacin de JavaScript de las entradas del formulario es muy eficaz
para contribuir a que todas sean vlidas. Con todo, y a pesar de esta validacin, un usuario
final que realmente quisiera hacerlo podra usar el mouse para especificar valores que no
coincidan con el patrn de nmero de serie. Un validador ms complejo podra detectar
las eliminaciones y los movimientos realizados con el mouse.
Comprender y usar cookies
Tradicionalmente, las cookies han almacenado informacin que aumenta las posibilidades
CONCLUSIN de personalizacin y la comodidad. JavaScript puede crear y recuperar las cookies.
Las cookies son pequeos archivos de texto que los sitios web guardan en el disco duro del
LISTO PARA CERTIFICACIN equipo, y que contienen informacin acerca del usuario y sus preferencias de exploracin.
Qu es una cookie?
El contenido de las cookies cambia cuando un usuario vuelve a visitar un sitio y selecciona
4.4 diferentes elementos o preferencias de cambios. Desde la perspectiva de JavaScript, una
cookie es una variable, y JavaScript se usa para crear y recuperar las cookies.
Supongamos que est a cargo de un juego de computadora codificado en HTML y JavaScript.
Funciona bien, pero requiere que el usuario elija un nivel cada vez que empieza una partida
nueva. No sera mejor que el juego asumiera que el usuario desea empezar en un nivel
superior al de su ltima partida, con la opcin de cambiarlo? No solo es mejor, sino que
con las funciones de cookies de JavaScript la programacin resulta muy sencilla.
236 | Leccin 9
USAR COOKIES
PREPRESE. Para demostrar la capacidad de JavaScript de retener informacin
enelequipo de escritorio incluso con el explorador desactivado, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Uso de cookies</title>
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function init() {
var message;
level_object = document.getElementById("level");
var welcome = document.getElementById("welcome");
var level = getCookie("level");
if (level == null || level == '') {
message = "Parece que es la primera vez
que juega. Empezar en el nivel 1.";
level = 1;
} else {
message = "La ltima vez que jug, lleg al
level " + level +". Ahora empezar en ese nivel. ";
}
welcome.innerHTML = message;
level_object.value = level;
}
function save_level() {
setCookie("level", level_object.value, 10);
}
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? ""
: "; expires="+exdate.toUTC
String());
document.cookie=c_name + "=" + c_value;
}
</script>
</head>
<h1>Uso de cookies</h1>
<p id = "welcome">Bienvenidos.</p>
<form>
Puede actualizar el nivel en cualquier momento. Ahora est
establecido en
<input id = "level" type = "number" min = "1" max =
"100"
oninput = "save_level();" />.
</form>
</body>
</html>
2. Obtenga del instructor privilegios para usar un servidor web. Las cookies solo pueden
activarse en las pginas web a las que se tiene acceso a travs de la red, no de manera
local.
3. Cargue L9-js9.html en el servidor web mediante un programa de transferencia de
archivos, como le ha explicado instructor. El instructor tambin debe darle la direccin
web del archivo.
4. En un explorador web, use la direccin web para ir a L9-js9.html y abrirlo.
5. Observe el nivel en el que empieza, como se muestra en la Figura 9-11.
Figura 9-11
Las cookies se han usado
a menudo para guardar
pequeas cantidades de
datos en el equipo cliente
6. Imagine que ha jugado un rato y alcanzado otro nivel. Especifique ese nivel en la zona
de entrada.
7. Cierre la ventana de la aplicacin.
8. Vuelva a abrir L9-js9.html. Ve cmo la aplicacin recuerda su posicin de una
sesin del explorador a otra?
9. En las preferencias de configuracin del explorador, elimine la cookie creada en este
ejercicio o, si es ms prctico, elimine todas las cookies.
10. Vuelva a abrir L9-js9.html. Observe que el nivel ha vuelto al valor predeterminado
de1.
Comprender y usar almacenamiento local
Las cookies tienen limitaciones en cuanto a la informacin que almacenan y, por lo tanto,
en los efectos que se puede obtener con su programacin. Adems, las cookies suponen
CONCLUSIN una amenaza para la privacidad de los datos. HTML5 proporciona almacenamiento local
para que la personalizacin sea ms fcil de programar y tenga ms capacidades.
238 | Leccin 9
LISTO PARA CERTIFICACIN Las cookies tienen limitaciones. No son muy populares entre algunos usuarios porque
Qu es el almacenamiento contribuyen a difundir informacin personal sin autorizacin y porque solo son prcticas
local? para almacenar datos muy sencillos. La propiedad LocalStorage de HTML5 tiene una mayor
4.4 seguridad y hace que la programacin sea ms fcil que con las cookies.
GUARDAR EN ALMACENAMIENTO LOCAL

PREPRESE. Para demostrar la capacidad de JavaScript para guardar informacin
sincookies, siga estos pasos:
<!doctype html>
<html>
<head>
<title>Uso de almacenamiento local</title>
// En esta pgina se muestra un modelo sencillo para
// guardar el "nivel" de un jugador en almacenamiento local.
function init() {
var message;
level_object = document.getElementById("level");
var welcome = document.getElementById("welcome");
// "localStorage" es una palabra clave para un
// explorador compatible con HTML5. "localStorage.level" es
// un nombre de variable elegido para su uso por esta
// pgina concreta.
var level = localStorage.level;
if (level == null || level == '') {
message = "Parece que es la primera vez
que juega. Empezar en el nivel 1.";
level = 1;
} else {
message = "La ltima vez que jug, lleg al
level " + level +". Ahora empezar en ese nivel. ";
}
welcome.innerHTML = message;
level_object.value = level;
}
function save_level() {
localStorage.level = level_object.value;
}
</script>
</head>
<h1>Uso de almacenamiento local</h1>
<p id = "welcome">Bienvenidos.</p>
<form>
Puede actualizar el nivel en cualquier momento. Ahora est
establecido en
<input id = "level" type = "number" min = "1" max =
"100"
oninput = "save_level();" />.
</form>
</body>
</html>
2. Obtenga del instructor privilegios para usar un servidor web. El almacenamiento local
solo puede activarse en pginas web a las que se tiene acceso a travs de la red, no
deforma local.
3. Cargue L9-js10.html en el servidor web mediante un programa de transferencia
dearchivos, como le ha explicado instructor. El instructor tambin debe darle la
direccin web del archivo.
Figura 9-12
Interfaz inicial del programa
4. En un explorador web, use la direccin web para ir a L9-js10.html y abrirlo.

5. Observe el nivel en el que empieza, como se muestra en la Figura 9-12.
6. Imagine que ha jugado un rato y alcanzado otro nivel. Especifique ese nivel en la zona
de entrada.
7. Cierre la ventana de la aplicacin.
8. Vuelva a abrir L9-js10.html. Ve cmo la aplicacin recuerda su posicin de una
sesin del explorador a otra?
9. Cierre el archivo y todas las ventanas y los programas que estn abiertos.
Observe que la programacin de almacenamiento local es mucho ms concisa que las

operaciones correspondientes con cookies.

H TML y CSS ofrecen diversas funciones para agilizar la animacin de efectos
habituales. Sin embargo, JavaScript es mucho ms flexible y puede producir resultados
excelentes.
JavaScript es un lenguaje de programacin general con muchas funciones. Si se
le ocurre una animacin concreta, probablemente hay una forma para crearla en
JavaScript.
Puede usar JavaScript para visualizar una imagen cuando se hace clic en un botn o
bien ocurre algn otro evento. El mtodo createElement funciona bien para este uso.
Si una aplicacin accesible desde su equipo le muestra datos como usuario final, es
muy probable que haya una forma de que JavaScript tenga acceso a esos datos. Una
de las funciones ms importantes de JavaScript es comunicarse en tiempo real con
orgenes de datos remotos.
Como lenguaje de uso general, JavaScript puede comunicar informacin estructurada
mucho ms compleja que los sencillos valores empleados en casi toda esta leccin.
JavaScript puede tener acceso a archivos en el equipo local y, con HTML5, puede
validar el tipo de archivo antes de cargarlo. Con JavaScript, la carga de archivos
es un proceso ms interactivo y con menos errores.
(contina)
240 | Leccin 9
L os usuarios desean poder explorar un incluso sin conexin. La API de memoria cach
de la aplicacin (AppCache) lo hace posible. AppCache se diferencia de la memoria cach
del explorador en que esta ltima contiene todas las pginas web visitadas, mientras
que AppCache guarda solo los archivos mencionados en el manifiesto de cach.
En JavaScript, los datos pueden ser diversos. Los ms comunes son cadenas y
nmeros. Otros tipos de datos son matriz, booleano, Null, objeto y sin definir.
Cuando los usuarios finales especifican datos en un formulario, JavaScript puede
validar las entradas al instante y sugerir alternativas.
Tradicionalmente, las cookies han almacenado informacin que aumenta las
posibilidades de personalizacin y la comodidad. JavaScript puede crear y recuperar
las cookies.
Las cookies tienen limitaciones en cuanto a la informacin que almacenan y, por
lo tanto, en los efectos que se puede obtener con su programacin. Adems, las
cookies suponen una amenaza para la privacidad de los datos. HTML5 proporciona
almacenamiento local para que la personalizacin sea ms fcil de programar y
tenga ms capacidades.
1. es la visualizacin de una secuencia de imgenes estticas a una
velocidad lo suficientemente rpida como para crear la ilusin de movimiento.
2. Tiene que dibujar un diagrama complejo como parte de una visualizacin de HTML5.
Una forma de hacerlo es usar el elemento .
3. Antes de HTML5, la manera ms comn de mantener informacin en el lado cliente
de una aplicacin web (es decir, en el equipo del usuario) era con .
4. permite usar JavaScript para pasar datos en forma de cadenas
detexto, pero no objetos, entre un cliente y un servidor.
5. es una tcnica de programacin en la cual una funcin se invoca
asmisma.
6. es la etiqueta que se usa generalmente para el anlisis
deinformacin compleja en partes constituyentes.
7. La API guarda una copia de sus archivos del sitio web a nivel local,
en un formulario estructurado.
8. Los valores en JavaScript tienen apariencias especiales diferentes, llamadas
, que a menudo son cadenas y nmeros.
9. es un subconjunto de JavaScript que permite intercambiar objetos
JavaScript con un servidor.
10. es una alternativa a las cookies.
Varias opciones
1. Cul de las siguientes opciones es la forma ms comn de codificar JavaScript
conun efecto retardado?
a. sleep()
b. delay()
c. wait()
d. setTimeout()
2. JavaScript puede mostrar diferentes tipos de grficos, desde archivos JPG y PNG a
formas como cuadros y crculos. Un mtodo que puede usar para mostrar grficos
con JavaScript es:
a. createElement
b. move_paragraph
c. JSON
d. display
3. Cules son las dos construcciones principales que se usan para dibujar un objeto
canvas?
a. getElementById()
b. getCanvasContext
c. getElementByCanvas()
d. canvas.getContext
4. Enviar y recibir datos en JavaScript requiere un servidor web dinmico y:
a. validacin del lado cliente
b. programacin del lado servidor
c. CSS
5. El elemento canvas se basa en qu conjunto de mtodos?
a. drawRect(), outlineRect(), eraseRect()
b. fillRect(), strokeRect(), clearRect()
c. beginPath(), fillPath(), endPath()
d. beginPath(), fillPath(), closePath()
6. Qu API JSON convierte un objeto JavaScript a datos en cadena para intercambio
con un servidor?
a. JSON.parsify
b. XMLHttpRequest
c. JSON.stringify
d. getObjectString
7. En qu se diferencia AppCache de la memoria cach del explorador?
a. AppCache guarda copias de las pginas web.
b. Primero tiene que visitar una pgina web para que pueda incluirse
enlamemoriacach.
c. AppCache guarda solo aquellos archivos que aparecen en el manifiesto
delamemoria cach.
d. AppCache y la memoria cach del explorador son la misma cosa.
8. Cul de las siguientes opciones no es un tipo de datos usado por JavaScript?
a. composicin
b. cadena
c. nmero
d. booleano
9. Cul de las siguientes opciones es una amenaza a la privacidad de los datos?
a. AppCache
b. LocalStorage
c. cookies
d. animacin
10. Qu API le permite trabajar en archivos sin conexin remotos?
a. XMLHttpRequest
b. AppCache
c. JSON.parse
d. JSON.stringify
242 | Leccin 9
Verdadero/Falso
VF 1.
JavaScript no permite recursin.
VF 2.
XMLHttpRequest se usa para crear animaciones.
VF 3.
Es posible escribir cdigo JavaScript de tal manera que se ejecute antes
dequese carguen todas las imgenes.
VF 4.
LocalStorage se puede usar para almacenar datos personales de un usuario.
VF 5.
Una tcnica comn en la animacin de JavaScript es usar setTimeout
recursivamente.
Escenario 9-1: Comprensin de conceptos bsicos de animacin
Roan trabaja como auxiliar administrativo en una organizacin sin fines de lucro que est
produciendo una enciclopedia sobre plantas silvestres. El relacionador de clientes pidi a
Roan si poda animar el grfico de la pgina de inicio para que parezca como si la semilla
se transformara en un manto totalmente crecido de hierba de pradera en 5 o 6 segundos.
Roan no sabe nada de animacin y le pide a usted un breve resumen.
Escenario 9-2: Creacin de una aplicacin de planta de almacn

Trudy es la administradora de un almacn. Desea una aplicacin web que haga un
esquema de la planta del interior de un almacn. Se supone que debe enviar una solicitud
al equipo de desarrollo pronto pero no conoce la tecnologa apropiada que incluir en su
descripcin. Trudy desea su opinin. Qu le dice?
Escenario 9-3: Mejora de la aplicacin de almacn
Trudy ha decidido expandir su solicitud al equipo de desarrollo y ahora desea incluir un
formulario de entrada que acepte cdigos de referencia de almacn (SKU). El servidor
de almacn tiene fotografas de la mercanca, indexada por SKU, as como informacin
sobre dnde en el almacn se encuentran actualmente los artculos de esa descripcin.
Trudy desea que el programa coloque una fotografa del artculo en el pasillo y el estante
donde se encuentra actualmente. Brevemente, cmo se puede hacer esto? Debe agregar
la descripcin a su solicitud.
Escenario 9-4: Revisin de documentos sin conexin

Una aplicacin en lnea existente recopila y evala los comentarios de los revisores respecto
de las diferentes partidas presupuestarias en un proceso altamente estructurado: cada
partida se vincula a detalles de la propuesta, al personal involucrado y as sucesivamente.
La solicitud es correcta. Sin embargo, los revisores se quejan de que solo se puede usar en
lnea; por ejemplo, no pueden rellenan las hojas de puntuacin en un vuelo en avin y sin
una conexin a Internet. Proponen descargar todos los materiales vinculados y llenar las
hojas de clculo de sus comentarios. Cul es su respuesta?
L E C C I N 10
Codificacin de
JavaScript para los
recursos de interfaz
tctil, dispositivo,
sistema operativo y ms

del examen MTA
Responder a la interfaz tctil Responder a la interfaz tctil. 4.5
Codificacin de API de HTML5 Codificar API HTML5 adicionales. 4.6
adicionales
Acceso a recursos de dispositivos Tener acceso a recursos de 4.7
y del sistema dispositivos y del sistema operativo.
TRMINOS CLAVE
acelermetro sondeo
objeto binario pantalla tctil resistiva
pantallas tctiles capacitivas almacenamiento de sesin
datos civiles evento tctil
independiente del dispositivo objeto tctil
API de archivo lista tctil
datos geodsicos Web Hypertext Application Technology Working
API de geolocalizacin Group (WHATWG)
evento de gesto API de trabajador web
almacenamiento local API de WebSocket
independiente de la plataforma
El equipo de desarrollo de Malted Milk Media le ha pedido ayuda para terminar el

proyecto de aplicacin mvil de Trusty Lawn Care. La aplicacin debe incluir una interfaz
tctil, y su responsabilidad es aprender a capturar gestos y responder a ellos. Tambin debe
conocer bien la geolocalizacin y las capacidades de hardware como GPS y acelermetro.
243
244 | Leccin 10
Responder a la interfaz tctil
Un dispositivo tctil interpreta los movimientos de los dedos, denominados gestos, en

CONCLUSIN una pantalla tctil, y los convierte en instrucciones para una aplicacin. Muchos gestos
tienen movimientos del mouse equivalentes.
Las pantallas tctiles se han convertido en la forma ms extendida de interfaz en los
smartphones. Tambin hay un nmero considerable de pantallas tctiles de sobremesa.
Un dispositivo tctil tiene una pantalla diseada especialmente que percibe datos tctiles
(llamados puntos), que empiezan en forma de presin o de seales elctricas. Existen
dos tipos principales de pantallas tctiles:
Una pantalla tctil resistiva se compone de varias capas, la superior de las cuales
se dobla cuando se presiona y oprime la que est debajo. Los sensores detectan
la presin, que es como el sistema sabe qu parte de la pantalla se ha presionado.
Las pantallas tctiles usadas en hospitales y restaurantes a menudo son resistivas.
Las pantallas tctiles capacitivas usan electrodos para percibir los objetos que
tocan la pantalla. Como el objeto debe tener propiedades conductoras, un dedo
funciona pero algo parecido a un lpiz no. La mayora de los smartphones y
Cmo responden las monitores de equipo con pantalla tctil son capacitivos.
pantallas tctiles a la El procesador de una pantalla tctil recopila los datos tctiles y los interpreta como gestos.
entrada del usuario? Dependiendo del hardware que se use, los datos se envan del procesador directamente
4.5 a la aplicacin de usuario, o del procesador al sistema operativo y a la aplicacin.
A continuacin, la aplicacin usa los datos para realizar tareas.
LISTO PARA CERTIFICACIN Un gesto es la tcnica de usar uno o varios dedos, o un dispositivo sealador como
Qu gestos proporcionan un lpiz, sobre un control u objeto de la pantalla para proporcionar la entrada para
entrada en las pantallas una aplicacin tctil. Pulsar selecciona un objeto o presiona un botn, deslizar un
tctiles? dedo desplaza una serie de fotos o una lista de contactos en la pantalla, y una accin
4.5 pinchopen accin aumenta el tamao de la pantalla (acercar). Microsoft define los
gestos como se describe en la tabla 10-1.
Tabla 10-1
Informacin general Gesto Equivalente del mouse Descripcin
sobre gestos tctiles
Pulsar Hacer clic con el botn Pulse con un dedo en la pantalla
primario
Pulsar dos veces Hacer doble clic con Pulse rpidamente con un dedo dos veces
el botn primario en la pantalla
Pulsar con N/C Pulse simultneamente dos dedos en la pantalla
dos dedos
Mantener Hacer clic con el botn Mantenga presionado un dedo mientras pulsa
pulsado secundario con el otro
Mantener Hacer clic con el botn Mantenga presionado un dedo en la pantalla
presionado secundario y luego suelte
Seleccionar/ Arrastrar el mouse Arrastre un dedo a la izquierda o la derecha
arrastrar (seleccionar)
Movimiento Desplazamiento Mantenga presionado un dedo en la pantalla
panormico y luego arrastre el dedo con inercia
Desplazarse Mover atrs o adelante Presione un dedo en la pantalla, muvalo en
Panormica arriba o abajo cualquier direccin y luego levntelo para desplazarse
Girar N/C Mueva dos dedos sobre un objeto en la pantalla
con un movimiento circular
Zoom CTRL + rueda del mouse Pellizque un objeto hacia dentro o hacia fuera
hacia delante o atrs
Codificacin de JavaScript para los recursos de interfaz tctil, dispositivo, sistema operativo y ms | 245
El mtodo addEventListener se usa para asociar un controlador de eventos a un elemento

HTML, que puede ser div, link o cualquier otra cosa. El uso de addEventListener permite
realizar una accin til cuando se desencadena un evento. La sintaxis general de
addEventListener es:
object.addEventListener(event, eventListenerFunction);
Por ejemplo, en el siguiente cdigo de un programa de dibujo de canvas, se llama a la

funcin de inicio automticamente cuando se carga la pgina web. El programa escucha
el toque de un usuario en la pantalla (el evento touchstart), el movimiento de un dedo
(touchmove), etc.:
function startup() {
var el = document.getElementsByTagName(cdraw)[0];
el.addEventListener(touchstart, handleStart, false);
el.addEventListener(touchmove, handleMove, false);
el.addEventListener(touchend, handleEnd, false);
el.addEventListener(touchcancel, handleCancel, false);
}
Fijmonos ahora en la funcin handleStart. Se declara en el siguiente cdigo, de la misma

forma que otras funciones se declaran en JavaScript, salvo que la funcin de escucha debe
tener un argumento que represente el evento. Se puede usar cualquier identificador como
argumento del evento, pero los desarrolladores suelen usar la letra e o un identificador
que empiece con la letra e.
function handleStart(evt) {
evt.preventDefault();
var el = document.getElementsByTagName(cdraw)[0];
var context = el.getContext(2d);
var touches = evt.changedTouches;
for (var i=0; i<touches.length; i++) {
ongoingTouches.push(touches[i]);
var color = colorForTouch(touches[i]);
context.fillStyle = color;
context.fillRect(touches[i].pageX,
touches[i].pageY, 4, 4);
}
}
El mtodo evt.preventDefault detiene el explorador, que deja de procesar el evento tctil;

en este caso, se impide el desplazamiento. Despus de obtener el contexto (e1.getContext),
la lista de puntos tctiles modificados se extrae de la propiedad changedTouches del evento.
A continuacin, el programa se ocupa de los objetos tctiles de la lista de toques. PageX
y pageY proporcionan las coordenadas X e Y del dedo.
Se activan eventos de gesto para los gestos con varios dedos. Los eventos de gesto
principales son:
gesturestart: cada gesto de dos dedos nuevo activa un evento gesturestart.
gesturechange: cuando ambos dedos se mueven por la pantalla, ocurre un evento
gesturechange.
gestureend: levantar los dos dedos de la pantalla genera un evento gestureend.
Los eventos de gesto son tipos de evento tctiles, por lo que reciben objetos de evento que
tienen propiedades tctiles. Adems, los eventos de gesto pueden tener estas propiedades:
scale: indica la cantidad de acercamiento con dos dedos que tuvo lugar. El valor
decimal de la propiedad comienza en 1.0. Es menor que 1.0 cuando los dedos se
mueven uno hacia el otro y es mayor que 1.0 cuando los dedos se alejan uno del otro.
246 | Leccin 10
Una vez que conoce los distintos tipos de gestos tctiles, veamos cmo se capturan y usan
en las aplicaciones.
Capturar gestos y responder a ellos
Los eventos tctiles principales son touchstart, touchmove, touchend y touchcancel.

Los eventos de gesto principales son gesturestart, gesturechange y gestureend.
La accin que una aplicacin realiza en respuesta a un gesto se denomina un evento tctil.
Puede usar JavaScript para crear eventos tctiles en aplicaciones que los admitan. Los
desarrolladores pueden elegir entre un amplio conjunto de interfaces de programacin
de aplicaciones (API) de entrada que funcionan con los datos de pantallas tctiles.
Los eventos tctiles principales de JavaScript son:
touchstart: cada nuevo toque del dedo genera un evento touchstart event.
touchmove: cuando se mueve un dedo por la superficie de la pantalla, se produce
un evento touchmove, que realiza el seguimiento del movimiento del dedo.
touchend: levantar el dedo de la pantalla genera un evento touchend.
touchcancer: el evento touchcancel se acciona cuando el dispositivo inicia otra
aplicacin.
El evento touchcancel ayuda al explorador a hacer un seguimiento de objetos tctiles activos

en la touchlist. Tambin puede restablecer las variables usadas durante los eventos touchstart
TOME NOTA
* y touchmove. Sin embargo, los desarrolladores rara vez usan el evento touchcancel, de manera
que no lo ver muy a menudo en los scripts.
En JavaScript, el objeto tctil detecta la entrada de dispositivos tctiles. Se hace referencia

Cules son los cuatro
a los objetos tctiles en la touchlist, que incluye todos los puntos de contacto con una
eventos tctiles principales pantalla tctil. Un solo toque tiene una entrada en la touchlist, mientras que un gesto de
de JavaScript? tres dedos tendra un total de tres entradas. Los objetos tctiles son de solo lectura y tienen
4.5 las siguientes propiedades:
identifier: identificador nico para el toque
target: elemento HTML al que afecta el toque
clientx: posicin horizontal, con respecto a la ventana del explorador
clienty: posicin vertical, con respecto a la ventana del explorador
pagex: posicin horizontal, en relacin con el documento HTML
pagey: posicin vertical, en relacin con el documento HTML
screenx: posicin horizontal, con respecto a la pantalla
screeny: posicin vertical, con respecto a la pantalla
Cada evento tctil contiene tres listas de toques distintas:
touches: lista de todos los puntos tctiles actualmente en contacto con la pantalla
targetTouches: lista de puntos tctiles actualmente en contacto con la pantalla y cuyo
evento touchstart ocurri dentro del mismo nodo (dentro del mismo elemento objetivo
que el actual elemento objetivo)
changedTouches: lista de puntos tctiles que hicieron que se activara el evento actual;
por ejemplo, en un evento touchend, es el dedo que se retir.
rotation: indica la cantidad de giro de dos dedos que tuvo lugar. El valor de giro
se expresa en grados. Los valores positivos indican giro en sentido horario y los
negativos en sentido antihorario.
Los eventos de gesto se pueden combinar con efectos visuales de CSS para habilitar la
escala y el giro. Por ejemplo, el siguiente cdigo implementa el controlador de eventos
gesturechange con escalado y giro:
document.addEventListener('gesturechange',
function(event) {
event.preventDefault();
console.log(Scale: + event.scale + ,
Rotation: + event.rotation);
}, false);
En este ejemplo se crea una funcin de escucha implcita. El controlador de eventos

pasa el objeto de evento como argumento implcito denominado evento para obtener
informacin especfica sobre el evento.
Las pantallas que se pueden mostrar en horizontal o en vertical desencadenan un evento
orientationchanged cuando el usuario cambia la orientacin de la pantalla. orientationchanged
se puede usar para probar el giro del dispositivo. Cada evento tiene un valor numrico
que representa los valores de escala y giro.
DETECTAR LA CAPACIDAD DE PANTALLA TCTIL

PREPRESE. Para comprobar si el dispositivo de un usuario es tctil, siga estos pasos:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un archivo
denominado L10-touch.html con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>Detectar pantalla tctil</title>
<meta charset=utf-8 />
<style type=text/css>
#canvas{background-color: dodgerblue;}
</style>
<script type=text/javascript>
document.addEventListener(DOMContentLoaded,
init, false);
function init() {
var canvas =
document.getElementById(canvas);
if (ontouchstart in
document.documentElement) {
canvas.addEventListener(touchstart,
detect, false);
}
248 | Leccin 10
else {
canvas.addEventListener(mousedown,
detect, false);
}
}
function detect() {
if (ontouchstart in
document.documentElement) {
alert(Dispositivo con pantalla tctil
detectado.);
}
else {
alert(Dispositivo con pantalla tctil no
detectado.);
}
}
</script>
</head>
<body>
<canvas id=canvas width=100
height=100></canvas>
<br />
<p>Haga clic en el cuadro para iniciar la deteccin de pantalla tctil.</p>
</body>
</html>
Este cdigo dibuja un cuadro de canvas en la pantalla, seguido por una lnea de texto
que indica Haga clic en el cuadro para iniciar la deteccin de pantalla tctil. La funcin inicial
asigna el elemento canvas y, a continuacin, el elemento de escucha de eventos
espera que se produzca un evento tctil o un clic del mouse. Si el usuario tiene una
pantalla tctil y toca el cuadro, el programa muestra el mensaje Dispositivo con pantalla
tctil detectado. Si se detecta un clic del mouse, el mensaje indica Dispositivo con pantalla
tctil no detectado.
2. Abra L10-touch.html en un explorador web. La pantalla debe ser parecida a la
Figura 10-1.
Figura 10-1
La interfaz de programa de
deteccin de pantalla tctil
3. Haga clic en el cuadro azul. Si trabaja en un equipo con un monitor normal, aparece
el cuadro de alerta que se muestra en la Figura 10-2. De lo contrario, se muestra un
cuadro de alerta con el texto Dispositivo con pantalla tctil detectado.
Figura 10-2
El cuadro de alerta indica
que no se detecta una
pantalla tctil
4. Haga clic en Aceptar para cerrar el cuadro de alerta.

a realizar el siguiente ejercicio durante esta sesin.
MS INFORMACIN
La especificacin de la versin 2 los eventos tctiles del W3C se encuentra en
http://www.w3.org/TR/touch-events/.
Codificacin de API de HTML5 adicionales

El grupo Web Hypertext Application Technology Working Group (WHATWG)
mantiene una especificacin HTML activa que incluye API que originalmente
CONCLUSIN no eran parte de la especificacin HTML5. Estos incluyen geolocalizacin,
Web Workers, websockets y API de archivo.
Como ha visto a lo largo de este libro, hay muchas API de HTML5 disponibles.
Proporcionan funcionalidad nueva y mejorada, a la vez que facilitan el desarrollo de
documentos HTML. Lo que no se ha sealado de forma explcita es que, en realidad,
hay dos versiones de la especificacin de HTML5: una publicada por el W3C y otra
por el WHATWG.
El grupo Web Hypertext Application Technology Working Group (WHATWG) fue
LISTO PARA CERTIFICACIN creado por Apple, la Fundacin Mozilla y Opera Software para definir y documentar la
Qu es WHATWG?
especificacin HTML5. El sitio web del WHATWG, en http://developers.whatwg.org/,
4.6 es un buen recurso para obtener informacin sobre los nuevos elementos de HTML5
y cmo usarlos.
La especificacin HTML que alberga el WHATWG contiene API adicionales que no
se describan en la especificacin original de HTML5 del W3C. Las API aplicables
que se describen en las secciones siguientes son las de geolocalizacin, trabajadores
web, websockets y de archivo.
Codificacin para capturar la geolocalizacin
La API de geolocalizacin obtiene las coordenadas geogrficas de un usuario (latitud

y longitud). La API tambin puede mostrar un mapa con un marcador que indica la
ubicacin del usuario segn las coordenadas.
250 | Leccin 10
La API de geolocalizacin define una interfaz que proporciona la ubicacin de un

dispositivo, generalmente mediante coordenadas de latitud y longitud. La API expone la
latitud y longitud a JavaScript en una pgina web mediante el objeto de geolocalizacin.
Las dos funciones de geolocalizacin principales son:
Qu funcin de JavaScript getCurrentPosition: obtiene la posicin geogrfica actual del dispositivo mediante
obtiene la posicin el mtodo getCurrentPosition.
geogrfica actual watchPosition: observa el cambio de posicin del dispositivo en el tiempo con el
de un dispositivo? mtodo watchPosition y genera un evento si se produce un cambio. Si se llama a
4.6 clearWatch se detiene la observacin.
El siguiente es un ejemplo sencillo de una llamada a getCurrentPosition. La funcin

de devolucin de llamada showmap recibe las coordenadas de latitud y longitud:
navigator.geolocation.getCurrentPosition(showmap);
function showmap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Cdigo para mostrar un mapa
}
Puede presentar datos de ubicacin para los usuarios de dos maneras: geodsicos y civiles.
Los datos geodsicos proporcionan datos de ubicacin sin procesar, como longitud y
latitud, o metros. Los datos civiles son datos de ubicacin ms fciles de entender, por
ejemplo un mapa o una direccin como 637 Park Street.
La API de geolocalizacin devuelve datos geodsicos a partir de las funciones, que puede
presentar en su forma sin procesar o combinar con un servicio de mapas en lnea como
Bing Maps para mostrar un mapa con un puntero a la ubicacin del usuario.
Tenga en cuenta que la privacidad es una preocupacin importante para muchos usuarios.
Por lo tanto, la API de geolocalizacin permite que los usuarios oculten su localizacin.
Muchas implementaciones solicitan al usuario permiso para devolver sus coordenadas
de ubicacin.
La geolocalizacin est pensada, sobre todo, para smartphones y otros dispositivos
mviles, y no funciona con eficacia para equipos de sobremesa. Si un dispositivo no
dispone de medios para localizarse a s mismo, la API genera un error de posicin no
disponible.
CREAR UNA APLICACIN DE GEOLOCALIZACIN

PREPRESE. Para crear una aplicacin de geolocalizacin que muestre la latitud
y longitud actuales del usuario, siga estos pasos:
denominado L10-geolocation.html con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>Ejemplo de geolocalizacin</title>
<script>
var messageDiv =
document.getElementById('message');
function initLocation() {
var geolocation = navigator.geolocation;
if (geolocation) {
try {
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback
);
} catch (err) {
messageDiv.innerHTML = 'Error';
}
} else {
messageDiv.innerHTML = 'El explorador
no es compatible con geolocalizacin.';
}
function successCallback(location) {
message.innerHTML = <p>Latitude: +
location.coords.latitude + </p>;
message.innerHTML += <p>Longitude: +
location.coords.longitude + </p>;
}
function errorCallback() {
messageDiv.innerHTML = 'Error
al buscar su posicin';
}
</script>
</head>
<body onload=initLocation()>
<div id=message>Buscando ubicacin</div>
</body>
</html>
Este cdigo es una buena forma de probar la API de geolocalizacin de HTML5.

El cdigo funciona as: navigator.geolocation.getCurrentPosition solicita una posicin,
que sondea la funcin GPS del dispositivo de hardware o el router de un equipo
para obtener informacin de ubicacin. Si se obtiene respuesta, la funcin
successCallback muestra las coordenadas de latitud y longitud en la pantalla.
Si la informacin no est disponible, aparece el mensaje Error al buscar su posicin.
2. Abra L10-geolocation.html en un explorador web. Si el explorador admite la
geolocalizacin, se le debe pedir permiso para que el explorador busque su ubicacin
fsica, como se muestra en la Figura 10-3. Haga clic en Permitir una vez o un comando
parecido, dependiendo del explorador que use.
252 | Leccin 10
Figura 10-3
El explorador solicitando
permiso para detectar
su ubicacin fsica
3. Se muestran las coordenadas, de forma parecida a la que ve en la Figura 10-4.
Figura 10-4
La pantalla de coordenadas
usando la aplicacin
de geolocalizacin

MS INFORMACIN
La pgina web de geolocalizacin de Microsoft, en http://bit.ly/IZ7Lut, contiene vnculos a la creacin
de una pgina web compatible con la ubicacin y a tutoriales de Internet Explorer. Tambin puede
consultar el artculo con sugerencias para geolocalizacin en HTML5 de MSDN Magazine,
en http://msdn.microsoft.com/en-us/magazine/hh563893.aspx.
Entender los Web Workers
Los Web Workers son scripts que se ejecutan en segundo plano. Realizan clculos y
otras acciones que hacen que la interfaz de usuario tenga mayor capacidad de respuesta.
LISTO PARA CERTIFICACIN Los Web Workers son API que permiten que los scripts se ejecuten en segundo plano
Qu tipos de aplicaciones como procesos paralelos. Estos procesos en segundo plano pueden conectarse a varias
usan Web Workers? pginas web, buscar en tiempo real datos como actualizaciones de existencias, hacer
4.6 solicitudes de red u obtener acceso a almacenamiento local mientras el documento
HTML principal responde a la entrada del usuario como pulsar, desplazarse y escribir. Los
Web Workers contribuyen a que la interfaz de usuario tenga mayor capacidad de respuesta
para los usuarios.
Los objetos Web Worker se ejecutan en procesos aislados, no actan directamente en el
documento HTML principal ni el DOM. Por ello, en los script no se usan documentos
ni getElementById. (Puede usar setTimeout, setInterval y XMLHttpRequest.) En cambio, Web
Workers pasan informacin a travs de mensajes, al ejecutar cdigo de un archivo
JavaScript independiente del documento HTML principal.
Para usar un Web Worker, primero se debe crear un objeto Worker en el documento
HTML principal, como se indica a continuacin:
var worker = new Worker('worker.js');
Cuando el explorador interpreta esta lnea, crea otro subproceso de trabajo y, a continuacin,
lo inicia con el siguiente mtodo:
worker.postMessage();
El mtodo postMessage() acepta una cadena o un objeto JSON como argumento. Todos
los exploradores admiten que se pasen cadenas de mensaje, pero solo las versiones ms
recientes de los exploradores principales admiten que se pasen objetos JSON.
Como ejemplo sencillo de mensaje que se pasa con un Web Worker, el script siguiente
pertenece al documento HTML principal:
var worker = new Worker(doWork.js);

// Atencin a los mensajes del objeto Worker
worker.onmessage = function(e){
// Mensaje del objeto Worker
e.data
};
worker.postMessage(start);
El siguiente cdigo podra aparecer en el archivo doWork.js:
onmessage = function(e){
if ( e.data === start ) {
// Realizar una accin o un clculo
done()
}
};
function done(){
// Enviar resultado al documento principal
postMessage(Hola, ya termin);
}
En lugar de usar el controlador de eventos onmessage, se podra usar addEventListener()

en el documento HTML principal, as:
worker.addEventListener('mensaje', function(e) {
254 | Leccin 10
CREAR Y EJECUTAR UN WEB WORKER

PREPRESE. Para crear y ejecutar un Web Worker, siga estos pasos:
denominado L10-worker.html con el siguiente contenido:
<!doctype html>
<html lang=en>
<head>
<script>
var worker = new Worker('doWork.js');
// Enviar un mensaje para iniciar el objeto Worker y pasarle una

variable
var info = 'Web Workers';
worker.postMessage(info);
// Recibir un mensaje del objeto Worker

worker.onmessage = function (event) {
// Hacer algo
alert(event.data);
};
</script>
<title>Ejemplo de Web Workers</title>
</head>
<body>
</body>
</html>
2. Cree un archivo JavaScript denominado doWork.js en la misma carpeta que worker.

html, con el siguiente contenido:
onmessage = function(event) {
var info = event.data;
var result = 'Hola ' + info + ' en cualquier parte';
postMessage(result);
};
3. Abra L10-worker.html en un explorador web. Se debe mostrar el cuadro de alerta,

Figura 10-5
El resultado de ejecutar
un Web Worker
4. Haga clic en Aceptar para aceptar la configuracin y cerrar el cuadro de alerta.

5. Cierre los archivos y el explorador web, pero deje la herramienta de edicin abierta
Comprender WebSockets
La API de WebSocket permite abrir una conexin persistente entre un cliente y

un servidor web, e intercambiar texto y archivos binarios. WebSockets reduce
la cantidad de sobrecarga necesaria para las comunicaciones en tiempo real.
WebSocket es una API que ofrece comunicacin dplex completa, es decir, comunicacin
de dos vas simultnea, a travs de un socket nico por Internet. Los desarrolladores usan
websockets principalmente para aplicaciones web en tiempo real como chat, juegos en
lnea de varios jugadores y cotizaciones de bolsa.
Para entender la utilidad de websockets, se necesita un poco de informacin sobre sus
precedentes. Originalmente, cuando un usuario especificaba una direccin URL en un
explorador web o haca clic en un vnculo a una pgina web, el explorador se pona en
contacto con el servidor web de la pgina. Cada vez que el usuario quera actualizar algo
en la pgina, el explorador volva a recibir otra pgina completa desde el servidor web.
Algo as se puede seguir viendo al hacer clic por una galera de fotos. Cada vez que hace
clic en otra foto, la pgina se actualiza y, a veces, tiene que ir atrs para volver a la galera.
Tecnologas como AJAX hicieron posible que solo haya que actualizar una parte de la
pgina web. Comet y tecnologas push similares introdujeron el sondeo, en el que un
explorador se pone en contacto con un servidor web peridicamente (algunas veces de
forma constante) para ver si hay nueva informacin disponible que presentar al usuario.
El problema con el sondeo es que se hacen muchas solicitudes al servidor para comprobar
si hay datos nuevos, algo que puede dar lugar a problemas de rendimiento.
La tecnologa WebSocket crea una conexin persistente entre un cliente y un servidor web,
de forma que se pueden enviar datos el uno al otro en cualquier momento. La conexin
persistente reduce considerablemente la cantidad de sobrecarga necesaria para el canal
de comunicacin.
Cmo reducen los
websockets los problemas Para establecer una conexin WebSocket, el cliente y el servidor cambian del protocolo
de rendimiento asociados HTTP al protocolo WebSocket (WS) durante el protocolo de enlace inicial. Una vez que
a las aplicaciones en se establece la conexin, el cliente y el servidor pueden intercambiar texto y archivos
tiempo real? binarios en modo dplex completo.
4.6
Existen tres eventos principales asociados a las comunicaciones de WebSocket:
opopen: cuando se abre un socket
opmessage: cuando se ha recibido un mensaje del servidor web
onclose: cuando se cierra un socket
Va a ver cada uno de estos eventos en los fragmentos de cdigo de esta seccin.
Primero, echemos un vistazo al JavaScript que abre una conexin WebSocket:
var host = 'ws://example.com';
Observe el uso de ws en lugar de http en la direccin URL. Tambin se puede usar
wss para conexiones de WebSocket seguras, de la misma forma que se usa https para
conexiones HTTP seguras.
Despus de iniciar una conexin web, debe probarla para asegurarse de que estableci
correctamente. Puede probarla con el controlador de eventos onopen para saber cundo se abre
la conexin. En el ejemplo siguiente se abre un cuadro de alerta cuando se abre el socket:
socket.onopen = function(){
alert(Socket open);
}
256 | Leccin 10
Este es otro ejemplo de onopen en el que se muestra un mensaje:

socket.onopen = function (openEvent) {
document.getElementById(serverStatus).innerHTML =
'Socket open';
};
Ahora, ya se pueden enviar y recibir datos. Para enviar mensajes de texto al servidor, use
el mtodosend ('message') en el objeto de conexin. El cdigo para enviar un mensaje de
texto es:
socket.send('mensaje');
Una forma sencilla de enviar datos binarios es usar un objeto binario grande (Blob). Un
Blob no es ms que un tipo de datos que puede almacenar datos binarios, como imgenes
o archivos multimedia. Para enviar un archivo como un Blob, puede usar este cdigo:
var file =
document.querySelector('input[type=file]').files[0];
socket.send(file);
Despus, para recibir mensajes del servidor, puede usar la devolucin de llamada
onmessage:
socket.onmessage = function(msg){
alert(msg); //Received!
}
Por ltimo, para cerrar una conexin, use el controlador de eventos onclose, as:
socket.onclose = function() {
alert(Connection closed.);
};
La especificacin de la API de WebSocket todava se est desarrollando en el momento
de escribir este libro y los websockets no son compatibles con todos los exploradores
web. Para tener una idea de cmo se usa WebSockets, lleve a cabo el siguiente ejercicio.
CREAR UN WEBSOCKET PARA PROBAR LA COMPATIBILIDAD DEL EXPLORADOR

PREPRESE. Para crear un websocket que compruebe si su explorador es compatible
con websockets, siga estos pasos:
denominado L10-WebSocket.html con el siguiente contenido:
<!doctype html>
<html>
<head>
function WebSocketTest() {
if (WebSocket in window) {
Alert (Su explorador admite
websockets.);
// Abra un websocket
var socket = new
WebSocket(ws://localhost:9998/echo);
socket.onopen = function () {
// Conectado, enviar datos
socket.send(Connected);
alert(Conectado.);
};
socket.onmessage = function (e) {
var received_msg = e.data;
alert(Mensaje recibido.);
};
socket.onclose = function () {
// Websocket cerrado
alert(Connection closed.);
};
}
else {
// El explorador no admite websockets
alert(Su explorador no admite
websockets.);
}
}
</script>
</head>
<body>
<div>
<a href=javascript:WebSocketTest()>Haga clic para ejecutar la
demostracin de WebSocket</a>
</div>
</body>
</html>
2. Abra L10-WebSocket.html en un explorador web.

3. Siga las instrucciones que indica el programa. Si el explorador admite websockets,
el primer cuadro de alerta que aparece se muestra en la Figura 10-6.
Figura 10-6
Un cuadro de alerta confirma
que el explorador admite
websockets
4. Haga clic en Aceptar para aceptar la configuracin y cerrar el cuadro.

5. Debe aparecer un segundo cuadro de alerta, indicando que la conexin est cerrada,
como se muestra en la Figura 10-7. Haga clic en Aceptar.
258 | Leccin 10
Figura 10-7
Un cuadro de alerta confirma
que la conexin est cerrada

MS INFORMACIN
Para obtener ms informacin sobre websockets, visite la pgina web de Microsoft sobre la API
de WebSocket, en http://bit.ly/JXDAYN.
Usar la API de archivo para cargas de archivos
Puede usar la API de archivo para cargar en un servidor remoto archivos de uno en
uno o en grupo desde un disco local o el almacenamiento local de un dispositivo.
Tambin puede visualizar los archivos de imagen cargados en una aplicacin web.
La API de archivo permite que un explorador o una aplicacin cargue archivos de

almacenamiento local en un servidor remoto sin ningn complemento. Por ejemplo,
usando la API de archivo, se puede hacer que se muestre un cuadro de dilogo y permitir
que el usuario seleccione un archivo de imagen. Cuando el usuario hace clic en Aceptar,
se muestra una miniatura del archivo de imagen en la aplicacin web. Los desarrolladores
usan la API de archivo en juegos y aplicaciones en las que se usan archivos multimedia,
en clientes de correo sin conexin, en editores de foto y en reproductores de vdeo.
La API de archivo usa varias interfaces para tener acceso a archivos desde el almacenamiento
local. Algunas de las interfaces son:
File: incluye atributos informativos de solo lectura sobre un archivo concreto, como su
nombre y los tipos de medios, y lee el archivo como una URL
FileList: secuencia tipo matriz de objetos File; incluye arrastrar una carpeta de archivos
desde almacenamiento local
Blob: proporciona acceso a datos binarios sin procesar
FileReader:proporciona mtodos para leer y mostrar un archivo
LISTO PARA CERTIFICACIN Una manera fcil de cargar un archivo es usar el elemento type=file. Si se usa el elemento
Qu elemento se usa type=file se obtiene la lista de objetos File seleccionados en forma de FileList. El cdigo
para cargar un archivo ser ms o menos as:
con la API de archivo?
<input type=file id=input
4.6
onchange=handleFiles(this.files)>
Para permitir que el usuario cargue varios archivos a la vez, agregue multiple antes
de onchange, como se indica a continuacin:
<input type=file id=input multiple onchange=handleFiles(this.files)>
COMPROBAR SI LOS EXPLORADORES SON COMPATIBLES CON LA API

DE ARCHIVO
PREPRESE. Para comprobar si los exploradores ms habituales son compatibles con
la API de archivo, siga estos pasos:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un archivo HTML
con el siguiente contenido:
<!doctype html>
<html>
<head>
<title>Comprobar la compatibilidad del explorador con la API de archivo</title>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert('Perfecto. Este explorador es compatible con la API de archivo.');
} else {
Alert ('Este explorador no es totalmente compatible con la API de archivo.');
}
</script>
</head>
<body>
</body>
</html>
La declaracin if comprueba la compatibilidad con las API File, FileReader, FileList y
Blob. Si las API son compatibles, aparece el mensaje que lo indica. En caso contrario,
aparece el segundo mensaje.
2. Guarde el archivo como L10-FileAPI-checkBrowser.html y bralo en cada uno de los
exploradores web ms populares. La pantalla que se muestra en la Figura 10-8 aparece
cuando las API de archivo no son compatibles.
Figura 10-8
Mensaje que indica que no
se admiten API de archivo
3. Cierre el archivo y los exploradores web, pero deje la herramienta de edicin abierta si
va a realizar el siguiente ejercicio durante esta sesin.
260 | Leccin 10
Acceso a recursos de dispositivos y del sistema
El entorno de Windows en tiempo de ejecucin permite a los desarrolladores tener

CONCLUSIN acceso a recursos en memoria y en hardware mediante API.
Como vimos en la leccin 1, Windows en tiempo de ejecucin (WinRT) es el entorno del

LISTO PARA CERTIFICACIN sistema operativo que se ocupa del acceso a dispositivos, multimedia, redes, almacenamiento
Qu entorno de sistema local y remoto, y otros elementos. Es el entorno en el que los desarrolladores prueban las
operativo se ocupa del aplicaciones y los usuarios las ejecutan. Los desarrolladores pueden usar API y el entorno de
acceso a dispositivos, ejecucin para solicitar acceso a dispositivos de usuario y a memoria desde una aplicacin.
almacenamiento local
y otras cosas? En las siguientes secciones se describe el acceso a recursos en memoria, y el acceso
4.7 a dispositivos y sistemas operativos, funciones de Windows en tiempo de ejecucin.
MS INFORMACIN
Puede consultar la lista de las API de Windows en tiempo de ejecucin y de la Biblioteca de Windows
para JavaScript en http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx.
Obtener acceso a recursos en memoria
La API de almacenamiento web consta de almacenamiento local (para datos persistentes)

y almacenamiento de sesin (para datos temporales).
La API de almacenamiento web proporciona un mtodo del lado cliente para guardar
informacin de sesin a nivel local dentro de la memoria del explorador o el dispositivo.
El mtodo localStorage permite que los usuarios guarden grandes cantidades de datos de
sesin en sesin (datos persistentes), mientras que el mtodo sessionStorage guarda los
datos solo para una sesin (hasta que se cierra el explorador). Los datos se almacenan
en pares clave/valor para ambos tipos de almacenamiento web.
Almacenamiento local son datos persistentes y tiles para cosas como listas de tareas
pendientes en lnea, listas de contactos, calendarios y datos de carritos de compra
guardados. Desea que esta informacin est disponible para el usuario despus de que se
cierra el explorador y el usuario lo reabre en algn momento. La informacin se mantiene
en memoria persistente de aplicaciones web y dispositivos mviles. Almacenamiento de
sesin son datos temporales que se guardan solo durante una sesin, hasta que se cierra
el navegador. Todos los datos de una sesin se guardan en almacenamiento de sesin y
luego se borran cuando se cierra la ventana o pestaa del explorador. Un ejemplo del uso
adecuado del almacenamiento de sesin es un programa de bsqueda de cdigo postal.
En JavaScript, los objetos localStorage y sessionStorage se usan con los siguientes mtodos
para administrar pares clave/valor:
setItem(key,value): agrega un par clave/valor al objeto de almacenamiento
getItem(key): recupera el valor de una clave concreta
removeItem(key): quita un par clave/valor del objeto de almacenamiento
clear():quita todos los pares clave/valor del objeto de almacenamiento
El cdigo genrico para agregar un par clave/valor a un objeto sessionStorage es:
sessionStorage.setItem('key', 'value');
var myVar = sessionStorage.getItem('key');
El cdigo genrico para almacenamiento local es:

Qu mtodo de localStorage.setItem('key', 'value');
JavaScript se usa para var myVar = localStorage.getItem('key');
agregar un par clave/valor
a un objeto sessionStorage Los mtodos getItem() y removeItem() usan la misma sintaxis. Si se usa sessionStorage.clear(),
o localStorage? se elimina todo lo que haya en la lista.
4.7
USAR EL OBJETO LOCALSTORAGE

PREPRESE. Para guardar un valor en almacenamiento local, siga estos pasos:
denominado L10-localStorage.html con el siguiente contenido:
<!doctype>
<html>
<head>
<title>Ejemplo de localStorage</title>
function load() {
var value = localStorage.getItem(myKey);
if (!value) {
alert(No se encuentra el elemento, se va a agregar a
localStorage);
localStorage.setItem(myKey, myValue);
}
else {
alert(value + found!);
}
}
</script>
</head>
<body onload=load()>
</body>
</html>
2. Open L10-localStorage.html in a Web browser. Puesto que se acaba de pasar el valor

myValue y la sesin sigue vigente, se debe recibir un cuadro de alerta parecido al de
la Figura 10-9. Haga clic en Aceptar para aceptar la configuracin y cerrar el cuadro
de alerta.
Figura 10-9
El primer cuadro de alerta
indica que el valor se va
a agregar a localStorage
262 | Leccin 10
3. Cierre el explorador web y vuelva a abrir L10-localStorage.html. Ahora se debe

ver el cuadro de alerta que se muestra en la Figura 10-10. El valor se guard en
el almacenamiento local y persisti entre las sesiones del explorador.
Figura 10-10
El segundo cuadro de alerta
confirma que el valor se
guard
4. Cierre el explorador web.

5. En el documento HTML, cambie todas las instancias de localStorage a sessionStorage.
6. Guarde el archivo como L10-sessionStorage.html y bralo en un explorador web.
Fjese en lo que se muestra en el cuadro de alerta.
7. Cierre el explorador y vuelva a abrir L10-sessionStorage.html.
8. El mensaje del cuadro de alerta debe ser el mismo, que no se encuentra el valor. El
motivo es que se cerr el explorador web, con lo que se borr el valor de la memoria
de la sesin.
9. Presione Ctrl+R o haga clic en el botn Actualizar del explorador. Aparece un cuadro
de alerta, confirmando que se encontr el valor.
MS INFORMACIN
La pgina web sobre almacenamiento web HTML5 de Microsoft, en http://bit.ly/JeXlJU, proporciona
las API para el almacenamiento persistente de datos de pares clave/valor.
Acceso a capacidades de hardware
Las aplicaciones independiente de la plataforma se ejecutan en diversos sistemas

operativos mviles y de escritorio. Las aplicaciones independientes del dispositivo
se pueden ejecutar en diversos dispositivos. Puede usar JavaScript para tener acceso
a las API de Windows en tiempo de ejecucin para dispositivos de hardware.
HTML5 se considera independiente de la plataforma. As, puede usar la familia de

tecnologas de HTML5 puede crear pginas web y aplicaciones que se ejecuten en los
sistemas operativos de distintos dispositivos mviles y de escritorio, como Microsoft
Windows, Internet Explorer y Windows Phone. Tambin se pueden ejecutar en Mac OS X,
iOS, Android y Blackberry OS. Puesto que HTML5 se basa en un estndar abierto,
los usuarios de aplicaciones HTML5 no tienen que descargar un complemento ni
usar dispositivos compatibles con complementos. Por el contrario, puede usar cualquier
explorador web, ya sea en su PC o dispositivo mvil, y obtener una experiencia igualmente
LISTO PARA CERTIFICACIN satisfactoria en la Web.
Qu significa
independiente Un programa o una interfaz que ejecuta software que produce resultados similares
del dispositivo? en mucho hardware distinto se denomina tambin independiente del dispositivo.
4.7 Con HTML5, CSS y JavaScript, puede crear fcilmente aplicaciones independientes
del dispositivo. Algunas de las capacidades de hardware a las que puede tener acceso
con aplicaciones independientes del dispositivo son GPS, el acelermetro y la cmara.
Puede usar JavaScript para tener acceso a las API de Windows en tiempo de ejecucin
para dispositivos de hardware.
COMPRENDER EL SISTEMA DE POSICIONAMIENTO GLOBAL (GPS)
El hardware del sistema de posicionamiento Global (GPS), que suele ser un chip o una
tarjeta de circuitos, es un receptor que se comunica con satlites para proporcionar la
ubicacin precisa de un dispositivo en coordenadas de longitud y latitud. Casi todos los
telfonos modernos estn equipados con funcionalidad GPS, lo mismo que los porttiles
que disponen de Wi-Fi y/o banda ancha celular.
La API de geolocalizacin que ya vimos en esta leccin funciona con el chip de GPS
para recopilar datos de geolocalizacin sin formato.
COMPRENDER EL ACELERMETRO
Muchos dispositivos mviles cuentan con sensores de orientacin y de movimiento, que
detectan la orientacin y el movimiento del dispositivo y usan esa informacin como
entrada. Por ejemplo, si un usuario tiene el dispositivo en la mano y sube el brazo por
encima de la cabeza y hacia atrs, y luego mueve el brazo hacia delante como si se
tratara de un golpe de tenis, el dispositivo reconoce y registra el movimiento.
Un acelermetro es un dispositivo que mide la aceleracin, que es un cambio de
velocidad o direccin en un espacio de tiempo. El sensor acelermetro detecta las fuerzas
aplicadas al dispositivo, como movimiento (arriba, abajo, hacia los lados) y gravedad.
En los sistemas Windows, existen API concretas que recuperan datos de movimiento sin
procesar desde sensores de acelermetro y, a continuacin, la API de movimiento combina
los datos de esos sensores y hace clculos con los nmeros resultantes para obtener
valores fciles de usar.
El evento devicemotion proporciona la aceleracin del dispositivo, en coordenadas
cartesianas, y la velocidad de rotacin. Un fragmento de JavaScript que recibe eventos
devicemotion es as:
window.addEventListener(devicemotion,
function(event) {
// Process event.acceleration,
event.accelerationIncludingGravity,
// event.rotationRate and event.interval
}, true);
Dos sensores relacionados son brjula y giroscopio. El sensor de brjula determina

la orientacin de un dispositivo en relacin con el Polo Norte magntico de la Tierra.
Puede usar el sensor de brjula junto con las API adecuadas para crear aplicaciones para
TOME NOTA
* geoalmacenamiento en memoria cach y navegacin, por ejemplo. El sensor de giroscopio
usa el movimiento (fuerzas rotacionales) para detectar la velocidad rotacional del
dispositivo a lo largo de sus tres ejes principales.
TENER ACCESO A UNA CMARA

La especificacin Media Capture HTML de W3C usa un atributo de captura con el elemento
input para captar datos de cmaras, videocmaras, cmaras web, micrfonos, etc. Por
ejemplo, el siguiente cdigo genrico carga una imagen desde la cmara de un dispositivo:
<input type=file accept=image/* capture=camera>
264 | Leccin 10
Con todo, esta construccin tiene una compatibilidad limitada y solo funciona con algunos
exploradores mviles. Se tiende a usar el mtodo getUserMedia(), junto con el objeto
navigator como alternativa, que tiene acceso a la transmisin de la cmara el micrfono
de un dispositivo local. getUserMedia funciona bien con los nuevos elementos de audio
y vdeo de HTML5. El siguiente es un fragmento de cdigo que proporciona acceso
al hardware de un dispositivo:
navigator.GetUserMedia('audio, video',
function(localMediaStream) {
var video = document.querySelector('video');
video.src =
window.createObjectURL(localMediaStream);
}, onFailSoHard);
La especificacin todava se est desarrollando, por lo que se pueden esperar cambios a

la vez que se modifica la especificacin y los proveedores de exploradores adoptan esta
tecnologa.
EXPLORAR LAS CAPACIDADES DE HARDWARE

PREPRESE. Para explorar las capacidades de hardware, siga estos pasos:
1. Visite la pgina web Inicio rpido: detectar la ubicacin con HTML5 (HTML)
de MSDN, en http://bit.ly/LerKIW.
2. Copie y pegue el cdigo JavaScript de muestra en una herramienta de edicin
o de desarrollo de aplicaciones y gurdelo como L10-geo-ms.html.
3. Abra L10-geo-ms.html en un explorador web y pruebe la aplicacin.
4. Compare las coordenadas de longitud y latitud con L10-geolocation.html, que cre
en una leccin anterior.
5. Visite la pgina web de MSDN de Microsoft Inicio rpido: responder al movimiento
del usuario con el acelermetro (HTML) en http://bit.ly/J7OA58.
6. Lea el ejemplo de cdigo JavaScript y de marcado HTML.
7. Conteste las siguientes preguntas, buscan en partes del cdigo y el marcado si es
necesario:
a. Qu funcin establece una conexin con el acelermetro predeterminado?
b. Qu funcin capta nuevos datos del acelermetro?
c. Qu elementos escriben nuevos valores en la pantalla?
8. Cierre todos los archivos y programas que estn abiertos.
MS INFORMACIN
Puede obtener ms informacin sobre las API relacionadas con la cmara en esta pgina web de MSDN:
http://bit.ly/K2Lf5E. Para explorar los componentes de Windows en tiempo de ejecucin, vaya a esta
pgina web de MSDN: http://bit.ly/HWTZJL.

Un dispositivo tctil interpreta los movimientos de los dedos, denominados gestos,
en una pantalla tctil, y los convierte en instrucciones para una aplicacin. Muchos
gestos tienen movimientos del mouse equivalentes.
Los eventos tctiles principales son touchstart, touchmove, touchend y touchcancel.
Los eventos de gesto principales son gesturestart, gesturechange y gestureend.
(contina)
El grupo Web Hypertext Application Technology Working Group (WHATWG)

mantiene una especificacin HTML activa que incluye API que originalmente no
eran parte de la especificacin HTML5. Estos incluyen geolocalizacin, Web Workers,
websockets y API de archivo.
La API de geolocalizacin obtiene las coordenadas geogrficas de un usuario (latitud
y longitud). La API tambin puede mostrar un mapa con un marcador que indica la
ubicacin del usuario segn las coordenadas.
Los Web Workers son scripts que se ejecutan en segundo plano. Realizan clculos
y otras acciones que hacen que la interfaz de usuario tenga mayor capacidad de
respuesta.
La API de WebSocket permite abrir una conexin persistente entre un cliente
y un servidor web, e intercambiar texto y archivos binarios. WebSockets reduce
la cantidad de sobrecarga necesaria para las comunicaciones en tiempo real.
Puede usar la API de archivo para cargar en un servidor remoto archivos de uno en
uno o en grupo desde un disco local o el almacenamiento local de un dispositivo.
Tambin puede visualizar los archivos de imagen cargados en una aplicacin web.
El entorno de Windows en tiempo de ejecucin permite a los desarrolladores tener
acceso a recursos en memoria y en hardware mediante API.
El almacenamiento web de HTML5 consta de almacenamiento local (para datos
persistentes) y almacenamiento de sesin (para datos temporales).
Las aplicaciones independiente de la plataforma se ejecutan en diversos sistemas
operativos mviles y de escritorio. Las aplicaciones independientes del dispositivo
se pueden ejecutar en diversos dispositivos. Puede usar JavaScript para tener acceso
a las API de Windows en tiempo de ejecucin para dispositivos de hardware.
1. La accin que una aplicacin realiza en respuesta a un gesto se denomina un evento
__________.
2. Los datos __________ proporcionan datos de ubicacin sin procesar, como longitud
y latitud, o metros.
3. Los __________ son API que permiten que los scripts se ejecuten en segundo plano
como procesos paralelos.
4. La API de __________ ofrece comunicacin de dplex completo, de dos vas,
a travs de un socket nico por Internet.
5. La API __________ permite que un explorador o una aplicacin cargue archivos
de almacenamiento local en un servidor remoto sin necesitar ningn complemento.
6. un programa o una interfaz que ejecuta software que produce resultados similares
sobre una amplia variedad de hardware tambin se denomina _____________.
7. Un __________ es un dispositivo que mide la aceleracin, la cual es un cambio
de velocidad o direccin en un perodo de tiempo.
8. Una pantalla tctil __________ se compone de varias capas, las ms alta de las
cuales se dobla cuando se presiona y oprime la capa inferior. Los sensores detectan
la presin, que es como el sistema sabe qu parte de la pantalla se ha presionado.
9. Un __________ es un tipo de datos que puede almacenar datos binarios, como
imgenes o archivos multimedia.
10. Comet y tecnologas push similares introdujeron el __________, en el cual un
explorador se pone en contacto con un servidor web peridicamente (algunas veces de
forma constante) para ver si hay nueva informacin disponible que presentar al usuario.
266 | Leccin 10
Varias opciones
1. Qu tipo de pantalla tctil requiere propiedades conductoras?
a. Capacitiva
b. Resistiva
c. Electrnica
2. En JavaScript, cul de las siguientes opciones contiene una referencia a todos

los puntos de contacto con una pantalla tctil?
a. Objeto tctil
b. Identificador
c. Lista tctil
d. Manifiesto
3. Qu API define una interfaz que proporcione la localizacin de un dispositivo,

generalmente mediante coordenadas de latitud y longitud?
a. WebSocket
b. Geolocalizacin
c. Web Workers
d. File
4. Los Web Workers no usan cul de las siguientes opciones?

a. setTimeout
b. setInterval
c. XMLHttpRequest
d. getElementById
5. Cul de las siguientes opciones son buenos ejemplos de aplicaciones web que se
benefician de WebSockets? (Seleccione todas las respuestas que correspondan).
a. Chat
b. Libreta de direcciones
c. Juegos de varios jugadores en lnea
d. Cotizaciones
6. Qu API permiten subir imgenes e inmediatamente mostrar miniaturas

en documentos HTML?
a. WebSocket
b. Geolocalizacin
c. Web Workers
d. Archivo
7. Qu API usa ws en lugar de http al hacer referencia a las URL?

a. WebSocket
b. Geolocalizacin
c. Web Workers
d. Archivo
8. Qu mtodo permite a los usuarios guardar cantidades relativamente grandes

de datos que persisten de sesin de explorador a sesin de explorador?
a. localStorage
b. sessionStorage
c. postMessage
d. addEventListener
9. Qu mtodo obtiene acceso a la secuencia de cmara local y micrfono de un

dispositivo?
a. getUserMedia
b. sessionStorage
c. addEventListener
d. getCameraSound
10. Qu sensor de dispositivo mvil detecta la fuerza de gravedad junto con las fuerzas
resultantes del movimiento del dispositivo?
a. GPS
b. Brjula
c. Acelermetro
d. Giroscopio
Verdadero/Falso
VF1. El W3C lo formaron Apple, Mozilla Foundation y Opera Software para definir
y documentar la especificacin HTML5.
VF2. En JavaScript, el objeto tctil detecta la entrada de dispositivos tctiles.
VF3. Los datos civiles son datos de ubicacin ms fciles de entender, por ejemplo
un mapa o una direccin como 637 Park Street.
VF4. Los desarrolladores prueban sus aplicaciones y los usuarios ejecutan las
aplicaciones en el entorno WinRT.
VF5. El gesto presionar y pulsar es un equivalente a un clic con el botn primario
del mouse.
Escenario 10-1: Comprensin de los gestos
Jerome es un compaero de trabajo y desarrollador en ciernes que est experimentando
con una aplicacin tctil. Desea saber qu gesto imita a un clic del mouse. Qu le dice?
Escenario 10-2: Recopilacin de datos de ubicacin del cliente

Austin Energy and Light desea que los clientes inicien sesin en su sitio web y usen una
aplicacin que identifica su ubicacin exacta. La aplicacin debe ser muy sensible a la
experiencia del usuario y permitir que los usuarios continen completando los datos del
formulario. Los datos de ubicacin se enviarn a dispositivos porttiles que los tcnicos
usan en el campo para localizar rpidamente las empresas y los hogares de los clientes.
Qu tecnologas sugiere que explore la empresa?
Escenario 10-3: Comprensin del movimiento del dispositivo
Vong es una programadora para un importante fabricante de smartphones. Recientemente
se le asign trabajar en un proyecto de movimiento del dispositivo con un equipo de
desarrollo. Desea comprender rpidamente la diferencia entre los sensores acelermetro,
brjula y giroscopio. Qu le dice?
Escenario 10-4: Exploracin del almacenamiento web

Vong ha regresado con una nueva pregunta sobre almacenamiento web. Ella cree que el
almacenamiento web se refiere a guardar archivos en un servicio de nube en la Web, pero
eso no tiene sentido en relacin con su proyecto de smartphone. Cmo puede aclararle
almacenamiento web.
Apndice A
Examen 98-375 Aspectos fundamentales
del desarrollo de aplicaciones HTML5
Objetivo del examen MTA Nmero de Nmero

competencia de leccin
Administrar el ciclo de vida de las aplicaciones
Comprender los aspectos fundamentales de la plataforma 1.1 1
Administrar el estado de una aplicacin 1.2 1
Depurar y probar una aplicacin tctil basada en HTML5 1.3 1
Publicar una aplicacin en una tienda 1.4 1
Compilar la interfaz de usuario mediante HTML5
Elegir y configurar etiquetas HTML5 para mostrar contenido de texto 2.1 2
Elegir y configurar etiquetas HTML5 para mostrar grficos 2.2 2
Elegir y configurar etiquetas HTML5 para reproducir multimedia 2.3 2
Elegir y configurar etiquetas HTML5 para organizar contenido y formularios 2.4 3
Elegir y configurar etiquetas HTML5 para entrada y validacin 2.5 3
Dar formato a la interfaz de usuario mediante CSS
Entender los conceptos bsicos de CSS 3.1 4
Organizar el contenido de la interfaz de usuario mediante CSS 3.2 5
Administrar el flujo del contenido de texto mediante CSS 3.3 6
Administrar la interfaz grfica mediante CSS 3.4 7
Codificar mediante JavaScript
Administrar y mantener JavaScript 4.1 8
Actualizar la interfaz de usuario mediante JavaScript 4.2 8
Codificar animaciones mediante JavaScript 4.3 9
Tener acceso a datos mediante JavaScript 4.4 9
Responder a la interfaz tctil 4.5 10
Codificar API HTML5 adicionales 4.6 10
Tener acceso a recursos de dispositivos y del sistema operativo 4.7 10
268
ndice
A Archivo local, tener acceso a, 229231

Acelermetro, 263 Archivos, 229233
Administracin de la interfaz grfica mediante CSS, 159188 cargar y guardar, 229233
canvas para mejorar la GUI, 182185 archivo local, tener acceso a, 229231
degradados, 164166 Atributo Autofocus, 79
efectos de filtro SVG, aplicar, 179182 Atributo de correo electrnico, 78
filtro de desenfoque gaussiano, 180 Atributo de patrn, 78
efectos grficos, crear, 160166 Atributo necesario, 78
sombras, 161163 Atributos de entrada, 7781
escala 2D, 169170 atributo Autofocus, 79
esquinas redondeadas, crear, 160161 atributo de correo electrnico, 78
propiedad border-radius, 160 atributo de patrn, 78
rotacin 2D, 171172 atributo necesario, 78
rotacin 3D 171172 texto de marcador de posicin, 78
sesgado 2D, 172173 Atributos globales, 24
sesgado 3D 172173 Atributos globales, 24, 54
transformacin 2D, 167169 Atributos, 2324, 33, Vase tambin Atributos de entrada
transformacin 3D 167169
traslacin 2D, 168172
Agregar elementos, 209211 B
para mostrar, 210 Biblioteca, 197199
Almacenamiento de sesin, 10, 260 BLOB, 256
almacenar datos de estado mediante, 1112 Borde, 112
Almacenamiento local, 10, 237239, 260262
almacenar datos de estado mediante, 1112
guardar en, 238
C
Almacenar datos de estado mediante almacenamiento
Cach de la aplicacin (AppCache), 231232
local y de sesiones, 1112
para archivos sin conexin, 1112
Anlisis, 227229
Cach, 231, Vase tambin Cach de la aplicacin (AppCache)
Anidar elementos, 24
manifiesto de cach, 11
Animacin interactiva, 218219
Calculadora en el explorador mediante JavaScript, 199201
Animaciones, 173179, Vase tambin Canvas
Cmara, 263264
3D, 173179
Canvas
codificacin mediante JavaScript, 216219
creacin de grficos con, 3842
crear, 216219
conceptos bsicos de canvas, 3940
animacin interactiva, 218219
creacin de formas, 3940
animacin sencilla, 216219
esquema de una forma, 4041
mediante CSS, 178179
en lugar de SVG, 44
API de archivo para cargas de archivos, 258259
manipulacin con JavaScript, 220224
interfaces para tener acceso a, 258
creacin de cuadros animados, 222224
API de trabajador web, 252255
creacin de reloj, 220222
crear, 254255
elemento Canvas, 220
ejecutar, 254255
objeto canvas, mejorar, 184185
API WebSockets, 255258
Capacidad de hardware independiente del dispositivo, 263
en prueba de compatibilidad con explorador, 256258
Capacidades de hardware, 264
eventos principales asociados con, 255
tener acceso a, 262264
sondeo, 255
independiente del dispositivo, 263
API XMLHttpRequest, 225
independiente de la plataforma, 262
Aplicacin dinmica, 190
Ciclo de vida de las aplicaciones, administracin, 120,
Aplicaciones de pizarra o tableta, habilidades y contenidos
Vase tambin HTML5
HTML5 para, 13
AppCache para archivos sin conexin, 1112
269
270 | ndice
conceptos fundamentales de la plataforma, 210 Controlador de eventos, 204

conjuntos de permisos, 10 Cookies, 11, 235237
contenedor de aplicacin, 8 Creacin de cuadros animados con canvas, 222224
credenciales, 10 Creacin de forma, con canvas, 3940
ejemplos de aplicaciones, explorar, 810 esquema de una forma, 4041
empaquetado, explorar, 710 Creacin de formularios, 7781
entorno de tiempo de ejecucin, explorar, 710 formulario web sencillo, 7981
interfaz de programacin de aplicaciones (API), 7 Credenciales, 10
interfaz de usuario (UI) estilo Moderno, 3 Cuadrcula para diseos complejos, 112114
paquete de aplicacin, 8 Cuadro de lmite, 102
permisos de identidad, 10
proceso de host, 78
Windows en tiempo de ejecucin (WinRT), 7 D
estados de aplicacin, descripcin y administracin, 1012 Datos civiles, 250
almacenar datos de estado mediante almacenamiento Datos de acceso, 225227
local y de sesiones, 1112 Datos geodsicos, 250
estado de aplicacin, 11 Datos, 224229
estado de sesin, 11 anlisis, transmitir, 227229
informacin de estado persistente, 11 enviar y recibir, 224229
localStorage, 10 objetos complejos, transmitir, 227229
sessionStorage, 10 tener acceso a, 215242
interfaces y gestos tctiles, 1213 tipos, 233
Marketplace de la Tienda Windows, 1617 Declaraciones, 9294
publicar una aplicacin en una tienda, 1617 Degradacin, elementos HTML5, 3233
Clase, 93 <acronym>, 33
Cdec, 4546 <applet>, 33
Columnas <basefont>, 33
crear, 146150 <big>, 33
diseo con varias columnas, 146, 149 <center>, 33
espacio entre columnas, 146 <dir>, 33
nmero de columnas, 146 <font>, 33
regla de columnas, 146 <frame>, 33
tres columnas, 148 <frameset>, 33
para optimizar la legibilidad del texto, 145-152 <noframes>, 33
Compatibilidad con API de archivo, 259 <strike>, 33
Compatibilidad con exploradores, <tt>, 33
WebSocket que se va a probar, 256258 efectos de elementos degradados, 34
Compresin de vdeo, 46 Degradado lineal, 164
Compresin, 46 Degradado radial, 165
Conjuntos de permisos, 10 Degradados de fondo, 164166
permisos de identidad, 10 Degradados, 164166
Contenedor de aplicacin, 8 degradados de fondo, 164166
Contenedores, flujo de contenido a travs de, 140145 aplicar a un cuadro, 165166
Contenido, 112 degradado lineal, 164
contenedores, 140 degradado radial, 165
de elementos, 208209 Depurar, 1316
actualizar, 208209 Desbordamiento de desplazamiento, 102104
contenido visible en pantalla, 208209 Desbordamiento oculto, 104105
desbordamiento, administrar, 102105 Desbordamiento visible, 104105
etiquetas HTML5 para organizar, 5472 Devolucin de llamada, 204
flujo, administrar, 9698 Direccin de elementos secundarios en una caja flexible,
desbordamiento de contenido, administrar, 102105 cambiar, 122126
desbordamiento oculto, 104105 Diseo con varias columnas, 146
desbordamiento visible, 104105 Diseo de cuadrcula sencilla, 130
flujo alineado, 96 Diseos de cuadrcula, 114, 128133
flujo de bloque, 96 crear, usando propiedades de CSS
origen, 140 para filas y columnas, 130132
y estilo, separar, 9192 diseo de cuadrcula sencilla, 130131
Controlador de eventos OnLoad, 204206
ndice | 271
para alineacin, direccin y orientacin de contenido, 128133 Etiquetas de vdeo, 4, 4547

celdas de cuadrcula, 129 atributos disponibles, 45
elementos de cuadrcula, 129 compresin, 46
lneas de cuadrcula, 129 compresin de vdeo, 46
trayectorias de cuadrcula, 129 elemento de vdeo, trabajar con, 4647
plantillas de cuadrcula, 132133 Etiquetas vacas, 22
Document Object Model (DOM), 7, 141 Etiquetas, 22
usar para agregar estructura a documento HTML, 5564
Evento Devicemotion, 263
E Evento tctil, 245249
Ejemplos de aplicaciones, explorar, 810 Eventos, escuchar y responder a, 203206
Elemento <Command> en HTML5, 31
Elemento <Mark> en HTML5, 31
Elemento <Time> en HTML5, 31 F
Elemento Article, 61 Familia de fuentes sans serif, 9495
Elemento Aside, 6164 Filtro de desenfoque gaussiano, 180182
agregar a documento HTML, 6364 Flujo con nombre, 140
Elemento Audio, 47 Flujo de contenido alineado, 9698
Elemento DataList, 79 Flujo de contenido de bloque, 9698
Elemento de encabezado, creacin de documentos HTML con, 56 Flujo de contenido no contiguo entre regiones, 139
Elemento de men, 72 Formas, 219224
Elemento de nivel de bloque, 113 Formulario web sencillo, crear, 7981
Elemento de pie de pgina, creacin de documentos HTML con, 6 usando etiquetas <p>, 81
Elemento de seccin, creacin de documentos HTML con, 5759 Formulario web, 72
Elemento de vdeo, 45 crear, 7981
Elemento Nav, 5961 campos de validacin, agregar a, 83
agregar a documento HTML, 6061 usando etiquetas <p>, 81
Elementos alineados, 113 Formularios, 7381
Elementos figcaption, 3538 entrada de formularios, 73
Elementos figure, 3538 etiquetas HTML5 para organizar, 5472
Elementos individuales, posicionamiento, 99102 Fotogramas clave, 177
Elementos, 23, Vase tambin Contenido: Fuentes y familias de fuentes, 9496
Actualizar el contenido de los elementos familia de fuentes monospace, 9495
tener acceso a, 201203 familia de fuentes sans serif, 95
actualizar el contenido de, 208209 Funciones, 193
agregar elementos, 209211 crear y usar, 193196
audio, 47 funcin JavaScript, 194195
encontrar, 201203
mostrar, 206208
ocultar, 206208 G
tener acceso a, 201203 Geolocalizacin, codificacin para capturar, 249252
vdeo, 45 API de geolocalizacin, 250
Encapsulacin, 226 Gestos, 1213, 245
Entidades, 2425 capturar, 246249
Entorno de desarrollo integrado (IDE), 88, 190 responder a, 246249
Entorno de tiempo de ejecucin (RTE), 7 Grficos, 34-44, Vase tambin Multimedia:
Entrada de formularios, 73 etiquetas HTML5 para reproducir
Entrada, etiquetas HTML5 para, 7283 canvas, creacin de grficos con, 3842
Escala 2D, 169170 etiquetas HTML5 para mostrar, elegir y configurar, 3444
Escala proporcional dentro de caja flexible, 116122 imagen alternativa para exploradores anteriores, 4142
Espacio de nombres, 8 imagen de trama, 35
Esquinas redondeadas, crear, 160161 elementos figcaption, 3538
cuadro con, crear, 162163 elementos figure, 3538
Estado de aplicacin, 11 imagen vectorizada, 35
Estado de sesin, 11 pgina web, mostrar imgenes en, 37
Estructura de la pgina, HTML, 2229 SVG, crear grficos con, 4244
Etiquetas de audio, 4, 4749 trabajar con, 215242
elemento Audio, 47 Guiones automticos, 152
trabajar con, 4849
272 | ndice
Guiones, 150152 etiquetas para mostrar grficos, 3444,

guiones automticos, 152 Vase tambin en Grficos
para optimizar la legibilidad del texto, 145-152 etiquetas para ver contenido de texto, 2934,
ms-hyphenate-limit-chars, 150 Vase tambin en Texto
ms-hyphenate-limit-lines, 151 pgina web sencilla, marcado de, 2629
ms-hyphenate-limit-zone, 150 vlido, 26
Estndar HTML5, explorar, 4
independiente de la plataforma, 3
H nuevas caractersticas, 4
Hojas de estilo en cascada (continuacin) canvas, 4
administracin de flujo de texto mediante, 137158 consultas multimedia, 4
dinmicamente mediante contenedores, 140145 etiquetas de audio y vdeo, 4
entre varias secciones, mediante las regiones de, 139155 geolocalizacin, 4
flujo alrededor de un objeto flotante, interfaces de programacin de aplicaciones (API), 4
exclusiones CSS en, 152155 modernizr, 4
legibilidad de optimizacin de texto, columnas y guiones nuevo en, 35
en, 145152, Vase tambin Columnas; Guiones validar cdigo HTML5, 14
regiones de CSS, implementacin de Microsoft de, 142145 validar un paquete, 1416
texto desbordante, 142
desbordamiento de desplazamiento, 102104
estilos, 87109 I
HTML y, vinculacin, 8991 Icono de selector, 5
uso sencillo de CSS con HTML, 8990 Identificadores, 195
posicionamiento, 87109 Iframes, 142
flotador posicionado, aplicar, 99100 Imagen de trama, 35
posicionamiento absoluto, aplicar, 100102 Imagen vectorizada, 35
posicionamiento de elementos individuales, 99102 Imgenes, 219224
selectores, 9294 Implementacin de Microsoft de regiones de CSS, 142145
Hojas de estilo en cascada, 2, 32, 87109, 137158, Independiente de la plataforma, 3, 262
Vase tambin Principios bsicos de CSS; Informacin de estado persistente, 11
Administracin de la interfaz grfica Interactividad, 190
contenido y estilo, separacin, 9192 Interfaces tctiles, 1213
creacin de pginas web bsicas, 9091 codificacin JavaScript, 243267
CSS3, 88 deteccin de capacidad de pantalla tctil, 247249
declaraciones, 9294 pantalla tctil resistiva, 244
flujo del contenido, 87109 pantallas tctiles capacitivas, 244
administrar, 9698 responder a, 244249
fuentes y familias de fuentes, 9496 eventos de gesto, 245
herramientas adecuadas, 8889 eventos tctiles JavaScript primarios, 246
HTML semntico, 5455 lista tctil, 246
HTML5, 210 objeto tctil, 246
API, codificacin, 249259 simulador o emulador de pantalla tctil, 13
para capturar geolocalizacin, 249252 Interfaz de programacin de aplicaciones (API), 4, 7
aplicaciones de pizarra o tableta, Interfaz de usuario (IU), 3
habilidades y contenidos para, 13 actualizar mediante JavaScript, 199211
aplicaciones, 57 calculadora en explorador, 199201
crear aplicacin, 6 contenido de elementos, 208209
depurar, 6, 1316 controlador de eventos OnLoad, 204206
disear IU, 5 elementos, localizar y tener acceso a, 201203
empaquetado, 6 elementos, mostrar y ocultar, 206208
escribir cdigo, 6 eventos, escuchar y responder a, 203206
implementar, 6 mtodo getElementById() para entrada de usuario, 202203
manifiesto de aplicacin, actualizar, 5 mostrar partes ocultas en funcin de la accin del usuario,
planeacin de proyectos, 5 206208
pruebas, 6, 1316 crear, mediante HTML5, 5386,
recursos para desarrolladores, 4, 67 Vase tambin Formularios; Validacin
validacin, 6 atributos de entrada, 7781
crear interfaz de usuario de construccin, 2152, Vase tambin contenido, 5472
Multimedia: etiquetas HTML5 para reproducir creacin de formularios, 7781
ndice | 273
elemento Article, 61 L
elemento Aside, 6164 Lenguaje de marcado de hipertexto (HTML), 2, 22,
elemento de encabezado, 56 Vase tambin HTML5
elemento de men, 72 anidar elementos, 24
elemento de pie de pgina, 6 atributos, 2324
elemento de seccin, 5759 elemento, 23
elemento Nav, 5961 entidades, 2425
entrada, 5386 estructura de la pgina, 2229
formulario web sencillo, crear, 7981 etiquetas vacas, 22
formularios, 5472 etiquetas, 2223
HTML semntico, 5455 marcado bsico, 2229
listas, usar etiquetas para crear, 6472 principios bsicos de, 2229
organizacin, 5386 representaciones, 22
tablas, usar etiquetas para crear, 6472 tipo de documento, 2526
usar etiquetas, 5564 Lenguaje de marcado extensible (XML), 42
validacin, 5386 Lenguaje de marcado, 2
valores, 7781 Lenguaje de scripting, 2
organizacin de contenido mediante CSS, 111114, Lista de definiciones, 71
Vase tambin en Principios bsicos de CSS Lista ordenada, 6970
Interfaz de usuario (UI) estilo Moderno, 3 crear, 72
Interfaz grfica de usuario (GUI) Lista sin ordenar, 6970
canvas para mejorar, 182185 Lista tctil, 245246
Invertir orden de caja flexible, 124126 Listas
crear listas, 6972
etiquetas en, 6472
J elemento DataList, 79
JavaScript Object Notation (JSON), 228 lista de definiciones, 71
JavaScript, 189214, 216219 lista ordenada, 6970
actualizar interfaz de usuario mediante, 199211, lista sin ordenar, 6970
Vase tambin en Interfaz de usuario Localizador uniforme de recursos (URL), 47
administrar un formulario con, 233235
codificacin, 243267, Vase tambin en Interfaces tctiles
acelermetro, 263 M
cmara, 263264 Marcado bsico, HTML, 2229
datos civiles, 250 Marcado semntico, 54
datos geodsicos, 250 Margen, 112
recursos en memoria, tener acceso a, 260262 Marketplace de la Tienda Windows, 1617
sistema de posicionamiento global (GPS), 263 Mtodo getElementById() para entrada de usuario, 202203
sondeo, 255 Mtodos, 189214
codificar animaciones mediante, 216219 Modelo de caja flexible, 113
jQuery, 197199 caja flexible con elementos de caja flexible, crear, 119
manipulacin de canvas con, 220224, direccin de elementos secundarios en una caja flexible,
Vase tambin en Canvas cambiar, 122126
programa JavaScript de varias instrucciones, 192193 elementos de caja flexible, 114, 116128
programa JavaScript sencillo, crear, 190192 con funcin flex, crear, 120122
usar en validacin de entrada de formularios de usuario, escala proporcional en interior, 116122
233235 orden de caja flexible, invertir, 124126
uso de variables en, 196 para alineacin, direccin y orientacin de contenido, 114128
jQuery, 197199 para diseos sencillos, 112114
propiedad flex-order, 127
trabajar con, 116128
K Monospace, 94-95
Kit de desarrollo de software (SDK), 14 Multimedia, 2152
consultas, 4, 127
etiquetas HTML5 para reproducir, 4549,
Vase tambin Etiquetas de audio; Etiquetas de vdeo
274 | ndice
N Proceso, 8
.NET Framework, 10 Programa JavaScript de varias instrucciones, 192193
Programa, 190
Propiedad border-radius, 160
O Propiedad flex-order, 127128
Objeto flotante, crear flujo de texto alrededor, CSS en, 152155 Protocolo de transporte de hipertexto (HTTP), 11
Exclusiones de CSS, 152154
flotador posicionado, 152
Objeto tctil, 245246 R
Objetos complejos, transmitir, 227229 Recursin, 216
Opacidad, 163164 Recursos de dispositivos y del sistema operativo,
codificacin de JavaScript para, 243267
Recursos de dispositivos, tener acceso a, 260264
P Recursos del sistema operativo, 260264
Pgina web sencilla, 2629 Recursos en memoria, tener acceso a, 260262
crear, 2629 Regiones CSS, Vase Regiones, CSS
marcado de, 2629 Regiones, CSS, 139
Pgina web vlida, 26 crear, 143145
Pgina web, mostrar imgenes en, 37 implementacin de Microsoft de, 142145
Pantalla Reglas, 89
agregar un elemento a, 210 Relacin primario-secundario, 113
ocultar partes de, en funcin de la accin del usuario, 206208 Relleno, 112
Pantalla tctil resistiva, 244 Reloj con manecillas en movimiento, crear, 220222
Pantallas tctiles capacitivas, 244 Representaciones, 22
Paquete de aplicacin, 8 Rotacin 171172
Permisos de identidad, 10 Rotacin 2D, 171172
Perspectiva, 173179 Rotacin 3D 171172
3D, 173179 Rotacin 2D, 171172
Plantillas de cuadrcula, 132133 Rotacin 3D 171172
Posicin flotante, 152
Posicionamiento absoluto, 100102
con varias columnas, 101 S
Posicionamiento flotante, 99100 Scalable Vector Graphics (SVG), 34, 42
con varias columnas, 99100 crear grficos con, 4244
Prefijo de proveedor, 111 grfico vectorial SVG, 4344
Principios bsicos de codificacin, 189214 efectos de filtro, aplicar, 179182
Principios bsicos de CSS, 110136 desenfoque gaussiano, 181182
contenido, ordenar y organizar, 126128 desplazamiento, 181182
organizacin del contenido de la interfaz uso de canvas en lugar de SVG, 44
de usuario (UI), 111114 Selectores, 9294
borde, 112 Separacin de contenido y estilo, 9192
caja flexible para diseos simples, 112114 Servicio de validacin de marcado, W3C, 15
contenido, 112 Sesgado 172173
cuadrcula para diseos complejos, 112114 2D, 172175
elemento de nivel de bloque, 113 3D, 172173
elementos alineados, 113 Sesgado 2D, 172175
margen, 112 Sesgado 3D 172173
modelo de caja flexible (Flexbox), 113, Sistema de posicionamiento global (GPS), 263
Vase tambin la entrada correspondiente Sombra paralela, 161
modelo de diseo de cuadrcula, 114, Sombras, crear, 161163
Vase tambin Diseos de cuadrcula cuadro con, crear, 162163
prefijo de proveedor, 111 sombra paralela, 161
relacin primario-secundario, 113 sombra h, 162
relleno, 112 sombra v, 162
Probar aplicaciones HTML5, 1316 Sondeo, 255
Proceso de host, 78 Subrutinas, 197
ndice | 275
T V
Tablas Validacin automtica, 82
crear tablas, 6469 Validacin de entrada de formularios de usuario,
etiquetas en, 6472 uso de JavaScript en, 233235
Texto de marcador de posicin, 78 Validacin del lado cliente, 82
Texto desbordante, 142 Validacin del lado servidor, 82
Texto, 2152 validacin, 8183, 203
administracin de flujo mediante CSS, 137158, adicin de campos a formulario web, 83
Vase tambin en Hojas de estilo en cascada etiquetas HTML5 para, 7283
elementos de texto no usados en HTML5, 3234, validacin automtica, 82
Vase tambin Degradacin, elementos HTML5 validacin del lado cliente, 82
etiquetas HTML5 para mostrar, elegir y configurar, 2934 validacin del lado servidor, 82
<b>, 30 Validar cdigo HTML5, 14
<em>, 30 Validar un paquete, 1416
<i>, 30 Valores, 7781
<small>, 30 Variable, 195
<strong>, 30 en programa JavaScript, 196
elementos HTML 4 relacionados con texto con nuevo Varias columnas en CSS3, 146147
significado o funcionalidad, 2931
texto alternativo para exploradores anteriores, 4142
etiquetas relacionadas con texto en pgina web, W
modificar, 3031 Web Hypertext Application Technology Working Group
nuevos elementos de texto en HTML5, 3132 (WHATWG), 249
<command>, 31 Web Open Font Format (WOFF), 166167
<mark>, 31 Web segura, 166
<time>, 31 Windows en tiempo de ejecucin (WinRT), 7, 260
uso de elemento mark, 32 World Wide Web Consortium (W3C), 2
Tipo de documento, 2526 servicio de validacin de CSS, 1516
Tipografa, 166167 servicio de validacin de marcado, 15
Transformacin 2D, 167169 WWAHost.exe, 8
Transformacin 3D 167169
Transformaciones, 167169
2D, 167169
3D, 167169
Transiciones, 173179
crear mediante CSS, 176178
3D, 173179
Transparencia, 163164
Traslacin, 168172
2D, 168169

Spanish Moac Las 98-375 Html5 Appdev Textbook 40086a

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Spanish Moac Las 98-375 Html5 Appdev Textbook 40086a

Transféré par

Droits d'auteur :

Formats disponibles

Aspectos

Official Academic Course

Examen MTA 98-375

Aspectos fundamentales del

Impreso en los Estados Unidos de Amrica

Bienvenido al programa Microsoft Official Academic Course (MOAC) de Aspectos fundamentales

Programa Microsoft Official Academic Course

Compilar la interfaz LECCIN 3

El Lenguaje de marcado de hipertexto (HTML) es el lenguaje que se utiliza para describir

Administracin del ciclo de vida de las aplicaciones | 9

El Protocolo de transporte de hipertexto (HTTP) es el protocolo que transfiere los datos

APPCACHE PARA ARCHIVOS SIN CONEXIN

Ayuda para el lector

Este bloque de navegacin se vincular a las secciones de sinfonas y raves

Ejercicios paso a paso

Comprender los principios bsicos de HTML

En el Lenguaje de marcado de hipertexto (HTML) se utiliza marcado para describir

El Lenguaje de marcado de hipertexto (HTML) se conoce como lenguaje de marcado

Marcado bsico y estructura de la pgina

Observe cmo el marcado semntico de HTML5 da un significado ms concreto a partes

Usar etiquetas para agregar estructura a un documento HTML

Entre los nuevos elementos HTML5 para estructurar y organizar contenido en un

Comprender los principios bsicos de CSS: Diseos | 133

RESUMEN DE CONOCIMIENTOS Matriz resumen

Escenario 3-2: Visualizacin de tablas largas en HTML

DREAMSPARK PREMIUM: SUSCRIPCIN GRATUITA DE TRES

Direcciones web y nmeros de telfono importantes

Ediciones de escritorio Wiley

 cerca de la certificacin Microsoft Technology

Perfil del candidato MTA

MTA potencia a los educadores y motiva a los alumnos

Entrega de exmenes MTA: licencia MTA Campus

Activar la prueba prctica GRATUITA de MTA

Revisores de los fundamentos de la tecnologa MOAC MTA

Habilidades/Conceptos Objetivo del examen MTA Nmero de objetivo

Acaba de empezar un contrato en prcticas en Malted Milk Media, una agencia

Comprender los aspectos fundamentales de la plataforma

El Lenguaje de marcado de hipertexto (HTML) es el lenguaje que se utiliza para describir

La familia HTML5 cuenta con muchas etiquetas de marcado y tecnologas nuevas,

EXPLORE EL ESTNDAR HTML5

EXPLORE LOS RECURSOS PARA DESARROLLADORES DE APLICACIONES

El desarrollo de aplicaciones HTML5 es mucho ms sencillo que el de aplicaciones

PREPRESE PARA DESARROLLAR APLICACIONES

Explorar el empaquetado y el entorno de tiempo de ejecucin

El entorno de Windows en tiempo de ejecucin es la base del sistema operativo

COMPRENDER EL PROCESO DE HOST

COMPRENDER EL PAQUETE DE LA APLICACIN Y EL CONTENEDOR

EXPLORE APLICACIONES DE MUESTRA

5. Haga clic en el vnculo Explorar cdigo, en StocksSample en el panel izquierdo, en

7. Haga clic en js, en el panel izquierdo, y en default.js. Se muestra el cdigo JavaScript.

Comprender las credenciales y los conjuntos de permisos

.NET Framework proporciona un entorno seguro en el que se pueden ejecutar aplicaciones

Comprender y administrar los estados de la aplicacin

La administracin del estado es el proceso de mantener la informacin de la pgina web

El Protocolo de transporte de hipertexto (HTTP) es el protocolo que transfiere los datos

APPCACHE PARA ARCHIVOS SIN CONEXIN

Obtendr ms informacin StyleSheet.CSS

Comprender las interfaces y los gestos tctiles

En un dispositivo de pantalla tctil, el movimiento de un dedo se denomina gesto y la

En la actualidad, muchos monitores de PC y dispositivos mviles disponen de tecnologa

LISTO PARA CERTIFICACIN

Capacidad de desplazamiento y movimiento panormico deshabilitados

INFORMACIN SOBRE APLICACIONES TCTILES Y HABILITADAS PARA GESTOS

Aprovechar las habilidades y el contenido HTML5 existentes para aplicaciones

cerca de la certificacin Microsoft Technology

<p> Define parte del texto como un prrafo.