Buen tutorial JavaScript Orientado a Objetos

En esta página (http://mckoss.com/jscript/object.htm) pueden encontrar un buen tutorial sobre javascript orientado a objetos . En mi poca experiencia programando con orientación a objetos en javascript me he dado cuenta de la gran potencia que tiene y sobretodo para aquellos que realizamos programación OO en otros lenguajes como PHP, C# o Java, es muy adecuado seguir el mismo paradigma en la parte de cliente. Además, hoy en dia, muchas librerías de javascript como prototype, scriptaculous y otras vienen orientadas a objetos, con lo cual, si nuestra aplicación es OO, especificar la misma en diagramas UML es muy fácil.

De manera resumida, para programar una clase javascript lo primero que hay que elegir es el nombre (Ej. Usuario), definir una función para el constructor con el mismo nombre, y agregar los métodos y atributos. Para la creación de los métodos tres formas de hacerlo. La primera, declarar las funciones anidadas en la declaración de la función de la clase, la segunda, declarar una variable por cada función usando this.variable y asignarle una función existente, y la última, asignar los métodos a través del atributo prototype. Aqui pongo dos ejemplos básicos.

Declaración anidada de métodos

function Usuario(){

this.crear=function crear(nombre){

//codigo de la función

}

}

Métodos mediante atributos.

function Usuario(){

this.crear=crearUsuario;

}

function crearUsuario(nombre){

//codigo de la función

}

Declaración mediante prototype.

function Usuario(){

}

Usuario.prototype.crear=function crearUsuario(nombre){

//codigo de la función

}

Mis preferidos son: Declaración anidada de métodos cuando la cantidad de métodos no es mucha y en general son cortos. Y la tercera, para cuando la clase es demasiado grande.

Wiki – Video

El siguiente video transmite de manerá sencilla el concepto de wiki, creo que es bastante explicativo. De manera visual el autor transmite como Wiki es una manera sencilla de colaborar en linea. Wiki es no solo una manera de compartir el conocimiento, es una manera en la cual podemos organizar nuestra própia información.

[youtube=http://www.youtube.com/watch?v=-dnL00TdmLY]

Video Social BookMarking

[youtube=http://www.youtube.com/watch?v=x66lV7GOcNU&eurl=http%3A%2F%2Fdacosta51%2Ewordpress%2Ecom%2F2007%2F08%2F]

El estilo de este video para transmitir el mensaje está muy bien. Es un video sobre del.icio.us. Facil de entender y transmite muy bien el mensaje.

Fin de la vida de PHP4

Leo en php.net que el pasado 13 de julio se cumplieron 3 años de la liberación de PHP5,  el cual es actualmente rápido, estable y está en producción. PHP6 ya viene en camino y PHP4 se acerca a su fin. El equipo de desarrollo seguirá dando soporte hasta finales del 2007 y despues del 31/12/2007 no van a sacar nuevas versiones. Se realizarán correcciones de problemas de seguridad críticos dependiendo de los casos hasta agosto 08 de 2008.

El café es bueno para la memoria de las mujeres

Escuchando la radio, he escuchado que tomar por lo menos tres tazas de café diarias es bueno para la memorias de las mujeres mayores de 65 años. según un estudio publicado hoy en la revista NeurologySegún el estudio, cuanto más café toman las mujeres mayores, mejor recuerdan, y cuanto más edad tienen, es más beneficiosa una buena taza. En cambio, el café no ayuda a los hombres, aparentemente porque su cuerpo asimila la cafeína de forma diferente

En este artículo 20 minutos.es puede encontrar el artículo completo.

Apache – Windows Vista – HORROR

En el post anterior publiqué la forma de instalar Apacche 2.2.4 en windows vista, la cosa iva muy bien hasta que intenté motar un fichero de configuración que en mi equipo XP y en los linux.

Primero, la gran sorpresa, el bendito path de apache, aunque en el exporador lo ves por defecto “C:\Archivos de Programa\Apache Software Foundation\Apache2.2\”, el path real es “C:\Program Files\Apache Software Foundation\Apache2.2\”, con lo cual las directivas que usan este path los tuve que corregir.

Puse las directivas Virtualhost y chequee la sintaxis por linea de comandos usando “httpd -t” para el fichero completo y “httpd -S” para los servidores virtuales y todo salió con “Syntaxs OK”.

Luego de hacer muchos cambios, instalar, desinstalar etc, comienzo a ver efectos “raros”, lo primero y que tiene un efecto sobre todo lo demás es que desinstalé el apache, borré todo el contenido de la carpeta y realizé la instalación de nuevo. Antes habia modificado el fichero index.html que tiene el mensaje “It Works!” por otro mensaje “It Works, … esto es lo que quiero ver”.

Para sorpresa mia, aunque habia borrado los ficheros y vaciado la papelera de reciclaje, el proceso de reinstalación del apache habia restaurado el fichero con el segundo mensaje “It Works, … esto es lo que quiero ver”, en lugar de haber colocado el fichero original.

Luego, modifique el fichero nuevamente, hice una copia del mismo con Ctrl+C y lo pegue con otro nombre. Ej index2.html, lo abri y que tenia?… I’t Works! (solamente). Esto ya superó mis limites de conocimiento de manejo de una aplicación windows tradicional, en la cual usando el explorador de windows, copias un fichero a otro usando Ctr+c, Ctrl + V y el segundo es una copia exacta del anterior.

Intento hacer una prueba más, instalé el apache sin entrar ningún parámetro, ni correo de administrador, ni dominio, ni nombre de host, se instala. Da un error en la linea 133 que dice :

Syntax error on line 133 of C:/Program Files/Apache Software Foundation/Apache2.2/conf/httpd.conf:
ServerAdmin takes one argument, The email address of the server administrator .

Abro el explorador de windows, editor el fichero y encuentro que la linea tiene “ServerAdmin dacosta51@gmail.com”, reviso la configuración en el directorio default. Y está igual, entonces solo tuve una alternativa. Mirar por consola.

Y Otra sorpresa, EL FICHERO QUE SE VE POR CONSOLA ES DIFERENTE AL QUE SE VE EN EL EXPLORADOR DE WINDOWS VISTA. Ahora si que no tengo las cosas ni medio claras pues ha roto todos mis esquemas respecto al uso de ficheros en windows. A lo mejor mi mujer tiene razón, “aun no se como se maneja windows vista”.

Para mostrar esto segundo, voy a poner las pantallas correspondientes a los directorios, uno por linea de comandos y el otro por el explorador de ficheros.

directorio_apache1.jpg

Abro en ambos ambientes el fichero httpd.conf.

httpdconf.jpg

Como se puede observar en la imagen, los FICHEROS SON DIFERENTES…!!!!!. HORROR… No se si es que le pasa a este cacharro, pero creo que me voy a poner un linux.

Si alguien sabe algo, será bienvenido cualquier conocimiento o luz sobre el tema.

Actualización (07/07/07)

El editor que uso se llama SCite, una gran alternativa para la edición de texto en modo gráfico y un reemplazo excelente del notepa. Si se ejecuta diréctamente el scite antes como administrador y se abre manualmente el fichero de configuración, se obtiene lo mismo que se ve desde la consola de administración. Editando el fichero de esta forma se puede poner a funcionar el apache como Dios manda. Espero que no vaya a tener más problemas. Aunque me sigue quedando la duda de porque se ven dos ficheros con contenido diferente.

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