Hoy en día tenemos una cantidad inmensa de browsers Firefox, Internet Explorer, Google Chrome, Safari, Opera, Konqueror, Epiphany, Flock, SeaMonkey, etc. Internet Explorer es hoy en día el browser más utilizado, pero va en caída.

Proceso de Desarrollo

Dado que existen muchos browsers debemos conocer las relaciones que existen entre los mismos. Para facilitar la tarea podemos clasisficarlos por el motor de renderizado (layout engine) que utilizan. El motor del web browser (llamado a veces motor de layout y motor de renderizado) interpreta los lenguajes de marcado (markup languages) como HTML y XML, y los muestra en la pantalla.

Web Browser Engine (Motor del Web Browser)

Al conocer los principales motores de Renderizado podemos predecir (aunque sea vagamente) como se verá nuestro diseño en diferentes browsers, aunque de todos modos lo ideal es probarlos. Entre los más importantes tenemos

Webkit

Browsers que lo utilizan: Google Chrome/Safari

Webkit es un motor de renderizado originalmente creado como un fork de KHTML para ser parte de Safari (de Apple). Webkit es portable y es Open Source. Es utilizado en Safari en Windows, Mac OS X y iPhoneOS. También es utilizado en Adobe AIR y Google Chrome.

Gecko

Browsers que lo utilizan: Firefox

Desarrollado por la Mozilla Corporation, Gecko forma parte de Firefox y los productos de Mozilla en general (Thunderbird, etc.). Es utilizado en otros browsers además de Firefox como Camino, Flock, SeaMonkey, entre otros. Es portable y Open Source

Trident

Browsers que lo utilizan: Internet Explorer

Introducido en Internet Explorer 4.0, Trident forma parte de la familia de Internet Explorer de Microsoft. Es utilizado además en otras aplicaciones como Google Talk, Microsoft Outlook, MSN Messenger, Windows Media Player y otros. Es de licencia privativa.

Motores de Javascript

Las aplicaciones web hace un extenso uso de JavaScript los browsers modernos cuentan con su propio motor de Javascript. Pero gracias a los frameworks JavaScript como jQuery, ExtJS, Mootols, etc, este no representa un gran problema como si lo es el renderizado del layout de la aplicación. Entre los motores más importantes tenemos a V8, Rhino, Chakra.

También te recomendamos leer:

RockMeIt, un nuevo browser social

Sin el apoyo de tenerlo promocionado en la página de Google, o de tenerlo instalado por defecto en tu sistema operativo, las posibilidades de que RockMeIt tenga éxito parecen muy pocas, recordemos la historia de otros browsers que pelean/peleaban por nuestra atención.

Google Chrome es el 3er navegador más utilizado

Google Chrome (4.63%) ocupa el 3er lugar en la lista de navegadores desplazando a Safari (4.46%) según el estudio de uso de los navegadores de Net Applications para diciembre.

Google Chrome Frame deja de ser beta!

El siguiente paso para el equipo de Google Chrome Frame es enfocarse en hacerlo mucho más rápido y eliminar la necesidad de permisos de administrador cuando se instala el plugin.

Es el iPhone el siguiente Internet Explorer 6?

En QuirksBlog se publicó un artículo acerca del diseño web para dispositivos móviles, “The iPhone Obsession” y está causando revuelo

Desarrollo de Aplicaciones Web basadas en PHP – Introducción

Acabaste de aprender PHP, estás listo para aplicar tus nuevos conocimientos, quieres crear una aplicación para Twitter/Facebook y subirla a Internet, momentos después te das cuenta de que sólo aprendiste cuando utilizar un “for” y no un “while”, o talvez la diferencia entre un “echo” y “print”. No estás solo, muchos hemos leído esos libros de “Aprende X lenguaje en 7 días”, pero se necesita más tiempo para conocer un lenguaje y de hecho mucho más tiempo el conocer o si quiera intuir el cómo funcionan las aplicaciones web más complejas.También es necesario tener sólidos conocimientos básicos de las Tecnologías de Internet (HTTP,FTP,SMTP,etc.) y conceptos de Seguridad para poder lanzar una aplicación web a Internet.

Parámetros de elección

Existen una serie de parámetros para tomar una decisión al momento de elegir una herramienta. Los parámetros son los siguientes:

1. Costo

Varias herramientas para el desarrollo de aplicaciones web en PHP tienen un precio por licencia/etc, por ejemplo algunas de las herramientas ofrecidas por Zend Technologies (una empresa dedicada a tecnologías PHP) y Dreamweaver tienen un costo por licencia, pero la gran mayoría de las herramientas no tienen costo alguno.

2. Características

Las características de una herramienta son un parámetro importante dado que la escasez de las mismas puede retrasar tremendamente el desarrollo de la aplicación. Se recomienda utilizar la herramienta con más características, aunque esto muchas veces hace algo más complicado el aprendizaje de la misma.

3. Flexibilidad

Es la capacidad de personalizar tu herramienta de manera que te sientas realmente cómodo con ella. Esto puede agilizar ciertos procesos en el desarrollo de la aplicación (creación de macros, etc.).

4. Documentación y Comunidad

Lo más probable es que tengamos algún problema durante el uso de nuestra herramienta y buscaremos una solución ya sea leyendo la documentación o recurriendo a la comunidad. La comunidad en si no solamente se dedica a resolver problemas (ayuda,etc.), tiene también como fin dar un mejor uso a la herramienta (creación de plugins, best practices, etc.) y compartir opiniones acerca de la misma.

5. Curva de aprendizaje

La curva de aprendizaje (en una de sus deficiones) se refiere a cuan difícil se hace aprender una herramienta si se quiere utilizarla eficazmente. Se debe considerar la complejidad de una herramienta y ver si se justifica el tiempo invertido en aprender la herramienta.

Herramientas para el desarrollo web

Los tipos de herramientas que necesitaremos para el Desarrollo de Aplicaciones Web basadas en PHP son básicamente:

1. Sistema Operativo

Todos estamos utilizando un sistema operativo, que al fin y al cabo es una herramienta más. En esta categoría tenemos a Windows, MacOSX, Linux, etc. En la mayoría de los casos no elegimos el Sistema Operativo que utilizamos en este momento (ya sea porque ya vino instalado con X sistema operativo o tengamos que usarlo por alguna razón), pero podemos cambiar y elegir el que mejor nos parezca. La elección de un sistema operativo influye en la elección de las herramientas que podamos utilizar.

2. Browser

El browser es clave para el desarrollo ya que al fin y al cabo desarrollaremos la aplicación para un usuario que utiliza un browser en específico. Como en el sistema Operativo muchas veces el browser es impuesto, pero tenemos muchas opciones. El Browser debe facilitarnos el debugging en las aplicaciones web.

3. IDE

IDE (Integrated Development Enviroment) es la herramienta con la que desarrollaremos la aplicación.

4. Servidor Web

Esta herramienta es tal vez la más compleja dada la dificultad que puede tener el configurar un servidor web con las misma características que tiene el servidor web de producción. Por lo general la instalación de las aplicaciones del servidor web dependen demasiado del sistema operativo que se está utilizando.

5. Otras herramientas

Entre otras herramientas podemos considerar a:

VCS (Version Control System). Un Sistema de Control de Versiones es vital para el desarrollo de aplicaciones en equipo e incluso cuando lo haces solo. SVN y GIT serán los que veremos en estos tutoriales.

Cliente FTP. Para poder subir nuestros archivos al servidor de producción en la mayoría de los casos tendremos que utilizar un cliente FTP.

Virtualización. Para desarrolla aplicaciones web se deben tomar en cuenta a la mayoría de los browsers, es probable que nuestro sistema operativo no soporte a todos los browsers por lo que se debe pensar en un software de virtulización para poder probar las aplicaciones web en esos browsers también.

También te recomendamos leer:

Desarrollo de Aplicaciones Web basadas en PHP – Introducción

Acabaste de aprender PHP, estás listo para aplicar tus nuevos conocimientos, quieres crear una aplicación para Twitter/Facebook y subirla a Internet, momentos después te das cuenta de que sólo aprendiste cuando utilizar un “for” y no un “while”, o talvez la diferencia entre un “echo” y “print”. No estás solo, muchos hemos leído esos libros de “Aprende X lenguaje en 7 días”, pero se necesita más tiempo para conocer un lenguaje y de hecho mucho más tiempo el conocer o si quiera intuir el cómo funcionan las aplicaciones web más complejas.También es necesario tener sólidos conocimientos básicos de las Tecnologías de Internet (HTTP,FTP,SMTP,etc.) y conceptos de Seguridad para poder lanzar una aplicación web a Internet.

20 herramientas para desarrollar rápidamente código legible

En Web Design Ledger pulican una lista de 20 herramientas para desarrollar código legible de varios lenguajes como JavaScript, CSS, etc.

50 herramientas de análisis y tracking para Twitter

Twitter tiene un ecosistema bastante amplio de aplicaciones, entre ellas las aplicaciones de análisis y tracking. Entre estas herramientas podemos nombrar a TwitterCounter, Tweetstats, TwitterGrader y otros.

28 herramientas para crear tu propio screencast

Existen varias herramientas, ya sean gratis o de pago, para poder grabar tu propio screencast fácilmente, por ejemplo Camstudio, Screen Toaster, Camtasia Studio, etc.

5 maneras para probar tu website en diferentes browsers

Es importante que un diseñador web sepa como se está desplegando su sitio web en los diferentes browsers.

El lanzamiento de Chrome OS tal vez marque un hito, ya que su propósito es que todas las aplicaciones residan en la Nube, algo que pasará tarde o temprano.

Aplicaciones Web

Las aplicaciones web son generalmente mostrados en un browser. Una aplicación tiene 2 partes:

• FrontEnd (Browser) El FrontEnd es con lo que se encontrará el usuario final, esta interfaz es el browser. El browser/navegador es clave ya que este nos puede dar la posibilidad de crear aplicaciones complejas como también restringirnos (Internet Explorer 6/7). Las aplicaciones deberán estar escritas en HTML/JS/CSS, o Flash/Flex, o Java FX, o Silverlight etc.
• BackEnd (Server) El servidor es el motor de estas aplicaciones web y casi siempre utilizan una base de datos para el almacenaje de datos. Los lenguajes de programación son variados en el backend, si el lenguaje de programación puede generar un script HTML entonces ya es un lenguaje web.

Desarrollo de Aplicaciones Web basadas en PHP

Las aplicaciones web pueden llegar a ser tan complejas como Facebook o tan simples como isFollow (hace un simple llamado al API de Twitter); lo que implica que se debe tener una idea de cómo diseñar una aplicación/sistema para un problema dado (Entender y analizar una empresa antes de crear un sistema). Para poder desarrollar aplicaciones web se necesita básicamente buenas herramientas, conceptos de desarrollo de aplicaciones (Ingeniería de Software, etc.), conceptos de diseño web, y por último, lo más importante, una idea previa de la aplicación.

Herramientas

Las herramientas son un factor clave para el desarrollo de las aplicaciones, ya que en cierta medida determinan que tan rápido puedes realizar ciertas tareas. Las herramientas pueden dividirse básicamente en:

• Browser. Entre los browsers tenemos a:
  • Firefox. El browser que tiene una extensión para todo, siendo esa su mejor característica; Firefox tiene las mejores herramientas para el desarrollo web.
  • Internet Explorer. Internet Explorer es el browser más utilizado y esto no cambiará por unos cuantos años más, es por tal razón que siempre debemos tomar en cuenta a este browser cuando desarrollemos una aplicación.
  • Chrome. El Browser de Google (cuya nueva presigna es hacer una web mejor) es el más rápido de todos.
  • Opera. Opera casi siempre es el browser con las nuevas características (aunque algo opacado con Chrome) que serán aplicadas en los otros browsers (tabs, download manager, etc.).
  • Safari. El Browser de Apple, viene por defecto en su Sistema Operativo.
• IDE (Integrated Development Enviroment). Entre los IDEs más importantes para PHP tenemos a:
  • Eclipse. Es un IDE flexible que soporta varios lenguajes de programación, trae una variedad de plugins lo que lo hacen ideal para el desarrollo web.
  • Aptana. Aptana está basado en Eclipse y trae
  • Zend Framework. Está basado en Eclipse también y fue desarrollado por la misma empresa que mantiene a PHP (Zend)
  • Netbeans. Netbeans tiene un fuerte soporte de la comunidad.
  • Dreamweaver. Parte del Creative Suite de Adobe
• Servidor Web. Tener acceso a un servidor web para pruebas es esencial para el desarrollo web. Mucho mejor es si este servidor de pruebas tiene las mismas características que el servidor de producción (versión de los programas instalados, etc.).
• Otros
  • VCS (Version Control System). Un Sistema de Control de Versiones es vital para el desarrollo de aplicaciones en equipo e incluso cuando lo haces solo. SVN y GIT serán los que veremos en estos tutoriales.
  • Cliente FTP. Para poder subir nuestros archivos al servidor de producción en la mayoría de los casos tendremos que utilizar un cliente FTP.

Diseño Web

Cuando se habla de Diseño Web se habla del Front-end, y para desarrollar la interfaz de aplicaciones web se debe tomar en cuenta los estándares que se fueron creando a medida que estas maduraban. Gran parte de estos estándares fueron ya definidos en las aplicaciones de escritorio (menú, barra de estado, etc.). Dado que las aplicaciones web tienen como interfaz al browser es necesario tener conceptos de Diseño Web (con énfasis en la Experiencia de Usuario [UX]). Podemos enfrentar los siguientes problemas si no tomamos en cuenta al Diseño Web:

• Una aplicación web puede funcionar pero es difícil encontrar las cosas.
• Una aplicación web puede tener gráficos geniales pero no es nada funcional (Mystery Meat)

Aplicaciones minimalistas

Para Google unimpressive (nada impresionante) es un cumplido. ¿Por qué?. Cuando Google lanzó la interfaz para su motor de búsqueda muchos dijeron que no les impresionó para nada, “y los widgets? y las noticias?”. El objetivo de sus aplicaciones no es que te quedes en ellas sino que las utilices de tal manera que no tengas idea de que ocurre por detrás.

El modelo mental del Usuario

Cuando uno maneja un coche probablemente no entiende cómo funciona el motor, tal vez logré entender que la gasolina tiene un rol importante, pero el funcionamiento es complejo. Es interesante que un coche sea tan complejo pero en muchas ocasiones podemos seguir manejándolos aún cuando las cosas vayan mal. Y eso es porque la mayoría de los usuarios ya tienen una idea previa de cómo funciona el coche. Se deben diseñar las interfaces de manera tal que dejen a los usuarios corregir sus errores. (Leer más en libro “Designing Social Interfaces”, pag 18,19)

Objetivo de los Tutoriales

El objetivo principal es que se obtenga una base sólida para desarrollar aplicaciones web en HTML/JS/CSS/PHP con las herramientas adecuadas. Se toman en cuenta los siguientes puntos:

• El sistema operativo principal es Ubuntu Linux, dado que los servidores en los que se implementan las aplicaciones web utilizan en su mayoría Linux.
• El browser utilizado será Firefox por la versatilidad de sus addons.
• Se utilizará tanto Aptana como Netbeans como IDE para el código y las aplicaciones.
• Se hará énfasis en herramientas de código abierto y disponibles para todas las plataformas de desarrollo.

Contenido de los Tutoriales

En los tutoriales se verán 3 temas importantes:

1. Herramientas

Un resumen de las herramientas utilizadas al Desarrollar Aplicaciones Web basadas en PHP

2. Conceptos básicos

Conceptos de OOP (Object Oriented Programming) en PHP y JavaScript, así como el modelo MVC (Model – View – Controller) en PHP con CodeIgniter.

3. Construcción de un Framework en base a CodeIgniter

Se explicará la construcción de un pequeño Framework por encima de CodeIgniter.