HTML5 Elementos

Recursos que traten sobre aspectos generales del lenguaje.

[Demo] Facekat, espectacular experimento de Opera

Posted on by equintano

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

Posted on by equintano

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

Posted on by equintano

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

Posted on by equintano

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

Posted on by equintano

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

Posted on by equintano

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 Chrome. Hay 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

Posted on by equintano

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

Recursos HTML5. Pero de los buenos…

Posted on by equintano

¿Estás formándote en HTML5? ¿Estás trabajando con HTML5? ¿Quieres realizar ‘algo’ en HTML5? ¿Te han dicho que HTML5 es lo más de lo más? HTML5 Por favor!

HTML5 Please

http://html5please.us/

Este es un sitio genial, dónde aprender un montón de cosas.
Lleva la marca de los autores de  HTML5 Boilerplate, Modernizr & CSS3 Please.
Referentes a nivel mundial en esta tecnología

Podréis ver un directorio perfectamente organizado de todas las nuevas características de HTML5 y CSS3, el estado de éstas, es decir, si pueden ser utilizadas o no. También si se pueden implementar mediante polyfills, fallbacks.. o como sea. Es un conjunto de recomendaciones hechas desde el conocimiento de un conjunto de expertos en el tema…

Recomendable 100%.

Mobile HTML5

http://mobilehtml5.org/

Nos encanta el desarrollo web para dispositivos móviles, y nos encanta que se desarrollen sitios como éste. Es una recopilación del estado de implementación, en las versiones móviles de los navegadores, de las nuevas funcionalidades y API´s.

Sin duda, no has parecido un gran recurso.

Esperamos que os resulten útiles estos dos enlaces.
Hasta el próximo post!

Elementos HTML5 listos para usar

Posted on by equintano

Os dejamos una magnífica representación de las características que actualmente podemos implementar sin olvidar que no todos los navegadores o según que versión de un navegador, son soportadas o no.

HTML5 & CSS3 READINESS

Este proyecto es otro de los muchos ejemplos de HTML5 desarrollados por Paul Irish, referente a nivel mundial en HTML5. Os recomendamos que le sigáis, es un evangelista bastante activo, publica  constantemente, podéis ver presentaciones, vídeos,… Colabora en el proyecto una experta en CSS3, que también os aconsejamos seguir, Divya Manian.

Esperamos que os resulte útil. Hasta el próximo POST!

Si alguno quiere proponer profesionales a los que seguir, a través de blog´s, cuentas de twitter… esperamos vuestras recomendaciones!!

Somos autodidactas

Posted on by psotoal

¿O no? Cuántos profesionales que nos dedicamos al desarrollo front y back tenemos que invertir nuestro tiempo en formarnos en nuevas tecnologías donde la única manera de aprender es de otros programadores, de la documentación,… Pero no sólo con HTML5. Ya llevamos años en los que la evolución de los diferentes lenguajes de programación requiere que estemos en constante reciclaje. En la mayoría de los casos la formación corre a cargo de los profesionales.

Hemos llegado a un punto en el que hemos descubierto que aquello que aprendemos vale más fuera de la empresa que dentro. Por ello cada vez son más los que se deciden a emprender. Somos quienes tenemos la base del conocimiento y también en nuestros deberes se nos obligan a tener una perspectiva global de un proyecto antes de afrontarlo ,es decir, el análisis es una obligación.

Contamos con una visión de los proyectos que perfiles de gestión/administración no tienen. Parece que nadie quiere escucharnos sólo quieren tener el producto final. Muchas veces, no se admiten cambios de optimización porque no se admiten cambios en la entrega… O la situación contraria, no atienden a razones cuando hay que realizar modificaciones y la fecha de entrega no se modifica.

Después de esta reflexión, os dejamos con una recopilación de enlaces para aprender o seguir mejorando.
Numeramos esta lista, pero no es un ranking.

1. http://html5demos.com/

Es un sitio fenomenal para empezar a trabajar con las diferentes funcionalidades de HTML5. Además te indican los navegadores que soportan estas demos y puedes filtrar los contenidos por etiquetas o por navegador.

2. http://tympanus.net/codrops/

Estos programadores freelance están realizando unos ejemplos de CCS3 alucinantes, están en boca de todos. Es fundamental visitar este blog para ver todos las capacidades de CSS3.

3. http://www.html5rocks.com/en/

Un estupendo web que recopila presentaciones, ejemplos, artículos.. Un referente en esta tecnología.

4. http://html5doctor.com/

Otro referente en HTML5. Su índice de elementos HTML5 es indispensable, además de la explicación te ponen un pequeño trozo de código y un enlace a la definición del lenguaje del W3C.

Creemos que estos 4 sitios os ayudarán a empezar, a mejorar, a documentaros…
Hasta el próximo POST!