Buenas reglas ayudan a mantener alta la calidad de nuestros programas

Las aplicaciones web son muy diferentes a las aplicaciones de escritorios, en cuanto a su ejecución la mayoría de las aplicaciones de escritorio generan archivos ejecutables y otras objetos tipos clase (“java”) que optimizan su ejecución esto está probado y es como mejor funcionan las aplicaciones de escritorio en este momento.

En las aplicaciones web este proceso es diferente todos los archivos se descargan del servidor, el explorador o cliente los descarga e interpreta este proceso se puede volver  muy tardado cuando el tamaño de los archivos es muy grande y también cuando los archivos son muchos.  Desgraciadamente no existe una forma de crear un ejecutable o un archivo class que contenga toda nuestra aplicación y así ejecutarla ¿o sí?

La optimización de código en JavaScript, Css y HTML es un proceso que no se lleva adecuadamente debido al poco conocimiento de estas tecnologías, además se tratan de 3 tecnologías totalmente diferentes y conocer la forma de optimizar tres tecnologías y luego unirlas puede parecer algo bastante complicado.

El principio de la compresión, la ofuscación es el mismo del de las aplicaciones de escritorio “tratar de crear un solo archivo” que ejecute nuestra aplicación, “tratar de crear un ejecutable”. Al tratarse de 3 tecnologías se separan en tres archivos diferentes Js, CSS y HTML para que cada archivo sea comprimido y ofuscado debidamente. Los tiempos de descarga y latencia de la aplicación mejoran significativamente y esto mejora la experiencia del usuario y la confianza del desarrollador. Entonces la ofuscación y compresión queda justificada y es por eso que es practicada por grandes empresas como Google, Yahoo, Microsoft.

La optimización  de código es algo diferente, cuando hablamos de optimización hablamos de hacer lo más posible con el menos trabajo posible, se trata de mantenerlo simple y eficaz. El concepto de reutilización de código es un concepto muy poderoso cuando se entiende. Reutilizar código ayuda a enfocarse en soluciones, no en resolver algo que ya alguien más resolvió, “no se trata de reinventar la rueda”.

Al optimizar el código creamos aplicaciones confiables y duraderas, que se reflejan en recursos a largo y corto plazo. Contar con buenos hábitos de optimización es bastante difícil si no se conocen las herramientas y para esto a veces es necesaria la contratación de expertos que ayuden a resolver este problema.

Existen varios factores para optimizar el desarrollo de una aplicación uno de los más importantes tiene que ver con estándares y buenos estilos de programación, este tipo de factores contribuyen en gran medida al éxito de la aplicación. Cuando se desarrollan aplicaciones pequeñas o con grupos pequeños de desarrollo, el problema de optimización no puede parecer importante pero la calidad de la aplicación depende en gran medida de buenos estándares y muy buenas prácticas de programación. “Crear un aplicación no es difícil, pero crear una excelente aplicación tampoco lo es cuando se constan de buenos estándares para el diseño y desarrollo de la misma”

Los estilos de programación:

  • El estilo de programación no tiene nada que ver con el gusto personal. Las buenas prácticas se ven reflejadas en el software final.
  • Se trata de rigor, expresión y disciplina.
  • Se trata de adaptabilidad y longevidad de la aplicación
  • Buenas reglas ayudan  a mantener alta la calidad de nuestro programas

En JavaScript el estilo de programación es críticamente importante, debido a las libertades que ofrece el lenguaje. Afortunadamente existen buenos estilos de programación que han demostrado su éxito como es el caso de ExtJs y Yui por mencionar unos.

Existen algunas reglas básicas para la creación de aplicaciones web exitosas y duraderas.

Optimización del desarrollo

  • Buenos estilos de programación.

Optimización del código.

  • Reutilización de código.
  • Generación de Apis.

Optimización de la aplicación.

  • Todos los archivos css deben aparecer lo más arriba posible de nuestros archivos HTML.
  • Todos los js deben aparecer lo más cerca del final del body posible.
  • Todas la imágenes se deben optimizar.
  • Ofuscación y compresión de código.

Documentación del desarrollo (generación de manuales).

En el siguiente curso vamos tratar de aclarar algunos conceptos de JavaScript y la manera en que un lenguaje tan incomprendido y menospreciado es tan poderoso además hablaremos sobre buenas prácticas de programación que se deben tomar en cuenta cuando desarrollemos con este lenguaje.

En la actualidad existen muchos frameworks que solucionan nuestros problemas como Dojo, qooxdoo, mootools, jquery, scriptaculous, prototype, sproudcore, ExtJS y Cappuccino. Todos estos frameworks son muy buenos pero en este curso empezaremos desde las bases de JavaScript hasta la utilización avanzada de ExtJS. Nos enfocaremos en ExtJS debido a que es un framework bastante completo con una gran comunidad para resolver nuestras dudas y  porque es el framework que actualmente estoy ocupando. Aunque en un futuro me gustaría hablar sobre Cappuccino que me ha fascinado pero eso será en alguna otra serie de este blog.

Así que prepárense para ir aprendiendo tan buenas tecnologías durante el transcurso de este curso.

Publicado en CSS, ExtJs, HTML, Javascript. Etiquetas: . Leave a Comment »

Efecto 3D con HTML y CSS

En uno de mis sitios favoritos Ajaxian e encontrado algo realmente asombroso echo con HTML y CSS nada mas ósea nada de javascript.

Es un efecto 3D creado por Roman Cortes , es algo que decidí que valía la pena  comentar sin mas preámbulos les dejo el ejemplo.

Meninas

Meninas

El método descrito desde el blog del autor es el siguiente “Para la realización he usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). El posicionamiento de los sprites se realiza mediante hover en un total de 80 anchors. El lateral derecho de la habitación se ensancha y contrae para mejorar el efecto 3D.

Hay algunos truquitos para que el hover funcione correctamente, podéis verlos en el código fuente. Para que no interfieran las imáges en el hover, he usado distintos z-indexs y nbsps con tamaño de fuente de 455 píxeles: el mismo alto que el experimento en sí”.

Espero que lo disfruten 🙂

Publicado en CSS, HTML. Leave a Comment »

Información sobre Cappuccino por Manduks

Hoy vamos a platicar un poco acerca de Cappuccino, sus aplicaciones y un poco de historia acerca  de este framework.

Para empezar Cappuccino es un framework que trata de llevar cualquier aplicación de escritorio a la nube (ósea  la web).  Está basado en Objective-C y Cocoa, estas últimas herramientas de desarrollo para Mac.

Objective-C  es un lenguaje basado en C y echo en C, por lo cual permite cualquier sintaxis de C común, pero con la gran diferencia que es un lenguaje orientado a objetos.

Objective-J es un lenguaje basado en Objective-C y echo en javascript, por lo cual permite javascript puro en cualquier parte de su estructura, es decir que si queremos hacer algo que no sepamos hacer con Objective-J lo podemos hacer con javascript sin ningún problema.

Cappuccino fue creado por www.280north.com, como tesis doctoral de Francisco Tomalsky , para conocer un poco más acerca de Cappuccino podemos ver la siguiente presentación.

http://280slides.com/Viewer/?user=56&name=Google%20Tech%20Talk

Aplicaciones hechas con Cappuccino.

Cappuccino cuenta con dos grandes aplicaciones que para mi gusto muestran el potencial de este framework , es asombroso lo que se puede hacer en web, y lo fácil que se puede hacer con las herramientas adecuadas.

280 Sildes

Es una aplicación que es como PowerPoint de Windows pero en línea. En esta aplicación se pueden hacer presentación como si se estuviera usando PowerPoint además posee opciones de exportación a  diferentes tipos archivos.

Atlas

Esta aplicación es una obra maestra  desarrollada con Cappuccino, a mis gusto revolucionara la manera en que se desarrollan aplicaciones web en la actualidad. Véanlo por ustedes mismos.

http://www.viddler.com/explore/boucher/videos/1/

Bueno espero que después de este post se aclaren algunas dudas acerca de estas nuevas impresionantes tecnologías.

Introducción

Este es mi primer post, en él voy a comentarles el contexto en el que se desarrollará este blog.

Principalmente es un blog dedicado al aprendizaje de tecnologías web (Cappuccino y ExtJS), que a mí en lo personal me han fascinado, estas tecnologías son para mi gusto las mejores que he visto para desarrollar aplicaciones web robustas, completas y con interfaces sumamente agradables.

ExtJS, es el primer framework con el que empecé a desarrollar aplicaciones web, es un framework que vale la pena aprender y la gran comunidad que posee lo hace un framework relativamente fácil de aprender y extraordinariamente completo. En el sitio oficial encontrarán toda cantidad de información y respuestas al 99% de sus dudas ¡se los aseguro! En la actualidad cuento con una aplicación en versión Beta desarrollada con este framework.

Motors en una aplicación que muestra las capacidades que posee este excelente framework, el proceso de desarrollo fue relativamente sencillo. La parte del front-end fue desarrollada totalmente con ExtJs y desarollada por mi parte, en la parte del back-end se utilizo php y fue desarrollada por otro desarrollador experto en php (“un amigo”). La aplicación se encuentra en línea en la siguiente dirección www.ilaboratorios.com/motors.

Cappuccino, este framework me dejo impresionado desde el primer momento en que lo vi, es totalmente asombroso lo que los señores de Cappuccino están logrando. En este momento estoy muy contento y ansioso por probar su próxima liberación” Atlas”. Desde mi punto de vista es como el desarrollo de aplicaciones web en general debería ser, dejar de preocuparnos de  las interfaces (“DOM, CSS, HTML”) y preocuparnos por la funcionalidad. Los señores de Cappuccino así como muchos otros han demostrado que actualmente la barrera que divide a las aplicaciones de escritorio con respecto a las aplicaciones web está desapareciendo, es posible ahora hacer casi cualquier cosa que anteriormente solo se podía realizar con aplicaciones de escritorio un claro ejemplo son Google Maps y 280Slides. Estas aplicaciones son solo algunas de las muchas que muestran lo que ahora es posible realizar.

En este blog nos enfocaremos principalmente en Cappuccino y su lenguaje Objective-J, pero también hablaremos de ExtJS asi como de aplicaciones web en general.

Como se habrán dado cuenta aquí vamos a crear documentación en español útil sobre estas tecnologías debido a que actualmente la documentación en español sobre Cappuccino es muy escasa o casi nula L, con respecto a ExtJS debido a su etapa de maduración como un framework bastante estable y robusto la documentación en español en la red es bastante buena y en mayor cantidad. Actualmente conozco sitios muy buenos en los que encontrarán información muy completa con la cual podrán iniciar o continuar su camino.

www.quizzpot.com

www.extjses.com

Para Cappuccino en el sitio oficial www.cappuccino.org existen tutoriales en ingles que ayudan y nos muestran las capacidades de este framework, y si el Inglés no es un problema ellos tienen un canal IRC en el cual brindan ayuda, el canal IRC se encuentre en su sitio oficial también.

Espero que la información que aquí se publique les sea de ayuda y aprendamos juntos estas excelentes tecnologías.