Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

lunes, 15 de agosto de 2011

LimeJS: Framework HTML5 para crear Juegos


crear juegos html5
El framework se encuentra muy bien documentado, lastima que no hay más ejemplos prácticos para ir aprendiendo desde cero como crear un juego utilizando para ello HTML5, no obstante estudiando la documentación podemos comenzar a crear nuestros propios juegos.

Actualmente LimeJS solo cuenta con dos dependencias: Python 2.6 o superior, Git, y finalmente subversion o git-svn. Y aunque no es obligatorio el autor recomienda tener Java instalado en nuestro servidor.

Si estas interesado en el desarrollo de juegos HTML5, este framework probablemente se encuentre en una referencia casi segura.
Web: LimeJS

martes, 9 de agosto de 2011

Increíbles efectos y animaciones con HTML5 y CSS3

En Adobe están haciendo bien las cosas, lentamente parecen ir abandonando la idea sobre la vigencia de Flash y comienzan a hacer cosas realmente interesantes utilizando tecnologías como HTML5 y CSS3.
Un buen ejemplo de ello es el sitio web The Expressive Web, en donde se explotan las virtudes y mejoras tanto de las propiedades CSS3, como de las mejoras provistas por HTML5.
Animaciones CSS3 HTML5 de Adobe
En este fantástico y sorprendente sitio de Adobe vamos a encontrar listadas algunas de las propiedades CSS3/HTML5 más importantes, cada una de ellas nos dirigirá a un nuevo ejemplo.
Las propiedades listadas son:
  • Animaciones CSS3
  • Gradientes CSS3
  • Media Queries CSS3
  • Sombras CSS3
  • Transformaciones CSS3
  • Transiciones CSS3
  • Web Fonts CSS3
  • Audio HTML5
  • Canvas HTML5
  • Formularios HTML5
  • Video HTML5
  • Web Storage
Finalmente en el sitio se indican las versiones de navegador necesarias para ejecutar cada ejemplo, a la vez se nos indica el porcentaje de usuarios aproximado que puede visualizar el ejemplo sin ningún tipo de inconvenientes.
Web: The Expressive Web

Layers: Agrega una barra en tu sitio con contenidos de otros sitios web



Layers es una interesante herramienta que nos permite incorporar una barra con el contenido del feed de otros sitios de una manera muy simple y con un aspecto visual muy elegante. Por ejemplo, es muy útil para bloggers que tienen varios sitios y les gustaría promocionarlos de forma cruzada para que en todos puedan ver los contenidos de manera cómoda.

Esta herramienta es gratuita y lo único que tienen que hacer es ir agregando los feeds de los blogs que quieren mostrar en la barra. El siguiente paso es personalizar un poco la barra que aparecerá en la parte inferior del sitio, pudiendo elegir los colores y degradados, si la barra se oculta automáticamente o sale expandida desde el principio, etc.

Una vez que terminamos la creación de nuestra barra generamos el código especial que tenemos que pegar dentro del <head> de nuestro sitio, así comenzará a aparecer la barra automáticamente en la parte inferior de nuestro sitio web.

Enlace: Layers

Visto en Wwwhat’s new

lunes, 1 de agosto de 2011

Adobe lanza "Edge", una herramienta para crear animaciones en HTML5

Puede que Flash esté viviendo sus últimos momentos de gloria. Hoy, Adobe lanzó una nueva herramienta llamada Edge, que permitirá a los diseñadores crear contenido animado usando estándares web como HTML5, CSS y JavaScript. Y sin Flash.
Edge es la apuesta de la compañía para posicionarse como un jugador clave en la infraestructura de la web moderna, sobre todo cuando gran parte de la misma es accedida desde equipos móviles, donde Flash no suele ser bienvenido (sobre todo en los equipos de Apple).
La idea de Adobe es que Edge coexista con Flash, no que lo reemplace. La compañía señaló aReadWriteWeb que a futuro, Flash cambiará para enfocarse en las cosas que HTML5 todavía no puede hacer, como juegos en 3D por ejemplo. Porque haciendo lo mismo está claro que no llegará muy lejos.
De todos modos, el lanzamiento de Edge parece una forma de la empresa de asegurarse de que, si Flash llega a quedar obsoleto, la empresa estará lista para mantenerse activo en el desarrollo para HTML5.
Adobe Edge proveerá herramientas para construir animaciones y próximamente juegos con tecnologías web. El software estará disponible para Mac y PC y fue diseñado para tener una interfaz intuitiva, iniciarse rápido y ser parecido a los sistemas que los diseñadores y profesionales creativos ya están acostumbrados a usar. Edge puede importar documentos HTML existentes y archivos SVG, PNG, JPG y GIF para luego ajustarlos con CSS3. Los trabajos producidos por el software correrán en todos los navegadores modernos.
El software está disponible gratis mientras está en etapa de preview, mientras que el lanzamiento de la versión 1.0 estará disponible el próximo año.

miércoles, 27 de julio de 2011

Cómo insertar HTML en un correo de Hotmail

Esta entrada nace de la necesidad de insertar un mapa de Google en modo street view en un correo sin tener que salir de la misma ventana de la bandeja de entrada para visualizar el mapa por lo que mostraremos lo fácil que es insertar HTML en un correo de Hotmail y en la próxima entrada mostraremos como hacerlo en GMail y su método que es diferente a este.

lunes, 18 de julio de 2011

Insertar video compatible con HTML5 en WordPress

Desde hace un tiempo que YouTube migró a HTML5 en los videos, así se pueden reproducir en cualquier dispositivo, tenga o no flash instalado (cof, cof…apple…cof, cof).

Este plugin nos permite insertar videos de YouTube en el editor WordPress mediante un botón, y totalmente compatible con HTML5.
Visto en Codigo Geek

viernes, 15 de julio de 2011

Reproductor de video HTML5 que permite votar las partes favoritas


Desde Zurb nos regalan un proyecto de lo más interesante, se trata de un reproductor de video desarrollado en HTML5, con barra de progreso, y con la novedosa posibilidad de votar las partes preferidas del video utilizando para ello la barra espaciadora.
HTML5 Video Voting recopila la cantidad de votos que el video recibe y genera una pequeña gráfica estadística en la parte inferior del video mostrando las partes que recibieron más votos por parte de los usuarios, todo en una interface sencilla creada utilizando HTML5, jQuery y en este caso Ruby on Rails, aunque esto lo podemos modificar utilizando cualquier otro lenguaje o framework.
html5 video votar jquery
Actualmente el reproductor esta testeado y funciona perfectamente en navegadores como Firefox +4, Chrome +10, y Safari 4+.
Ejemplo de uso:


Si bien este tipo de reproductores no están siendo muy utilizados en la actualidad por asuntos relacionados a la compatibilidad con distintos navegadores antiguos, en un futuro no muy lejano creo que van a copar todos los sitios que necesiten reproducir vídeos de una forma simple.
Web: HTML5 Video Voting

miércoles, 13 de julio de 2011

Los 4 mejores juegos para Google Chrome en HTML5


Lo grande de navegadores como Chrome son las posibilidades que nos ofrece, y Google, lejos de quedarse atrás, no sólo ofrece un market con miles de aplicaciones para su sistema operativo del momento, si no que también lo ofrece para su navegador Chrome.

viernes, 8 de julio de 2011

Como poner el Botón Oficial de tu perfil de Google+ en tu blog


Ya han pasado dos semanas de la euforia que causó Google con el lanzamiento de su alternativa de red social Google+, los resultados han sido positivos, y parece que esta nueva red social ha pasado la prueba de los críticos quienes le auguran un buen futuro, ya que posee características innovadoras y muy importantes con respecto a la privacidad y control de usuarios/amigos, algo en lo que Facebook es muy receloso. Ahora bien, como toda red social, Google+ necesita tener de botones y enlaces para poderse referenciar y anunciar en los distintos medios por internet, es decir, blogs, links de perfil, banners, etc. y era algo que esta red social no tenía hasta el día de hoy, en donde Google publicó una página dedicada a crear el botón de perfil  de Google+ para nuestro blog.
Ponerlo en nuestro sitio web será muy sencillo, ya que tan solo se trata de un código HTML que enlazará una imagen con tu perfil de Google+, además de que la página diseñada por Google nos guía paso a paso para personalizarlo lo más posible y dejarlo al gusto y necesidad del usuario, aquí los pasos.
Paso 1
Entramos a la siguiente dirección Web “http://www.google.com/webmasters/profilebutton/” en donde inmediatamente se nos desplegará el siguiente cuadro:
Paso 2
Una vez ya en el cuadro, en la opción 1, tendremos que escribir la dirección Web de nuestro perfil en Google+, por el momento Google+ no soporta aun Vanity URLs, por lo que tenemos que acceder a nuestro perfil de Google+ y copiar la dirección que aparece en la barra de herramientas y esa será la que copiaremos en el primer recuadro.
Paso 3
Después de haber colocado la dirección de nuestro perfil, pasamos a la opción 2, en donde tenemos que especificar que contenido queremos mostrar por defecto cuando se de click al botón, tenemos dos opciones, mostrar directamente la información de contacto,  o mostrar el contenido compartido .
Paso 4
Seguimos con la opción 3 del cuadro, en donde simplemente tendremos que elegir el tamaño del icono que tendrá el botón, pudiendo elegir entre 4 tamaños diferentes: Pequeño (16px), Standard (32px), Mediano (44px), y Largo (64px).
Paso 5
Por último simplemente tenemos que copiar el link que automáticamente se generó al ir llenando las opciones, y para ponerlo en nuestro blog, simplemente tenemos que copiarlo y pegarlo justo donde queremos que se encuentre, por ejemplo si deseemos que se ponga en la “SideBar” de nuestro blog, accedemos a la configuración de nuestro blog y agregamos un cuadro de texto en donde pegaremos el código que nos proporcionó Google y guardamos cambios. Con eso bastará para que tengamos nuestro propio botón de perfil de Google+.
Por obvias razones este tutorial solo aplica para quienes ya tienen una cuenta en Google+.

viernes, 1 de julio de 2011

Convertir Flash a HTML5


Google lanzó un nuevo servicio llamado Google Swiffy, con el cual podemos convertir flash a HTML5 de forma muy simple, sólo seleccionamos el archivo y el sistema se encargará de todo lo demás.
Las ventajas de convertir un flash a HTML5 es que le da compatibilidad a dispositivos como el iPhone o el iPad. Para utilizar esta herramienta hay que entrar desde Chrome o Safari, ya que requiere de un motor Webkit.

viernes, 24 de junio de 2011

40 aplicaciones Adobe AIR para diseñadores y desarrolladores

Adobe AIR  (Adobe Integrated Runtime) abrió la puerta a un sinfín de aplicaciones de escritorio combinando Flash, Flex, HTML y Ajax, muchas de ellas dedicadas a diseñadores y desarrolladores web.
En Ginva proponen un listado de 40 aplicaciones AIR, una mas interesante que la otra, ideal para los curiosos (como yo) que gustan de ver y probar cosas nuevas.
El listado cuenta con aplicaciones tales como:
  • Paletas de colores,
  • Herramientas de medición,
  • Editores de imágenes,
  • Creadores de efectos para fotografías (Ej.: TiltShift)
  • Generador de iconos,
  • Editores de gráficos 3D,
  • Administradores FTP de archivos,
  • etc.
Para instalar las aplicaciones necesitarán tener previamente instalado AIR en su PC, lo cual pueden hacerlo desde aquí.


jueves, 16 de junio de 2011

Upload de imágenes HTML5, jQuery con modalidad Drag & Drop


Droparea es un completo plugin jQuery, que utiliza HTML5 y que nos permite de una forma muy sencilla incorporar un formulario de upload de imágenes, con la capacidad de arrastrar y soltar.
Esta forma de realizar una subida de imágenes es bastante más intuitiva y simple de cara al usuario que los formularios convencionales. El formulario se puede configurar, hablando del aspecto visual, por defecto se ve de la siguiente manera:
drag and drop upload imagenes jQuery html5
El usuario simplemente arrastra la imagen al cuadro, la misma se sube al servidor y se muestra en el espacio asignado.
Un ejemplo de implementación sería el siguiente:
HTML:
<div data-width="460" data-height="345" data-type="jpg" data-crop="true"
data-quality="60" data-folder="sample" data-something="stupid"></div>
JAVASCRIPT:
<script>
$('.droparea').droparea({'post' : '/data/dev/droparea/upload.php'});
</script>
Antes de que lo implementen en sus formularios les recomiendo que lo prueben en distintos navegadores. El autor por el momento solo comenta que el plugin fue testeado en Google Chrome y Firefox.

Reproductor de música HTML5


Si estas buscando una forma de cambiar los reproductores de música que utilizas en tus sitios, y que funcionan con Adobe Flash, una buena idea sería utilizar HTML5, para ello puedes valerte deHTML5 jQuery Player, un plugin muy bueno y simple para reproducir archivos MP3 sin la necesidad de utilizar flash en lo más mínimo.
Antes de continuar te recomiendo probar la demostración online, o bien puedes ver la captura que inserto a continuación mostrando como se visualiza este reproductor HTML5.
reproductor música html5 jQuery
El código de este plugin es extremadamente limpio, cuenta con varias opciones de configuración muy interesantes, por ejemplo podemos pasarle por parámetro la lista completa de canciones, con datos relacionados como: titulo, artista, precio, ruta para comprarlo, duración y finalmente la portada del álbum.
Una vez instalado y configurado el plugin solo resta analizar si utilizar hoy en día HTML5 se justifica en nuestro sitio, principalmente debemos observar si los navegadores más utilizados por nuestros visitantes tienen el soporte adecuado. El resto son todas ventajas.
Web: HTML5 jQuery Player

viernes, 10 de junio de 2011

Crea, personaliza y publica tu sitio web con Microsoft Webmatrix


Microsoft WebMatrix es una herramienta fantástica, Open Source, que te permite desarrollar sitios completos desde cero hasta su implementación. Les dejo un fragmento de la pagina de microsoft que describe muy bien sus caracteristicas.
WebMatrix es una nueva herramienta de desarrollo de Microsoft que incluye todo lo necesario para el desarrollo de sitios web. Comenzar a partir de aplicaciones web Open Sourceplantillas predefinidas o simplemente empezar escribiendo código desde cero. Desarrollar sitios web nunca ha sido tan fácil.”
Cree su sitio web
Para empezar a crear sitios web, simplemente descargue e instale WebMatrix utilizando el Microsoft Web Platform Instalarer. ¡Estará listo y funcionando en menos de 5 minutos! Una vez WebMatrix esté instalado, es muy sencillo instalar las últimas versiones de sus aplicaciones web gratuitas como WordPress, Joomla!, DotNetNuke, Umbraco u Orchard.
Create your website

Personalice su Sitio Web

Cuando el sitio ya esté funcionando, descubrirá que WebMatrix le ofrece todas las funcionalidades que necesita bajo única herramienta. Olvídese de tener que cambiar entre diferentes aplicaciones para realizar tareas de desarrollo web. Con WebMatrix, siempre estará a un click de editar sus archivos, gestionar su base de datos o modificar la configuración del servidor.
Customize your website

Publicar su WebSite

Cuanto esté preparado, WebMatrix cuenta con una funcionalidad específica para publicar al mundo su sitio web. Puede acceder a nuestra galería de proveedores de alojamiento desde WebMatrix y encontrar un Hoster que se comprometa a correr su sitio web de la forma más efectiva, así como a permitirle la publicación desde el mismo WebMatrix.
Publish your website
Lo pueden descargar de aquí.

Por último les dejo un ebook de 39 páginas gratuito con un curso muy rápido sobre Microsoft WebMatrix.
Este pdf ocupa aproximadamente 5.2 Mb.
El documento puede ser accedido directamente en este enlace (5.2 Mb).
Visto en geeks.ms

viernes, 3 de junio de 2011

Crear pagina web dentro de Facebook con Iwipa


La red social Facebook nos permite miles de opciones, y no sólo referidas a la posibilidad de hacer amigos y conectarnos con gente nueva. También podemos dar a conocer un producto o un servicio, de manera muy sencilla y práctica. Es decir, hoy te enseñaremos cómo crear pagina web dentro de Facebook con Iwipa.
iwipa 450x266 Crear pagina web dentro de Facebook con Iwipa
Iwipa es una aplicación que te ayudará a armar una página web para dar a conocer un producto en Facebook, para lo que deberás tener una cuenta en la red social y una página del producto o servicio de tu interés. Puedes utilizar las llamadas Fan Pages, en lugar de una cuenta de “amigo”. Iwipa te ofrece una interfaz en la cual podrás crear la página y agregar texto, editarlo, agregar videos, imágenes, logos, notas, botones y toda la información necesaria sobre tu sitio o producto.
EnlaceIwipa