Lista de Herramientas de desarrollo web

Como desarrollador e ingeniero de desarrollo de aplicaciones web, y con la experiencia ganada en los años previos usando software open source, he llegado a un utilizar un conjunto de herramientas que para mi son fundamentales y mi constituyen la base de desarrollo de aplicaciones. En esta lista me limitaré a los desarrollos con php, mysql y apache.Herramientas de Edición

Eclipse: Eclipse es uno de los editores open source más utilizados en entornos java junto con otras herramientas como netbeans. Pero no solo se limita a este lenguaje. Eclipse tiene un módulo para php llamado PDT (PHP Develpment Tool) (descargar PDT). Es un framework abierto que puede es extendido por la comunidad open source y tiene diferentes módulos que permiten cubrir todo el ciclo de vida de los proyectos. Este módulo de PHP es muy completo y da un soporte al desarrollo orientado a objetos excelente que no deja nada que envidiar a otras herramientas comerciales. Para que el sistema de reconocimiento de clases funcione adecuadamente, lo único que hay que hacer es documentar adecuadamente las clases y usar las directivas de documentación como @return para los métodos que devuelven objetos.

Scite: Editor de código basado en texto, contiene plugins para reconocimiento de muchos lenguajes de programación (ADA, C++, Perl, PHP, Javascript, etcc), algunas funciones de completado e indentación de código. Es muy útil para realizar pequeños cambios que no requieren de un entorno gráfico completo. Es una buena alternativa al Notepad para otras labores de edición de texto en windows.

Herramientas Complementarias

Firefox: Es una herramienta para mi fundamental e impresindible. Actualmente se tienen muchos plugins para desarrolladores que facilitan las tareas enormemente. Lo verdaderamente importante es ver Firefox como algo más que un navegador, para ello, voy a listar a continuación la lista de plugins que a este momento son importantes para el desarrollo de aplicaciones web.

  • view source chart: Crea un diagrama en capas de la estructura HTML de una página web

  • jsview: Permite ver el código de las páginas externas (enlazadas) a una página web. Como hojas de estilo, ficheros de javascript, etc.

  • FireBug: Herramienta de depuración de javascript. Muy útil pues permite visualizar los errores y cargar el código javascript.

  • fireFTP: Integra un cliente de transferencia de ficheros. Trabaja con SSL, permite hacer sincronización de directorios etc.

  • Web Developer: Esta extensión ofrece herramientas a los desarrolladores web para aprender y depurar sitios web.

  • del.icio.us Complete: Herramienta para guardar y gestionar tags en del.icio.us

  • IP: Muestra la dirección IP de salida a Internet

  • Extensión para medir areas de página

  • Server Spy Permite identificar el tipo de servidor web donde nos estamos conectando. (Ej. Apache 2.2.2, IIS etc).

  • ColorZilla Este plugin permite “capturar” valores de colores de una página web mediante un gotero. Muy útil para los diseñadores.

  • JavaScript Debugger: Depurador de javascript. Permite colocar puntos de ruptura y hacer seguimiento paso a paso de la ejecución de código. Excelente para cuando los scripts cascan y no sabemos exáctamente donde puede estar el fallo. Es un complemento de FireBug que tiene una consola muy buena para ver los errores de javascript.

De la lista anterior, los que yo más utilizo en desarrollo son, FireBug, fundamental para el desarrollo de aplicaciones ajax, pues nos da una vista de cada petición que se envía al servidor, los parámetros pasados y la respuesta recibidia. Adicional a ello, nos ofrece información sobre el peso de la página (tamaño), lista de ficheros css y javascript que se descargan, imágenes y otras herramientas.

Como segunda herramienta imprescindible es la herramienta de desarrollo web, de esta herramienta utilizo principalmente tres funciones, las relacionadas con las hojas de estilo en cascada que permite ver que estilos tienen los elementos html que visualizamos (permite “depurar” las hojas de estilo), la herramienta de formulario para determinar nombres, campos ocultos, etc y la validación de código local, para validar nuestro código generado (Depurar html).

La herramienta de ColorZilla y la extensión para medir áreas son útiles para los diseñadores pues permiten capturar colores y obtener los valores rgb y medir áreas para la elaboración de imágenes. del.icio.us aunque no es una herramienta de desarrollo, para mi es fundamental para no perder la referencia a tutoriales, guias, blogs, herramientas, metodologías y demás que en cualquier momento podemos necesitar.

Herramientas de Soporte

Subversion: Servidor de control de versiones, es altamente recomendable que por pequeño que sea un proyecto, mantengamos un sistema de control de versiones. Subversion tiene diferentes aplicaciones cliente, yo utilizo tortoise svn.

Argo UML: Herramienta de diseño con UML, es una herramienta open source que permite documentar nuestros desarrollos orientados a objetos. Lo único que actualmente no permite hacer y que es fundamental son los diagramas de secuencia. O por lo menos, yo no he encontrado una forma de hacerlos adecuadamente.

Herramienta de Gestión de bugs: Fundamental este tipo de herramientas para hacer u nseguimiento a los fallos encontrados y nuevas características pedidas por los clientes. FlySpray es una buena herramienta y la que uso actualmente.

Herramienta de Documentación:
Para escribir los proyectos, documentos y demás yo personalmente utilizo dokuwiki y wordpress cada uno con propósitos diferentes.

Mysql 5.0 y Apache en Windows Vista

He recibido como regalo un portatil nuevo con Windows Vista Bussiness Edition y lo he stado poniendo a punto el fin de semana. Soy un apasionado por el uso de Apache, PHP y Mysql y me puse a la tarea de instalar estas herramientas de la manera tradicional, es decir, descargando uno por uno y configurandolos independientemente.

Primero intento instalar el apache 2.2.4 que en mi XP corre de maravilla y se instala sin problemas, y en Vista al final de la instalación, no deja registrar el servidor web en como servicio. Luego intento instalar Mysql 5.0 y sigue el problema, el instalador nunca termina y al ejecutar el asistente de configuración de instancias este no funciona y se queda en una ventana con una foto que no avanza para nada.

Es una pena que no se pueda instalar este tipo de software tan ámpliamente utilizado en Internet de la manera fácil e intuitiva de siempre, otra aplicación como el tightvnc se instaló sin ningún problema.

Ohhhh nooo…. XnView tampoco funciona bien, el proceso normal de captura de pantalla con la tecla F10 hace cerrar el programa inesperadamente. Creo que a windows vista no le gusta mucho los desarrolladores.

CMD Vista en modo admin Para instalar apache correctamente, debe ejecutar el instalador desde una ventana de consola de windows (cmd) con derechos de administrador.Al abrir la consola de administrador se e ejecuta el comandomsiexec /i apache_*.msiEj:msiexec /i apache_2.2.4-win32-x86-no_ssl.msi

Fuente

Una cosa importante antes de instalar apache es no tener el skype habilitado o deshabilitar en el la opción: herramientas->opciones->avanzada->conexión->usar puerto 80 y 443 como conexiones entrantes, porque por defecto está habilitada y no deja iniciar apache.

Para instalar adecuadamente mysql, no basta con ejecutar el Setup como administrador porque se quedaba en una ventana quieta, lo ejecuté desde la misma ventana de comando de administrador y todo fue muy bien, hasta la parte final de iniciar el asistente de configuración que dio un error al intentar conectarse al servidor mysql.

Este mismo procedimiento lo usé para las herramientas gráficas de gestión de mysql (msiexec /i mysql-gui-tools-5.0-r11a-win32.msi) y la instación va sin ningún problema.

Notas de Ajax

Ajax es el acrónimo de Asynchronous Javascript and XML. Ajax resulta de la unión de varias tecnologías que juntas permiten dar a los sitios web más dinamismo, flexibilidad y rapidez entre otros.

 

El uso de Ajax como técnica de desarrollo permite a las aplicaciones ser más interactivas permitiendo mantener una comunicación en background el servidor para el tiercambio de datos y actualización de ciertas áreas de la aplicación sin necesidad de recargar la página completa.

Lista de URLs con Herramientas

 

 

Utilidades JS

 

 

Framework JS/Ajax

 

Mediante el uso de Ajax, se minimiza el número de refrescos de páginas debido a que los clientes realizan peticiones de datos a los servidores y no peticiones de páginas web. En lugar de refrescar páginas, la aplicación refresca una parte de la pantalla con los datos solicitados enviados por el servidor.

 

 

(Fuente: openajax)

 

La gráfica anterior muestra un modelo en capas de una aplicación ajax, en la cual se puede observar que la aplicación cliente tiene dos partes fundamentales, un componente gráfico y una capa de comunicaciones ajax usada para hacer peticiones al servidor. En general, la capa ajax es proveida por algún tipo de librería como las mencionadas en la parte inicial del artículo que ofrecen un API de alto nivel e independiente de los navegadores (o soportando la mayoría de los más utilizados).

 

El uso de ajax dentro del nuevo modelo de aplicaciones web (Web 2.0) ha dado origen a una nueva gama de componentes web que aumentan o equiparan en gran medida el comportamiento de las aplicaciones web, y muchas de estas características vienen incorporadas en los tooltips de javascript que lo soportan. Entre estas características tenemos por ejemplo:

 

 

  • Controles avanzados de interfaz gráfica como paletas flotantes, difetentes tipos de widgets (calendarios, data grids, arboles, etc).
  • Contenedores flexibles y dnámicos
  • Animaciones y efectos de animación.
  • Capacidades de copiar, cortar y pegar y arrastrar y soltar.

Bibliografía

 

Páginas para hacer comics

Este post se usará para listar páginas que he encontrado para hacer comics online.

Witti Comic : Permite seleccionar el background y los personajes
Comics de Garfield: Permite seleccionar diferentes personajes en distintas posiciones
stripgenerator.com: Generador de comic fácil de usar, ofrece multiples personajes, objetos y tipos de mensajes.
makebeliefscomix.com :  Parecido al de garfield pero con diferentes personaje
readwritethink.org: Otro interesante modo de hacer comics online

Una ñ me aguo el dia.

Hola.

El dia de ayer estaba editando unas hojas de estilo en cascada para hacer un header con  multiples divs flotantes, una vez implementado, en firefox la cosa iva de maravilla, pero en internet explorer 6.0 la cosa no fue bien.

Despues de voltear modificando estilos por más de una hora, de extraer el código y que funcionara en una página independiente me di por vencido y casi resignado a hacerlo en tablas.

Ho, ya con la mente un poco más despejada, retomé el tema y nuevamente perdí una media hora, hasta que vi que en mi hoja de estilo tenia este comentario.

/*Para el encabezado pequeño*/

Y se me ocurrio… será esta p**a eñe?, la quité y efectivamente eso era.   Intenté colocar el tipo de codificación a UTF8 y otros, pero no.. la única solución… no usar la eñe, y a partir de hoy omitiré las tildes también, no vaya a ser cosa que pierda otro tiempo precioso.

Una nota final… para distrarese un poco puedes hacer un comic en http://www.nhlbi.nih.gov/health/public/sleep/starslp/missionz/comic.htm

SIP, predominará para el 2010, Informe AVI Research

SIP, (Session Initiation Protocol) un estandar del la IETF para el establecimiento de comunicaciones multimedia será en el 2010 la norma predominante y su incorporación crecerá rápidamente en el sector de las telecomunicaciones.

Un estudio de AVI Research pronostica que para el 2012 por lo menos la mitad de los consumuidores de servicios de telecomunicaciones usarán al menos un servicios basado en SIP. Esto generará ingresos del orden de 150 billones de dolares anualmente

El estudio demuestra que el movimiento a redes ALL-IP es el camino escogido para la introducción de nuevos servicios. Para el caso de los operadores móviles con la nueva generación de redes LTE or HSPA este proceso de incorporación de servicios IP será más rápido.

Este estudio también indica que para el 2012 existirán 1.2 billones de usuarios de VoIP activos y muchos usuarios estarán suscritos a varios servicios de mensajería y video sharing debido al alto interés en los contenidos generados por los usuarios.

Fuente: SIP to become mainstream by 2010

If, entrevista a Enrique Dans

A través del blog de Enrique Dans me entero de una entrevista que le realizaron en la revista if… “La revista de la innovación”. La entrevista titulada en el post como Enrique Dans, la fuerza de la web 2.0 aplicada a las empresa centra su atención en como Web 2.0 se convierte dia a dia en un punto estratégico para las compañías y el contacto con sus clientes y cita algunos ejemplos utilizados por compañías como AirMadrid y General Motors que han utilizado blogs para escuchar a sus clientes.

El uso de la tecnología Web 2.0 como resalta Enrique debe formar parte del trabajo de sus departamentos de Marketing y por supuesto parte de la enseñanza obligada en las escuelas de negocios. El siguiente párrafo está extraido del post.

Pues sí, y con buenas y malas prácticas. En el MIT, por ejemplo, el Departamento de Admisiones de la Universidad paga a los estudiantes diez dólares a la hora por postear sobre su experiencia, con preferencia a personas que ya tienen su propio blog… Pero lo importante de las escuelas de negocios es que sean capaces de explicar a las empresas lo que está pasando. Si hoy vas a hacer un máster y temas como los blogs, la web 2.0 o la economía de la atención no están en el temario, es que te equivocaste de escuela…

Web 2.0 pondrá a prueba los departamentos de ventas y atención al cliente que tendrán que complementar su trabajo diario con herramientas tecnológicas como los CRM y acercarse más a la voz del pueblo mediante la incorporación de los Blogs y los nuevos y viejos hombres de economía tendrán que dominar el tema para sacarle el mayor partido.

Cabe resaltar que la entrevista se enfoca principalmente a la blogsfera como elemento de marketing y contacto con el cliente, pero no debemos olvidar que gracias al fenomeno web2.0 tenemos además servicios como los wikies que si bien no son muy usados de cara a la fomentar la participación del cliente, si podrían mejorar sustancialmente los mecanismos de comunicación y documentación internos de las compañías.

Dojo Offline

Dojo ha anunciado una nueva versión de Dojo Offline, un toolkit construido sobre la base de Google Gear que hace fácil crear sofisticadas aplicaciones web offline. Dojo Offline hace el uso de Google Gear más simple, extiende su funcionalidad y ofrece un API de más alto nivel. Dojo offline ofrece las siguientes funcionalidades:

  • Un widget offline que puede ser fácilmente embebido en una página web y que permite ofrecer al usuario mensajes asíncronos, instrucciones, etc.
  • Un framework de sincronización que permite que acciones realizadas offline, puedan ser sincronizadas con el servidor una vez se conecte a la red.
  • Detección automática de aplicaciones y Aplicaciones que permite detectar cuando una aplicación esta online u offline
  • Un método slurp() que escanea la página y detecta todos los recursos necesarios para operar offline incluyendo imágenes, hojas de cálculo, scripts etc.
  • Dojo Storage, una abstracción hashtable que permite trabajar con datos offline cuando no se requiere usar la capa de abtracción sql de Google Gear.
  • Dojo SQL, una capa SQL facil de usar que ejecuta sentencias SQL y retorna el resultado como objetos javascript normales.
  • ENCRYPT() Y DECRYPT() en SQL, permite encriptar datos de las columnas de manera transparente, la encryptación es realizada por un hilo de Google Worker Pool de tal forma que la aplicación gráfica puede responder adecuadamente.
  • Integración con el sistema de eventos de Dojo.

En “Creating Offline Applications with Dojo Offline“, se puede encontrar un tutorial que indica como utilizar el SDK.

Dokuwiki

DokuWiki Dokuwiki, es una aplicación wiki open source adecuada para la elaboración de documentos en linea de manera colaborativa. Al ser un sistema wiki permite que un documento sea editado de manera colaborativa, si un usuario tiene abierto un documento, otro usuario no puede editarlo.Es un servicio fácil de instalar y no precisa de una base de datos. Basta con tener un servidor web (preferible y personalmente un apache) y php (preferiblemente la versión 5) instalada.

La versión mas reciente cuenta con un instalador que permite inicializar la cuenta de administrador, configurar el título y establecer el mecanismo de privacidad del wiki (publico, privado).

Dokuwiki tiene un funcionamiento diferente a la wikipedia, en la medida que para el almacenamiento de los documentos se basa en el nombre del título y tiene una jerarquía de directorio para su clasificación, esta característica no permite referenciar automáticamente conceptos como en el caso de la wikipedia, pero como gestor de documentos es excelente.

En su página web pueden descargarse montones de plugins que permiten tener una herramienta más avanzada, igualmente se puden descargar diferentes temas o template para personalizar la vista del wiki.

Yo llevo usando este software desde hace más de dos años y me parece una excelente herramienta, aunque como todo software social, es útil cuando se desea escribir y compartir el conocimiento, o para guardar toda nuestra información de manera fácil y ergonómica.