Scribd
Cargar
130 vistas

HTML 5

El documento describe el desarrollo de interfaces gráficas con HTML5. HTML5 es la evolución de HTML, CSS y JavaScript que establecen la estructura, estilo y funcionalidad de manera integral. El documento explica la estructura básica de archivos HTML5, la inclusión de CSS para estilos, y el uso de JavaScript para funcionalidad a través del manejo de eventos. Además, cubre otros elementos HTML y CSS, formularios web y conceptos clave.

Cargado por

Maria Teresa Zamudio Pinto
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
130 vistas

HTML 5

El documento describe el desarrollo de interfaces gráficas con HTML5. HTML5 es la evolución de HTML, CSS y JavaScript que establecen la estructura, estilo y funcionalidad de manera integral. El documento explica la estructura básica de archivos HTML5, la inclusión de CSS para estilos, y el uso de JavaScript para funcionalidad a través del manejo de eventos. Además, cubre otros elementos HTML y CSS, formularios web y conceptos clave.

Cargado por

Maria Teresa Zamudio Pinto
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 30

Desarrollo de Interfaces Grficas con HTML5

Estructura de contenido

Mapa Conceptual 2
Introduccin 3
1. HTML5 4
1.1 Estructura bsica de un archivo HTML5. 4
1.2 Definicin de zonas con HTML5. 4
2. Incluyendo CSS 7
2.1 Pseudo Clases. 8
2.2 Personalizando el modelo de interpretacin del navegador Web. 9
3. Otros elementos HTML y CSS 14
3.1 Otras etiquetas HTML5. 14
3.2 Otros estilos CSS. 17
4. JavaScript 19
4.1 Referenciando elementos HTML desde JavaScript. 19
4.2 Asignando eventos a los elementos HTML5 desde JavaScript. 20
5. Los Formularios Web 22
5.1 Otros tipos input. 22
5.2 Otros atributos para la etiqueta input. 23
5.3 Otros elementos para formularios. 24
Glosario 28
Bibliografa 29
Crditos 30

FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje


2
HTML5

Integra las tecnologas

HTML5 CSS
incluye nuevas JavaScript

define
define
Etiquetas implementa
MAPA CONCEPTUAL

como incluye
Estilo
article Zonas Funcionalidad
Estructura
audio hgroup propiedades a travs de la gestin de

como
como
video eventos

nav como

section border-Radius
linear-gradient
aside load
text-shadow
header
box-shadow mousemove
transform clic
footer

FAVA - Formacin en Ambientes Virtuales de Aprendizaje


Desarrollo de Interfaces Grficas con HTML5

SENA - Servicio Nacional de Aprendizaje


Desarrollo de Interfaces Grficas con HTML5

Introduccin

El diseo de aplicaciones web consiste en presentar servicios a travs de


internet con la incorporacin de diversos tipos de tecnologas, para ser
visualizadas a travs de navegadores. Algunas de las posibles tecnologas
a considerar incluyen la utilizacin de lenguajes de programacin del lado
del servidor tales como JSP (Java Server Pages), PHP(Hipertext Preproce-
sor) o ASP (Active Server Pages); herramientas para creacin de pginas
automticas o a partir de la implementacin de textos en HTML y JavaS-
cript entre otros. En este material se concentrar en la utilizacin de HTML
en su versin 5.

HTML5 es la evolucin y unificacin de diferentes tecnologas Web que


venan trabajando de manera separada: HTML, CSS 3 y JAVASCRIPT,
estableciendo la estructura el estilo y la funcionalidad de una manera
integral. No se trata de un nuevo lenguaje de programacin, sino de la
incorporacin de nuevas reglas semnticas y sintcticas al bsico HTML
con el fin de poder sacar el mejor provecho de los avances en el mundo
de la Web y satisfacer las necesidades de interactuar con aplicaciones que
puedan ejecutarse en diferentes dispositivos sin necesidad de crear un
cdigo diferente para cada uno de ellos.

En su desempeo como Analista y Desarrollador de Sistemas de Informa-


cin, se hace necesario el uso de este tipo de tecnologas para la construc-
cin de soluciones de software basadas en la Web, maximizando la intero-
perabilidad y proporcionando todos los recursos necesarios para una
agradable experiencia al usuario.

3
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

1. HTML5

1.1 Estructura bsica de un archivo HTML5

Etiqueta Significado
<!DOCTYPE html> Primera lnea del archivo, indica que se est
creando un archivo HTML y habilita al
navegador para su interpretacin.
<html> En HTML5 la etiqueta principal html
contiene el atributo lang que recibe el
<html lang=es>
cdigo del idioma del contenido del
documento.
<head> Indica el encabezado de la pgina
<meta> Enva informacin oculta para el usuario
sobre las caractersticas de la pgina
<meta charset=iso-8859-1
/>
<meta name=description
content=Ejemplo />
<meta name=keywords
content=pagina, html, web>
<link> Para incorporar en la pgina elementos
<link rel=stylesheet
desde archivos externos
href=miEstilo.css>
Pseudoclase
<title> Aplica a Ttulo deEjemplo
la pgina Significado
<body> Cuerpo de la pgina Todos los elementos
Todos los elementos
* *{ margin: 0px } tendrn un margen
de la pgina
de 0px

1.2 Definicin de zonas con HTML5 p:nth-child(3){


El tercer elemento P
background: de la pgina tendr
nth-child() Un determinado hijo
#FFDDAA un determinado color
HTML5 incorpora nuevas etiquetas que} ayudan a definir las principales
zonas que generalmente dividen a una pgina Web. El uso de fondo
de estas
etiquetas proporciona informacin valiosa a los dispositivos
p:first-child{
El sobreelemento
primer la P
El primer hijo de un
manera de interpretar la informacin contenida en ellas. de la pgina tendr
background:
first-child determinado
#FFDDAA un determinado color
elemento }
de fondo

p:last-child{
El ltimo elemento P
El ltimo hijo de un
Pseudoclase Aplica a Ejemplo
background: de Significado
la pgina tendr
last-child determinado
#FFDDAA Todos los elementos
un determinado color
Todos los elementos
elemento }
*
Pseudoclase Aplica a Ejemplo
*{ margin: 0px } tendrn un margen
Significado
de fondo
de la pgina
de
El 0px
elemento P de la

p:nth-child(3){
El tercer tendr
pgina elemento un
P
El nico hijo de un p:only-child{
background: de la pginacolor
determinado tendr
de
4 nth-child()
only-child Un determinado hijo
determinado #FFDDAA un determinado
fondo siemprecolory
FAVA - Formacin en Ambientes Virtuales de Aprendizaje
elemento SENA - Servicio Nacional de Aprendizaje
}
de fondosea el nico
cuando
Desarrollo de Interfaces Grficas con HTML5

<header> </header>

<nav> </nav>

<section> <aside>

<section> <aside>

<footer> </footer>

Etiqueta / Seccin Significado


<header> Encabezado del cuerpo del documento
<nav> Define la zona de navegacin de la pgina,
donde normalmente se encuentra un men
<section> Especifica la zona donde se encuentra el
contenido principal de la pgina Web
<aside> Zona lateral que normalmente contiene
informacin secundaria o que da origen a la
informacin principal
<footer> Delimita el pie de la pgina Web,
normalmente contiene informacin
institucional

Estos elementos aunque claramente delimitan las principales secciones


de una pgina Web, tambin pueden incluirse al interior de otros
elementos para seccionarlos internamente.

En un bloc de notas, los elementos anteriormente mencionados podran


verse de la siguiente manera de forma integrada en un ejemplo:

5
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=iso-8859-1
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content=HTML5, CSS3, JavaScript>
<title>Este texto es el ttulo del documento</title>
<link rel=stylesheet herf=misestilos.css>
</head>
<body>
<header>
<h1>Encabezado de la pagina web, elemento header</h1>
</header>
</nav>
<h4>barra de menu, elemento nav</h4>
</nav>
</section>
Este es el contenido principal<br/> de la
pagina web, elemento section
</section>
<aside>
Elemento barra lateral<br />
uno<br />dos<br />tres<br />
</aside>
<footer>
Informacin de la empresa, elemento footer
</footer>
</body>
</html>

Si guardamos el contenido del anterior archivo con la extensin .html y lo


abrimos en un navegador Web, el resultado ser el siguiente:

6
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Como se aprecia en la imagen anterior, pese a haber estructurado la


pgina Web con las respectivas zonas header, nav, aside y footer, el
resultado obtenido difiere mucho de lo esperado; esto se debe al modelo
de interpretacin por defecto de los navegadores Web conocido como
modelo de caja. Para personalizar este modelo de interpretacin y darle
el diseo por zonas esperado a la pgina Web, se requiere emplear la
tecnologa CSS como veremos ms adelante.

2. Incluyendo CSS

HTML5, integra la estructura, el estilo y la funcionalidad de una pgina


Web bajo tres tecnologas que son de origen independiente (HTML, CSS y
JAVASCRIPT). El estilo est a cargo de la tecnologa CSS proporcionando
elementos de diseo como color, fuente, tamao.

Dentro de un archivo CSS se deben definir las reglas de estilo que se


deben aplicar a las etiquetas HTML de una pgina Web. Cada regla de
estilo se puede aplicar a todos los elementos del mismo tipo, a un
conjunto de etiquetas identificadas con la misma clase o a un elemento en
particular.

Objetivo Estilo
Cambiar el tamao de todos los
p { font-size: 20px }
elementos de tipo <p> en una pgina
Cambiar el tamao de todos los
elementos de la pgina identificados
.miClase { font-size: 20px }
con la misma clase
<p class=miClase>
<b class=miClase>

Cambiar el tamao del elemento que


contenga un determinado identificador #miID { font-size: 10px }
<p id=miID>

7
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

2.1 Pseudo Clases

Adems de poder referenciar un elemento por su tipo, nombre de clase o


identificacin, CSS permite referenciar elementos por su posicin o
jerarqua dentro de una pgina Web, de esta manera, no es necesario
para el diseador conocer el nombre o identificacin especfica de un
elemento para referenciarlo a travs de un archivo CSS.

Pseudoclase Aplica a Ejemplo Significado


Todos los elementos
Todos los elementos
* *{ margin: 0px } tendrn un margen
de la pgina
de 0px

p:nth-child(3){
El tercer elemento P
background: de la pgina tendr
nth-child() Un determinado hijo
#FFDDAA un determinado color
}
de fondo
El primer elemento P
El primer hijo de un p:first-child{
background: de la pgina tendr
first-child determinado
#FFDDAA un determinado color
elemento }
de fondo

p:last-child{
El ltimo elemento P
El ltimo hijo de un
background: de la pgina tendr
last-child determinado
#FFDDAA un determinado color
elemento }
de fondo
El elemento P de la

p:only-child{
pgina tendr un
El nico hijo de un
background: determinado color de
only-child determinado
#FFDDAA fondo siempre y
elemento }
cuando sea el nico
P en la pgina
Un determinado Los elementos P que
elemento siempre estn en una
que ocupe una P:nth-child(even){ posicin par dentro
background:
even posicin par dentro
#FFDDAA
de la lista de
de la lista de } elementos P tendrn
elementos del mismo un determinado color
tipo de fondo
Un determinado Los elementos P que
elemento siempre estn en una
8 que ocupe una P:nth-child(odd){ posicin impar dentro
background:
odd FAVA - Formacin en Ambientes Virtuales
posicin impar dentro
#FFDDAA
de Aprendizaje deSENAla- Servicio
listaNacional
de de Aprendizaje
de la lista de } elementos P tendrn
Un determinado background: Los elementos P que
first-child determinado
#FFDDAA
elemento siempre un determinado
estn en color
una
elemento }
que ocupe una P:nth-child(even){ de fondo par dentro
posicin
Desarrollo de Interfaces Grficas con HTML5
background:
even posicin par dentro p:last-child{
El
de ltimo
la elemento
lista P
de
El ltimo hijo de un #FFDDAA
de la lista de } background: de la pgina
elementos tendr
P tendrn
last-child determinado
elementos del mismo #FFDDAA un determinado color
elemento }
Pseudoclase Aplica
tipo a Ejemplo Significado
de fondo
Un determinado El
Loselemento P Pdeque
elementos la
elemento siempre pgina
estn tendr
en un
una
El nico hijo de un p:only-child{
que ocupe una P:nth-child(odd){ determinado
posicin color
impar de
dentro
background:
only-child determinado background:
odd posicin impar dentro #FFDDAA fondo la siempre
de lista y
de
elemento #FFDDAA
}
de la lista de } cuando seaP eltendrn
elementos nico
elementos del mismo P en
un la pgina color
determinado
Un determinado
tipo Losfondo
de elementos P que
elemento siempre
Un elemento que se
not(p:nth-child(3){ estn en
Un determinado una
color
not que ocupe
background:
P:nth-child(even){
quiera dejaruna
por fuera #FFDDAA
posicin parse dentro
de fondo no aplica
background:
even posicin par dentro
#FFDDAA
de la lista de
de la lista de elementos P tendrn
Para obtener un listado de los diferentes
} estilos que pueden ser aplicados
elementos
a elementos o etiquetas dedeluna
mismo un determinado
pgina Web, se recomienda visitar color
el
siguiente tipo de fondo enlace:
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
Un determinado Los elementos P que

2.2 Personalizando elemento siempre


el modelo estn Web
de interpretacin del navegador en una
que ocupe una P:nth-child(odd){ posicin impar dentro
El modelo
odd de interpretacin
posicin impardedentro
etiquetas del navegador Web
background:
de porla defecto
lista de
es un modelo por bloques, este modelo dispone en la pantalla del
#FFDDAA
de la lista de
navegador los elementos incorporados
} uno debajo delelementos
otro, de P tendrn
esta
elementos del mismo un determinado
forma, cada elemento interpretado ocupa una fila completa de la pgina color
Web. tipo
<!DOCTYPE html> de fondo
<html lang=es>
<head> not(p:nth-child(3){ Un determinado color
Un elemento que se
not <meta charset=iso-8859-1
background:
<meta name=description content=Ejemplo de HTML5> de fondo no se aplica
quiera
<meta dejar por fueracontent=HTML5,
name=keywords #FFDDAA CSS3, JavaScript>
<title>Este texto es el ttulo del documento</title>
<link rel=stylesheet herf=misestilos.css>
</head>
<body>
<header>
1 <h1>Encabezado de la pagina web, elemento header</h1>
</header>
</nav>
2 <h4>barra de menu, elemento nav</h4>
</nav>
</section>
Este es el contenido principal<br/> de la
3 pagina web, elemento section
</section>
<aside>
Elemento barra lateral<br />
4 uno<br />dos<br />tres<br />
</aside>
<footer>
5 Informacin de la empresa, elemento footer
</footer>
</body>
</html>

9
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Para personalizar este modelo de interpretacin y lograr la distribucin de


las zonas en la pgina Web de acuerdo con un diseo especfico, se debe
identificar cada seccin, encapsular el cuerpo dentro de una etiqueta div
para que permita mayor flexibilidad y dejar que CSS haga el resto.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=iso-8859-1
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content=HTML5, CSS3, JavaScript>
<title>Este texto es el ttulo delSignificado
Etiqueta documento</title>
<link rel=stylesheet herf=misestilos.css>
<article>
</head> Define unidades independientes de
<body> contenido. Debe ubicarse dentro del
<div id=cuerpo> elemento section
<hgroup> <header id= encabezado>
Etiqueta usada dentro de la seccin header
<h1>Encabezado de la pagina web, elemento header</h1>
</header> cuando esta contiene dos o ms elementos
<hgroup> <nav id=menu> de tipo h como h1, h2, h3 su objetivo es
<h1>titulo</h1> <h4>barra de menu, elemento nav</h4>
<h2>subtitulo</h2>
ayudar al navegador a interpretar y procesar
</nav>
</hgroup> correctamente la pgina Web.
<section id=menu>
<mark> Permite principal<br/>
Este es el contenido hacer nfasis en deuna
la palabra o
frase section
pagina web, elemento
</section>
<small> Muestra una palabra o frase en letra
<aside id=lateral>
Elemento barrapequea con />
lateral<br fuente de informacin legal
<address> Para
uno<br />dos<br definir/> informacin de contacto,
/>tres<br
</aside> normalmente usado dentro de la seccin
<footer id=pie>
footer
Informacin de la empresa, elemento footer
<time> </footer> Usada para especificar datos relacionados
</div> con fecha u hora
<time datetime=2013-08-27>
</body>
Fecha: 27/08/2013
</html>
</time>
<audio> Usada para reproducir archivos de audio
10 con extensin ogg o mp3 Dependiendo del
<audio navegador podr reproducir SENA un - Servicio
tipo Nacional
de
FAVA - Formacin en Ambientes Virtuales de Aprendizaje
src=miAudio.mp3></audio> de Aprendizaje
archivo u otro, por esta razn es
o recomendable incluir ambos archivos y
Desarrollo de Interfaces Grficas con HTML5

Ahora debemos crear el archivo CSS donde se definirn las caractersticas


de diseo inicial aplicables a la pgina Web. Para ello, basta con digitar el
siguiente cdigo en un archivo nuevo del block de notas o en un editor de
archivos CSS como Dreamweaver:

1 @charset utf-8
2 *{
3 margin:0px;
4 padding:0px;
5 }
6 h1{
7 font:bold 20px Verdana, Geneva, sans-serif;
8 }
9 h2{
10 font:bold 14px Verdana, Geneva, sans-serif;
11 }
12 body{
13 text-align:center;
14 }
15 #cuerpo{
16 width:960px:
17 margin:15px auto;
18 text-align:left;
19 }

Explicacin del cdigo

Lnea Explicacin
2..5 Se establece mediante el selector * que todos los elementos
van a tener un margen de 0 pixeles y un espacio entre el
contenido de una etiqueta y su contenedor de 0px
6..11 Se define un estilo, tamao y tipo de fuente especfico para
todas las etiquetas H1 y H2
12..14 Se define la alineacin del texto central para el cuerpo de la
pgina Web
15..19 Se establece el ancho, las mrgenes y la alineacin del texto
del elemento identificado con el ID cuerpo, el cual
corresponde a la etiqueta div que encierra al resto de
etiquetas

11
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

20 @encabezado{
21 background:#fffbb9;
22 border: 1px solid #999999;
23 padding: 20px;
24 }
25 #menu{
26 background: #cccccc;
27 padding: 5px 15px;
28 }
29 #seccion{
30 float:left;
31 width:660px;
32 margin:20px;
33 }
34 #lateral{
35 float:left;
36 width:220px;
37 margin:20px 0px;
38 padding:20px;
39 background:#cccccc;
40 }
41 #pie{
42 clear:both;
43 text-align:center;
44 padding:20px;
45 border=top:px solid #999999;
46 }

Lnea Explicacin
20..24 Se establece un color de fondo, borde y espacio entre el texto
y el elemento contenedor para la seccin identificada como
encabezado, la cual corresponde a la seccin header de la
pgina Web
25..28 Se define un color de fondo y un espacio entre el texto y su
contenedor para la etiqueta identificada con el nombre menu,
correspondiente a la seccin nav de la pgina Web
29..33 Se establece una ubicacin (izquierda del rea disponible),
ancho y margen para la etiqueta identificada con el nombre
seccion, correspondiente a la seccin section de la pgina
Web
34..40 Se establece una ubicacin (izquierda del rea disponible),
ancho, margen y color de fondo para la etiqueta identificada
con el nombre lateral, correspondiente a la seccin aside de
la pgina Web
41..46 Se restaura el flujo normal de la pgina Web (propiedad
clear), es decir que la ubicacin y posicin del elemento no
est ligada a la posicin del elemento anterior y se define la
alineacin del texto, el espacio entre el texto y su contenedor
y el estilo del borde para la etiqueta identificada con el
nombre pie, correspondiente a la seccin footer de la pgina
Web

12
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
tipo de fondo
not(p:nth-child(3){ Un determinado color
Un elemento que se
not background:
de fondo noHTML5
se aplica
quiera dejarDesarrollo de Interfaces Grficas
por fuera #FFDDAA con

Ahora guardamos el archivo con el nombre misestilos.css en el mismo


directorio donde se encuentra la pgina web HTML
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=iso-8859-1
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content=HTML5, CSS3, JavaScript>
<title>Este texto es el ttulo del documento</title>
<link rel=stylesheet herf=misestilos.css>
</head>
<body>
<div id=cuerpo>
<header id= encabezado>
<h1>Encabezado de la pagina web, elemento header</h1>
</header>
<nav id=menu>
<h4>barra de menu, elemento nav</h4>
</nav>
<section id=menu>
Este es el contenido principal<br/> de la
pagina web, elemento section
</section>
<aside id=lateral>
Elemento barra lateral<br />
uno<br />dos<br />tres<br />
</aside>
<footer id=pie>
Informacin de la empresa, elemento footer
</footer>
</div>
</body>
</html>

Y al abrir nuevamente la pgina Web, tendramos el siguiente resultado:

Encabezado de la pagina Web, elemento header


barra de enu, elemento nav

Este es el contenido principal


de la paguna Web, elemento section Elemento barra lateral
uno
dos
tres

Informacin de la empresa, elemento footer

13
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

3. Otros elementos HTML y CSS

3.1 Otras etiquetas HTML5

Con las anteriores etiquetas header, nav, section, aside, footer, se define
la estructura bsica de una pgina Web con HTML5, a continuacin, se
presentarn nuevas etiquetas a utilizar dentro del contenido de la pgina
Web:

Etiqueta Significado
<article> Define unidades independientes de
contenido. Debe ubicarse dentro del
elemento section
<hgroup> Etiqueta usada dentro de la seccin header
cuando esta contiene dos o ms elementos
<hgroup> de tipo h como h1, h2, h3 su objetivo es
<h1>titulo</h1>
<h2>subtitulo</h2>
ayudar al navegador a interpretar y procesar
</hgroup> correctamente la pgina Web.
<mark> Permite hacer nfasis en una palabra o
frase
<small> Muestra una palabra o frase en letra
pequea con fuente de informacin legal
<address> Para definir informacin de contacto,
normalmente usado dentro de la seccin
footer
<time> Usada para especificar datos relacionados
con fecha u hora
<time datetime=2013-08-27>
Fecha: 27/08/2013
</time>
<audio> Usada para reproducir archivos de audio
con extensin ogg o mp3 Dependiendo del
<audio navegador podr reproducir un tipo de
src=miAudio.mp3></audio>
archivo u otro, por esta razn es
o recomendable incluir ambos archivos y
especificar las dos posibles fuentes con la
<audio> etiqueta interna source, para que el
<source navegador procese el archivo apropiado.
src=miAudio.mp3>
<source
src=miAudio.ogg> Atributos:
</audio> src url o nombre archivo a reproducir
controls Presenta los controles de reproduccin
autoplay Reproduccin automtica del audio
loop Reproducciones infinitas del audio

<video> Usada para reproducir archivos de video con


extensin ogg o mp4 Dependiendo del
<video navegador podr reproducir un tipo de
src=miVideo.mp4></video>
14
archivo u otro, por esta razn es
o recomendable incluir ambos archivos y
FAVA - Formacin en Ambientes Virtualeslas
especificar dos posiblesSENA
de Aprendizaje - Servicio
fuentes conNacional
la de Aprendizaje
<video> etiqueta interna source, para que el
<source
<source navegador procese el archivo apropiado.
src=miAudio.mp3>
<source
src=miAudio.ogg> Atributos:de Interfaces Grficas con HTML5
Desarrollo
</audio> src url o nombre archivo a reproducir
controls Presenta los controles de reproduccin
autoplay Reproduccin automtica del audio
loop Reproducciones infinitas del audio
Etiqueta Significado
<article>
<video> Define unidades
Usada para reproducir independientes
archivos de devideo con
contenido.
extensin ogg Debe oubicarse dentro del
mp4 Dependiendo del
<video elemento section
navegador podr reproducir un tipo de
src=miVideo.mp4></video>
<hgroup> Etiqueta usada dentropor de laestaseccin header
archivo u otro, razn es
o cuando esta
recomendable contiene
incluir dos o
ambos ms elementos
archivos y
<hgroup> de tipo h como
especificar las h1,
dosh2, h3 su
posibles objetivo
fuentes es la
con
<h1>titulo</h1>
<video>
<h2>subtitulo</h2>
ayudar
etiqueta al navegador
interna a interpretar
source, para y procesar
que el
<source correctamente
navegador la pgina
procese Web. apropiado.
el archivo
</hgroup>
src=miVideo.mp3>
<mark>
<source Permite hacer nfasis en una palabra o
src=miVideo.ogg> Atributos:
frase
</video> src url o nombre archivo de video a reproducir
<small> Muestra
controls unaPresentapalabra o de
los controles frase en letra
reproduccin
pequea con fuente de informacin legal
autoplay Reproduccin automtica del video
loop Reproducciones infinitas del video
<address> Para
poster definirProveeinformacin
una imagen que ser demostrada
contacto,
normalmente usado dentro de la seccin
En la seccin nav y section defooter
la pgina Web, se han incluido algunas
<time>
otras etiquetas como se aprecia en la para
Usada especificar
siguiente imagen: datos relacionados
con fecha u hora
<time datetime=2013-08-27>
Fecha: 27/08/2013
10 <body>
</time>
11 <div id=cuerpo
<audio>
12 <header id=encabezado>Usada para reproducir archivos de audio
13 con extensin
<h1>Enacabezado de la pagina ogg header</h1>
Web, elemento o mp3 Dependiendo del
14
<audio </header>
15 <nav id=menu> navegador podr reproducir un tipo de
src=miAudio.mp3></audio>
16 <ul> archivo u otro, por esta razn es
17
o 18
<li>menu 1</li> recomendable incluir ambos archivos y
<li>menu 2</li>
19 <li>menu 3</li> especificar las dos posibles fuentes con la
<audio>
20 </ul> etiqueta interna source, para que el
<source
21 </nav> navegador procese el archivo apropiado.
src=miAudio.mp3>
22 <section id=seccion>
<source <article>
23
24 <h2>Titulo del primerAtributos:
src=miAudio.ogg> artculo</h2>
25
</audio> <p>Este es el contenidosrcprincipal del
url o nombre archivo a reproducir
<mark>artculo 1</mark></p>
26 <footer> controls Presenta los controles de reproduccin
27 autoplay
<small> fin artculo 1</samll> Reproduccin automtica del audio
28 </footer> loop Reproducciones infinitas del audio
29 </article>
<video>
30 <article> Usada para reproducir archivos de video con
31 <h2>Titulo del segudoextensin
artculo</h2>ogg o mp4 Dependiendo del
32
<video <p>Este es el contenido principal del <mark>artculo 2</mark></p>
33 <footer>
navegador podr reproducir un tipo de
src=miVideo.mp4></video>
34 archivo
<samll> fin artculo u otro, por esta razn es
2</samll>
o 35 </footer> recomendable incluir ambos archivos y
36 </article> especificar las dos posibles fuentes con la
37 </section>
<video> etiqueta interna source, para que el
<source navegador procese el archivo apropiado.
src=miVideo.mp3>
<source
src=miVideo.ogg> Atributos:
</video> src url o nombre archivo de video a reproducir
controls Presenta los controles de reproduccin
autoplay Reproduccin automtica del video
loop Reproducciones infinitas del video
poster Provee una imagen que ser mostrada
15
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Al guardar la pgina y abrirla nuevamente, se puede observar el nuevo


contenido:

Encabezado de la pagina Web, elemento header


. menu 1
. menu 2
. menu 3

Titulo del primer articulo


Este es el contenido principal del articulo 1 Elemento barra lateral
Fin articulo 1 uno
Titulo del segundo articulo dos
Este es el contenido principal del articulo 2 tres
Fin articulo 2

Ahora podemos pasar a cambiar el estilo de este contenido, incorporando


las siguientes lneas de cdigo al archivo misestilos.css

48 article{
49 background:#FFFBCC;
50 bprder: 1px solid #999999;
51 padding: 20px;
52 margin-bottom: 15px;
53 }
54 article footer{
55 text-align: right;
56 }
57 #menu li{
58 display: inline-block;
59 list-style: none;
60 padding: 5px;
61 font: bold 14px verdana, sans-serif;
62 }

Lnea Explicacin
48..53 Se establece un color de fondo, borde y espacio entre el texto
y el elemento contenedor para cada etiqueta tipo article
presente en la pgina Web
54..56 Define la alineacin del texto a la derecha para toda etiqueta
footer que se encuentre dentro de una etiqueta article
57..62 Se establece para cada elemento li (lista) dentro de la
seccin identificada como menu, la forma en la que se debe
mostrar (horizontal, sin vieta, espacio y fuente)

16
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

El resultado despus de aplicar los estilos es el siguiente:

Encabezado de la pagina Web, elemento header


menu 1 menu 2 menu 3

Titulo del primer articulo Elemento barra lateral


Este es el contenido principal del articulo 1 uno
Fin articulo 1 dos
tres
Titulo del segundo articulo
Este es el contenido principal del articulo 2
Fin articulo 2

Informacin de la empresa, elemento footer

3.2 Otros estilos CSS.

Durante las ltimas versiones de CSS y gracias a su integracin con


HTML5, han sido grandes los avances que en relacin a estilo e incluso
interactividad ha tenido esta tecnologa. Para el uso de estos nuevos
estilos, es recomendable incluir los prefijos moz- y webkit- para su
correcta interpretacin en los navegadores basados en motores Gecko y
WebKit como Firefox, Safari y Google Chrome. Ejemplo, para definir la
propiedad border-radius a un valor de 20px, se hara as:
-moz-border-radius: 20px y webkit-border-radius: 20px.
Propiedad/Estilo Efecto/Estilo Ejemplo
Esquinas redondeadas. Recibe el
Border-radius border-radius: 20px
valor de la curvatura
Sombras. Recibe el color,
Box-shadow desplazamiento horizontal y box-shadow: #000000 5px 5px 10px

vertical y la difuminacin
Sombra para texto. Recibe el
text-shadow: #000000 5px 5px
Text-shadow color, desplazamiento horizontal y
10px
vertical y la difuminacin
Funcin aplicada a la propiedad
background para dar un efecto de background:linear-
Linear-gradient
difuminacin a un fondo. Recibe el gradient(top,color,color)

punto inicial y los dos colores


Modifica la forma de un elemento
transform: scale (2)
a travs de las funciones scale
transform: rotate (45deg)
Transform (escalar), rotate (rotar), skew
transform: skew (20deg,20deg)
(inclinar) y translate (trasladar) transform: translate (50px)

17
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Aplicando los nuevos estilos:

57 article{
58 background:#FFFBCC;
59 bprder: 1px solid #999999; Titulo del primer articulo
Este es el contenido principal del articulo 1

60 padding: 20px; Fin articulo 1

61 margin-bottom: 15px;
62 -moz-border-radius: 20px; Titulo del segundo articulo
Este es el contenido principal del articulo 2
63 -webkit-border-radius: 20px; Fin articulo 2

64 border-radius: 20px;
65 -moz.box-shadow: rgb(150,150,150) 5px 5px;
66 -webkit-box-shadow: rgb(150,150,150) 5px 5px;
67 box-shadow: rgb(150,150,150) 5px 5px;
68 }

27 #menu{
28 background: #cccccc;
29 padding: 5px 15px; menu 1 menu2 menu3

30 background: -webkit-linear-gradient(tap, #FFFFFF, #006699;


31 background: -moz-linear-gradient(top, #FFFFFF, #006699;
32 }

38 #lateral{
39 float: left;
40 width: 220px;
Elemen
41 margin: 20px 0px; uno
to barr
a latera
l
42 padding: 20px; dos
43 background:#cccccc; tres
44 -moz-transform: rotate(10deg);
45 -webkit-transfor: rotate(10deg);
46 }

Se obtienen los siguientes cambios en la pgina Web:

Encabezado de la pagina Web, elemento header


menu 1 menu2 menu3

Titulo del primer articulo Elemen


to barr
Este es el contenido principal del articulo 1 uno a latera
Fin articulo 1 l
dos
tres
Titulo del segundo articulo
Este es el contenido principal del articulo 2
Fin articulo 2

Informacin de la empresa, elemento footer

18
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
src=miVideo.ogg> Atributos:
</video> src url o nombre archivo de video a reproducir
controls Presenta los controles de reproduccin
autoplay Reproduccin automtica del video
Desarrollo
loop
de Interfaces Grficas con HTML5
Reproducciones infinitas del video
poster Provee una imagen que ser mostrada

4. JAVASCRIPT

La tecnologa encargada de brindar interactividad en HTML5 es


JavaScript, el cdigo JavaScript puede estar embebido dentro de la pgina
HTML o en un archivo aparte con su propia extensin .js. En este ltimo
caso que es el ms recomendado, se debe incluir la etiqueta
<script>dentro del encabezado de la pgina Web, referenciando el
nombre del archivo .js en su atributo src. Ejemplo: <script
src=miArchivoJavaScript.js></script>

4.1 Referenciando elementos HTML desde JavaScript

Para acceder a un determinado elemento HTML desde JavaScript existen


diferentes mecanismos llamados selectores:

Selector Accede a Ejemplo


getElementsByTagName Todos los elementos de getElementsByTagName(p)
Retorna un arreglo con todos los elementos
una determinada Pexistentes en la pgina Web.
etiqueta
getElementsByTagName(p)[0]
Accede al primer elemento tipo P de la
pgina Web.

getElementByID Un elemento en getElementById(miID)


Accede al elemento de la pgina Web cuyo
particular identificado ID es miID
con un determinado ID
getElementsByClassName Uno o varios elementos getElementsByClassName(miClase)
Accede a los elementos cuyo className
con un className sea miClase
determinado
querySelector Un elemento mediante querySelector(p:first-child)
Accede al primer elemento P de la pgina
la sintaxis de seleccin Web
de CSS
querySelectorAll Una lista de elementos querySelectorAll(#principal p)
Retorna un arreglo con todos los elementos
que coincida con el P que sean hijos de principal
patrn de bsqueda
CSS

19
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

4.2 Asignando eventos a los elementos HTML5 desde JavaScript

El mecanismo estndar para asignar eventos a los elementos HTML5 es


utilizando el mtodo addEventListener, el cual posee la siguiente
sintaxis:

Elemento.addEventListener(evento,funcin,boolean)

Donde:
Elemento: Es la referencia a cualquier elemento HTML
Evento: Nombre del evento que se desea controlar
Funcin: Nombre de la funcin encargada de gestionar el evento
Boolean: Recibe el valor True o False dependiendo si se desea emplear
el evento anidado con otros eventos o no. Generalmente este parmetro
es False

Ejemplo:

document.querySelector(#miTitulo).addEventListener(click,
procesarClick,false);

Define que la funcin procesarClick se debe ejecutar al hacer click


sobre el elemento HTML identificado con el id miTitulo

Ahora es posible con cdigo JavaScript asignar eventos al men de la


pgina Web para que cada vez que se d clic en alguna de sus opciones,
se presente un respectivo mensaje:

Encabezado de la pagina Web, elemento header


menu 1 menu2 menu3

x
Alerta de JavaScript
Titulo del primer articulo Elemen
to barr
Este es el contenido principal
Hizo clic endel articulo
el menu 1 1 uno a latera
Fin articulo 1 l
Aceptar dos
tres
Titulo del segundo articulo
Este es el contenido principal del articulo 2
Fin articulo 2

Informacin de la empresa, elemento footer

20
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

La pgina HTML debe indicar su acceso a un archivo Javascript:

1 <!DOCTYPE html>
2 <html lang=es>
3 <head>
4 <meta charset=iso-8859-1
5 <meta name=description content=Ejemplo de HTML5>
6 <meta name=keywords content=HTML5, CSS3, JavaScript>
7 <title>Este texto es el ttulo del documento</title>
8 <link rel=stylesheet herf=misestilos.css>
9 <script src=miArchivoJavaScript.js></script>
10 </head>

El cdigo JavaScript, guardado en un archivo llamado


miArchivoJavaScript.js y ubicado en el directorio donde se encuentra el
archivo HTML es el siguiente:

1 window.addEventListener(load,asignarEventos,false);
2 function asignarEventos()
3 {
4 document.getElemensById(menu1).addEventListener(click,clic1,false);
5 document.getElemensById(menu2).addEventListener(click,clic2,false);
6 document.getElemensById(menu3).addEventListener(click,clic3,false);
7 }
8 function click1()
9 {
10 window.alert(Hizo click en el menu 1);
11 }
12 function click2()
13 {
14 window.alert(Hizo click en el menu 2);
15 }
16 function click3()
17 {
18 window.alert(Hizo click en el menu 3);
19 }

Lnea Explicacin
1 Al cargar la pgina (evento load) llama a la funcin asignarEventos
2..7 Accede a los elementos de la pgina Web identificados como
menu1, menu2 y menu3 y le asigna al evento clic la ejecucin de
una determinada funcin (clic1, clic2 o clic3)
8..19 Funciones que se ejecutan al hacer clic sobre alguno de los mens
y que presentan un respectivo mensaje

21
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

5. Los Formularios Web

Los formularios Web en HTML5 incluyen nuevos tipos y controles que


facilitan el ingreso de informacin por parte del usuario.

5.1 Otros tipos input.

Etiqueta <input> atributo type: bre


Nom
ail
e-m

c cin
Dire

Type Imagen Ejemplo Descripcin


email <input type="email" Valida el correcto
name="miEmail" /> ingreso de una
direccin de correo
electrnico

url <input type="url" Valida el correcto


name="miUrl" /> ingreso de una url

number <input type="number" Permite seleccionar


name="miNumero" nmeros dentro de un
min="0" max="50" rango especificado
step="5"/>

range <input type="range" Permite posicionar una


name="miRango" barra de
min="0" max="10" desplazamiento en una
step="1"> posicin relativa a un
valor dentro de un
rango determinado

date <input type="date" Permite seleccionar


name="miFecha" /> una fecha

time <input type="time" Permite seleccionar


name="miHora" /> una hora

color <input type="color" Permite seleccionar un


name="miColor" /> color

22
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

5.2 Otros atributos para la etiqueta input.

Atributo Valor Significado Imagen


esperado
placeholder Texto Texto presentado dentro
del campo como
sugerencia para la
entrada

required No aplica Valida que el campo no


se enve vaco

pattern Expresin Permite ingresar una


expresin regular para
regular
realizar cualquier tipo de
validacin personalizada

form Nombre de un Permite asociar un <input type="text"


form="formulario">
elemento o control a un
formulario en
formulario Web, aunque
la pgina el control no est
contenido dentro del
formulario

list Id de un Presenta un listado de


valores sugeridos para
elemento de
ser introducidos en la
formulario tipo entrada del formulario

<datalist>

23
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

5.3 Otros elementos para formularios.

Etiqueta Significado Imagen


<datalist> Permite construir una lista de

<datalist id="postal"> elementos sugeridos para ser


<option value=1001 utilizados en un elemento de
label=Telfono 1>
<option value=1002 entrada en un formulario
label=Telfono 2>
</datalist>
<progress> Permite visualizar el avance

<progress value="5" en la ejecucin de una tarea


max="15"></progress>
<meter> Similar a progress pero con la

<meter value="5" min="1" intencin de mostrar una


max="15"></meter> medida

Ahora es posible agregar un formulario Web a la pgina que se viene


construyendo, para esto reemplazamos en el archivo html el cdigo de la
seccin <aside> por las etiquetas necesarias para crear el formulario
Web.
24 <article>
25 <h2>Titulo del primer articulo</h2>
26 <p>Este es el contenido princinpal del <mark>articulo1</mark></p>
27 <footer>
28 <small> fin articulo 1</small>
29 </footer>
30 </article>
31 <article>
32 <h2>Titulo del segundo articulo</h2>
33 <p>Este es el contenido princinpal del <mark>articulo2</mark></p>
34 <footer>
35 <small> fin articulo 2</small>
36 </footer>
37 </article>
38 </action>
39 <aside id=lateral>
40 <form name=formulario>
41 <h2> Formulario Web </h2>
42 <table border=0>
43 <tr><td>Nombre:</td><td><input type=text name=txtNombre required></td></tr>
44 <tr><td>Correo:</td><td><input type=email name=miEmail placeholder=Ingrese email/></td></tr>
45 <tr><td>Estrato:</td><td><input type=number name=numEdad min=1 max=6 step=1/></td></tr>
46 <tr><td>Fecha:</td><td><input type=text name=txtNombre equired></td></tr>
47 <tr><td><input type=submit name=btnEnviar value=Enviar/></td></tr>
48 </table>
49 </form>
50 </aside>
51 <footer id=pie>
52 Informacin de la empresa, elemento footer
53 </footer>
54 </div>
55 </body>
56 </html>

24
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Lnea Explicacin
40 Define el inicio del formulario Web
41 Ttulo para el formulario Web
42 Inicio de tabla, esta tabla de borde cero se utiliza para que los
elementos del formulario queden correctamente alineados
43..47 Definicin de los campos del formulario Web (nombre, correo,
estrato y fecha)
48 Fin de la tabla
49 Fin del formulario Web

Mejoramos la apariencia del formulario Web a travs del archivo


misEstilos.css incluyendo las siguientes lneas:

25
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

17 table{
18 text-shadow: #369 2px 2px 2px;
19 font-family:Verdana, Geneva, sans-serif;
20 font-sizw:10px
21 }
22 #cuerpo{
23 width:960px;
24 margin:15px auto;
25 text-align:left;
26 }
27 #encabezado{
28 background: #ffbb9;
29 border: 1px solid #999999;
30 padding: 20px;
31 }
32 #menu{
33 background: #cccccc;
34 padding: 5px 15px;
35 background: -webkit-linear-gradient(top, #FFFFFF, #006699);
36 background: -moz-linear-gradient(top, #FFFFFF, #006699);
37 }
38 #seccion{
39 floar:left;
40 width:660px;
41 margin:20px;
42 }
43 #lateral{
44 float:left;
45 width:220px;
46 margin:20px 0px;
47 padding:20px;
48 background:#cccccc;
49 -moz-border-radius: 20px;
50 -webkit-border-radius: 20px;
51 border-radius: 20px;
52 -moz-box-shadow: rgb(150,150,150) 5px 5px;
53 -webkit-box-shadow: rgb(150,150,150) 5px 5px;
54 box-shadow: rgb(150,150,150) 5px 5px:
55 }

Lnea Explicacin
17..21 Establece el estilo para las tablas presentes en el archivo HTML
49..54 Define puntas redondeadas y sombreadas para el elemento
identificado con el id lateral, el cual corresponde a la seccin aside
justamente donde se encuentra el formulario

26
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Ahora la pgina Web luce de esta manera:

Encabezado de la pagina Web, elemento header


menu 1 menu2 menu3 x
Alerta de JavaScript

Hizo clic en el menu 3

Titulo del primer articulo


Este es el contenido principal del articulo 1 Aceptar Formulario Web
Fin articulo 1 Nombre:
Correo: Ingrese email

Titulo del segundo articulo Estrato:


Este es el contenido principal del articulo 2 Fecha: dd/mm/aaaa
Fin articulo 2 Enviar

Informacin de la empresa, elemento footer

27
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

GLOSARIO

HTML: HyperText Markup Language, Lenguaje de marcacin de hiper-


texto, es un estndar que, en sus diferentes versiones, define una estruc-
tura bsica y un cdigo para la definicin de contenido de una pgina
web, como texto, imgenes, etc..

CSS: Las hojas de estilo en cascada o (Cascading Style Sheets por sus
siglas en ingls) hacen referencia a un lenguaje de hojas de estilos usado
para describir la presentacin semntica (el aspecto y formato) de un
documento escrito en lenguaje de marcas. Su aplicacin ms comn es
dar estilo a pginas webs escritas en lenguaje HTML y XHTM.

BROWSER: Tambin denominado Navegador. Es un software que permi-


te 10
el acceso a Internet, interpretando la informacin de archivos y sitios
web para que stos puedan
FAVA ser
- Formacin ledos.Virtuales de Aprendizaje
en Ambientes SENA - Servicio Nacional de Aprendizaje

28
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

BIBLIOGRAFA

Gauchat, Juan Diego. (2012). El gran libro de HTML5, CSS3 y Javascript


(1.Ed). Barcelona, Espaa: Ediciones tcnicas Marcombo.

Wikipedia La enciclopedia libre. Consultado en septiembre 30 de 2013,


disponible en http:es.wikipedia.org.

924
29
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

CREDITOS

Control de documento
Construccin Objeto de Aprendizaje
Desarrollo de Interfaces Grficas con HTML5

Desarrollador de contenido
Experto temtico Andrs Julin Valencia Osorio

Asesor pedaggico Claudia Milena Hernndez Naranjo

Carlos Alberto Espinosa Gmez


Produccin multimedia
Victor Hugo Tabares Carreo

Programador Daniel Martnez

Lder expertos temticos Ana Yaqueline Chavarro Parra

Lder lnea de produccin Santiago Lozada Garcs

25
30
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje

También podría gustarte