El documento describe varios elementos y técnicas de HTML5 para interactuar con controles de interfaz de usuario, incluyendo: 1) El modelo de objetos de documento (DOM) que proporciona un API para acceder y modificar elementos de una página web. 2) Los elementos <video> y <audio> para reproducir video y audio de forma nativa en HTML5. 3) El elemento <canvas> que permite dibujar gráficos mediante JavaScript. 4) El lenguaje de gráficos vectoriales SVG para dibujar formas, texto, y aplicar transformaciones

1. Interactuando con controles de UI
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido
• El Document Object Model
• Video en HTML5
• Audio en HTML5
• HTML5 canvas
• Gráficos SVG

3. El Document Object Model
El DOM (Document Object Model)
• Proporciona un API de programación para
acceder a los elementos de una página web.
Permite:
• Encontrar y establecer los valores de los
elementos de una página
• Manejar eventos para los controles en una página
• Modificar los estilos asociados con los elementos
• Serializar y deserializar una página como un
documento XML
• Validar y actualizar las páginas web

4. El Document Object Model
Encontrando elementos en el DOM:
• Tenemos el siguiente form:
• Podemos referenciar al form:
<form name="contactosForm">
<input type="text" name="nameBox" id="nameBoxId" />
</form>
document.forms[0] // forms es un arreglo
document.forms["contactForm"]
document.forms.contactForm
document.contactForm

5. El Document Object Model
Encontrando elementos en el DOM:
• Podemos referenciar al campo de texto
nameBox :
document.forms.contactForm.elements[0]
document.forms.contactForm.elements["nameBox"]
document.forms.contactForm.nameBox
document.contactForm.nameBox
document.getElementById("nameBoxId") El mas usado

6. Video en HTML5
• HTML5 nativamente permite reproducir
video.
• Ya no es necesario usar plugins para esto.
• HTML5 ofrece una manera estándar de
reproducir videos en la Web.
• Debemos proveer los formatos comunes
soportados por los browsers. Ej:
– Ogg/Theora (.ogv)
– WebM/VP8 (.webm)
– MPEG-4/H.264 (.mp4)

7. Video en HTML5
• El elemento <video>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" />
Tu navegador no soporta HTML5!
</video>

8. Video en HTML5
• Soportando varios formatos:
• El type no es obligatorio.
• Herramientas para convertir formatos:
– Firefogg.org (Firefox plug-in)
– Miro Video Converter
<video controls="controls" height="480">
<source src="media/eagle.webm"
type='video/webm; codecs="vorbis, vp8"' />
<source src="media/eagle.ogv"
type='video/ogg; codecs="theora, vorbis"' />
<source src="media/eagle.mp4"
type='media/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
No se puede reproducir el video.
</video>

9. Video en HTML5
Configuraciones de <video>
• autoplay El video inicia reproduciéndose
• controls Los controles del video se muestran:
EJ: play/pausar, maximizar.
• height El alto en pixeles.
• loop Repetir el video al terminar.
• muted Reproducir sin audio.
• poster Imagen a mostrar antes de reproducir el
video.
• preload Como se carga el video. auto, metadata,
o none.
• src Dirección del video.
• width Ancho en pixeles.

10. Video en HTML5
Interactuando con el DOM del video
• play()
• pause()
• load()
• currentTime
• paused
• Muted
• volume

11. Audio en HTML5
• HTML5 nativamente permite reproducir audio
sin necesidad de usar plug-ins.
• Es similar al manejo de video (ambos
heredan de HTMLMediaElement)
• Formatos mas comunes:
– Ogg/Vorbis (.oga, .ogg)
– MP3 (.mp3)
– MP4 (.mp4, .mp4a, .aac)
– WAV (.wav)

12. Audio en HTML5
• El elemento <audio>
<audio controls="controls">
<source src="horse.mp3" />
Tu navegador no soporta HTML5!
</audio>

13. Audio en HTML5
• Soportando varios formatos:
• El orden es importante al igual que con los
videos.
<audio id="audio" controls="controls">
<source src="media/horse.ogg"
type='audio/ogg; codecs="vorbis"' />
<source src="media/horse.mp3"
type='audio/mpeg; codecs="mp3"' />
</audio>

14. Audio en HTML5
Configuraciones de <audio>
• autoplay El audio inicia inmediatamente.
• controls Los controles del audio se
muestran: EJ: play/pausar, volumen.
• loop Repetir el video al terminar.
• muted Sonido silenciado.
• preload Como se carga el audio. auto,
metadata, o none.
• src Dirección del video.

15. Audio en HTML5
Interactuando con el DOM del audio
• play()
• pause()
• load()
• currentTime
• paused
• muted
• volume

16. HTML5 canvas
• Qué es un canvas?
• Es un contenedor para dibujar imágenes y
gráficos.
• Para dibujar debemos usar JavaScript
Elemento
Canvas
API
Javascript+

17. HTML5 canvas
• El elemento <canvas>
• Dándole un borde desde CSS:
<canvas id="miCanvas" width= "400" height="200">
Tu navegador no soporta la etiqueta canvas de HTML5!
</canvas>
canvas {
border: 1px solid black;
}

18. HTML5 canvas
Propiedades de un <canvas>
• height
• Width
Métodos:
• getContext() Acepta un parámetro de 2d y
retorna un objeto CanvasRenderingContext2D
que representa el contexto del canvas
• toDataUrl() Crea un URL que permite usarlo
como imagen, Ej: en el elemento <img>

19. HTML5 canvas
CanvasRenderingContext2D
• Se lo usa para dibujar en el canvas
Métodos y Propiedades
addColorStop(), arc(), arcTo(), beginPath(),
bezierCurveTo(), clearRect(), clip(), closePath(),
createImageData(), createLinearGradient(),
createPattern(), createRadialGradient(), data,
drawImage(), fill(), fillRect(), fillStyle, fillText(),
getImageData(), globalAlpha ,
globalCompositeOperation , isPointInPath(), lineCap ,
lineJoin, lineTo(), lineWidth , measureText(), miterLimit ,
moveTo(), putImageData(), quadraticCurveTo(), rect(),
restore(), rotate(), save(), scale(), setTransform(),
shadowBlur , shadowColor , shadowOffsetX ,
shadowOffsetY , strokeRect(), strokeStyle , strokeText(),
textAlign , textBaseline , transform(), translate()

20. HTML5 Canvas
• Coordenadas de un canvas:

21. HTML5 canvas
• Dibujar en el elemento <canvas>
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillRect(10, 50, 100, 200);
</script>

22. HTML5 canvas
Dibujando rectágulos en el <canvas>
• clearRect(x, y, w, h) Limpia el area
especificada.
• fillRect(x, y, w, h) Dibuja un area
rectangular rellena.
• strokeRect(x, y, w, h) Dibuja un area
rectángula que no esta rellena.
 Se usan mediante el contexto.
 Reciben: posición en X, en Y, el ancho y el
alto

23. HTML5 canvas
• Dibujar en el elemento <canvas>
• Un script se encarga de dibujar.
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle=.fillStyle="#ff0000";
contexto.fillRect(10, 50, 100, 200);
</script>

24. HTML5 canvas
• Dibujando rectángulos en el <canvas>
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle="#ff0000";
contexto.fillRect(10, 50, 100, 200);
</script>

25. HTML5 canvas
Dibujando Paths en el <canvas>
• moveTo(x,y)
• lineTo(x,y)
• stroke();
• fill();
• beginPath();
• closePath();
• fillStyle
• strokeStyle

26. HTML5 canvas
Dibujando Paths en el <canvas>
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle = "#ff0000";
contexto.beginPath();
contexto.moveTo(75, 50);
contexto.lineTo(75, 100);
contexto.lineTo(25, 100);
contexto.fill();
</script>

27. HTML5 canvas
Dibujando círculos en el <canvas>
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.beginPath();
contexto.arc(95, 50, 40, 0, 2 * Math.PI);
contexto.stroke();
</script>

28. HTML5 canvas
Dibujando texto en el <canvas>
• font
• fillText(text,x,y)
• strokeText(text,x,y)
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle = "#00ff00";
contexto.font = "30px Arial";
contexto.fillText("Hola Mundo", 10, 50);
</script>

29. HTML5 canvas
Gradientes
• createLinearGradient(x,y,x1,y1)
• createRadialGradient(x,y,r,x1,y1,r1)
• addColorStop() puede ser del 0 al 1
Para usarlo, asignar el gradiente a la propiedad
fillStyle o strokeStyle

30. HTML5 canvas
Gradientes
<script>
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// Create gradient
var gradiente = contexto.createLinearGradient(0, 0, 200, 200);
gradiente.addColorStop(0, "red");
gradiente.addColorStop(0.6, "yellow");
// Fill with gradient
contexto.fillStyle = gradiente;
contexto.fillRect(10, 10, 150, 80);
</script>

31. Gráficos SVG
Qué es SVG?
• SVG permite dibujar gráficos vectoriales 2D
• Define elementos XML que representan una
amplia gama de formas
• SVG utiliza un modelo de "modo retenido"
• El árbol de objetos se mantiene en la memoria
• La velocidad de cálculo depende del número de
elementos
Con SVG se puede:
• Acceder a elementos a través del DOM
• Dar estilo a los elementos CSS
• Manejar eventos de interacción con el usuario

32. Gráficos SVG
Qué es SVG?
• Utilice un elemento <svg> y agregue
elementos secundarios que definen los
gráficos:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="75"
rx="20" ry="20" fill="red" stroke="blue" />
<rect x="75" y="75" width="100" height="75"
fill="yellow" stroke="blue" />
</svg>

33. Gráficos SVG
• Poner estilo al SVG usando CSS:
<style type="text/css">
svg {
border: 2px solid darkblue;
background-color: lightgreen;
width: 300px;
height: 200px;
}
</style>

34. Gráficos SVG
• Dibujando círculos:
• Dibujando elipses:
<circle cx="120" cy="80" r="40"
stroke="blue" fill="red" />
<circle cx="160" cy="120" r="60"
stroke="blue" fill="yellow" />
<ellipse cx="150" cy="60" rx="110" ry="30"
stroke="blue" fill="red" />
<ellipse cx="150" cy="140" rx="110" ry="30"
stroke="blue" fill="yellow" />

35. Gráficos SVG
Dibujando una polyline:
Dibujando un polígono:
<svg xmlns="http://www.w3.org/2000/svg">
<polyline points="105 100, 120 100, 125 90, 135 110, 145 90,
155 110, 165 90, 175 110, 180 100, 195 100"
fill="none" stroke="blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="110 70, 150 40, 190 70, 190 160, 150 130, 110 160"
fill="yellow" stroke="blue" />
</svg>

36. Gráficos SVG
Dibujando texto:
<svg xmlns="http://www.w3.org/2000/svg">
<text x="20" y="50"
fill="yellow" stroke="purple" stroke-width="2"
font-size="36" font-family="verdana" font-weight="bold">
Texto con estilo!
</text>
</svg>

37. Gráficos SVG
Dibujando texto:
<svg xmlns="http://www.w3.org/2000/svg" id="decoratedText">
<g fill="yellow" stroke= "blue" stroke-width="2" font-size="36"
font-family="verdana" font-weight="bold">
<text x="20" y="40">Texto normal</text>
<text x="20" y="100" text-decoration="line-through">Texto tachado</text>
<text x="20" y="150" text-decoration="underline">Texto subrayado</text>
<text x="20" y="220" text-decoration="underline line-through">
Texto subrayado y tachado
</text>
</g>
</svg>

38. Gráficos SVG
Transformaciones:
Asignar una función de transformación al
atributo transform
• rotate(ángulo, cx, cy): Rota la figura el
ángulo dado con el centro especificado por el
punto.
• translate(dx, dy): Traslada la figura la
distancia especificada en X y en Y.

39. Gráficos SVG
Transformaciones:
• scale(sx, sy): Escala la figura en X y en Y.
• skewX(angle): Sesga la figura el ángulo
especificado en X.
• skewY(angle): Sesga la figura el ángulo
especificado en Y.

40. Gráficos SVG
Transformaciones:
<svg xmlns="http://www.w3.org/2000/svg" id="transformations" >
<rect x="0" y="0" width="200" height="200" fill="green“
transform="skewX(30)" stroke="orange" stroke-width="5" />
<g transform="translate(200, 250)">
<g transform="scale(0.5)">
<g transform="rotate(20, 160, 160)">
<rect x="0" y="0" width="200" height="200" fill="blue"
stroke="orange" stroke-width="5" />
</g>
</g>
</g>
</svg>

41. Gráficos SVG
Archivos SVG en elementos <img>
1. Guardar el siguiente código en un archivo
llamado test.svg
2. Asignar el archivo a una imágen
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<path d="m267 76 l-21 -4 -144 0 -90 47 0 54 11 11 23 0 15 -30 15 -10 30 0
15 10 15 30 220 0 15 -30 15 -10 30 0 15 10 15 30 l25 0 7 -7
-13 -38 -20 -10 -95 -15 z" fill="blue" />
<path d="m65 105 l40 -25 65 0 0 34 -112 0 z" fill="white" />
<path d="m300 105 l-40 -25 -78 0 0 34 122 0 z" fill="white" />
<circle r="35" cy="185" cx="90" fill="black" />
<circle r="35" cy="185" cx="400" fill="black" />
</svg>
<img src="test.svg" />