Practica2 PDF

Programacion Web
Practica 2: HTML5
Diana Aurora Cruz Hernandez

Jose Luis Quiroz Fabian
1 Introduccion
1.1 Que es HTML5?
HTML5 provee basicamente tres caractersticas: estructura, estilo y funcional-
idad. HTML5 es considerado el producto de la combinacion de HTML, CSS
y Javascript y es el estandar recomendado por la W3C para el desarrollo web.
Algunas de las nuevas caractersticas de HTML5 seran:
1. Nuevas etiquetas semanticas para estructurar los documentos HTML.

2. Los nuevos elementos multimedia como < audio > y < video >.
3. La integracion de graficos vectoriales escalables (SVG) en sustitucion de
los genericos < object >, y un nuevo elemento < canvas > que nos permite
dibujar en el.
4. El cambio, redefinicion o estandarizacion de algunos elementos, como <

a >, < cite > o < menu >.
5. MathML para formulas matematicas.
6. Almacenamiento local en el lado del cliente.
2 Etiquetas semanticas estructurales

HTML5 incorpora las siguientes etiquetas semanticas que nos permiten describir
con mayor precision el contenido. Las etiquetas semanticas son:
1. < section >: se utiliza para representar una seccion general dentro de
un documento o aplicacion, como un captulo de un libro.
2. < article >: representa un componente de una pagina que consiste en una
composicion autonoma en un documento, pagina, aplicacion, o sitio web
con la intencion de que pueda ser reutilizado y repetido.
1
3. < aside >:representa una seccion de la pagina que abarca un contenido
relacionado con el contenido que lo rodea, por lo que se le puede considerar
un contenido independiente.
4. < f ooter >: representa el pie de una seccion, con informacion acerca de
la pagina/seccion que poco tiene que ver con el contenido de la pagina,
como el autor, el copyright o el ano.
5. < header >: La intencion de < header > es proveer informacion intro-
ductoria (ttulos, subttulos, logos)
6. < nav >: representa una seccion de una pagina que enlaza a otras paginas
o a otras partes dentro de la pagina. Solo las secciones que constan de
bloques de navegacion principales son apropiados para el elemento de nave-
gacion.
Las etiquetas semanticas se definieron considerando el diseno mas comun
utilizado por los desarrolladores web. En la figura ?? se muestra este diseno, y
a que parte se refiere cada una de las etiquetas semanticas.
Figure 1: Representacion visual de un clasico diseno web
2.1 Ejemplo 1: Etiquetas semanticas
2
1 <! DOCTYPE html>
2 < html>
3 <head>
4 <title> TITULO </title>
5 </head>
6 <body>
7
8 <header>
9 <h1>El pato< / h1>
10 < / header>
11 <section>
12 <section>
13 <h1>Introduccion< / h1>
14 <p>En esta seccion , ampliaremos nuestro concepto del
pato.
15 < / section>
16 <section>
17 <h1>Habitat< / h1>
18 <p>El pato , como fiero depredador , necesita un
entorno con abundantes lobos que cazar.
19 < / section>
20 <aside>
21 <p>otros estudiosos del pato
22 < / aside>
23 < / section>
24 <footer>
25 <p> ( c ) 2010 The Example company
26 < / footer>
27
28 </body>
29 </ html>
EJERCICIO: COPIAR EL CODIGO EN UN EDITOR DE TEXTO, GUARDAR

CON EXTENSION html Y ABRIR EL ARCHIVO CON CHROME.
Observa como las etiquetas semanticas no tienen un estilo predeterminado
que el navegador asigne. Por ejemplo el contenido de < aside > no se muestra
en la parte lateral.
2.2 Ejemplo 2: figure y figcaption

En este ejemplo se muestra como se utiliza la etiqueta figure que fue creada
para ayudarnos a ser aun mas especficos a la hora de declarar el contenido del
documento.
Descargar una imagen, por ejemplo myimg.jpg, guardarla en la carpeta de
su documento HTML y escribir el codigo.
1 <! DOCTYPE html>
2 < html>
3 <body>
3
4
5 Este es el texto de mi primer mensaje
6 <figure>
7 <img src= " myimage.jpg " >
8 <figcaption>
9 Esta es la imagen del primer mensaje
10 < / figcaption>
11 < / figure>
12
13 </body>
14 </ html>
3 Formularios
Los formularios web permiten a los usuarios insertar datos, tomar decisiones,comunicar
informacion y cambiar el comportamiento de una aplicacion.
3.1 Ejemplo 3: Estructura de un Formulario

La estructura de un formulario no cambia en HTML5
1 <! DOCTYPE html>
2 <html lang= " es " >
3 <head>
4 <title> Formularios </title>
5 </head>
6 <body>
7 <section>
8 <form name= " miformulario " id= " miformulario " method= " get " >
9 <input type= " text " name= " nombre " id= " nombre " >
10 <input type= " submit " value= " Enviar " >
11 < / form>
12 < / section>
13 </body>
14 </ html>
3.2 Ejemplo 4: nuevos atributos para input

El elemento mas importante en un formulario es input. Este elemento puede
cambiar sus caractersticas gracias al atributo type (tipo). 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.
1 <form name= " miformulario " id= " miformulario " method= " get " >
2 Tipo email:Valida que lo que se ingresa tenga el formato
de un email<br>
3 <input type= " email " name= " miemail " id= " miemail " > <br>
4
4 Tipo range:Permite al usuario seleccionar un valor a
partir de una serie de valores o rango<br>
5 <input type= " range " name= " numero " id= " numero " min= " 02
max= " 10 " step= " 5 " > <br>
6 Tipo date: Ofrece una mejor forma de ingresar una
fecha<br>
7 <input type= " date " name= " fecha " id= " fecha " > <br>
8 Tiopo Color:Provee una interface predefinida similar para
seleccionar colores <br>
9 <input type= " color " name= " micolor " id= " micolor " >< br>
10 <input type= " submit " value= " Enviar " >
11 < / form>
3.3 Ejemplo 4: Atributo multiple

El atributo multiple es otro atributo booleano que puede ser usado en algunos
tipos de campo (por ejemplo, email o file) para permitir el ingreso de entradas
multiples en el mismo campo.
1 Ingresa varios emails separados por comas
2 <input type= " email " name= " miemail " id= " miemail " multiple>
3.4 Ejemplo 5: Atributo autofocus

El atributo autofocus enfocara la pagina web sobre el elemento seleccionado
pero considerando la situacion actual. No movera el foco cuando ya haya sido
establecido por el usuario sobre otro elemento.
1
2 <input type= " text " name= " nombre " id= " nombre " >
3 <input type= " search " name= " busqueda " id= " busqueda "
autofocus>
3.5 EJERCICIO
Crea un formulario con los siguiente campos: Nombre: Edad: Fecha de nacimiento:
Sexo: Color favorito: email:
Agrega un campo de tipo range e investiga e incorpora otros controles que
se puedan incluir dentro del formulario.
4 Graficos en HTML5
4.1 Ejemplo 6:El elemento canvas
Este elemento genera un espacio rectangular vaco en la pagina web (lienzo) en
el cual seran mostrados los resultados de ejecutar los metodos provistos por la
API.
5
1 <! DOCTYPE html>
3 <head>
4 <title> Canvas API </title>
5 <script src= " canvas.js " >< / script>
6 </head>
7 <body>
8 <section id= " cajalienzo " >
9 <canvas id= " lienzo " width= " 500 " height= " 300 " >
10 Su navegador no soporta el elemento canvas
11 < /canvas>
12 < / section>
13 </body>
14 </ html>
Los atributos width (ancho) y height (alto) declaran el tamano del lienzo en
pixeles. Estos atributos son necesarios debido a que todo lo que sea dibujado
sobre el elemento tendra esos valores como referencia. Al atributo id, como en
otros casos, nos facilita el acceso al elemento desde el codigo Javascript.
4.2 Ejemplo 5: Dibujando con canvas

1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <canvas id= " myCanvas " width= " 200 " height= " 100 " style= "
border:1px solid # d3d3d3; " >
6 No se soporta canvas< /canvas>
7
8 <script>
9 var c = d oc um e nt .g e tE l em en t By I d ( " myCanvas " ) ;
10 var ctx = c.getContext ( " 2 d " ) ;
11 ctx.moveTo (0 ,0) ;
12 ctx.lineTo (200 ,100) ;
13 ctx.stroke () ;
14 </script>
15
16 </body>
17 </ html>
4.3 Ejemplo 5: Animacion con canvas

1 <! DOCTYPE html>
3 <head>
4 <title> Formularios </title>
5 <script> function iniciar () {
6 var e l e m e n t o = d o c u m e n t . g e t E l e m e n t B y I d ( ' lienzo ') ;
6
7 l i e n z o = e l e m e n t o . g e t C o n t e x t ( '2 d ') ;
8 w in d ow .a d dE v en tL i st en e r ( ' mousemove ' , animacion , false ) ;
9 } function animacion ( e ) {
10 lienzo.clearRect (0 ,0 ,300 ,500) ;
11 var xraton=e.clientX;
12 var yraton=e.clientY;
13 var xcentro=220;
14 var ycentro=150;
15 var angulo=Math.atan2 ( xraton-xcentro , yraton-ycentro ) ;
16 var x=xcentro + Math.round ( Math.sin ( angulo ) *10) ;
17 var y=ycentro + Math.round ( Math.cos ( angulo ) *10) ;
18 lienzo.beginPath () ;
19 lienzo.arc ( xcentro , ycentro ,20 ,0 , Math.PI *2 , false ) ;
20 lienzo.moveTo ( xcentro +70 ,150) ;
21 lienzo.arc ( xcentro +50 ,150 ,20 ,0 , Math.PI *2 , false ) ;
22 lienzo.stroke () ;
23 lienzo.beginPath () ;
24 lienzo.moveTo ( x +10 , y ) ;
25 lienzo.arc (x ,y ,10 ,0 , Math.PI *2 , false ) ;
26 lienzo.moveTo ( x +60 , y ) ;
27 lienzo.arc ( x +50 , y ,10 ,0 , Math.PI *2 , false ) ;
28 lienzo.fill () ;
29 } w in d ow .a d dE v en tL i st e ne r ( " load " , iniciar , false ) ;
30 </script>
31 </head>
32 <body>
33 <section id= " cajalienzo " >
34 <canvas id= " lienzo " width= " 500 " height= " 300 " >
35 Su navegador no soporta el elemento canvas
36 < /canvas>
37 < / section>
38 </body>
39 </ html>
4.4 Ejemplo 7: Elemento svg

SVG significa Scalable Vector Graphics
Se utiliza para definir los graficos para la Web
SVG es una recomendacion del W3C
El elemento HTML5 svg es un contenedor de graficos SVG.
1 <! DOCTYPE html>
2 < html>
3 <body>
4 Circulo:
5 <svg width= " 100 " height= " 100 " >
6 <circle cx= " 50 " cy= " 50 " r= " 40 " stroke= " green "
stroke-width= " 4 " fill= " yellow " />
7 < / svg>
8 Rect ngulo:
7
9 <svg width= " 400 " height= " 100 " >
10 <rect width= " 400 " height= " 100 " style= " fill:rgb (0 ,0 ,255)
; s t r o k e - w i d t h : 1 0 ; s t r o k e : r g b (0 ,0 ,0) " />
11 < / svg>
12 Estrella:
13 <svg width= " 300 " height= " 200 " >
14 <polygon points= " 100 ,10 40 ,198 190 ,78 10 ,78 160 ,198 "
15 style= "
fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;
" />
16 < / svg>
17
18 </body>
19 </ html>
4.5 Ejemplo 9: Dibujando un Logo

1 <svg height= " 130 " width= " 500 " >
2 <defs>
3 <linearGradient id= " grad1 " x1= " 0% " y1= " 0% " x2= " 100% "
y2= " 0% " >
4 <stop offset= " 0% " style= " stop-color:rgb (255 ,255 ,0) ;
stop-opacity:1 " />
5 <stop offset= " 100% " style= " stop-color:rgb (255 ,0 ,0) ;
stop-opacity:1 " />
6 < / linearGradient>
7 < / defs>
8 <ellipse cx= " 100 " cy= " 70 " rx= " 85 " ry= " 55 " fill= " url (#
grad1 ) " />
9 <text fill= " # ffffff " font-size= " 45 " font-family= "
Verdana " x= " 50 " y= " 86 " >SVG< / text>
10 Sorry , your browser does not support inline SVG.
11 < / svg>
4.6 Ejemplo 9: Animacion con svg

1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <p >< strong>Note:< / strong> This example does not work in
Internet Explorer and Safari.< / p>
6
7 <svg width= " 500 " height= " 500 " >
8 <rect id= " rec " x= " 300 " y= " 100 " width= " 300 " height= " 100 "
style= " fill:lime " >
9 <animate attributeName= " x " attributeType= " XML " begin=
" 0 s " dur= " 6 s " fill= " freeze " from= " 300 " to= " 0 " />
8
10 <animate attributeName= " y " attributeType= " XML " begin=
" 0 s " dur= " 6 s " fill= " freeze " from= " 100 " to= " 0 " />
11 <animate attributeName= " width " attributeType= " XML "
begin= " 0 s " dur= " 6 s " fill= " freeze " from= " 300 " to= "
800 " />
12 <animate attributeName= " height " attributeType= " XML "
begin= " 0 s " dur= " 6 s " fill= " freeze " from= " 100 " to= "
300 " />
13 <animate attributeName= " fill " attributeType= " CSS "
from= " lime " to= " red " begin= " 2 s " dur= " 4 s " fill= "
freeze " />
14 < / rect>
15 Sorry , your browser does not support inline SVG.
16 < / svg>
17
18 </body>
19 </ html>
En la siguiente practica revisaremos CSS (Hojas de estilo) para la pre-

sentacion de los elementos, y exploraremos las principales propiedades y los
efectos visuales que podemos lograr.

Practica2 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Practica2 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Programacion Web

Diana Aurora Cruz Hernandez

1. Nuevas etiquetas semanticas para estructurar los documentos HTML.

4. El cambio, redefinicion o estandarizacion de algunos elementos, como <

2 Etiquetas semanticas estructurales

Figure 1: Representacion visual de un clasico diseno web

2.1 Ejemplo 1: Etiquetas semanticas

EJERCICIO: COPIAR EL CODIGO EN UN EDITOR DE TEXTO, GUARDAR

2.2 Ejemplo 2: figure y figcaption

3.1 Ejemplo 3: Estructura de un Formulario

3.2 Ejemplo 4: nuevos atributos para input

3.3 Ejemplo 4: Atributo multiple

3.4 Ejemplo 5: Atributo autofocus

4.2 Ejemplo 5: Dibujando con canvas

4.3 Ejemplo 5: Animacion con canvas

4.4 Ejemplo 7: Elemento svg

4.5 Ejemplo 9: Dibujando un Logo

4.6 Ejemplo 9: Animacion con svg

En la siguiente practica revisaremos CSS (Hojas de estilo) para la pre-

S-ar putea să vă placă și