24 recursos HTML5. Artículos, recursos, navegadores, demos, formación, eventos…

Estamos viendo estos últimos meses la actividad que se está generando en torno a HTML5 y os traemos con un nuevo y refrescante recopilatorio de los últimos recursos más interesantes que han ido apareciendo en las últimas semanas…

Destacamos

Appliness. «La primera revista digital para desarrolladores de aplicaciones web» HTML5, Javascript, jQuery, Backbone, phoneGap.. | Ver

Meteor, un nuevo framework para desarrollar apps (no hemos podido bichear mucho… ) | Ver

Read More

12 recursos imprescindibles para aprender HTML5

Muchos estáis preguntando que con tanta información, cómo se aprende o cuáles son los mejores recursos, los mejores libros, los mejores webcast…
Hay muchísima información al respecto, pero a nuestro entender en este listado están representados los sitios de referencia, ya que en la mayoría de sitios los contenidos están generados por los auténticos players y responsables de la definición de las nuevas tecnologías de desarrollo Web.

Dive into HTML5

http://diveintohtml5.info/

This free online book by Mark Pilgrim covers a handpicked selection of interesting features of HTML5.

Its definitely one of the best sources for beginners.

HTML5 Rocks

http://www.html5rocks.com/

Knowledge collection maintained by the google folks, including a playground, presentations, samples and tutorials.

20 Things I Learned (About Browsers And The Web)

http://www.20thingsilearned.com

This HTML5-Book (well, its made in HTML5) covers the basics of networking, the web, browsers and as well HTML5.

Read More

HTML5+JS Mobile Frameworks

Gracias a la explosión de ‘microlibrerías’, ‘librerías’ y frameworks que tenemos a nuestra disposición una estupenda manera de empezar a aprender y conocer el entorno en el que tenemos puestas todas las miradas. No deberíamos generar mucha controversia respecto al desarrollo de aplicaciones nativas. No son malas. El mercado de las aplicaciones móviles tiene mucho que enseñarnos y no nos engañemos, Apple, sus revolucionarios dispositivos, su Store y sus aplicaciones son el punto de partida de muchos de nosotros. Ellos han sido quienes han marcado las pautas, y serán el modelo a seguir para muchos.

No tratemos de vender ‘Responsive Design’ como una marca propia, y hacerle pagar al cliente, eso está feo. Este término viene a ser cómo cuando se acuñó el termino ‘AJAX’ 😉

¿Qué herramientas deberías ir descargando para ir probándolas, ir aprendiendo, ir testeando, … ? A continuación tenéis un pequeño listado de recursos que os ayudarán a conseguir estos objetivos. Es el comienzo, por supuesto, hay más mucho más…

Mobile Frameworks/Libraries/Plugins

Read More

10 recursos que te acercarán a las tecnologías HTML5

El primer trimestre del año ha estado muy agitado. Buenas noticias, en cualquier caso. Y lo mejor está por llegar!!!
En esta publicación haremos un repaso por los recursos que a nuestro entender resumen la evolución de estas nuevas tecnologías, gracias al impulso de grandes empresas que al menos conocemos todos aquellos que nos dedicamos a esto, y colegas, compañeros y reconocidos profesionales que se empeñan en dejarnos en evidencia al resto de los mortales… ;))

Frameworks / Librerías / Templates

jQuery Transit es un conjunto de métodos para emplear transiciones y transformaciones CSS3 con jQuery.
La página está plagada de ejemplos, con el código correspondiente. Y el autor Rico Santa Cruz (a.k.a. @rstacruz ) ha publicado el repositorio del proyecto en gitHub.

 

Ayer Yahoo! anunció que Mojito ahora es open source, y publicaron el proyecto en gitHub (estimados y estimadas, gitHub es una fuente inagotable de recursos!)

¿Qué es Mojito? Pues bien es Mojito es un framework MVC de desarrollo  basado en YUI 3 que nos permite el desarrollo ágil de aplicaciones Web. Si, aquellas que vendrán a competir con las App nativas.
Mojito permite a los desarrolladores escribir componentes del lado del cliente y el servidor en el mismo lenguaje (Javascript) usando el mismo framework.  Han incluido soporte la internacionalización, testing y documentación de los proyectos.

Al ser Javascript, nuestras aplicaciones pueden ejecutarse en el lado del cliente a través del navegador, o bien, en el lado del servidor con Node.js.
Mojito forma parte de un plan de Yahoo! para situarse en el mismo plano en el que están Mozilla, Google, Opera, Microsoft,…
Os dejamos este interesante artículo de Bruno Fernández-Ruiz (Fellow & Vice President at Yahoo!, Founder at Olympum… a.k.a. @olympum) publicado el mes pasado en CNET: Why ambitious developers need more than just HTML5.

 

Initializr es un generador de plantillas HTML5 que te ayudará a comenzar un proyecto basado en  HTML5 Boilerplate.

Es una estupenda manera de aprender y descubrir nuevas formas de desarrollo. Os recomendamos comenzar por la versión de Responsive (porque tenemos que ponernos las pilas con el desarrollo Mobile), el que tenga más recorrido y haya empleado ya Bootstrap de twitter, pues que se descargue la versión con Bootstrap, es genial! Pronto publicaremos una entrada dedicada a estos proyectos de plantillas HTML5. Si te ves muy perdido, y no tienes claro el tema de qué archivos necesitas o no entiendes que es algo, empieza por lo básico, pero empieza… 😉

 

Modernizr es una librería Javascript, (puedes incluirla en Initializr). La función es la misma que otros proyectos similares, facilitar a los desarrolladores una plantilla, en este caso una librería para emplear nuevas funcionalidades. Nosotros recomendamos emplear Initializr, o bien, ir a HTML5 Boilerplate y seguir su paso a paso, es muy fácil perderse leyendo documentación, descubriendo librerías de javascript… un gran recurso para aprender HTML5.

Read More

20 enlaces a recursos HTML5. Artículos, frameworks, demos…

Bueno, aquí estamos de nuevo, en esta ocasión os traemos una serie de enlaces.
Vamos a retroceder un poco, para tratar de hacer un repaso de lo que tenemos a nuestra disposición, recursos para seguir aprendiendo, personas importantes e influyentes que se debería seguir, ejemplos y demos alucinantes, … intentaremos que haya un poco de todo. Si queréis podéis mandar o proponer más recursos! Qué sabemos que tú tienes más enlaces ;))

Aprendiendo

The Web platform: Browser technologies.Este proyecto, es una referencia imprescindible para conocer el ecosistema de la plataforma Web ‘moderna’. Cada una de las tecnologías van enlazadas a sus respectivas definiciones, tanto en la W3C como de la WHATWG y la IETF, las cuáles deberías ir conociendo. Aquellas especificaciones de nuevas etiquetas, funcionalidades y características que más avanzadas están, han sido vinculadas al proyecto «When can I use… «, dónde se detallan el soporte de las distintas versiones de navegador dónde ya se han implementado. Otras características son los vínculos a test, o a la «Mozilla Developer Network Reference«.

When can I use… Son un detallado conjunto de tablas de compatibilidad para el soporte de HTML5, CSS3, SVG y más, tanto en navegadores de escritorio y móviles.

El Centro de HTML5. Este site ha sido producido por Microsoft y SourceForge y encontraréis un montón de recursos, artículos,… sobre la tecnología.

Read More

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

Evento (hoy!): Mejora el posicionamiento de tu web con HTML5

Dentro del evento «Salón MiEmpresa», hoy 15 de Febrero de 12:00 a 12:30, tendremos la oportunidad de escuchar a Jorge del Casar hablar sobre: Mejora el posicionamiento de tu web con HTML5 en el Laboratorio de Prácticas. En este taller veremos cómo puedes ayudar a los buscadores indicándoles las partes principales de tu web, los contenidos adicionales, eventos, artículos y otros tantos contenidos aportándoles un valor semántico.

Si no podéis llegar, trataremos de sacarle a Jorge el contenido para compartirlo con todos vosotros. 😉
Saludos! 

Nueva web!

Ya hemos publicado la primera versión de nuestra web!

Por supuesto en HTML5 y con la librería de javascript impress para realizar las animaciones entre las secciones.. si queréis darnos vuestro feedback o realizar sugerencias para crear nuevas secciones.., podremos mejorar la web para la comunidad…

Imagen

Recursos HTML5. Pero de los buenos…

¿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 BoilerplateModernizr & 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!