Mostrando entradas con la etiqueta html5. Mostrar todas las entradas
Mostrando entradas con la etiqueta html5. Mostrar todas las entradas

miércoles, 23 de octubre de 2013

[Autobombo] Libro gratuito de "Introducción a los lenguajes de la web"

Atención: en este post hablo sobre un trabajo mío, porque se trata de un trabajo gratuito y espero que útil para algunos de los lectores. Para ser bien explícito en los casos en que mencione cosas que me involucran directamente, decidí usar un tag (en el título mismo del post) [Autobombo]. Para quienes no comprendan el término, es un argentinismo que usamos para usando alguien se hace propaganda a si mismo. Pueden quedarse tranquilo porque no soy tan productivo, así que no creo que ocurra muy a menudo. :)

Lenguajes de la Web

Con mi compañero de ruta Juan Gabardini terminamos recientemente la versión final (al menos por ahora) de este librito que es, como dice el título, una mera introducción a HTTP, HTML y CSS.

El objetivo del libro es acercar a los conceptos más básicos a gente que se está acercando al desarrollo, o que tiene experiencia en otras áreas, como aplicaciones de escritorio o tecnologías anteriores.

El libro cubre temas como Internet (dominios, direcciones IP y puertos), HTTP (peticiones y respuestas; cookies) HTML5 (elementos, texto, enlaces y formularios), CSS, aplicaciones web mínimas (en PHP, Python y Flask, Ruby y Sinatra), y algo sobre URL semánticas.

Como explicamos en el arranque, no nos metemos en JavaScript, que es un tema mucho más grande, ni entramos en detalles muy profundos, pero tratamos de dejar punteros a otros recursos abiertos donde poder profundizar.

Todavía no lo agregamos a la página de Kleer donde pueden encontrar otros libros gratuitos, pero se viene en breve.

Espero que les resulte útil.

martes, 31 de julio de 2012

Codecademy: aprendiendo a programar en sociedad

Medallas en Codecademy

Acabo de descubrir este interesante sitio llamado Codecademy que unifica varias tendencias recientes:

  • Intérpretes en línea (a la TryRuby o TryPython)
  • Web social (todo se enlaza con Facebook, Twitter o Google)
  • Ludificación de las actividades (a medida que se avanza en el proceso de aprendizaje se reciben "medallas" que pueden compartirse en las redes sociales)

Piensen en este sitio para aprender a programar diferentes lenguajes y plataformas, como JavaScript, Python, Web fundamentals, jQuery u otras técnicas más breves y puntuales (como utilizar paneles o menúes colapsables, efectos y plugins de jQuery, etc).

Otro tema interesante del sitio, que es totalmente gratuito, financiado por una serie de empresas de medios ligadas a la industria de software, es que además de ser una plataforma abierta para aprender, también lo es para enseñar, ya que ofrece la posibilidad de crear nuevos cursos para compartir conocimientos. Por ahora los cursos deben ser basados en JavaScript, Python, Ruby o Web (HTML/CSS), pero imagino que la oferta se irá incrementando con el tiempo.

Espero que la iniciativa crezca, ya que es un buen recurso para aprender a programar o para acercarse a nuevos lenguajes y técnicas, haciéndolo de manera divertida y con feedback permanente, que es lo que muchas veces hace difícil el hecho de mantener la disciplina en cuestiones de auto-capacitación.

Seguimiento del entrenamiento

Lo más sencillo para experimentar el sitio es entrar directamente a él y comenzar. Me gusta el diseño y la usabilidad, ya que se puede comenzar sin siquiera registrarse. Identificarse es necesario solamente para mantener un seguimiento del avance, y para ello se destaca preferentemente el usar autenticación a través de un proveedor externo (oAuth) como Facebook, Twitter o Google, lo que facilita el compartir los avances en las redes sociales, aunque no es un tema compulsivo y uno puede ser totalmente silencioso.

Para quienes quieran conocer más detalles, el equipo mantiene un blog y por supuesto, pueden seguirlos en Twitter.

miércoles, 25 de julio de 2012

Firefox OS: ¿hace falta otra plataforma para móviles? ¡Tal vez si!

Firfox OS

En julio del año pasado la fundación Mozilla anunció el arranque de un nuevo proyecto llamado "Boot to Gecko" (B2G), en referencia a la idea de un sistema operativo orientado a móviles que iniciara directamente Gecko, el motor visual detrás de Firefox.

Semejante idea, en un mundo de dispositivos dominado por iOS y Android, en el que aún a Microsoft le está costando entrar, parece disparatada, pero Mozilla no tiene como objetivo necesario ganar mercado, sino impulsar mayor adopción de estándares web en el terreno de mayor crecimiento actualmente, que son celulares y tablets.

La característica fundamental del nuevo sistema operativo, actualmente conocido como Firefox OS (aunque encontrarán más referencias aún a B2G) es que está basado en un kernel de Linux, una capa de abstracción para el hardware (llamada "Gonk") y por encima el motor del navegador Gecko, soportando HTML, CSS y JavaScript que es sobre lo que corren todas las aplicaciones. Y esto significa todas, como la aplicación principal del teléfono, la lista de contactos, portada, etc.

El entorno de ejecución sobre el que corren las aplicaciones se llama Gaia, y para los que quieran probarlo, pueden obtenerse los builds nocturnos de Gaia clonando la cuenta de GitHub (git://github.com/mozilla-b2g/gaia; los builds corren en Mac OS, Linux y Windows). Hay un guía completa sobre el tema, llamada Gaia Hacking, en la Wiki de Mozilla.

Básicamente Gaia ofrece a los desarrolladores la posibilidad de producir aplicaciones web con el stock estándar de HTML5, más un API JavaScript que les da acceso a características especiales del dispositivo.

El otro factor importante es qué nivel de adopción se pueda esperar de esta plataforma, y en ese sentido es alentador ver que el sistema (inicialmente apuntando a hardware muy económico basado en Snapdragon) está siendo adoptado para próximas ofertas de varias operadoras europeas como Deutsche Telekom, Etisalat, Smart, Sprint, Telecom Italia, Telefónica y Telenor. De hecho, en una conferencia de febrero de este año en España, Telefónica y Mozilla mostraron una versión preliminar del sistema corriendo en dispositivos Galaxy II de Samsung, que vienen nativamente con Android. Otras organizaciones soportando directamente el proyecto son Adobe y Qualcomm (más información en esta gacetilla de prensa).

Como es recurrente en todo proyecto de Mozilla, absolutamente toda la plataforma es abierta, permitiendo a los operadores o fabricantes implementar una capa mínima que provee acceso a sus recursos propietarios. Más allá de eso, todo el diseño del sistema está alineado a respetar los mismos estándares web que se impulsan en los navegadores de escritorio, unificándolos aún más, y con un claro objetivo de que otros jugadores de la industria como Apple, Google o Microsoft sigan adoptando ese camino.

viernes, 9 de marzo de 2012

Lindo proyecto para despuntar el vicio

Markdown

En las últimas semanas un grupo de colegas y amigos, liderados por Matias Woloski y Lito Damiani e incluyendo a unos cuantos compañeros de Southworks, lanzaron un proyecto de código abierto muy interesante, que es a la vez una herramienta muy útil y una gran idea para practicar JavaScript, Node y varios temas interesantes de programación en un entorno compartido.

El proyecto se llama MarkdownR y esta es la descripción (en mi traducción rápida al español, con links agregados):

MarkdownR es un editor colaborativo de markdown construido sobre share.js y corriendo en Node.js sobre Windows Azure que permite...

  • editar un archivo markdown en colaboración y ver los cambios que hacen los demás en tiempo real
  • abrir y guardar sobre el almacenamiento de blobs de Windows Azure
  • abrir y guardar en GitHub utilizando su API y OAuth
  • copiar y pegar imagenes desde el portapapeles que se guardan automáticamente en el almacenamiento de blobs (sólo funciona en Chrome por ahora)

MarkdownR surgió de programadores de Southworks durante su tiempo libre entre proyectos y se plantea también como una herramienta de aprendizaje. La calidad del código es la de una prueba de concepto. No hay pruebas (todavía), tiene defectos, no funciona en IE9 y no hace limpieza del HTML (así que si alguien agrega tags de script y rompe todo, que no se enoje).

El proyecto es completamente abierto (las contribuciones se aceptan como pull requests) y está alojado en GitHub, listo para clonar y jugar.

 

viernes, 17 de febrero de 2012

Se liberó la Beta de ASP.NET MVC 4 (+ video)

Para los lectores interesados en .NET, esta es una muy buena noticia. La nueva versión de ASP.NET MVC ya está en Beta, y al parecer bastante estable, siguiendo el estilo de este equipo, que se diferencia de otros de Microsoft en su ciclo de producto sumamente iterativo y muy basado en pruebas.

Otra particularidad de este equipo es que termina liberando (ya que no arrancan así durante el desarrollo, lamentablemente) el producto como código abierto. Scott Guthrie, padre de ASP.NET MVC y buena parte del viejo ASP.NET, confirmó que esta versión también será licenciada como código abierto (la actual tiene licencia Apache 2.0), ante la pregunta de Miguel de Icaza en Twitter, lo que implica que podrá utilizarse con Mono próximamente.

The Gu le contesta a Miguel

La versión Beta, que ya está disponible para descarga y puede usarse en paralelo con MVC 3, tiene las siguientes mejoras principales:

  • ASP.NET Web API - la versión final del modelo para servicios REST, evolución de la WCF Web API.
  • Plantillas de proyecto nuevas y mejoradas, con código HTML mucho más cuidado, código más prolijo del lado del servidor, y uso de rendering adaptativo para que se vea correctamente en múltiples dispositivos.
  • Nueva plantilla para sitios móviles - aunque la plantilla básica se adapta bien a teléfonos, esta nueva está específicamente pensada para ese escenario, incluyendo de entrada jQuery Mobile para mejorar la experiencia táctil.
  • Modos de Display es la característica que permite cubrir el escenario mixto en que la misma aplicación debe tener vistas especializadas para diferentes dispositivos, con el mismo código servidor y mínimos cambios en el código cliente, pero que implican una gran diferencia en la experiencia del usuario.
  • Recetas para generación de código - facilitan a los autores de paquetes NuGet utilizar generación para alterar la generación ante los comandos de agregado de vistas, controladores, etc.
  • Soporte para Tasks (tareas asincrónicas) en los controladores.

Probablemente una de las novedades más importantes es la inclusión de la Web API, que permite generar servicios que pueden exponerse incluso fuera de IIS, y mejora mucho las capacidades para construir aplicaciones RESTful. Dejo un video (en inglés, 70 minutos) de Daniel Roth, del equipo de MVC, demostrando sus capacidades principales.

miércoles, 15 de febrero de 2012

Bootstrap 2.0: de Twitter para el mundo

Twitter

El equipo de la interfaz web de Twitter publicó ya hace tiempo como código abierto y gratuito Bootstrap, un conjunto de herramientas para trabajar interfaces web de manera consistente y basada en los nuevos estándares.

Bootstrap está basado en HTML5, incluye hojas de estilo en cascada (CSS) y componentes en JavaScript que brindan muchísimas flexibilidad y consistencia para lograr páginas limpias y sencillas, que a primera vista resultan familiares y fáciles de usar, como este ejemplo (sumamente básico, pero ilustrativo):

Ejemplo de Bootstrap

Hace unos días los responsables de Bootstrap, que está alojado en GitHub y es uno de los proyectos más exitosos en el sitio, que recibe además múltiples aportes de la comunidad, liberaron la versión 2.0, que agrega un esquema de trabajo sobre una grilla de 12 columnas que facilita la ubicación de elementos que pueden reacomodarse en diferentes formatos de dispositivo, y permite crear elementos anidados, relativos, etc.

Otra novedad es que todo el manejo de hojas de estilo ahora está basado en LESS, un lenguaje dinámico que extiende y mejora CSS a través de manipulación en JS.

Un último detalle que me parece muy bueno es la posibilidad de configurar el conjunto de herramientas necesarias para un proyecto en particular y poder descargar el paquete mínimo necesario, pero con todas las dependencias y configuración perfectamente resueltas. Así se puede optar por incluir o no cualquiera de estas múltiples características:

Componentes

  • Scaffolding
    • Normalize and reset
    • Body type and links
    • Grid system
    • Layouts
  • Base CSS
    • Headings, body, etc
    • Code and pre
    • Labels
    • Tables
    • Forms
    • Buttons
    • Icons
  • Components
    • Button groups and dropdowns
    • Navs, tabs, and pills
    • Navbar
    • Breadcrumbs
    • Pagination
    • Pager
    • Thumbnails
    • Alerts
    • Progress bars
    • Hero unit
  • JS Components
    • Tooltips
    • Popovers
    • Modals
    • Dropdowns
    • Collapse
    • Carousel
  • Miscellaneous
    • Wells
    • Close icon
    • Utilities
    • Component animations
    • Responsive
    • Responsive layouts

Y también se pueden seleccionar los plugins de jQuery, como transiciones, modal dialogs, dropdowns, tooltips y muchísimas cosas más.

Finalmente también se pueden personalizar los valores básicos de una serie de variables de LESS que se toman como base inicial.

La mejor manera de conocer y valorar Bootstrap es mirar un poco el sitio y descargarlo para probar.

martes, 31 de enero de 2012

Video: HTML 5 para los no iniciados y curiosos, por Cristian Prieto (y más de Alt.NET Hispano)

Alt.NET Hispano

Los amigos de Alt.NET Hispano, coordinados por el infatigable Jorge Gamba, han publicado el video de otra reunión VAN (Virtual Alt.NET).

La sesión que menciono en en título, e incluyo debajo, es una de las últimas, pero aprovecho para hacer una actualización sobre la actividad del grupo, que sigue manteniendo un espectro de intereses bastante amplio, con centro en .NET y su ecosistema, pero llegando a montones de otros entornos, como Ruby, JavaScript o HTML5, como en este caso.

Como mencioné en un viejo post, Alt.Net Hispano realiza sesiones en vivo (utilizando Live Meeting) de entre 60 y 120 minutos con frecuencia semanal, a veces más de una por semana, que quedan disponibles en video posteriormente, sobre multitud de temas, siempre en español.

Com complemento a aquel viejo post, dejo una lista de las sesiones publicadas desde diciembre de 2010 hasta ahora (en total el grupo lleva publicadas ¡81 sesiones!).

Fecha Tipo Título Presentador
Duración
81 2012/01/28 VAN Introducción a fubuMVC Francisco Ruiz 1:56
80 2011/12/17 VAN HTML 5 para los no iniciados y curiosos Cristian Prieto 2:04
79 2011/10/08 VAN vNext, ASP.NET 4.5, Webmatrix 2 y MVC4... (Parte 2) Cristian Prieto 1:52
78 2011/09/24 VAN vNext, ASP.NET 4.5, Webmatrix 2 y MVC4... (Parte 1) Cristian Prieto 1:48
77 2011/08/06 VAN Node.js Hernán García 1:52
76 2011/07/23 VAN Conceptos de HTTP y Fiddler web debugger Leonardo Micheloni 2:13
75 2011/06/18 VAN Identity Providers, oAuth y Autenticaciones on-line Carlos Peix 
Nelo Pauselli 
2:16
74 2011/06/11 VAN Generación de código, con Essential Pedro Molina 2:35
73 2011/05/28 VAN Pex, Moles y Code Contract Esteban Gringerg 2:11
72 2011/05/27 VAN REST Services y WCF's Web Api Pablo Cibraro 
Gustavo Machado
José Romaniello
1:50
71 2011/05/21 VAN Reescribiendo ensamblados con Mono.Cecil José Romaniello 2:17
70 2011/05/13 ALT.NET Café Web Frameworks 1:34
69 2011/03/05 VAN Conform - Parte 2 Fabio Maulo 2:14
68 2011/02/26 VAN Audit (parallel model) con NHibernate 3 Fabio Maulo 2:04
67 2011/02/19 VAN CQRS Andrea Magnorsky 2:09
66 2011/02/12 VAN Estrategias para el manejo de sesión de NHibernate Parte II Nelo Pauselli
José Romaniello
2:09
65 2011/02/04 ALT.NET Café La Inmortalidad de la Medusa - Arquitectura 1:25
64 2011/01/29 VAN Programando con Windows Azure Angel "Java" López 2:10
63 2010/12/04 VAN Estrategias para el manejo de sesión de NHibernate Nelo Pauselli 2:16
62 2010/11/27 VAN ASP.NET MVC 3 & NuGet Cristian Prieto 1:59
61 2010/11/26 VAN Code Smells & Refactoring Martín Salías 2:02
60 2010/11/20 VAN Ruby on Rails Mario Chávez 1:54
59
2010/11/17
VAN
Entity Framework
Jorge Fioranelli
2:31
58 2010/11/16 VAN Cloud Computing Martín Salías 2:27

Hay muchísimo material para disfrutar, y les dejo el video de Cristian para abrir el apetito.

Unable to display content. Adobe Flash is required.

martes, 27 de diciembre de 2011

PhoneGap: un entorno para gobernar a todos (+ videos)

PhoneGap

El terreno del desarrollo de aplicaciones para móviles es cada vez más complejo. Incluso a medida que avanza el dominio de iOS y Android, hay una cantidad de dispositivos y sistemas operativos que aun son relevantes, y las variantes entre formatos, restricciones impuestas por las tiendas de cada fabricante y demás particularidades tienden a complicar la tarea enormemente.

En estos casos siempre han surgido intentos de proveer un único entorno que permita generar aplicaciones para diferentes objetivos, pero en general los resultados no son demasiado buenos porque suelen apuntar a un denominador común que usualmente es bajo y desaprovecha el potencial de muchas de las plataformas. No es el caso con PhoneGap, una plataforma que permite desarrollar aplicaciones nativas para múltiples dispositivos, a partir de su desarrollo en HTML5 (HTML, CSS y JavaScript).

PhoneGap es código abierto y gratuito y fue creado por una pequeña empresa llamada Nitobi que fue comprada en octubre por Adobe, que mantuvo el compromiso de mantener las características abiertas de la plataforma, delegando incluso la base de código a la Apache Software Foundation.

Desarrollando en HTML/JS, PhoneGap permite acceder a todas las API nativas de cada plataforma (salvo en casos ne que no existen) y el empaquetado posterior genera aplicaciones nativas y ajustadas a los requerimientos de los mercados de cada proveedor. Las plataformas cubiertas actualmente son:

  • iOS
  • Android
  • Blackberry (OS 4.6 hasta 6.0)
  • WebOS (de hp)
  • Windows Phone 7
  • Symbian
  • Bada (la plataforma de Samsung)

Y las APIs cubiertas cubren casi todo lo que cada tipo de dispositivo tiene disponible (muchos no tienen brújula o no soportan video, por ejemplo), incluyendo:

  • acelerómetro
  • cámara
  • brújula (si hay)
  • contactos
  • archivos (en los sistemas que lo permiten)
  • posición geográfica
  • media (audio/video)
  • red
  • notificaciones visuales, sonoras o vibrador
  • almacenamiento

Veamos un ejemplo rápido de cómo utilizar el acelerómetro en JS:

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

function onError() {
    alert('onError!');
};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

Esta interfaz funciona en Android, iOS y BlackBerry OS 5.0 o superior. De manera similar puede accederse a casi todos los recursos de los dispositivos, y la funcionalidad es la mejor posible para cada uno de ellos, ya que no se reduce todo al denominador común, sino que hay soporte para toda la funcionalidad de las plataformas. Es importante entender que no hay magia y cada plataforma final mantiene sus requerimientos originales. Por ejemplo, para generar aplicaciones iOS es necesario trabajar en Mac OS, y para genera aplicaciones Windows Phone es necesario Windows; Android requiere en el SDK y Eclipse, etc.

Quedan a continuación un par de vídeos (en inglés) mostrando PhoneGap en acción para iOS y Android.

viernes, 11 de noviembre de 2011

Se acaba Flash, poco a poco (+video)

Adobe Flash

Después de mucho ruido en la comunidad a partir de la decisión de Apple de no soportar Flash en iOS, hace más de un año atrás, esta vez fue Adobe quien decidió dejar de insistir con una plataforma que efectivamente nunca funcionó correctamente en dispositivos móviles.

En un comunicado anteayer, Danny Winokur, gerente general de desarrollo interactivo de Adobe expresó claramente que Adobe dejará de desarrollar Flash para dispositivos móviles (teléfonos y tabletas) para concentrarse en computadoras.

Winokur dice en el comunicado (traducciones mías) cosas como: "Durante los últimos dos años hemos entregado Flash Player para navegadores móviles y provisto la expresividad completa de la web a muchos dispositivos móviles". Personalmente creo que pensar que Flash es definitorio para la expresividad de la web es un acto de arrogancia que Adobe está pagando. Por otro lado, estas versiones de Flash para móviles nunca funcionaron correctamente, por problemas genéricos en su diseño básico, tal como detallara Jobs en su momento, en sus durísimas aclaraciones al vedar este producto en sus plataformas.

El texto continúa explicando el nuevo foco de Adobe respecto a estos dispositivos (el énfasis también es mío): "sin embargo, HTML5 ya es soportado universalmente en los dispositivos móviles principales, en algunos casos exclusivamente. Esto convierte a HTML5 en la mejor solución para crear y desplegar contenido en el navegador a través de las plataformas móviles. Estamos excitados con esto y continuaremos trabajando con los principales jugadores de la comunidad HTML incluyendo a Google, Apple, Microsoft y RIM para producir innovación en HTML5 que ellos puedan utilizar para avanzar sus navegadores móviles".

Me suena como una dósis de realidad, y también una manera de tratar de mantenerse relevante en un escenario que claramente les ha restado protagonismo. Más allá de herramientas de edición (algo en lo que Adobe todavía mantiene un liderazgo considerable) no veo cuánto puedan aportar a los navegadores, que realmente avanzan tecnológicamente liderados por Mozilla, Google y Apple, seguidos por Microsoft que está comenzando a ponerse a tono.

Como cierre de la noticia, les dejo un video (en inglés) de unos dos minutos de una entrevista en la que Jobs explicaba brevemente el porque veía a Flash como una plataforma nociva para la web, sobre todo desde el punto de vista móvil.

lunes, 7 de noviembre de 2011

jQuery 1.7 disponible

jQuery

La más popular de las bibliotecas de JavaScript, instrumental en cambiar el panorama de este lenguaje, ha sido actualizada una vez más.

Esta versión 1.7 ya está disponible para descarga tanto en el sitio oficial (versión completa o minimizada) como en las redes de distribución de contenido de Google y Microsoft, desde donde conviene apuntarlas en nuestros sitios web para garantizar la mejor eficiencia de acceso.

Algunas de las novedades principales, además de correcciones y mejoras generales, son:

Nueva API de eventos on / off:

Esta sintaxis unifica diferentes maneras de enlazar eventos como las anteriores delegate() o bind(). La sintaxis completa es:

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

Ejemplos de uso:

$('form').on('submit', { val: 42 }, fn);

$(window).off('scroll.myPlugin');

$('.comment').on('click', 'a.add', addNew);

Enormes mejoras en el rendimiento de eventos delegados

Muchos otros frameworks basados en jQuery, al igual que muchas aplicaciones complejas hoy día, usan eventos delegados en forma cada vez más intensiva, por lo que el equipo hizo un arduo trabajo de investigación de los escenarios más típicos y logro mejorar el rendimiento de muchas operaciones en forma dramática. Vean el siguiente cuadro comparativo de velocidad de ejecución de las pruebas en diversos navegadores:

Eventos Delegados en jQuery 1.7

Soporte mejorado para HTML5 en Internet Explorer 6, 7 y 8

Aun utilizando bibliotecas como Modernizr o html5shiv, hay tags como <section> que eran eliminados por estos navegadores. Esta versión de jQuery (que no reemplaza las bibliotecas mencionadas) permite seguir manipulando estos elementos en métodos como .html().

Mejoras en jQuery.Deferred

El objeto jQuery.Deferred es parte del API para ejecución asincrónica. Este objeto representa una promesa de retorno de un proceso que está ejecutándose asincrónicamente, mientras nuestra aplicación puede seguir trabajando en otra cosa o atendiendo a eventos.

Esto ya funcionaba perfectamente, pero en la nueva versión se ha extendido el objeto para poder manejar notificaciones de progreso, de manera de poder reportar el avance, o poder preguntar por el estado en cualquier momento.

Otras mejoras generales

También se mejoró la activación y desactivación de animaciones para hacer más intuitivo el manejo cuando éstas operaciones están anidadas, se agregó soporte para el AMD API (definición de módulos asincrónicos), que unifica varias otras bibliotecas como RequireJS o curl.js para cargar módulos dinámicamente. jQuery contempla ahora estas operaciones correctamente y deja que los procesos de carga reporten realmente cuando el documento está ready. Finalmente esta versión agrega una función muy útil: jQuery.IsNumeric() que indica si un valor es numérico, algo que no siempre es tan fácil de determinar como parece en JavaScript.

martes, 20 de septiembre de 2011

Video: Google Developer Day en Buenos Aires

Buenos Aires, ArgentinaAyer estuve brevemente en el arranque de Google Developer Day en Buenos Aires, que continúa hoy (ya que a pesar del nombre son dos días). Fue bueno, como siempre, encontrar amigos y compartir alguna novedades.

La charla de apertura se transmitió en vivo a través de YouTube y afortunadamente ya está disponible para que disfruten aquí mismo quienes no llegaron a tiempo.

La agenda completa incluye temas como Google TV, Android, Chrome, App Engine, HTML5, oAuth, OpenID, Google+, App Script, YouTube Live Streaming, y otros temas.

Espero que pronto estén disponible el resto de las sesiones y pueda compartirlas.

Les dejo el video de la apertura, de aproximadamente una hora y cuarto de duración. Pueden saltear los primeros minutos de la cuenta regresiva, y queda sólo una hora.

viernes, 16 de septiembre de 2011

¿Qué significan Windows 8 y su nuevo WinRT? (+videos)

imageEsta semana arrancó la conferencia //build/ (nuevo nombre del tradicional PDC de Microsoft) y el foco principal fue el lanzamiento (en versión preliminar para desarrolladores) de Windows 8 y su nuevo modelo de programación. Para quienes no las vieron, dejo debajo los videos de las charlas de apertura del día 1 (mayor foco en Windows 8) y el día 2 (mayor foco en desarrollo).

Uno de los anuncios más polémicos o complejos fue el nuevo modelo para desarrollar aplicaciones Windows que puedan ser distribuidas a través del próximo Market, siguiendo el modelo popularizado por Apple y al que ya se ha sumado toda la industria, incluyendo Windows Phone.

El siguiente es el diagrama más visto en los últimos días mostrando cómo queda el stack de Windows, y debe tenerse en cuenta que es un diagrama aproximado, porque obviamente simplifica muchas cosas para servir como modelo introductorio:

Plataforma de Windows 8

Básicamente, la mayor novedad está en la sección verde del diagrama (aplicaciones estilo Metro). Este tipo de aplicaciones serán las que puedan distribuirse a través del Market, y su particularidad es que no pueden acceder al API completa de Win32, sino que dialogan contra el API de WinRT, la nueva estrella del mundo Microsoft.

En principio, WinRT es una buena idea. Lo que hace es proveer un contexto de ejecución seguro (similar al de un navegador) para aplicaciones Metro (insisto en que el modelo anterior existe, pero NO se puede distribuir por el Market). Lo que se logra con esto es que todas esas aplicaciones tienen acceso mediado y controlado a los recursos físicos del sistema, y son muchísimo más seguras, aun cuando pueden escribirse básicamente bajo tres paradigmas:

  • En .NET (utilizando el mismo CLR pero con un perfil especial que restringe el API disponible, similar a lo que sucede al escribir aplicaciones en Silverlight), utilizando XAML para el diseño de las interfaces.
  • En código nativo (C/C++) utilizando XAML también, pero sin acceso a Win32, sino a WinRT.
  • En JavaScript, utilizando HTML/CSS para el diseño de interfaces.

Otra característica importante de WinRT es que todas sus API tienen interfaces asincrónicas, salvo las que tienen tiempo de respuesta asegurado inferior a 50 milisegundos. El objetivo de esa decisión es mejorar la respuesta de Windows sobre todo en la interacción con el usuario. Todos sabemos que es normal en Windows tener demoras en el explorador o dentro de las aplicaciones, y mirar por unos segundos la famosa ruedita girando. Con el advenimiento de las interfaces táctiles (uno de los temas más fuertes en Windows 8) esos tiempos de respuesta no son viables. Por eso es importante volver a un modelo más similar al de programación en la web (con JavaScript) basado en operaciones que devuelven callbacks, que liberan el hilo de ejecución hasta que la operación termina.

La contra de este modelo en general es que el nivel de complejidad para manejar callbacks anidados y el control de errores se eleva considerablemente. No es casualidad entonces que tanto en .NET 4.5 como en JavaScript veamos crecer el uso de patrones asincrónicos (en C# 5 a través de las nuevas cláusulas await y async, heredadas de F#) y en JS con la creciente adopción de promesas (utilizando las abstracciones .then() y .when() ) en bibliotecas como jQuery, Dojo y otras derivadas de CommonJS.

Entre otros temores surgidos a partir de las presentaciones del nuevo modelo, está la confusión sobre si .NET ha perdido importancia. Personalmente creo que no, pero Microsoft ha vuelto a las fuentes en algunos sentidos, volviendo a poner énfasis en el código nativo para aplicaciones de alto rendimiento. Los lenguajes manejados dan mayor productividad en general, pero sólo en C/C++ se pueden crear aplicaciones de muy alto rendimiento en velocidad, consumo de recursos e incluso consumo de energía. Estos tres factores no eran tan importantes hasta hace un par de años porque pensábamos nuestra aplicaciones para correr en computadoras de escritorio o servidores, pero el desarrollo de los dispositivos móviles (teléfonos, tabletas, y otros) ponen de nuevo foco en ellos. Y en el otro extremo, aplicaciones del lado del servidor que ahora tenemos que pensar para miles de usuarios concurrentes hacen que tengamos que el ahorro de recursos en alta escala financie con creces el tiempo extra de desarrollo.

En fin, quedan muchos temas disparados que espero seguir tratando más adelante. Cualquier comentario o pregunta son bienvenidos. Les dejo los videos para que se diviertan.

Apertura del día 1 - Windows 8

Apertura del día 2 - Desarrollo y Operaciones

viernes, 9 de septiembre de 2011

¿Cómo funcionan los navegadores?

Mi amigo y compañero de trabajo Charly Páez compartió el otro día este documento que me parece algo fundamental para todo desarrollador hoy día. Está en inglés, pero no podía dejar de compartirlo con ustedes.

How Browsers Work: Behind the Scenes of Modern Web Browsers”, es parte del portal HTML5 Rocks construido por Google, conteniendo introducciones, presentaciones y guías de referencia.

Como se explica en el prefacio, gran parte de este documento surge de la cuidadosa investigación de la desarrolladora israelí Tali Garsiel sobre las características internas y análisis del código de WebKit (Safari y Chrome)  y Gecko (Firefox) los motores de presentación de código abierto que hoy suman aproximadamente un 60% del uso de la web. Aunque Internet Explorer no puede ser analizado de la misma manera, los lineamientos generales de su arquitectura seguramente no difieren fundamentalmente de lo que este documento cubre.

El contenido completo cubre los siguientes procesos, basados en el flujo típico debajo (dejo muchos términos si traducir para evitar confusiones):

  • El motor de rendering
  • Parsing y construcción del DOM (HTML, CSS, Scripts)
  • Construcción del árbol de render
  • Layout (distribución de los elementos)
  • Painting (la aparición real de los elementos en pantalla)
  • Cambios dinámicos
  • Los hilos del motor de rendering
  • Modelo visual de CSS2

Todo comienza con la descripción de alto nivel de la estructura de los navegadores, resumida en el siguiente diagrama:

El trabajo es bastante extenso y detallado, pero nuevamente lo recomiendo muy especialmente. No importa aprender todo ese nivel de detalle, pero leerlo detenidamente nos permite retener al menos algunos conceptos generales que nos ayudarán a comprender más fácilmente situaciones comunes en el desarrollo web.

jueves, 7 de julio de 2011

Raros lenguajes nuevos: CoffeeKup (más y más cafeína)

CoffeeKup

El matemático Alfréd Rényi decía que "un matemático es una máquina que convierte café en teoremas", frase que usualmente se le atribuye a su compatriota y colega Paul Erdös, quien solía repetirla.

Los programadores somos de alguna manera aparatos para convertir cafeína en algoritmos, lo que se hace explícito en la tradición de Java, JavaScript y el reciente CoffeeScript, todos inspirados en este alcaloide de venta libre.

Siguiendo la tradición cafetera, Maurice Machado ha colaborado con un reciente experimento notable basado en Node.js y CoffeeScript. Como breve recordatorio, CoffeeScript es una sintaxis simplificada de JavaScript, con un estilo más sucinto, bastante similar a Ruby, que se está haciendo tan popular que ya viene integrado en la distribución de Ruby on Rails 3.1, por ejemplo.

Lo que Maurice generó con CoffeeKup es un lenguaje específico de dominio (DSL) sobre CoffeeScript para generar el marcado completo de la página. Esto es, en lugar de escribir HTML, podemos escribir directamente toda la estructura de la página en CoffeeScript.

Veamos el ejemplo clásico de http://coffeekup.org/:

doctype 5
html ->
  head ->
    meta charset: 'utf-8'
    title "#{@title or 'Untitled'} | My awesome website"
    meta(name: 'description', content: @desc) if @desc?
    link rel: 'stylesheet', href: '/stylesheets/app.css'
    style '''
      body {font-family: sans-serif}
      header, nav, section, footer {display: block}
    '''
    script src: '/javascripts/jquery.js'
    coffeescript ->
      $().ready ->
        alert 'Alerts are so annoying...'
  body ->
    header ->
      h1 @title or 'Untitled'
      nav ->
        ul ->
          (li -> a href: '/', -> 'Home') unless @path is '/'
          li -> a href: '/chunky', -> 'Bacon!'
          switch @user.role
            when 'owner', 'admin'
              li -> a href: '/admin', -> 'Secret Stuff'
            when 'vip'
              li -> a href: '/vip', -> 'Exclusive Stuff'
            else
              li -> a href: '/commoners', -> 'Just Stuff'
    section ->
      h2 "Let's count to #{@max}:"
      p i for i in [1..@max]
    footer ->
      p shoutify('bye')

Como puede verse, se declara la estructura jerárquica de la página (cabecera y cuerpo), con sus atributos internos, y pueden anidarse los elementos como párrafos, divs, listas, y demás. Y claro, puede embeberse código en cualquier lado. No hay una diferencia directa entre la plantilla y el código.

Parece una postura muy radical, pero me parece un espacio sumamente interesante a investigar. Los experimentos de Maurice estén disponibles en GitHub y no terminan en CoffeeKup. Hay otros relacionados, como Zappa y CoffeeScript-Bespin.

 

miércoles, 22 de junio de 2011

MediaElement.js: el mismo player de audio/video para todos

MediaElement

Uno de los objetivos de HTML5 es unificar el manejo de media para todos los navegadores y plataformas, pero hasta ahora, por cuestiones de indefinición de estándares, por temas de apertura, licenciamiento o comodidad tecnológica entre los jugadores del mercado, esto no ha sido sencillo.

Para solucionar este problema, el prolífico John Dyer escribió (y liberó bajo licencia GPL v2/MIT) MediaElement.js

Se trata de un reproductor de audio/video en JavaScript, como su nombre indica, que soporta una multitud de navegadores (los que soportan HTML5 y los que no) y unifica mucho más el soporte de codecs para diferentes formatos de video.

Para simplificar el uso manteniendo el soporte entre plataformas, el reproductor utiliza el mismo API en todas, basado en los tags <audio> y <video> de HTML5, implementándolos en los navegadores que no los reconocen, delegando el soporte a reproductores en Flash o Silverlight, pero que emulan exactamente el reproductor nativo.

De esta manera, el uso de estos elementos es idéntico en todos los navegadores para el productor del contenido, y la adecuación se produce en el cliente, que probablemente ya tenga los complementos necesarios descargados. La ventaja principal es que la manera de interactuar con los activos de audio o video es siempre igual.

El siguiente cuadro muestra el soporte para todos los navegadores, y la manera en que se soportan dependiendo de la plataforma:

MediaElement por plataforma

Como siempre, el soporte se limita más en los dispositivos móviles, sobre todo en iOS, pero nótese que los navegadores de escritorio están cubiertos por completo.

La instalación de MediaElement es muy sencilla y está bien descripta en el sitio. Del lado del cliente, básicamente se reduce a incluir esta biblioteca y hoja de estilos:

<script src="jquery.js" />
<script src="mediaelement-and-player.min.js" />
<link rel="stylesheet" href="mediaelementplayer.css" />

Y para incluir el reproductor, utilizando el caso más extremo para dar soporte completo a todo, este es el marcado HTML (obviamente sin necesidad de incluir todos los comentarios):

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
    <!-- MP4 en Safari, IE9, iPhone, iPad, Android, y Windows Phone 7 -->
    <source type="video/mp4" src="myvideo.mp4" />
    <!-- WebM/VP8 en Firefox4, Opera, y Chrome -->
    <source type="video/webm" src="myvideo.webm" />
    <!-- Ogg/Vorbis en versiones viejas de Firefox y Opera -->
    <source type="video/ogg" src="myvideo.ogv" />
    <!-- Opcional: Agregar subtitulos para diferentes lenguajes -->
    <track kind="subtitles" src="subtitles.srt" srclang="en" />
    <!-- Opcional: Agregar capítulos -->
    <track kind="chapters" src="chapters.srt" srclang="en" /> 
    <!-- Ante-último recurso: sólo para navegadores sin HTML5 ni JavaScript -->
    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&poster=myvideo.jpg&file=myvideo.mp4" />
        <!-- El peor de los casos: dejo una imagen -->
        <img src="myvideo.jpg" width="320" height="240" title="No tiene manera de reproducir video" />
    </object>
</video>

El reproductor en si soporta diferentes estilos, puede controlarse programáticamente desde JavaScript, tiene montones de opciones como tamaño para el marco de video o audio, volumen, reproducción en bucle, subtítulos (incluyendo traducción automática via Google translate), y más.

Creo que para cualquiera trabajando seriamente en media en este momento este reproductor es una de las soluciones más completas disponibles.

miércoles, 8 de junio de 2011

Recursos sobre HTML5

HTML5 logo

A medida que el tiempo avanza este lenguaje de marcado y su ecosistema se hacen temas cada vez más centrales en el desarrollo de software en general.

El reciente anuncio de Microsoft de que Windows 8 soportará HTML y JavaScript como una posibilidad para desarrollar aplicaciones de escritorio sigue en la línea de muchos otros jugadores del mercado que apuntan fuertemente a estos estándares.

Les dejo a continuación una serie de recursos para prender más sobre HTML5.

En Español

En inglés

Como siempre hay más recursos en inglés, y este tipo de información técnica es muy consumible para los programadores, incluso si no están duchos en ese idioma.

  • Dive into HTML5 es un libro completo en línea que además está escrito usando este estilo de marcado. Desde el comienzo se nota el uso de Web Fonts (noten que si bien la tipografía del título parece un gráfico, el texto es seleccionable).

  • Los blogs de SitePoint (que también ofrecen algunos libros pagos pero económicos) tienen muy buena infomación en sus blogs, categorizados por contenido sobre HTML5 y CSS3.

  • W3Schools tiene un Tutorial que además sirve como una buena referencia en línea para buscar información sobre forms, tags, atributos y eventos.

 


viernes, 6 de mayo de 2011

Videos: Run Web Camp Buenos Aires (marzo 2011)

Run Web Camp

A mediados de marzo Microsoft realizó en Buenos Aires una edición de su gira internacional Web Camp, en el que participamos varios oradores locales junto a los dos invitados "oficiales", Phil Haack (Program Manager de ASP.NET MVC) y Drew Robbins (Technical Evangelist), como anuncié por entonces en este post.

El evento se transmitió en vivo a través de UStream, pero por algún motivo no se dejó que quedara disponible directamente a posterior, como esta plataforma permite, y recién ahora están disponibles los videos en YouTube.

Es bueno mencionar que este evento va a replicarse (siempre con adaptaciones, actualizaciones y oradores alternativos) a lo largo de varas provincias argentinas. Más información en la página de Facebook del tour.

Haciendo honor al tono hispano de este blog, les dejo la página donde están los links a todos los videos, pero dejo incrustados debajo los de las sesiones en español, en el orden en que (creo) se dieron ese 15 de marzo:

Bienvenida y tendencias, con Edu Mangarelli y Migue Sáez

Seguridad y Front-End de la nube, con Chema Alonso

Acceso a datos con Entity Framework, con Dani Laco y Martín Salías

Aplicaciones AJAX con MVC, con Rodo Finochietti y Zaiden

Internet Explorer 9 y HTML5, con Mati Woloski y Johnny Halife

Espero que los disfruten.

miércoles, 20 de abril de 2011

Manos de Mono

Manos de Mono

Aunque suene raro, Manos de Mono es el nombre de un framework liviano para desarrollo web, soportado por Mono (la implementación abierta de .NET) e inspirado en TornadoSinatra, Node.js y otros mecanismos web recientes.

Creado por Jackson Harper, miembro del equipo de Mono en Novell, este framework intenta simplificar mucho el desarrollo web, evitando abstracciones y herramientas. Jackson usa como inspiración esta elegante frase de Alan Kay (inventor de Smalltalk, entre otras cosas):

"Las cosas simples deben ser simples. Las cosas complejas deben ser posibles."

Manos está concebido para ser simple de usar, fácil de probar y brindar altísimo rendimiento, sin necesidad de utilizar un servidor web (ni Apacha, ni IIS). Las aplicaciones desarrolladas con Manos incluyen el servidor web como parte del paquete, facilitando también la instalación y actualizaciones, y eliminando toda configuración.

Algunas de las características más interesantes de Manos son:

  • El servidor es muy escalable y no-bloqueante, es decir que no usa threads separados para cada petición, sino un loop de eventos, como hace Node.js (mas información sobre éste último en este post anterior).
  • Un sistema de cañerías (pipes) HTTP que facilita tratar cualquier petición o respuesta antes o después de que el framework los enrute.
  • El enrutamiento puede realizarse por convención, propiedades o métodos HTTP. Todas las rutas pueden definirse con expresiones del estilo "/Articulo/{titulo}/{pagina}".
  • Al generar un nuevo proyecto, Manos produce una serie de archivos básicos basados en el HTML5 Boilerplate (cubierto en este otro post), que después se personaliza por medio de un motor de plantillas muy rápido. Las vistas pueden generarse con cualquier editor y son casi HTML puro, pero son compiladas en tiempo de ejecución para maximizar el rendimiento.
  • La interfaz principal de Manos es una línea de comandos que permite crear, construir o iniciar las aplicaciones sin necesidad de ninguna IDE.
  • El diseño es totalmente modular, permitiendo extender Manos fácilmente, lo que puede facilitar que el ecosistema crezca con contribuciones de la comunidad.

Para crear una aplicación Monigote (por ejemplo), basta abrir una consola y escribir:

manos --init Monigote

y esto crea una carpeta Monigote con los archivos Monigote.cs, StaticContentModule.cs y una subcarpeta para las hojas de estilo y librerías Javascript (incluye jQuery, Modernizr, y otras). Los primeros archivos son programs C#, como se habrán dado cuenta. El primero es el punto de entrada de la aplicación, y el segundo se encarga de servir el contenido estático desde la sub-carpeta creada: scripts, imagenes, estilos, etc.

Dentro de Monigote.cs podemos incluir algo tan sencillo como:

Get ("/", ctx => ctx.Response.End ("¡Hola, Monigotes amigos!"));

Y esta acción procesa directamente la ruta raíz ("/"), respondiendo con un saludo.

Por supuesto que hay mucho más, pero este es el estilo de desarrollo en general. Antes de ejecutar la aplicación debemos construirla con el comando:

manos --build
Y para ejecutarla simplemente ejecutamos:
manos --server

Y la aplicación inicia, accesible en el localhost, en el puerto 8080 para pruebas.
Más detalles en este tutorial, y la documentación completa.

lunes, 18 de abril de 2011

Rails 3.1 incluirá jQuery, CoffeeScript y Saas

Ruby on Rails

La próxima entrega de Ruby on Rails, la versión 3.1, incluirá por omisión estas librerías como parte de todo nuevo proyecto.

Por supuesto que ya ha habido mucha discusión al respecto en la comunidad Rails, pero como siempre, la decisión está tomada por DHH y sus secuaces, y al fin y al cabo, cambiar los defaults no es complejo (basta alterar un par de líneas en el gemfile).

Pero repasemos un poco de que se tratan estos cambios:

Hasta ahora la librería estándar de Javascript que Rails agregaba por omisión era Prototype, pero como la mayor parte de la gente hoy día utiliza jQuery (lo que demuestra que no es tan complejo cambiar estas cosas), decidieron hacer oficial el cambio.

Saas

Los otros cambios son más dramáticos para algunos, y es la inclusión por omisión de CoffeScript y Saas.

Sobre CoffeeScript escribí un post hace poco, así que voy a evitar repetirme, pero básicamente es una sintaxis simplificada de Javascript, que facilita escribir la parte cliente de aplicaciones web (aunque también se usa a veces del lado del servidor, en conjunto con Node.js).

Saas, por su parte, es una sintaxis alternativa para hojas de estilo en cascada (CSS).

Históricamente tuvo dos sintaxis, la original es la indentada (con archivos de extensión .saas), inspirada en el lenguaje de templates Haml (también muy difundido en el ambiente Ruby), y en lugar de usar llaves y punto y comas para delimitar bloques, se basa en indentación, como en este ejemplo:

#main
  color: blue
  font-size: 0.3em

  a
    font:
      weight: bold
      family: serif
    &:hover
      background-color: #eee

La nueva sintaxis se llama SCSS y es un superset de la sintaxis CSS3 que utiliza archivos de extensión .scss. Esta es la que impulsan desde Rails, y en este caso no se remueven las llaves y punto y comas, sino que el foco está en mejorar las posibilidades de definición, por ejemplo, soportando anidamiento de estilos:

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

Y también variables, como en:

$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

Pero también hay soporte para mixins (a la Ruby), herencia de selectores, y más características.

Al igual que en el caso de CoffeeScript, Saas va a estar integrado al framework, de manera que nosotros editamos los archivos en estos lenguajes y automáticamente se generan sus equivalentes .js y .css sin mayores inconvenientes. En ambos casos, llegado el momento de tener que depurar el código directamente en el navegador (utilizando FireBug o herramientas similares) la distancia entre los lenguajes reales y estas sintaxis alternativas nunca es tan grande como para convertirse en un problema.

 

miércoles, 30 de marzo de 2011

Akshell: Una IDE completa en línea

Akshell

Hace rato vengo esperando ver algo como esto. Hubo intentos anteriores auspiciosos, pero esta vez creo que se aproxima mas a mis expectativas porque además plantea un flujo de trabajo bastante completo.

Publico la reseña antes de hacer muchas pruebas porque me entusiasmó el proyecto: Akshell

Se trata de un entorno de desarrollo en línea completo, para Javascript, incluyendo integración directa con Git y GitHub, y despliegue automatizado (incluyendo un entorno de pruebas provisto, pero que puede enviar a cualquier dominio).

Soporta (por ahora) PostgreSQL utilizando un API de Javascript, e incluye un framework propio de pruebas unitarias basado en la biblioteca unit test de Python.

Veamos rápidamente un pantallazo del entorno, con una mínima aplicación de prueba:

Akshell IDE

Como se ve, hay manejo de proyectos, y en el navegador de la izquierda se ven los diferentes entornos (release y debug por omisión).

El editor tiene coloreo de sintáxis, y también por omisión hay un motor simple de templates para manejar el HTML de la aplicación y hacerlo interactuar con los scripts, como en este ejemplo:

{% extends 'base.html' %}

{% block title %}{{ entry.title }}{% endblock %}

{% block content %}
  {{ entry.title }}
  {{ entry.author }}
  {{ entry.message }}
{% endblock %}

Por ahora esto apunta a un modelo de aplicación bastante específico, pero bastante bien documentado y no lejano a cualquier framework web moderno.

Espero probar un poco más el entorno y poder compartir más datos, y ojalá otros compartan sus experiencias si hacen la prueba.