02. interactuando con controles de ui

Interactuando con controles de UI

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

[email protected]

Contenido

• El Document Object Model

• Video en HTML5

• Audio en HTML5

• HTML5 canvas

• Gráficos SVG

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


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


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

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)

Video en HTML5

• El elemento <video>

<video width="320" height="240" controls="controls">

<source src="movie.mp4" />

Tu navegador no soporta HTML5!

</video>

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>

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.

Video en HTML5

Interactuando con el DOM del video

• play()

• pause()

• load()

• currentTime

• paused

• Muted

• volume

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)

Audio en HTML5

• El elemento <audio>

<audio controls="controls">

<source src="horse.mp3" />

Tu navegador no soporta HTML5!

</audio>

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>

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.

Audio en HTML5

Interactuando con el DOM del audio

• play()

• pause()

• load()

• currentTime

• paused

• muted

• volume

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 +

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;

}

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>

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()

HTML5 Canvas

• Coordenadas de un canvas:

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>

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

HTML5 canvas

• Dibujar en el elemento <canvas>

• Un script se encarga de dibujar.

<script>



contexto.fillStyle=.fillStyle="#ff0000";


</script>

HTML5 canvas

• Dibujando rectángulos en el <canvas>

<script>



contexto.fillStyle="#ff0000";


</script>

HTML5 canvas

Dibujando Paths en el <canvas>

• moveTo(x,y)

• lineTo(x,y)

• stroke();

• fill();

• beginPath();

• closePath();

• fillStyle

• strokeStyle

HTML5 canvas

Dibujando Paths en el <canvas>

<script>



contexto.fillStyle = "#ff0000";

contexto.beginPath();

contexto.moveTo(75, 50);

contexto.lineTo(75, 100);

contexto.lineTo(25, 100);

contexto.fill();

</script>

HTML5 canvas

Dibujando círculos en el <canvas>

<script>



contexto.beginPath();

contexto.arc(95, 50, 40, 0, 2 * Math.PI);

contexto.stroke();

</script>

HTML5 canvas

Dibujando texto en el <canvas>

• font

• fillText(text,x,y)

• strokeText(text,x,y)

<script>



contexto.fillStyle = "#00ff00";

contexto.font = "30px Arial";

contexto.fillText("Hola Mundo", 10, 50);

</script>

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

HTML5 canvas

Gradientes

<script>



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


</script>

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

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>

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>

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

Gráficos SVG

Dibujando una polyline:

Dibujando un polígono:


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


<polygon points="110 70, 150 40, 190 70, 190 160, 150 130, 110 160"

fill="yellow" stroke="blue" />

</svg>

Gráficos SVG

Dibujando texto:


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

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>

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.

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.

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>

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

02. interactuando con controles de ui

Software