<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
closePath()
Height
stroke()
Src
moveTo(x, y)
fillStyle
fill()
fillRect
lineTo(x, y)
rect(x, y, width, height)
strokeRect
arc(x, y, radius, startAngle, endAngle, anticlockwise)
drawImage(image, x, y)
beginPath()
quadraticCurveTo(cp 1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 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
rotate(angle)
shadowOffsetY = float
scale(x, y)
shadowBlur = float
globalCompositeOperation = type
shadowColor = color
save() restore() translate(x, y)
clip()
Animaciones con Canvas setInterval(animateShape,500); mounth
setTimeout(animateShape,500);
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-shockwaveflash"> <param value="flvplayer.swf" name=" movie"/> </object> </video>
<video>
<source id="3gp_src" <source id="ogg_src"
<source id="mp4_src" src="video.mp4"
src="video.3gp"
src="video.ogv"
type='video/3gpp; codecs="mp4v.20. 8, samr"'>
type='video/ogg; c odecs="theora, vor bis"'>
type='video/mp4; codecs="avc1.42E 01E, mp4a.40.2"'> </source> </source>
</source> </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; -moztransform: translate(100px) rotate(20deg); -moztransform-origin: 60% 100%; -webkit-transform: translate(100px) rotate(20deg); -webkittransform-origin: 60% 100%; -otransform:translate(100px) rotate(20deg); -otransform-origin:60% 100%; -ms-transform: translate(100px) rotate(20deg); -ms-transformorigin: 60% 100%; transform: translate(100px) rotate(20deg); transform-origin: 60% 100%; }
CSS transform FUNCIONES background: gold; width: 30em; -moztransform: 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-radialgradient(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) :-mozany(section, article, aside, nav) :-mozany(section, article, aside, nav) h1 { fontsize: 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.
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.
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'); }}