Tutoriales - HTML 5 -

Tutorial Básico Android: Agregar boton

2012-02-24T15:08:00.000-08:00

Hoy vamos a ver cómo agregar un botón ( Button ) y añadirle un Listener para que detecte cuando pulsamos en él en nuestro táctil de Android.

He preparado un ejemplo muy básico para entender su funcionamiento y utilidad. Un simple botón que tendrá la función de modificar el TextView "Hello World" por el de "Mi primer botón".

Al ser el primer tutorial de Android explicaremos un poco la interface y los archivos java.
La interface de usuario, que és la parte visible de la aplicación, esta en código XML y viene creado un Hello World predeterminado llamado main.xml.

Como vemos en la imagen dentro de la carpeta layout estarán los archivos XML de interfaces de usuario. Podemos añadir tantas como queramos y luego jugar con el java para interactuar ente ellas.

OJO: los nombres de los archivos XML no pueden contener ninguna letra en mayúscula, ya que causaría error en el proyecto.

Al acceder al archivo main.xml nos encontramos con un editor gráfico para añadir objetos predefinidos y situarlos en nuestra interface simplemente con arrastrarlos dentro de la pantalla. Sin duda una buena manera de crear interfaces aunque aveces resulta un poco complicado ya que existes diferentes tipos de layout, algunas con posiciones absolutas por coordenadas o otras como la que suelo utilizar que se basa en la posicion de otros objetos.

Como vemos en la imagen en la parte de abajo hay dos pestañas, la de la izquierda que es la que tenemos delante y la de la derecha es para ver el código, imprescindible para casi todo.

Una vez estamos en la pestaña de la derecha vemos la parte de código de los objetos. para poder añadirles o modificarle propiedades. Además del Id, una cosa imprescindible.

Creo que se entiende bastante bien el código, no hace falta explicar más sobre XML en este tutorial. Fijaros en la ID que hemos escrito.

Ahora ya podemos dejar a un lado la parte visual y empecemos con el java. Las clases se almacenan en la carpeta src y dentro de un paquete ya creado por eclipse. También nos crea una clase predeterminada. Podemos crear tantas clases y paquetes como necesitemos.

Una vez explicado todo esto a la programación. A continuación muestro el código con bastantes comentarios para comprender bien su significador y poder desarrollar a partir de él.

Para ver el código en texto: http://pastehtml.com/view/bp5e7fhcc.txt

Resultado:

Muchas gracias a todos y espero vuestras dudas y comentarios!

Instalar el SDK de Android en Eclipse

2012-02-23T12:32:00.000-08:00

Como ya publiqué hace unos días, en tutoriales html5 también publicaré tutoriales de Android en Java. Y este, al ser el primer post, vamos a ver como preparar nuestro Eclipse para programar cómodamente en Java para Android.
No es nada sencillo programar para Android así que intentaremos que se entiendan lo mejor posible y conseguir poco a poco se empiezan a ver resultados.

Ya existen muchos tutoriales sobre el SDK en Eclipse así que esta vez solo publicaré un par de links para que preparéis el programa para los proximos tutoriales.

Links:

El segundo links también añade como crear el primer proyecto y por eso lo pongo como recomendable.

Muchas gracias por todos los comentarios!

Exportar Imagen desde canvas Html5 a archivo

2012-01-16T06:46:00.000-08:00

Este post no lo vamos a considerar un tutorial ya que es bastante corto y muy sencillo. Para exportar desde un canvas a una imagen primero abrá que mirar los siguientes tutoriales:

-Dibujo simple con Canvas de HTML5

-Dibujar a mano alzada en Canvas de Html5

Para mostrar la imagen resterizada tendremos que añadir simplemente la función de javascript:

function exportar(){

window.open(canvas.toDataURL());

}

Muchas gracias, os intentare ayudar si tenéis dudas.

NOVEDAD: Ahora en tutorialeshtml5.com también habrán tutoriales Android!

2012-01-02T12:52:00.000-08:00

Pues sí señores a partir de ahora también publicaré tutoriales para programar Android de una forma muy sencilla! Hace tiempo que no publico pero no he tenido tiempo, agradezco todos sus comentarios y participaciones. La programación para android se basa normalmente en Java, yo para programar java utilizo en programa Eclipse aunque hay muchos otros.

El primer tutorial que haré será para preparar nuestro eclipse para programar e instalar el emulador de android con su SDK que ya explicaremos de que se trata. Espero escribirlo pronto.

Muchas Gracias!

Insertar video en canvas = +efectos

2011-03-28T13:10:00.001-07:00

Hoy os voy a enseñar un post de Html5Doctor donde nos explican muy bien como crear efectos maravillosos. La página és en ingles aunque no creo que importe mucho. En Html5Doctor nos explican a introducir un video ya sea ogg, mp4 o webm en un Canvas Html5 y así poder editarlo y añadirle efectos.

A continuación algunas impresiones de pantalla sobre los resultados obtenidos:

-efecto blanco y negro-

-efecto arena 3d-

Para ver los tutoriales y ejemplos visite el post oficial:

http://html5doctor.com/video-canvas-magic/

No olviden escribir su comentario!!!

Librería Gráficos 3D en Canvas

2011-03-25T10:46:00.000-07:00

Hoy os presento esta fantástica librería para crear gráficos 3D en canvas. El nombre de la librería es canvas3DGraph.js el funcionamiento es muy sencillo y además contamos con la pagina web del proyecto donde podemos encontrar ejemplos y una demo para poder toquitear.

Paginas web con la librería y ejemplos:

http://dragan.yourtree.org/code/canvas-3d-graph/

No olviden escribir su comentario!!!

Dibujar a mano alzada en canvas HTML5

2011-03-22T16:28:00.000-07:00

Este tutorial es bastante sencillo de entender y de poner en práctica. Para entenderlo mejor podríais mirar antes el tutorial de Dibujo simple con Canvas. Lo que vamos hacer es crear un canvas de gran tamaño con fondo negro.

Para lograr el efecto de dibujo a mano alzada en este caso usaremos las coordenadas por donde se mueve el cursor(ratón) y dibujar (como está explicado en Dibujo simple con Canvas) un cuadrado blanco de 3x3 px. Así cada vez que el cursor se mueva irá dejando el rastro blanco, simulando un pincel.

Como siempre creamos el canvas en html:

<canvas id="canvas" width="900" height="600">
<p>Su navegador no soporta HTML5</p>
</canvas>

También tendremos que modificar el tag BODY, que será el encargado de llamar a la función de dibujo cada vez que se mueve el cursor:

<body onmousemove="pintar(event)" style="margin:0;padding:0;">

Como veis también hemos añadido un "style" con margen y padding 0, esto lo hacemos para no tener problemas entre las coordenadas del BODY y las reales.

Empecemos con el Javascript. Ahora pintaremos el fondo del canvas en negro y crearemos las variables posX y posY donde grabaremos las coordenadas del raton.

var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "#000";
 ctx.fillRect (0, 0, 900, 600);
  var posx = 0;
  var posy = 0;

Y ahora la función estrella de este tutorial, pintar(e) donde e será el event que le envia el BODY en este caso el cursor. Simplemente lo que hace esta funcion es dibujar un cuadrado en las coordenadas enviadas por el cursor:

function pintar(e){
 posx = e.clientX;
  posy = e.clientY;
  ctx.fillStyle = "#FFF";
  ctx.fillRect (posx, posy, 3, 3);
}

Y con esto acabaríamos. Aquí tenéis el ejemplo para ver el resultado:

No olviden escribir su comentario!!!

Interactuar con Canvas HTML5 (click)

2011-03-14T12:41:00.001-07:00

En este tutorial vamos a ver cómo poder hacer click en una región del Canvas Html5, identificar esa región y llamar a la función especificada para esa región/botón.

Para este tutorial hemos creado un cuadrado verde dentro de un canvas que al hacerle click ara un movimiento vertical hasta que se detiene.

Primero de todo crearemos el canvas en el html5 tamaño 500px x 500px en este tutorial és de vital importancia saber el tamaño del canvas:

<canvas id="canvas" height="500px" width="500px">
Su navegador no soporta Canvas!
</canvas>

A partir de aquí todo será JavaScript.

Lo primero que pondremos en el Js será el window.onload que és lo primero que se ejecutará al iniciar la página. Dentro del window.load pondré dos funciones que explicaré más abajo. El resultado sería este:

window.onload = function(){
 dibujar(x,y,x2,y2);
 click();
 };

Ahora crearemos la funcion dibujar(), para entenderla mejor mirar el tutorial de cómo dibujar en canvas. Lo que ará esta funcion dibujar() será dibujar un cuadrado de color verde. Que más adelante lo utilizaremos como si fuena un "botón".

function dibujar(x,y,x2,y2){
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d"); 
 ctx.fillStyle = "green";
 ctx.fillRect(x, y, x2, y2);
 ctx.fill();
}

Una vez dibujado el cuadrado crearemos la función click() que és la más importante. Será la encargada de activarse cuando hagamos click en el cuadro. Para eso añadiremos un addEventListener para reconocer cuando se ha clickado. El código comentado sería el siguiente:

function click(){
//Añadimos un addEventListener al canvas, para reconocer el click
canvas.addEventListener("click",   
 //Una vez se haya clickado se activará la siguiente función
 function(e){
  /** Las siguientes 2 líneas lo que hacen és saber en que 
  *   parte del canvas se ha clickado. Si ha clickado dentro
  * del cuadrado se activará mover().
  * La operación que utilizamos es restar la parte izquierda que sobra
  * des del canvas asta el explorador (cancas.offsetLeft)
  * con el click (e.clientY)
  */
  if(e.clientX-canvas.offsetLeft > 200
   && e.clientX-canvas.offsetLeft < 280){  
   //Aqui lo mismo que en la anterior sólo que miramos alto y 
   //ancho del cuadrado
   if(e.clientY-canvas.offsetTop > 300
    && e.clientY-canvas.offsetTop < 380){  
    //si ha clickado dentro del cuadro verde
    mover();   
   } 
  }
 }
 ,false);}

Por último creamos la función mover() simplemente la he creado para que se vea el efecto del click sobre el cuadro verde.

function mover(){
 //vamos restando la coordenada Y hasta un límite de 150
 if(y>150){
  y--;
  //es la encargada de llamar cada 10 milesimas a la funcion mover()
  //y así crear el efecto de movimiento
  setTimeout(mover,10);
 }
  //tendremos que ir limpiando el canvas
  //para evitar que se cree una columna
  //por culpa de que los cuadrados se vayan solapando
  limpiar();
  //dibujamos el cuadrado otra vez con la coordenada Y modificada
  //la modificación la hemos creado más arriba
  dibujar(x,y,x2,y2);
}

La función limpiar() és muy simple, dibujaremos un rectangulo blanco que ocupe todo el ancho y alto del canvas:

function limpiar(){
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, 500, 500);
}

Esto ha sido todo. La finalidad de este tutorial es saber añadir el addEventListener para poner hacer click al canvas, y después crear unas condiciones (if) para saber si ha clickado en la parte del canvas donde este el botón verde en este caso.

Para ver el ejemplo finalizado haga click en el siguiente botón:

No olviden escribir su comentario!!!

Tile5, librería de mapas Html5

2011-03-02T05:12:00.000-08:00

Hoy os presento Tile5, una estupenda librería JavaScript para visualizar mapas. Tienen muchos estilos y diferentes tipos de mapa. En su web podéis encontrar la documentación y sus correspondientes tutoriales.

------------------------------------------------------------------------------

También cuentan con un apartado de Demos, os invito a que les echéis un vistazo. Son estupendos:

http://www.tile5.org/demos/mapping

Web Oficial:http://www.tile5.org/

No olviden escribir sus comentarios!!!

Reconocer desnudos con Js y canvas Html5

2011-02-27T13:41:00.000-08:00

Hoy os presento una librería JavaScript muy útil a mi parecer. Se trata de nude.js, su función detectar imágenes que contengan contenido adulto. Yo lo he probado y funciona perfectamente.

Haz la prueba gracias a la página Demo de nude.js:

Y para poder descargarla y ver el tutorial entrar en su página principal haciendo click en el siguiente botón:

Html5 Canvas y JavaScript nunca dejarán de sorprenderme... :D

No olviden escribir su comentario!!!

Reconocimiento Facial con Canvas HTML5

2011-02-23T13:12:00.000-08:00

Hoy os voy a mostrar la página de Liu Liu, un desarrollador chino que ha programado un reconocimiento facial en imagenes utilizando C. Que ha traducido a JavaScript, gracias a eso lo podemos utilizar en el Canvas Html5.

De momento el tutorial no lo tenemos pero quí os traido un ejemplo del funcionamiento que he hecho yo mismo:

Animaros a probarlo, simplemente tenéis que poner la URL de la imágen en el formulario de la siguiente web:

http://liuliu.me/detect/detect.html

Muchas gracias y no olvidéis de comentar los resultados!!!

Local Storage / Cookie 2.0 en HTML5

2011-02-22T04:05:00.000-08:00

Lo que se podían llamar Cookie 2.0 es el Local Storage utilizado en HTML5 para almacenar datos con un máximo de 5Mb. De una manera más sencilla y más segura que las cookie normales.

En este tutorial vamos a ver los siguientes puntos:

Comprobar si nuestro navegador soporta LocalStorage.
Insertar datos en LocalStorage.
Acceder a los datos LocalStorage.
Listar todo el contenido.
Eliminar un dato en concreto.
Vaciar la LocalStore entera.

Vamos hacer todo esto siguiendo pasos muy sencillos, empezaremos por el primer punto:

Comprobar si nuestro navegador soporta LocalStorage

Para comprobar si funciona en nuestro navegador lo haremos con una simple condición, que sería la siguiente:

window.onload = function(){
if(localStorage){
alert("Si tienes LocalStorage");
}else{
alert("No tienes LocalStorage");
}
}

Insertar datos en LocalStorage

Para insertar datos en LocalStorage se hace ha pares, el par está compuesto por una clave (key) que se pone en primer lugar y despues de la coma insertamos el valor (dato). En este ejemplo vamos a insertar dos datos, el nombre de usuario y el més:

localStorage.setItem("usuario","Pepito");
localStorage.setItem("mes","febrero");

Acceder a los datos LocalStorage

Para ver el contenido de LocalStorage bastará con decirle la clave (Key) y nos retornará el valor (dato) que lleva almacenado con él, el ejemplo para ver el usuario por ejemplo sería este:

localStorage.getItem("usuario")

Esta línea nos mostraría: Pepito

Listar todo el contenido

Para listar todo el contenido sería igual que en "Acceder a los datos de localStorage" pero necesitamos las claves de cada par de datos introducidos. Para sacar las claves del par de datos tenemos la función .key() donde pasaremos un número (int) y nos devolverá la clave de esa posición. Y para listar toda la lista bastará hacer un bucle For como el siguiente:

for (x=0; x<=localStorage.length-1; x++){
//conseguimos la clave de la posicion
clave = localStorage.key(x);
//conseguimos el dato através de la clave
//tendríamos que introducir algo para imprimir lo que obtenemos a continuación
localStorage.getItem(clave);
}

Eliminar un dato en concreto

Para eliminar un Ítem en concreto simplemente necesitaremos su clave (key) y utilizaremos la siguiente función:

localStorage.removeItem("usuario");

Vaciar la LocalStore entera

Para vaciar toda la LocalStorage (de esa web claro) sería utilizando la funcion clear(), quedaría así:

localStorage.clear();

Espero que estos prácticos ejemplos os hayan ayudado para entender el funcionamiento de LocalStorage en HTML5. Y decir también que se puede hacer muachas más cosas, por ejemplo en vez de meter un valor se podría meter una Lista, Array, etc... Muchas Gracias!

No olviden en escribir su comentario!!!

Lupa en Canvas HTML5

2011-02-17T11:30:00.000-08:00

Hoy os voy a presentar un efecto muy útil para las imágenes. Se trata de una lupa hecha en JavaScript sobre el Canvas Html5. Se llama Wadda, aquí os pongo un ejemplo del efecto y justo debajo el link con una demo y la web del autor!

Y el tutorial simple de como hacerlo:

No olviden escribir su comentario!!!

Renderizar 3D con Canvas HTML5

2011-02-14T18:52:00.000-08:00

Una de tantas maravillas del HTML5 es poder renderizar 3D en el canvas. Os presenta una web donde hay muchos ejemplos con sus respectivos códigos fuente y con explicaciones. Unos de los ejemplos que podéis encontrar:

Para visitar la web hacer click en el siguiente enlace:

https://github.com/mrdoob/three.js/tree/

No olvidéis escribir vuestros comentarios!!!

Drag and Drop (Arrastrar y soltar) en HTML5

2011-02-04T05:15:00.001-08:00

En este turorial vamos a ver como crear un Drag and Drop (Arrastrar y soltar) en html5 nativo, primero veamos el resultado en vídeo, aunque al final del tutorial tenemos un link para ver el ejemplo en vivo:

Para empezar con este ejemplo crearemos dos Div (uno para comida y otro para bebida) añadiendo la propiedad draggable="true" refiriéndonos a que este Div como arrastrable. El codigo sería este:

<div id="comida" draggable="true">
<img src="comida.png" width="128" height="128"/></div>
<div id="lata" draggable="true">
<img src="lata.png" width="128" height="128" /></div>

Ahora crearemos otro Div llamado lista que será donde arrastraremos las imagenes de comida y lata.

<div id="lista">

</div>

A continuación vamos a crear las funciones javascript, están totalmente comentadas:

<script>
//Al empezar el arrastramiento
function empezar(e ){
//Definimos el objeto arrastrado (su Id)como Text
e.dataTransfer.setData('Text', this.id);
//Permitimos dejarlo en sitio de 'mover'
e.dataTransfer.effectAllowed = 'move';
}

//Al llegar a la zona de destino 'List de compra'
function lista_compra(e ) {
// Dejamos mover
e.dataTransfer.dropEffect = 'move';
// Dejamos soltar
return false;
}
// Al soltar
function soltar (e ) {
//Indicamos el producto que ha comprado
//creamos una imagen
imagen = new Image();
//La imagen será igual a la que arrastramos
imagen.src = e.dataTransfer.getData('Text') + '.png';
//añadimos la imagen a la lista
document.getElementById('lista').appendChild(imagen);
}

Ya solo queda conectar los Div de lista y comida a las funciones que hemos creado anteriormente:

//Conectamos los eventos
//ondragover - Al mover sobre la lista
document.getElementById('lista').ondragover = lista_compra;
//ondragstart - Al empezar a arrastrar
document.getElementById('comida').ondragstart = empezar;
//ondragstart - Al empezar a arrastrar
document.getElementById('lata').ondragstart = empezar;
//ondrop - Al soltar
document.getElementById('lista').ondrop = soltar;
</script>

Para ver el ejemplo en vivo hagan click en el siguiente botón:

No olviden escribir su comentario!!!

Logo oficial de HTML5 y sus tecnologias ( W3C )

2011-01-19T03:57:00.000-08:00

La World Wide Wed Consortium (W3C) ha presentado el logotipo oficial del HTML5:

También han creado logotipos para sus diferentes tecnologías:

No olviden escribir su comentario!!!

Insertar imagen en Canvas html5

2011-01-12T11:05:00.000-08:00

En este tutorial vamos a ver cómo poder insertar una imagen en el canvas de html5. Como vamos a ver es algo bastante simple.

Lo primero de todo es como ya sabemos crear el canvas con id canvas, para que nos vamos a complicar:

<canvas id="canvas" width="500" height="300">
</canvas>

Una vez creado el canvas todo lo demás es Javascript, todas las líneas están comentadas:

<script type="text/javascript">
 //Creamos una funcion que se ejecutará al iniciar la ventana
function img_canvas() {
  //recojemos el canvas poniendo la id del canvas html5 para relacionarlo
  var canvas = document.getElementById("img");
  //Cojemos la 2D para dibujar en él
 var context = canvas.getContext("2d");
  //creamos la nueva imagen 
  var img = new Image(500,500);
  //le decimos la ruta de la imagen, en este caso html5.jpg
 img.src = "jordan.jpg";
 //pasamos la imagen al 2d del canvas y se dibujará
 //en 0 0 podemos poner las cordenadas de donde empezar a dibujar la imagen
context.drawImage(img, 0, 0);
};
</script>

Ahora simplemente en html vamos a poner un link para que muestre la imagen:

<a href="#" onClick="img_canvas();">Mostra canvas con imagen (click aquí)</a>

En este ejemplo también hemos modificado el Body para que carge la imagen,para hacerlo mejor tendríamos que hacer un preload de la imagen en javascript, pero para el ejemplo he pensado que ya valía:

<body onLoad="img_canvas()">

Para ver el ejemplo en vivo haga click en el siguiente botón:

Búsqueda / input por voz en WebKit

2010-12-22T12:17:00.000-08:00

Funciona en:

Aquí vamos a ver cómo poder escribir en un input type text a través del microfono ( reconocimiento de voz ) sólo funciona en navegadores Webkit (Chrome). Es muy simple, simplemente hay que introducir el comando x-webkit-speech como propiedad del imput, el código quedaría así:

<input type="text" x-webkit-speech />

No olviden escrivir su comentario!!!

Modificar pixeles de canvas Html5

2010-12-21T14:40:00.000-08:00

Funciona en:

En este tutorial vamos a aprender como pintar pixel a pixel un canvas de Html 5, la dificultad del tutorial es media. De ejemplo en este tutorial vamos a crear una nube de pixeles aleatoriamente situados, los colores serán rgba de tonos aleatorios. El resultado final del tutorial sería este:

Lo primero que vamos a hacer es crear un canvas Html5:

<canvas id="canvas" width="900" height="900">
(texto si el navegador no soporta canvas)
</canvas>

Una vez creado el canvas vamos a escribir el Javascript que será el encargado de calcular el color, la localización y cantidad de pixeles. El codigo está totalmente comentado, si tenéis alguna duda no dudéis en escribirlo en un comentário:

<!-- Iniciamos el javacript encargado de manipular todos los pixeles-->
<script type="text/javascript">
// Función pixel para dónde colocar los pixeles y canales de color
function pixel(imageData, x, y, r, g, b, a){
//en los pixels al ser rgba hay que multiplicarlo por 4
inicial = (x + y * imageData.width) * 4;
//seleccionamos pixel con matriz
//indicamos el pixel(inicial) + el canal rgba
//canal 0 es rojo
imageData.data[inicial+0] = r;
//canal 1 es verde
imageData.data[inicial+1] = g;
//canal 2 es azul
imageData.data[inicial+2] = b;
//el 3 sería el opaco
imageData.data[inicial+3] = a;
}
//seleccionamos el canvas 
el_canvas = document.getElementById("canvas");
dibujo = el_canvas.getContext("2d");

// Cogemos el ancho y alto del canvas
width = parseInt(el_canvas.getAttribute("width"));
height = parseInt(el_canvas.getAttribute("height"));

//creamos un pixel array
imageData = dibujo.createImageData(width, height);

//1000001 pixel y posiciones aleatorias
for (i = 0; i < 1000001; i++) {
//calculamos las posiciones aleatoria
x = parseInt(Math.random() * width);
y = parseInt(Math.random() * height);
//calculamos el tono del color de manera aleatoria
r = parseInt(Math.random() * 256);
g = parseInt(Math.random() * 256);
b = parseInt(Math.random() * 256);
//La a será la propiedad opaco
a = 0xff;
//llamamos a la funcion pixel para crear pixel y 
//pasamos los parametros
pixel(imageData, x, y, r, g, b, a)
}

//lo imprimimos en el canvas y las coordenadas
dibujo.putImageData(imageData, 0, 0);
</script>

Para ver un ejemplo en vivo haga click en el siguiente botón:

No olvide escribir su comentario!!!

Nuevo DocType HTML para HTML5

2010-12-17T09:20:00.000-08:00

Este tutorial va a ser corto, antes el DocType en HTML era:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ahora gracias a HTML5 el docType se reduce simplemente en una línea:

<!DOCTYPE html>

Todo parece simple HTML5, lástima que no funcione en todos los navegadores.

No olviden escribir su comentario!!!

Rotar imágenes con animación Css 3D

2010-12-17T08:48:00.000-08:00

Funciona en:

Para rotar imágenes utilizando Css simplemente tendremos que utilizar la función

rotate3d(0, 0, 0, 90deg), dónde los tres primeros parámetros (en este caso son 0) sirven para indicar las inclinaciones de la imagen (se trata de ir jugando con ellos para crear el efecto deseado) y el 90deg son los grados de inclinación de la imagen que se podrían modificar por ejemplo con 360deg. Primeramente vamos a ver el ejemplo simple de girar imagen (para mejorar la estética como en otros tutoriales hemos añadido -webkit-transition: 3s ):

<style>
#imagen:hover{
    -webkit-transition: 3s;
-webkit-transform: rotate3d(0,0,0, 360deg);
}
</style>
</head>
<body>
<img id="imagen" src="jordan.jpeg" width="300" height="297" >
</body>

Ahora vamos a jugar un poco con el primer parámetro para lograr este efecto:

#imagen:hover{
-webkit-transition: 3s;
-webkit-transform: rotate3d(100,0,0, 360deg);
}
</style>

Recordamos que el número 100 lo he puesto de ejemplo, podría ser cualquier número. Ahora vamos a modificar los 3 parámetros para crear un bonito efecto:

<style>
#imagen:hover{
-webkit-transition: 3s;
-webkit-transform: rotate3d(100,100,100, 360deg);
}
</style>

Para ver el ejemplo en vivo haga click en el siguiente botón:

No olvide escribir su comentario!!!

Ver Data audio Javascript HTML5

2010-12-12T15:57:00.001-08:00

Funciona en:

Video del ejemplo:

En lenguaje común este código es para mostrar los números de todos los tonos del sonido, ya sea para almacenarlo en código o para tratar el sonido como ya veremos en otros tutoriales próximamente.

Realizar ese ejemplo es muy simple simplemente abrimos el archivo de sonido .ogg con nombre de id=input. Para insertar audio:

<audio id="input" src="grabada.ogg" controls></audio>

El codigo javascript que es el que se encarga de recibir la señal del audio y escribirla en un div llamado id=display:

<script type="text/javascript">

//Recogemos el campo de audio 'input'
var input = document.getElementById( 'input' );

//Recogemos el campo 'display' para escribir el codigo
var display = document.getElementById( 'display' );

//Función para recoger las Data audio
input.addEventListener( 'MozAudioAvailable', function( e ){

//Vamos escribiendo una a una en el campo Div Display
display.innerHTML += e.frameBuffer[ 0 ] + ', ';

}, false );

</script>

No olvide escribir su comentario!!!

GeoLocalización HTML5 ( Geolocalizador )

2010-12-02T04:50:00.000-08:00

En este tutorial de hoy vamos a ver como funciona el localizador de HTML5, de momento solo es soportado por Chrome y Firefox ( sus nuevasversiones ). Este nuevo sistema de localizar unido a las API de Google Maps asusta la precisión que tiene. Pienso que dentro de poco lasredes sociales como Facebook utilizaran esta tecnología para controlarnos todavía más. Aquí debajo pongo el codigo HTML y javaScript necesario para el funcionamiento de una manera muy básica, también pongo el ejemplo para que lo podáis probar y comentar los resultados.

Lo primero será crear la función para que el navegador obtenga las coordenadas:

<script language="javascript">
function obtener_localizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas);
}else{
alert('Tu navegador no soporta la API de geolocalizacion');
}
}

La siguiente función javaScript llamada 'coordenadas' que utiliza la API Google Maps para que muestre los resultados obtenidos en la función anterior encima del mapa:

function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var mapa = document.getElementById("mapa");
mapa.src = "http://maps.google.com/maps/api/staticmap?center=" + latitud + "," + longitud + "&zoom=15&size=400x400&markers=color:green|label:A|" + latitud + "," + longitud + "&sensor=false";
}

</script>

Ahora simplemente lo que necessitamos será un boton para activar la función javaScript y una imagen llamada 'mapa' donde llamaremos al mapa de Google, através de 'mapa.src' de la función anterior:

 <a href="javascript:obtener_localizacion();">Mostrar Posición</a></BR>
</p>
<p><img id="mapa" src=""></p>

Haga click en el siguiente botón para ver el ejemplo en vivo:

(Comentar los resultados)

No olvide escribir su comentario!!!

Animación básica canvas html5

2010-11-30T06:56:00.001-08:00

En este tutorial vamos a ver como crear una animación básica de tres círculos haciendo un movimiento horizontal. Aquí el video de muestra y abajo el tutorial. Muchas gracias.

Click en el botón para ver el tutorial:

fuente:http://janzaldo.wordpress.com/2010/09/22/tutorial-de-animacion-basica-con-html-5-canvas/

No olviden escribir su comentario!!!

Diferencia de estructura entre HTML y HTML5

2010-11-25T05:13:00.001-08:00

No olvide escribir su comentario!!!