domingo, 27 de marzo de 2011

CSS : Hacer un DIV contenedor estirado a lo alto en una web

Lo prometido es deuda. Hoy es domingo y aquí va mi aporte de la semana a la comunidad desarrolladora.

Todos sabemos que es PECADO maquetar (distribuir los elementos) una web usando TABLAS! Pero yo no soy enemigo de las tablas, a veces las uso porque me sacan de problemas.

Muchas veces necesitamos hacer un DIV contenedor que abarque todo el alto de una página web, pero si el alto de la ventana del explorador es mayor que el alto del contenido de la web, nuestra página se vería así:


... cuando lo que en realidad queremos es que se vea así:


El truco está en definir en nuestra hoja de estilos el alto de la etiqueta HTML y del BODY:

html{
height:100%;
}

body {
height:100%;
}


Además, el estilo de nuestro DIV contenedor tendría que ser algo así:

#MainContainer {
margin:auto;
background-color:#ececec;
width:610px;
height:100%;
position:relative;
top:0px;
bottom:0px;
}


Recordemos que para centrar horizontalmente nuestro contenido en una web utilizamos margin-left y margin-right como auto

Nuestro HTML sería algo así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="styles.css" type="text/css" rel="stylesheet" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de cómo &quot;estirar&quot; un layer a lo alto de una ventana de explorador</title>
</head>

<body>
    <div id="MainContainer">
     Contenido de alto variable
    </div>
</body>
</html>

Espero que sirva esto como un punto más para el uso de DIVs en vez de  TABLEs para maquetar una web. No les tengan miedo, todo se puede hacer siempre que se sepa utilizar.

Hasta el otro domingo...

lunes, 21 de marzo de 2011

Protegiendo la propiedad intelectual (encriptar, codificar, compilar código PHP)

Bien, todos sabemos que los scripts de PHP no pueden ser vistos de parte del cliente. Estos se ejecutan en el servidor y dan como resultado, por lo general un HTML.

Sin embargo, los desarrolladores sabemos que estos scripts de PHP son eso justamente, un archivo de texto donde se encuentra todo nuestro código. El motor de PHP en el lado del servidor se encarga de interpretar este script que está en "lenguaje de alto nivel", luego crea un opcode (que vendría a ser lo que un bytecode es para java) y luego lo ejecuta para dar como resultado el HTML.

El problema está en que estos scripts los subimos directamente al servidor donde serán interpretados y luego ejecutados. Eso quiere decir que nuestros clientes y cualquier persona que tenga acceso a los archivos de nuestro servidor podrán revisar nuestro código, cambiarlo, copiarlo o redistribuirlo sin que nosotros (los creadores de esta propiedad intelectual) tengamos algún control o beneficio.

Esto va en contra de mi filosofía porque yo soy un amante del OpenSource. Es más, muchos de mis códigos los publicaré en este blog para el beneficio de todos (incluyéndome con sus críticas). Sin embargo, hay que darnos un poco de crédito ya que esta es nuestra forma de vida.

Existe la opción de "encriptar" o "codificar" nuestro código PHP para que sea ilegible por alguna persona poco entendida en el tema. Este método se basa en la codificación con las funciones base64_decode base64_encode. De tal manera de que si se tiene el siguiente código PHP:

<?php
echo "Hello World";
?>

El script codificado sería:

<?php $_F=__FILE__;$_X='Pz48P3BocA0KNWNoMiAiSDVsbDIgVzJybGQiOw0KPz4=';
eval(base64_decode('JF9YPWJhc2U2NF9kZWNvZGUoJF9YKTskX1g9c3RydHIoJF9YLCcxMjM0NTZhb3VpZScsJ2FvdWllMTIzNDU2Jyk7JF9SPWVyZWdfcmVwbGFjZSgnX19GSUxFX18nLCInIi4kX0YuIiciLCRfWCk7ZXZhbCgkX1IpOyRfUj0wOyRfWD0wOw=='));?>

A esto se le llama encriptar, pero es una opción poco segura porque aplicando la inversa de la función se obtiene el código original.

Existe también lo que se llama ofuscar el código, que es cambiar de nombre a las variables, encriptar los textos, eliminar los cambios de línea, etc. Esto hace un poco difícil de leer y entender el código y, sumado a una encriptación como la que expliqué anteriormente, resulta una forma un poco más eficiente de proteger nuestro código.

Para encriptar nuestro código existen varias herramientas muy fáciles de encontrar en internet. Les ofrezco esta que es online: http://www.byterun.com/free-php-encoder.php.

Tenemos una opción mucho más segura que es "precompilar" nuestro código que es como crear un .class si trabajáramos con Java. Esta opción tiene varias ventajas. Primero, y lo más importante es que nuestro código no puede ser interpretado de manera inversa. Además, contrariamente a la encriptación, ahorra recursos de procesamiento ya que no es necesario interpretar el script. El método de encriptación por el contrario lo que hace es incluir un proceso más de "desencriptado" y esto hace más lenta la ejecución de este script. Se puede especificar una fecha de caducidad, se pueden manejar licencias, etc. Así que está bastante bueno para hacer aplicaciones web distribuíbles y propietarias.

Existen varias herramientas gratuitas para hacer esto pero yo voy a enseñar cómo usar la más común ZendGuard. Ésta no es una herramienta libre, tiene un costo. Así que tendrán que pagar la licencia si lo quieren usar así como yo ya la estoy usando. El Zend Guard, así como el Zend Studio están en una interfaz gráfica de Eclipse que todos conocemos muy bien.

Es necesario mencionar que, del lado del servidor, es necesario tener instalado el servicio Zend Optimizer. Pero este software es gratuito y está instalado en todos los servicios de alquiler de host por defecto.

Ahora, hagamos un pequeño ejercicio. Luego de instalar el Zend Guard en nuestras computadoras y luego de que logremos que funcione la licencia, lo abrimos y creamos un nuevo proyecto indicando todos los campos necesarios:




Seleccionamos el output que es la carpeta donde se guardarán nuestros archivos compilados, yo lo he puesto en una subcarpeta de mi public llamada proyectoPHPcomp y tengo los "originales" en una subcarpeta proyectoPHP. Y listo! bueno, obviamente falta colocar nuestros archivos en el proyecto recientemente creado. Para hacer la prueba crearemos un index.php y una clase Persona. Lo haré así porque considero que lo que más uno quiere proteger es el diseño técnico de la aplicación más que el diseño gráfico para darle la posibilidad al cliente de modificar algunas cosas de diseño gráfico de su web. Pero la algoritmia y programación de los procesos los colocaremos en clases compiladas.

Tenemos una clase Persona de ejemplo en el archivo Persona.php


<?php
class Persona {
public $id;
public $nombre;

public function Persona($nombre = NULL) {
$this->nombre = $nombre;
}

}

?>

Con su respectivo constructor, una clase muy sencilla pero que puede almacenar todo nuestro algoritmo y valioso trabajo.

Y este es nuestro archivo index.php que no compilaremos para permitir al cliente manejar el diseño de su web. Total, la lógica del negocio está en la clase Persona sólo hay que saber qué se puede hacer con esta clase. Para el ejemplo sólo da el nombre de una persona.

<?php
include_once "classes/Persona.php";
$persona = new Persona("Justo Debarbieri");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
<title>Creación de una Persona - PHP Compilado</title>
</head>
<body>
<h1>Creación de una Persona - PHP Compilado</h1>
<table>
<tr>
   <td>Nombre:</td>
   <td><?= $persona->nombre?></td>
    </tr>
</table>
</body>
</html>

Agregamos estos archivos en nuestro proyecto en la siguiente ventana del wizard. Mis originales los tengo en la subcarpeta proyectoPHP:


Dejamos los default del wizard y terminamos. Y queda así nuestro explorador de proyectos:


Al lado derecho vemos muchas opciones donde se puede indicar la fecha de caducidad de los scripts, si quieres ofuscar los nombres de las variables, funciones y clases, manejo de licencias, etc. Se puede modificar la cabecera que se mostrará en caso no se tenga instalado el Zend Optimizer de lado del servidor. Ahora hay que especificar que no queremos que el archivo index.php sea compilado. Simplemente le damos clic derecho y seleccionamos "Exclude Resource" lo que permite copiar el archivo en el output sin ser compilado.

Ahora hacemos clic derecho sobre el proyecto y seleccionamos "Encode Project".

El archivo index.php queda igual pero el archivo Persona.php con caracteres extraños que ni siquiera puedo copiar acá. Pero sigue manteniendo la extensión .php eso quiere decir que los debemos seguir incluyendo como si fueran archivos PHP normales.

Suerte con sus proyectos!

domingo, 20 de marzo de 2011

Mi Biografía (Parte 2)

Hoy día es domingo y no me olvidé de lo prometido. A pesar de que estos últimos días he tenido muchos problemas comenzando por haberse malogrado mi computadora. He detenido toda mi vida.

Pero nos quedamos en finales de mi secundaria. Ya para ese entonces había nacido en mí la vocación hacia la computación. Lo que quería hacer el resto de mi vida eran software y me intrigaba aprender cómo era el funcionamiento más profundo de una computadora.

Ingresé a la universidad y para mi decepción lo único que me enseñaban era matemáticas, algoritmos de programación, cursos de gestión empresarial, administración de proyectos, etc. Puedo salvar algunos casos. Aprendía a documentar un software (UML) pero sólo en ejemplos para el examen. Me enseñaron Pascal! jaja obviamente no sirve para nada ese lenguaje ahora. Un rápido vistaso a la teoría de Entidad Relación para las bases de datos que a la mayoría de mis compañeros no les quedó clara nunca. Aprendí la teoría de Clases y Objetos, aunque nunca me pareció un paradigma muy novedoso, al fin y al cabo todos los procesos de una computadora son eso, procedurales.

Para cuando estaba en 5to de secundaria, pusieron internet en mi casa. Sería demasiado detallar cómo era, esa es historia bastante sabida. Pero sí me ayudó para desarrollar una faceta de mi carrera que yo en ese momento menospreciaba: "Las Webs".

Todo comenzó cuando una amiga me solicitó hacer una página web. Yo ya había hecho cosas muy sencillas con hostings gratuitos (me acuerdo bastante de Galeón) y le dije que eso no tenía nada que ver con mi carrera, que más era diseño gráfico y que lo podía hacer cualquier hijo de vecino. Efectivamente, cualquier persona puede hacer una web, es algo muy fácil. Pero me insistió y se la hice. Pero yo soy una de las personas que cuando me sumerjo en algo no paro hasta que logre lo que quiero. Se me ocurrió utilizar Flash. Yo ya sabía manejar Flash pero sólo las animaciones en la línea de tiempo y había hecho trabajos muy bonitos como una presentación para una exposición con efectos de fade y zoom. Pero descubrí que habían otras posibilidades de animación más elaboradas y con interacción con el usuario. Y es así que me propuse aprender ActionScript 2.0. Con eso hice mi primeros botones animados, álbum de fotos, y reproductor de música.

Luego de un gran tiempo en la universidad (tiempo que perdí en mi desarrollo profesional) me ofrecieron la oportunidad de trabajar en una empresa de Marketing (Marketcom santo dios... su página sigue en rediseño!) y es allí donde me propuse nuevos retos para el desarrollo en Flash. Utilicé PaperVision 3d para algunas animaciones en 3d interactivas. Utilicé XML para mejorar algunos procesos de animaciones para la página web de Esika. Muchos juegos y postales, aplicaciones multimedia en Flash.

Sin embargo, el reto que más me gustó fue la página de David Fischman porque en este proyecto hubo un análisis de procesos, bases de datos, etc, etc. Además de que yo fui el único que la desarrolló. Fue con esta página que alcancé un nivel medio en programación con PHP. Además de experimentar todos los contratiempos típicos de un proyecto de esta naturaleza. Ese fue el año que más sentí que crecí como profesional.

Lamentablemente la universidad me absorbía demasiado y un conflicto de abuso laboral me hizo renunciar para dedicarme nuevamente a mis "estudios".

Mientras tanto he hecho algunos proyectos más. En estos momentos estoy desarrollando mi tesis que se basará en una aplicación en Facebook (y que seguro que tendré con esto muchas cosas que postear).

Por el momento, termino esta entrada, pero la historia continuará en este blog...

miércoles, 16 de marzo de 2011

Mi Biografía (Parte 1)

Bien, para que no quede en promesa, acá la primera entrada DE VERDAD!

Mi nombre es Justo Enrique Debarbieri Arce, tengo 26 años y soy estudiante de la facultad de Ciencias e Ingeniería (Especialidad de Ingeniería Informática) de la Pontificia Universidad Católica del Perú hace ya 9 años!...

Se supone que debí terminar en 5 años pero no soy buen estudiante. En compensación Dios me hizo ser un "buen desarrollador".

Desde que tengo 13 años noté un gran interés en la informática. Sin embargo mi primer contacto con las computadoras fue cuando tenía 10 años. En el colegio nos enseñaron a manejar un programa que se llamaba "LogoWriter" (Sí! el de la tortuga). Y en realidad, ese también fue mi primer contacto con la programación porque el movimiento de la tortuga era programado! Entonces era muy diferente estudiar LogoWriter que estudiar WordPerfect (Sí! el word de la pantalla azul que sólo usaba letra Courier)

Luego, el primer curso serio que llevé fue "Ensamblaje de Computadoras" a los 13 o 14 años en unas clases de verano. Aprendí todas las partes de la computadora y mi incógnita más grande era "cómo #&#$@! se puede almacenar información en una memoria?!" Años después lo descubriría al llevar por 3ra vez mi curso de "Electrónica Digital" historia que contaré más adelante. El curso de ensamblaje fue la chispa que encendió todo esto. Me di cuenta de todas las cosas que una computadora era capaz de hacer y que no costaba demasiado caro.

Desde ese entonces estuve cargoseando diariamente a mi mamá para que me comprara una computadora. Dos años después tuve mi primera compu (era una Compaq, procesador AMD, 64Mb de RAM, 4Gb de Disco duro, Monitor de 15' de 1024x768) era lo máximo! jajaja... ahora mi celular es más potente... en fin... La oferta venía o con una impresora o con un scaner. Yo elegí el scaner porque todo el mundo tenía impresora. Con eso aprendí a retocar imágenes con un programa que venía con el scaner.

Luego mi mamá me trajo un libro de Photoshop y unos programas para instalar. No tenía manual de cómo instalarlo y no tenía internet. Así que todo mi aprendizaje fue ensayo y error. Recuerdo una vez que entré a la carpeta de fuentes del sistema y vi un montón de tipos de letra que no me gustaban y, como yo siempre he sido tacaño con el espacio en mi disco duro, decidí eliminarlos sin saber que esas fuentes eran utilizadas por windows y mi computadora no volvió a prender. Tuve que formatearla. Y así poco a poco fui aprendiendo por mi propia cuenta todos los programas que traía mi computadora y todos aquellos que podía instalar, y como mencioné, también aprendía a formatear una computadora. Ahhh básicooo! aprendí con SANGREEE a siempre tener un backup.

Luego, en el colegio, tuve la oportunidad de aprender Access y un poco de programación en Visual (estoy seguro que muy pocos de mis compañeros se acuerdan de eso). La profesora no enseñaba muy bien, pero yo sí sabía lo que estaba intentando enseñar y a mí me apasionaba el tema. Llegaba a mi casa y comenzaba a investigar lo aprendido.

A mí no me gusta alargar mucho mis historias, soy muy conciso (como todo técnico). Además que tengo muy mala memoria y seguro me he olvidado de algo por allí. Voy a dejarlo aquí por hoy, continuaré en otro momento porque TENGO MIL COSAS MÁS QUE HACER (esa es mi frase favorita). En la siguiente parte no puedo olvidarme mi primera experiencia con internet, correos electrónicos y OBVIO! mi expectativa en la universidad.

chaooo!

Bienvenida

Este es el primer post de mi blog. Éste pretende ser un recopilatorio de todas mis experiencias en la programación de los lenguajes con los que tenga contacto.

Tengo mil ideas en la cabeza pero iré poniéndolas de a pocos (espero este no sea el último post que ponga, por lo general, cuando comienzo algo, nunca lo termino), no sería justo quedármelas para mí.

Debo decir algo, "crónicas" no es la palabra correcta para describir este espacio, el problema está en que todos los subdominios que quería ya estaban siendo utilizados, y este era el que mejor se adaptaba y suena bonito.

Prometo que, por lo menos, pondré una entrada los domingos.

Prometo también optimizar mis entradas con SEO y poco a poco ir mejorando el diseño.