Octubre 13th, 2008

Estructurar una web con css

Cuando maquetamos una web, lo primero siempre es tener una estructura definida bien sólida 2 columnas -3 filas, 4 filas- 2 columna,.. etc. Siempre he defendido el trabajo sin tablas, y si eres iniciado y crear estas filas y columnas te cuesta, puedes optar por descargártelas desde  este link. Los chicos de IronMyers se han molestado en crear una serie de plantillas con muchas combinaciones.

estructuras

Como verás, el código quedará más limpio y estructurado, con la consecuente perdida de peso en nuestro site que nos ayudará a que cargue más rápido.

Julio 22nd, 2008

Modelo Vista Controlador

Posiblemente, si te dedicas a la programación, habrás oido hablar del Modelo Vista Controlador (MVC), ese mismo que tus profesores te insistían en usar tanto. El objetivo de este tipo de modelos es de intentar repetirse lo menos posible y de tenerlo todo organizado o sea hacer una distinción entre la lógica de toda la aplicación y presentación.

Los Fundamentos básicos del MVC son los siguientes:

  • Modelo: Esta sirve como representación específica de toda la información con la cual el sistema va a trabajar. La lógica de datos nos puede llegar a asegurar la integridad de ellos y nos permitirá derivar nuevos datos. ¿Como lo hace?  Pues , no permitiendonos comprar un número de unidades negativas, y también calculando si hoy puede ser el cumpleaños del usuario/a o también los totales, impuestos o importes en un sistema de venta.
  • Vista: Presenta el modelo con el que va a interactuar el usuario, más conocida como interfaz.
  • Controlador: El controlador responde más bien a eventos, normalmente son acciones que el usuario invoca, implica cambios en el modelo y también en la vista (interfaz).

¿Cuáles son los origenes del Modelo Vista Controlador?

Buscando un poco de información historica, podemos decir que este fue descrito por primera vez en 1979 por Trygve Reenskaug (hace ya basante tiempo, para el sector que tratamos), trabajador de Smalltalk, en unos laboratorios de gran investigación de Xerox.

La implementación del modelo fue descrita en este documento.

Frameworks MVC

Los MVC cumplen perfectamente el fin particular de cualquier frameworks, (una estructura bien definida que da soporte a un proyecto web también nos ayuda a que nuestro proyecto sea organizado y bien desarrollado).
Diagrama de Flujo de un framework MVC

Modelo Vista Controlador
Modelo Vista Controlador

1. El index.php nos inicializa el nucleo de nuestra aplicación.
2. El enrutador nos examina nuestra petición HTTP y nos ayuda a determinar que se debe de hacer.
3. Si existe, la cache nos devuelve nuestro archivo HTML sin necesidad de pasar por el sistema , ahorrandos la carga que esto nos conlleva.
4. La Seguridad, ya que antes de que se cargue el controlador se filtran los datos enviados para que estos puedan resultar fiables.
5. El controlador nos carga el modelo, librerias, helpers, plugins y todos los demás recursos necesarios para satisfacer nuestra petición.
6. Finalmente, cuando la Vista está renderizada, esta es enviada al navegador, encontes si la cache se encuentra habilitada, se almacena el resultado para la próxima ocación que la URL sea servida.

Mayo 29th, 2008

Ajax en php

Hoy en día resulta algo feo ver una página que no utiliza ajax, a los usuarios no nos gusta mucho ver como nuestras páginas vuelven a cargar a la hora de enviar un formulario, subir una imagen etc, etc.

La manera más sencilla de empezar a utilizar ajax si no controlamos javascript (javascript es el lenguage del futuro, intenta aprenderlo!), es con la clase xajax, que nos trae un cumulo de funciones que simplifican nuestra tarea. Está bastante bien implementada, y no le falta de nada. A continuación explicaré por qué resulta tan sencillo:

<?php
    include './xajax/xajax_core/xajax.inc.php';$xajax = new xajax();
    $rqstAdd =& $xajax->
                            register(XAJAX_FUNCTION, 'doAdd');

    $rqstReset =& $xajax->register(XAJAX_FUNCTION, 'doReset');
    // set the parameters$rqstAdd->
                                setParameter(0, XAJAX_JS_VALUE, 39);
    $rqstAdd->setParameter(1, XAJAX_JS_VALUE, 571);

    $xajax->processRequest();

    function doAdd($a, $b)
    {
        $response = new xajaxResponse();

        $response->assign('answer', 'innerHTML', $a + $b);
        $response->assign('reset', 'style.display', 'block');

        return $response;
    }

    function doReset()
    {
        $response = new xajaxResponse();

        $response->clear('answer', 'innerHTML');
        $response->assign('reset', 'style.display', 'none');

        return $response;
    }

?>

Las funciones doreset y do add son las que proximamente podremos llamar desde cualquier parte de la pagina, sin necesidad de volver a cargarla!

<form action="#" method="post">
    <input type="button" onclick="<?php $rqstAdd->printScript();
                                ?>" id="btnAdd" value="Click Me" />
    <input type="button" onclick="<?php $rqstReset->printScript();
                                ?>" id="btnReset" value="Reset" />
    <p id="answer"></p>
</form>

ahí esta el truco,  llamamos a las funciones en javascritp pero gracias a el objeto XmlHttpRequest, podemos interactuar con los ficheros php.

Link  | xajaxproject

Abril 8th, 2008

Unos cuantos hacks css

Estoy totalmente en contra de los hacks css, siempre hay otro camino para conseguir el diseño que queramos (Por favor, no uses nunca tablas. ¡ese no es el camino!). Pero cuando no queda otro camino hay que usarlos, aquí dejo una lista de ellos.

_left barra delante de la propiedad
    ejemplo:( .menu{ left:40em;_left:30em;}).
    La barra solo actua en IE6.

.left punto delante de la propiedad
    ejemplo:( .menu{ left:40em;.left:30em;}).
    El punto actua tanto en IE6 e IE7.
.menu, x:-moz-any-link {left:40em}.
    Estilo solo para mozilla firefox 1.0 o superior.
@media screen and
    (-webkit-min-device-pixel-ratio:0)
        {.menu{ left:40em;.left:30em;}}.
            Solo para Safari y Opera

Intenta evitarlos, normalmente un hack lleva a otros problemas de proporciones. Pero si vez que no queda otro remedio…

Marzo 9th, 2008

Login de usuarios en php

Creamos la tabla usuarios

CREATE TABLE `usuarios` (
    `id` int(4) NOT NULL auto_increment,
    `username` varchar(60) NOT NULL default '',
    `password` varchar(60) NOT NULL default '',
    PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=2 ;
//insertamos un valor como prueba
INSERT INTO `members` VALUES (1, 'juanra', '123456');



Ahora el fichero de checklogin

<?php
// El nombre del host, usualmente localhost
$host       = "localhost";
$username   = ""; // Nombre de usuario mysql
$password   = ""; // contraseña mysql
$db_name    = "test"; // base de datos que usaremso
$tbl_name   = "usuarios"; // nombre de la tabla

//Conectamos con el servidor y seleccionamos la base de datos
mysql_connect("$host", "$username", "$password")
                                       or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");

//Cogemos los datos que nos llegan desde el formulario
//( lo tendremos que crear)
$minombre   = $_POST['minombre'];
$contraseña = $_POST['contraseña'];
// Unas pequeñas medidas de seguridad para
//proteger las bases de datos de posibles inyecciones
$minombre   = stripslashes($minombre);
$contraseña = stripslashes($contraseña);
$minombre   = mysql_real_escape_string($minombre);
$contraseña = mysql_real_escape_string($contraseña);

$sql="
    SELECT *
    FROM   $tbl_name
    WHERE  username='$minombre'
    AND    password='$contraseña'
";
$result=mysql_query($sql);

// Contamos el numero de filas
$count=mysql_num_rows($result);
//Si el resultado marcado es $minombre
//y $contraseña,debería haber solo una fila
if($count==1)
{
    //Registramos usuario y redireccionamos a exito.php
    session_register("minombre");
    session_register("contraseña");
    header("location:exito.php");
}
else
{
    echo "Nombre de usuario equivocado o contraseña";
}
?>

El exito.php…

<?//si llegamos aquí, todo fue bien
session_start();
if(!session_is_registered(myusername)){
    header("location:principal.php");
}
?>

Por último el formulario

//a gusto del consumidor :)

Marzo 6th, 2008

Crear un captcha

Es habitual que se nos cuele mucho spam por formularios, y es que los spamers, suelen crear aplicaciones para enviar miles y miles de correos por formularios vulnerables, que envían copia del e-mail al autor, por ejemplo. Voy a iniciar un pequeño tutorial para crear un captcha, para “obligar a los usuarios a demostrar que son humanos”.

Primera Parte

<?php
session_start();

//Creamos una cadena aleatoria de caracteres
$md5 = md5(microtime() * mktime());

//Reducimos a 5 los caracteres
$string = substr($md5,0,5);
?>

Crear una imagen de fondo

<?php
//creamos un fondo de imagen y lo subimos, luego con la funcion imagecreatefrompng, la pasamos al captcha
$captcha = imagecreatefrompng("./imagencaptcha.png");

//podemos configurar los colores para las lineas
$black = imagecolorallocate($captcha, 0, 0, 0);
$line = imagecolorallocate($captcha,233,239,239);

//y para evitar las arañas le añadimos las lineas
imageline($captcha,0,0,39,29,$line);
imageline($captcha,40,0,64,29,$line);
?>

Insertamos el texto en la imagen

<?php
//insertamos la cadena creada aleatoriamente en la imagen
imagestring($captcha, 5, 20, 10, $string, $black);

//como no, encriptamos y almacenamos el valor de la cadena en una variabe sesion
$_SESSION['key'] = md5($string);

//devolvemos la imagen para crearla
header("Content-type: image/png");
imagepng($captcha);
?>

Comprobamos el valor que ingresa el usuario

<?php
session_start();

if(md5($_POST['code']) != $_SESSION['key'])
{
    //lo enviamos a la página de error
    echo "header('Location: error.php');";
}
else
{
    //lo enviamos a donde queríamos ha puesto bien el captcha
    echo "header('Location: buena.php');";
}
?>

La parte de la creación del formulario en este caso, es la más básica.

Diciembre 28th, 2007

Asignar a multiples zips, nombre que contiene dentro del .zip

Hace poco, por una razón X, he tenido que renombrar todos unos zips del tipo 92832.zip al contenido que tenían dentro. Con esté script que pongo a disposición de todos, se puede lograr en un rato, está en php.

define('ZIP_DIR','zips/');
define('ZIP_DIR_NUEVO','zipsNuevos/');

if(!dl('php_zip.dll')) die('Necesita la extension ZIP');
$zipDir = dir(ZIP_DIR);
while(false !==($zipArchivo = $zipDir->read()))
{
$zipDirArchivo = ZIP_DIR.$zipArchivo;
if('.zip'==substr($zipArchivo, -4)
    && is_file($zipDirArchivo))
{
    $zip = zip_open($zipDirArchivo);
    if($zip)
    {
    $zipEntradaNombre = basename(zip_entry_name(zip_read($zip)));
    $zipEntradaExt = strrpos($zipEntradaNombre, '.');
    $zipNuevoNombre = substr($zipEntradaNombre, 0,
            ($zipEntradaExt?$zipEntradaExt:strlen($zipEntradaNombre)));
    $zipNuevoNombre = ucwords(str_replace('.', ' ', $zipNuevoNombre));
    $zipNuevoNombreDir = ZIP_DIR_NUEVO.$zipNuevoNombre.'.zip';
    zip_close($zip);

    if(file_exists($zipNuevoNombreDir))
    {
        $i=0;
        while(file_exists($zipNuevoNombreDir =
                ZIP_DIR_NUEVO.$zipNuevoNombre.'_'.$i.'.zip'))
                $i++;
    }

    echo (rename($zipDirArchivo, $zipNuevoNombreDir) ?
        'Renombrado':'Error al renombrar').":
            $zipDirArchivo => $zipNuevoNombreDir\r\n";
    }
}
}
$zipDir->close();

Noviembre 14th, 2007

Una imagen para cada navegador

Si necesitamos que una imagen de nuestra web, varíe, dependiendo del navegador lo podremos realizar sin necesidad de usar javascript ni ningún hack css, simplemente html de la siguiente manera:

< img
/srcx00="ie.gif"
/''srcx00="firefox1_5.gif"
/''src="firefox2_0.gif"
/""src="gecko_others.gif"
"sx00rc="safari2.gif"
"src="safari3.gif"
""src="konqueror.gif"
srcx00="w3m.gif"
srcx0c="opera.gif"
src="others.gif"
src="lynx.gif" />

Reconoce Firefox2.0, Firefox1.5, otro motor Gecko, Safari2, Safari3, Opera, IE, w3m, Lynx, y otros navegadores.

Noviembre 12th, 2007

Fuentes para ubuntu

Si te encuentras falto de fuentes en tu equipo y deseas ampliar la lista de de fuentes disponibles, traigo una lista de 465 fuentes libres disponibles para hacer lo que nos de la gana con ellas. Para agregarlas, solo tendremos que llevar a cabo los siguientes pasos:

1.- Añadimos a los repositorios:

sudo gedit /etc/apt/sources.list



Y añadimos las siguientes lineas al final:

deb http://ppa.launchpad.net/corenominal/ubuntu gutsy main
deb-src http://ppa.launchpad.net/corenominal/ubuntu gutsy main

2.- Actualizamos:

sudo apt-get update

3.- Instalamos:

sudo apt-get install ttf-aefonts

Así, dispondremos de fuentes suficientes para diseñar tranquilamente.

Noviembre 7th, 2007

Abrir terminal desde carpeta

Este truco nos instala una opción muy útil en Nautilus (el gestor de las ventanas). Ubuntu no trae por defecto la posibilidad de abrir un Terminal desde una carpeta con la ruta ya seleccionada, y hay que hacerlo manualmente navegando por las carpetas desde la linea de comandos lo que es un poco engorroso dado los nombres largos de los archivos y carpetas. Para instalar ésta opción simplemente hay que teclear en una consola:

sudo apt-get install nautilus-open-terminal

Nos queda de la siguiente forma:

Abrir desde carpeta

Parece una tontería, pero ayua bastante. Esto característica, viene por defecto en linux mint.

Vía | Miguiaubuntu