Cristalab

---

• Tendencias del desarrollo Web Frontend en el 2012
• Manipulación de imágenes con Canvas en HTML5
• Tutorial de PHP y YAML

Tendencias del desarrollo Web Frontend en el 2012 Posted: 29 May 2012 07:32 AM PDT ¿Eres desarrollador web y estás a punto de comenzar un proyecto nuevo? ¿Te sientes frustrado porque es complicadísimo de manipular el javascript del proyecto en el que trabajas, o simplemente quieres estar al día en cómo se está moviendo el desarrollo Javascript? Este post puede resultarte interesante. Tu Backend debe ser sí o sí un API, de preferencia REST Si hablamos de Backend existentes, rápidamente escucharemos mencionar a los pesadísimos Webservices y su XML redundante, en el mundo corporate por todos lados veremos páginas Java generando JSP que a su vez arrojan el HTML, tenemos PHPs produciendo HTML, el punto es, pocos proyectos tienen un API propia, eso pareciera ser algo sólo para los grandes como Twitter, Facebook o Google Maps. Las cosas han cambiado, actualmente tu Backend servirá para producir HTML que será visto en PCs, y probablemente tu proyecto tendrá versiones móviles, apps para televisores y claro, para el refrigerador. Si tu proyecto inicia teniendo como base de toda interacción un API, tu aplicación naturalmente estará lista para después tener una versión móvil, una app para el televisor o para algún cepillo dental con display que los japoneses pronto inventarán. Si quieres mas información acerca de las REST API, google es tu amigo, en este artículo no pretendo entrar a detalle en aspectos técnicos de cómo hacer las cosas, nos enfocaremos en exponer los conceptos más importantes que se están moviendo hoy en día. No vuelvas a producir HTML en tu BackEnd, sea la tecnología que sea, arroja sólo JSON y más JSON, así tendrás un Backend elegante, práctico y eficiente, además de versátil. Que sean tus diferentes clientes los que trabajen gracias a tu API, así es, leiste bien: HTML/Javascript será ahora tu cliente y de eso hablaremos en el siguiente punto. Javascript debe ser el puto amo de tu FrontEnd Probablemente estás trabajando en algún proyecto donde Javascript es sí o sí el nuevo jefe de jefes en tu Frontend (no lo descarto en el Backend), y seguramente algún Framework acompaña a tu código (jQuery, Dojo, MooTools, Backbone.js), y de eso quiero hablar. Mencionar al "mejor" Framework de Javascript es imposible, cada uno presume de serlo y algunos no necesariamente están peleados, por el contrario son compatibles y el uno necesita del otro. He tenido la oportunidad de trabajar con todos los que menciono, describiré a cada uno: jQuery junto con jQuery UI es una interesante alternativa para enriquecer el DOM. Dojo es el Framework para el mundo corporate, intenta abarcar todo, components UI, utilerías, charts, lo que se te ocurra, pero sin ser en ninguna de esas aéreas el mejor (el que mucho abarca...). MooTools es compacto y el que más se preocupa por emular conceptos importantes en la OOP, como la herencia. Backbone.js, es algo cercano a un MVC tradicional, es flexible y a mi gusto se puede producir código muy elegante utilizándolo. No está peleado con FW como jQuery o MooTools pues tienen enfoques distintos. La lista de frameworks es grande, sólo mencioné algunos de los que he utilizado recientemente. Lo que es un hecho es que todos los Frameworks actuales tienen utilerías para leer contenido AJAX, y la mayoría interpreta JSON sin problemas, y es aquí, en este punto, donde generamos la integración e interacción con nuestro API. Tendremos archivos HTML y Javascript que consumen nuestro API (como hacemos al consumir APIs de terceros) y estaremos preparados para cambiar nuestra app de plataforma con un esfuerzo mucho menor al requerido sin tener una API. Si me preguntan por mi combinación favorita para comenzar un proyecto de FrontEnd, yo elegiría jQuery + Twitter Bootstrap(o en su defecto jQuery UI) junto con Backbone.js. Cómo empezar: recursos disponibles En este punto ya tienes una idea de cómo deben ser los nuevos Backends, un panorama de cuál puede ser la base de tu FrontEnd, pero tal vez aun tienes muchas dudas referentes a cómo empezar, por dónde debes iniciar. Es complicado incluir las respuestas a eso en un sólo post, sin embargo lo que sí puedo hacer es referenciarte a puntos de partida para tu nuevo proyecto HTML / Javascript. Mencionaré algunos de los recursos de hoy en día: HTML5 Boilerplate, es un template listo para que utilices HTML5 sin tener tantos problemas de compatibilidad. No es una solución perfecta, ni resuelve todos los problemas de compatibilidad, pero sin duda hace más ameno el desarrollo crossbrowser. Incluye también scripts ANT para minificar código, compactar imágenes entre otras tareas. Twitter Bootstrap, es un proyecto interesante de twitter que te permite enfocarte más en lógica de negocio y dejar de lado tareas comunes, como ventanas, layouts y botones, entre otras utilerías. Chrome - Developer Tools, es para mí la mejor herramienta para debuguear en Javascript, explorar el DOM, la actividad de la red, entre otras. Mi post tiene una clara inclinación a temas relacionados directamente con la programación, para temas como el CSS, el post de Neo es muy bueno, así como el de Freddie, que es un enfoque más general de como se están moviendo las cosas. Sé que probablemente quedan muchas dudas, respecto a los Frameworks mencionados, así como de los conceptos platicados, respuestas que me resultaría difícil explicar sin extenderme a una gran pared de texto. En base a sus inquietudes principales, podría preparar algún otro artículo, enfocado mas a un "how to" en específico. El objetivo de este primer post, es mover un poco el paradigma (si es que aplica) de cómo en algunos casos se sigue trabajando. Si por ahí ya te entró la inquietud de leer más acerca de REST, probar otros Frameworks de JS, leer más acerca de Html5boilerplate o Twitter Bootstrap, creo que será la mejor ganancia de este tema.

Manipulación de imágenes con Canvas en HTML5 Posted: 01 May 2012 07:07 AM PDT Canvas tiene un enorme poder sobre la manipulación de imágenes, es capaz de acceder a la información de cada pixel que se encuentre en sí mismo, es decir, podemos acceder a los valores de cada canal del pixel siempre y cuando esté dibujado en Canvas. El código de la aplicación pueden encontrarlo aquí, y el demo aquí. Parte 1: el método drawImage() De ahí que el manejo de imágenes en el lienzo no sea tan sencillo como parece. La mayoría de aquellos que nos hemos adentrado un poco en esta API conoceremos el método drawImage() con el que no sólo tenemos la posibilidad de dibujar imágenes, si no también la de escalarlas y deformar el tamaño de las mismas. Parece sencillo ¿no? La verdad es que lo es, pero sí no conoces el método drawImage, en el primer videotutorial se explica este método. Esa es la parte sencilla y común. Pero ¿qué pasa si nos queremos ver más avanzados, si queremos ir más allá? Parte 2: el método getImageData() ¿Quieres aprender a convertir tus imágenes a Sepia, Blanco y Negro e Invertir sus colores utlizando HTML5? Este método nos permite acceder a la información del lienzo dado un cuadro definido en el método, podemos entonces obtener el tamaño de dicho cuadro y un arreglo con la información de cada canal de color de cada pixel. Recordemos que cada pixel tiene un valor de rojo, uno de azul y uno de verde para formar la imagen, incluso un canal alfa para las transparencias. ¿Para qué quiero yo saber eso? Para poder realizar efectos como los que ves en esta aplicación que lograremos con el segundo videotutorial. Parte 3: método toDataURL() Y por último, pero no menos importante, para qué querría yo hacer esto si no puede tener la imagen que he editado, bien, Canvas es tan asombroso que nos regala un método para convertir la información que tiene en una imagen, ya sea jpg o png, este método toDataURL() se explica en el útlimo tutorial.

Tutorial de PHP y YAML Posted: 23 Aug 2009 05:00 PM PDT YAML es un formato de serialización de datos que nos permite crear archivos de variables fácilmente leíbles. En este tutorial usaremos YAML o YML para archivos de configuración en PHP.

You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610