:: eliax.com - Sketchpad, un programa para pintar en la web, en HTML 5

texto: A- A+

lunes, febrero 8, 2010

Sketchpad, un programa para pintar en la web, en HTML 5
eliax id: 7460 josé elías en feb 8, 2010 a las 01:46 AM (01:46 horas)

He aquí un programa que muchos hace pocos meses hubieran considerado imposible. Es un programa muchísimo mas avanzado que el "Paint" que viene con Windows, y que incluso viene con una par de funcionalidades que por lo general se encuentran en programas como Photoshop.

Pero he aquí lo asombroso: El programa está hecho en puro HTML 5, y no utiliza una gota de Adobe Flash, Silverlight o Java.

Y lo mejor es que cuando termines de crear tu obra maestra, puedes incluso guardar el resultado como una imagen PNG a tu máquina local. ¡Genial!

Noten que obviamente requieren de un navegador web reciente que soporte tecnologías de HTML 5. Ya lo probé con las últimas versioens de Firefox, Chrome y Safari, y funciona a la perfección (debería funcionar también en Opera, y dudo que funcione en Internet Explorer).

¡Gracias Edwin Santos por el enlace!

Enlace a Sketchpad

autor: josé elías

12 comentarios

Software

Previamente en eliax:
Análisis: Javascript a obtener velocidad de aplicaciones nativas (ago 24, 2008)
HTML 5 a ser punto de inflexión en aplicaciones de Internet/móviles (feb 19, 2009)
Pequeña muestra del poder de Canvas en HTML 5 (ago 6, 2009)
El futuro de la Web: Especificación Web Applications 1.0 Draft (dic 16, 2009)
Gordon, una implementación de Adobe Flash en Javascript (WOW!!!) (ene 14, 2010)
Análisis eliax: El futuro de Adobe Flash - Parte 1 de 2 (ene 31, 2010)
Análisis eliax: El futuro de Adobe Flash - Parte 2 de 2 (feb 1, 2010)
Editorial eliax: Como Adobe puede reinventar a Flash para un mundo de HTML 5 (feb 2, 2010)

Posteriormente en eliax:
GwtQuake: Quake II en HTML 5, hasta 60fps (abr 6, 2010)
Adobe, oficialmente: "El iPad, iPhone y HTML 5 una amenaza a nuestro negocio" (abr 10, 2010)
CloudCanvas, lo básico de Photoshop e Illustrator con HTML5 en tu navegador (jul 25, 2010)
DeviantArt Muro, otro mini-Photoshop en HTML 5. Opinión (ago 13, 2010)

Comentarios

Ahahahaha me viene perfecto xD la verdad estoy intentando depender lo menos posible de lo local para vivir en las nubes xD

#1 kennatj - febrero 8, 2010 - 02:15 AM (02:15 horas) (responder)
puro HTML5 ? imagino k no te habras puesto a chekear el codigo fuente...
yo diria k en todo caso k "El programa está hecho en puro javascript .

#2 - febrero 8, 2010 - 03:38 AM (03:38 horas) (responder)

HTML 5 incluye el uso de javascript....

#2.1 Angel - febrero 8, 2010 - 04:16 AM (04:16 horas) (responder)

Correcto,

El estándar de HTML 5 incluye HTML, CSS, Canvas, Web Storage, Javascript, y unas cuantas tecnologías mas.

En otras palabras, prudencia antes de comentar si no se tiene idea de lo que se está hablando :)

#2.1.1 José Elías - febrero 28, 2010 - 05:15 AM (05:15 horas) (responder)

Tranquilo, recuerda no todos son técnicos y los que inician puede confundir HTML 5 con sólo puro html.

Y sí, luce genial, pero creo javascript es el que hace casi toda la magia, todavía recuerdo cuando apenas lo usaba para validar input text u_u

#2.1.1.1 Palmor - febrero 8, 2010 - 07:25 AM (07:25 horas) (responder)

Excelente aplicación!
Confirmo que anda impecable en Firefox, Chrome y Opera (en Linux o Windows).

¿Funciona en IExplorer?... olvídenlo. Es un asco ese navegador.

(pero hay una excelente funcionalidad de IExplorer.. es muy útil para descargar Firefox)

#3 Polifemo - febrero 8, 2010 - 05:10 AM (05:10 horas) (responder)
Muy bacano, pero no es superior a paint.jejeje

#4 Orate - febrero 8, 2010 - 11:23 AM (11:23 horas) (responder)
"En otras palabras, prudencia antes de comentar si no se tiene idea de lo que se está hablando :-)"

.... creo saber algo de lo que hablo... la web estara hecha siguiento el estandar HTML5, pero se podia haber logrado lo mismo con HTML4, dado que todas sus funcionalidades se consiguen a traves de puro y duro javascript.... si me equivoco corregidme por favor.

#5 - febrero 8, 2010 - 04:50 PM (16:50 horas) (responder)

Anónimo,

No, lo que ves en este programa no se puede hacer de esta manera con HTML 4, ya que esta aplicación toma ventaja del componente Canvas especificado en HTML 5.

Canvas es, en esencia, una superficie de bitmaps sobre la cual puedes dibujar directamente al nivel del pixel (o en formato vectorial con SVG).

Espero eso te aclare el asunto.

#5.1 José Elías - febrero 28, 2010 - 05:15 AM (05:15 horas) (responder)
Mirando el codigo fuente puede leerse claramente las APIs especificas que usa del estandar HTML5 no disponibles en otros estandar

Style API
   -----------------------
   Composition (HTML 5.0)
   -----------------------
   Colors & Styles (HTML 5.0)
   --------------------------
   Line Caps & Joins (HTML 5.0)
   ----------------------------
   Shadows: supported in Firefox 3.1, Safari 3, Opera 10
   -----------------------------------------
   CanvasGradient (HTML 5.0)
   -------------------------
   Patterns (HTML 5.0)
   -------------------
   Transformation API (HTML 5.0)
   ------------------------------
   Pixel API (HTML 5.0)
   ------------------------
   Raster API (HTML 5.0)
   ------------------------
   Vector API (HTML 5.0)
   ----------------------
   Typeface API (HTML 5.0) -- Firefox 3.1+ and Safari 4.0+
   ------------------------

#5.2 Angel - febrero 8, 2010 - 11:51 PM (23:51 horas) (responder)

En K-Meleon no funciona, podría deberse a que la página web no lo soporta.

#6 Anónimo - febrero 8, 2010 - 06:00 PM (18:00 horas) (responder)
Creo que K-Meleon no soporta Html5. Aún, Un saludo...

#7 Juan Andreu - febrero 8, 2010 - 10:09 PM (22:09 horas) (responder)

Añadir Comentario

tu nombre
tu email (opcional)
web personal (opcional)
en respuesta a...
comentario de caracteres máximo
8 + 3 =	requerido (control anti-SPAM)
¿De qué color es el cielo?:	requerido (control anti-SPAM)

"Gracias Eliax tu explicación fue muy fácil de entender, ahora me siento que se un poco más que ayer! Enhorabuena por el blog."

por "Jose Castillo" en ene 17, 2012