Para ver el nuevo buscador de escuelas en accion dale aqui

pues asi es, despues de pasar algunas semanas buscando un buen autoSuggest, para el sitio por fin lo he encontrado, aunque no he podido adaptarlo a mis requerimiento originales pero el funcionamiento esta bien.

Tenia un serio problema en el sitio en una de las secciones mas importantes que era la subida de fotos, anteriormente subir una foto era un verdadero desorden:

Sistema de subida de fotos anterior

1. Darle click en el boton Subir foto
2. Buscar tu escuela en un formulario
3. Una vez que aparecen los resultados darle click al nombre de tu escuela
4. Dar click una vez mas en otro botonsubir foto
5. Finalmente subir la imagen

Vaya que era un largo camino y con el tipo de usuarios que abundan en la red estoy seguro que 9 de 10 usuarios que visitan skulshit.net habrian desistido de subir una foto incluso despues del segundo paso :S

Bueno desde el inicio del desarrollo del sitio habia pensado en la posibilidad de meter un buscador que autocompleta palabras al estilo google, el problema era que no queria meter javascript al sitio y menos en un punto critico como la subida de imagenes. Pero al final me ha vencido el hecho de que el numero de usuarios que deshabilitan javascript de sus navegadores es realmente insignificante.

EL siguiente problema era encontrar un autosuggest que se adaptara a mis necesidades, estoy hablando de buscar uno ya hecho porque por el momento no tengo ni el tiempo n el conocimiento para programar el mio desde cero, Ahora estuve buscando por un largo rato probando muchos autosuggest modificandolos y tal, la mayoria solo autocompleta palabras buscando coincidencias al inicio de las palabras y al modificarlos para que busquen sobre cualquier coincidencia le aparecen bugs =(, en otros el diseño no se adapta a los colores del skulshit, al final he optado por este:

AutocompleteList

Al parece era un autosuggest al estilo de hotmail o gmail, en donde escribes una direccion de correo y te la autocompleta ademas de pegarla campo de texto de direcciones. La cosa es que lo he modificado para autocomplete las escuelas que hay en el sitio. el nuevo sistema se reduce a esto:

Nuevo sistema de subida de Fotos

1.Darle click al boton de subir foto
2.Buscar tu escuela (con unas 4 letras aparecera en automatico en las sugerencias)
3.Subir la foto

Pues de esta forma del numero de clicks y el numero de paginas que se cargan al usuario para que pueda subir una foto o escribir un chisme se ha reducido bastante. Pero con el nuevo sistema tambien surgen inconvenientes, veamos porque:

1. Si no tienes javaScript activado en tu navegador ya valio, no va a funcionar el buscador
2. La carga de la pagina ha aumentado considerablemente, esto es porque el autosuggest trabaja con la libreria de mootools y pesa un poquito mas de 40kb
3.Cada que se carga la pagina del buscador se hace una conexion a la bd solicitando el nombre de todas las escuelas registradas, tal vez en este momento el problema no sea grande, pero en el caso de haber una cantidad enorme de escuelas entonces dicha consulta puede tardar algunos segundos.

Veamos algunas imagenes del nuevo sistema:

Paso 1:

Darle click al boton de subir foto

Paso 2:

Teclear algunas letras en el campo de texto y deberia de aparecer la escuela que busco, si no aparecen resultados quiere decir que la escuela no esta registrada aun

Paso 3:

Al ir tecleando mas letras la lista se reduce solo le doy click a mi escuela y me manda al formulario para subir imagenes y listo

Solamente le das Click o Entera alguno de los resultados y te aparece el formulario para subir fotos.

Ahora solo eliges una fotos y le das al boton subir foto y listo.

Ahora cualquiera puede enviar fotos y chismes

Cuando se subio del sitio habia que registrarse para poder publicar un chisme o una foto, esto era porque segun yo los usuarios que quisieran subir una foto debian al menos registrarse en el sitio, esta restriccion era como una especie de cuota por uso del sitio.

Pero pensandolo bien creo que para ser una pagina nueva en internet, no deberia haber semejante tipo de condiciones. Tal vez cuando el sitio tenga un trafico mas pesado entonces si podria hablar de un registro obligatorio.

Puntos en contra de la desicion anterior:

Tal vez mi mayor temor es tener que monitorear el sitio con mucha mayor frecuencia el sitio eliminando imagenes basura, pornografia y todo tipo de mensaje que no tengan nada que ver con el site.

El objetivo de las medidas anteriores es atraer mas visitas al sitio. Por el momento las cosas van bien, al menos por ahora en consultas comunes en google como “chismes escuelas” skulshit aparece en la tercer pagina de resultados lo cual ya es un avanze grande creo yo.

Bueno ahora toca el tema de escribir codigo mootools de la manera correcta, ya que de lo contrario obtendremos resultados diferentes del desempeño de nuetra aplicacion en los distintos navegadores que existen.

Las viejas costumbres

Bueno pues resulta que leyendo por ahi un ebook que se llama la “biblia de javascript” pues me tope con dos propiedades de los elementos del dom que son: innerText y innerHTML. El caso es lei para que servian y se me hizo facil incluirlar en un codigo de mootools que estaba escribiendo.

1
2
3
4
5
6
7
8

//se me ocurrio esto, no pense que tuviera grandes consecuencias
$('un_textarea').innerHTML = "mi texto";
 
//tambien escribia cosas como esta
$('input_text').innerText = "algo";
 
//inclusive hacia esto 
$('otro_input_text').value = "algo";

mm… mala idea, resulta que las lineas anteriores tienen resultados inesperados en los distintos navegadores, puede que funcionen a la perfeccion sobre algunas versiones de internet Explorer pero ni de risa jalan para mozilla y safari, algo que he notado es que si logras hacer funcionar el codigo sobre el explorer y mozilla es practicamente seguro que tambien funcione en safari.

Read the rest of this entry »

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.

Read the rest of this entry »

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

Read the rest of this entry »

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.

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.

Pues en esta ocasion veremos la implementacion de una lista ligada en c, solomente sera como un ejemplo ilustrativo pero las ideas desarrolladas aqui podran extenderse hacia horizontes mas amplios.

Una lista es un tipo de dato abstracto, se le llama asi porque es un tipo de dato definido por el programador a diferencia de los tipos de datos que nos ofrece el lenguaje C que ya son “nativos” del lenguaje por ejemplo los tipo int, float,char..etc

Imaginemos a la lista como una longaniza =), la longaniza esta compuesta por muchos trozos de carne unidos uno tras otro, las longanizas tienen un fin y un inicio. Imagina que todos los trozos que forma la longaniza son iguales, pues ahora la lista es como la longaniza y esos trozos de carne de la longaniza les llamaremos los nodos de la lista. Cada uno de los nodos puede almacenar informacion para fines practicos los nodos de nuestra lista almacenaran un entero, y podemos realizar varias operaciones sobre una lista, por ejemplo ver si la lista esta vacio o dicho de otra forma si la lista no tiene nodos, tambien recorrer los nodos de la lista buscando dentro de su informacion por algun valor en especifico, podremos insertar nuevos nodos a la lista, eliminar nodos …etc

Read the rest of this entry »

bueno, he hecho una clase que sirve para redimensionar imagenes, es necesario tener instalada la libreria gd del php, he tratado de que se lo mas general posible, la clase tiene dos metodos utilizables que son
resizeImg() sirve para hacer un resize a un solo archivo de imagen y el otro resizeDir() que sirve que hacer resize a todas las imagenes contenidas en un directorio.

La verdad es que me ha sido muy util, sobre todo porque algunas veces es necesario sacar miniaturas de las imagenes de un directorio el problema es que a veces pueden ser cientos de imagenes y cambiarles el tamaño a mano es una tarea pesado, pero con esta clase solo es necesario pasarle algunos parametro ejecutar el script y listo.

La clase tiene un metodo que verifica los parametros pasados a los metodos, si existe algun error con alguno de los parametros se genera una exepcion mostrando un mensaje describiendo el error y se termina la ejecucion del metodo sin tirar warnings ni errores fatales.

Read the rest of this entry »

Ahora hablara sobre un tema basico en la la programacion en lenguaje C y es el paso de parametros a funciones por valor y por referencia.

Cuando se empieza a aprender el lenguaje C y se habla sobre el tema de las funciones generalmente no se habla sobre este tema pues podria confundir a la persona que esta aprendiendo, el solo hecho de aprender el concepto de funcion y su manejor pede costar algo de tiempo y lo digo porque lo mismo me sucedio a mi cuando recien empezaba.

veamos un ejemplo de uso comun de una funcion

1
2
3
4
5
6
7
8
9
10
11
12
13

#include <stdio .h>
 
void porValor(int param){
     param +=2;
}
 
int main(){
    int numero=5;
    porValor(numero);
    printf("El valor de numero es %d", numero);
    return 0;
}
</stdio>

La salida del programa anterior debe ser:


El valor de numero es 5


En las lineas anteriores de codigo se ha pasado por valor la

Read the rest of this entry »

ahora hablare sobre punteros en c, cualquiera que quiera programar en c debe de manejar los punteros como si fueran las tablas de multiplicar, personalmente he visto muchos casos de personas que inclusive estando a nivel universitario les cuesta trabajo entender como trabajan los punteros, es por eso que escribo esto y vamos a empezar desde cero, simpre es bueno tener unas buenas bases de punteros. En cierto sentido manejar punteros es facil, si tenemos algunos conocimientos en la forma en que se almacena la informacion en una computadora mmmm…ya empezamos mal (pensaras), pero no te preocupes no introducire demasiada jerga computacional, solo hablaremos de los conceptos en su forma mas general y digerible para cualquiera que alguna vez haya programado solo un poco.

Material Previo

Dentro de la computadora existe algo llamado memoria ram, es un espacio donde se almacenan todos los datos que utiliza la computadora solo cuando esta encendida, eso incluye los programas en C que escribes y ejecutas.

La memoria esta formada por registros cada registro tiene una direccion y el tamaño de estos registros depende de la arquitectura de la computadora, por lo general las computadoras tienen una arquitectura de 32, pero computadoras mas recientes tienen arquitecturas de 64 bits. Esto quiere decir que el tamaño de los registros de la memoria son de 32 bits para arquitecturas de 32 bits y asi para las demas arquitecturas.

Read the rest of this entry »

pues ahora se me ha ocurrido escribir sobre mi entrenamiento en el gym, y para inaugurar esta categoria quiero hablar de un tema que me parece es de vital importancia cuando alguien de verdad quiere mejorar su cuerpo en el gimnasio. Las tenicas estan escritas en orden descendente dependiendo de su eficacia y eficiencia.

Tecnica 1: Sugestion

Aclaro que no soy entrenador ni fisicoculturista de carrera, hablo por experiencia propia y hablo de mis ideas muy personales y validas para mi, sin embargo lo que describo en las siguientes lineas de verdad me ha ayudado mucho en mis entrenos y realmente me daria mucha satisfaccion saber que lo que escribo le sirvio a alguien mas, sin embargo puedes tomar este documento como una mera platica entre compañeros de entreno.

Cuando una persona asiste al gimnasio con la idea de superarse solamente debe tener una idea en mente …. mejorar su cuerpo, no hay lugar para pensamientos sobre los amigos, la escuela, el trabajo, ninguna otra preocupacion debe vivir en la mente del entrenado.

Read the rest of this entry »