______________________________________________________________________________________________________________________

HTML5: Utilizando Canvas para insertar Pizarrón para dibujar


HTML 5 está revolucionando la web. Si bien es verdad que no todos los navegadores soportan todavía esta plataforma, la tendencia es migrar hacia este estándar.

A continuación les mostramos un ejemplo tomado de un ebook de Sanders Kleinfeld que puedes descargar gratuitamente y editado por o´reilly . El ejemplo que tomamos sirve para insertar un canvas donde podrán dibujar. Además deberás subir al directorio donde se encuentre la página web de prueba, los archivos de javascript finger_painting.js  y modernizr-2.0.6.js

El archivo modernizr, sirve para compatibilizar navegadores antiguos. Es una librería open-source de JavaScript que te ayudará a cosntruir sitios con todo el poder de HTML y CSS3.

El ejemplo de la imagen que está a continuación, lo puedes ver aquí

 

Les recomiendo descargar todo el ebook, pues trae otros ejemplos, como crear una calculadora de gráficos, que dibuja ecuaciones algebraicas, utilizar geolocalización, e insertar contenido de audio y video.

Dirección de descarga: Hmtl5 for publishers

[fuente: HTML5 for Publishers by Sanders Kleinfeld (O’Reilly). Copyright 2011 O’Reilly Media, Inc, 978-1-4493-1460-6.]



Compartir

Menea este post en Meneame.net votar

Acerca de Andrea Cummins

Andrea Cummins Es Senior Editor de GeeksRoom. Estudió Ciencias de la Computación en la facultad de Cs Exactas de la Universidad de Buenos Aires. Hace 17 años que vive en el campo, en la ciudad de Venado Tuerto, Santa Fe y gracias a Internet, pudo seguir actualizándose con las nuevas tecnologías. A medida que pasó el tiempo se fue capacitando de manera autodidacta y participando en Congresos y Cursos. Hace no mucho tiempo atrás fundó su propia empresa llamada Gráfica Web. Su hobbie es la fotografía y le encanta mostrar su ciudad y su gente a través de mi lente. Si quieren pueden ver sus fotos en Flickr, y en Twitter

También te puede gustar....

Esta entrada fue publicada en Geeks y etiquetada , . Guarda el enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>