Capitulo 2 mootools y el DOM
December 26th, 2009
Tal vez este debio ser el primer capitulo de la referencia que estoy escribiendo pero bueno, el tema que manejo ahora tal vez resulte en extremo basico para aquellos grandes programadores de js, pero ni siquiero yo lo sabia hace algunos dias y tuve que aprenderlo de la forma mala.
Bueno resulta, que cuando mi navegador recibe una pagina del servidor, la carga del codigo de la pagina se carga de manera secuencial y por consiguiente todos los elementos de mi pagina como los textarea, buttons y demas tambien se cargan en memoria de forma secuencial.
Veamos este ejemplo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <!--hojas de estilo--> <!--scripts js--> </head> <body> <!--Elementos de mi pagina como divs,p,a ..etc --> </body> </html> |
En el ejemplo anterior tendriamos que lo primero que procesa mi navegador es el doctype, despues vendria todo el contenido del sitio empezando por las hojas de estilo, el javascript, y al final la carnita de la pagina.
limoon: Galeria de imagenes con mootools usando scroll y otros efectos
December 26th, 2009
limoon: ver el demo aqui
INSTRUCCIONES: Para usar la galeria solo hay que colocarse sobre la tira de imagenes y usar la ruedita del raton para navegar si das click en una miniatura la imagen se mostrara en la ventana principal en tamano mediana.
Descargar el codigo fuente aqui
Esta galeria de imagenes ha sido implementada utilizando las siguientes herramientas:
- php ( muy basico )
- html (extremadamente sencillo)
- css
- mootools
La galeria es crossBrowser:
- internet explorer 6+
- Firefox 3.5
- Safari 4.0 para windows
Como configurar esta galeria
Lo unico que hay que hacer es colocar la carpeta de la galeria en tu servidor, dentro de la carpeta raiz debe de haber un directorio llamado galeria que debe contener las imagenes en el siguiente formato.
- Las imagenes deben ser del formato gif, jpg, png
- Cada imagen sin exepcion debe tener una miniatura
- Tamano exacto de imagenes medianas altura:270px, tamano exacto de imagenesminiaturas altura:50px
- Para cada imagen mediana agregar el prefijo “med_” y para cada miniatura agregar el prefijo “thumb_”
Para mas facil un ejemplo, supongamos que quieres que en tu galeria aparezca la imagen miabuelo.jpg, entonces en el directorio galeria debes poner 2 imagenes, una se llamaria med_miabuelo.jpg con altura de 270px y la otra seria thumb_miabuelo.jpg de altura 50px. Y lo mismo pasa para cualquier otra imagen que quieras agregar a la galeria. En el demo de la galeria veras que todas las miniaturas estan en blanco y negro eso lo hize solo para seguir la linea de diseño de la galeria.
Actualmente hay muchos programas en la red que te permiten cambiar el tamano a las imagenes de todo un directorio de forma automatica y agregarles prefijo a la nuevas imagenes, solo es cuestion de hacer una busqueda en google y listo.
Dentro del directorio de la galeria hay un dir llamado mootools que contiene la version completa de mootools con todos sus plugins y pesa mas o menos como 300kb, lo he dejado asi porque es la version con la que hago mis experimentos, pero tu puedes conseguir tu propia version de mootools del sitio oficial y modificarla para reducir el peso y dejar solo lo necesario para la galeria. Principalmente he usado el core y los Asset.image
Implementacion
pues despues de una depresion fuerte y algunos dolores de cabeza tratando de aprender mootools, he implementado una galeria de imagenes le puse “limoon” nomas porque me gusto el nombre XD.
Al inicio la idea que tenia era hacer todo un sistema de galeria de imagenes que tuviera un panel
Aprendiendo mootools
December 21st, 2009
Bueno pues al dia de hoy uno de mis objetivos es aprender todo lo que pueda sobre mootools, para esto voy a empezar a escribir una serie de documentos en los que redactare todo lo que vaya aprendiendo de mootools, y principalmente esto lo hago porque la mayoria de la referencia de mootools que he encontrado y leido esta en ingles y tal vez a alguien le pueda servir la documentacion que coloco aqui. Si lo anterior no sucede no importa aun asi seguire escribiendo.
Este es el primer post que dedico a esta nueva categoria “aprendiendo mootools” y por eso es una introduccino a esta libreria de javascript.
Hace tiempo (algunos años) javascript era utilizado solo para agregar pequeños efectos visuales a los sitios web, en general no se consideraba que js puediera ser usado como una herramienta para el desarrollo de un sitio pero todo cambio cuando aparecio el objeto xmlHttpRequest y se dio la posibilidad de hacer request al server sin tener que recargar la pagina, con el tiempo javascript se ha vuelto mas y mas importante simplemente por el hecho de que puede agregar a un sitio una mayor interactividad con el usuario, ademas de proveerle una interfaz mas amigable y tiempos de respues mas cortos que un sitio web tradicional que trabaja solamente con scripts del lado del server.
Una de las principales razones por la que yo ( en lo personal ) evitaba el javascript era por las distintas maneras en que es interpretado por los distintos navegadores existentes (inclusive hoy en dia con mootools y todo aun existe este problema). Otra razon era porque a veces el debugear un script de js era realmente doloroso y esto es porque js nisiquiera tiene type hinting y la forma en que implemente la oop dejaba mucho que desear.
En realiadad las espectativas que tiene los usuarios sobre un sitio web puede forzar a los desarrolladores a programar tambien del lado del cliente y una de las opciones con las que cuenta es por supuesto mootools
¿Que es mootools?
Mootools es un FrameWork de javascript desarrollado por Valerio Proietti en el 2006, un framework es como un entorno de trabajo que nos facilita el desarrollo de una tarea, piensa en por ejemplo el framework de un carpintero es la carpinteria, en ese sentido mootools es una libreria que contieene una serie de funciones que me ayudan a desarrollar una aplicacion de forma mas sencilla y rapida, Las principales ideas en las que se basa este framework son las siguientes
- No duplicar codigo
- Añadir funcionalidades basadas en la filosofia de diseño de javascript
- Si hay un standar que trabaja bien y no esta implementado, entonces implementalo
- Extiende los objetos nativos (String, Array ..etc)
- Escribe codigo limpio, claro y entendible por cualquier programador
- No solicites demasiados recursos del navegador ( memria, cpu, ciclos ..etc )
- Abstrae tanto como puedas el codigo del navegador (programacodigo general)
- Escribe programas modulares
- Hazlo facil, hazolo divertido, hazlo inspirador
En pocas palabras mootools es una herramienta que busca solventar aquellos problemas que se presentaban cuando escribias js anteiormente y ademas agregar muchas mas funcionalidades nuevas e interesantes.
moochat Construyendo un chat usando mootools + php + mysql
December 21st, 2009
Dale aqui para ver el demo (solo internet explorer 6+)
Descargar codigo fuente
Antes de comenzar
Resulta que tengo unos dias libres entre 25 y 30 no estoy seguro y me propuse aprender algo de javascript porque tenia muy olvidada esa area de la web, navegando por la web lei mucho sobre algunos frameworks de javascript al parecer muy populares, jquery, mootools y demas, el caso es que me decidi a tomar mootools y darle, que porque elegi mootools? pues nomas porque si.
Tengo algunas ideas en mente para aplicar mootools, aclaro que antes hacer este chat no tenia ningun conocimiento sobre mootools y sobre javascript apenas se lo mas basico y de esto se daran cuenta si es que analizan el codigo javascript que incluyo aqui.
Bueno tambien comento que algunas de las cosas que tenia pensadas no pude implementarlas por falta de manejo de javascript especialmente del DOM, pero esta aplicacion cumple el objetivo al 100%, lo que me falto implementar solo fueron adornos y algunos efectos.
Otra cosa que me sucedio es que no me di cuenta que este chat solo funciona en internet explorer 6+, tanto en mozilla como en safari el codigo javascript no jala. Esto fue precisamente porque son mis primeras lineas de codigo en js y no contemple esta situacion.
Implementacion de la sala de chat
Esta aplicacion la dividi en 3 grandes partes.
1. Cliente (en javascript)
2. Servidor ( php y mysql )
3. La interfaz ( css + html)
La idea general en como trabaja el chat es la siguiente, entras a la pagina del chat y te muestra un pantalla para hacer login, eliges un nombre de usuario y una sala para entrar, en caso de haber algun error en uno de los campos se despliega un error descriptivo al usuario.
Si lo anterior paso bien te has loguado y aparece una segunda pantalla hay un campo de texto para escribir mensajes, un textarea para visualizar los mensajes escritos por todos lo usuarios de la sala, y textarea para ver los usuarios que se encuentran en la sala.
Hasta ahi todo va bien como en cualquier pagina de chat, veamos la parte tecnica, cuando un usuario hace login los datos qu introduce en la primer interfaz del login se comparan con los que hay en la base de datos, si no hay problema se registra al usuario en la bd, los mensajes que envie el usuario tambien se almacenan en la bd especificando la hora de envio y el tiempo de envio del mensaje, (si .. tiempo y hora son cosas diferentes).
El tiempo de envio es un entero grande que se obtiene con la funcion del php time(). Cada segundo el explorador hace peticiones al programa servidor.php solicitandole los mensajes mas recientes enviados por usuarios que se encuentran en la misma sala que yo. Mientras que el campo hora almacenara un dato tipo time.
El cliente recibe los mensajes nuevos (en caso de haberlos) y los despliega en el campo de texto. Algo similar sucede con el campo de texto destinado a mostrar los usuarios que se encuentran en la misma sala que yo, con el detalle de que las peticiones para obtener a los usuarios se realizan cada 3 segundos.
Y aqui viene una situacion especial, todo usuario que entra al chat se registra en la bd junto con su hora de entrada. Existe un tiempo de inactividad permitido para los usuarios, el tiempo de inactividad es el tiempo que ha pasado un usuario sin haber escrito al menos un mensaje.
Cada vez que un usuario nuevo entra al chat se revisa la bd buscando usuarios inactivos, si existen se borran de la bd. Si entro al chat y exedo el tiempo de inactividad el cliente enviara un mensaje al servidor indicandole que debo ser borrado de la bd al mismo tiempo que el cliente me redirecciona al la interfaz del login.
Lo anterior es con la intencion de tener la bd limpia de mensajes antiguos y garantizando que la caja de texto para mostrar a los usuarios de una sala simpre este actualizada y no me muestre usuarios que se logearon hace 20 dias al chat.
La verdad es que por el tercer punto que es la interfaz ocupe el codigo css y html de lo mas basico, y en realidad es muy poco el codigo que abarca esa parte.
En el segundo punto en la parte del servidor.php, se ocupan principalmente las operaciones basicas a la bd, sentencias select, insertar y borrar registros. A grandes rasgos el servidor recibe una peticion del cliente identificada por un numero entero y a partir de ahi ejecuta cierta funcion y devolviendo un resultado al cliente. aqui pongo un esquema de la bd muy general.
Y por el ultimo el cliente en javascript seencarga de solicitar informacion al servidor y desplegarla en el navegador.
Voy a anexar una carpeta comprimida con todos los archivos y con instrucciones de configuracion por si alguien quiere hecharle un ojo, no quiero colocar el codigo entero porque son como unas 400 lineas entre php y javascript, tampoco pienso explicar el programa linea por linea pues me llevaria algunas decenas de hojas.
Y ya para terminar la idea no era hacer una aplicacion comercial de un chat, simplemente queria empezar a conocer mootools y como ejercico de programacion esta exelente, y pues si a alguien le sirve el codigo pues adelante.
