Espectacular logotipo de Firefox creado vectorialmente con el canvas de HTML5. Si usas IE, no podrás verlo, porque no soporta HTML5. Si usas Chrome, Firefox, Opera... sí.
#15:
#4 Porque no es nunguna imágen, no es un archivo JPG ni PNG ni nada por el estilo. Utiliza una nueva tecnología de HTML llamada "canvas" (lienzo, en castellano) con la que, programáticamente, puedes "pintar" lo que quieras. Puedes ver el código fuente que pinta el logo en la página, por ejemplo:
var contsupizq = ctx.createLinearGradient(390,50,210,120);
Crea un gradiente linear, de tal a tal coordenada.
Para el resto de los mortales significa, que no hará falta flash para tener gráficos vectoriales o animaciones complejas ("renderizadas"), añadiendo seguridad y rendimiento, y la posibilidad de páginas web más ricas y visualmente mejores.
A todo esto, creo que el colega ha cogido un SVG y lo ha "traducido" mediante un script. O eso espero, porque si no, menudo currazo.
#4 porque no es ninguna imagen enlazada a través de la etiqueta img (vamos, que no es ningún archivo gráfico jpg, ni gif, ni nada) sino que está dibujado a través de "órdenes" (para verlas haz clic donde pone "ver/ocultar código fuente")
#4:
#1 y #2 Podeis explicar para los ignorantes ¿por que es tan flipante?
Pregunto sinceramente.
#18:
Si usas IE, no podrás verlo, porque no soporta HTML5.
Seguro que esta noticia impulsa a más de uno a instalarse Firefox (u otro que no sea el IE)
#50:
#49 Qué fanatico ni que niño muerto? El solo dice exactamente la advertencia de la web:
Recommended browser: Chrome/Chromium 4+
Other browsers may be slow or don't work at all!
#33 Cierto, yo de programación ni puta idea pero con el link de #7 estoy flipando
Pero llevo muchos años viciado a internet, y si lo he entendido bien esto del html5 va a suponer una revolución de la hostia... igual que las webs 2.0 en su momento, aunque sea mezclar conceptos.
#7 como mola!
También existe un motor de juegos en javascript (usando jquery, para mi el mejor framework javascript) que no tiene nada que envidiar al flash. http://gamequery.onaluf.org/
#49 Qué fanatico ni que niño muerto? El solo dice exactamente la advertencia de la web:
Recommended browser: Chrome/Chromium 4+
Other browsers may be slow or don't work at all!
#4 porque no es ninguna imagen enlazada a través de la etiqueta img (vamos, que no es ningún archivo gráfico jpg, ni gif, ni nada) sino que está dibujado a través de "órdenes" (para verlas haz clic donde pone "ver/ocultar código fuente")
#4 Porque no es nunguna imágen, no es un archivo JPG ni PNG ni nada por el estilo. Utiliza una nueva tecnología de HTML llamada "canvas" (lienzo, en castellano) con la que, programáticamente, puedes "pintar" lo que quieras. Puedes ver el código fuente que pinta el logo en la página, por ejemplo:
var contsupizq = ctx.createLinearGradient(390,50,210,120);
Crea un gradiente linear, de tal a tal coordenada.
Para el resto de los mortales significa, que no hará falta flash para tener gráficos vectoriales o animaciones complejas ("renderizadas"), añadiendo seguridad y rendimiento, y la posibilidad de páginas web más ricas y visualmente mejores.
A todo esto, creo que el colega ha cogido un SVG y lo ha "traducido" mediante un script. O eso espero, porque si no, menudo currazo.
lo mas interesante van a ser las aplicaciones web de diseño gráfico vectorial que ya no dependerán de tener algún programa instalado en la compu... con tener un navegador bastará...
#24 El logo de Firefox tiene copyright. Por eso la versión para Debian se llama Iceweasel, siendo igual que el de Mozilla excepto por el nombre y el logo, y por tanto completamente libre.
Como demostración puede ser interesante. A mi me parece una aberración usar javascript para dibujar una imagen. Además que javascript != HTML.
La única parte relevante de HTML en sí es el canvas:
Yo creo que los fans del Adblock van a tener un futuro próximo complicado si se pone de moda esta técnica para la creación de banners y demás publicidades
#42 No tiene mucho que ver porque Adblock bloquea por dominios y patrones en las URL. Mientras un banner, aunque sea un canvas en HTML5, se cargue desde... yo qué sé... *.ads.com lo seguirá bloqueando.
#48 Claro si se hace así sería lo mismo, pero ahora los banners se pueden integrar con el propio código de la página, y ahí la cosa se vuelve más complicada de filtrar creo.
#56 Lo habitual es que los banners se cojan de servidores específicos, pero aunque se integraran en la misma página se pueden bloquear, aunque después de ser descargados, claro.
Algo tipo GreaseMonkey (corregidme si me equivoco) para "editar" las páginas web, que es lo que hacen los bloqueadores de publicidad de Google Chrome.
¡Qué bueno! Ya va siendo hora de que los diseñadores o animadores se vayan desprendiendo de la mano de Flash, que no hace más que entorpecer el progreso de la red.
Viendo esto, es bastante justificable la política de migración a HTML5 de los grandes de la informática y la web.
#39 sirven para cosas distintas. Con SVG no puedes crearte un editor gráfico como http://mugtug.com/sketchpad/ o un emulador de Gameboy o de NES. SVG es un formato gráfico vectorial. Canvas es un mecanismo de HTML5 para pintar gráficos en 2D y 3D (webgl) en el navegador usando Javascript.
Creo que mientras que no haya un editor gráfico que guarde directamente para html5, las posibilidades del mismo se reducen al mínimo porque, ¿quién es el guapo que está dispuesto a crear toda una web picando tal cantidad ingente de código javascript? Las webs se encarecerían enormemente, porque se tardaría mucho más tiempo al aumentar enormemente el código escrito.
La tecnología e idea es muy interesante, ahora falta la ingeniería de software que cree las herramientes prácticas (sencillas y rápidas) para lidiar con eso. Ahora, el día en que Illustrator, Photoshop, Scribus, GIMP, etc., exporten a html5, el tema se disparará, evidentemente.
a mi lo que me alucina es que lo estoy abriendo en un telefono con LiMo (linux mobile) y se ve perfecto, incluso haciendo zoom se redibuja casi instantaneamente...
Sí sale algún programa de edición gráfico capaz de exportar un vectorial a canvas HTML5 será un puntazo. De todas formas incluso aunque solo fuese para hacer shapes que no sean muy complicados es muy interesante (botones, marcos, separadores, viñetas, etc). Al diseño gráfico esto sería como el xml a las bases de datos.
Genial genial A ver para cuando programitas que permitan por ej hacer un baner de publicidad similar a los de flash en html5 puro.
(Si ya existiera alguno, sería grandioso que alguien que lo conozca ponga el nombre, para ir experimentándolo...)
No lo entiendo, si le doy a guardar imagen me guarda un archivo png n ormal, que si lo amplio se pixela. Si fuera vectorial, no debería pixelarse, ¿no?
#26 Si te lo guarda en png, es lógico que se pixele, porque png no es un formato vectorial. El programa te rasteriza la imagen para convertirla a un formato binario como, en este caso, png. Para ampliarlo sin que se pixele tiene que ser vectorial, como un svg.
Lo siento pero no me parece tan emocionante, además como todo seguro que terminarán abusando de ello, así que para eso prefiero que sigan enlazando imágenes.
Con el firefox lo veo muy nítido, he hecho la prueba de verlo con el explorer y me dice que "Su navegador no soporta esta tecnologia" en un Times New Roman horroroso.
Comentarios
no es más que un SVG convertido a instrucciones javascript...
para flipar con html5 mirad esto: http://www.codebase.es/jsgb (usar el navegador chrome, sino no va, o va lento)
#15 qué guapo el link. Pero con el de #7 estoy flipando en colores. Un puto emulador de game boy hecho con js????????????
#7 Offtopic: y con lo que también flipo es que aún me acuerdo en qué interrogantes están las setas
#33 Cierto, yo de programación ni puta idea pero con el link de #7 estoy flipando![:lol: lol](https://cdn.mnmstatic.net/v_149/img/menemojis/36/lol.gif)
Pero llevo muchos años viciado a internet, y si lo he entendido bien esto del html5 va a suponer una revolución de la hostia... igual que las webs 2.0 en su momento, aunque sea mezclar conceptos.
Parecido al enlace que ha puesto #7: http://benfirshman.com/projects/jsnes/
#7 como mola!
También existe un motor de juegos en javascript (usando jquery, para mi el mejor framework javascript) que no tiene nada que envidiar al flash.
http://gamequery.onaluf.org/
#7 no seas fanático. En Opera corre perfecto.
#49 Qué fanatico ni que niño muerto? El solo dice exactamente la advertencia de la web:
Recommended browser: Chrome/Chromium 4+
Other browsers may be slow or don't work at all!
#7 Pues a mí con Safarí me va a 60fps. ¿Éso es lento?
#7 lo que yo veo es mucho javascript!!!
Si usas IE, no podrás verlo, porque no soporta HTML5.
Seguro que esta noticia impulsa a más de uno a instalarse Firefox (u otro que no sea el IE)
Estoy flipando.
#1 y #2 Podeis explicar para los ignorantes ¿por que es tan flipante?
Pregunto sinceramente.
#0 y también en Konqueror
#4 porque no es ninguna imagen enlazada a través de la etiqueta img (vamos, que no es ningún archivo gráfico jpg, ni gif, ni nada) sino que está dibujado a través de "órdenes" (para verlas haz clic donde pone "ver/ocultar código fuente")
#5 Siento joder un poco, pero..¿No es muy parecido a lo que hace un svg corriente?
#6 me imagino
#4 Si pulsas sobre "Ver/ocultar código fuente" verás cómo se ha realizado. Es diseño vectorial sobre html.
#4 No tengo ni idea...
#4 Porque no es nunguna imágen, no es un archivo JPG ni PNG ni nada por el estilo. Utiliza una nueva tecnología de HTML llamada "canvas" (lienzo, en castellano) con la que, programáticamente, puedes "pintar" lo que quieras. Puedes ver el código fuente que pinta el logo en la página, por ejemplo:
var contsupizq = ctx.createLinearGradient(390,50,210,120);
Crea un gradiente linear, de tal a tal coordenada.
Para el resto de los mortales significa, que no hará falta flash para tener gráficos vectoriales o animaciones complejas ("renderizadas"), añadiendo seguridad y rendimiento, y la posibilidad de páginas web más ricas y visualmente mejores.
A todo esto, creo que el colega ha cogido un SVG y lo ha "traducido" mediante un script. O eso espero, porque si no, menudo currazo.
Un ejemplo mucho más ilustrativo de lo que se puede hacer con HTML5:
http://mugtug.com/sketchpad/
Hmmm
Bueno, pero hay herramientas para convertir dibujos ya hechos al canvas de HTML5,¿no?
http://www.mezzoblue.com/archives/2010/01/14/illustrator_/
Me llama la atención la espectacular velocidad de renderizado. Sin duda, el canvas de HTML5 es un filón aún por explotar.
Url de la imagen: 158.994 caracteres. Los he contado.
#14 Pues a mi me salen 255.178, ¿seguro que lo has contado bien?
#14 Ahora si que podemos decir aquello de... Una imagen vale más que mil palabras, o ¡¡líneas de código en este caso!!
Alucinante sin duda
lo mas interesante van a ser las aplicaciones web de diseño gráfico vectorial que ya no dependerán de tener algún programa instalado en la compu... con tener un navegador bastará...
Y el simbolo del registrado ahi abajo???? wtf
#24 El logo de Firefox tiene copyright. Por eso la versión para Debian se llama Iceweasel, siendo igual que el de Mozilla excepto por el nombre y el logo, y por tanto completamente libre.
Yo había visto el de Opera, algo más sencillo
http://desandro.com/articles/opera-logo-css/
Si es Anieto, es meneo.
Joder, ¿y a qué estamos esperando para mandar a tomar por culo el Flash?
#35 Dale las gracias a Microsoft.
#35 apple y sus nuevos medios ya lo han hecho (iphone, ipad...)
Olvidé citar al autor: está desarrollado por un tal Erick León Bolinaga.
Como demostración puede ser interesante. A mi me parece una aberración usar javascript para dibujar una imagen. Además que javascript != HTML.
La única parte relevante de HTML en sí es el canvas:
Yo creo que los fans del Adblock van a tener un futuro próximo complicado si se pone de moda esta técnica para la creación de banners y demás publicidades
#42 No tiene mucho que ver porque Adblock bloquea por dominios y patrones en las URL. Mientras un banner, aunque sea un canvas en HTML5, se cargue desde... yo qué sé... *.ads.com lo seguirá bloqueando.
Al menos eso he entendido yo siempre
#48 Claro si se hace así sería lo mismo, pero ahora los banners se pueden integrar con el propio código de la página, y ahí la cosa se vuelve más complicada de filtrar creo.
#56 Lo habitual es que los banners se cojan de servidores específicos, pero aunque se integraran en la misma página se pueden bloquear, aunque después de ser descargados, claro.
Algo tipo GreaseMonkey (corregidme si me equivoco) para "editar" las páginas web, que es lo que hacen los bloqueadores de publicidad de Google Chrome.
¡Qué bueno! Ya va siendo hora de que los diseñadores o animadores se vayan desprendiendo de la mano de Flash, que no hace más que entorpecer el progreso de la red.
Viendo esto, es bastante justificable la política de migración a HTML5 de los grandes de la informática y la web.
Pues creo que hacerlo en SVG hubiera sido menos complicado
Si el HTML5 consiste en complicar las cosas...
#39 sirven para cosas distintas. Con SVG no puedes crearte un editor gráfico como http://mugtug.com/sketchpad/ o un emulador de Gameboy o de NES. SVG es un formato gráfico vectorial. Canvas es un mecanismo de HTML5 para pintar gráficos en 2D y 3D (webgl) en el navegador usando Javascript.
La persona que está implementando Canvas en Firefox hizo una presentación explicando las diferencias entre SVG y Canvas. La tienes en: http://people.mozilla.com/~vladimir/xtech2006/
Creo que mientras que no haya un editor gráfico que guarde directamente para html5, las posibilidades del mismo se reducen al mínimo porque, ¿quién es el guapo que está dispuesto a crear toda una web picando tal cantidad ingente de código javascript? Las webs se encarecerían enormemente, porque se tardaría mucho más tiempo al aumentar enormemente el código escrito.
La tecnología e idea es muy interesante, ahora falta la ingeniería de software que cree las herramientes prácticas (sencillas y rápidas) para lidiar con eso. Ahora, el día en que Illustrator, Photoshop, Scribus, GIMP, etc., exporten a html5, el tema se disparará, evidentemente.
#57 Google usa el editor de consola vim .
a mi lo que me alucina es que lo estoy abriendo en un telefono con LiMo (linux mobile) y se ve perfecto, incluso haciendo zoom se redibuja casi instantaneamente...
Sí sale algún programa de edición gráfico capaz de exportar un vectorial a canvas HTML5 será un puntazo. De todas formas incluso aunque solo fuese para hacer shapes que no sean muy complicados es muy interesante (botones, marcos, separadores, viñetas, etc). Al diseño gráfico esto sería como el xml a las bases de datos.
A mi me ha hecho gracia comparar el currelo del If con el codigo en el Else
En el iPhone con Safari va de lujo
que alguien se atreva a poner aqui la url de la imagen.. porque yo ... no..
Ya llevo viendo canvas desde hace unos años, y es flipante
Genial genial A ver para cuando programitas que permitan por ej hacer un baner de publicidad similar a los de flash en html5 puro.
(Si ya existiera alguno, sería grandioso que alguien que lo conozca ponga el nombre, para ir experimentándolo...)
Y el código fuente está en español.
#16 Me encantan las variables que usa: cachetepeludo
No lo entiendo, si le doy a guardar imagen me guarda un archivo png n ormal, que si lo amplio se pixela. Si fuera vectorial, no debería pixelarse, ¿no?
#26 Si te lo guarda en png, es lógico que se pixele, porque png no es un formato vectorial. El programa te rasteriza la imagen para convertirla a un formato binario como, en este caso, png. Para ampliarlo sin que se pixele tiene que ser vectorial, como un svg.
#30 Gracias por aclarármelo
Lo siento pero no me parece tan emocionante, además como todo seguro que terminarán abusando de ello, así que para eso prefiero que sigan enlazando imágenes.
Jamás creí que se llegara el día en que por fin los usuarios llegaran a notar las carencias de Internet Explorer.
Que asqueroso se ve el logo de Opera en ese navegador.
paradojicamente, me colgó dos veces el firefox en mi ubuntu
Vayamos a lo serio, ¿esto tiene alguna aplicación para el p0rn o no? Porque sino no le veo ningún sentido.
Internet explorer:
Su navegador no soporta esta tecnologia
Con el firefox lo veo muy nítido, he hecho la prueba de verlo con el explorer y me dice que "Su navegador no soporta esta tecnologia" en un Times New Roman horroroso.
Ya hay que aburrirse, ya....