Por fin un ejemplo de Box Model entendible (2da. parte)

Bueno, no me aguanté las ganas de seguir haciendo pruebas. Esta vez con Layout #13 de Layout Gala.

El ejemplo anterior tomado de Matthew Levine estaba elegante pero no quiso funcionar en IE.

Simplifiqué un poco el ejemplo y esto fue lo que obtuve.

test_div2a.gif

Me hace falta lograr que las columnas izquierda (azul) y derecha (rojo) ocupen tanto espacio como ocupe la columna central (salmón), sin embargo si utilizo height: 100% intentan tomar el alto de la pantalla.

Por ahora este es un gran paso para -mi- humanidad en la lucha contra las cajas.

El archivo de prueba puede descargarse del siguiente enlace: test_div2a.html.

Por fin un ejemplo de Box Model entendible

Hace hace muy poco no había querido trabajar con CSS. Siempre encontraba una rápida respuesta para mejor hacerlo de la manera convencional … es mas rápido, no tengo tantos problemas, no se complica tanto, etc. En el último par de meses en los que he estado de webmaster adaptando la presentación de algunos portales a la provista por el publicista de la Fundación he aprendido algunas cositas y como todo lo que aprendo, me ha terminado gustando mucho.

Una de las cosas de las que en realidad no he logrado entender completamente es el box model (modelo de cajas) de CSS. Yo quiero hacer lo que la teoría sugiere: en el HTML dejar sólo el contenido y en CSS especificar como se va a presentar esa información. Según esto, yo quiero que el layout (distribución) de mi página esté dada por el CSS con DIVs y no en el HTML con TABLE. Pero ah que cosa mas extraña para mi.

Le he sacado tiempo en varias oportunidades pero no lo he logrado. Lo mas cerca que he estado funcionaba perfecto en Firefox pero se corría inexplicablemente en IE … como siempre.

Hoy amanecí con ganas de volver a intentarlo y encontré un par de enlaces muy interesantes. Entre ellos me gustó In Search of the Holy Grail de Matthew Levine quien se toma su tiempo para explicar la implementación de una página con tres columnas, dos de ellas de ancho fijo y el centro líquido (consume el tamaño complementario) y con una estructura de DIVs simple, tal y como yo la quería.

<div id="header">Este es el header</div>
<div id="container">

<div id="center" class="column">Este es el centro</div>
<div id="left" class="column">Esta es la izquierda</div>
<div id="right" class="column">Esta es la derecha</div>
</div>
<div id="footer">Estos son los pies</div>

Este código HTML produce el siguiente resultado después de ser mezclado con el CSS correspondiente.

demo_css_div

Como siempre … en Firefox funciona perfecto, lo acabo de probar en IE7 y se enloquece, a pesar de que el autor menciona que funciona en los principales navegadores.

El archivo de prueba que utilicé se puede descargar del siguiente enlace: test_div.html.

Espero mas adelante tener un poco mas de tiempo y hacerlo funcionar ya que no quiero seguir haciendo páginas basadas en TABLEs.

Otro enlace relacionado con el tema que se ve prometedor es Layout Gala (http://blog.html.it/layoutgala/) en el que se presentan varios diseños basados en columnas.

Problemas entre capas y objetos Flash en HTML

Tenía que publicar en uno de los portales un bloque con un logo hecho en Flash. La puesta fue muy fácil, el problema apareció cuando los menúes desplegables empezaron a aparecer por debajo del objeto Flash.

Hice pruebas envolviendo el object en un div y modificando el z-index, pero nadita.

Los objetos Flash traen ahora una propiedad que se llama wmode a la cual si se le asigna el valor de transparent no solo hace el fondo del SWF transparente sino que hace que el objeto respete el índice de profundidad.

Hay que poner el valor sugerido como parámetro del object y dentro de la etiqueta embed para que funcione en los dos navegadores.

Ejemplo:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="185"
height="205">
<param name="wmode" value="transparent">
<param name="movie" value="banner_iso9001_ntcgp1000.swf">
<param name="quality" value="high">
<embed src="banner_iso9001_ntcgp1000.swf" quality="high"wmode="transparent"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"
width="185"
height="205"></embed>
</object>

Encriptando cositas con MCrypt

La fase final de mi experimento con XML-RPC suponía poder encriptar la solicitud que iba del cliente al servidor así como la respuesta de este último hacia el cliente. Como se sobreentiende, esta encriptación debería ser de dos vías. Para esto estuve revisando la API de PHP y encontré que la utilización de la librería mcrypt es bastante útil y que por suerte hasta el hosting mas antiguo de todos la soporta en PHP.

Para esto entonces desarrolle dos procedimientos: encriptar y desencriptar para separar su funcionalidad.

Encriptar.

Para encriptar información se requieren los siguientes parámetros.

  • El nombre del algoritmos de encriptación (Ej. blowfish).
  • El modo de encriptación (Ej. cfb).
  • El orígen del azar (Ej. MCRYPT_RAND).
  • La contraseña de encriptación (secreta).
  • Los datos a encriptar.
  • El vector de encriptación (IV) que actúa como semilla (opcional).

Se abre el módulo del algoritmo de encriptación y se especifica su definición.

$td = mcrypt_module_open($encryption_algorithm, ”, $encryption_mode, ”);

Se crea el vector de encriptación y se determina la longitud de la llave.

$client_iv = mcrypt_create_iv(mcrypt_enc_get_iv_size($td), $random_source);
$ks = mcrypt_enc_get_key_size($td);

Se crea la llave basada en la contraseña de encriptación especificada por el usuario (mayor seguridad).

$key = substr(md5($encryption_key), 0, $ks);

Se inicializa la encriptación con la información establecida anteriormente.

mcrypt_generic_init($td, $key, $client_iv);

Se encriptan los datos.

$encrypted_data = mcrypt_generic($td, $raw_data);

Se termina el proceso de encriptación.

mcrypt_generic_deinit($td);

Al final se obtiene el vector de encriptación ($client_iv) y la información encriptada ($encrypted_data), ambos son necesarios para realizar el proceso inverso.

Desencriptar.

Para desencriptar la información se requiere la siguiente información.

  • El nombre del algoritmos de encriptación (Ej. blowfish).
  • El modo de encriptación (Ej. cfb).
  • La contraseña de encriptación (secreta).
  • El vector de encriptación (IV).
  • Los datos encriptados.

Se abre el módulo del algoritmo de desencriptación y se especifica su definición.

$td = mcrypt_module_open($encryption_algorithm, ”, $encryption_mode, ”);

Se determina la longitud de la llave.

$ks = mcrypt_enc_get_key_size($td);

Se crea la llave basada en la contraseña de encriptación especificada por el usuario (mayor seguridad).

$key = substr(md5($encryption_key), 0, $ks);

Se inicializa la desencriptación con la información establecida anteriormente.

mcrypt_generic_init($td, $key, $client_iv);

Se desencriptan los datos.

$decrypted_data = mdecrypt_generic($td, $encrypted_data);

Se termina el proceso de encriptación y se cierra el módulo.

mcrypt_generic_deinit($td);
mcrypt_module_close($td);

Al final se obtiene la información desencriptada ($decrypted_data) la cual debe corresponder con la información original. Algunas veces la desencriptación deja espacios en blanco a los lados de la cadena desencriptada por lo que puede ser de utilidad pasar la información por un trim() como último paso.

La demostración de este código se encuentra siguiendo este enlace Demo #0. Este cuenta con los archivos config.php (variables necesarias), security.php (funciones para encriptar y desencriptar) y demo1.php (ejemplo funcional).