[Demo] Facekat, espectacular experimento de Opera

Hace poco Opera publicaba su site: Shiny Demos. En esta responsive web (comprobarlo cambiando el tamaño de la ventana) podemos ver varios ‘abrebocas’, demos que muestran el potencial conjugando lo mejor de los navegadores, HTML, CSS y Javascript.

Opera está ganando peso, es decir, la batalla que se libra entre los fabricantes de navegadores desarrollando sitios como el que comentamos, o Chrome Experiments, o  IE10 Test Drive, o DemoStudio de Mozilla… A la comunidad de desarrolladores este empujón nos viene fenomenal. Encontramos sitios de referencia que mostrar, son demos que esperan que probemos, analicemos, copiemos, adaptemos… etc… Hay que aprender, y con tanta demanda en el mercado y el exagerado crecimiento previsto en Mobile, hay que aprender rápido.

Facekat

Ya conocemos lo que es Kinect, el sensor de la video consola XBox.
Muchos desarrolladores han creado brillantes interfaces controladas a través de movimientos del cuerpo detectados con Kinect.

Sin embargo, aún no todos tenemos un dispositivo de estos en casa y no es fácil desarrollar algo que no puedes probar.

Read More

[VIDEO] HTML5 Mobile: Desarrollo de apps móviles

El pasado Martes 12 de junio realizamos nuestra primera reunión.

Agradecer a Mirai España su apoyo al grupo, toda su colaboración en la organización de este evento y poder disfrutar de sus magníficas instalaciones en el centro de Madrid.

Óscar Antón realizó una estupenda ponencia sobre el desarrollo de aplicaciones móviles en HTML5. Pudimos aprender sobre dispositivos, frameworks, CSS3, .. Tenéis todos los archivos en el blog de Molecularts, donde nos quedamos con esta frase de nuestro primer ponente:

“Espero que esta presentación sirva de introducción y aclare algunas dudas, nosotros la hemos basado en nuestra experiencia, pero siempre se puede ampliar ya que el desarrollo con HTML5 en Mobile no para de evolucionar día tras día.”

Gracias por compartir con todos nosotros tu experiencia!

La duración es de unos 45 minutos… Hemos fragmentado el vídeo en cuatro partes, esperamos que os guste y que le saquéis partido a estos recursos 🙂

Puedes descargarte todos los recursos desde Molecularts.

Screencast: Desarrollo de aplicaciones para Android con Phonegap y jQuery Mobile

Gracias a Óscar Mingorance (a.k.a. @oscaranton) de Molecularts por compartir un Screencast sobre “Desarrollo de aplicaciones para Android con Phonegap y jQuery Mobile”.

Seguro que será un refente para el aprendizaje sobre el desarrollo de aplicaciones móviles en HTML5.

Aquí tenéis todos los contenidos:
Screencast, Desarrollo de aplicaciones para Android con Phonegap y jQuery Mobile | Blog | Molecularts | HTML5, Diseno Web, Moviles, Marketing, Arte y Creatividad.

Pronto os traeremos nuevas noticias!

Desarrollo de Videojuegos con Javascript y HTML5

bannerMAIL
Hola! Queremos compartir con vosotros esta estupenda presentación de Sergio Ruiz (@serginator) y Carlos Benitez (@etnassoft) que han realizado para Madrid JS. 

“Creación de Videojuegos en Javascript” así se ha titulado la charla. Por supuesto, además de ver código y explicarnos cada detalle del sencillo juego de ejemplo, han aportado muy buenas referencias y recursos sobre programación, testing, técnicas.. Nos han hablado sobre Editores de niveles, han enfocado y detallado muy bien los componentes para el desarrollo de un videojuego. Y ha gustado mucho, la introducción y las referencias sobre IA, gracias Carlos! Y por supuesto a Sergio por compartir!

Sergio se ha comprometido a crear un repositorio en github para poder jugar con la base, y a partir de ahí hacer una competición y colgar todos los juegos presentados en un directorio,….  Nosotros ya estamos nerviosos, y habrá sorpresas, así que ir viendo con que herramientas, frameworks, … contamos para ir creando videojuegos que se va a liar parda en los próximos meses…

Respecto al desarrollo de videojuegos, hemos de decir, que aquellos que habéis desarrollado con ‘sprites’ en CSS (tutorial básico), esto os va a resultar divertidísimo!!! 😉

Que lo disfrutéis!

Integrando OpenLayers con el elemento

Un post muy interesante sobre el uso de OpenLayers y el elemento Canvas.

Geo-Mobile Blog

NOTE: take a look at updated solution

In an earlier post we showed how HTML5 Canvas could be used on mobile browsers. Although the example showed a map image, it was just that – an image rather than a web mapping app like Google maps or the popular open source OpenLayers. Getting canvas to work on a mapping application like Google / OpenLayers is somewhat more complicated as the map consists of dozens of image tiles, some within the view port, and others out of view but already cached in the DOM so that a smooth transition without page reloads is possible when a user pans around, creating a nice “slippy map” effect.

In this post I show how we tackled the problem of integrating HTML5 canvas into the Openlayers framework. We already posted on using OpenLayers  on mobile browsers and how to make  touch gestures rather than mouse…

Ver la entrada original 851 palabras más

Demos HTML5: Web Notifications

En esta ocasión os vamos a mostrar con un sencillo ejemplo de lo que podremos hacer con las Notificaciones Web.

Esta demostración emplea la funcionalidad específica window.webkitNotifications. De todos los navegadores Webkit, actualmente sólo es soportado por Google ChromeHay que tener en cuenta que esta nueva API es un borrador de la especificación y está sujeto a cambios, podéis consultarla aquí. Además de 

Read More

Demos HTML5: Page Visibility API

Os queremos enseñar este nuevo API que nos ha resultado bastante interesante.

El API puede ser empleado para comprobar cuando una página o pestaña del navegador está visible o no. Esto incrementa la usabilidad de un sitio, podríamos implementar esta funcionalidad por ejemplo en estos casos:

– En un sitio que cuenta con un carrusel de imágenes en el que no se debe avanzar a la diapositiva siguiente, a menos que el usuario está viendo la página.
– En una aplicación con un panel de control que no debe buscar actualizaciones en el servidor si el usuario no está visualizando la página.
– En una página donde se quiera detectar cuando está siendo representada y así poder mantener un contandor de páginas vistas.

Recuerda: Esta demo requiere de un navegador moderno como Google Chrome (v13 y superiores) que soporta ya el nuevo API Page Visibility.

 

 

VER DEMO