Sobre desarrollo de software y frikadas
Archivo de artículos en la categoría "Programación"
Ir al inicioBrandon Parise, creó un diagrama donde podemos apreciar el ciclo de vida del script al hacer una petición a CakePHP. (clic en la imagén para verlo completo)
En la página de Brandon se ira actualizando el diagrama.
Vía | Cakebaker
Ajaxian enlazo hoy un par de scripts de esos que te hacen pensar “eso me hubiera servido hace x tiempo”, “eso lo puedo aplicar a x proyecto”, que me parecen interesantes.
FancyUpload
Primero, un uploader hecho por Harald Kirschner, con el siempre bien recibido framework de MooTools. Soporta seleccionar varios archivos y tiene una elegante barra de progreso.
El mismo Harald, ya ha publicado cosas interesantes antes, como el autocomplete con el mismo MooTools.
Instant.js
Segundo, Instant.js, un ligero script para darle un efecto Polaroid a las imágenes con simplemente agregarlas a una clase de estilos.
Si alguna vez haz utilizado Smarty en PHP entenderás facilmente como va el sistema de templates en Django, tal como en Smarty, su objetivo es no mezclar la lógica de programación con el diseño.
Su poder se basa en el principio de la herencia, todo esta definido en base a un diseño de base ‘padre’.. a menos que un diseño ‘hijo’ diga lo contrario.
Como siempre un ejemplo vale mas que cualquier verbo:
Este es un archivo en HTML que tomamos como ejemplo.. un head, un body, nada especial.
1 2 3 4 5 6 7 8 9 | <html>
<head>
<title>Este es el titulo de mi pagina</title>
</head>
<body>
<h1>Un granjero tenia un perro</h1>
<p>Se llamaba bingoooooo ... </p>
</body>
</html> |
Como vamos a repetir esta página en muchos lados, nos conviene etiquetar cada parte que sera repetida considerablemente en bloques, mas especificamente; en title, content y footer.
A este le llamaremos archivo ‘base.html’.
1 2 3 4 5 6 7 8 9 10 11 12 | <html>
<head>
<title>{% block title %}Este es el titulo de mi pagina{% endblock %}</title>
</head>
<body>
<h1>Un granjero tenia un perro</h1>
{% block content %}<p>Se llamaba bingoooooo ... </p>{% endblock %}
{% block footer %}
<p>Gracias por visitarme<p>
{% endblock %}
</body>
</html> |
Ya teniendo la base definida, solo tenemos que preocuparnos por el contenido especial en cada página diferente, ya que el sistema de heredación elimina toda redundancia, y cada nuevo template contiene código que sea solo unico para el mismo.
Para ilustrarme mejor, esta es una página que solo necesito cambiar el titulo.
1 2 | {% extends 'base.html' %}
{% block title %}Este es un titulo personalizado{% endblock %} |
Esta otra solo necesitó cambiar el pie de la página.
1 2 | {% extends 'base.html' %}
{% block footer %}Yo soy un mejor pie{% endblock %} |
Y esta cambia el titulo y el contenido, mas no el pie
1 2 3 | {% extends 'base.html' %}
{% block title %}<h3>Titulo grande.. pero menor</h3>{% endblock %}
{% block content %}<p>Este es un nuevo y simple contenido</p>{% endblock %} |
Como puedes ver, al extender el template ‘base.html’ tomamos toda su información tal cual, incluidos sus bloques, los que si no son sobreescritos, quedaran de la misma manera.
Obviamente no estas obligado a utilizar el sistema de templates de Django, puedes utilizar cualquier metodo que te venga en gana, pero yo considero que este tipo de templating cumple.. y con creces.
Un componente muy útil desarrollado Eelco Wiersma en base al paquete de PEAR Service_JSON.
Su uso es muy simple, agregar el componente en tu controlador y esta listo para encoding y decoding en JSON.
1 2 3 4 5 6 7 8 | var $components = array('json'); $valor = array('uno', 'dos', 'tres', array('arreglo', 'multiple')); //convertimos el arreglo a json y lo guardamos en $resultado $resultado = $this->json->encode($valor); //ahora al revez.. lo pasamos de json a un objeto $resultado = $this->json->decode($resultado); |
Bajalo en CakeForge
Actualización
Las funciones de JSON también estan disponibles como extensiones de PECL para PHP y a partir de PHP 5.2 son incluidas en los binarios por default.
Una característica extraña (util?) de CakePHP es que guarda el indice de el ultimo registro guardado automaticamente en $this->Model->id y como bien sabemos, cuando insertas algo en un modelo, que trae seteada una id que ya existe, actualiza los datos en lugar de insertar unos nuevos.
Es muy comodo en realidad, pero en este caso en particular que tengo varias filas a insertar, no lo es.
1 2 3 4 5 6 | $datos = array('primero', 'segundo', 'tercero'); foreach ($datos as $dato) { $this->data['Modelo']['dato'] = $dato; $this->Modelo->save($this->data); } |
Esto resultara en que solo se va a crear una fila nueva que se ira actualizando constantemente segun tratamos de insertar y quedara con el valor de ‘tercero’ porque es el último dato.
Para solucionar esto hay que destruir el índice que crea despues de cada inserción.
1 2 3 4 5 6 7 | $datos = array('primero', 'segundo', 'tercero'); foreach ($datos as $dato) { $this->data['Modelo']['dato'] = $dato; $this->Modelo->save($this->data); $this->Modelo->id = false; } |
Voilá!
Frecuentemente se dice que Ruby on Rails es un framework para cosas pequeñas y que no esta realmente probado, esto junto con la escasez de desarrolladores con experiencia en Ruby, trae mucha desconfianza por parte de las empresas fuera de Estados Unidos.
El caso, es que Rails ha sido utilizado y sigue siendo utilizado por empresas grandes, hay que quitar esa imagen que se le da de ser una herramienta solo de geeks y startups.
Esta es una lista de algunas empresas que utilizan Ruby on Rails hecha por el sitio workingwithrails.com, una comunidad de desarrolladores.
Notita cultural.
El operador $$ en PHP se utiliza para las variables dinámicas, es decir, lo utilizas cuando quieres que el valor de una variable, se convierta en otra variable por si mismo, un tanto confuso, pero resulta muy util.
Un código dice mas que mil palabras.
1 2 3 4 5 6 7 8 9 10 11 12 | $dinamica = 'variable'; $$dinamica = 'Algun valor tonto'; echo $variable; //Algun valor tonto $variable = 'Otro valor tonto'; echo $variable; //Otro valor tonto $$dinamica = 'Amigas'; echo "Las llaves son tus ${$dinamica}"; //Las llaves son tus Amigas |
Esta es una implementación del API de Abbrr de Victor Bracco, me encontraba investigando acerca de urlib y esta pequeña aplicación me resulto un excelente ejemplo aplicado.
Si vas a copiar y pegar, ten cuidado con las tabulaciones.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #!/usr/bin/env python ''' Implementacion del API de Abbrr.com de Victor Bracco Author: Juan Pablo Ortiz Arechiga http://www.pablasso.com Ejemplos: p = Abbrr('http://www.pablasso.com/contacto') print p.get() p.out = 'xml' print p.get() p.out = 'bbcode' print p.get() p.url = 'http://docs.python.org/api/api.html' p.out = 'link' print p.get() ''' import urllib class Abbrr: def __init__(self, url, out='link'): self.url = url self.out = out def get(self): got = urllib.urlopen('http://api.abbrr.com/api.php?out='+ self.out +'&url='+ self.url) return got.read() |
Suelo ser de aquellos que prueban cada nuevo editor que va saliendo.. de esos que cambian de gustos cada 3 dias, pero por alguna razón siempre regreso arrastrandome a usar Vim.
Estas son algunas cosas que considero indispensables para programar:
Algo de lo que renegaba mucho antes de que saliera la versión 7, es que Vim no tuviera soporte para tabs, me era muy molesto tener que abrir varias instancias o usar screen, pero todo eso se mejoro con la salida de Vim 7, los comandos básicos para manejar tabs son:
:tabfind archivo - abre archivo en un nuevo tab
:tabnext - pasa al siguiente
:tabprevious - pasa al anterior
:tabnew - abre un nuevo tab
:tabmove n - mover el tab a la posición n
Obviamente es tedioso escribirlos completos, aunque el modo de comandos tenga autocompletado, por eso lo mejor es hacer un mapping de ellos, con combinaciones de teclas que recuerdes facilmente.
Mi mapping va de esta manera (en el archivo ~/.vimrc).
map ,t
:tabnew
map ,1:tabprevious
map ,2:tabnext
map ,f:tabfind
map ,m:tabmove
map ,n:tabnew
Por lo tanto solo escribo ,t para un nuevo tab o ,f para buscar un archivo y asi sucesivamente.
Este es un indispensable en cualquier editor, otra de las grandes cosas por las que me quejaba antes de Vim 7 es que no tenia un autocompletado con una lista seleccionable y simplemente no me parecia funcional (a pesar de que el moy me alegara lo contrario).
De igual manera puedes incluir esto en tu .vimrc y listo
function! Mosh_Tab_Or_Complete()
if col(’.')>1 && strpart( getline(’.'), col(’.')-2, 3 ) =~ ‘^\w’
return “\”
else
return “\”
endfunction:inoremap
=Mosh_Tab_Or_Complete()
:set dictionary=”/usr/dict/words”
Tu autocompletar quedara asi:
Soy uno de esos que termina frecuentemente con 5 o 6 archivos abiertos al final del dia y me cuesta valiosos minutos llegar al dia siguiente y acordarme en lo que estaba trabajando exactamente, por eso para mi las sesiones son indispensables, en Vim 7 puedes guardar sesiones para lo que gustes y donde gustes.
:mksession! archivo - te guarda tu estado actual en archivo
:source archivo - te restaura el estado que este guardado en archivo
Nuevamente, son comandos largos y somos webones, asi que hago un mapping sencillo:
map ,s :mksession! ~/.vim/.session
map ,r :source ~/.vim/.session
Con ,s grabo el estado actual, que archivos tengo abiertos y con ,r recargo el estado de la ultima sesión que guarde.
Mas sencillo no se puede!
En estas épocas de tanto framework, lo mejor es simplemente bajarnos una libreria y empezar a utilizar sus funciones sin preocuparnos por lo que pasa detras, pero nunca esta demas aprender a hacerlo desde cero, no es tan complicado como comunmente se cree.
Introducción
La definición de Ajax según la Wikipedia:
“..es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación asíncrona con el servidor en segundo plano.”
Esta técnica no parte de nada nuevo, sino que se basa en las tecnologias existentes, como Javascript, DOM y sobre todo el objeto XMLHttpRequest, quien es el que se encarga de realizar las transacciones asíncronas y que el usuario no tenga que esperar por cada petición al servidor.
“..De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.”
Un ejemplo básico de una aplicación Ajax
Este ejemplo tiene 3 campos que se utilizan para la selección de un alumno, al hacer click sobre cualquiera de los campos, se manda llamar a un script de PHP, que conectandose a una base de datos devuelve la información del individuo seleccionado sin necesidad de recargar la página.
Es un ejemplo simple y que no tiene ninguna clase de comprobaciones con el fin de que sea sencillo de entender.
Se utilizan 2 archivos que realizan todo el trabajo:
intro.html:
Un html que contiene nuestras 2 funciones básicas de javascript, con la primera función obtenerAlumno(), recibimos los datos provenientes del usuario y mandamos llamar al script de PHP que se encargara de sacar la información de la base de datos.
La segunda función callbackAlumnos(), se ejecuta solamente cuando haya recibido la señal del que archivo de PHP termino su ejecución, en este caso tomamos los datos que el script de PHP nos regreso y se los asignamos al div resultados.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <html>
<head>
<title>Introduccion a Ajax</title>
<script languague="Javascript">
/* esta funcion se encarga de iniciar la peticion asincrona */
function obtenerAlumno(id)
{
/*
* tratamos de crear un objeto XMLHttpRequest,
* si esto falla usamos ActiveX que es el caso de Internet Explorer
*/
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("oh noes! no se que navegador estas utilizando!");
}
/* cuando la peticion al script de php se complete, llamaremos a la funcion callbackAlumo */
xmlhttp.onreadystatechange = callbackAlumno;
/* abrimos y mandamos una peticion al script de php, mandandole la id del alumno por get en la url */
xmlhttp.open("GET", 'regresa_datos.php?id=' + id);
xmlhttp.send(null);
}
/* esta function se ejecuta cuando el script de php termina su labor */
function callbackAlumno() {
/* finalmente buscamos el div con id resultados y lo llenamos con la respuesta del script php */
document.getElementById("resultados").innerHTML = xmlhttp.responseText;
}
</script>
</head>
<body>
<!-- unos simples inputs que mandan la id del resgistro que queremos --!>
<input type="radio" onclick="obtenerAlumno('1')" />Primer Alumno
<input type="radio" onclick="obtenerAlumno('2')" />Segundo Alumno
<input type="radio" onclick="obtenerAlumno('3')" />Tercer Alumno
<p>
<div id="resultados"></div>
<p>
</body>
<html> |
regresa_datos.php:
Este script de PHP recibe la id de algun alumno, lo busca en la base de datos e imprime su información en pantalla.
1 2 3 4 5 6 7 8 9 10 | $id_alumno = $_REQUEST['id']; mysql_connect('localhost', 'usuario', 'password'); mysql_select_db('base_datos'); $resultado = mysql_query("select nombre, domicilio, email from alumnos where id={$id_alumno}"); $fila = mysql_fetch_object($resultado); echo "Yo soy {$fila->nombre}, y vivo en {$fila->domicilio}. Mandame un mail a {$fila->email}!"; |
Si son demasiado ociosos para crear la tabla de ejemplo, aqui les dejo la que utilize:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | DROP TABLE IF EXISTS alumnos; CREATE TABLE alumnos ( id int NOT NULL AUTO_INCREMENT, nombre varchar(50) NOT NULL, codigo varchar(10) NOT NULL, domicilio varchar(50) NOT NULL, email varchar(30) NOT NULL, nacimiento date NOT NULL, PRIMARY KEY (id) ); INSERT INTO alumnos (nombre, codigo, domicilio, email, nacimiento) VALUES('Fulanito Perez', 'FP12345678', 'Av. Fulanita #123', 'fulanito@perez.com', '1983-03-01'); INSERT INTO alumnos (nombre, codigo, domicilio, email, nacimiento) VALUES('Homero Simpson', 'HS12345678', 'Av. Siempre Viva #123', 'homer@aol.com', '1954-01-02'); INSERT INTO alumnos (nombre, codigo, domicilio, email, nacimiento) VALUES('Don Benito', 'DJ12345678', 'Don Benito Street #123', 'elbeni@benilandia.com', '1944-10-30'); |
Puedes ver este ejemplo funcionando aqui.
Conclusión
Puedes hacer tu aplicación web mucho mas interactiva con el usuario con tan solo unas líneas mas de código, a pesar de que Ajax ya tiene algunos años desde que salio, todavia muchos desarrolladores lo desconocen o aún piensan que es muy complicado, es tiempo de cambiar eso!
