Cuando trabajamos con HTML5 surge un tema que genera dudas y que puede complicar nuestros proyectos si no lo sabemos manejar; sí hablamos de la compatibilidad y en esta nota veremos cómo resolverlo.

En notas anteriores les he contado sobre las bondades de HTML5, pero siempre queda en el aire flotando el tema: ¿qué tan compatible es este futuro estándar en pleno 2012?

En términos generales debemos decir que ningún navegador es 100% compatible con todas las características de HTML5 y CSS3. Esta regla se mantiene aún hoy y seguirá por un tiempo, hasta que se estandaricen todas sus características. Claro que en este sentido encontraremos navegadores que presentan mayor compatibilidad que otros.

Para comprender un poco mejor esto, debemos saber que HTML5 comenzó a transitar su ruta hacia la estandarización en el año 2008, con sus primeros borradores. En el 2009 algunos navegadores comenzaron a ofrecer soporte a determinadas características, aunque recién en los años siguientes encontraríamos un soporte más extendido.

Las versiones más recientes de los navegadores más populares del mercado soportan HTML5. Entre ellos: Internet Explorer 9 (muy mejorada en IE10), Firefox 9, Chrome 16, Safari 5.1 y Opera 11.60.

Varios de estos navegadores cuentan con soporte para HTML5 en versiones anteriores, especialmente las surgidas entre 2010 y 2011. En el caso de IE, las versiones 6, 7 y 8 no tienen soporte para HTML5. El primero en dar compatibilidad en esta familia ha sido Internet Explorer 9, lanzado oficialmente en el año 2011.

Una buena herramienta para saber el nivel de soporte de HTML5 es el HTML5 Test. Además de ofrecernos un puntaje global, nos indica el soporte de HTML5, ítem por ítem, del navegador que estamos usando para pasar el test.

Cómo resolver la compatibilidad con HTML5

Seguramente esta es una de las grandes cuestiones. La clave está en detectar características soportadas por el navegador. ¿Cómo es esto? Bueno, primero y principal es probable que no necesitemos utilizar todas las características de HTML5 en todos nuestros proyectos. Lo que debemos hacer, mediante JavaScript, es detectar si la característica que estamos incluyendo es soportada por el navegador.

Una librería Open Source que nos simplifica mucho este camino es Modernizr. De una forma sencilla, nos permite incluirla en nuestras páginas y comprobar la compatibilidad con el navegador.

Junto con Modernizr podemos utilizar otra librería llamada yepnope, la cual nos facilitará el trabajo de realizar nuestra estructura condicional para indicar que contenido utilizar si hay soporte HTML5 en el navegador o qué hacer en caso contrario.

Finalmente, tendremos la posibilidad de escribir nuestra solución para el caso en que no encontremos compatibilidad. En algún caso podrá ser un código JavaScript, un CSS alternativo o bien un fallback a una película Flash en el caso de video y audio. Si buscamos hacer más corto este camino, podremos utilizar HTML5 Cross Browser Polyfills. Estas librerías están basadas generalmente en HTML, CSS y especialmente en JavaScript. Dentro de las soluciones que encontraremos se destacan alternativas para audio, video, formularios, geolocalización, SVG, Canvas, Web Storage, Web Sockets, Web Workers, entre otras.

En pleno 2012, Internet Explorer 6 se encuentra prácticamente fuera de carrera. Números menores al 3% en el mercado de habla hispana son contundentes y su uso baja cada día más. Los navegadores de última generación soportan HTML5, pero ninguna en su totalidad, por lo cual es importante detectar características a la hora de usar HTML5. Finalmente, la plataforma móvil, en especial los dispositivos iOS y Android de alga gama, son una gran tentación para exprirmir HTML5 al máximo. Esto quiere decir que todo fluye hacia el mismo lugar, en otras palabras, este año tendremos un gran crecimiento en el uso de HTML5 pero …  ¡No olvidemos la compatibilidad!

por Damián De Luca
@damiande
Autor del libro: HTML 5: Entienda el cambio, aproveche su potencial.

Bueno, ya lo hemos decidido, nuestro próximo sitio será en HTML5, usaremos también CSS3 y bastante JavaScript, pero la pregunta es ¿cómo comenzar?

Ya sea por iniciativa personal o por pedido de un cliente, es muy probable que nuestro siguiente proyecto, o uno de los siguientes, involucre HTML5 y varias de sus tecnologías asociadas. El panorama es así y no podemos mirar para otro lado. Flash ya no es alternativa para desarrollo de sitios Web y HTML4 está quedando algo desactualizado para un proyecto moderno. En cualquiera de estos casos, no lo dudemos, HTML5 es el camino. Pero veamos como comenzar a transitarlo.

La primera recomendación, aunque parezca obvia, es que antes de poner manos a la obra con HTML5 es necesario comprender la naturaleza de su concepto y luego introducirnos en las características que incorpora. Leer libros y asistir a capacitaciones son opciones válidas y necesarias para dar el primer paso en este camino. Algunas técnicas empleadas en el diseño y desarrollo Web que conocimos han cambiado y debemos saber cómo resolverlas ahora.

También resulta fundamental estar actualizados constantemente. Leer artículos publicados en Internet sobre el tema y participar en comunidades, foros o blogs que hablen sobre las nuevas tecnologías son requisitos fundamentales. Además, debemos estar atentos y observar todo lo que sucede a nuestro alrededor en Internet. Nadie es una isla en esta gran telaraña.

Si ya hemos comenzado a conocer lo que es HTML5 y nos sentimos listos para crear nuestro próximo sitio, veamos algunos tips o recomendaciones que nos pueden ayudar:

– Armar, o pedir a alguien de nuestro equipo de trabajo que nos arme un borrador de lo que vamos a maquetar antes de llevarlo al código. Y no solo eso, debemos saber qué tipo de contenido irá en cada caja.

– Pensar en el significado de los elementos. La semántica es fundamental en HTML5. Por ejemplo, no debemos usar una etiqueta <h1> por el tamaño de texto que representa, sino porque es un título de máxima jerarquía. El <div> no ha muerto, pero a la hora de maquetar ahora tenemos elementos específicos como header, nav, section, article y footer, entre otros. Con estos elementos nuestra estructura será más clara y semántica.

– Comprender que HTML5 nos permite hacer algunas cosas de manera diferente a la que estábamos acostumbrados en XHTML.

– Debemos recordar que HTML5 no es estándar aún y tendremos que resolver asuntos de compatibilidad con navegadores antiguos. Si bien hablaremos en una próxima nota sobre este tema, para quienes deseen comenzar a ver soluciones, lo ideal que conozcan a Modernizr y también a los HTML5 Cross Browser Polyfills que nos ayudarán a resolver aspectos de compatibilidad.

– Probar nuestro desarrollo en diferentes navegadores (y versiones de navegadores). En HTML5 esta prueba es crucial, también si utilizamos CSS3. Aunque utilicemos Polyfills para solucionar aspectos de compatibilidad es importante probar nuestros proyectos en diversos navegadores y si es posible también en diferentes dispositivos. Dependiendo de la característica que empleemos, no será solo cuestión de verificar si se visualiza correctamente el contenido, sino también tendremos que evaluar la performance que logra, en especial si empleamos transiciones, video y/o animaciones.

– Antes de utilizar cualquier característica de HTML5 con la que no hemos trabajado con anterioridad, puede ser una buena idea, probarla por separado en primera instancia y buscar información sobre su grado de compatibilidad actual. No todas las características están en el mismo punto de evolución. Algunas son soportadas desde hace tiempo y otras aún no cuentan con un soporte completo por parte de los navegadores.

Para finalizar, me gustaría agregar que estamos en tiempos en los que hay que perderle el miedo a HTML5. Si bien está en desarrollo, hoy en día es una tecnología que se puede comenzar a utilizar en nuestros proyectos, pero lo importante es estar capacitados y realizar las pruebas necesarias sobre la compatibilidad. La revolución que propone va mucho más allá de los tags y está cambiando el modo de crear sitios y aplicaciones Web.

¡Bienvenidos al mundo de HTML5!

por Damián De Luca
@damiande
Autor del libro: HTML 5: Entienda el cambio, aproveche su potencial.

La mayoría de las personas que utilizan Internet pasan una buena cantidad de su tiempo online en Facebook; teniendo en cuenta este dato ¿porqué no comenzamos a dar nuestros primeros pasos en el desarrollo de juegos y aplicaciones para esta red social?

Imagino que para la mayoría de los que está leyendo esta nota no es necesaria una introducción sobre lo que es y representa hoy en día Facebook en el universo de Internet. Su éxito supera cualquier comentario y nos permite ir directamente al grano. Seguramente todos conocen alguna aplicación o juego que se ofrece en Facebook y, probablemente, alguna vez han pensado ¿Cómo se hace? ¿Qué tan complicado es? ¿Qué se necesita para comenzar? Veamos …

Lo que debemos saber para arrancar
Facebook cuenta con su propio lenguaje de etiquetas, conocido como FBML, sin embargo lo comenzará a dejar de lado. A partir del 1 de Enero de 2012 retirara el soporte y desde el 1 de Junio de 2012 las aplicaciones creadas con este lenguaje deberán ser reemplazadas por otras realizadas en otra tecnología, si es que el autor desea que continúen funcionado en esta plataforma. Este cambio que introduce Facebook es en favor de los estándares que toman cada vez mayor protagonismo en la Web, como el caso de HTML5, CSS3 y el ya conocido JavaScript.

Es importante saber que en Facebook podremos publicar juegos o aplicaciones desarrolladas con herramientas tales como Flash, pero también tendremos la posibilidad de desarrollar empleando otras tecnologías Web. Con el retiro de Flash para plataformas móviles, cada vez cuenta con mayor relevancia la idea de desarrollar con HTML5, CSS3, JavaScript y PHP para lograr soluciones que funcionen tanto en plataformas de escritorio como móviles.
Es importante destacar que Facebook nos ofrece el JavaScript SDK para poder acceder desde el lado cliente a la llamada de la API y también el PHP SDK, para trabajar con tecnología del lado servidor, entre otros SDK y herramientas para desarrolladores.
Es importante mencionar que en en el mercado existen algunas herramientas que nos pueden alivianar el camino de desarrollar juegos online. Además del uso de Flash, con sus opciones de exportación y de expansión mediante plugins, también hay otras aplicaciones que pueden ayudarnos en esta tarea.
GameMaker de YoYoGames es una interesante herramienta para crear juegos. La versión 2012 de GameMaker Studio, que estará disponible próximamente, nos permitirá desarrollar juegos que funcionan tanto en plataformas desktop (Windows y Mac) como en mobile (iOS y Android). Entre sus ventajas también destacamos la posibilidad de generar juegos para la Web, aprovechando el potencial de HTML5.

Por otra parte, es bueno decir que por el lado de HTML5 se están multiplicando los frameworks que permiten desarrollar juegos aprovechando las ventajas que brinda esta versión.

Publicar nuestra aplicación en Facebook
Si ingresamos en http://developers.facebook.com/ podremos encontrar las opciones que nos permiten construir para sitios web, para móviles o aplicaciones para Facebook. La primera opción nos guiará para llevar nuestro pefil de Facebook (grupo o página) a nuestro sitio Web. La segunda apunta al desarrollo enfocado en móviles y la tercera es para crear aplicaciones que trabajen dentro de Facebook.
Si ingresamos en la opción para apps de Facebook, accederemos a una guía que nos mostrará cómo trabajar con el Canvas Page de Facebook. Si optamos por este camino, además de HTML y AJAX, es recomendable contar con experiencia en el desarrollo basado en PHP, Python o Java.
Un aspecto clave para integrar nuestra aplicaciones en Facebook es comprender como interactuar con la autentificación del sitio.
En la sección “Casos reales”, podremos ver algunos ejemplos de las compañías que están presentes en Facebook con sus desarrollos.

Antes de arrancar con nuestra publicación, es recomendable primero leer la guía oficial de Facebook. Una vez cumplido este paso, podremos dirigirnos al enlace para comenzar nuestra publicación.

Espero que les haya resultado útil esta introducción y que tengan los elementos para comenzar con esta apasionante aventura.

por Damián De Luca
@damiande

El año que se despide nos ha traído noticias muy importantes y ha marcado tendencias interesantes en la manera en que se crea la Web; con todos estos cambios, la pregunta inevitable es: ¿Qué nos espera para el 2012?.

Los navegadores han sido estrellas del 2011, en una verdadera batalla por seducir el gusto de los usuarios. HTML5  ha tenido un impulso colosal y se expande por toda la Web. Adobe anunció que dejaría de crear nuevas versiones del Flash Player para móviles y que le daría un nuevo enfoque a Flash. Otro dato importante es el éxito que están teniendo las tablets y smartphones, cada vez más populares para los usuarios que navegan por Internet.

Con este panorama planteado al cerrar el 2011, se espera un 2012 en el que las plataformas desde las que acceden los usuarios a Internet se seguirán diversificando y evolucionando. Los sitios creados empleando HTML5 serán cada vez más y comenzarán a reemplazar a los que antes se maquetaban en Flash. Para comprender mejor lo que viene, vamos a analizar las tendencias punto por punto:

– Navegadores y compatibilidad: en el 2011 los navegadores han sido noticia permanente y en el 2012 prometen generar mucha tela para cortar. Aceleración por hardware, nuevas capacidades para 3D y mayor soporte para HTML5 y CSS3 serán algunas de las claves.

– La web en todos lados: la web móvil ha tenido un crecimiento exponencial en los últimos años y ahora se afianza gracias a conexiones más potentes y también en nuevos modelos tanto de teléfonos como tablets que renuevan sus características y ofrecen mayores posibilidades en cuanto a hardware. Otro aspecto a destacar en este ítem es conceptual: ahora la web debe adaptarse al dispositivo del usuario, la diversidad de pantallas y medios desde los que nos puede visitar el usuario. El mouse está dejando su trono y las interfaces táctiles comienzan a tomar el poder de la Web.

– HTML5, el nuevo rey: es el lenguaje del que todos hablan y se está reproduciendo con una velocidad supersónica en la Web. Todo diseñador y desarrollador Web debe comenzar a manejar esta nueva versión del lenguaje HTML, junto a los cambios que introducen CSS3 y a las APIs vinculadas. Las claves pasan por comprender nuevas estructura semánticas, cambios en la manera de maquetar, utilización de audio y video con soporte nativo, mayor variedad de opciones para utilizar tipografías en la Web (de la mano de @fontface) y muchas características nuevas que se están haciendo un lugar en Internet.

– Renovación en las herramientas y un nuevo mundo animado: la movida en la manera que se crea la Web, también llega de la mano de las herramientas que nos ayudarán a crear animaciones y banners sin necesidad de utilizar Flash. En este sentido, será importante renovar las versiones de nuestros programas e incursionar en nuevos software para trabajar con estas tecnologías. Las empresas y sitios más importantes del mundo ya han puesto sus ojos sobre HTML5 y también están impulsando su crecimiento.

– Integración social, un factor clave: las redes sociales marcan el termómetro de la Web. Ya no basta con el simple icono de Facebook, Google Plus y Twitter en nuestro sitio, hay que moverse más allá. Lograr una integración en tiempo real de los contenidos, optimizar la manera en que se generan y pensar cómo desarrollar herramientas que le ofrezcan al usuario una mejor experiencia en las redes sociales, un lugar donde pasan gran parte del tiempo en el que están en Internet. El desarrollo de juegos para estas plataformas también es un nicho que se puede explotar con éxito para quienes tengan conocimientos en este campo.

– El 3D ha llegado a la Web: con tecnologías como WebGL, el 3D se mete también en la Web para ofrecer una nueva experiencia al usuario. La interacción con juegos y aplicaciones desarrolladas con estas tecnologías comenzarán a crecer y marcarán tendencias en Internet.

– Capacitación, la clave es estar siempre al día: los lenguajes se renuevan y las técnicas evolucionan para adaptarse al cambio. Es fundamental estar atentos a todos los cambios que marcan el pulso de la Web, para seguir vigentes con nuestro trabajo y ofrecer a nuestros clientes un producto acorde a lo que exige el mercado actual.

El 2012 será un año en el que se afianzarán nuevas tecnologías que ya están haciendo pie en la Web y comenzarán a expandirse a paso firme. Si miramos nuestra frontera más allá del diseño y el desarrollo Web, encontraremos también posibilidades en otros lugares asociados: desde la creación de publicaciones digitales (e-books y revistas digitales) hasta el desarrollo de juegos y aplicaciones para móviles con la ayuda de soluciones como PhoneGap y jQuery Mobile. De la mano de HTML5, también comenzarán a crecer las  aplicaciones Web pensadas para trabajar offline.

El futuro es un lugar ideal para quienes tienen iniciativa y creatividad. Lo importante es estar preparados para este tiempo de evolución y cambio que están experimentando los soportes y medios digitales. Los usuarios piden cada vez más y la experiencia que debemos ofrecerles desde nuestros diseños y desarrollos debe estar a la altura de estas exigencias.

por Damián De Luca
@damiande

El rendimiento de nuestro sitio Web resulta fundamental como parte de la experiencia que le ofrecemos al visitante y, desde hace un tiempo, también se ha transformado en un aspecto relevante para el SEO.

Cuando armamos un sitio Web, es fundamental buscar el equilibrio entre lo visualmente atractivo y el rendimiento eficiente al cargar en el navegador. En esta nota veremos cómo testear la performance de un sitio y también los tips que nos ayudarán a mejorar su rendimiento.

Realizar un test de rendimiento a nuestro sitio

Existen diversas aplicaciones que nos permiten realizar un test de rendimiento de nuestro sitio. En este caso vamos a utilizar Pingdom Tools, una herramienta online que cuenta con una versión gratuita y nos ayudará a verificar el tiempo de carga de cada uno de los recursos de nuestro sitio.

Para utilizarlo no debemos descargar ni instalar ningún agregado o complemento adicional, simplemente accedemos a: http://tools.pingdom.com/fpt/.

Desde la solapa que se encuentra seleccionada por defecto (Full Page Test) podremos comenzar la evaluación de rendimiento de nuestro sitio. En el cuadro de búsqueda, debemos indicar la dirección del sitio que deseamos testear. Podemos expandir la opción Settings (ubicada justo debajo del cuadro de búsqueda). Allí podremos indicar si deseamos que el test sea guardado y también podemos establecer diferentes ubicaciones desde las que se realizará el test, para simular la prueba desde países y ciudades distintas, ya que en algunos casos puede variar el resultado según esta característica. Presionamos el botón Test Now para que comience la evaluación.

Si todo sale bien, en unos instantes obtendremos el resultado de nuestro test. Lo primero que veremos es el tiempo de carga de la página que hayamos indicado (por defecto si ponemos la raíz del sitio, será la página principal).

Debajo tendremos todo el análisis de los archivos que se cargan junto con la página solicitada. Podremos ver el momento y el tiempo de carga y también si existe un error. Lo bueno de esto es que tendremos la posibilidad de encontrar si existe algún recurso que provoca una demora excesiva en la carga y, en base a eso, tomar la determinación de optimizarlo. Esto puede ser desde un script, hasta una imagen que resulta demasiado pesada.

Si bien la versión gratuita puede ser muy útil, vale la pena comentar que Pingdom también cuenta con servicios pagos que ofrecen algunos beneficios para test más avanzados: http://www.pingdom.com/.

Browser Mob también nos ofrece opciones para realizar pruebas y monitoreo de nuestro sitio. En el sitio Web encontraremos tanto opciones free como pagas. Dentro de las alternativas gratuitas se destaca un test que nos permitirá chequear y obtener datos de performance y carga de recursos de nuestro sitio.

Tips para mejorar la performance

Después de hacer el test, seguramente desearemos mejorar el tiempo de carga de nuestra página, a continuación vamos a analizar una serie de tips que nos ayudarán con esta tarea:

– Optimizar las imágenes: revisar si estamos usando el formato adecuado según la necesidad: JPG nos ofrece diferentes opciones de compresión para fotografías con baja pérdida pero no permite transparencia, GIF es una opción para imágenes con paletas de 256 colores (permite transparencia) y PNG nos ofrece opciones para imágenes de 8 bits o 24 bits de color con soporte para transparencia.

– Usar sprites: esta técnica nos permite agrupas imágenes en una sola y mostrar la que deseemos mediante su posición empleando CSS ¿Cuál es la ventaja? Muy simple, reducimos drásticamente la cantidad de peticiones al servidor y esto resulta determinante para mejorar la performance de carga.

– Escribir código limpio: “código es poesía”, por esta razón una estructura limpia y sin errores de código beneficiará la interpretación y el tiempo que demora el navegador en mostrar la página.

– Evitar el uso de scripts innecesarios o poco útiles: siempre debemos pensar en función a lo que necesita el sitio y no solo en “lo que queda buenísimo”. Nuestro sitio debe ser funcional y estéticamente atractivo, pero no debemos abusar de recursos que no suman demasiado y que nos quitan rendimiento.

¿Más recomendaciones? Piensen el sitio antes de ponerse a escribir el código. Tengan una mirada amplia sobre todo, más allá de lo visual, piensen también en el rendimiento. Un sitio que carga lento y resulta pesado para navegar es una invitación perfecta para que el usuario se vaya para otro lugar.

por Damián De Luca
@damiande

Hoy en día, la mayoría de los diseñadores y desarrolladores Web han oído hablar de HTML5 y CSS3, las nuevas versiones de los lenguajes que nos permiten construir sitios Web.

A la hora de aprender, buscar información y capacitarse, surge una pregunta inevitable ¿cuáles son las mejores herramientas para trabajar con HTML5 y CSS3?

En esta nota veremos un excelente listado que nos mostrará las mejores soluciones para trabajar con las nuevas tecnologías que están cambiando la manera de hacer la Web:

Sencha Animator: ¿estaban buscando la opción para crear animaciones al estilo Flash, pero que sea compatible con navegadores de escritorio y móviles? Sencha animator es la herramienta que marca un camino en la creación de animaciones interactivas, utilizando HTML+CSS+JavaScript. Este software nos trae una interfaz que nos brinda gran comodidad para trabajar con objetos que se pueden ubicar de manera intuitiva en un escenario. También encontraremos dentro de esta aplicación un Time Line que ofrece gran versatilidad para animar nuestros proyectos. Sencha Animator es una aplicación paga, pero se puede obtener una versión de prueba ingresando en: http://www.sencha.com/products/animator/download/. Este software tiene versiones para Windows, Linux y Mac OSX. Debemos crear una cuenta para acceder en el foro de Sencha, que nos habilitará  los 30 días de prueba de la versión trial de esta aplicación (el programa nos pedirá que ingresemos estos datos al acceder).

Adobe Dreamweaver: desde la versión CSS5.5 de esta herramienta de Adobe, encontramos soporte nativo para HTML5 y CSS3. Tendremos asistencia para escribir con sugerencias de código y marcado con color para HTML5. Desde las opciones de plantillas, nos permite crear un layout para HTML5 tanto a dos como tres columnas, de manera predeterminada. Esta versión también nos brinda la comodidad de aplicar estilos CSS3 desde el panel CSS. Dreamweaver es una aplicación paga, pero podemos acceder a un trial por 30 días ingresando en: http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=es_es.

Aptana Studio 3: famoso entorno de desarrollo Open Source que cuenta con versiones para Windows, Linux y Mac OSX . Permite trabajar con los lenguajes más populares del desarrollo web actual, entre ellos HTML, CSS, JavaScript, PHP, Python y Ruby, entre otros. En sus últimas versiones ha incorporado también la posibilidad de trabajar con HTML5 y CSS3. Se puede obtener más información y acceder a las opciones de descargar ingresando en: http://aptana.com/products/studio3.

CSS3.0 Maker: esta herramienta es completamente gratuita y funciona en línea, lo cual nos brinda una solución independiente de la plataforma en que estemos desarrollando y sin necesidad de descargar ningún software adicional en nuestro sistema. Podemos acceder a esta aplicación online ingresando en http://www.css3maker.com/. Allí encontraremos opciones muy cómodas para genera código CSS3. Entre las características con las que podremos trabajar encontramos: bordes redondeados (Border Radius), degradados (Gradient), transformaciones (CSS Transform), animaciones (CSS Animation), transiciones (CSS Transition), colores RGBA, sombreado para textos (Text Shadow), sombreado para cajas (Box Shadow), rotación de texto (Text Rotation) y uso de tipografías (@Font Face). Además de una interfaz de trabajo muy ágil, también encontraremos información sobre la compatibilidad que cada característica tiene con los navegadores actuales, tanto en plataformas desktop como mobile.

CSS3 Generator: con una interfaz muy simple y fácil de aprender a utilizar, en pocos minutos, esta herramienta online nos permitirá crear código CSS3, sin necesidad de ser expertos en la materia. Compatible con las principales características del nivel 3 de CSS, nos da una mano invaluable a la hora de tener que trabajar con los nuevos estilos de la Web. Desde uso de sombras y columnas múltiples, hasta transiciones y transformaciones, todo lo encontraremos en esta herramienta que vale la pena probar. Vale desatcar que CSS3 Generator es una herramienta online gratuita y su sitio web es: http://css3generator.com/.

Bonus Track, Adobe Edge, lo que viene: Adobe está trabajando en una nueva herramienta que permite crear animaciones utilizando las ventajas de HTML5, CSS3 y JavaScript. Su nombre es Edge y se encuentra actualmente en desarrollo. Para obtener la versión preliminar y probar este software, podemos ingresar en: http://labs.adobe.com/technologies/edge/.

Hoy comenzó el primer día de la Google Developer Day en la sede de la UCA en Buenos Aires.

Todavía no es estándar, pero cada vez más desarrolladores ponen sus ojos sobre sus ventajas: la era de HTML5 ha comenzado y no nos podemos quedar afuera.

La web crece y se expande con una velocidad que nos sorprende día a día. Sin embargo, el lenguaje HTML, piedra fundamental sobre la que se apoyan todos los sitios Web, utiliza una versión del estándar que fue publicada hace más de una década.
HTML 4.01 fue promovido, como recomendación del W3C, en Diciembre de 1999. Con la evolución que ha tenido la Web, la modernización se transformó en una necesidad inevitable y HTML5 surgió como respuesta.
El gran tema aquí es que el proceso de estandarización lleva varios años hasta lograr su forma definitiva. Es por esta razón que HTML5 será estándar recién en el 2014.
La pregunta que puede pasar por la cabeza de muchos diseñadores y desarrolladores Web es si es el momento de comenzar aprender esta nueva versión del lenguaje. La respuesta es clara y no necesita rodeos: sí, es el momento ideal para comenzar a familiarizarse con esta nueva versión de HTML, porque ya ha comenzado a ser aplicada en diversos proyectos.
Para comenzar a comprender el cambio, simplemente debemos observar que las principales empresas enfocadas en el desarrollo de herramientas para programación y diseño Web han comenzado a actualizar sus aplicaciones o, incluso, lanzar nuevas herramientas que incorporan características que permite trabajar con HTML5 y CSS3 (el otro estándar que está llegando para cambiar la Web).
En lo que se refiere a navegadores, todos están implementado soporte a diversas características de HTML5 y CSS3 en cada una de sus actualizaciones. Esto está permitiendo que el desarrollo de sitios Web que aprovechan estas características sea cada vez más amplío. Son muchas las empresas que están modernizando sus sitios para incluir las nuevas posibilidades que introduce la versión 5 del lenguaje HTML.
Hay una frase que representa a HTML5 de cuerpo entero: “I’ve seen the future. It’s in my browser” (“He visto el futuro. Está en mi navegador”). Como mencioné al principio de esta nota, la cuestión es que en Internet el futuro llega demasiado rápido y no nos da tiempo ni siquiera para actualizar el navegador. Así de veloz ocurre todo y no podemos dejar de subirnos, porque el ritmo no se detiene.
Siempre ha existido la necesidad de aprender y mantenerse actualizado con las técnicas de creación de sitios, pero hoy esta exigencia se percibe de una manera mucho más marcada. Estamos en una etapa de cambio en la manera en la que se construye la Web y HTML5 es el actor protagónico de esta película.
En próximos artículos seguiremos ampliando sobre este nuevo estándar y las tecnologías asociadas que ya han comenzado a cambiar el aire que se respira en Internet
Y para aquellos que deseen saber más y comenzar a aplicar HTML5 en sus proyectos, ya salió el libro HTML 5: Entienda el cambio. En esta obra, hago una recorrida por todos los secretos de este lenguaje y cómo comenzar a aplicarlo en nuestros sitios.

Por: Damián De Luca
E-mail: ddeluca@redusers.com
Twitter: @damiande

Bio:
Docente, consultor y especialista en desarrollo web, con amplio conocimiento en XHTML, HTML5, CSS, AJAX y PHP, entre otros lenguajes y tecnologías.
Escribió los libros “101 Secretos de Vista”, “Hardware Extremo” y “Webmaster Profesional”. Ha colaborado como editor de libros y revistas publicadas por esta Editorial.

Este libro presenta la fusión de dos de las herramientas más populares para el desarrollo de aplicaciones web de la actualidad: PHP y MySQL. En sus páginas, el autor nos enseñará las funciones del lenguaje, de modo de tener un acercamiento progresivo, y aplicar lo aprendido en nuestros propios desarrollos.

Datos del libro:

Autor: Francisco Minera
ISBN: 978-987-177-316-9
Páginas: 432
Impresión: Blanco y Negro

Preview Digital:

¡Hola! Como comenté al presentarme en mi post anterior, compartiré en este espacio algunas noticias sobre la plataforma Microsoft. En particular, hoy les traigo interesantes novedades sobre desarrollo Web.

El desarrollo de sitios Web es una artesanía con desafíos particulares. Un desarrollador Web maneja al menos 4 lenguajes de programación o marcado (HTML, CSS, Javascript, más lo que corra en el servidor), participa en equipos multidisciplinarios (diseñadores, administradores de contenidos, usuarios, etc.), debe asegurarse que sus aplicaciones se vean y ejecuten correctamente en los diferentes navegadores disponibles y, como si esto fuera poco, también debe velar por la seguridad del sitio, responder rápidamente a los cambios solicitados por los usuarios y en muchas ocasiones administrar la infraestructura.

La semana pasada, Microsoft publicó una nueva herramienta de desarrollo orientada a facilitar la tarea de crear y publicar sitios en la Web, con una fuerte integración con diferentes plataformas Open Source: WebMatrix.

Paso a contarles…

WebMatrix es una herramienta liviana, siendo una descarga gratuita de sólo 7MB, y disponible en español. Dentro de los 7MB de WebMatrix, vamos a encontrar un servidor Web, un motor de base de datos y sus herramientas de administración, un editor de código fuente y una plataforma completa de desarrollo. Todo integrado dentro de la misma herramienta.

WebMatrix está especialmente diseñado para aquellos equipos que trabajan con clientes que requieren una solución Web y que frecuentemente basan sus desarrollos en plataformas Open Source tales como WordPress, Joomla! o DotNetNuke. Por ejemplo, al crear un sitio nuevo, podemos  comenzar nuestro desarrollo basado en algo que ya teníamos hecho en Joomla! y WebMatrix se encargará de bajar la última versión de la página oficial de Joomla!, identificar las dependencias (PHP y MySQL en este caso), descargarlas e instalarlas de manera que sólo nos quede correr nuestro nuevo sitio y continuar desarrollando. Todo esto sin tener que invertir tiempo en configurar cada tecnología.

Al terminar nuestro desarrollo, WebMatrix también facilita la publicación del sitio en un servicio de Hosting sobre plataforma Windows con sólo un click. Si no contamos con un Hosting contratado, WebMatrix nos mostrará un listado de Hosters disponibles donde podremos encontrar desde ofertas a menos de 3 dólares por mes, hasta diferentes servicios disponibles en tu país.

Para quienes somos desarrolladores Web y trabajamos con diferentes tecnologías, es realmente muy interesante ver la evolución que ha tenido IIS en su soporte a diferentes tecnologías, incluyendo PHP. Por otro lado, herramientas como WebMatrix ofrecen una gran productividad. Para ver un ejemplo de cómo crear un sitio paso a paso, les comparto mi post publicado en ComunidadJoomla!.

Junto a WebMatrix, Microsoft lanzó todo un nuevo conjunto de tecnologías que componen la plataforma Web, las cuales podremos ir abarcando en futuros posts.

Los invito adescargar y probar WebMatrix y acercarme sus comentarios y opiniones.

Saludos!
Miguel
http://twitter.com/masaez

http://blogs.msdn.com/masaez
Todos los post de Miguel Saez en RedUSERS
CES 2011: Microsoft lo vive con la intensidad de siempre