Vous êtes sur la page 1sur 298

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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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.

www.wiley.com/college/microsoft
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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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.
Elegir y configurar etiquetas Elegir y configurar etiquetas 2.5
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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.
Los vnculos apareceran en una pgina web como se muestra en la Figura 3-6.
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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.
LISTO PARA CERTIFICACIN
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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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,
Comprender los principios bsicos de CSS: Diseos | 133
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?
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. 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
con varias secciones, botones y controles.
DisearunainterfazqueserepresentebienenpantallasdePCgrandesyen Escenario 3-4: Usar tipos de entrada apropiados en un formulario web
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 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?
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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
1. es la parte de un sitio o aplicacin web con la que interacta
el usuario.
2. En el modelo de cuadros CSS de W3C original, el es el espacio
entre el borde y el contenido del cuadro.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.
LISTO PARA CERTIFICACIN 
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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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.

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
| 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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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
Evaluacin de aptitudes 86
Comprender las plantillas de red 132
Leccin 4: Comprender los principios Resumen de conocimientos 133
bsicos de CSS: flujo de Evaluacin de conocimientos 133
Evaluacin de competencias 135
contenido, posicionamiento
Evaluacin de aptitudes 136
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
Evaluacin de competencias 157
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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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 conocimientos 186
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
Evaluacin de conocimientos 212
Tener acceso a una cmara 263
Evaluacin de competencias 214
Resumen de conocimientos 264
Evaluacin de aptitudes 214
Evaluacin de conocimientos 265
Leccin 9: Creacin de animaciones, Evaluacin de competencias 267
Evaluacin de aptitudes 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

www.wiley.com/college/microsoft
o llame al nmero de telfono gratuito de MOAC: 1+(888) 764-7001 (solo EE. UU. y Canad)
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
dispositivos mviles lleva cierto camino recorrido.

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.
Administracin delciclo de vida delas aplicaciones|5

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.
Administracin delciclo de vida delas aplicaciones|7

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.
LISTO PARA CERTIFICACIN
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.
Administracin delciclo de vida delas 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


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
LISTO PARA CERTIFICACIN
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.
Administracin delciclo de vida delas aplicaciones|11

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


LISTO PARA CERTIFICACIN
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
LISTO PARA CERTIFICACIN
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
LISTO PARA CERTIFICACIN
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


LISTO PARA CERTIFICACIN
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.

LISTO PARA CERTIFICACIN


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
Administracin delciclo de vida delas aplicaciones|13

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


LISTO PARA CERTIFICACIN
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.
Administracin delciclo de vida delas aplicaciones|15

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.
Administracin delciclo de vida delas aplicaciones|17

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
dispositivos mviles lleva cierto camino recorrido.
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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
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).
Administracin delciclo de vida delas aplicaciones|19

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
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
si el enunciado es 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.

Evaluacin de competencias
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?
Compilar la interfaz LECCIN 2
de usuario mediante
HTML5: texto, grficos
y multimedia
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 y conceptos Objetivo del examen MTA Nmero de objetivo


del examen MTA
Comprender los principios
bsicos de HTML
Elegir y configurar etiquetas Elegir y configurar etiquetas 2.1
HTML5 para mostrar contenido HTML5 para mostrar contenido
de texto de texto.
Elegir y configurar etiquetas Elegir y configurar etiquetas 2.2
HTML5 para mostrar grficos HTML5 para mostrar grficos.
Elegir y configurar etiquetas Elegir y configurar etiquetas 2.3
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
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 25

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 &reg; representa el smbolo de marca registrada, y su cdigo numrico es
&#174;. 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 &copy; &#169;
Grado &deg; &#176;
$ Dlar &dollar; &#36;
% Porcentaje &percnt; &#37;
Marca registrada &reg; &#174;

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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 27

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>
<title>78704 Pet Services</title>
</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>&copy;
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 &copy; a &#169;, 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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 29

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>
<meta charset="UTF-8">
<title>78704 Pet Services</title>
</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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 31

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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 33

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

6. Vaya a la pgina web del servicio de validacin de marcado de W3C en


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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 35

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>
<img src="doghappy.jpg" alt="Perro feliz"
width ="100"height ="125" />
<img src="dogpaws.jpg" alt="Huellas de perro"
width="100" height="125" />
<img src="dogwalk.jpg" alt="Paseando al perro"
width="100" height="125" />
<figcaption>Los perros felices son buenos perros</figcaption>
</figure>

Figura 2-11
Uso de los elementos
figure y figcaption
para visualizar varias
imgenes adyacentes
conuna sola leyenda
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 37

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>
<img src="dogwalk.jpg" alt="Paseando al perro"
width="100" height="125" />
<figcaption>Los perros felices son buenos perros</figcaption>
</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

6. Deje la herramienta de edicin y el explorador web abiertos si va a continuar


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>
<img src="doghappy.jpg" alt="Perro feliz"
width ="100"height ="125" />
<img src="dogpaws.jpg" alt="Huellas de perro"
width="100" height="125" />
<img src="dogwalk.jpg" alt="Paseando al perro"
width="100" height="125" />
<figcaption>Los perros felices son buenos perros</figcaption>
</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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 39

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
LISTO PARA CERTIFICACIN
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>
<meta charset="UTF-8">
<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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 41

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
LISTO PARA CERTIFICACIN
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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 43

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>
<meta charset="UTF-8">
<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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 45

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


LISTO PARA CERTIFICACIN
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
width="400" height="300"
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.
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 47

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Prueba vdeo</title>
</head>
<body>
<video
width="400" height="300"
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.


4. Vaya a la pgina web del servicio de validacin de marcado de W3C en
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.
8. Deje la herramienta de edicin y el explorador web abiertos si va a continuar
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>
<meta charset="UTF-8">
<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
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 49

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.

RESUMEN DE CONOCIMIENTOS

En esta leccin ha aprendido lo siguiente:


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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
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
Rodee con un crculo la letra correspondiente a la mejor respuesta.
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>
Compilar la interfaz de usuario mediante HTML5: texto, grficos y multimedia | 51

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.

Evaluacin de competencias
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>
<meta charset="UTF-8">
<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?

Evaluacin de aptitudes
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?
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

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.
Elegir y configurar etiquetas Elegir y configurar etiquetas 2.5
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


LISTO PARA CERTIFICACIN
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

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


documento HTML estn header, footer, section, nav, article y aside.
LISTO PARA CERTIFICACIN
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
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 57

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>
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 59

En una pgina web, este marcado tendra el aspecto que se muestra en la Figura 3-4.

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.
4. Deje la herramienta de edicin y el explorador web abiertos si va a continuar
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

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
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 />

Los vnculos apareceran en una pgina web como se muestra en la Figura 3-6.
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:
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
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>
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 61

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>

En una pgina web, este marcado tendra el aspecto que se muestra en la Figura 3-8.

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.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 63

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:
1. En un editor de HTML o una herramienta de desarrollo de aplicaciones, abra el archivo
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.

LISTO PARA CERTIFICACIN


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> <!--first row-->
<th>Trimestre</th> <!--first column in first row-->
<th>Ventas totales</th> <!--first row, second column-->
</tr>
<tr> <!--second row-->
<td>T1</td>
<td>4.349 $</td>
</tr>
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 65

<tr> <!--third row-->


<td>T2</td>
<td>2.984 $</td>
</tr>
<tr> <!--fourth row-->
<td>T3</td>
<td>3.570 $</td>
</tr>
<tr> <!--fifth row-->
<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>
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 67

<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>
<td>2.1 millones de dlares</td>
</tr>
<tr>
<td>El caballero oscuro</td>
<td>1.000 millones de dlares</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.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 69

Figura 3-13
Tabla de pelculas con ms
recaudacin acabada

LISTO PARA CERTIFICACIN


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>
<li>Delicia de fresa</li>
<li>Tarta de queso con pepitas de chocolate</li>
<li>Crema italiana</li>
</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">
<li>Delicia de fresa</li>
<li>Tarta de queso con pepitas de chocolate</li>
<li>Crema italiana</li>
</ul>

El marcado tendra el aspecto que se muestra en la Figura 3-16.


Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 71

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
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 73

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)
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 75

Tabla 3-5
continuacin Atributo Valor Descripcin
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
continuacin Atributo Valor Descripcin
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.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 77

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> <!-- end of contact-form -->

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.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 79

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><!-- End of contact-form -->

</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.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 81

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.
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 83

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.

RESUMEN DE CONOCIMIENTOS

En esta leccin ha aprendido lo siguiente:


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.
Entre los nuevos elementos HTML5 para estructurar y organizar contenido en un
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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
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
Rodee con un crculo la letra correspondiente a la mejor respuesta.
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
Compilar la interfaz de usuario mediante HTML5: organizacin, entrada y validacin | 85

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
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
si el enunciado es 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.

Evaluacin de competencias
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?

Evaluacin de aptitudes
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
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 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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 91

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
LISTO PARA CERTIFICACIN
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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 93

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>
<link href = "e2.css" rel = "stylesheet"
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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 95

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.

LISTO PARA CERTIFICACIN


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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 97

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>
<!-- Este es el contenido de e4.html.-->
<html>
<head>
<title>Flujo de bloque y alineado</title>
<link href = "e4.css" rel = "stylesheet"
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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 99

LISTO PARA CERTIFICACIN


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
LISTO PARA CERTIFICACIN
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>
<!--Este archivo es e5.html. -->
<html>
<head>
<title>Posicionamiento flotante</title>
<style type = 'text/css'>
#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.
<p id = "col2">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui
sit amet felis. Integer sit amet diam. Phasellus
ultrices viverra velit.
100 | Leccin 4

<p id = "col3">Lorem ipsum dolor sit amet,


consectetuer adipiscing elit. Integer pretium dui
sit amet felis. Integer sit amet diam. Phasellus
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?
6. Cierre el archivo e5.html. Deje la herramienta de edicin y el explorador web abiertos
si va a continuar con la siguiente seccin.

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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 101

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:
<!-- Este es e6.html. -->
Reemplace el contenido de las etiquetas <head> con lo siguiente:
<title>Posicionamiento absoluto</title>
<style type = 'text/css'>
#col1 {
posicionamiento: absoluto;
bottom: 100px;
right: 100px;
background-color: lightskyblue;
}
#col2 {
background-color: yellow;
}

</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.
6. Cierre el archivo e6.html. Deje la herramienta de edicin y el explorador web abiertos
si va a continuar con la siguiente seccin.

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:
<!-- Este es el contenido de e7.html. -->
<!doctype html>
<html>
<head>
<title>Desbordamiento de desplazamiento</title>
<style type = "text/css">
#col1 {
width: 200px;
height: 200px;
background-color: lightskyblue;
desbordamiento de desplazamiento: scroll;
}
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 103

#col3 {
background-color: yellow;
}

</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>
<p id = 'col2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit
amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</p>
<p id = 'col3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit
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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 105

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.

RESUMEN DE CONOCIMIENTOS

En esta leccin ha aprendido lo siguiente:


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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
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 _________.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 107

Varias opciones
Rodee con un crculo la letra correspondiente a la mejor respuesta.
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
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
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.
Comprender los principios bsicos de CSS: flujo de contenido, posicionamiento yestilo | 109

Evaluacin de competencias
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.

Evaluacin de aptitudes
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
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
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
Comprender los principios bsicos de CSS: Diseos | 111

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
y elementos similares de pginas web y aplicaciones. Las cuadrculas son ms
apropiadas para diseos ms complejos.

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.
Comprender los principios bsicos de CSS: Diseos | 113

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
LISTO PARA CERTIFICACIN
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
tamao cambie, en horizontal y en vertical, cuando cambia el tamao de la pantalla
CONCLUSIN
en la que se visualizan. Tambin se puede invertir la direccin y el orden de las cajas
flexibles con una lnea de cdigo.

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.
Comprender los principios bsicos de CSS: Diseos | 115

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
flex-flow establece las propiedades flex-direction y flex-wrap de una caja flexible
(el cuadro primario) a la vez.

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.
Comprender los principios bsicos de CSS: Diseos | 117

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.

LISTO PARA CERTIFICACIN


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>
<meta charset="utf-8">
<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 el cuadro Secundario2.</p>
<p>Este es Secundario3.</p>
<p>Este es Secundario4.</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>
<meta charset="utf-8">
<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: limegreen;
height: 25px;
padding: 1em;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
</style>
</head>
Comprender los principios bsicos de CSS: Diseos | 119

<body>
<div>
<p>Este es el cuadro Secundario1.</p>
<p>Este es el cuadro Secundario2.</p>
<p>Este es Secundario3.</p>
</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>
<meta charset="utf-8" />
<title>Ejemplo de funcin flex</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;
Comprender los principios bsicos de CSS: Diseos | 121

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;
font-family: sans-serif;
text-align: center;
line-height: 100px;
font-size: xx-large;
}
</style>
</head>

<body>
<div>
<div>Servicio 1</div>
<div>Servicio 2</div>
<div>Servicio 3</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
elementos de caja flexible
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
a continuar con el siguiente ejercicio durante esta sesin.

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>
<meta charset="utf-8">
<title>Ejemplo de flex-flow</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;
Comprender los principios bsicos de CSS: Diseos | 123

display: -o-flexbox;
display: -webkit-flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
outline: 2px solid silver;
color: white;
font-family: sans-serif;
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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el marcado siguiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de orden inverso de elementos de caja flexible</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
Comprender los principios bsicos de CSS: Diseos | 125

-webkit-flex-flow: column;
height: 400px;
padding: 1em;
outline: 2px solid silver;
color: white;
font-family: sans-serif;
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
elementos de caja flexible
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.
7. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos
sivaa continuar con el siguiente ejercicio durante esta sesin.

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>
<meta charset="utf-8">
<title>Ejemplo de orden flexible</title>
<style media="screen">
div {
display: flexbox;
display: -ms-flexbox;
Comprender los principios bsicos de CSS: Diseos | 127

display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
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.
6. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos
sivaa continuar con el siguiente ejercicio durante esta sesin.

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
Comprender los principios bsicos de CSS: Diseos | 129

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


para crear estructuras de cuadrcula. El tamao de las columnas y filas puede ser fijo
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
Comprender los principios bsicos de CSS: Diseos | 131

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de cuadrcula</title>
<style type="text/css">
#grid {
background: palegoldenrod;
border: silver;
display: -ms-grid;
color: white;
font-family: sans-serif;
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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
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


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.

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;}
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.
Enconsecuencia, debe consultar la ltima especificacin del mdulo de diseo de
plantillade cuadrcula CSS de W3C al prepararse para el examen.

RESUMEN DE CONOCIMIENTOS

En esta leccin ha aprendido lo siguiente:


L as 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
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
y elementos similares de pginas web y aplicaciones. Las cuadrculas son ms
apropiadas para diseos ms complejos.
Tanto una caja flexible como su contenido se pueden configurar de forma que su
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.
Una caja flexible puede incluir cuadros secundarios flexibles en altura y anchura.
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.
Los diseos de cuadrcula se parecen a las hojas de clculo, ya que usan columnas,
filas y celdas. En realidad, puede crear diferentes tipos de diseos que, al final, no
se parecen a una hoja de clculo en absoluto.
Las propiedades display: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.
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
caja flexible y reorganizarlos con el orden que desee sin tener que cambiarlos en el
marcado HTML.
Una plantilla de cuadrcula utiliza caracteres alfabticos para representar la posicin de
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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
1. es la parte de un sitio o aplicacin web con la que interacta
elusuario.
2. En el modelo de cuadros CSS de W3C original, el es el espacio
entre el borde y el contenido del cuadro.
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
Rodee con un crculo la letra correspondiente a la mejor respuesta.
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
Comprender los principios bsicos de CSS: Diseos | 135

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
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
sielenunciado es 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

Evaluacin de competencias
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?

Evaluacin de aptitudes
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
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
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
LISTO PARA CERTIFICACIN
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>
<div id="region2" class="region"></div>
<div id="region3" 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
Administrar el flujo de texto mediante CSS | 141

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.
Administrar el flujo de texto mediante CSS | 143

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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de regiones CSS</title>
<style type="text/css">
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 id="region1" class="region"></div>
<div id="region2" class="region"></div>
</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,
Administrar el flujo de texto mediante CSS | 145

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.
10. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos
sivaa continuar con el siguiente ejercicio durante esta sesin.

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)
Administrar el flujo de texto mediante CSS | 147

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
LISTO PARA CERTIFICACIN
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
Administrar el flujo de texto mediante CSS | 149

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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tres columnas</title>
<style>
.tricolumn {
-moz-column-count: 3;
}
</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-count: 3;
-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
a continuar con el siguiente ejercicio durante esta sesin.

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.
Administrar el flujo de texto mediante CSS | 151

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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
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>
<meta charset="utf-8" />
<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.
3. Cierre el archivo pero deje la herramienta de edicin y el explorador web abiertos
sivaa continuar con el siguiente ejercicio durante esta sesin.

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.
Administrar el flujo de texto mediante CSS | 153

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.
Administrar el flujo de texto mediante CSS | 155

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.

RESUMEN DE CONOCIMIENTOS

En esta leccin ha aprendido lo siguiente:


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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
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
Rodee con un crculo la letra correspondiente a la mejor respuesta.
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
d. ninguna de las anteriores
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
Administrar el flujo de texto mediante CSS | 157

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
d. ninguna de las anteriores
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
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
sielenunciado es 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.

Evaluacin de competencias
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

Evaluacin de aptitudes
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
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
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


LISTO PARA CERTIFICACIN
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>
<meta charset="utf-8" />
<title>Esquinas redondeadas</title>
<style type="text/css">
div {
padding: 40px 40px;
background: dodgerblue;
width: 400px;
color: #fff;
font-family: sans-serif;
font-size: xx-large;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>

<body>
<div>Cuadro con esquinas redondeadas</div>
</body>
</html>
Administrar la interfaz grfica mediante CSS | 161

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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Esquinas redondeadas</title>
<style type="text/css">
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-family: sans-serif;
font-size: large;
text-align: center;
}
</style>
</head>
Administrar la interfaz grfica mediante CSS | 163

<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)
Administrar la interfaz grfica mediante CSS | 165

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
deaplicaciones si no est abierto.
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.
Administrar la interfaz grfica mediante CSS | 167

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.

LISTO PARA CERTIFICACIN


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);
Administrar la interfaz grfica mediante CSS | 169

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
LISTO PARA CERTIFICACIN
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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
padding: 20px 20px;
background: tomato;
width: 150px;
height: 75px;
color: #fff;
font-family: sans-serif;
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.
Administrar la interfaz grfica mediante CSS | 171

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.


LISTO PARA CERTIFICACIN
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

LISTO PARA CERTIFICACIN


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
deaplicaciones si no est abierto.
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.
Administrar la interfaz grfica mediante CSS | 173

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
si va a realizar el siguiente ejercicio durante esta sesin.

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>
<style type="text/css">
div
{
padding: 40px 40px;
background: #B8860B;
width: 150px;
174 | Leccin 7

color: #fff;
font-family: sans-serif;
font-size: xx-large;
}
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.
Administrar la interfaz grfica mediante CSS | 175

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.
<style type="text/css">
#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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de transicin y opacidad</title>
<style type="text/css">
#wrapper {
padding: 40px 40px;
background: dodgerblue;
width: 200px;
font-family: sans-serif;
font-size: xx-large;
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;
Administrar la interfaz grfica mediante CSS | 177

-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?
5. Cierre el archivo, pero deje la herramienta de edicin y el explorador web abiertos
siva a realizar el siguiente ejercicio durante esta sesin.

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 @
LISTO PARA CERTIFICACIN
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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<style type="text/css">
div { width: 200px;
height: 200px;
background: limegreen;
animation: a1 3s; }
@keyframes a1 { from {background: limegreen;}
to {background: dodgerblue;} }
</style>
</head>
Administrar la interfaz grfica mediante CSS | 179

<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?
5. Cierre el archivo, pero deje la herramienta de edicin y el explorador web abiertos
siva a realizar el siguiente ejercicio durante esta sesin.

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.
Administrar la interfaz grfica mediante CSS | 181

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
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<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

5. Cierre el archivo, pero deje la herramienta de edicin y el explorador web abiertos


siva a realizar el siguiente ejercicio durante esta sesin.

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).
Administrar la interfaz grfica mediante CSS | 183

El siguiente cdigo crea un cuadro de canvas bsico:


<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(10, 20, 200, 100);
}
</script>

<body onload = "f1();">


<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 = canvas.getContext("2d");
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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree un documento
HTML con el siguiente contenido:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de canvas</title>
<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "coral";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<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;
Administrar la interfaz grfica mediante CSS | 185

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.

RESUMEN DE CONOCIMIENTOS

En esta leccin ha aprendido lo siguiente:


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.

Evaluacin de conocimientos
Rellene los espacios en blanco
Complete las oraciones siguientes escribiendo la palabra o palabras correctas en los
espacios en blanco proporcionados.
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
Rodee con un crculo la letra correspondiente a la mejor respuesta.
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
Administrar la interfaz grfica mediante CSS | 187

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
d. ninguna de las anteriores
188 | Leccin 7

Verdadero/Falso
Haga un crculo alrededor de la V si el enunciado es verdadero o alrededor de la F
sielenunciado es 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.

Evaluacin de competencias
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?

Evaluacin de aptitudes
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
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
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.
Comprensin de los principios bsicos de JavaScript y codificacin| 193

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
conelsiguiente contenido:
<!doctype html>
<html>
<head>
<title>Primer uso de una funcin</title>
<script type = "text/javascript">
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.
Comprensin de los principios bsicos de JavaScript y codificacin| 195

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.
4. 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.

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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree L8-js3.html
conelsiguiente contenido:
<!doctype html>
<html>
<head>
<title>Primer uso de una variable</title>
<script type = "text/javascript">
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.
5. 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.
Comprensin de los principios bsicos de JavaScript y codificacin| 197

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:
1. En una herramienta de edicin o de desarrollo de aplicaciones, cree L8-js4.html
conelsiguiente contenido:
<!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>
<script type = "text/javascript">
// 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();