Etiqueta: html5

Full Screen Mario, disfrutando de Super Mario Bros desde el navegador

Publicado el

por Rebeca Polo

mario

Una de esas noticias que pueden alegrarnos un domingo como éste es, desde luego, anunciar que tenemos disponible una versión beta para jugar a Super Mario Bros desde el ordenador.

Y es que leemos en Seetio que gracias al HTML5 y a la iniciativa de un individuo podemos disfrutar de Super Mario Bros desde el mismo navegador, sin cargas, sin instalaciones y con ls posibilidad de disfrutar de las 40 pantallas de uno de los juegos más mí­ticos del mundo de las consolas. Los controles son simples ya que el juego funciona con las flechas del teclado para realizar el movimiento (o con WASD si nos gusta más esta posibilidad) y con SHIFT para acelerar. Adicionalmente, el juego incluirá con un editor para que creemos nuestros propios niveles o juguemos a mapas aleatorios.

También merece la pena comentar que el creador del juego en navegador, Josh Goldberg, ha publicado el código del juego en GitHub para que todos nosotros podamos echarle un ojo, editarlo, mejorarlo o simplemente experimentar a nuestro gusto.

Obligatorio para que los fanáticos de juegos retro como este vivan un pequeño momento de nostalgia y para que cualquiera pase un buen rato en el teclado en esas horas muertas que pasan durante el domingo. Para jugar ahora mismo, haz clic en este enlace.

Para crear en HTML5 sin saber programar

Publicado el

por Juan Diego Polo

html5La necesidad de crear sitios web que puedan consultarse desde cualquier dispositivo, y la posibilidad de olvidarse de Flash usando técnicas creadas gracias al relativamente nuevo HTML5, ha permitido que la cantidad de recursos usando este lenguaje de marcado haya aumentado muchí­simo durante los últimos meses.

Son juegos, aplicaciones, blogs, herramientas de oficina en la web… el hecho de que solo los navegadores modernos reconozcan HTML5 no ha parado a los programadores, que tienen una enorme cantidad de recursos, SDKs y demás proyectos que ayudan a desarrollar verdaderas maravillas, pero la oferta de plataformas disposnbles para crear en HTML5 no está limitada a este tipo de profesionales.

Aquí­ os dejo una lista de algunos recursos que pueden encontrarse en la web para que podáis crear contenido HTML5 sin necesidad de programar, terminando la lista con algunos enlaces para los que quieran empezar a entender mejor cómo funciona.

– Google Webdesigner: Herramienta creada por Google para crear banners y anuncios en general.
– Bunkr: Para hacer presentaciones en HTML5, compitiendo con google drive, prezi, zoho y demás herramientas de creación de presentaciones online. Hay otras aplicaciones para hacer presentaciones en HTML5, aquí­ podéis ver una lista.
– easyhtml5video: Para publicar ví­deos en HTML5 dentro de cualquier página web.
– html5-up: Plantillas en html5 para creación de sitios web.

Y si queréis aprender un poco de html5, probad Code Avengers, udemy o alguna de estas opciones que mostramos hace unos meses.

processon, crea y comparte diagramas de flujo en HTML5

Publicado el

por Juan Diego Polo

diagramas flujo

Aquí­ tenemos otra herramienta que nos permite crear diagramas de flujo arrastrando componentes en un panel de dibujo bastante rápido y profesional.

Se trata de processon (processon.com), una red social en la que podemos crear grupos y compartir trabajos, con una aplicación de diagramas, diseñada en HTML5, para que podamos compartirlos rápidamente en nuestra red, que es el núcleo del sistema.

Efectivamente, la idea de processon no es crear una aplicación de diseño de diagramas y sí­ una red de profesionales que compartan ideas de esta forma. Lógicamente podemos usar la herramienta para crear los diagramas y usarlos fuera del sitio, pero no es el objetivo de este proyecto, que permite incluir equipos de trabajo y conocer personas que quieran compartir sus diagramas con el resto de la comunidad.

Podemos usar las funciones de colaboración para permitir construir diagramas entre varias personas, tanto comenzando desde cero como seleccionando algunas de las plantillas ya existentes. Estas plantillas (templates) ya están clasificadas en función del tipo de diagrama que se desee (UML, diagrama de procesos, diagramas de Venn, etc.), ayudando así­ a ahorrar mucho tiempo a la hora de definir la estética del flujo.

Podemos seguir y ser seguidos, enviar mensajes, descubrir nuevos usuarios, recibir alertas… un buen lugar para compartir ideas entre profesionales.

appsfuel – Un mercado de aplicaciones en HTML5, para móviles

Publicado el

por Juan Diego Polo

Cada sistema operativo móvil tiene su mercado oficial de aplicaciones. Google Play (Android) y iTunes (iOS) son los reyes a la hora de buscar nuevas opciones, aunque la clasificación y sección de destacados obedezcan a un algoritmo demasiado aleatorio para mi gusto.

Eso significa que si desarrolláis una aplicación móvil es muy difí­cil que sea conocida si no la subí­s a los mercados oficiales, no conseguí­s divulgación en blogs especializados o no os toca la loterí­a en el departamento de Google y Apple dedicado a destacar aplicaciones. Ese es el motivo por el cual nacen mercados paralelos, sitios donde los desarrolladores pueden divulgar sus aplicaciones y permiten que los usuarios puedan ejecutarlas sin necesidad de acceder al lugar oficial.

Por supuesto tenemos que recordar el aspecto de la seguridad. Bajar una aplicación para android (.apk) de un sitio web cualquiera, fuera de la tienda oficial, puede causar problemas de seguridad y/o privacidad, por lo que es mejor apostar por alguna colección de aplicaciones que puedan ejecutarse directamente desde el navegador, en HTML5.

Eso es lo que hace appsfuel (appsfuel.com), permite que se publiquen aplicaciones en HTML5 para que puedan ejecutarse desde los dispositivos móviles, aunque para ello hay que registrarse e instalar appsfuel en el móvil, algo que no es sencillo, ya que solicita varios pasos que no son obvios para la mayorí­a de los usuarios.

appsfuel

Es ahí­ donde Jorge Alvaro ha publicado Three Words A Day, un juego para móviles diseñado para aprender vocabulario en otros idiomas.

[…] solo te permite jugar a 3 palabras cada dí­a por idioma. Tienes tres intentos para traducirla de un idioma a otro, así­ que con muy poco tiempo cada dí­a vas aprendiendo y recordando vocabulario. Hay un ranking diario, semanal y global para competir con todos los usuarios.

Es el resultado de un concurso interno que hicieron en su empresa, y ha conseguido publicarlo en la web en poco tiempo, sin necesidad de pasar por la enorme burocracia habitual de aprobación de los mercados iniciales.

De momento la lista de aplicaciones disponibles en appsfuel no es muy grande, aunque seguiremos sus pasos para ver si encuentra su hueco en este mercado.

Netvibes presenta su versión para móviles

Publicado el

por Juan Diego Polo

netvibesDespués de su octavo aniversario, Netvibes sigue buscando recetas para conquistar a más usuarios que busquen una forma de agrupar información en un único panel.

Ya han divulgado formas para migrar desde iGoogle, los caminos para incluir nuestros feeds en Netvibes y ahora presentan su versión para móviles en mobile.netvibes.com.

En la aplicación podemos marcar los artí­culos como leí­dos y no leí­dos, igual que en la mayorí­a de los lectores de feeds, ayudando así­ a consultar las novedades cuando tengamos alfo más de tiempo. Es posible compartir cualquier artí­culo de forma instantánea y en cualquier lugar, así­ como consultarlos sin necesidad de conexión a Internet.

Han apostado por HTML5 en todos los dispositivos después de su actualización en iPad. Ahora todas las versiones móviles cargan en HTML5, garantizando su lectura independientemente del navegador utilizado.

Por otro lado se han concentrado en la velocidad de carga del contenido (inicio, renderizado, rotación de pantalla, etc.), en mejor soporte para Android, en ofrecer animaciones fluidas (han trabajado en la optimización de procesos de representación y la reutilización de los componentes para que la aplicación no tenga que crear instancias nuevas) y en nuevos iconos.

Los lectores en los dispositivos móviles continúan así­ su batalla particular. Los hay que prefieren soluciones como Flipboard o Google Currents, otros apuestan por algo más minimalista, como el lector de feedly o la interfaz de reeder, y ahora Netvibes quiere entrar con una solución HTML5.

Personalmente uso Reeder en iPhone y Currents en Android, aunque abriré un espacio a Netvibes para probarlo unas semanas.

Un directorio de miles de fósiles en 3D hecho con HTML5

Publicado el

por Juan Diego Polo

fosiles

Si os gustan los fósiles, como a mí­, y pasáis un buen rato rastreando en eBay en busca de piezas para ampliar la colección (os sorprenderí­a ver lo que la gente vende por ahí­, hasta cráneos de Neanderthal he visto), seguramente os interesará www.3d-fossils.ac.uk.

Se trata de un proyecto del Servicio Geológico Británico que contiene miles de imágenes de fósiles realizadas en una serie de colecciones británicas, así­ como modelos 3D de muchos de esos fósiles, modelos que podemos ver, rotar y ampliar usando HTML5 (es necesario un navegador moderno).

Después de buscar y filtrar por nombre o época, es posible visualizar el modelo tridimensional y descargar en .obj o .ply, para usarlo en el programa de escritorio que consideremos adecuado.

Aquí­ tenéis un ejemplo, con la «ventana tridimensional» en el lado derecho y los links para download bajo ella, siempre con la posibilidad de leer todos los detalles sobre la pieza en la zona izquierda, transformándose en un rico recurso académico para mentes inquietas.

Link: www.3d-fossils.ac.uk | Ví­a Mashable

Bunkr, para hacer presentaciones usando HTML5

Publicado el

por Juan Diego Polo

bunkr

La idea de Bunkr (bunkr.me) es permitir la creación de presentaciones sin necesidad de bajar información a nuestro ordenador para incluirla en pesadas diapositivas (evitar el estilo de powerpoint). Bunkr nos permite seleccionar lo que queremos presentar usando un bookmarklet, añadiendo todo el contenido (textos, ví­deos, fotos, audio, etc.) dentro de nuestra cuenta, igual que lo harí­amos con Evernote. Una vez hemos construido nuestra base de datos de información, podemos comenzar a crear las dispositivas en un espacio online, obteniendo un resultado en HTML5 compatible con todos los dispositivos.

«Adios a PowerPoint«, así­ empieza la presentación oficial en el ví­deo que os dejamos abajo. En dicho ví­deo vemos como todo el contenido que hemos recopilado se guarda en formato Pinterest dentro de nuestra cuenta. Solo tenemos que arrastrar lo que deseamos presentar para que aparezca en cada presentación, siendo posible añadir diapositivas tradicionales con textos e imágenes personalizados. Continúa leyendo «Bunkr, para hacer presentaciones usando HTML5»

easyhtml5video – Para crear ví­deos en HTML5 para nuestro sitio web

Publicado el

por Juan Diego Polo

Seleccionamos un ví­deo de nuestro ordenador, apretamos en transformar y publicamos el resultado en la web. Esos son los tres pasos que necesita easyhtml5video.com para permitirnos publicar ví­deo en HTML5 dentro de nuestras páginas web.

Se trata de un programa gratuito para Windows y Mac que vi ayer recomendado en un artí­culo de ProgramaConGoogle, una solución que podemos usar para divulgar ví­deos en nuestro sitio sin depender de plataformas como Youtube o Vimeo, aprovechando la capacidad que tiene HTML5 para reproducir audio y ví­deo desde cualquier dispositivo compatible.

html5

En la página de presentación de este programa comentan que los pasos habituales para crear ví­deos en HTML5 son: encontrar convertidores y preparar tres versiones del ví­deo (.OGG, MP4 y WebM), concentrarse en hacerse compatible con navegadores más antiguos, preparar una alternativa en flash, extraer una imagen para el panel y programar el código para sincronizar todo el tema. EasyHTML5Video facilita la tarea permitiendo que seleccionamos la imagen del panel, los codecs y la configuración en un solo paso, obteniendo el código HTML final con todos los códigos necesarios, imágenes y ví­deos.

El programa es gratuito para uso no comercial. La última versión, anunciada hace pocos dí­as, permite ajustar de forma automática el tamaño del ví­deo a la pantalla que lo reproduce, así­ como dispone de controles para ajustar la calidad del contenido visualizado.

Amazon Appstore ahora acepta aplicaciones web en HTML5

Publicado el

por Fco. José Hidalgo

Últimamente estamos viendo como las compañí­as con plataformas móviles, están facilitando herramientas y opciones para ampliar el ecosistema de aplicaciones de las mismas, donde tenemos un nuevo caso en el último movimiento realizado hoy mismo por Amazon, el cual ha empezado a dar soporte a las aplicaciones web en su programa de distribución de aplicaciones móviles.

¿Qué significa ésto? Pues que los desarrolladores tan sólo tendrán que enviar las direcciones web de sus aplicaciones web y sitios web móviles y sus metadatos al portal de distribución de aplicaciones móviles de Amazon, donde los contenidos llegarán a los clientes de Kindle Fire y Amazon AppStore como si fueran aplicaciones nativas, sin necesidad de usar software de terceros o desarrollar aplicaciones nativas para la propia plataforma.

Entre las ventajas se encuentra la posibilidad de usar la API de compras dentro de la aplicación de Amazon, con lo que además de llegar a más personas, tienen más opciones de monetización, por ejemplo, aquellas empresas de juegos que permiten vender extras dentro de las propias aplicaciones. Además, también pueden usar los servicios de la plataforma tecnológica Amazon Web Services para las necesidades que dispongan, como Amazon Elastic Compute Cloud (EC2), Amazon Simple Storage Service (Amazon S3), y Amazon DynamoDB.

Según Mike George, vicepresidente de Amazon Appstore:

Con el lanzamiento de soporte para HTML5 aplicaciones web en el Programa de Distribución de Aplicaciones Móviles, estamos dando a los desarrolladores web las herramientas que necesitan y todos los beneficios que las aplicaciones nativas ya disfrutan en la Appstore Amazon y el Kindle Fire. Esto abre nuevas posibilidades, comenzando con el descubrimiento más rápido, acceso a las herramientas para aumentar la monetización, y la capacidad de llegar a nuevos clientes para una mayor exposición.

TreSensa, Scirra, o IGN Entertainment, son algunas de las compañí­as que ya hacen uso de esta nueva opción de Amazon para ofrecer sus servicios, relacionados con los juegos, a todos los usuarios.

Enlace: Programa de distribución de aplicaciones móviles de Amazon | Ví­a: Businesswire

Code Avengers – Para aprender HTML 5, CSS3 y JavaScript

Publicado el

por Juan Diego Polo

codeavengers

Code Avengers (www.codeavengers.com) es un sitio diseñado para que sea sencillo y entretenido aprender a programar, enfocado, de momento, en HTML5, CSS3 y JavaScript y ofreciendo un sistema en el que podemos ir subiendo de ní­vel al mismo tiempo que participamos de actividades y juegos aprendiendo a programar.

Su principal objetivo es ofrecer un aprendizaje interactivo con cursos gratuitos, aunque también hay programas especiales para profesores en los que los alumnos tendrán que pagar 5 dólares por cada nivel, siendo el primero completamente gratis.

Al participar en cada curso veremos tareas que debemos realizar, un editor de código online y una página lateral que muestra el resultado de lo que vamos programando, todo dividido por secciones y con la posibilidad de detectar rápidamente lo que estamos haciendo mal.

No es la primera vez que vemos cursos gratuitos de programación en Internet. Ya hemos hablado en varias ocasiones de codecademy, codeschool, LearnStreet, udacity y treehouse, por poner unos ejemplos, aunque siempre es bueno saber que las opciones siguen creciendo, permitiendo que más y más personas aprendan a hacer maravillas dentro de un navegador de Internet.