Css3 Canvas y video en html5

<Canvas>

El elemento HTML canvas (<canvas>) se puede

utilizar para dibujar gráficos a través de

secuencias de comandos (por lo general

JavaScript ). Por ejemplo, puede usarse para

dibujar gráficos, hacer composiciones de fotos

o incluso realizar animaciones.

Código de Canvas

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

// drawing code here

} else {

// canvas-unsupported code here

}

<canvas>

Width

Height

Src

fillStyle

fillRect

strokeRect

beginPath()

closePath()

stroke()

moveTo(x, y)

fill()

lineTo(x, y)

arc(x, y, radius,

startAngle, endAngle,

anticlockwise)

quadraticCurveTo(cp

1x, cp1y, x, y) //

BROKEN in Firefox

1.5 (see work around

below)

bezierCurveTo(cp1x,

cp1y, cp2x, cp2y, x, y)

rect(x, y, width,

height)

drawImage(image, x,

y)

Códigos canvas

fillRect(x,y,width,height) : Rectangulo

strokeRect(x,y,width,height) : Linea rectangulas

clearRect(x,y,width,height) : rectangulo con areas transparentes

fillStyle = color

strokeStyle = color

addColorStop(position, color)

Códigos canvas

shadowOffsetX = float

shadowOffsetY = float

shadowBlur = float

shadowColor = color

save() restore()

translate(x, y)

rotate(angle)

scale(x, y)

globalCompositeOperation = type

clip()

Animaciones con Canvas

setInterval(animateShape,500);

setTimeout(animateShape,500);

mounth

Formularios

Para nuestros formularios que podemos implementar actualmente, porque a pesar de que HTML5 no estará completamente listo hasta el 2012, muchos navegadores empiezan a implementar algunas de sus características.

En el caso de que utilicemos estas características y el navegador no sea compatible con las misma, simplemente las ignorará sin causarnos mayores problemas. Incluso podremos condicionar nuestros scripts para que funcionen solo en navegadores sin soporte para las nuevas características de manejo de formularios

Placeholder:

Si no disponemos de las características de los

nuevos formularios HTML5, la forma común de

hacer un placeholder sería con JavaScript

jugando con los eventos de focos. Hoy en día,

podemos con este atributo podremos agregar un

texto que se verá en el input cuando este esté

vacío y no tenga el foco.

<input type="text" placeholder="Busca Aqui">

Autofocus:

los formularios en HTML5, este es otro claro

ejemplo que permite el control del autofoco sin

hacer uso de JavaScript, como se hubiera hecho

antes. Como su nombre lo indica, con autofocus

establecemos que un input tendrá el foco. No

tiene mucha ciencia, simplemente agregamos

“autofocus” en el elemento

<input id="q" type="text" autofocus>

Input

HTML5 nos trae varios nuevos

tipos de INPUT, en los

navegadores que no los

soporten, serán tomados

simplemente como

type=”text”.

Email

url

Number

Range

Date

Mounth

Week

Time

Datetime

search

<video> html5

La forma de visualizar un video en una página web, actualmente es similar a la que muestro en este código. Pasa por el elemento <object /> que nos permite especificar otro <embed /> que nos permite incrustar una película flash en nuestro página.

Semánticamente, estamos hablando de un objeto (<object />) embebido en la página (<embed />), pero no nos dice que se trata de un video ya que este código, sirve para incrustar juegos flash, galerías,….

<video> codigo

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

controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

<source src="movie.webm" type="video/webm"

/>

Su navegador no soporta video html5.

</video>

Video en flv

<video src="video.ogv" controls> <object data

="flvplayer.swf" type="application/x-shockwave-

flash"> <param value="flvplayer.swf" name="

movie"/> </object> </video>

<video> atributos

CSS3

Así pues, la novedad más importante que aporta

CSS 3, de cara a los desarrolladores de webs,

consiste en la incorporación de nuevos

mecanismos para mantener un mayor control

sobre el estilo con el que se muestran los

elementos de las páginas, sin tener que recurrir

a trucos o hacks, que a menudo complicaban el

código de las web.

transform

EJEMPLO { width: 33em; border: solid red; -moz-transform: translate(100px) rotate(20deg); -moz-transform-origin: 60% 100%; -webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 60% 100%; -o-transform:translate(100px) rotate(20deg); -o-transform-origin:60% 100%; -ms-transform: translate(100px) rotate(20deg); -ms-transform-origin: 60% 100%; transform: translate(100px) rotate(20deg); transform-origin: 60% 100%; }

CSS transform

FUNCIONES

background: gold; width: 30em; -moz-

transform: matrix(1, -0.2, 0, 1, 0, 0); -

webkit-transform: matrix(1, -0.2, 0, 1, 0,

0); -o-transform: matrix(1, -0.2, 0, 1, 0, 0);

-ms-transform: matrix(1, -0.2, 0, 1, 0, 0);

transform: matrix(1, -0.2, 0, 1, 0, 0);

CSS transitions

EJEMPLO sin flash

Css gradientes

El uso de gradientes CSS en un fondo le permite mostrar una suave transición entre dos o más colores especificados, lo que le permite evitar el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a la pendiente es generado por el navegador, los objetos con degradados se ven mejor cuando se acerca, y se puede ajustar el diseño mucho más flexible.

background: -moz-linear-gradient(top, blue,white);

background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));

background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Css Columnas

-moz-column-count and -moz-column-width.

<div style="-moz-column-count:2">In preparation for the release of Mozilla

Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific

Daylight Time (UTC -0700). After this point, no more checkins will be accepted

for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

CSS ANY

Para agrupación de styles en html5

-moz-any(section, article, aside, nav) :-moz-

any(section, article, aside, nav) :-moz-

any(section, article, aside, nav) h1 { font-

size: 15px; }

Geolocalización

La geolocalización es un término nuevo, que se ha venido usando desde más o

menos mitad del año 2009, y que hace referencia a conocer nuestra ubicación

geográfica automáticamente.

Hay varias maneras de que esto suceda, y como es natural, los dispositivos

móviles son los que más fácil permiten la actualización de nuestra posición, por su

portabilidad.

De un tiempo para acá los teléfonos celulares, de gama alta, y unos cuantos de

gama media, traen integrados receptores GPS que mediante la red de satélites que

rodea al planeta, puede ubicarnos en cualquier punto del globo.

http://www.phonescoop.com/phones/finder_results.php?m=s&w=s&sao=y&plr=r&pl_1=y&pl_3=y&pl_6=y&f33r=r

Geolocalización

Aunque también con herramientas como Google Maps que ofrecen la geolocalización sin

necesidad de tener GPS en el celular, pues con base en las torres de telefonía celular

calcula la intensidad de la señal, y triangula la posición estimada en el mapa. No funciona

con la misma precisión de un GPS, pero se acerca bastante.

Pero no es necesario un dispositivo móvil, también los navegadores nuevos (Chrome,

Firefox, Opera), usan el API de Geolocalización que tiene Google. De tal manera que si

necesitas ir de un lugar a otro, gracias a esta tecnología, solo tienes que decir a donde

vas, pues por la Geolocalización ya se sabe dónde te encuentras, ó si quieres pedir un

domicilio simplemente buscas y el navegador te mostrará posibles opciones que queden

cerca a donde estés ubicado.

Esto funciona verificando la IP actual que tiene el PC, junto con posibles puntos de

acceso WiFi, que estén en la base de datos de Google Location Services, y asi da una

localización estimada.

http://maps.google.com/

http://code.google.com/apis/gears/api_geolocation.html

Geolocalización

function obtener_localizacion() { if

(navigator.geolocation) {

navigator.geolocation.getCurrentPosition(m

ostrar_mapa,gestiona_errores); }else{

alert('Tu navegador no soporta la API de

geolocalizacion'); }}

Css3 Canvas y video en html5

Documents

Transcript of Css3 Canvas y video en html5