Etiqueta: html5

Música, luces e interacción con el ratón. Dos webs que no podéis perder

Publicado el

por Juan Diego Polo

Si os gusta admirar l oque los nuevos navegadores son capaces de reproducir sin necesidad de usar flash, echad un vistazo en estas dos páginas, ambas con dos grandes protagonistas: la luz y la música.

findingho.me

captura-19

En este proyecto podemos movernos con el ratón mientras se generan montañas en los lugares que indiquemos. La música acompaña el ritmo, y el escenario va cambiando con el tiempo: de dí­a, con meteoritos cayendo, de noche… al final salimos de la tierra y vamos al espacio, donde el juego de luces y música continúa. Imperdible.
Continúa leyendo «Música, luces e interacción con el ratón. Dos webs que no podéis perder»

Un mezclador de música de Rick Astley en HTML5

Publicado el

por Juan Diego Polo

captura-133Sí­, parece que ya lo han inventado todo…

En rickastley.dinahmoe.com tenemos una aplicación web, creada con HTML5 y WEBAUDIO, que nos permite mezclar diferentes pistas de una canción de Rick Astley dando diferentes efectos a cada una.

Las combinaciones son extremadamente numerosas, ya que podemos especificar que la voz sea reproducida en modo balada mientras la guitarra toca en Heavy Metal, por ejemplo… solo hay que seleccionar el botón adecuado y las frecuencias en la parte inferior.

Aunque no deja de ser un experimento para jugar con las últimas tecnologí­as web, lo más sorprendente es que se trata de un proyecto real hecho con arduino. Eso significa que podemos tener una mesa de mezclas real, basada en la canción de Rick Astley, siguiendo las instrucciones de su autor (de momento solo ha publicado un ví­deo, pero parece que tiene previsto explicar el paso a paso).

HTML52PDF, para crear documentos PDF, Word, RTF… desde nuestro sitio web

Publicado el

por Juan Diego Polo

captura-22Desde No-nonsense Labs (startup española) nos presentan HTML52PDF, una librerí­a gratuita para uso no comercial que nos permite generar documentos e informes en varios formatos (PDF, Word, RTF y Open Document Format) desde cualquier servidor web: LINUX, UNIX, WINDOWS o MAC.

El componente permite generar documentos a partir de HTML y CSS y a partir de plantillas directamente creadas en Word, Open o Libre Office, dispone de un motor de gráficas integrado y permite incluir tablas de contenido, notas a pie de página, formularios web, fórmulas matemáticas, gráficas, etcétera.

Se trata de un proyecto con código abierto, por lo que es posible alterarlo para personalizar su uso. El objetivo es que los usuarios puedan generar documentos de forma dinámica en su blog, página personal o pequeño negocio.

En su página tenéis las condiciones de uso de su licencia gratuita, así­ como los datos de contacto para los que necesiten de la plataforma para uso comercial.

Más de 800 plantillas web gratuitas en HTML5

Publicado el

por Juan Diego Polo

Si estáis buscando plantillas gratuitas para comenzar a desarrollar un proyecto web, echad un vistazo en templated.co, don, bajo licencia Creative Commons, se ofrecen 844 templates diseñadas y construidas por Cherry (@cherrynastor) y AJ (@n33co).

Las plantillas pueden usarse en proyectos comerciales, solo es necesario indicar el crédito del trabajo en alguna parte de la página final. Todos los diseños ofrecidos se adaptan a diferentes tamaños de pantalla, siendo necesario editar el contenido para adaptarlo a nuestras necesidades (ellos mismos recomiendan sublimetext.com para realizar ese trabajo).

Para el desarrollo han usado el framework Skel, bien documentado y disponible de forma gratuita en la web, ocupando solamente 23kb.

Destaca en producthunt bajo el tí­tulo: A collection of 844 free CSS and HTML5 site templates, se transforma en un buen recurso para tener en nuestra categorí­a de Utilidades para Diseño.

Amazon comienza a permitir que los desarrolladores lleven sus aplicaciones HTML5 a dispositivos Fire TV

Publicado el

por Fco. José Hidalgo

Amazon Fire TV

Amazon acaba de abrir las puertas para que los desarrolladores de aplicaciones en HTML5 puedan llevar sus desarrollos hacia los dispositivos Amazon Fire TV y el stick Fire TV gracias al nuevo soporte incorporado dentro de su existente set de herramientas de publicación de aplicaciones web en HTML5.

A juicio de Amazon, se trata de una nueva oportunidad de llevar sus desarrollos a las salas de estar. Además, aquellos desarrolladores que ya tengan sus aplicaciones publicadas para los teléfonos y tabletas Fire pueden llevar las mismas hacia los señalados dispositivos usando el mismo flujo de trabajo que emplean en la actualidad.

Para que ello sea posible, Amazon ha realizado algunas modificaciones en su plataforma WebView, en el que entre otras cosas, ha incluido el soporte para los mandos remotos de los dispositivos Fire TV, soporte para la entrada analógica desde el controlador de juegos de Fire TV y desde otros controladores, así­ como el acceso a la API de las compras integradas (IAP – In App Purchase) ví­a JavaScript. Para facilitar el desarrollo desde cero, Amazon ha puesto a disposición de los desarrolladores una nueva plantilla de código abierto para que la usen cuando vayan a crear aplicaciones de medios en HTML5 para Fire TV.

La idea, al fin y al cabo, es posibilitar que los televisores se conviertan en auténticas plataformas interactivas, abriendo un mundo de posibilidades mediante la disponibilidad de nuevas aplicaciones HTML5 permitiendo, entre otros aspectos, convertirse en centros de juegos de alta calidad.

Usa la extensión /html5 para pasar de flash a html5 en youtube

Publicado el

por Juan Diego Polo

Si accedemos a youtube.com/html5 veremos una pantalla como la mostrada en la imagen superior, donde es posible especificar que queremos el reproductor HTML5 en lugar del clásico flash en todos los ví­deos de youtube. Pero si no queremos eso, si deseamos dejar el flash en general, y cambiar a html5 en un ví­deo determinado, es fácil hacerlo: solo hay que añadir /html5 al final del mismo.

De esta forma, si estamos intentando reproducir un ví­deo de youtube en un móvil, y no abre por culpa de tener su formato en flash, solo hay que poner /html5 al final de la dirección web para que el reproductor cambie automáticamente.

Ejemplo:

– antes: https://www.youtube.com/watch?v=wp2bY7SWHYw
– después: https://www.youtube.com/watch?v=wp2bY7SWHYw/html5

Este consejo, que leemos hoy en reddit.com, lo dan aquellos que prefieren el flash al comprobar que la resolución 1080p no está disponible en muchos ví­deos al usar el HTML5, aunque el nuevo reproductor sí­ acepta cambiar la velocidad de reproducción (0.25x, 0.5x, 1x, 1.25x, 1.5x y 2x). Este problema de resolución no aparece entre los que tienen un gran monitor, por lo que parece que no es algo general.

Personalmente, una de las cosas que más me gusta del reproductor HTML5 es su capacidad de cambiar de resolución automáticamente al cambiar de pantalla completa a su tamaño normal sin necesidad de refrescarlo. Está claro que el formato HTML5 es mucho mejor, pero hay que esperar aún un poco para poder decir que es perfecto.

El estándar HTML5 ya se encuentra completado

Publicado el

por Fco. José Hidalgo

HTML5Hoy dí­a, los usuarios podemos interaccionar con los contenidos multimedia, colaborar en la edición de documentos y realizar otras acciones desde la web sin tener que recurrir a aplicaciones o plugins de terceros, pudiendo hacer uso de diferentes tipos de dispositivos desde diferentes lugares. Estas y otras posibilidades se deben gracias al estándar HTML5, siendo hoy noticia debido a que el mismo ya se encuentra completado, como apunta el Consorcio World Wide Web (W3C) mediante su recomendación a través de un comunicado, considerando a este estándar como la piedra angular de la Plataforma de la Web Abierta.

W3C señala que el HTML5 y la Plataforma Web Abierta está impulsando las crecientes expectativas de los usuarios en lo que respecta a la posibilidad de compartir fotos, ir de tiendas, leer las noticias y buscar la información en cualquier lugar y en cualquier dispositivo.

Señala que las ventajas del estándar HTML5 no son sólo para los usuarios, ya que los mismos desarrolladores de aplicaciones y servicios web se benefician del mismo gracias a la compatibilidad con una amplia variedad de dispositivos, lo que reduce el coste de la creación de aplicaciones ricas para llegar a los usuarios de todo el mundo, además del uso de licencias sin royalties de más se sesenta empresas en virtud de la Polí­tica de Patentes de la W3C.

Con ello, HTML5 facilita el acceso al video y audio sin aplicaciones ni plugins de terceros, y además ofrece soporte nativo para gráficos vectoriales escalables (SVG) y matemáticas (MathML), anotaciones importantes para la tipografí­a de Asia Oriental (Rubí­), caracterí­sticas que permitan la accesibilidad a aplicaciones ricas, y mucho más. Es por ello que mediante un ví­deo, la W3C considera al estándar HTML5 como estándar web para el futuro.

animatron, para crear animaciones en HTML5 sin saber programar

Publicado el

por Juan Diego Polo

Si queréis realizar alguna animación que pueda verse perfectamente desde navegadores modernos o dispositivos móviles, Animatron (animatron.com) os puede ayudar. Se trata de una plataforma que permite crear animaciones atractivas tanto solo como en equipo, con una herramienta sencilla de usar y con un plan gratuito limitado a 20 proyectos.

El panel de trabajo permite usar varias formas, distribuirlas en varias escenas (como si estuviéramos creando un cómic), utilizar una linea de tiempo para gestionar las animaciones, importar audio desde nuestro ordenador, subir imágenes (dibujos hechos a mano, por ejemplo), utilizar librerí­as, definir movimientos independientes para cada elemento… una gran cantidad de recursos que ayudan a crear nuestra animación sin problemas.

En su página principal es posible ver algunos trabajos realizados por sus usuarios, y la plataforma está abierta en modo invitado, permitiendo su uso sin necesidad de registro (aunque de esa forma los trabajos no se guardan después de 15 dí­as).

El resultado puede exportarse en HTML5, SVG, GIF o ví­deo, listo para compartirse en la página web en la que estáis trabajando.

Colección de trucos y tutoriales de HTML5, CSS3 y Javascript

Publicado el

por Miriam Schuager

En le web disponemos de muchos cursos y contenido que nos permiten resolver casi cualquier duda en cuanto desarrollo web,  como los dos recursos que compartiremos hoy.

The Code Player ofrece una colección de pequeños tutoriales sobre HTML5, CSS3 y Javascript que pueden resultar de utilidad en más de una ocasión al implementar un nuevo diseño o elemento a nuestro proyecto.

thecodeplayer

Por ejemplo, encontraremos cómo emular uno de los efectos que encontramos en el estilo visual de Material Design, una animación estilo Matrix, cómo crear un calculadora utilizando Javascript y CSS3, realizar slider de diferentes estilos, etc.

Al ingresar en cada tutorial veremos un demo del efecto o diseño que deseamos aprender, permitiéndonos interactuar para ver su funcionamiento. Y en la misma interfaz veremos una descripción, con las opciones de visualizar el paso a paso dejando correr la reproducción o simplemente ver el código.

También hay una sección para los comentarios, que puede ser de utilidad para ver el aporte de la comunidad, o dudas que pudieran surgir, así­, como sugerencias de tutoriales relacionados. Si vemos que algunos tutoriales están clasificados como “Secret”, tendremos que suscribirnos a The Code Player para ver su contenido.

Sin dudas, un recurso interesante que podemos guardar en nuestros marcadores.

Google Smarty Pins, juego de trivias de geografí­a basado en Google Mapas

Publicado el

por Juan David Quiñónez

smarty pins juego geografia maps

En el perfil oficial de Google Maps en Google+ han presentado un nuevo juego de trivias llamado Smarty Pins en el que se ponen a prueba nuestros conocimientos de geografí­a a través de una sencilla interfaz de preguntas puesta sobre los nuevos mapas de Google. La idea es simple: Leer preguntas e ir marcando, o mejor, ubicando las respuestas en el mapa a través del clásico pin de Maps.

Deportes y juegos, Arte y Cultura, Ciencia y Geografí­a, Entretenimiento, Historia y el Mundial de fútbol son los temas que recogen las categorí­as de preguntas a las que nos podemos unir para empezar a responder las trivias: En qué ciudad nació tal futbolista, dónde se ubica cierto monumento histórico, en qué punto de USA se unen cuatro estados, en qué lugar se grabó una serie de TV famosa, etc.

La dinámica es clara: Luego de elegir la categorí­a se irán mostrando las preguntas y hará falta responderlas antes de que se nos acaben los «kilómetros», los puntos con los que iniciamos los cuales irán menguando en cantidad según nos distanciemos de las ubicación correcta de la respuesta. Por el contrario, si acertamos y lo hacemos al instante, ganaremos bonos de kilómetros.

Lo demás es la parte social de compartir los resultados según avanzamos en el juego y retar a nuestros amigos para ver quién es el más sabelotodo tanto en cultura general como en Geografí­a y geolocalizaciones. Por cierto, generalmente al lanzar este tipo de experimentos se promociona alguna caracterí­stica especial de los productos de Google, pero por lo visto sólo se busca promover los nuevos mapas de Google en su generalidad (tanto para la web como para móviles).

Enlace: Smarty Pins