Posts etiquetados ‘HTML5’
Crea imágenes con marca de agua usando HTML canvas y Javascript
Watermark.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:
- Llama “watermark.js” antes de la etiqueta body de tu documento HTML.
- “className” la clase en los elementos donde usará una marca de agua. (Opcional) Por defecto: “watermark”.
- “position”: “top-left”|”top-right”|”bottom-right”|”bottom-left” (Opcional) Por defecto: “bottom-right”.
- “watermark” un elemento img que representa la marca de agua.
- “Path” la ruta a la imagen.
- “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
Adobe 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
Este 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
Ante 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.
HTML5 test: Mide la compatibilidad de tu navegador con HTML5
HTML5 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
Hace 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 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





