1.

AplicacionesWeb
1.1Definicin
Llamadas webapps, esta categora de software
centrado en redes agrupa un amplia gama de
aplicaciones. En su forma ms sencilla, las web apps son
poco ms que un conjunto de archivos de hipertexto
vinculados, que presentan informacin con uso de texto y
grficas limitadas. Sin embargo, desde que surgi web
2.0 , las web apps estn evolucionando hacia ambientes
de computo sofisticados que no solo proveen
caractersticas aisladas, funciones de computo y
contenido para el usuario final, sino que tambin estn
integradas con bases de datos corporativas y aplicaciones
de negocios.
 Una pgina web est compuesta principalmente por
informacin (slo texto y/o mdulos multimedia) as
como por hiperenlaces; adems puede contener o asociar
Hoja de estilo (datos de estilo para especificar cmo debe
visualizarse) y tambin Aplicacin informtica
(aplicaciones embebidas para as hacerla interactiva).
Las paginas web siguen dos tipos de arquitectura cliente
servidor.
La arquitectura de dos niveles, la cual solo tiene un servidor web
y sus clientes
La arquitectura de tres niveles, en la cual se tiene un servidor
web, un servidor de base de datos (o cualquier otro tipo de
servidor) y sus clientes
 1.2Atributos
Lagranmayoradelaswebappspresentalossiguientes
atributos:
Uso intensivo de redes: Una webapp reside en una red y debe
atender las necesidades de una comunidad diversa de clientes.
La red permite acceso y comunicacin mundiales (p.ej. La
internet) o tiene acceso y comunicacin limitados (p.ej. Una
intranet).
Concurrencia: A la webapp puede acceder un gran numero de
usuarios a la vez. En muchos casos, los patrones de uso entre los
usuarios finales varan mucho.
Carga Impredecible: El numero de usuarios de la webapp cambia
en varios ordenes de magnitud de un da a otro.
Rendimiento: Si un usuario de la webappp debe esperar
demasiado, l o ella quiz decidan irse a otra parte.
 Disponibilidad: Aunque no es razonable esperar una
disponibilidad del 100%, es frecuente que los usuarios de
webapps populares demanden acceso las 24 hrs de los 365 das
del ao.
Orientadas a Objetos: Ademas, las webapps se utilizan en forma
comn para acceder a informacin que existe en bases de datos
que no son parte integral del ambiente basado en la web (por
ejemplo, comercio electrnico o aplicaciones financieras)
Contenido sensible: La calidad y naturaleza esttica del
contenido constituye un rasgo importante de la calidad de una
webapp.
Evolucin continua: No es raro que ciertas webapps
(especficamente su contenido) se actualicen minuto a minuto.
Seguridad: Con el fin de proteger el contenido sensible y brindar
modos seguro de transmisin de los datos, deben
implementarse medidas estrictas de seguridad a travs de la
infraestructura de apoyo de una webapp y dentro de la misma
aplicacin.
Esttica: Parte innegable del atractivo de una webapp es su
apariencia y percepcin.
 1.3AplicacionesWebEstticas

Los sitios Web estticos son aquellos sitios enfocados

principalmente a mostrar una informacin permanente,
donde el navegante se limita a obtener dicha
informacin, sin que pueda interactuar con la pgina Web
visitada, las Web estticas estn construidas
principalmente con hipervnculos o enlaces (links) entre
las pginas Web que conforman el sitio, este tipo de Web
son incapaces de soportar aplicaciones Web como
gestores de bases de datos, foros, consultas online, e
mails inteligentes
 Inicialmente, las paginas web eran estticas, en el sentido
de que, a efectos de usuario, el nico proceso realizado
era el de visualizacin de sus contenidos (escritos en
lenguaje HTML) por parte del explorador del cliente.
Las paginas estticas se siguen utilizando ampliamente
debido a que forman la base necesaria para la
presentacin de datos en muchos tipos de situaciones.
La principal ventaja de este tipo de pginas es lo
econmico que puede resultar sin embargo pueden con
toda seguridad llenar las expectativas deseadas, con un
diseo elegante, moderno y funcional incluyendo las
imgenes y el texto. Estas paginas web tienen un costo
mucho menor que las paginas web dinmicas.
 Fases en la obtencin de un documento esttico
1. El usuario pulsa sobre un enlace solicitando un documento y el
navegador enva la peticin al servidor utilizando el protocolo
HTTP.
2. La solicitud llega al servidor Web correspondiente a travs de la
red. El servidor localiza el documento solicitado.
3. El servidor lee el documento del sistema de ficheros y enva al
cliente que realiz la peticin una copia exacta del mismo.
4. El documento llega al cliente y se visualiza el contenido en el
navegador del usuario.
 1.3.1HTML(Hipertext Markup
Language)
Es el lenguaje que se utiliza para crear paginas Web.
Consta de un conjunto de elementos, denominados
etiquetas o marcas, que se utilizan para incluir texto,
dibujos, tablas, cabeceras, etc. HTML permite crear
paginas con diversos contenidos como texto, tablas,
listas, imgenes, etc. Todas estas paginas tienen una
estructura bsica que si bien no afecta a la apariencia de
las mismas, es necesaria para los navegadores y los
buscadores de INTERNET saquen provecho de ellas.
 Una pagina HTML est formada por dos secciones:
cabecera y cuerpo. En la cabecera se incluye la
informacin para el navegador, mientras que el cuerpo
contiene la informacin que se desea mostrar al usuario.
La primera descripcin de HTML disponible pblicamente
fue un documento llamado HTML Tags (Etiquetas HTML),
publicado por primera vez en Internet por Tim Berners
Lee en 1991. Describe 22 elementos que incluyen el
diseo inicial y relativamente simple de HTML. Trece de
estos elementos todava existen en HTML 4. En 1993 se
comenz a estandarizar.
http://www.w3schools.com/
http://www.w3.org/standards/
 1.4PginasWebDinmicasenel
Servidor.
Pagina Web Dinmica.Son aquellos que permiten crear
aplicaciones dentro de la propia Web, otorgando una mayor
interactividad con el navegante. Aplicaciones dinmicas
como encuestas y votaciones, foros de soporte, libros de
visita, envo de emails inteligentes, reserva de productos,
pedidos online, atencin al cliente personalizada ....
El desarrollo de las pginas Web Dinmicas son mas
complicadas, pues requieren conocimientos especficos de
lenguajes de programacin as como creacin y gestin de
bases de datos, pero la enorme potencia y servicio que otorgan
este tipo de pginas hace que merezca la pena la inversin y
esfuerzo invertidos respecto a los resultados obtenidos
 Las paginas Web Dinmicas en el servidor se caracterizan
porque los cmputos asociados a las paginas se realizan en el
equipo servidor. De esta manera, los visualizadores de los
clientes reciben nicamente instrucciones HTML. Por lo tanto,
la complejidad del sistema se traslada a los equipos servidores,
liberando de carga a los equipos de los usuarios.
Fases en la obtencin de un documento dinmico en el
servidor
1. El usuario pulsa sobre el enlace, solicitando el recurso (fichero con
extencion .php o .asp) y el navegador enva la solicitud al servidor
mediante el protocolo HTTP.
2. Llega la solicitud al servidor y ste localiza el documentos. Por la
extensin determina que debe ser compilado y lo lanza al
interprete.
3. El interprete ejecuta el script (.php o asp) generando un archivo
HTML lo transfiere al servidor para que ste a su vez lo transfiera
cliente que hizo la peticin.
4. Se visualiza el documento generado dinmicamente en el
navegador del usuario.
1.4.1ASP(ActiveServerPages)

Es un lenguaje de programacin, la cual es una tecnologa de

Microsoft del tipo "lado del servidor" para pginas web
generadas dinmicamente, que ha sido comercializada como un
anexo a Internet Information Services (IIS).
La tecnologa ASP est estrechamente relacionada con el
modelo tecnolgico y de negocio de su fabricante. Intenta ser
solucin para un modelo de programacin rpida ya que
"programar en ASP es como programar en Visual Basic y C#", por
supuesto con muchas limitaciones y algunas ventajas especficas
en entornos web.
 ASP permite compatibilizar la creacin de paginas web
activas en el cliente y en el servidor, pudindose as
balancear la carga de proceso y de comunicaciones
Est limitada (la tecnologa ASP) a funcionar solo en
Microsoft Windows, pues requiere el servidor IIS (existen
opciones alternativas como modmono para Apache que
nos permite utilizar esta tecnologa en otros sistemas
operativos); aunque en las versiones "9x" de Microsoft
Windows era posible instalar Microsoft Personal Web
Server (PWS) y de esa manera usar asp. Tambin puede
instalarse software de terceros como por ejemplo Baby
Web Server.
1.4.2PHP(Hipertext PreProcesor)

Es un lenguaje de programacin que permite entre otras cosas,

la generacin dinmica de contenidos en un servidor web.
PHP fue originalmente creado por Rasmus Lerdof a principios de
1995 como unconjunto de utilidades escritas en lenguaje Perl
(llamadas PHP/FI y posteriormente PHP 2.0) que permitan
aadir dinamismo a las paginas Web. Fue completamente
rediseado por Zeev Suraski y Andi Gutmans y en 1998 lo
nombraron como PHP 3.0. En el ao 2000 se rediseo dando
como resultado el PHP 4.0. A mediados del 2004 fue liberada la
versin 5.0
 Las caractersticas fundamentales de PHP son las siguientes:
Potente y robusto lenguaje embebido en documentos HTML.
Dispone de extensiones para la conexin con la gran mayora de
los sistemas de gestin de bases de datos. (Oracle, Postgres,
MySQL, SQL Server.
Proporciona soporte a mltiples protocolos de comunicaciones
en Internet
Cdigo fuente abierto, es decir, que esta accesible a cualquier
persona para hacerle mejoras o adecuarlo a sus necesidades
(PHP a sido Creado en Lenguaje C).
Gratuito
Portable o Multiplataforma.
Eficiente
Alta velocidad de desarrollo.
1.5AplicacionesWebDinmicasen
Cliente
Una pgina web se considera dinmica en cliente
cuando esta diseada para que se interprete (o ejecute)
cdigo relacionado con la pagina, en el equipo del
usuario.
Entre las ventajas que presenta este tipo de paginas con
respecto a las paginas dinmicas en el servidor son:
Liberan al servidor de una gran carga de cmputo
Disminuye una gran cantidad de ancho de banda empleado en
comunicaciones.
Normalmente ofrecen respuestas inmediatas al usuario
Permiten la validacin interactiva de datos en formularios.
 Las paginas dinmicas en cliente tambin presentan sus
inconvenientes:
Incompatibilidad en diferentes navegadores web
En ocasiones poco seguras
A veces los navegadores no se pueden actualizar con facilidad
para cubrir las nuevas tecnologas.
 1.5.1JavaScript
La forma ms habitual para dotar de dinamismo en cliente a una
pagina web, es el uso de SCRIPTS (guiones).La utilizacin del
lenguaje de guiones JavaScript est muy extendido en las
aplicaciones web. Los script de una pagina web nos permiten la
ejecucin de cdigo, habitualmente asociado a eventos. Estos
eventos se generan mayoritariamente a partir de las acciones
que realiza el usuario con la pagina (pulsar un botn, seleccionar
una casilla de verificacin, entrar en el mbito de una caja de
texto, etc.)
 Lasaplicaciones mas habituales de los lenguajes de
guiones son:
Validar datos en el cliente y comprobar la consistencia de los
valores antes de mandar un formulario (como, por ejemplo,
comprobar que una fecha tiene un rango adecuado y un formato
correcto).
Actualizar campos relacionados en formularios ( por ejemplo,
establecer las opciones de una lista desplegable).
Realizar procesamientos que no requieran la utilizacin de
informacin centralizada (por ejemplo, convertir pesetas en
euros, visualizar el calendario del mes actual, etc.)
Servir de base para la utilizacin de otras tecnologas
1.5.2CSS(Cascade StyleSheets)
HojasdeEstiloenCascada
CSS define como se debe visualizar o disponer un contenido en
la pgina del navegador. Para ello hay que definir, mediante
reglas, las propiedades de presentacin de los elementos que se
deseen.
Hay tres formas de definir Estilos y son los siguientes:
Usando el atributo style. El atributo "style" permite a los
autores declarar propiedades de estilo "en lnea" como valor de un
atributo. Es til cuando el autor necesita declarar un conjunto
nico de propiedades para un elemento especfico. La sintaxis para
las propiedades CSS son las mismas.
<p style="padding: 10px; borderstyle: solid; bordercolor: blue; border
width: 2px; backgroundcolor: #9EC7EB; color: white; fontfamily:
arial,helvetica; fontsize: 11px; fontweight: bold;">Contenido del
prrafo</p>
 Utlizando la etiqueta <style>
El elemento HTML style define un bloque donde las declaraciones
de estilo pueden ser contenidas. El bloque de estilo debe ser
declarado en algn lugar del encabezado del documento (elemento
HTML head) y definir estilos y clases para el documento actual.
<style type="text/css">
p{
padding:10px;
borderstyle:solid;
bordercolor:blue;
borderwidth:2px;
backgroundcolor:#9EC7EB;
color:white;
fontfamily:arial,helvetica;
fontsize:11px;
fontweight:bold;
}

a{
fontsize:12px;
fontweight:bold;
}
</style>
 Usandoarchivosexternos
Los archivos externos tambin pueden ser utilizados para definir
propiedades de estilo para uno o ms documentos. El archivo,
usualmente presenta la extensin "css" (por ejemplo, "basic.css")
y el conjunto de propiedades puede ser definido de la misma
forma que en el contenido del elemento HTML style. Esta
prctica separa completamente la parte semntica de la
presentacin del documento, mientras ayuda a los autores a
compartir definiciones de estilo entre varias pginas de sitio.
Para hacer referencia a un archivo CSS desde el documento
HTML, puedes usar el tag HTML link en el encabezado del
mismo. Esta declaracin le dice al agente de usuario, dnde se
pueden encontrar las declaraciones de estilo de este documento.
<link type="text/css" href="basico.css" />
Usar esta misma lnea en diferentes documentos, te permitir
especificar atributos comunes a un conjunto de pginas (o
inclusive a un sitio entero), lo que puede resultar en
actualizaciones ms sencillas.
 1.6Ciclodevidadelsoftware

Tambin llamado por algunos autores como Proceso del

software; la estructura de este proceso establece el
fundamento para el proceso completo de la ingeniera de
software por medi0 de la identificacin de un numero
pequeo de actividades de un nmero pequeo de
actividades estructurales que sean aplicables a todos los
proyectos de software, sin importar su tamao o
complejidad.
 1.6.1Comunicacin

Antes de que comience cualquier trabajo tcnico, tiene

importancia critica comunicarse y colaborar con el cliente
(y otros participantes). Se busca entender los objetivos de
los participantes respecto del proyecto, y reunir los
requerimiento que ayuden a definir las caractersticas y
funciones del software.
 1.6.1.1DiagramasdeCasodeUso

Uncasodeusodescribeelcomportamientodelsistema
endistintascondicionesenlasqueelsistemarespondea
unapeticindealgunodelosparticipantes.Enesencia,
uncasodeusonarraunahistoriaestilizadasobrecmo
interactaunusuariofinal(quetieneciertonmerode
rolesposibles)conelsistema.
 1.6.2Planeacin

Planeacin: Cualquier viaje complicado se simplifica si

existe un mapa. Un proyecto de software es un viaje
difcil, y la actividad de planeacin crea un mapa que
gua al equipo mientras viaja. El mapa (llamado plan del
proyecto de software) define el trabajo de ingeniera de
software al describir las tareas tcnicas por realizar, los
riesgos probables, los recursos que se requieren, los
productos del trabajo que se obtendrn y una
programacin de la actividades.
 1.6.3Modelado

Ya sea usted diseador de paisaje, constructor de

puentes, ingeniero aeronutico, carpintero o arquitecto, a
diario trabaja con modelos. Crea un bosquejo del objeto
por hacer, a fin de entender el panorama general. Si se
requiere refina el bosquejo con ms y ms detalles en un
esfuerzo por comprender mejor el problema y cmo
resolverlo. Un ingeniero de software crea modelos a fin
de entender mejor los requerimientos del software y el
diseo que llene las expectativas del cliente.
 1.6.3.2Arquitecturasdeprograma
principal/subprograma

Esta estructura clsica de programa descompone una

funcin en una jerarqua de control en la que un programa
principal invoca cierto numero de componentes de
programa que a su vez invoca a otros.
 1.6.4Construccin

Estaactividad combina la generacin de

cdigo y las pruebas que se requieren para
descubrir errores en este.
La forma ms eficaz de solucionar errores
en el cdigo, es por mdulos, es decir, por
pagina web realizada y al final probar todos
los mdulos como una unidad.
 1.6.5Despliegue
El software (como entidad completa o
como un incremento parcialmente
terminado) se entrega al consumidor o
cliente que lo evala y que le da
retroalimentacin, misma que se basa en
dicha evaluacin.
Algunas corporaciones de software ofrecen
de manera gratuita la versin beta al
consumidor y as poder recopilar datos
sobre defectos o comentarios de mejora.
 UNIDADII
HTMLBASICO
 1.EtiquetasoMarcasBsicas

La mayora de las etiquetas de HTML se desdoblan en

dos, uno de comienzo y una de fin. Todas las etiquetas
tanto las de cierre como las de apertura comienzan con el
smbolo < y terminan con el smbolo >. Las etiquetas
de cierre tienen el mismo nombre que las de apertura,
pero van precedidas por el smbolo /.
<ETQ1></ETQ2>
 Casi todas las etiquetas de HTML disponen de atributos
que permiten definir caractersticas del elemento al que
califican. Los atributos se incluyen dentro de la etiqueta
de apertura de la siguiente forma:
<ETQ1atributo1=valoratributo2=valor>
Las etiquetas que se introducen en un documento HTML
no son visibles cuando se muestran en un navegador web.
Cuando un usuario solicita una pgina HTML a un
servidor Web , este enva la pagina tal cual (incluidas las
etiquetas y sus atributos). En el momento en que el
explorador recibe la pgina, interpreta las etiquetas que
esta contiene junto con los atributos de las mismas,
mostrando al usuario el resultado fina (sin etiquetas)
 1.1EstructuraGlobal

Los documentos HTML se encuentran estrictamente

organizados. Cada parte del documento est
diferenciada, declarada y determinada por etiquetas
especificas. En esta unidad se vera cmo construir la
estructura global de un documento HTML y los nuevos
elementos semnticos incorporados en HTML 5.
 1.1.1<!DOCTYPE>

En primer lugar se necesita indicar el tipo de documento

que estamos creando. Esto en HTML es extremadamente
sencillo:
<!DOCTYPE html>
Esta lnea debe ser la primera lnea del archivo, sin
espacios o lneas que la precedan. De esta forma, el modo
estndar del navegador es activado y las incorporaciones
de HTML son interpretadas siempre que sea posible, o
ignoradas en caso contrario.
 1.1.2<html>
Luego de declarar el tipo de documento, debemos comenzar a
construir la estructura HTML. Como siempre, la estructura tipo
rbol de este lenguaje tiene su raz en el elemento <html>.
Este elemento envolver al resto del cdigo:
<!DOCTYPE html>
<html lang=es>

</html>
El atributo lang en la etiqueta de apertura <html> es el nico
atributo que necesitamos especificar. Este atributo define el
idioma del contenido del documento que estamos creando, en
este caso el valor del atributo toma el valor de es por
espaol.
 1.1.3<head>
El cdigo HTML insertado entre las etiquetas <html>
tiene que ser dividido entre dos secciones principales, la
primera seccin es la cabecera y la segunda el cuerpo. El
siguiente paso ser crear estas dos secciones.
El elemento <head> va primero, por su puesto, y al igual
que el resto de los elementos estructurales tiene una
etiqueta de apertura y una de cierre:
<!DOCTYPE html>
<html lang=es>
<head>

</head>
</html>
 1.1.4<body>
La siguiente gran seccin que es parte principal de la
organizacin de un documento HTML es el cuerpo. El
cuerpo representa la parte visible de todo documento y
es especificado entre las etiquetas <body>
<!DOCTYPE html>
<html lang=es>
<head>

</head>
<body>

</body>
</html>
 1.1.5<meta>
Algunos cambios e innovaciones fueron incorporados
dentro de la cabecera, y uno de ellos es la etiqueta que
define el juego de caracteres a utilizar para mostrar el
documento. sta etiqueta especifica cmo el texto ser
presentado en pantalla.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
</head>
<body>

</body>
</html>
 La innovacin de este elemento en HTML5, como en la
mayora de los casos, es solo simplificacin. La nueva etiqueta
<meta> para la definicin del tipo de caracteres es ms corta y
simple. Por supuesto, podemos cambiar el utf8 por el
necesario para nuestros documentos y agregar otras etiquetas
<meta> como description o keywords para definir otros
aspectos de la pagina web, como es mostrado en el siguiente
ejemplo:
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6,
Javascript>
</head>
<body>
</body>
</html>
 1.1.6<title>
Laetiqueta <title>, simplemente especifica el titulo del
documento.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6, Javascript>
<title>Nombre de la Pagina Web</title>
</head>
<body>
</body>
</html>
Favicon

Visualizacindelaetiqueta<title>
 1.1.7<link>

Otro importante elemento que va dentro de la cabecera

del documento es <link>. Este elemento es usado para
incorporar estilos, cdigos Javascript, imgenes o iconos
desde archivos externos. Uno de los usos ms comunes
para <link> es la incorporacin de archivos con estilo CSS.
 <!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6, Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
</body>
</html>
El atributo rel significa relacin y es acerca de la relacin
entre el documento y el archivo que estamos incorporando por
medio de href. En este caso, el atributo rel tiene el valor de
stylesheet que le dice al navegador que el archivo
misestilos.css es un archivo CSS.
 1.2CuerpodelaPginaWeb
La estructura del cuerpo (el cdigo entre las etiquetas <body>)
generar la parte visible del documento. Este es el cdigo que
producir nuestra pagina web.
La etiqueta <body> tiene asignados un conjunto de atributos
que permiten cambiar la apariencia de la pagina, como es el
color de fondo, la imagen de fondo, el color del texto de los
hipervnculos, etc. Esto es gracias a los CSS (estilos en
cascada).
En anteriores versiones de HTML, la etiqueta <table> se
utilizaba para dar forma a una pagina web, despus apareci
<div> y el uso de <div> se volvi una prctica comn. Pero este
elemento, as como <table>, no provee demasiada informacin
acerca de las partes del cuerpo que est representado.
Considerando lo anterior, HTML 5 incorpora nuevos elementos
que ayudan a la identificacin de cada seccin del documento
y organizar el cuerpo mismo. En HTML 5 las secciones mas
importantes son diferenciadas y la estructura principal ya no
depende ms de los elementos <div> o <table>.
 1.2.1Organizacin
La Figura 2.1 representa un diseo comn encontrado en la
mayora de los sitios webs estos das. A pesar del hecho de que
cada diseador crea sus propios diseos, en general podremos
identificar las siguientes secciones en cada sitio web estudiado.
En la parte superior, descrito como Cabecera, se encuentra el
espacio donde usualmente se ubica el logo, titulo, subttulos y
una corta descripcin del sitio web o la pgina.
Inmediatamente debajo, podemos ver la Barra de Navegacin
en la cual casi todos los desarrolladores ofrecen un men o lista
de enlaces con el propsito de facilitar la navegacin a travs del
sitio. Los usuarios son guiados desde esta barra hacia las
diferentes paginas o documentos.
Figura2.1Representacindeun
clsicositioWeb
 El contenido ms relevante de una pgina web se encuentra, en
casi todo diseo, ubicado en el centro. Esta seccin presenta
informacin y enlaces valiosos. La mayora de las veces es
dividida en varia filas y columnas. En el ejemplo de la Figura 2.1
se utilizaron solo dos columnas: Informacin Principal y Barra
Lateral, pero esta seccin es extremadamente flexible.
La Informacin Principal podra contener una lista de artculos,
descripcin de productos, entradas de un blog o cualquier otra
informacin importante.
La Barra Lateral podra mostrar una lista de enlaces apuntando
hacia cada uno de esos tems.
En la base de un diseo web clsico siempre nos encontramos
con una barra ms que aqu llamamos Institucional. La
nombramos de esta manera porque esta es el rea en donde
normalmente se muestra informacin acerca del sitio web, el
autor o la empresa, adems de algunos en laces con respecto a
reglas, trminos y condiciones y toda la informacin adicional
que el desarrollador considere importante compartir. La barra
Institucional es un complemento de la Cabecera y es parte de lo
que se considera en es tos das la estructura esencial de una
pagina web.
Figura2.2Representacindeunclsico
sitioWebutilizandoelementosHTML5
 HTML 5 considera esta estructura bsica y provee nuevos
elementos para diferenciar y declarar cada una de sus
partes. A partir de ahora podemos decir al navegador
para que es cada seccin.
La Figura 2.2 muestra el tpico diseo presentado
anteriormente, pero esta vez con los correspondientes
elementos HTML 5 para cada seccin (incluyendo
etiquetas de apertura y cierre)
 1.2.2<header>
Uno de los nuevos elementos incorporados en HTML5 es
<header>. El elemento <header> no debe ser confundido con
<head> usado antes para construir la cabecera del documento.
Del mismo modo que <head>, la intencin de <header> es
proveer informacin introductoria (ttulos, subttulos, logos),
pero difiere con repecto a <head> en su alcance. Mientras el
elemento <head> tiene el propsito de proveer informacin
acerca del documento, <header> es usado para el cuerpo o
secciones especificas dentro del cuerpo.
La insercin del elemento <header> representa el comienzo
del cuerpo y por lo tanto de la parte visible del documento. De
ahora en adelante ser posible ver los resultados de nuestro
cdigo en la ventana del navegador.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6,
Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
<header>
<h1> Este es el ttulo principal del sitio web</h1>
</header>
</body>
</html>
 El elemento <h1> es un viejo elemento HTML usado para
definir ttulos. El nmero indica la importancia del ttulo.
El elemento <h1> es el ms importante y <h6> el de
menor importancia, por lo que <h1> ser utilizada para
mostrar el ttulo principal.
 1.2.3<nav>
La siguiente seccin es la Barra de Navegacin. Esta barra es
generada en HTML5 con el elemento <nav>. El elemento
<nav> se encuentra dentro de las etiquetas <body> pero es
ubicado despus de la etiqueta de cierre de la cabecera
(</header>), no dentro de las etiquetas <header>. Esto es
porque <nav> no es parte de la cabecera sino una nueva
seccin. La versatilidad de HTML5 permite tener la etiqueta
<nav> dentro de la etiqueta <header>.
Entre las etiquetas <nav> hay dos elementos que son
utilizados para crear una lista. El propsito del elemento <ul>
es definir la lista. Anidado entre las etiquetas <ul>
encontramos varias etiquetas <il> con diferentes textos
representando las opciones del men. Las etiquetas <li> son
usadas para definir cada tem de la lista.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6,
Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
<header>
<h1> Este es el ttulo principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contactos</li>
</ul>
</nav>
</body>
</html>
 1.2.4<section>

Siguiendo nuestro diseo estndar nos encontramos con

las columnas de la figura 2.2 llamamos Informacin
Principal y Barra Lateral. La Informacin Principal
contiene la informacin ms relevante y puede ser
encontrada en diferentes formas (por ejemplo, dividida
en varios bloques o columnas). Debido a que el propsito
de estas columnas es ms general, el elemento en HTML5
que especifica estas secciones se llama simplemente
<section>
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6,
Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
<header>
<h1> Este es el ttulo principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contactos</li>
</ul>
</nav>
<section>
</section>
</body>
</html>
 Al igual que la Barra de Navegacin, la columna
Informacin Principal es una seccin aparte. Por este
motivo, la seccin para la Informacin Principal va
debajo de la etiqueta de cierre </nav> .
En HTML5, la responsabilidad por la presentacin de los
elementos en la pantalla es delegada a CSS.
 1.2.5<aside>
En un tpico diseo web, la columna llamada Barra Lateral se
ubica al lado de la columna Informacin Principal. Esta es una
columna o seccin que normalmente contiene datos
relacionados con la informacin principal pero que no son
relevantes o igual de importantes.
En el diseo de un blog, por ejemplo, la Barra Lateral
contendr una lista de enlaces, los enlaces apuntan a cada una
de las entradas del blog y ofrece informacin adicional sobre el
autor.
En HTML5 podemos diferenciar esta clase secundaria de
informacin utilizando el elemento <aside>:
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6, Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
<header>
<h1> Este es el ttulo principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contactos</li>
</ul>
</nav>
<section>
</section>
<ASIDE>
<blockquote>Mensaje nmero 1</blokquote>
</ASIDE>
</body>
</html>
 1.2.6<footer>

Para finalizar la construccin de la plantilla o estructura

elemental de nuestro documento HTML5, solo
necesitamos un elemento ms, por lo que necesitamos
un elemento ms para otorgarle un final al cuerpo del
documento. Html5 provee un elemento especifico para
este propsito llamado <footer>:
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6, Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
<header>
<h1> Este es el ttulo principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contactos</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>mensaje nmero 1</blokquote>
</aside>
<FOOTER>
DERECHOS RESERVADOS CPOYRIGHT 2013
</FOOTER>
</body>
</html>
 En el tpico diseo de una pgina web la seccin llamada
Institucional ser definida por etiquetas <footer>. Esto
es debido a que la barra representa el final (o pie) del
documento y esta parte del a pgina web es
normalmente usada para compartir informacin general
sobre el autor o la organizacin detrs del proyecto.
Esta etiqueta puede ser usado mltiples veces dentro del
cuerpo para representar tambin el final de diferentes
secciones.
 1.3Dentrodelcuerpo

La mayora de los elementos ya estudiados fueron

creados para construir una estructura para el documento
HTML que pueda ser identificada y reconocida por los
navegadores y nuevos dispositivos. Ms profundo nos
introduciremos dentro del documento, insertando la
informacin necesaria; esta informacin estar
compuesta por diferentes elementos visuales como
ttulos, textos, imgenes, videos y aplicaciones
interactivas, entre otros.
 1.3.1<article>

Del mismo modo que los blogs estn divididos en

entradas, sitios web normalmente presentan informacin
relevante dividida en partes que comparten similares
caractersticas. El elemento <article> nos permite
identificar cada una de las partes
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6, Javascript>
<title>Nombre de la Pagina Web</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
<header>
<h1> Este es el ttulo principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contactos</li>
</ul>
</nav>
<section>
<ARTICLE>
Este es el texto de mi primer mensaje
</ARTICLE>
<ARTICLE>
Este es el texto de mi segundo mensaje
</ARTICLE>
</section>
<aside>
<blockquote>mensaje nmero 1</blokquote>
</aside>
<footer>
derechos reservados cpoyright 2013
</footer>
</body>
</html>
 El elemento <article>
ARR1
no est limitado por su parte (no se
limita, por ejemplo, a artculos de noticias). Este
elemento fue creado con la intencin de contener
unidades independientes de contenido, por lo que puede
incluir mensajes de foros, artculos de una revista digital,
entradas de blog, comentarios de usuarios, etc. Lo que
hace es agrupar porciones de informacin que estn
relacionadas entre s independientemente de su
naturaleza.
Como una parte independiente del documento, el
contenido de cada elemento <article> tendr su propia
estructura. Para definir esta estructura, podemos
aprovechar la versatilidad de los elementos <header> y
<footer>.
Diapositiva 76

ARR1 esto es para que el motor de busqueda identifique la parte en donde esta la informacion que busca el usuario (Previsualizacin)
Adolfo Reyes Roman, 29/01/2013
 Los dos mensajes insertados en el cdigo anterior fueron
construidos con el elemento <article> y tiene una
estructura especifica. En la parte superior de estructura
incluimos las etiquetas <header> conteniendo el ttulo
definido con el elemento <h1> y sobre el final , luego del
texto, vienen las etiquetas <footer> especificando la
cantidad de comentarios recibidos.
 1.3.2<hgroup>
Dentro de cada elemento <header>, en la parte superior del
cuerpo o al comienzo de cada <article>, se incorporaron los
elementos <h1> para declarar un titulo. Bsicamente, las
etiquetas <h1> son todo lo que necesitamos para crear un
ttulo, pero en muchas ocasiones se necesitara utilizar
subttulos o ms informacin que especifique de qu se trata la
pgina web o una seccin en particular. Para crear este tipo de
cabeceras , se puede aprovechar el resto de las etiquetas H,
como <h2>, <h3>,,<h6>, pero siempre considerando que
por propsitos de procesamiento interno, y para evitar generar
mltiples secciones durante la interpretacin del documento
por parte del navegador, estas etiquetas deben ser agrupadas .
Por esta razn, HTML5 provee el elemento <hgroup>:
 Las etiquetas deben conservar su jerarqua, lo que
significa que debemos primero declarar la etiqueta <h1>,
luego usar <h2> para subttulos y as sucesivamente. Sin
embargo, a diferencia de anteriores versiones de HTML,
HTML5 nos deja reusar las etiquetas H y construir esta
jerarqua una y otras vez en cada seccin del documento.
El elemento <hgroup> es necesario cuando tenemos un
ttulo y subttulo o ms etiquetas H y esta fue la razn por
la que en nuestro ejemplo dejamos los datos adicionales
afuera. Si solo dispone de una etiqueta, <h1> o la
etiqueta <h1> junto con datos adicionales, no tiene que
agrupar estos elementos juntos.
Siempre hay que recordar que <hgroup> fue creado solo
con la intensin de agrupar etiquetas H, exactamente
como su nombre lo indica.
 1.3.3<figure>y<figcaption>

La etiqueta <figure> fue creada para ayudarnos a ser an

ms especficos a la hora de declarar el contenido del
documento. Nos referimos a como contenido, a images,
video o audio. Cuando uno se encuentra con esta clase de
informacin, las etiquetas <figure> pueden ser usadas
para identificarla:
 En el cdigo anterior, en el primer mensaje, luego del
texto insertamos una imagen (<img
src=http://minkbooks.com/content/myimage.jpg>).
Esta es una prctica comn, a menudo el texto es
enriquesido con imgenes o videos. Las etiquetas
<figure> nos permiten envolver estos complementos
visuales y diferenciarlos as de la informacin ms
relevante.
Tambin se puede observar un elemento extra dentro de
<figure> Normalmente, unidades de informacin como
imgenes o videos son descritas con un corto texto
debajo. HTML5 provee un elemento para ubicar e
identificar esos ttulos descriptivos. Las etiquetas
<figcaption> encierra el texto relacionado con <figure> y
establecen una relacin entre ambos elementos y su
contenido.
 1.4NuevosyViejosElementos

HTML5 fue desarrollado con la intencin de simplificar,

especificar y organizar el cdigo. Para logar este
propsito, nuevas etiquetas y atributos fueron agregados
y HTML fue completamente integrado a CSS y Javascript.
Estas incorporaciones y mejoras de versiones previstas
estn relacionadas no solo con nuevos elemento si no
tambin con cmo usamos los ya existentes.
 1.4.1<mark>

La etiqueta <mark> fue agregada para resaltar parte de

un texto que originalmente no era considerado
importante pero ahora es relevante de acorde con las
acciones del usuario. El ejemplo que ms se ajusta a este
caso es un resultado de bsqueda. El elemento <mark>
resaltar la parte del texto que concuerda con el texto
buscado.
 Si un usuario realiza una bsqueda de la palabra
conche, por ejemplo, los resultados podran ser
mostrados con el cdigo anterior. La frase del ejemplo
representa los resultados de la bsqueda y las etiquetas
<mark> en medio encierran lo que era el texto buscado.
En algunos navegadores, esta palabra ser resaltada con
un fondo amarillo por defecto, pero siempre podemos
sobre escribir estos estilos con los nuestros utilizados
CSS.
En el pasado, normalmente obtenamos similares
resultados usando el elemento <b>. El agregado de
<mark> tiene el objetivo de cambiar el significado y
otorgar un nuevo propsito para stos y otros elementos
relacionados:
 <em> es para indicar nfasis (reemplazando la etiqueta
<i> que utilizbamos anteriormente)
<strong> es para indicar importancia.
<mark> es para resaltar texto que es relevante de
acuerdo con las circunstancias.
<b> debera ser usado solo cuando no hay otro elemento
ms apropiado para situacin.
 1.4.2<small>

La nueva especificidad de HTML es tambin evidente en

elementos como <small>. Previamente este elemento
era utilizado con la intencin de presentar cualquier texto
con letra pequea. La palabra clave referenciaba el
tamao del texto, independientemente de su significado.
En HTML5, el nuevo propsito de <small> es presentar la
llamada letra pequea, como impresiones legales,
descargos, etc.
 1.4.3<cite>

Otro elemento que ha cambiado su naturaleza para

volverse ms especifico es <cite>. Ahora las etiquetas
<cite> encierran el ttulo de un trabajo, como un libro,
una pelcula, una cancin, etc.
 1.4.4<address>
El elemento <address> es un viejo elemento convertido
en un elemento estructural. No necesitamos usarlo
previamente para construir nuestra plantilla, sin embargo
podra ubicarse perfectamente en algunas situaciones en
las que debemos presentar informacin de contacto
relacionado con el contenido del elemento <article> o el
cuerpo completo.
Este elemento debera ser incluido dentro de <footer>,
como en el siguiente ejemplo:
 1.4.5<time>

En cada <article> de nuestro ultimo cdigo, se incluy la

fecha indicando cundo el mensaje fue publicado. Para
esto usamos un simple elemento <p> dentro de la
cabecera (<header>) del mensaje, pero existe un
elemento en HTML5 especifico para este propsito. El
elemento <time> nos permite declarar un texto
comprensible para humanos y navegadores que
representa fecha y hora.
 2.ModosdePresentarelTexto
En el cuerpo de una pgina HTML se pueden incluir
diversos elementos, de los cuales el ms comn es el
texto. HTML ofrece diversas etiquetas para dar formato
al texto de una pgina. En este apartado se han
clasificado estas etiquetas en tres grupos: formato
general, formato de texto y formato de texto con
significado especial.
HTML permite introducir texto con formato. Las
etiquetas que ofrecen formato de texto son: <BR>,
<DIV>, <HR>, <P>, <PRE>, y <SPAN>. La etiqueta
<CENTER> est obsoleta desde HTML4 y ha sido
sustituida por la etiqueta <DIV> (con el atributo align =
center) o <P> (con el atributo align = center).
 2.1Etiqueta<p>
La etiqueta <p> se utiliza para representar un prrafo.
Formato:
<p>Todo texto que se encuentra entre estas etiquetas es un
prrafo.</p>

Atributo Valor
align left,center,right yjustify
style Estilo
id nombre
class nombredelaclase
 2.2Etiqueta<br>

La etiqueta <br> se utiliza para crear un salto de lnea.

Formato:
Este texto tiene <br>varios saltos de lnea<br> para ver su
funcio<br>namiento
 2.3Etiqueta<hr>
Laetiqueta <hr> representa una lnea horizontal para
separar diferentes secciones de un documento.
Formato:
Seccin1
<hr>
Seccin2 Atributo Valor
<hr> align left,center,right
Seccin3 style Estilo
noshade nosade
size pixeles
width longitud
id nombre
class nombredelaclase
Ejemplo(PT_BR_P_HR.html)
 2.4Etiqueta<div>
La etiqueta <div> se utiliza para definir una seccin
dentro del documento.

Esta etiqueta se usa comnmente para agrupar un bloque

de elementos, para luego aadirle un estilo determinado.
Formato:
<div>
<etiquetas>
</etiquetas>
</div>
Atributo Valor
align left,center,right,justify
style Estilo
id nombre
class nombredelaclase
 2.5Etiqueta<pre>
La etiqueta <pre> le indica a los navegadores que se trata
de un texto preformateado.
Los textos preformateados tienen las siguientes
caractersticas:
Se representan con un tipo de fuente de ancho fijo.
Respetan los saltos de lnea.
Respetan los espacios en blanco.
Formato:
<pre>parrafo </pre>
 2.6Etiqueta<span>

La etiqueta <span> se utiliza para aadir estructura a una

parte de un texto.
Esta etiqueta se usa comnmente para aadir un estilo
determinado dentro de una seccin del texto.
Formato:
<span>texto</span>
Atributo Valor
style Estilo
id nombre
class nombredelaclase
 2.7EtiquetasdeFormatodeTexto
La etiqueta <h1> se utiliza como encabezado de una
seccin.
HTML cuenta con seis diferentes niveles de encabezados,
h1 el ms importante y h6 el menos importante.
Formato:
<h1>texto</h1>
Atributo Valor
<h2>texto</h2>
align left,center,right,justify
<h3>texto</h3>
style Estilo
<h4>texto</h4>
id nombre
<h5>texto</h5> class nombredelaclase
<h6>texto</h6>
Ejemplo
 3.Hiperenlaces

stos permiten relacionar paginas entre s. Esta

caracterstica da la posibilidad de organizar la
informacin en distintas pginas HTML enlazadas, de
forma que el usuario pueda seleccionar la que ms le
interese en cada momento.
Un hiperenlace puede hacer referencia a un punto
determinado de la pagina que lo contiene, a otra pgina
HTML o a un punto determinado de otra pgina HTML.
 Normalmente, los hipervnculos aparecen subrayados y
con un color distinto al resto del texto. La etiqueta que
utiliza HTML para definir un hiperenlace es <A>.
Todo aquello que aparezca en una pgina HTML entre las
etiquetas <A> y </A> se considera un hiperenlace.
Normalmente suele utilizarse texto e imgenes como
hiperenlaces.
 3.1HiperenlacesalMismo
Documento
Un hiperenlace a un mismo documento consta de dos partes:
una referencia y un destino. El destino se identifica por un
nombre. La referencia har alusin al nombre del destino, de
forma que cuando se seleccione el hiperenlace, el navegador
obtendr el nombre, lo buscar en el resto del documento y
una vez encontrado el destino identificado por ese nombre,
mostrara la pagina a partir de este.
La forma de definir un hiperenlace a un punto del mismo
documento es:
Para referencia: <a href=#nombre> texto del enlace</a>
Para el destino: <a name=nombre>texto del destino</a>
<span id=nombre>texto del destino</span>
Ejemplo
 3.2HiperenlacesaOtros
Documentos

Para incluir un hiperenlace de una pgina a otra se utiliza

la siguiente marca:
<a href=destino>texto del enlace</a>
El artributo href es absolutamente necesario en la
definicin de un hiperenlace. Si no se utiliza, el navegador
no entiende la marca <a> como un hiperenlace. El valor
asignado a la etiqueta href permite al navegador
identificar la pagina que debe cargar si el usuario pulsa el
texto del enlace.
 3.3HiperenlacesaContenidos
Especiales

Existelaposibilidaddepodercrearhiperenlacesa
ficherosconcontenidosespeciales
<ahref=documento.pdf>Enlaceafichero</a>
Cuandoelusuariopulseelenlace,elnavegadorbuscara
enlamaquinadelclienteelsoftwareparaabrirelarchivo.
 3.4HiperenlacesdeImgenes
LaetiquetadeHTMLquepermiteincluirunaimagenenuna
pginaes<IMG> susatributosmssignificativosson:
src: identificaelnombredelficheroquecontienelaimagen.
Alt: brevedescripcindelaimagen.Siunnavegadornopermite
mostrarlaimagen,estetextoesloquesemuestraalusuarioensu
lugar.
Align:ubicacinespacialdelaimagen(top,middle,bottom,left,
right).
Height:altodelaimagenenpixeles.
Width: anchodelaimagenenpixeles.
Border: anchoenpixelesdelbordedelaimagen.
Hspace: espaciohorizontalenpixelesalrededordelaimagen.
Vspace: espacioverticalenpixelesalrededordelaimagen.
 Lasimgenessepuedenutilizarparacrearhiperenlaces
grficosaotrosdocumentos.Todoloquesenecesitaeshacer
quelasetiquetas<IMG> aparezcaentrelasetiquetas<A> y
</A>
<ahref ="../pagina2.html"><img alt="imagen1"src ="../iconoconf.png"/></a>
 4.Listas

HTMLofrecelaposibilidaddeordenarlainformacinde
laspaginasutilizandolistas.Podemosdefinirdistintos
tiposdelistas:ordenadas,noordenadas,dedefiniciones
(glosario),mensydirectorios.
 4.1ListasOrdenadas

Laformahabitualdedefinirunalistaordenadaes:
<OLatributos>
<LIatributos>ElementodelaLista</LI>
<LIatributos>ElementodelaLista</LI>
</OL>
Lasetiquetas<OL>y</OL>marcanelcomienzoyelfin
deunalistaordenada.Parainsertarunelementoenla
listaseutilizalaetiqueta<LI>y</LI>(opcionalelcierre)
Ejemplo(L_ListaOrdenada1.html)
Ejemplo(L_ListaOrdenada3.html)
 4.2ListasNoOrdenadas

Laformahabitualdedefinirunalistanoordenadaes:
<ULatributos>
<LIatributos>ElementodelaLista</LI>
<LIatributos>ElementodelaLista</LI>
</UL>
Lasetiquetas<UL>y</UL>marcanelcomienzoyelfin
deunalistanoordenada.Parainsertarunelementoenla
listaseutilizalaetiqueta<LI>y</LI>(opcionalelcierre)
 Ejemplo
(L_ListaNoOrdenada1.html)
 Ejemplo
(L_ListaNoOrdenada2.html)
 5.Tablas
Unatablaestaformadaporceldasorganizadasenfilasy
columnas.Enunaceldasepuedeincluircualquieradelos
elementosvistosanteriormente.
 5.1TablaBsica

Laformadeincluirunatablaenunapaginaes:
<TABLEatributos>
<CAPTIONatributos>TitulodelaTabla</CAPTION>
<TRatributos>
<th atributos>textodelaceldadeencabezado</th>

<th atributos>textodelaceldadeencabezado</th>
</TR>
<TRatributos>
<td atributos>textodelaceldadelcuerpo</td>

<td atributos>textodelaceldadelcuerpo</td>

</TR>

</TABLE>
 Losatributosmsimportantesdelaetiqueta<table>son:
Align: alineacinhorizontaldelatabla
Border: determinalaaparicindeunbordeenlatablaydecada
unadesusceldas.
Width: determinaelanchodelatabla
Rules: Permitedefinirpordndeaparecernlosbordesdela
tabla(none,groups,rows,cols,all)
Cellpadding: espacioentreceldasysucontenido.
Ejemplo(T_TablaSimple.html)
 5.2FilasyColumnasAgrupadas
Lasfilassepuedenagruparporfilasdecabecera(<THEAD>),decuerpo
(<TBODY>)odepie(<TFOOT>)detabla.
Laformanormaldedefinirlaestructuradeunatablaconellaes:
<table>
<thead>
filasdelgrupodelacabecera
</thead>
<tbody>
filasdelgrupodelcuerpo
</tbody>
<tfoot>
filasdelgrupodelpiedelatabla
</tfoot>
</table>
 6.Formulario

Los formularios son la herramienta que ofrece HTML para

poder obtener informacin de un cliente que visita una
aplicacin web. De esta forma, un usuario puede enviar
datos y ordenes desde una pagina HTML para que sea
procesada.
Cada campo de datos de un formulario tiene un nombre y
un valor. Los datos introducidos por un usuario se pasan
al programa correspondiente como pares nombrevalor.
 6.1DiseodelFormulario
LaformadeincluirunformularioenunapginaHTMLes:
<FORMatributos>
Elementosdelformulario
</FORM>
DentrodeunapginaHTMLsepuedenincluirmsdeunformulario,
peroteniendoencuentaquenopuedenanidarsenisolaparse.La
etiqueta<FORM>permitedelimitarelformularioeindicarqudebe
hacerseconlainformacinqueusuariohayaintroducidoenlos
elementosdelformulario.
Losatributosprincipalesdeunformularioson:
Action: permitedeterminarladireccinurl delprogramaqueprocesalos
datosdelformulario.
Method: permiteindicarelmtodoquesevaautilizarparaenviarlosdatos
delformulario.stepuedetomardosvalores:GEToPOST.Normalmentese
utilizaPOST,queindicaquelosvaloresseenvenporlaentradaestandar.Si
seutilizaGET,losdatosseenvanunidosalURL.
 Laetiqueta<INPUT> permitedefinirdentrodeun
formularioalgunoselementosbsicosparaqueelusuario
introduzcainformacin.
Laetiqueta<INPUT>permiteincluirlossiguientes
elementosenunformulario:
Botones: paraenviarinformacin,borraruotrasacciones.
Imgenes: paraenviarinformacin.
Checkbox: Entradadedatosbooleana.
Radio: Camposexcluyentes.
Camposdetexto
Datosocultos
Camposdepassword
 Con <INPUT> pueden incluirse tres tipos de botones en
un formulario:
<INPUTtype=submitvalue=boton1>
<INPUTtype=resetvalue=boton2>
<INPUTtype=buttonvalue=boton1onclick=procedimiento()>
El primero al pulsarlo tiene como efecto enviar la
informacin del formulario, a la url indicada en el atributo
action del la etiqueta <FORM>.
El segundo tipo de botn tienen como efecto borrar los
datos que haya introducido el usuario en el formulario.
El ultimo botn tiene un efecto similar al primero; exepto
que en lugar de invocar el programa indicado en la url del
formulario, se invoca el procedimiento indicado en la
etiqueta por medio del atributo onclic.
 Existe la posibilidad de incluir una imagen que sustituya el botn submit.
Para ello basta con incluir:
<INPUT type=image src=imagen.gif>
Uno de los campos ms utilizados en los formularios es el texto. Este tipo de
campo se incluye en una pgina HTML de la siguiente manera:
<INPUT type=text name=nombre size=numero maxlength=numero>
El atributo size permite determinar el tamao del campo de caracteres.
Adems con el atributo maxlength se puede indicar el nmero mximo de
caracteres que se permite que el usuario introduzca en un campo de texto.
Un tipo de campo que puede ser til para solicitar informacin confidencial
es el de password. Este campo es similar al campo de texto , excepto que
cada carcter que introduce el usuario es *.
Otro campo que se puede incluir en un formulario es una lista de elementos
fijos, de los cuales el usuario puede seleccionar uno o varios. Este campo
tiene apariencia de lista desplegable. Para incluir campos de este estilo,
HTML ofrece dos etiquetas: <SELECT> y <OPTION>.
La primera permite dar un nombre al campo (atributo name), indicar su
apariencia (atributo size) y permitir la eleccin de un nico elemento o varios
(atributo multiple). La segunda se utiliza para definir cada una de las
opciones que se van a mostrar al usuario.
 6.2CamposdeunFormulario
Agrupado

Lasultimasetiquetasrelacionadasconlosformulariosson
<FIELDSET>y<LEGEND>.Noaadennuevoselementosde
entrada,peropermitenundiseomasaparentedelaspginas.
<FIELDSET> esunaetiquetaqueagrupaelementosdeun
formulario,creandounacajaalrededordelosmismos.
<LEGEND>permitedarunttuloalacajaquedibuja
<FIELDSET>.Elttulopuedeubicarseenlapartesuperior
(top),inferior(bottom),alaizquierda(left)oaladerecha
(right)delacajausandoelatributoalign.
 Ejemplo
(F_FormularioConGrupos.html)
 7.FormulariosenHTML5
La web 2.0 est completamente enfocada en el usuario. Y
cuando el usuario es el centro de atencin, todo esta
relacionado con interfaces, en cmo hacerlas ms intuitivas,
ms naturales, ms practicas, y por supuesto ms atractivas.
Los formularios web son la interface ms importante de todas,
permiten a los usuarios insertar datos, tomar decisiones,
comunicar informacin y cambiar el comportamiento de una
aplicacin. Durante los ltimos aos, cdigos personalizados y
libreras fueron creados para procesar formularios en el
ordenador del usuario. HTML5 vuelve a estas funciones
estndar agregando nuevos atributos, elementos y una API
completa. Ahora la capacidad de procesamiento de
informacin insertada en formularios en tiempo real ha sido
incorporada en los navegadores y completamente
estandarizada.
7.1Cambiosenelelemento<form>
Los formularios en HTML no han cambiado mucho. La estructura
sigue siendo la misma, pero HTML5 ha agregado nuevos elementos,
tipos de campo y atributos para expandirlos tanto como sea
necesario y proveer as las funciones actualmente implementadas en
aplicaciones web. Existen nuevos atributos para el elemento <form>:
autocomplete: Puede tomar dos valores: on y off. El valor por
defecto es on. Cuando es configurado como off los elementos
<INPUT> pertenecientes a ese formulario tendrn la funcin de auto
completar desactivada, sin mostrar entradas previas como posibles
valores. Puede ser implementado en el elemento <form> o en
cualquier elemento <input> independientemente.
novalite: Una de las caractersticas de formularios en HTML5 es la
capacidad propia de validacin. Los formularios son
automticamente validados. Para evitar este comportamiento,
podemos usar el atributo novalite. Para lograr lo mismo para
elementos <input> especficos, existe otro atributo llamado
formanovalite.
 7.2Nuevosatributosenel
Elemento<input>

HTML5 ha expandido las opciones incrementando de este

modo las posibilidades para este elemento. En HTML5 estos
nuevos tipos no solo estan especificando qu clase de entrada
es esperada sino tambin dicindole al navegador qu debe
hacer con la informacin recibida. El navegador procesar los
datos ingresados de acuerdo al valor del atributo type y
validar la entrada o no.
El atributo type trabaja junto con otros atributos adicionales
para ayudar al navegador a limitar y controlar en tiempo real lo
ingresado por el usuario.
 7.2.1Tipoemail

Casi todo formulario en la web ofrece un campo para

ingresar una direccin de email, pero hasta ahora el nico
tipo de campo disponible para esta clase de datos era
text. El tipo text representa un texto general, no un dato
especifico, por lo que tenamos que controlar la entrada
de con cdigo JavaScript para estar seguros de que el
texto ingresado corresponda a un email valido. Ahora el
navegador se hace cargo de esto con el nuevo tipo email.
Solo subraya en Safari.
<input type="email" name="miemail"id="miemail">
Ejemplo(EJENEWFORM.html)
 El texto insertado en el campo generado por el cdigo
anterior, ser controlado por el navegador y validado
como un email. Si la validacin falla, el formulario no ser
enviado.
Cmo cada navegador responder a una entrada
invalida? No est determinado en la especificacin de
HTML5. Por ejemplo, algunos navegadores mostrarn un
borde rojo y enviaran un mensaje y otros mostrarn en
azul con otro mensaje.
 7.2.2Tiposearch

Eltiposearch (bsqueda)nocontrolalaentrada,essolo
unaindicacinparalosnavegadores.Aldetectareste
tiposdecampoalgunosnavegadorescambiarneldiseo
delelementoparaofreceralusuariounindiciodesu
propsito.EsincompatibleconFirefox,Opera.
<inputtype="search"name="busquedaid="busqueda">
 7.2.3Tipourl

Estetipodecampotrabajaexactamenteigualqueeltipo
emailperoesespecificoparadireccionesweb.Est
destinadoarecibirsoloURLs absolutasyretornarun
errorsielvaloresinvalido.Laurl debeempezarconel
protocolohttp://
<inputtype="url"name="miurlid="miurl">
EsincompatibleconSafari,enOperaseautocompleta.
 7.2.4Tipotel

Este tipo de campo es para nmeros telefnicos. A

diferencia de los tipos email y url, el tipo tel no requiere
sintaxis en particular. Es solo una indicacin para el
navegador en caso de que necesite hacer ajustes de
acuerdo al dispositivo en el que la aplicacin es ejecutada.
<input type="tel" name="telefono"id="telefono>
 7.2.5Tiponumber
Como su nombre lo indica, el tipo number es slo vlido
cuando recibe una entrada numrica. Existen algunos atributos
nuevos que pueden ser tiles para este campo.
min El valor de este atributo determina el mnimo valor aceptado para
el campo.
max El valor de este atributo determina el mximo valor aceptado para
el campo.
step El valor de este atributo determina el tamao en el que el valor
ser incrementado o disminuido en cada paso. Por ejemplo, si declara
un valor de 5 para step en un campo que tiene como valor minimo de 0
y mximo de 10, el navegador no le permitir especificar valores entre
0 y 5 entre 5 y 10.
<input type="number" name="numero"id="numero" min="0"
max="10" step="5">

Incompatible con Firefox, en IE solo especifica el valor invalido.

 7.2.6Tiporange

Este tipo de campo hace que el navegador construya una

nueva clase de control que no exista. Este nuevo control le
permite al usuario seleccionar un valor a partir de una serie
de valores o rango. Normalmente es mostrado en pantalla
como una puntero deslizable o un campo con flechas para
seleccionar un valor entre los predeterminados, pero no existe
un diseo estndar hasta el momento.
<input type="range" name=rango" id=rango" min="0" max="10"
step="5">
No compatible con Firefox, en Chrome, Safari y Opera no
aparece la numeracin.
Podemos declarar el valor inicial utilizando el viejo atributo
value y usar JavaScript para mostrar el nmero seleccionado
en pantalla como referencia.
 7.2.7Tipodate
Este otro tipo de campo que genera una nueva clase de
control. En este caso fue incluido para ofrecer una mejor
forma de ingresar una fecha. Algunos navegadores
muestran en pantalla un calendario que aparece cada vez
que el usuario hace clic sobre el campo.
<inputtype="date"name="fecha"id="fecha">
Incompatible con FireFox, IE. En Safari aparece el
formato, pero no el calendario.
La interface no fue declarada en la especificacin. Cada
navegador provee su propia interface y a veces adaptan el
diseo al dispositivo en la cual la aplicacin esta siendo
ejecutada.
 7.2.8Tipoweek

Este tipo de campo ofrece una interface similar a date,

pero solo para seleccionar una semana completa.
Normalmente el valor esperado tiene la sintaxis 2011w50
donde 2011 es el ao y 50 es el nmero de la semana.
<input type="week" name="semana" id="semana">
Compatible solo con Safari, Maxthon y Opera
 7.2.9Tipomonth

Similaraltipodecampoanterior,steesespecifico
paraseleccionarmeses.Normalmenteelvaloresperado
tienelasintaxisaomes.
<inputtype="month"name="mes"id="mes">
Compatible solo con Safari, Maxthon y Opera
 7.2.10Tipotime,datetime,
datetimelocal

Eltipodecampotime essimilaradate,perosolopara
lahora.Tomaelformatodehorasyminutos,perosu
comportamientodependedecadanavegadoreneste
momento.Normalmenteelvaloresperadotienela
sintaxishora:minutos:segundos,perotambinpuedeser
hora:minutos.
<inputtype="time"name="hora"id="hora">
IncompatibleconFireFox,IE10
 El tipo de campo datetime es para ingresar fecha y hora
completa, incluyendo la zona horaria.
<input type="datetime" name="fechahora" id="fechahora">
Incompatible con Firefox, IE, Chrome.
Extraordinariamente compatible con Opera.
El tipo de campo datetimelocal es como el tipo
datetime sin la zona horaria.
<inputtype="datetimelocal"name="fechahoralocal"
id="fechahoralocal">
Incompatible con Firefox, IE, Chrome.
 7.2.11Tipocolor

Adems de los tipos de campo para fecha y hora existe

otro tipo que provee una interface predefinida similar
para seleccionar colores. Normalmente el valor
esperado para este campo es un numero hexadecimal,
como #00FF00.
<input type="color" name="micolor" id="micolor">
Incompatible con Safari, FireFox, IE.
 7.2.12Tipofile

Estetipodecampoesutilizadoparasubirarchivosal
servidor;eltipodearchivosesindiferente.
<inputtype="file"name="miarchivo"id="miarchivo">
Muycompatibleenlosnavegadores
 7.2.13Nuevosatributospara
<INPUT>
placeholder: Especialmente en tipos de campo search, pero
tambin en entradas de texto normales, el atributo
placeholder representa una sugerencia corta, una palabra o
frace provista para ayudar al usuario a ingresar la informacin
correcta. El valor de este atributo es presentado en pantalla
por los navegadores dentro del campo, como una marca de
agua que desaparece cuando el elemento es enfocado.
required: Este atributo no dejar que el formulario sea enviado
se el campo se encuentra vaco.
multiple: ste atributo booleano puede ser usado en algunos
tipos de campo (por ejemplo, email o tel) para permitir el
ingreso de entradas mltiples. Los valores insertados deben
estar separados por coma para ser vlidos
 autofocus: El atributo enfocar la pagina web sobre el
elemento seleccionado pero considerando la situacin
acta. No mover el foco cuando ya haya sido establecido
por el usuario sobre otro elemento.
pattern: Nos permite crear nuestro propio tipo de campo
para controlar esta clase de valores no ordinarios. Puede
incluso incuir title para personalizar mensajes de error.
<input pattern=[o9]{5} name=codigopostal id =codigopostal
title=inserte 5 nmeros de su cdigo postal>
form: Es una adicin til que nos permite declarar
elementos para un formulario fuera del mbito de las
etiquetas <form>. Hasta ahora, para construir un
formulario tenamos que escribir las etiquetas <form> de
apertura y cierre y luego declarar cada elemento del
formulario en ellas. En HTML5 podemos insertar los
elementos en cualquier parte del cdigo y luego hacer
referencia al formulario que pertenece usando su nombre
y el atributo form.
 7.2.14Elelemento<datalist>
Es un elemento especfico de formularios usado para construir una
lista de tems que luego, con la ayuda del atributo list, ser usada
como sugerencia en un campo del formulario.
<!Lista de datos>
<datalist id ="informacion">
<option value="123123123" label="Telefono 1">
<option value="456564546" label="Telefono 2">
</datalist><br/>
<input type="submit" value="Enviar">
Este elemento utiliza el elemento <option> en su interior para crear
la lista de datos a sugerir. Con la lista ya declarada, lo nico que resta
es referenciarla desde un elemento <input> usando el atributo list.
<input type="tel" name="telefono"id="telefono" placeholder="Diez digitos"
list="informacion">
 8.AudioyVideoenHTML5

Una de las caractersticas ms mencionadas de HTML5 fue la

capacidad de procesar video. HTML 5 introdujo un elemento
para insertar y reproducir video en un documento HTML. El
elemento <video> usa etiquetas de apertura y de cierre y solo
unos pocos parmetros para lograr su funcin.
Los formatos OGG y MP4 son contenedores de video y audio.
OGG contiene codificadores de video Theodora y de audio
Vorbis, y los disponibles para el contenedor MP4 son H.264
para video y ACC para audio.
 8.1Etiqueta<video>

Este elemento ofrece varios atributos para establecer su

comportamiento y configuracin. Los atributos width y height,
al igual que en otros elementos HTML ya conocidos, declaran
las dimensiones para el elemento o ventana del reproductor. El
tamao del video ser automticamente ajustado para entrar
dentro de estos valores, pero no fueron considerados para
redimensionar el video sino limitar el rea ocupada por el
mismo para mantener la consistencia en el diseo. El atributo
src especifica la fuente del video. Este atributo puede ser
remplazado por el elemento <source> y su propio atributo src
para declarar varias fuentes con diferentes formatos, como en
el siguiente ejemplo:
Ejemploprogvideo.html

Instalardirecx paraqueseejecuteenIE
 8.2Atributos
El atributo controls es uno de varios atributos disponibles
para este elemento. ste, en particular, muestra
controles de video provistos por el navegador por
defecto. Cuando el atributo esta presente, cada
navegador activar su propia interface, permitiendo al
usuario comenzar a reproducir el video, pausarlo o saltar
hacia un cuadro especifico, entre otras funciones.
autoplay: Cuando este atributo est presente, el
navegador comenzar a reproducir el video
automticamente tan pronto como pueda.
 loop: Si este atributo es especificado, el navegador
comenzar a reproducir el video nuevamente cuando
llega al final.
poster: Este atributo es utilizado para proveer una
imagen que ser mostrada mientras esperamos que el
video comience a ser reproducido.
 8.3Programacindelreproductor
deVideo

Cada navegador tiene sus propios botones y barras de

progreso, e incluso sus propias funciones. Esta situacin
puede ser aceptable en algunas circunstancias, pero en
un ambiente profesional, donde cada detalle cuenta,
resulta absolutamente necesario que un diseo
consistente sea preservado a travs de dispositivos y
aplicaciones, tambin disponer de un control absoluto
sobre todo el proceso.
 8.3.1Eldiseo

Todo reproductor de video necesita un panel de control

con al menos algunas funciones bsicas. En el siguiente
programa, un elemento <nav> fue agregado luego de
<video>. Este elemento <nav> contiene dos elementos
<div> (botones y barras) para ofrecer un botn
Reproducir y una barra de progreso.
Adems del video, esta plantilla tambin incluye dos
archivos para acceder a cdigos externos. Unos de ellos
es reproductor.css para los siguientes estilos CSS
Ejemplovideo.html
Ejemploreproductor.css
 El cdigo anterior usa tcnicas de Modelo de Caja
Tradicionales para crear la caja que contiene cada pieza
del reproductor de video y ubicarla en el centro de la
ventana.
La propiedad position, conocida por viejos
programadores CSS, fue usada para superponer un
elemento sobre otro (barra y progreso). Y la propiedad
width en el estilo progreso, del reproductor.css, fue
inicializada en cero. Esto se debe a que el elemento ser
utilizado para simular una barra de progreso que
cambiar de tamao a medida que el video es
reproducido, y que, por supuesto, comenzar a crecer
desde cero.
 8.3.2Elcdigo

Existen diferentes formas de programar un reproductor

de video, en JavaScript, pero solo se explicaran los
eventos necesarios para procesamiento bsico de video.
Para este propsito, vamos a trabajar con pocas
funciones simples que permitan reproducir y pausar el
video, mostrar una barra de progreso mientras el video es
reproducido y ofrecer la opcin de hacer clic sobre esta
barra para adelantar o retroceder el video
 8.3.3Loseventos

HTML5 incorpora nuevos eventos que son especficos de

cada API .
progress: Este evento es disparado peridicamente para
informar acerca del progreso de la descarga del medio. La
informacin estar disponible a travs del atributo buffered,
como se ver ms adelante.
canplaythrough: Este evento es disparado cuando el medio
completo puede ser reproducido sin interrupcin. El estado es
establecido considerando la actual tasa de descarga y
asumiendo que seguir siendo la misma durante el resto del
proceso.

API:Interfaz deprogramacindeaplicaciones(IPA)oAPI(delinglsApplication Programming Interface

 ended: Esdisparadocuandoelreproductorllegaalfinal
delmedio.
paused: Esdisparadocuandoelreproductorespausado.
play: Esdisparadocuandoelmediocomienzaaser
reproducido.
error: Esteeventoesdisparadocuandoocurreunerror.
Esrelacionadoconelevento<source> correspondientea
lafuentedelmedioqueprodujoerror.
 Funcininiciar()
function iniciar(){
maximo=600;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');

reproducir.addEventListener('click',presionar,false);
barra.addEventListener('click',mover,false);

}
 El cdigo anterior, es la primera funcin del archivo
reproductor.js. La funcin fue llamada iniciar debido a
que ser la funcin que iniciar la ejecucin de la
aplicacin tan pronto como el documento HTML sea
completamente cargado.
Debido a que esta es la primera funcin a ser ejecutada,
necesitamos definir unas variables globales para
configurar nuestro reproductor. Usando el selector
getElementById creamos una referencia a cada uno de
los elementos del reproductor para poder acceder a ellos
en el resto del cdigo ms adelante. Tambin se declar
la variable mximo para conocer siempre el mximo tao
posible para la barra de progreso (600 pixeles).
Hay dos acciones a las que tenemos que prestar atencin
desde el cdigo: cuando el usuario hace clic sobre el
botn Reproducir y cuando hace clic sobre la barra de
progreso para avanzar o retroceder el video. Dos
escuchas para el evento click fueron agregadas con el
propsito de controlar estas situaciones.
 8.3.4Losmtodos

Lafuncinpresionar() eslasegundafuncindelarchivo
reproductor.js.Estafuncinejecutardeacuerdoala
situacinactualdosmtodosespecficosdeestaAPI:
play () ypaused ()
 Funcinpresiona()
function presionar(){
if(!medio.paused &&!medio.ended){
medio.pause();
reproducir.innerHTML='Reproducir';
windows.clearInterval(bucle);
}
else{
medio.play();
reproducir.innerHTML='Pausa';
bucle=setInterval(estado,1000);
}
}
 Losmtodosplay ()ypause() sonpartedeunalistade
mtodosincorporadosporHTML5paraprocesamiento
demedios.Lossiguientessonlosmsrelevantes:
play (): Este mtodo comienza a reproducir el medio desde el
inicio, a menos que el medio haya sido pausado previamente.
pause (): Este mtodo pausa la reproduccin.
load (): Este mtodo carga el archivo del medio. Es til en
aplicaciones dinmicas para cargar el medio anticipadamente.
canPlayType(formato): Con este mtodo podemos saber si el
formato del archivo es soportado por el navegador o no.
 8.3.5Laspropiedades

La funcin presionar () tambin usa unas pocas propiedades

para recabar informacin sobre el medio. Las siguientes son las
ms relevantes.
paused: Esta propiedad retorna true (verdadero) si la reproduccin
del medio est actualmente pausada o no a comenzado.
ended: Esta propiedad retorna true si la reproduccin ha finalizado
porque se lleg al final.
duration: Esta propiedad retorna la duracin del tiempo en
segundos
 8.3.6ELcdigoenOperacin
La funcin presionar es ejecutada cuando el usuario presiona
el botn Reproducir en el reproductor. Este botn tendr
dos propsitos: mostrar el mensaje Reproducir para
reproducir el video o Pausa para detenerlo, de acuerdo a las
circunstancias.
Para lograr esto el cdigo detecta la situacin del medio
comprobando el valor de las propiedades paused y ended. En
la primera lnea de la funcin tenemos un condicional if para
este propsito. Si el valor de medio.paused y medio.ended es
falso, significar que el video esta siendo reproducido,
entonces el mtodo pause () es ejecutado para pausar el video
y el texto del botn cambia a Reproducir usando innerHTML.
Si lo opuesto ocurre, el video fue pausado previamente o
termin de ser reproducido, entonces la condicin ser falsa
(medio.paused o medio.ended es verdadero) y el mtodo
play() es ejecutado para comenzar o restaurar la reproduccin
del video. En este caso tambin realizamos una importante
accin que es configurar un intervalo usando setInterval() para
ejecutar la funcin estado() una vez por segundo.
 Funcinestado()
function estado(){
if(!medio.ended){
var
total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='Reproducir';
windows.clearInterval(bucle);
}
}
 La funcin estado () es ejecutada cada segundo mientras
el video es reproducido. Tambin se utiliza un condicional
if en esta funcin para controlar el estado del video. Si la
propiedad ended retorna falso, calculamos qu tan larga
la barra de progreso debe ser en pixeles y se asigna el
valor al elemento <div> que la representa. En el caso de
que la propiedad sea verdadera (el video termino), se
retorna el valor de la barra de progreso a cero pixeles, se
cambia el botn a Reproducir, y se cancela intervalo
usando clearInterval.
 Debido a que la funcin estado () ser ejecutada cada segundo
mientras el video se est reproduciendo, el valor del tiempo en
el que el video se encuentra cambiar constantemente. Este
valor en segundos es obtenido de la propiedad currenTime.
Tambin contamos con el valor de la duracin del video en la
propiedad duration, y el mximo tamao de la barra de
progreso en la variable mximo que definimos al principio. Con
estos tres valores podemos calcular cuntos pixeles de largo la
barra debera ser para representar los segundos ya
reproducidos. La formula tiempo actual * mximo / duracin
total transformar los segundos en pixeles para cambiar el
tamao del elemento <div> que representa la barra de
progreso.
La funcin para responder al evento click del elemento
reproducir (el botn) ya fue creada. Ahora es tiempo de hacer
lo mismo para responder a los clics hechos sobre la barra de
progreso:
 Funcinmover(e)

function mover(e){
if(!medio.paused &&!medio.ended){
var ratonX=e.pageXbarra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}

window.addEventListener('load',iniciar,false);
 8.3.7Formatosdevideo
Por el momento no existe un estndar para formatos de video
y audio en la web. Existen varios contenedores y diferentes
codificadores disponibles, pero ninguno fue totalmente
adoptado y no hay consenso alguno de parte de los fabricantes
de navegadores para lograr un estndar en el futuro cercano.
Los contenedores ms comunes son OGG, MP4, FLV y el nuevo
propuesto por Google, WEBM. Normalmente estos
contenedores contienen video codificado con los codificadores
Theodora, H.264, VP6 o VP8, respectivamente. Esta es la lista
de los ms usados:
OGG codificador de videoTheodora y audio Vorbis.
MP4 codificador de video H.264 y audio ACC.
FLV codificardor de video VP6 y audio MP3. Tambin soporta H.264 y
AAC.
WEBM codificador de video VP8 y audio Vorbis
 8.4Etiqueta<audio>

El audio no es un medio tan popular como el video en

Internet. Sin embargo, el audio se encuentra an
disponible, ganando su propio mercado en shows de
radio y podcasts en toda la red.
HTML5 provee un nuevo elemento para reproducir audio
en un documento HTML. El elemento, por supuesto, es
<audio> y comparte casi las mismas caractersticas del
elemento, por supuesto, es <audio> y comparte casi las
mismas caractersticas del elemento <video>.
Ejemploaudio.html
 8.5Programacindelreproductor
deaudio

La API para medios fue desarrollada tanto para video

como para audio. Cada evento, mtodo y propiedad
incorporada para video funcionar tambin como audio.
Debido a esto, solo necesitamos reemplazar el elemento
<video> por el elemento <audio> en nuestra plantilla e
instantneamente obtenemos un reproductor de audio.
Ejemploaudioprog.html