HTML5

Convertir cualquier video a HTML5 con Easy HTML5 Video

por

Hoy en día hay que estar preparados para los estándares que se están poniendo en auge, y el video en HTML5 es uno de ellos, es mucho más cómodo que cualquier otro formato y no necesita de nada adicional para ser vistos, además de que puede ser visualizado en dispositivos móviles sin problemas.

easy html5 video

Easy HTML5 Video es una herramienta gratuita que nos permite convertir cualquier video a HTML5 para poder utilizarlos en nuestros sitios web. La buena noticia es que es muy simple de usar, se caracteriza por realizar todo el proceso de forma automática con un simple click.

El proceso es extremadamente simple y consta de tres pasos:

1. Arrastra y suelta los archivos de video a Easy HTML5 video;
2. Establece la imagen del panel, selecciona los codecs, ajusta la configuración;
3. Presiona en «Inicio».

Como resultado, obtendrás una página HTML con todos los códigos necesarios, imágenes y videos.

Easy HTML5 Video es gratuito para uso no comercial, y está disponible para Windows y Mac.

Enlace: Easy HTML5 Video

Animaciones CSS3 bellas y fáciles de implementar con magic animations

por

6-29-2013 3-02-16 PM

Hace algunos años si queríamos animar algo en nuestro sitios web teníamos que recurrir principalmente a imágenes gif, de esta forma se hacía el sitio web más vistoso, pero para otras personas era una total molestia ver tantas cosas moviéndose sin sicronización.

Ahora todo es diferente, aunque todavía las imágenes gif son muy utilizadas ya no se habla de animaciones de los elementos, si no de transiciones entre ellos, es decir, si haces scroll en la página, algún elemento se mueve para ajustarse a este movimiento, como la barra de navegación que se puede ampliar y establecer al principio de la página para que siempre esté disponible.

Crear estas animaciones con solo CSS3 no es tarea sencilla, es un tema avanzado y realmente no hay muchísima información para implementarlas de forma directa y rápida en tu sitio web, pero alguien ya se dio cuenta de esto y creo Magic CSS3 Animations, un archivo CSS que contiene 55 animaciones y transiciones diferentes para incluirlos en tu proyecto web fácilmente.

Lo primero que debes hacer es descargarlo de su repositorio en Github, luego incluir el archivo CSS en tu documento HTML

<link rel="stylesheet" href="yourpath/magic.css">

Ya con esto se puede combinar fácilmente con JavaScript o jQuery para crear la animación cuando se pase el mouse por encima de un elemento, por ejemplo:

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

Magic CSS3 Animations

Increíble experiencia musical en tu navegador

por

5-29-2013 5-07-04 PM

HTML5 y JavaScript están llevando la web a nuevo niveles de experiencias dinámicas, inmersivas y muy divertidas, ya es normal ver vídeos musicales sincronizados con movimientos de las ventanas del navegador y otras experiencias que combinan colores, formas y figuras con música estimulante.

Lights creado por Ellie Goulding, es una completa experiencia musical, llena de colores llamativos, esferas de colores estimulantes que explotan en miles de colores cuando se «tocan» con el mouse, se trata de una viaje donde puedes controlar la dirección de un cometa (?) mientras viaja a través de una superficie en 3D llena de partículas coloridas con las cuales puedes interactuar, todo esto acompañado de una música muy estimulante que hace de la experiencia una de las mejores que se han hecho hablando en términos de interacción.

5-29-2013 5-07-18 PM

5-29-2013 5-07-40 PM

Lights


El pasado, presente y futuro de HTML5

por

La Web ha evolucionado rápidamente en los últimos años, pasamos desde texto simple, hasta tablas, luego columnas, luego estilo a la página con CSS y después interacción sin recargar la página con AJAX y la última evolución fue hace muy poco, en el año 2009 con la introducción de HTML5 ahora es posible reproducir directamente audio y vídeo en el navegador sin necesidad de plugins externos.

InfografíaHTML

 

Vía: HTML5 Fácil

5 juegos increíbles en HTML5

por

Desde el lanzamiento de HTML5, la Web se ha convertido en un nuevo lugar para jugar videojuegos creados especialmente para ella, sin la necesidad de instalar plugins o aplicaciones de terceros como solía suceder con Flash o Java años atrás.

HTML5 además de brindar la posibilidad de crear videojuegos con gráficos avanzados también ha posibilitado a los desarrolladores construir aplicaciones robustas como si se tratará de una aplicación de escritorio o hacer streaming de vídeo en HD, todo esto en código nativo interpretado por nuestro navegador.

Como jugar es lo que nos gusta y lo mejor hacerlo directamente en el navegador les traigo una recopilación de 10 juegos increíbles creados en HTML5.

Sinuous

En Sinuous controlas una serpiente con el mouse la cual debes mover entre los puntos rojos para evitar que te golpeen y pierdas, si golpeas los puntos más grandes que van saliendo en la pantalla recibes poderes como atracción, escudo entre otros, a medida que avanzas aparecen más puntos moviéndose cada vez más rápido.

Sinuous

Coil

Coil consiste en encerrar los puntos azules con el mouse antes de que estos exploten rápidamente, pero debes tener cuidado de no encerrar las rojas porque perderás puntos y energía.

Coil

Leer más

Bombermine: Multijugador en línea del clásico Bomberman

por

2-27-2013 7-32-47 PM

Hace 30 años fue publicado Bomberman, el maravilloso juego que consiste, por supuesto, en poner bombas en un mapa cuadriculado para eliminar los bloques en tu camino y a todos los enemigos que te vas encontrando mundo a mundo mientras vas recogiendo poderes de todo tipo que te ayudarán a pasar cada nivel del juego.

Con motivo de éste aniversario algunos chicos desarrolladores han creado Bombermine, es Bomberman pero multijugador y además directamente en el navegador aprovechado las bondades de HTML5, el juego es una muy buena adaptación del original, se juega con el teclado con las clásicas WASD, Espacio para poner las bombas o reaparecer en el mapa cuando otro jugador te deje sin salida en alguna esquina y Enter para enviar mensajes al chat público.

2-27-2013 7-30-50 PM

Pero su mayor atractivo está en su multijugador con partidas de 20 minutos por servidor, cuando entras al sitio del juego te pide un nombre de usuario y la selección del servidor al cual quieras entrar para jugar, hay 6 disponibles para cada parte del mundo, les recomiendo que seleccionen el más cercano a ustedes para tener menos lag durante el juego y no perder el control :P, luego de entrar ya puedes empezar a jugar en el inmenso mapa, ahí notarás lo difícil que es competir con otros jugadores humanos que harán lo posible por dejarte sepultado en los callejones sin salida que abundan en el mapa, pero también hay disponibles muchos poderes para obtener ventajas.

Bombermine

Disponible Internet Explorer 10 para Windows 7

por

2-26-2013 12-55-20 PM

Con el lanzamiento de Windows 8 Microsoft también publicó una nueva versión de Internet Explorar, la número 10 que con mejoras sustanciales, como un rendimiendo más alto con Javascript, corrector ortográfico integrado, así como el soporte para nuevos estándares como CSS3.

El día de hoy Microsoft por fin ha publicado la versión de Internet Explorer 10 para Windows 7 con mejoras en su rendimiento reduciendo el uso de la CPU y la memoria mejorando la batería del portátil, Internet Explorer 10 también incluye soporte para las nuevas tecnologías como HTML5, CSS3, DOM, Web Performance y Aplicaciones web en general.

Entre la lista de nuevos estándares que soporta están:

  • CSS3: Sombras de texto CSS, transformaciones 3D CSS, transiciones y animaciones CSS3, gradientes CSS3 y filtros SVG.
  • Diseño responsive: Grids CSS3, flexbox, multicolumna, posiciones flotantes y regiones, formularios HTML5, controles y validaciones de campos de entrada.
  • Mejoras de Aplicaciones Web: Soporte para aplicaciones offline con almacenamiento local, Cache HTML5, Web Sockets, historia HTML5.
  • Aplicaciones web interactivas: Soporte para nuevas tecnologías como posiciones flotantes CSS3, drag-drop en HTML5, Media queries y eventos de apuntadores.

Internet Explorer 10 está disponible es más de 90 lenguajes para 32 y 64 bits desde la página oficial de Microsoft o luego a través de Windows Update, con esta actualización Microsoft impulsa a Internet Explorer como un navegador más respetable en la web.

Descarga Internet Explorer 10

Tethered: Plantilla para WordPress gratuita, minimalista y responsive en HTML5

por

2-5-2013 9-58-20 PM

Tethered es un nuevo tema para WordPress completamente gratuito, presenta un diseño muy minimalista, solo consta del encabezado, una barra lateral a la derecha y una sección principal donde van los posts, en cuanto a la tipografía posee títulos grandes y muy definidos pero siempre conservando el estilo sencillo, haciendo más fácil la lectura de los posts que ocupan gran parte de la pantalla.

El tema está desarrollado con Twitter Bootstrap, haciendo posible su estructura Responsive, es decir, se adapta a cualquier resolución de pantalla, algo muy útil especialmente para tablets y smartphones, además de eso tiene Página personalizables, Menús desplegables, Comentarios anidados, Comentarios de autores destacados y fondo personalizable.

Descargar Tethered

Guía práctica de HTML y CSS básico y avanzado

por

1-29-2013 9-25-32 PM

Shay Wove es un diseñador y desarrollador front-end que ha creado «A Practical Guide to HTML & CSS», como su nombre lo indica es una guía práctica para aprender HTML y CSS con muchísimos ejemplos y documentación completa acerca de cada característica de los dos lenguajes Web, la guía empieza desde los más básico y teórico hasta las últimas especificaciones de los dos lenguajes: HTML5 y CSS3, pero no solo se queda ahí, además del nivel básico donde aprendes todo lo necesario para crear una página web con las mejores prácticas también tiene un segundo nivel más avanzado, donde puedes aprender Rendimiento, Posicionamiento, Selectores complejos de CSS, Diseño Responsive (muy popular y necesario en este año 2013) y hasta jQuery también con variedad de ejemplos muy prácticos y reales.

A Practical Guide to HTML & CSS