Yo suelo poner el acento en el motor de renderizado y en el de JavaScript, para ayudar a los alumnos a que entiendan las sutiles “diferencias entre cada uno”. Me gusta explicar que no es que no se adaptan al estándar dino que simplemente “tienen una manera distinta de ver la vida”

La diversidad entre los navegadores se ha incrementado en el último tiempo, especialmente porque a la variedad de navegadores de escritorio se ha sumado el mundo mobile, con una importante cantidad de navegadores que debemos testear, si buscamos que nuestros proyectos funcionen diez puntos en móviles.

Lo importante que debemos saber, como punto de partida para comprender a los navegadores, es que los browser tienen muchos puntos en común en su estructura interna, aunque que cuenten con algunas implementaciones distintas a la hora de representar los contenidos. Todos parten de la misma base y nos puede ayudar mucho a conceptualizar el tema comprender eso. Un excelente artículo sobre esto es el que ha sido publicado en HTML5 Rocks, escrito por Tali Garsiel y Paul Irish, titulado How Browsers Work: Behind the scenes of modern web browsers.

Para quienes busquen un poco más, una herramienta que recomiendo para probar compatibilidad con HTML5 es justamente HTML5 Test. Por el lado de CSS3 tenemos el CSS3 Test, otro gran aliado para probar y ayudarnos a encontrar compatibilidad.

¿Te interesa  capacitarte en desarrollo Web? ¿Te gustaría saber más sobre como lograr compatibilidad cross browser para tus proyectos? Estés en el lugar donde estés, puedes contactarme.

¿Qué es esto? En palabras sencillas, son sistemas de gestión de base de datos que no utilizan el modelo relacional clásico, ni emplean el lenguaje SQL para realizar las operaciones.

¿Porqué el cambio? Porque el mundo ha cambiado. Porque la necesidad de grandes flujos de información para millones y millones de usuarios en tiempo real ha colapsado al modelo relacional y empresas como Google, Facebook Twitter o Amazon necesitaban otra respuesta para sus necesidades.

¿Las bases de datos relacionales han muerto? No, definitivamente no han muerto, pero ya no son útiles para determinados proyectos y es por eso que surgen las NoSQL.

¿Debo aprender a usar las bases de datos NoSQL? La respuesta es un gran depende. Para los que recién se inician en el mundo del desarrollo Web, puede ser recomendable arrancar con el aprendizaje clásico de base de datos relacionales y el lenguaje SQL para que una vez que se tenga claro este concepto poder pasar a lo nuevo. Tengamos en cuenta que las bases de datos relacionales aún hoy son perfectamente aplicables para muchos proyectos. Para quienes tiene experiencia en el mundo del desarrollo Web y están frente a la necesidad de emprender proyectos que tengan un gran flujo de datos en tiempo real y estén disponibles para una multitud de usuarios, comienza a ser buena idea darle una mirada a las bases NoSQL y analizar si pueden ofrecer una solución más clara a los desafíos que se nos presentan.

¿Ejemplos de bases de datos NoSQL? Podemos encontrar diferentes categorías. Entre las que se conocen como clave valor tenemos BigTable (Google), Dynamo (Amazon) y Project Voldemort (LinkedIn). En el rubro Bases de datos documentales se destacan MongoDB y CouchDB.

¿Quieren saber más sobre el tema? Les recomiendo leer el artículo El concepto NoSQL, o cómo almacenar tus datos en una base de datos no relacional (de Genbetadev) y NoSQL (en Wikipedia en inglés).

¿Te interesa  capacitarte en desarrollo Web? Estés en el lugar donde estés, puedes contactarme.

Desarrollado originalmente por Nitobi, PhoneGap ha sido adquirido por Adobe y ha sido integrado en las últimas versiones de Dreamweaver. Además está disponible en formato de plugin para diferentes programas, como el caso de Eclipse o como template para Xcode en Mac. Claro que también existe la opción del SDK. Es importante destacar que si bien Adobe está trabajando con herramientas para facilitar el uso de Phonegap, el código ha sido entregado también a la Fundación Apache para que se mantenga como Open Source. Este proyecto en la Fundación se encuentra bajo el nombre de Apache Cordova.

PhoneGap cuenta con una librería JavaScript que nos da una API de funciones que nos permitirá potenciar lo que nos ofrece el navegador. Es decir, podremos tener funcionalidades más allá del estándar para acceder, por ejemplo, a alguna opciones del sistema. Dentro de lo que es PhoneGap, también encontraremos librerías nativas que funcionan como una especie de “puente” entre el código JavaScript y cada una de las plataformas nativas, esto les da a los desarrolladores un elemento extra para ir un paso más allá con sus aplicaciones y saltar limitaciones impuestas.

Si lo que deseamos es evitar tener que descargar e instalar aplicaciones o plugin en nuestro sistema, contamos con la opción de PhoneGap Build. Este servicio en la “nube” nos brinda una opción gratuita  (infinitas aplicaciones públicas pero solo una privada) y otras alternativas de pago con mayores beneficios para desarrolladores. Si nos registramos para utilizarlo, veremos lo sencillo que es crear aplicaciones para diferentes plataformas móviles desde un mismo lugar y sin obligación de aprender el lenguaje nativo de cada una de ellas.

En conclusión, si sabemos trabajar con HTML5 + CSS + JavaScript y aprendemos a utilizar todo lo relacionado con PhoneGap, podremos crear aplicaciones que se comportarán como apps nativas en diferentes plataformas móviles. Lo que deberemos tener en cuenta es que si bien PhoneGap nos permite crear aplicaciones que se comportarán como nativas en cada una de las plataformas móviles, este producto se apoya también en el motor de render del navegador principal de cada una de estas plataformas. Esto en parte, nos puede dar alguna diferencia entre las plataformas y también algunas características que deberemos tener en cuenta. Por esta razón es importante leer la documentación de PhoneGap, que es muy completa, y nos permitirá saber que cosas podremos utilizar con confianza en cada una de las plataformas que elijamos compilar.

Para finalizar, vale destacar que, a pesar que existen diferentes herramientas y/o plugins para utilizarlo, Phonegap es gratuito y Open Source. Su sitio Web es: http://phonegap.com/.

¿Te interesa  capacitarte en desarrollo Web? Estés en el lugar donde estés, puedes contactarme.

La evolución en la construcción de los sitios Web nos ha llevado también a comprender la importancia del SEO. Siempre les digo a mis alumnos: “De nada sirve un sitio hermoso que nadie visita”.

La mayoría de nosotros ya conocemos las reglas básicas para que un sitio HTML/XHTML tenga una estructura “amigable” para ayudar a que el rastreo de los robots de los buscadores sea más eficiente. Pero a esto debemos sumarle lo que nos agrega HTML5. Algunos se preguntan si este factor comienza a ser relevante y los últimos datos relacionados con este tema, parecen guiñarle el ojo a HTML5. Y esto se convierte, a su vez, en otra razón de mucho peso para comenzar a aprender HTML5 ahora.

¿Por donde empezar? La respuesta es sencilla: semántica. A esta altura del siglo XXI ya podemos comenzar a trabajar con maquetas que empleen los elementos estructurales semánticos de HTML5. Esto quiere decir que podemos hacernos amigos de <header>, <nav>, <section>, <aside> y <footer>, entre otros elementos semánticos introducidos por HTML5. Los atributos también juegan su papel en esta carrera por ser el mejor, así que debemos utilizarnos con inteligencia en favor de nuestro sitio.

Microdata es otra de las claves para darle significado a los elementos de nuestro sitio y enriquecerlos con información útil para los buscadores. Es una buena idea comenzar a incorporarlo en nuestros próximos proyectos.

A la hora de proyectar nuestro sitio, la optimización para los buscadores debe ser contemplada y debemos tratar de establecer objetivos para, luego, evaluar su cumplimiento (o no). Si bien el SEO se basa en procedimientos y estrategias, no olvidemos que también puede ser “arte” y es allí donde entra a jugar nuestra creatividad. Otro aspecto a valorar, que siempre destaco en mis clases, es que en el momento en que vivimos es fundamental estar actualizados. Aplicado al SEO, esto quiere decir que debemos estar siempre atentos a los cambios que experimentan los motores de búsqueda en la forma de indexar y ofrecer contenidos a los usuarios. No olvidemos que hoy vivimos en el tiempo de los resultados en “tiempo real”.

Para finalizar, no debemos olvidar que el contenido continua siendo importante para los buscadores, por esta razón, cualquier estructura semántica basada en HTML5 será solo el punto de apoyo en el que deberemos comenzar a construir nuestro castillo, que deberá tener una fuente de contenidos “rica” para que tanto usuarios, como también buscadores deseen “beber de ella”.

Con el éxito de HTML5 y la gran variedad de APIs que acompañan a esta nuevo estándar, el manejo de JavaScrip vuelve a estar en un primer plano a la hora de realizar desarrollos Web.

Muchas veces he dicho que JavaScript me resulta como el inglés, ya que es el idioma que nos permite hablar con diferentes personas de distintos lugares, aunque no sepa su idioma. Claro que en este caso no son precisamente personas, sino que son interfaces o medios informáticos.

Quizás allí resida la máxima potencia de JavaScript: su versatilidad es la clave. A pesar de ser menos robusto que otros lenguajes que dominan la Web, es uno de los que mejor se ha sabido adaptar a los cambios y ha sobrevivido sin grandes cambios en sus versiones en los últimos tiempos. Lo que sí se ha modificado un poco es la manera de integrando con otras tecnologías que han crecido mucho en el último tiempo.

Un interesante dato es el que arroja el índice TIOBE, que mide el uso de los lenguajes de programación, mostrando como ahora JavaScript sube dos puestos para ubicarse en el octavo lugar. Este ascenso es una buena señal para volver a repasar este lenguaje o comenzar a aprenderlo de cero, si nunca trabajamos con él.

Un aspecto importante para recordar en esta historia es que si deseamos aprender HTML5 a fondo, sin quedarnos solamente en las etiquetas, será fundamental aprender también JavaScript y dominarlo por completo para poder dotar a nuestros desarrollos de la máxima flexibilidad y funcionalidad.

¿Te interesa  capacitarte en desarrollo Web? Estés en el lugar donde estés, puedes contactarme.

En este caso voy a recomendarles un plugin muy útil, llamado zRSSFeed. ¿Qué es lo que nos permite hacer? Muy sencillo, con esta librería y jQuery, podremos leer los feed de RSS de otros sitios y mostrarlos. Esto se logra también gracias a la Google Feeds API.

Para utilizarlo y aplicarlo en nuestros sitios no se requiere grandes conocimientos, ya que la librería lo hace todo de una manera muy simple. Luego de personalizar los feed que deseemos mostrar, podremos establecer estilos empleando CSS.

Si necesitan integrar RSS en sus proyectos Web no lo dude, este plugin para jQuery les facilitará el trabajo.

Pueden obtenerlo ingresando en RSS Feeds Reader Plugin for jQuery.

¿Te interesa  capacitarte en desarrollo Web? Estés en el lugar donde estés, puedes contactarme.

Varios libros se han escrito tomando esta característica como eje y, seguramente, muchos más se escribirán, pero lo importante es conocer primero su base. Cada vez que dicto clases de HTML5 siempre hay gran curiosidad y me preguntan mucho por este elemento, así que me pareció interesante realizar un listado de cosas que todos deberían saber acerca de Canvas:

• Canvas es un elemento nuevo en HTML5. Tiene una API sobre la que podremos trabajar e interactuar empleando JavaScript.
• Mediante el elemento Canvas, podremos crear gráficos y animaciones, pero también zonas interactivas. Es útil tanto para aplicaciones, demostraciones y, especialmente, para una nueva generación de juegos en la Web.
• Crear gráficos con Canvas puede parecer complejo, pero existen aplicaciones que nos facilitan el camino. Por ejemplo, podemos dibujar con Adobe Illustrator y, gracias al plugin AI2CANVAS, exportar al Canvas de HTML5.
• Canvas funciona en la mayoría de los navegadores modernos. El soporte básico de Canvas está disponible en: Internet Explorer 9 (o superior), Firefox 3.6 (o superior), Chrome 4.0 (o superior), Safari 3.1 (o superior), Opera 9 (o superior). Vale decir que también es soportado por navegadores para móviles, como el caso de Safari para iOS y Android Browser, entre otros.
• La mayoría de los navegadores mejoran el soporte de Canvas a través de sus versiones (por eso la referencia del ítem anterior es sobre el soporte básico). En la familia de Internet Explorer no encontraremos soporte en la versión 8 y anteriores. Existen algunas librerías que nos permiten “simular” las funcionalidades de Canvas, mediante el uso de Polyfills. Lo que siempre recomiendo es realizar tests de performance en diferentes browsers si recurrimos a alguna de estas soluciones, ya que, según las características de nuestro desarrollo, podríamos encontrar un bajo rendimiento en algunos navegadores.
• Canvas puede trabajar con contexto de dos dimensiones (2D) o de tres dimensiones (mediante la implementación de WebGL).
• En el Canvas se puede trabajar con transparencias mediante colores mediante globalAlpha. También podremos aprovechar lo que nos ofrece RGBA.
• Canvas nos permite dibujar y trabajar tanto con formas simples (líneas) y otras de gran complejidad. Podemos emplear imágenes de diferentes tipos en su interior, desde JPEG hasta gráficos SVG.
• El elemento Canvas nos permite manipular sus contenidos a “nivel píxel”, de esta forma podemos hacer deformaciones, cambiar su color o lograr efectos realmente impactantes, tales como explosiones o crear rompecabezas.
• Canvas puede aprovechar la aceleración de Hardware para hacer más eficientes las animaciones y dibujos complejos. La evolución de los navegadores con el soporte de estas características es clave para mejorar aún más la performance.

Para quienes deseen saber más acerca de Canvas encontrarán muy buenos artículos y tutoriales en CSS3 & HTML5.

¿Te ha gustado esta nota? ¿Te interesa aprender más sobre HTML5 para implementarlo en tus proyectos? Escríbeme y cuéntame sobre tus necesidades.

The New iPad o El Nuevo iPad (en castellano) es la denominación que ha elegido Apple para su nueva generación de Tablets. Después de muchos rumores sobre su nombre (iPad 3 o iPad HD, entre otros) el misterio fue develado en el evento que tuvo como figura principal a Tim Cook, presentando este nuevo modelo de Tablet.

Resuelto el tema del nombre, ahora vayamos a lo más jugoso de este producto: todas las novedades que nos trae el Nuevo iPad elevan un escalón más la excelencia que ha logrado Apple en sus productos.

Catalogado como un producto “Revolucionario”, el Nuevo iPad comienza a sorprendernos por su pantalla. No ha sido casual que uno de los nombres tentativos para este producto haya sido iPad HD. La pantalla retina de este dispositivo es cuatro veces superior a la del iPad 2, alcanzando una resolución de 2.048 por 1.536 px, siempre en un tamaño de 9,7 “.  Esto evidencia una calidad de imagen difícil de alcanzar por otros dispositivos de este tipo.

El dispositivo viene con el chip A5X integrado. Con un procesador gráfico de 4 núcleos logra una fluidez que asombra. Otro dato a tener en cuenta es la autonomía de la batería que se mantiene ubicada en torno a las 10 horas.

El Nuevo iPad cuenta con dos cámaras, una de ellas de 5 megapíxeles. Con ella podremos tomar fotos de alta calidad y grabar videos de 1080p (HD). Como si esto fuera poco, la cámara también nos ofrece sensor de iluminación y la capacidad de enfoque automático.

Wi-Fi, 4G y toda una variada gama de características nos invitan a elegir este nuevo modelo, siempre y cuando nuestro bolsillo lo permita. Blanco o Negro, 16 GB, 32 GB o 64 GB son algunas de las opciones que podremos optar.

Encontraremos más información sobre este producto en el sitio de Apple.

Para aquellos virtuosos (o no) del dibujo y del arte del desarrollo Web, encontramos en Raphaël una solución liviana y sencilla enfrascada en una única librería de  JavaScript. ¿Que nos ofrece Raphaël? Simplemente una manera más fácil de dibujar en nuestras páginas web,  trabajando con gráficos vectoriales en la Web. Esta librería respeta el estándar SVG del W3C y el VML para crear gráficos. Cada gráfico que creemos con Raphaël podrá ser manipulado como un objeto del DOM y, de esta manera podrá ser operado con gran facilidad desde JavaScript.

Este librería puede ser descargada ingresando en: http://raphaeljs.com/. Su tamaño en la versión “minificada” es de 20kb y de 210 kb en la versión sin comprimir.

¿En qué navegadores funciona Raphaël? Esa es una de sus grandes fortalezas, ya que nos puede servir para dar gran compatibilidad en nuestros proyectos. Su compatibilidad incluye: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

En su documentación veremos lo simple que es utilizar esta librería JavaScript. Vale la pena probarla y comenzar a implementarla en nuestros proyectos Web como una solución crossbrowser eficiente.

¿Te ha gustado esta nota? ¿Te interesa aprender más sobre JavaScript y AJAX para implementarlo en tus proyectos? Escríbeme y cuéntame sobre tus necesidades.

¿Qué es jQuery UI? es un completo framework de jQuery que nos ayuda a resolver una gran variedad de necesidades de diseño y desarrollo Web.

¿Qué nos aporta esta librería? Algo que me consultan con frecuencia mis alumnos es como hacer más fácil el camino que nos plantea AJAX. La primera solución es el uso de jQuery, pero luego nos podremos adentrar en diferentes agregados o plugins que nos facilitarán aún más el trabajo con nuestros proyectos.

Ya les he hablado de las maravillas que nos permite lograr jQuery Mobile en el ambiente móvil y ahora es el turno a un framework que nació antes y está enfocado en el desarrollo y diseño Web general.

En primer lugar no será útil saber desde dónde podremos obtener jQuery UI. Para descargar esta librería y los ejemplos que nos ayudarán a construir soluciones para nuestros desarrollos web, podremos ingresar en el sitio http://jqueryui.com/.

Esta librería está compuesta por un núcleo principal (JavaScript + CSS) y diversos módulos que nos permitirán, entre otras cosas:

• Realizar funciones de drag (arrastrar), rezize (cambiar tamaño).
• Crear acordeones, sliderse, calendarios,  barras de progreso, pestañas, cuadros de diálogo y botones.
• Aplicar efectos como fade (desvanecer), shake (sacudir), bounce (rebotar), escalar, explosiones, entre otros”.

Una gran ventaja de esta librería es la facilidad con la que podremos integrarla en nuestros proyectos. Podremos elegir que módulos descargar y también tendremos la posibilidad de personalizar el tema y el conjunto de colores que emplearemos. Esto lo podremos hacer si ingresamos en: http://jqueryui.com/download.

¿Te interesa aprender un poco más sobre como utilizar esta herramienta o cómo mejorar tus proyectos Web? Escríbeme para comenzar a aprender más sobre las nuevas tecnologías para construir la Web.