En Cristalab nos dedicamos a enseñar cómo crear para la web. Y este esfuerzo es gracias a todas las personas que crean tutoriales, artículos y arte post-moderno dentro de la comunidad.

Cada vez que una persona pública un tutorial, recibe "clabLevel", una medida en puntos del aporte a la comunidad. 75 puntos por tutorial, 100 puntos por un artículo para el blog, 50 puntos para videotutoriales, etc. (Por ejemplo, aquí ves mi clabLevel)

Por eso, en esta post-navidad post-navideña queremos recompensarlos.

¡Galaxy Nexus para nuestros mejores usuarios!

Es muy sencillo. El Galaxy Nexus es el mejor android actual y ahora tú también puedes tenerlo. Sólo necesitas tener más de 1000 puntos de clabLevel. Pero teniendo en cuenta que un robot puede crear masivas cantidades de contenido, hemos decidido incluir un pequeño test de humanidad.

Nada complicado, sólo tienes que resolver estas ecuaciónes, incluyendo el procedimiento, demostración y una breve explicación del resultado.

1. Evalúa la transformada de Fourier de este tren de impulsos rectangular


2. Para la función mostrada en esta figura, determina la transformada de Fourier


Esperamos tus comentarios en este post. Gracias por apoyar a Cristalab.

El 5 de diciembre, abrí el concurso navideño de Freddie Claus para divertirnos a expensas de Freddie. Varias personas se animaron a participar y enviaron propuestas bastante graciosas. Muchas gracias a todos ellos.

Luego de reírnos, asustarnos, asombrarnos y vomitar el almuerzo, ha llegado el momento de decretar al ganador y dejar que los perdedores traten de apedrearlo y robarle el premio.

¡Ganador del concurso!

Luego de una deliberación exhaustiva, el jurado anuncia como ganador del concurso navideño a...(*música de suspenso*).... Lexas, por su trabajo: Freddieclaus.



Una imagen muy original, divertida y completa. Muy buen concepto, la composición con más calidad. Sin duda un excelente trabajo, ¡felicitaciones Lexas!.

Premiación

Lexas se hace acreedora de +100 clabLevel, una plaquita dorada y un premio sorpresa de Cristalab.

Por favor, contacta a Freddie para los asuntos pertinentes a tu premio.

Menciones especiales

Hay varios trabajos que vale la pena resaltar por lo que lograron transmitir.

Nota: Las menciones especiales no reciben premio.

Freddy Claus por otakurzo



Una imagen bastante divertida y original. Sin duda una de mis favoritas. +1 por las expresiones de los personajes.

Freddieclaus por race



Una composición muy original y consistente, con muchos detalles que favorecen la maldad de Freddie

fredinch por murolin



Por último, una imagen muy divertida, sencilla e inusual. Otra forma poco convencional de representar a Freddie Claus.

¡Felicitaciones a todos y gracias por participar en el concurso!. Fue divertido, me reí mucho con sus trabajos.

A los que se quedaron hasta tarde arreglando "ese" error.



A los que se fueron temprano porque "estaba compilando".



A los que hicieron un regalo a su familia con código.



A los que shopearon sus regalos.




A los que migraron de GoDaddy en terror a mejores aguas.



A los que dan tiempo y esfuerzo más que dinero y papel de colores.



A los que crean para todos y pelean por los que con una SOPA nos lo quieren quitar todo.



A los que escriben.



A los que dibujan.




A los que no sólo dan click a "New", sino también a "Publish".


A todos, feliz navidad de @freddier y el equipo de @cristalab

Después de una serie de anuncios que inquietaron a la comunida de de desarrolladores, el pasado 12 y 13 de Diciembre Adobe realizó el Flex Community Summit, un evento donde se discutió acerca del futuro de Flex y la plataforma Flash en general. Dentro de la información que brindó Adobe tenemos:

Flex pasa a la Fundación Apache

Adobe cede el SDK de Flex a la Fundación Apache el cual pasará por un proceso llamado "incubación" para después ser declarado un proyecto real de ésta fundación. Este movimiento tiene ventajas como el tener a la comunidad open source participando en el desarrollo y evolución de Flex, pero también desventajas como el hecho de que las empresas tendrán la percepción de la falta del soporte que tienen los productos comerciales que no son open source.

Flash Catalyst será descontinuado

En toda empresa, los números son los que importan. Adobe es una empresa que busca lucrarse en la mayor cantidad posible y para ello apuesta por los productos y tecnologías que le ayuden a lograr ese objetivo. Flash Catalyst es un producto que inició como una gran idea al tratar de unir el trabajo del diseñador y el desarrollador, pero lamentablemente los números no justifican su continuidad y por ese motivo la version CS 5.5 es la última que estará en el mercado.

Cambios en Flash Builder

Por el mismo motivo anterior (los números) Adobe no piensa invertir esfuerzos en las características que son menos usadas por los desarrolladores y por ese motivo serán eliminados de Flash Builder la vista de diseño y el flujo de trabajo con Flash Catalyst. Mientras la eliminación del flujo de trabajo con Flash Catalyst tiene sentido, el eliminar la vista de diseño de Flash Builder es una decisión que puede parecer extraña.

Compilador Falcon

Falcon es un nuevo compilador de ActionScript y MXML con un desempeño superior que podría ser liberado a mediados del 2012.

FalconJS

FalconJS es un compilador de MXML y ActionScript a HTML y JavaScript. Dado el interés de Adobe por HTML5 se puede pensar que FalconJS tiene mucho futuro, sin embargo éste proyecto se encuentra en una etapa muy experimental y aparentemente ha tenido muchas dificultades.

HTML5

El interés de Adobe en HTML5 es bastante claro, por lo tanto las versiones futuras de aplicaciones como Dreamweaver, Flash y Fireworks tendrán características orientadas a dar este tipo de salida. Habrá que esperar también qué pasa con Muse y Edge.

Tendremos que estar muy atentos a nuevos anuncios que Adobe podría realizar en las próximas semanas, al fin y al cabo nada está escrito sobre piedra y algunos anuncios podrían no materializarse.

Post original: Flex given to the Apache Software Foundation.

Otros artículos que pueden ampliar ésta información:

• Apache Flex Proposal.
  
• Thoughts on Apache Flex Proposal.
  
• Do Flex and LiveCycle still have a future?
  
• Flex to Apache.
  
• An Update on Flex.
  
• What is FalconJS?
  

Se habla mucho de la desaparición de Flash. Pero Flash es mucho más que un plugin. Es un entorno completo de desarrollo multi-plataforma, una tecnología acompañada de otros entornos y frameworks como Flash Builder y Flex y un compilador a múltiples dispositivos de forma nativa.

Más allá del cambio decidido por Adobe de volcar todos sus esfuerzos hacia herramientas HTML5, no podemos negar a Flash como una de las mejores plataformas integradas de desarrollo.

Por eso acá presento las 10 mejores aplicaciones hechas en Flash para móviles y tablets, mostrando un poco su futuro.

Adobe Touch Apps Familiy
Productividad - Android, iPad

Adobe Touch Apps es una serie de herramientas completas para creación, diseño y diagramación que funciona especialmente en tablets. Inicialmente para Android y iPad. Es el Creative Suite para tablets. Incluye Photoshop, Debut (una especie de Keynote), Proto (wireframes), Collage (rápida creación de recortes de diseños), Ideas (diseño vectorial) y Kuler (esquemas de color).

Machinarium
Juego - iPad2

Un muy famoso juego para iPad que estuvo por varias semanas como el más descargado. Un juego de plataformas con increíbles gráficos y hecho 100% en Flash.

Tweet Hunt
Juego - iPhone, Android

Un relajante juego de asesinar pajaros twitteros. Capturando datos del API de Twitter y mostrando gráficos, assets, audio y animaciones con sólo Actionscript 3.

Conqu
Productividad - iPhone, Android, iPad, BlackBerry Playbook

Una aplicación en Flex 100% multiplataforma que funciona en todas las plataformas móviles actuales. Permite manejar tareas a nivel personal o de grupos de trabajo. Un sistema completo de manejo de proyectos.

Kidoodle Pirate Scribblebeard
Entretenimiento - iPad, Android

Un libro interactivo de dibujo para niños desarrollado en Flash y AS3. Donde cada niño dibuja por completo una historia de piratas.

Sylvester's Band
Entretenimiento - iPhone, iPad, Android, BlackBerry Playbook

Otro libro interactivo para niños (esto ha de generar plata), un poco más versatil en sus historias y completamente multiplataforma, una capacidad única de las apps creadas en Flash/Flex.

Gridshock
Juego - iPhone, iPad, Android, BlackBerry Playbook

Uno de los primeros juegos publicados en las App Stores creados en Flash. Un sencillo juego de bloques que inició su vida como un juego gratuito para navegador y migró con fuerza a los móviles. 100% multiplataforma.

Chroma Circuit
Juego - iPhone, Android

De la misma empresa de Gridshock, Chroma Circuit es otro de los primeros juegos Flash-based en los markets móviles. También multiplataforma aunque sólo para teléfonos.

Cassandra
Utilidades - iPad, Android, BlackBerry Playbook

Es un reloj, pero es un reloj lindo, lleno de detalles bonitos e información. Capaz de también cargar noticias, estado del tiempo y otros datos abiertos. En Flex y para múltiples plataformas.

Visualator
Entretenimiento - iPhone, iPad

Una herramienta curiosa de dibujo abstracto, capaz de crear múltiples figuras desde los espirografos de infancia hasta vectores bastante trippy.

Hace 2 días Ryan Gavin hizo el anuncio en el blog oficial de Internet Explorer, del propósito de Microsoft de actualizar automáticamente y silenciosamente a los navegadores de sus versiones antiguas a sus versiones más recientes, algo que navegadores como Google Chrome y Mozilla Firefox ya hacen desde hace tiempo.

La actualización será de la misma forma en la que actúa Google Chrome, casi imperceptible por el usuario, método ya adoptado por Mozilla Firefox hace un tiempo.

Siendo así las cosas los 3 navegadores más usados estarán a la par de la última tecnología.



Ojalá todo fuera fiesta, pero los usuarios aún pueden decidir quedarse con su amado IE6; sí, es cierto, pueden bloquear actualizaciones automáticas, bloquear la actualización silenciosa, o simplemente desinstalar la actualización (lo que hará que quede de nuevo IE6 o IE7 como navegador por defecto). Entonces, los que no quieran, no serán actualizados.

¿Por qué Microsoft decide actualizar?

Entre las muchas razones por las que Microsoft ha decidido actualizar, encontramos algunas importantes:

• El franco descenso de uso de IE entre sus consumidores y el repunte de Chrome.
  
• El retiro de apoyo a IE6 de parte de gigantes empresas del mercado tecnológico, como Google.
  
• El impulso que Microsoft desea darle a IE10 ante la inminente entrada de Windows 8.
  

Otras razones por las que enfocarán sus esfuerzos a actualizar, es debido a los Informes de Inteligencia, que muestran que el 1% de los ataques exitosos a sistemas, es debido a problemas no detectados en el momento de liberar el software, problemas que luego deben ser solucionados con parches y actualizaciones.

El 99% de ataques exitosos restantes se deben a vulnerabilidades que pudieron ser prevenidas por parches o por ingeniería social, increíblemente el 44,5% del total de ataques. Lo decepcionante de los ataques por vulnerabilidades es que el 90% de ellos (49% del total de ataques), pudieron ser evitados por no usar parches que llevaban publicados más de un año (¡Si! más de un año).

Además, IE 6, posee más de 200 vulnerabilidades (264, más exactamente), de las cuales 17% aún no han sido arregladas (y según parece nunca lo serán).

Sin embargo, hay muchas más (directas e indirectas), que podemos encontrar a lo largo y ancho de la web.

Ahora... ¿Qué hacer?

Bueno, queridos diseñadores y desarrolladores, nos toca actualizar todos los diseños basados en IE 6 y 7, ya no hay excusa para seguir ofreciendo soporte a navegadores obsoletos. Citando a @freddier: Ya no tienen que desarrollar para Internet Explorer 7, y por suerte veremos el fin de IE6, impulsado por sus propios creadores.

Algo que cabe resaltar es que esto afectará gravemente a los usuarios de Windows XP, debido a que el desarrollo se enfocará en IE9/10 (XP sólo soporta IE8 ).

Desde que la web comercial existe hay algo que el cliente siempre pidió, pide y pedirá... “que el sitio cargue rápido”. Si son clientes que no tenían web, este requerimiento era por mero capricho, pero hay estudios que demuestran un serio impacto de un page load (carga de la página) largo, al punto tal de que 100ms son decisivos para lograr una venta. Ante estos estudios, es obvio que no es un mero capricho.

¿Como hago que un sitio cargue rápido?

Esta respuesta es muy compleja, requiere cada parte del proceso de entregar la web este optimizada lo más posible, y un poco más. Estas tres partes son;

• Front-end: diseño, maquetación, y javascript
  
• Back-end: programación pura y dura
  
• Servidor: un técnico especializado en servidores (lo digo en plural por las granjas de servidores)

Antes de ver un poco cada parte, analicemos cómo funciona una petición normal.

• Usuario escribe la url en la barra de direcciones y presiona enter, o hace click en un link.
  
• Se envía esa petición a nuestro servidor
  
• El servidor entrega un HTML, ese HTML tiene más peticiones (css, js, imágenes, etc.)
  
• Llega la petición al cliente y el browser la procesa
  
• Se hacen las peticiones de archivos adicionales, una petición por archivo
  
• El servidor entrega cada archivo adicional
  

Llega la petición al server

Cuando llega la petición al servidor, es normal que utilicemos un lenguaje de servidor para que nuestro sitio sea dinámico, aquí ya tenemos el primer problema. El servidor siempre entrega HTML, nunca entrega PHP, ASP, o código fuente, entonces entregar un archivo HTML estático (con extensión .html) es más rápido que un archivo HTML dinámico (generado por un lenguaje de servidor) ¿Por qué? Por una simple razón, el servidor tiene que interpretar el lenguaje de servidor para crear el archivo HTML que será entregado. Es más rápido entregar algo que tienes hecho, que algo que tienes que crear.
Para solucionar esto hay varias alternativas, wordpress tiene varios plugins para ello, algunos frameworks también, o puedes usar una solución de servidor (como varnish), básicamente lo que hacen estas herramientas es generar el archivo HTML, guardarlo en algún lugar y entregarlo cuando el cliente lo pida. Cada herramienta es configurable para regenerar el archivo HTML cada cierto tiempo o cuando se modifique.

Se envía petición al cliente

El archivo sale del servidor, antes de hacer esto se puede usar Gzip (formato de compresión) en el archivo HTML. El servidor puede ponerse de acuerdo con el browser y si ambos soportan Gzip el archivo HTML es enviado comprimido a través de internet. Esto lo que hace es comprimir el paquete a enviar. Tengamos en cuenta, que un archivo HTML es texto plano, con caracteres legibles por humanos, por lo que el porcentaje de compresión es muy alto. Con esto, el paquete que originalmente pesaba 100kb, puede pesar 40kb. A menos peso del paquete, más rápido llega al cliente.

El browser recibe el archivo

Cuando el archivo llega, el browser comienza a renderearlo, es decir dibujarlo. Aquí es muy importante 3 cosas:

1. Poner las llamadas a archivos CSS en el <head>
   
2. Poner las llamadas a archivos JS una línea antes del </body>
   
3. Minimizar la cantidad de llamadas a archivos
   

Pero, ¿por qué?, siempre puse los <script> en el <head>, uso muchos css, y algunos en el medio del html, tengo una llamada por cada imagen y carga bien el sitio ¿Por qué esta mal?,
Teniendo los archivos css cargados, nos aseguramos que el sitio se vea bien mientras se va cargando.
Cuando el browser ve un tag <script> deja de renderear el sitio, pide el archivo js, lo procesa y luego sigue con la carga del sitio.
Cada llamada a un archivo es una demora en pedir el archivo, buscarlo en el server, enviarlo. Burdamente hablando, es más trabajo “administrativo” que trabajo “real”.

Se piden los demás archivos

Una vez que el html renderea, se comienzan a pedir archivos css, js, imágenes, etc. Es muy bueno tener un CDN (Content Delivery Network, es una red donde replicas tus archivos estáticos para que sean leídos) para poder hacer descargas en paralelo. El browser está limitado a 2 archivos por dominio, sin un CDN puedo pedir 2 archivos simultáneamente, si tengo 4 CDN puedo pedir 4 x 2 + 2 que es igual a 10 archivos simultáneamente. Un CDN se puede crear de 2 maneras, con tu técnico de servidores, o puedes usar los servicios externos como Amazon o Google, ambas opciones son buenas.

Conclusión

Todo lo que sale del server puede ser optimizado, el html, css, js, imágenes, etc hay técnicas para ello. La clave está en hacer todo, optimizar no es hacer una cosa bien, es hacer todo bien, esforzarse en cada parte del proceso y perfeccionarlo al extremo y un poco más.
En mi experiencia personal, el page load de un sitio se puede reducir un 40% solamente con buenas prácticas y optimizando cada parte, sin gastar dinero en mejorar el server y sin cambiar de frameworks o CMS.

Apple quiere forzar a la W3C a detener el desarrollo del API de eventos touch y multitouch dentro de HTML5 y Javascript.

Apple, al igual que otras grandes empresas como Mozilla, Google, Adobe o Microsoft, es miembro de la W3C y tiene empleados activos trabajando en las especificaciones del estándar HTML5 y Javascript. Apple ha defendido públicamente HTML5, creando iAds, un proyecto semifallido de publicidad HTML5 para iOS y hasta siendo los dueños de HTML5.com.

Sin embargo, Apple defiende ferreamente lo que asume son sus "inventos", como se ve con sus múltiples demandas contra Android y ahora, contra la misma W3C usando sus patentes touch.

Eventos Touch de HTML5

Por implementación de la W3C es posible detectar eventos touch en teléfonos o tablets similar a como en un desktop se detectan los múltiples eventos de mouse. En este caso, existen cuatro:

• touchstart
  
• touchend
  
• touchmove
  
• touchcancel

Y usarlos es muy fácil. Puedes usar jQuery Mobile o Javascript desnudo, haciendo algo como:

Código :

document.addEventListener('touchend', function(ev) {
    document.write('Dedo levantado: ' + ev.changedTouches.length);
    document.write('Dedos que quedan sobre el elemento: ' + ev.targetTouches.length);
    document.write('Largo del toque: ' + ev.touches.length);
}, false);

Estos eventos están implementados en Safari Mobile, Opera Mobile, Firefox Mobile y Android 2.1+.

Las demandas de Apple contra la W3C

Hoy, Haavard de Opera denuncia a Apple por usar sus patentes para detener la especificación. Apple se retiró del grupo de trabajo de la W3C encargado de eventos touch y hoy presenta una serie de patentes a la W3C que la obligan a frenar temporalmente el desarrollo y crear un grupo de analisis legal de las patentes. Perdiendo tiempo y recursos que pueden ser usados en acelerar el proceso de creación de estandares web.

Esta no es la primera vez que lo hace Apple. En el 2009 intentó detener el estandar de web widgets (similares a los del Dashboard de Mac OS X) y falló. En el 2010 de nuevo intentó detener los widgets con otras dos patentes y volvió a fallar. Siempre a última hora y en el borde de aprobar la especificación.

Lo más curioso es que Apple fue la primera empresa en implementar un API de eventos touch en HTML (ellos lo inventaron) y fueron ellos los que propusieron el estándar para ser agregado a la W3C y al concepto HTML5.

¿Entonces qué carajo?

Foto por phantomfies.

Es una tradición de Cristalab realizar peticiones a Freddie Claus en diciembre, con el único objetivo de saturar de trabajo a Freddie y hacerlo miserable en estas fechas. Todos conocemos a Freddie pero nunca hemos visto a Freddie Claus. Por consiguiente, propongo un concurso sencillo de fotomanipulación para recrear a Freddie Claus y así disfrutar en comunidad estas fechas navideñas, sentirnos en sincronía con el resto del mundo y humillar a Freddie.

Concurso navideño

El objetivo del concurso es recrear cómo se vería Freddie en su rol de Freddie Claus, es decir, gordo, cachetón (aún más), con barba blanca, traje rojo, etc.

Bases del Concurso

• Editar una foto de Freddie para convertirlo en Freddie Claus.
  
• Subir tu composición a L4C.me con el tag freddieclaus
  
• Pueden utilizar la foto de Freddie que quieran, no necesariamente la de este post.
  
• En tu composición Freddie Claus puede estar vivo o muerto, pero debe apreciarse claramente que es él, no sólo sus restos explotados ni nada por el estilo.
  
• Se evaluará la creatividad y calidad de la imagen. Mientras más realismo mejor.
  
• Pueden agregar todos los elementos que quieran.

Premios

• Una plaquita dorada
  
• +100 clabLevel
  
• La satisfacción de molestar a Freddie
  
• El primer puesto recibirá "algo" de Cristalab, hecho de atomos, a su dirección postal (si confía en darnos su dirección)
  
• Adicionalmente, las mejores fotos serán publicadas en un post.

Fecha límite del concurso

Tienes plazo para participar hasta el día lunes 26 de diciembre de 2011.

Jurado del concurso

Freddie y Xklibur.

Para finalizar, recuerden hacer sus peticiones a Freddie Claus ^____^.

El anhelo de muchas personas es tener un negocio alternativo a sus labores habituales que les permitan tener ingresos extras y poder comprar licuadoras que destruyen gadgets. Algunas de ellas optan por lo típico: un restaurante, un bar o porqué no, afiliarse a alguna extraña secta de ventas por catálogo que ofrecen a sus empleados altas ganancias en un sistema "no piramidal"


En la eterna búsqueda de ingresos extra, hemos llegado a pensar en tener una tienda virtual. Pero los que hemos querido tomar ese camino encontramos limitaciones técnicas, económicas, de implementación y a pesar de la gran cantidad de documentación en internet sobre ecommerce, probablemente no contamos con el tiempo ni con la paciencia para aprender algo tan específico, cuando nuestra prioridad es vender y vender YA.

Monomi

Pensando en esta necesidad, Monoku, una agencia Colombiana ha dejado de tener "vida social" por un rato y se dedicó a desarrollar una plataforma de comercio electrónico cuya principal característica es que sea muy fácil de usar, completa y que permita a todas las personas interesadas pero sin experiencia, tener una tienda virtual. La plataforma se llama Monomi y podrá usarse gratuitamente durante diciembre de 2011 y Enero de 2012, fecha considerada de alto tráfico comercial.


A todos los interesados en probarla, podrán probarla ingresando los datos de la tienda en http://monomi.co/ . El sistema estará listo inmediatamente para configurar y subir los productos a vender. Luego de este periodo de prueba, al final de enero de 2012, se podrá seguir usando la plataforma contratando un plan mensual cuyo costo varía entre 25USD a 100USD.

Características de Monomi

• Tienda virtual lista en 3 pasos: Configura tu tienda, sube tus productos y vende
  
• Transacciones seguras y pagos electrónicos: los compradores tienen la facilidad de efectuar su pago PagosOnLine.com
  
• Administración: organiza los pedidos de los clientes, la información y revisa el status de los envios.
  
• Multi-plataforma: Las tiendas podrán visualizarse en todos los navegadores, y en todos los sistemas operativos. Además de poder ser consultadas en dispositivos móviles como smartphones y tabletas.
  
• Optimización para motores de búsqueda: Cada tienda es independiente y es posible usar su propio dominio, entre otras características de optimización
  
• Sin comisión: No importa si vendes poco o vendes mucho. No se cobrará ningún tipo de comisión por venta.

Cómo se construyó Monomi

Monomi utiliza metodologías de desarrollo ágiles como SCRUM. El backend se desarrolló usando Django y con hosting en Linode, igualmente se integró el trabajo del backend como el del frontend para desarrollar modelos MVP que permitieran la creación de productos complejos (múltiples atributos con múltiples precios) de forma dinámica. El frontend, se encuentra desarrollado sobre dojo en su gran extensión, HTML5, y CSS 2 y 3 con el apoyo en Compass. Acerca de los estilos, se modularizó y se abstrajo la definición de las variables modificables para facilitar la generación de temas en el lado del usuario.

Otra de sus características fue la integración con el sistema de pagos colombiano: PagosOnline, en donde los vendedores podrán definir de forma dinámica su usuario y llave de su cuenta para facilitar la integración de su tienda con este servicio

Estas son algunas tiendas que ya están usando la plataforma:
“Frases accesorios” , “La Furytienda” , “Himallineishon” , “La tienda feroz” y “Raeioul”


Si quieren más información, les recomiendo preguntar a su cuenta oficial en twitter, @monomi_stores. ♫ Vamos pastores vamos, vamos a vender.... ♫

Con amor, @tifis