Proceso estructurado para desarrollo de aplicaciones web

Hace un tiempo ya encontré un artículo muy bueno que trata de un proceso estructurado para el desarrollo de aplicaciones web, como ya lo dice el título de este artículo. De modo que acá reproduzco ese contenido en español, espero que no le moleste a Antonio Lupetti, pero debo confesar que es un artículo excelente. A continuación el artículo.

Desarrollar aplicaciones web es un trabajo duro que requiere mucho tiempo que tienes que gastar haciendo miles de cosas. Si no utilizas un enfoque metódico, en especial un proyecto complejo, corres el riesgo de perder la perspectiva del proyecto y perder tu tiempo por nada.

Este artículo ilustra un proceso estructurado que puede ayudarte a simplificar el enfoque para desarrollar tus aplicaciones web, ahorrando tiempo y haciéndolo de forma eficiente.

Descarguen el documento N1 | Structured process you must know to develop a web application


Fases principales del proceso

En un proceso genérico para el desarrollo de aplicaciones web pudes identificar cinco fases principales:

Definición de Requisitos
Diseño
Ejecución
Prueba
Liberación



Planificación y revisión es una "fase permanente" que siguen los procesos de desarrollo definiendo un plan de proyecto compuesto por una lista de actividades las cuales tienes que revisar durante la ejecución del proyecto. Para cada actividad se debe definir un conjunto de información que servirá para su revisión, por ejemplo:

- responsable
- duración
- costos
....

Denle un vistazo a estos artículos que escribí hace algún tiempo acerca de como implementar un plan de proyecto con un diagrama de Gantt usando Excel o Google Spreadsheets.

Como organizar tu plan de proyecto
Plantilla de diagrama de Gantt en Excel
Implementando un plan de proyecto y gestionando actividades con Google Spreadsheets.


1. Definición de Requisitos

In esta primera fase debes definir el alcance y necesidades de tu aplicación web en términos de lo tu aplicación debe hacer, las principales funcionalidades y requisitos técnicos:

Alcance

Para definir el alcance de tu aplicación web es suficiente con recopilar una lista detallada de las funcionalidades con una descripción clara. En este punto no es importante "cómo" se realizara esto pero si el "qué" es lo que se debe realizar.

Necesidades

Analizar las necesidades es una parte crucial del proceso de desarrollo. En este paso debes estimar tu tráfico potencial, escoger un lenguaje de lado del servidor (PHP, ASP, Coldfusion...), bases de datos, seleccionar un proveedor de servicio de hospedaje... No debes sobrestimar/subestimar tus estimaciones. Evalúa cada cosa con un balance adecuado entre tiempos, costos y objetivos.


2. Diseño

Después de la fase de definición de requisitos, debes "diseñar" tu aplicación con un proyecto bien claro. En esta fase puedes identificar los siguientes pasos:

Diseño: Mapa de la Aplicación
Un mapa de la aplicación contiene solamente información significativa y esencial acerca de la estructura de tu aplicación: paginas (representadas como bloques) y principales relaciones entre ellas. Tu mapa de aplicación debería ser algo así:

De esta forma tienes un mapa con algunas "ubicaciones" (páginas) y una "ruta" (relaciones entre páginas) las que sencillamente debes seguir en orden para proceder, página por página, para implementar tu aplicación en la siguiente fase. De esta forma ahorraras mucho tiempo, teniendo claro e la mente que es lo que debes implementar.

Diseño: Base de Datos
Ahora es el momento de diseñar la base de datos para tu aplicación. Una forma simple de hacerlo es usando modelos Entidad-Relación. En general puedes seguir este orden: define primero tablas, luego atributos y relaciones entre tablas. Tu modelo ER debería parecerse a este:

1:1 expresa la cardinalidad de una relación (en este caso por ejemplo 1 usuario es asignado solamente a 1 tarea, 1 usuario vive solamente en una ciudad). Para más información acerca de este tema revisar en mis artículos más viejos:

Definiendo el modelo de entidades y relaciones
Un enfoque correcto para definir relaciones entre tablas de base de datos
10 artículos útiles acerca de diseño de bases de datos

Diseño: Estructura de la Página

El siguiente paso es hacer una maqueta de tu página, identificando todas las secciones principales usando un nombre (por ejemplo #header, #navbar, #mainContent, #sidebar).

Diseño: Lenguaje del lado del servidor
Teniendo en mente la orientación a objetos para el desarrollo de tu aplicación, puedes definir clases, funciones y toda la funcionalidad el lado del servidor que necesites. Recuerda ... esto no es la "ejecución" pero si una forma de tener una "guía" para o que deberás implementar en la siguiente fase.

Diseño: JS Framework
En este paso seleccionamos un JavaScript Framework (jQuery, Scriptaculous, MooTools...), que proveería las funcionalidades que quieres implementar (arrastrar y soltar, animación, efectos ...) recopilando una lista de que fucnionalidades específicas están relacionadas con una o más páginas en tu aplicación.

En este punto la fase de diseño esta completa. Puedes iniciar con tu ejecución.


3. Ejecución

Ahora el verdadero reto porque "ejecución" es la realización de tu aplicación. Puedes dividir esta fase en los siguientes pasos:

Ejecución: Base de Datos
Crea una nueva base de datos y escribe el código SQL para definir tus tablas, atributos y relaciones. En el pasado dedique algunos artículos a este tema. Revisen los siguientes enlaces para mayor información:

Como usar PHP y SQL para crear tablas de base de datos y relaciones.
Creación de tablas y relaciones con SQL.

Ejecución: HTML
Usa la maqueta de la página para implementarla en código HTML.

Este es el momento para adicionar al HTML todos los elementos que necesites en las secciones identificadas durante la fase de Diseño. Por ejemplo si las secciones de contenido principal tiene un artículo con un título, un texto en el cuerpo y algunas etiquetas, agrega estos elementos:

Ejecución: CSSUna vez lista la estructura principal, inicias a escribir código CSS para adicionar estilos a tu aplicación. Si necesitas algunas sugerencias de como escribir mejor el código CSS revisa alguno de estos artículos:

CSS: enfoque semántico en convención de nombrado.
Guías útiles para mejorar tu CSS y su mantenibilidad.

Ejecución: Lenguaje del lado del servidor
Implementa las clases de la aplicación, funciones, interacciones con la Base de Datos, consultas, y cualquier cosa que requiera interacción del lado del servidor.

Ejecución: JavaScript
Implementa las fucnionalidades AJAX usando el framework que escojiste en la fase de diseño.


4. Prueba

Durante esta fase debes someter el código de tu aplicación a varias condiciones de ejecución (por ejemplo diferentes navegadores). Tu objetivo es detectar todos los errores en tu aplicación antes del lanzamiento final.

Recuerda, este proceso debe ser meticuloso y requiere mucha paciencia. Probar cada página y cada funcionalidad (también en este caso puede ayudarte tu mapa de aplicación para proceder con cierto orden). Si encuentras un error durante la pruebas de ejecución, corrigelo modificando el código y entonces realizas la validación final (una prueba posterior) del código.

5. Liberación o lanzamiento


¡Finalmente estas listo para lanzar tu aplicación! Publícala en un directorio de prueba y realiza una prueba final. Si todo funciona correctamente entonces procede al lanzamiento final.


* El contenido de este artículo, incluyendo imágenes y referencias, es una traducción de original que puede encontrarse en la siguiente dirección:

http://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html

PHP 5.+ el C++ de la web

Me parece una analogía interesante este título, porque C++ es uno de los lenguajes de programación mas extendidos de geográficamente hablando y en lo que a usos y aplicaciones compete. Casi cualquier software que podamos imaginarnos que utilizamos hoy guarda alguna relación con este lenguaje. Esto es porque compiladores, interpretes, maquinas virtuales, frameworks o sistemas operativos esta desarrollado usando C, C++ o algún descendiente o derivado de estos.

Pero el objetivo no es hablar de C++, hablaremos de PHP. Entonces ¿porque la analogía? se preguntaran algunos. Pues básicamente porque PHP es el lenguaje más extendido en la web. Cuando el internet era como el viejo oeste, antes de que se descubriera el oro en el, PHP hacia su debut en este terreno. La evolución de PHP me parece un tanto curioso ya que nace para la web y luego se va convirtiendo en un lenguaje de propósito general. Casi la mayoría de los lenguajes de programación ha seguido un curso inverso al de PHP, desde lenguaje de propósito general hasta desarrollar extensiones o versiones para web. Mucho de lo que se usa en la web esta escrito en parte en PHP, entre esto encontramos paneles de administración, clientes de bases de datos, clientes de correos, servicios de datos, gran parte de nuestras páginas favoritas, CMS, etc.. para darnos una idea.

Un dato curioso

Casi siempre que me encuentro con un viejo desarrollador que programa con PHP noto en el una cierta resistencia al uso de las nuevas características del lenguaje. Las encuentra poco relevantes o simplemente no esta interesado en ello. Es como si para ellos el tiempo se hubiese congelado en la evolución de este lenguaje, y avocan siempre por sus ancestros menos evolucionados. Pues les tengo una noticia, la extinción es algo inminente, porque es el curso que toma todo en el mundo, desde los seres vivos hasta la tecnologías se ven relegados por sus versiones mejor adaptadas, y el rechazar esta realidad nos convierte en parte del conjunto destinado a extinguirse. No digo que no haya que saber de lo que precede a lo actual, "nunca hay que olvidar de donde se viene", pero al igual que la vida en nuestro entorno de trabajo no podemos vivir en el pasado mientras el mundo exterior continua su marcha.


Continúan las semejanzas

Dirán algunos ¿en que se parece PHP a C++? Pues les diré que tienen algunas características comunes. Ambos soportan programación procedimental, funcional y orientado a objetos, aunque hay diferencias en la forma en que implementan la orientación a objetos dado que este desarrollo de PHP se ha visto más influenciado por lenguajes como Java. Al igual que C y C++, PHP cuenta con un gran conjunto de librerías y extensiones para todo tipo de interacciones, servicios web, interacción con el shell del sistema operativo, manipulación de archivos, edición de imágenes, tratamiento y manipulación de cadenas y más.

Creo que una de las grandes ventajas de en lo que a funcionalidad se refiere es el número de librerías para interacción con bases de datos. En este sentido el desarrollo de PDO puede darle una ventaja más en esto al pasar de muchos controladores para cada SGBD a una capa de abstracción de acceso a datos más ligera y fácil de implementar para cada manejador, es lo que JDBC en Java, provee por ahora menos funciones pero permite una interacción mas limpia y resulta fácil de migrar. Algunos aducirán que MDB solucionaba esto, pero esto es algo que no es un script es parte del lenguaje en si mismo, así que dejemos de intentar reinventar la rueda.

Otras de las similitudes es que PHP esta disponible en casi todas las plataformas, puede bien ser usado como interprete o como modulo con un servidor web entre estos IIS y Apache. es decir que pueden correr sus programas en donde sea. Gracias a algunas extensiones es posible programar aplicaciones de escritorio utilizando PHP GTK.

El soporte para programación orientada a objetos es relativamente reciente, en las últimas versiones estables disponibles, estas características están bastante maduras. Aunque para aquellos que conocieron como se trabajaba con clases y objetos ne la versión 4 se darán cuenta de que es algo muy distinto en versión 5 o superior. Pero no es mi objetivo mostrar acá las nuevas características del lenguaje, es mejor si eso lo investigan uds. mismos consultando el manual siempre disponible en php.net. Hablaremos sin embargo de algunas de las características y tecnologías prometedoras y algunos buenos y malos hábitos.



Dejando los malos hábitos


Otras de las semejanzas PHP - C++ es que si no se tienen buenos hábitos de programación y codificación, y no suele documentar mucho su código, el mantener y depurar un programa o modulo puede resultar una tarea infernal. Para los que han trabajado con C o C++ se darán cuenta de que muchos de los errores provienen de aspectos mal gestionados o no gestionados por el programador como la memoria, los tipos de datos, lo valores contenidos en  las variables en un momento dado y otros. En PHP se tienen casi una cantidad de problemas semejante, el hecho de que PHP sea un lenguaje débilmente tipado conlleva una cantidad de problemas con ello, es una arma de doble filo.

Por ejemplo, si bien puedo utilizar una variable para contener distintos tipos de dato al realizar operaciones con la misma necesito validar el tipo de dato contenido, su previa declaración y existencia, para saber si es posible o no aplicarle o utilizarla con una función en particular. Igualmente el retorno de funciones y métodos no tiene un tipo especifico, si lo tiene. con lo que no se puede tener certeza del resultado o del valor retornado, si se desea utilizar posteriormente. Existe ademas una cierta cantidad y tipos de errores que pueden producirse en tiempo de ejecución que no causan un termino o la no ejecución de un bloque de código, lo que puede resultar en que se llegue a un resultado no deseado o se desencadene un error que se pueda frenar la ejecución.

Análogo a los punteros de C++ en PHP el uso extensivo de matrices es uno de sus grandes potenciales y también una de los grandes problemas, por falta de una correcta gestión. Debemos tener presente siempre que en entornos de producción hay limites a la cantidad de memoria disponible, aunando a esto el uso incorrecto de las claves se pueden llegar a tener muchos problemas al usar matrices. PHP no es Fortran en lo que a gestión de matrices y potencia de cálculos vectoriales se refiere, pero cuenta con una gama de funciones bien surtida para la manipulación, búsqueda y ordenación ser refiere.

Otra mala práctica, remanente en unos pocos programadores, es el embeber html  u otro código dentro del script php. He dicho embeber html en el php y no embeber php en el html que resultan dos cosas diferentes, algo que algunos terminan confundiendo. El embeber es una práctica que debe limitarse al mínimo posible. No solo porque no es "elegante", sino porque ya hay motores de plantillas más o menos maduros que facilitan esto, porque facilita el dar mantenimiento al código y separar nuestras capas de datos o modelo de negocios de nuestra capa de presentación, hace mas simple los desarrollos futuros.

Debemos aprender a escuchar y poner en práctica las recomendaciones de Zend y la comunidad de desarrolladores. Si una función esta obsoleta, créalo es obsoleta y use el reemplazo. Si se dicen que una determinada variable es el remplazo de otra úsela en sus programas. Si esta usando una versión de PHP no intente hacerlo funcionar como una versión inferior a menos que sea absolutamente necesario. Al menos lea las referencias de funciones, novedades y diferencias de la versión que utiliza. Usemos las cosas para lo que son y como debe ser, las expresiones booleanas deben recibir valores o expresiones booleanos, los que lo hacen saben de lo que les hablo, usar variables no definidas, con valores nulos, numéricos o de cadena cuyo valor pueda ser evaluado como booleano. Se deben usar los tipos de dato correctamente, validar o forzar su tipo si es necesario y evitar las asignación de datos de otro tipos en esas variables. Debe tenerse presente la versión para la que se esta escribiendo el código. A partir de PHP 5 existe un nuevo nivel de error E_STRICT que incluye tipos de errores de tipo estricto de la versión esto puede ayudarnos a detectar y corregir aquellos segmentos en que estamos usando código no acorde a las últimas versiones estables, también esta disponible la función version_compare que algunos herramientas CASE incluyen en el código generado para validar la ejecución del en dependencia de la versión del interprete.

Aprendamos a trabajar con objetos, como debe ser. No mezcle sintaxis de versiones diferentes.  Establezca el tipo de objetos en los argumentos de los métodos. Saquemos provecho real de características como la visibilidad, la unificación de constructores y los métodos especiales, asignemos los valores por defecto a los parámetros que puedan ser opcionales. Dejemos de usar los objetos como arreglos, prácticas como la asignación y uso de atributos no declarados no son recomendables. Procuremos mantener separadas nuestras capas de presentación, modelo de negocios y acceso a datos. Saquemos máximo provecho de los paradigmas de programación soportados por el lenguaje utilizando el tipo adecuado al contexto o problema solucionar.

Buenas prácticas

Finalmente creo que estos dos lenguajes (PHP y C++) si tienen varias similitudes, no solo en los problemas que se presentan al programar con ambos, sino también en las bondades que cada uno provee. PHP es un lenguaje con gran potencial, pero al igual que las demás cosas creadas por el ser humano todo depende del uso que se le de. Con el Objetivo de que mejoren en los aspectos que necesiten les dejo un par de enlaces donde pueden explorar las mejoras prácticas que cada quien puede usar en sus proyectos o en su estilo de programación. Mejores prácticas de desarrollo en PHP, Guía de buenas practicas en PHP, Manual de phpDocumentor, Zona PHP - ¿Qué esperar de PHP 5 ?.

JQuery - Desarrollo de Interface Gráfica de Usuario

JQuery es una framework javascript que posibilita la interacción con el DOM(Document Object Model) de una forma simple e independientemente del navegador, es distribuido bajo licencia MIT y GPL. Esta librería cuenta con amplia documentación y la referencia de la API es sumamente útil. La cantidad de complementos y extensiones escritos para extender su funcionalidad básica y crear funciones avanzadas es  simplemente increíble. Es realmente ligero y el conjunto de funciones básicas es relativamente reducido, en realidad esta hecho para "escribir menos, hacer más" tal como lo dice el propio lema de este framework que esta conquistando campo en el desarrollo web.

Este artículo no tiene como objeto ser una referencia, sino abrir sus mentes a las posibilidades de uso. Intentare mostrarles algunos de los usos y extensiones útiles.

Uno de los usos más populares es para el desarrollo de interfaces de usuario, jquery cuenta en esta área con varios proyectos que pueden darles muchas ventajas y además han sido ya ampliamente probados y mejorados.

JQuery UI - provee abstracciones para interacción de bajo nivel y animación, efectos avanzados y widgets tematizables que pueden ser utilizados para construir aplicaciones web altamente interactivas. Construida sobre jquery, JQuery UI incluye un framework CSS robusto diseñado para crear controles personalizados. El framework css incluye un conjunto de clases que cubre las necesidades mas comunes de las interfaces de usuario. Cuenta ya con una librería de temas prediseñados y un editor de temas, que les permite crear su propios estilo de controles.

Además de diversos efectos y control de interacción, entre los controles encontramos acordeones, pestañas, listas de auto completado, botones, selectores de fecha, cuadros de dialogo, controles deslizables y barras de progreso. Cada uno de esos controles cuenta con una conjunto de opciones y métodos que permiten especificar su comportamiento y aspecto, cada documentado y con uso ejemplificado.

Existen también otras extensiones para interfaces de usuario no tan conocidas pero si muy útiles, entre estas:

jQuery MultiSelect Filter UI Widget - crea un control avanzado basado en una lista de selección simple, y provee varias opciones que nos permiten trabajar con los datos seleccionados y realizar acciones en los eventos den control, además se encuentra perfectamente integrado con los estilos del jquery ui en caso de que estemos utilizando varios controles de este framework. Cuenta adicionalmnte con una extensión para crear filtros dinámicos de las opciones.

jqGrid -  Es una de las mejores y más completas extensiones para representación de datos tabulares, se integra perfectamente con los estilos del jquery ui. Tiene un gran variedad de métodos y utilidades, incluyendo formularios y filtros dinámicos, criterios de ordenación, eventos sobre filas columnas, etc. Permite obtener y cargar datos desde diversas fuentes y formatos entre estos json, xml, arrays javascript. Otras extensiones que facilitan el manejo de tablas maestro detalle. Ademas se puede integrar controles JQuery UI a los campos con gran sencillez. Admite la conversión desde tablas html a un grid control, entre otras bondades que uds. mismos pueden explorar mas fondo.

Validación de formularios - Una extensión para validación de formularios que integra una serie de reglas ya definidas vara validar correos, url, numeros, rangos, cantidad de campos, campos requeridos, fechas. Además permite personalizar y traducir los mensajes de errores, declarar nuestras prpopiar reglas y mensajes, agregar nuevos métodos para validar, y realizar validaciones de forma asíncrona.


Sliders con Cycle - este plugin facilita la creación de contenido en forma de presentación, se pueden lograr cosas tan avanzadas como podamos, incluye un buen conjunto de efectos básicos, se pueden definir o utilizar controles para navegación y cargar contenido de forma dinámica.

Es necesario siempre contar con buenas referencias de la APLI y acá les dejo un par que suelo consultar en caso de duda, además claro de la referencia oficial.

Visual JQuery, JQuery Deconstructed

Por acá una lista un poco mas amplia de los plugins que he probado. Uds. pueden buscar y encontrar los que más se adecuen a sus necesidades.

Menús y otras interacciones

Superfish
Menus colapsables
Menus flotante estilo ipod


Selector de color

ColorPicker
Farbastic


Árboles

JQuery Tree
TreeView
Otro menu de arbol
Tree File Explorer


Media

jQuery Media Plugin
jQuery lightBox


Galerías y más

LightBox
Galleriffic
Jcrop
Jcarousel

Motores y lenguajes de platillas para PHP

Los motores de plantillas resultan hoy un componente sin el cual sería prácticamente inconcebible un framework o cms moderno. A pesar de esto el avance en lo que respecta a reducción del acoplamiento con las tecnologías utilizadas y cohesión con otros componentes del framework o cms, aun no hay tantos motores como se podría pensar.

Smarty es uno de los motores de plantillas más populares para PHP, quizá porque esta bien documentado y cuenta con un gran numero de extensiones que permiten generar varios componentes de la interfaz con solo configurar unos pocos parámetros. Aunque en lo personal considero que más que separar las capas este motor agrega otra, ya que el tratamiento de variables y el funcionamiento mismo siguen altamente relacionados con la plataforma.

En este artículo sin embargo vamos a hablar de dos tecnologías con buenas perspectivas de alcanzar un uso extenso en largo plazo.


TAL (Template Attribute Language)

Es un lenguaje de plantillas usado para generar paginas HTML y XML. Fue desarrollado inicialmente para Zope pero es usando en otros proyectos Python. Cuenta con una expansión del lenguaje METAL (Macro Expansion TAL) que permite reutilizar código de otras plantillas de un forma muy practica. Este lenguaje de plantillas cuenta ya con implementaciones en PHP, JavaScript, Java, Perl y hojas d estilos XSL. Entre sus bondades encontramos el hecho de que facilita la edición de las plantillas por diseñadores desde los editores convencionales, sin que estos necesiten mayores conocimientos del lenguaje y permite migrar de plataforma con un mínimo de modificaciones.



XML y XSL(Extensible Stylesheet Language)

XML es una de los lenguajes mas utilizado para el intercambio de datos. Tiene la ventaja de estar basado en estándares y es completamente legible por una gran varidad de interpretes, cuanta con librerías para tratamiento y manipulación de documentos en la mayoría de los lenguajes utilizados para el desarrollo web. Al ser totalmente independiente no solo de la plataforma y de las librerías de manipulación de documentos en cada lenguaje permite centrarse solo en el contenido y su semántica, delegando la forma en que los datos serán procesados y presentados a la plataforma a utilizar.

En el caso de las web los XSL constituyen un forma excelente de aplicar transformaciones a los datos convertir un documento XML que contiene un conjunto de datos en una web en cualquier formato imaginable con una mínima intervención del lenguaje o plataforma. Estas tecnologías tienen grandes posibilidades de ser algunas de las más utilizadas, con el aumento del las transferencia asíncronas de datos y el creciente numero de aplicaciones y servicio que comparten un mismo conjunto de datos a través de la red.


Pros y contras


Estos lenguajes facilitan el intercambio de datos entre distintas aplicaciones, incluso el uso de los mismos datos de formas diversas. Ademas de que los formatos de estos lenguajes obligan a los desarrolladores a crear aplicaciones cuyas capas de presentación y del modelo de negocios se encuentren realmente separadas. Algo que frecuentemente vemos al desarrollar utilizando Smarty es que los programadores o desarrolladores legan muchas cosas al motor de plantillas. Se agregan nuevas funciones, mucha de la evaluación de condicionales se embebe en la platilla, se utilizan y evalúan variables no declaradas, entre otras cosas. Todo ello no solo porque PHP lo permite si no producto de malos hábitos de programación.

A pesar la gran importancia que dan a la homologación que persiguen estas tecnologías alternas, algunas de sus implementacines desafortunadamente aun carecen de una gestión de cache robusta; pero estos es algo en lo que se esta trabajando y de figura como una alternativa para la web.

Tecnologías como estas y otras semejantes ha demostrado de sobrada manera que en las web aquellas tecnologías que se adapten mejor a una gran variedad de usos independiente mente de la plataforma ocupara con el tiempo un lugar preponderante en los desarrollos de aplicaciones y nuevas tecnologías basadas en web.