Posts etiquetados ‘HTML5’

Crea imágenes con marca de agua usando HTML canvas y Javascript

watermarksWatermark.js es una interesante librería en Javascript, que permite crear marcas de agua sobre imágenes, lo interesante de esta librería es que la imagen que usas no necesariamente tiene que ser PNG o GIF, también puede ser JPG.

Esta librería es Open Source y en su sitio encuentras la documentación necesaria para que la utilices, así como también encontraras demos usando códigos QR como marca de agua en la imagen

Como usarlo:

  1. Llama “watermark.js” antes de la etiqueta body de tu documento HTML.
  2. “className” la clase en los elementos donde usará una marca de agua. (Opcional) Por defecto: “watermark”.
  3. “position”: “top-left”|”top-right”|”bottom-right”|”bottom-left” (Opcional) Por defecto: “bottom-right”.
  4. “watermark” un elemento img que representa la marca de agua.
  5. “Path” la ruta a la imagen.
  6. “opacity” Opacidad 0-100 Por defecto: 50

Con estos pasos ya tienes tus marcas de agua sobre tus imágenes usando watermarks.js.

Enlace: Watermarks.js

Wallaby: Herramienta gratuita para convertir archivos de Flash a HTML5

wallabyAdobe acaba de lanzar la primera versión de Wallaby, una herramienta que permitirá a diseñadores y desarrolladores, convertir archivos de Flash a HTML5.

De acuerdo a Adobe, Wallaby cuenta con una interfaz de usuario muy simple,  que acepta como entrada un Archivo FLA y lo exporta  a HTML.

“Se trata de una tecnología experimental, que proporciona una visión de la innovación que estamos haciendo en torno a Flash y HTML, y que muestra la inversión que hemos hecho en las dos tecnologías que creemos que son importantes para largo plazo”, dijo Barclay. La salida de Wallaby no solo permite el uso de HTML, si no también de SVG y CSS que son tecnologías relacionadas.

La idea de Adobe es que los desarrolladores, a través de Wallaby, puedan extender sus aplicaciones a dispositivos que no son compatibles con Flash, como es el caso de Apple. Una vez que los archivos están convertidos se pueden modificar, utilizando una herramienta de edición de HTML, como lo es Dreamweaver o a mano.

Wallaby está disponible para Mac y Windows y se puede descargar totalmente gratis desde Adobe Labs.

Vía: Digital Arts

Logo oficial de HTML5

ScreenShot152Este es el logo oficial de HTML5, que ha sido presentado en el World Wide Web Consortium (W3C).

El logo ha sido diseñado por la agencia Ocupop, una empresa que se centra en marca, identidad y diseño web, además de otros aspectos.

El diseñador del logo de la empresa Ocupop, en un comunicado ha dicho, “HTML5 ha adquirido vida propia, ha habido una considerable confusión y debate  dentro de la comunidad de desarrolladores y el público en general, en cuanto a qué es exactamente HTML5, cuando el término es utilizado fuera de una simple referencia a la especificación en sí… La norma necesita un estándar. Es decir, HTML5 necesita un vocabulario visual coherente y estandarizado para servir de marco en conversaciones, presentaciones y explicaciones.

Vía: Mashable

Flash y HTML5 se enfrentan en esta versión de Pong

Flash vs HTML5Ante tanta discusión que se ha generado en torno a Flash y HTML5, que en sí las enfrenta, los integrantes de Code Compurtlove, decidieron hacer esta versión de Pong, utilizando las dos tecnologías.

El lado izquierdo del juego utiliza Flash y el lado derecho HTML5.

“El debate entre Flash y HTML5 ha causado mucha discusión en los últimos meses, y sin duda nos hizo pensar en el código. Creemos que las dos tecnologías no están en competencia y cada una tiene su propósito, pero creímos que sería divertido poner ambas a competir directamente”, dijeron los integrantes de Code Compurtlove.

Para ir al juego, puedes dar clic en el siguiente enlace.

Enlace: Flash Vs HTML5 (Vía Mashable)

Herramienta para convertir Flash a HTML5

En los últimos meses viene una disputa ¿qué si Flash es mejor?, ¿qué si HMLT5 reemplazará a Flash?, y muchas suposiciones más. En fin HTML5 se esta expandiendo y es una realidad, pero sin lugar a duda Flash nos ha mostrado la Web como la conocemos hoy día, así que más que enemigos son herramientas que impulsan juntos el crecimiento de la red, y así es que lo ve Adobe.

Rik Cabanier, en la convención Adobe Max, mostró la herramienta que vemos en el vídeo y que lo que permite es convertir una animación completa Flash a HTML5, además muestra las partes que no pueden ser convertidas y exporta los elementos individualmente, permitiendo trabajar con ellos más fácilmente.

Esta herramienta esta en desarrollo por lo que aun no esta para descarga.

Enlace: Adobe demos Flash-to-HTML5 conversion tool (Adobe)

Jo: Framework para aplicaciones móviles en HTML5

Jo es un Framework JavaScript que permite desarrollar aplicaciones para móviles basadas en HTML5. Gracias a su pequeño tamaño de 8KB, es excelente para correr en navegadores de dispositivos móviles, Jo originalmente fue pensado como un GUI (Interfaz gráfica de usuario) y una capa de datos en la parte superior de PhoneGap.

Otra característica buena es que Jo es Open Source que se distribuye bajo una licencia OpenBSD y no requiere dependencias.

Enlace: Jo (Sitio oficial)
Descarga: Jo

HTML5 test: Mide la compatibilidad de tu navegador con HTML5

html5HTML5 test es un servicio que te permite medir la compatibilidad de tu navegador con HTML5. No necesitas registrarte, lo único que debes hacer es acceder al sitio y esperar unos segundos para que te arroje el resultado.

Este servicio asigna un puntaje que va hasta los 300 puntos, junto con un listado de funcionalidades en la que se indica si el navegador soporta dicha función o no.

De acuerdo a un rápido chequeo hecho con cuatro navegadores, Chrome es el que ha obtenido más puntaje (197), por encima de Firefox y Safari, siendo Internet Explorer el de menor puntos con una diferencia bastante penosa (27).

Para probar la compatibilidad de tu navegador y conocer los detalles, puedes acceder a HTML5 test.

Vía: Feedmyapp

Pac-Man en HTML5

Pac-ManHace unos días atrás pudimos ver Galactic Plunder, un juego desarrollado utilizando sólo HTML5, y aunque apenas está en su fase inicial, es un buen avance para un vídeo juego creado sin utilizar Flash.

Hoy el turno ha sido para el clásico juego de Pac-Man, que fue creado utilizando la funcionalidad Canvas, audio en HTML5 y @Font-Face.

De acuerdo al autor, el juego no está del todo completo y planea trabajar un poco más en éste, pero se puede jugar.

El código de este juego lo podrás encontrar en Github y si deseas jugar y conocer más detalles sobre Pac-Man, puedes dar click aquí.

Vía: WebMonkey

Galactic Plunder: Juego hecho con HTML5 y Javascript

Galactic Plunder Galactic Plunder es un juego que ha sido escrito en Javascript, utilizando la funcionalidad Canvas y Audio en HTML5.

No es necesario Flash ni plugins de Java para jugar Galactic Plunder y es compatible con navegadores como Firefox, Chrome y Opera.

Por el momento, solo se encuentra el primer nivel completo, y el segundo está en desarrollo. Todo el código fuentes está bajo licencia abierta, se puede reutilizar libremente para cualquier fin y no te olvides de dar los créditos a su autor DougX.Net.

De acuerdo al autor, este juego sólo es una prueba para demostrar que un juego de disparos, puede ser hecho sin el uso de Flash.

Para ir al juego puedes dar click aquí.

Vía: Slashdot

Campus party: HTML5, Desarrollo, Simuladores, Redes sociales, iPhone, 3D, Robótica, Seguridad

En esta semana se ha realizado Campus Party en Bogotá Colombia, y han habido presentaciones, charlas, proyectos, entre otros muy interesantes, y acá hemos realizado una selección de charlas en vídeo, que sin lugar a duda le podrán ser de mucha utilidad, si te dedicas al desarrollo Web, 3D, a la seguridad informática, Robótica, marketing o si disfruta como muchos de los videojuegos.

HTML5

Una charla sobre HTML5 y sus principales ventajas.

Parte I

Leer el resto de la entrada »