El acordeón no acordeona

Terminé de diseñar un sitio, en el cual una de las secciones, más precisamente la de enlaces, posee un hermoso acordeón que permite dividir los mismos en categorías.  Como desarrollo basándome en Firefox, ya sabía que en ese navegador funcionaba.  Decidí probar el sitio en Chrome, y descubrí que el sitio se veía como corresponde.

Luego, y para finalizar el trabajo, le pedí a un amigo una amiga que probara el sitio en Internet Explorer.  Obviamente, y como te estás imaginando, el sitio explotaba completamente, todo se veía corrido y fuera de lugar y las tipografías horribles.

Comencé el proceso de hack de la hoja de estilos CSS.  Luego de media hora, el sitio se veía bien en todos los navegadores. Hasta que descubrí una falla, que se producía solo en IE y no en los demás.  El acordeón, (realizado en JavaScript mediante Mootools) no funcionaba.

Luego de revisar varias veces el código buscando algún conflicto con otro JS, probar una docena de modificaciones, volver a bajar el framework, etc, etc ,etc  pude dar con la falla que provocaba el error: el Document Type.  Alcanzó con cambiar el mismo por el que pongo a continuación para que todo funcionara a la perfección.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

códigos / entidades HTML

Muchas veces al crear o editar sitios nos encontramos con que ciertos caracteres no se representan como deberían, sobre todo vocales tildadas, la eñe, etc. Esto se debe a problemas con la codificación de los caracteres.

Una forma de solucionar esto es utilizar entidades html para representar los caracteres que traen problemas.
Veamos: Si tengo que mostrar la palabra esdrújula en vez de escribir dentro del código la letra con tilde como haríamos en un procesador de texto, vamos a reemplazar esa letra por un código que la represente. Con esto no se dejan dudas sobre cuál es el carácter que se debe mostrar al usuario en su navegador.

Ejemplo:   Esdrújula -> Esdr&uacute;jula

Luego, necesitamos saber cuales son los códigos de cada letra o caracter. Aquí dejo los más usados.
Entidades html

Netbeans + PHP + Smarty

En mi trabajo me asignaron a un proyecto nuevo para mi, donde tendré que realizar mejoras y correcciones a un sistema de e-learning el cual está programado en PHP orientado a objetos y utiliza {es:Smarty} como motor de templates.

El tema fue que al revisar mi IDE preferida {es:Netbeans} me dí cuenta que no tenía soporte para Smarty, osea, que no entendía las etiquetas ni resaltaba la sintaxis de los archivos propios del motor.

Busqué alguna otra IDE que soportara Smarty, supuestamente Aptana lo hacía pero no logré hacer funcionar ese plugin.

EDIT 22/11/2009 : APTANA deja de soportar Smarty si instalas los plugins de PHP. Si dejas la ide tal cual la instalas, soporta Smarty. Y además podés trabajar en un servidor remoto a través de SFTP. Actualmente estoy usando APTANA.

Otra IDE que cumplia con todo lo que necesitaba es Komodo, pero no es libre y la licencia sale u$s295.  así que decidí ver que podía hacer para «acomodarme», bien a la argentina, con Netbeans.  Les cuento como me fué:

En el menú superior encontramos «Tools» -> «options» . Dentro del cuadro de diálogo, abajo a la izquierda encontramos un botón «Advanced options«.

Dentro de opciones avanzadas vamos a «Ide configuration» ->  «System» -> «File tipes«.

Buscamos «PHP.xml » y hacemos botón derecho -> abrir.  Vamos a ver que en el editor se abre este archivo, en donde se indican que extensiones deben ser tratadas como archivos PHP.

Lo que vamos a hacer es agregar las extensiones que usamos con Smarty para que al menos nos resalte la sintaxis básica, aunque no reconozca las etiquetas propias del motor.

Agregamos al archivo estas dos líneas (las del recuadro rojo):
smarty

Grabamos el archivo, cerramos Netbeans y al volver a abrirlo ya nos reconoce los archivos de Smarty como si fueran PHP.

Luego,  todas las etiquetas de Smarty son entre llaves, por ejemplo:

{#pagename#}
{$smarty.now}

Entonces se me ocurrió agregar un atajo para facilitar la escritura de las etiquetas. Hice así:

Desde el menú principal vamos nuevamente a «Tools» -> «Options«.  Vamos al segundo ícono -> «Editor» y luego a la solapa «Code templates«.  Luego «new» para agregar un nuevo atajo. Hay que definirle un nombre, yo le puse «sm» por Smarty, aparte es muy cómodo.
Luego en «Expanded text» agregamos lo siguiente:

{{$cursor} }

y damos «ok«. Ahora cada vez que escribamos «sm» y presionemos la tecla «tab» apareceran las dos llaves { } con el cursor titilando dentro, listo para escribir la etiqueta de Smarty.

Si bien no es la solución definitiva,  digamos que con estas ayudas se puede trabajar con Smarty sin sangrado de retinas xD.

usando Tablas

Las tablas son una herramienta muy eficaz para presentar datos tabulados ( NO para maquetar, para eso existen las etiquetas DIV y SPAN). Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas.
Creando una tabla

La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés «table row») definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés «table data cell») define cada una de las columnas de las filas.Normalmente, algunas de las celdas de la tabla se utilizan como
cabecera de las demás celdas de la fila o de la columna.
En este caso, HTML define la etiqueta <th> (en inglés «table header cell») para indicar que una celda es cabecera de otras celdas.

El atributo SUMMARY nos sirve para definir una descripción del contenido de la tabla.

<table summary = 'Esta es una tabla de ejemplo.'>
<th colspan='2'> Cabecera de la tabla </th>
<tr>
<td>Producto 1</td>
<td>Descripción 1</td>
<td>Precio 1</td>
</tr>
<tr>
<td>Producto 2</td>
<td>Descripción 2</td>
<td>Precio 2</td>
</tr>
</table>

Unión de Celdas

Con el atributo COLSPAN definimos el número de columnas que ocupa una celda.
Por ejemplo:
tablaA

<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>

Con el atributo ROWSPAN definimos el número de filas que ocupa una celda.
Por ejemplo:
tablaB

<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

Una vez creada la estructura semántica de la tabla, podemos darle el estilo que queramos mediante CSS.
Nos alcanzará con definir tres estilos, todos para selectores etiqueta, más o menos así:

table {
font:normal 76%/150% "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
border-collapse:separate;
border-spacing:0;
border-width:1px 0;
margin:0 0 1em;
color:#000;
}
td {
padding:0.25em 0.5em;
text-align:left;
vertical-align:top;
padding:10px;
}
th {
font-weight:bold;
line-height:normal;
adding:0.25em 0.5em;
text-align:center;
background-color:#bbb;
border-width:0px;
padding:8px;
}

Luego, un último detalle, si queremos que al pasar el mouse sobre una celda esta cambie su color de fondo, podemos agregar este estilo:

td:HOVER { background-color:#f00; }
Si querés probar si entendiste qué es una tabla y como hacerla, intentá crear el HTML para la siguiente tabla:

ejercicio_tabla

Queda pendiente la parte de DISEÑO CSS para las tablas. Completo el post hoy a la noche o mañana :D

Me voy para Catamarca

En el marco de las 4tas jornadas de sofware libre de la provincia de Catamarca, estoy viajando a esa misma provincia para dar mi charla sobre diseño web con herramientas libres. El evento se llevará a cabo  en el aula magna de la Universidad Nacional de Catamarca. En los próximos días estaré posteando algún material al respecto.

mapa catamarca 2UNCA

Las charlas serán:

– Software Libre: Primeros Pasos
– Ventajas de Tecnologías Libres en Seguridad Informática
– El Software Libre: Modelos de Negocios
– Diseño Web con Herramientas Libre
– Joomla tu Web de la Noche a la Mañana
– Gestores de Contenido Drupal
– IDE para Microcontroladores
– Catamarca Libre
– Mi Servidor Casero
– Sistemas Operativos: que son y que hacen
– Aprendiendo a Usar la Línea de Comandos de GNU/Linux
– Atacando el Corazón de Linux- Bluethoot en Linux

Conurbania

Los quería invitar a este evento en el cual voy a estar presentando mi charla sobre diseño web con herramientas libres, es de entrada libre y gratuita.

Cronograma de charlas

banner_624x80

Conferencias sobre Software Libre en el conurbano bonaerense

El sábado 14 de noviembre, desde las 9 de la mañana y en jornada completa, tendrán lugar las conferencias sobre Software Libre en el conurbano bonaerense, Conurbania 2009, en la Sede Bernal de la Universidad Nacional de Quilmes, Roque Saenz Peña 352 (Bernal).

¿Qué es Conurbania?
Conurbania es un evento para la difusión del software y tecnologías libres dentro del conurbano bonaerense, donde empresas, instituciones, colegios, fundaciones, municipios y público en general participarán de charlas realizadas por profesionales, participarán de talleres técnicos y encontrarán un lugar en el que podrán interactuar directamente con los disertantes y expositores. El evento abarcará tres temáticas diferentes: educación – gobierno – pymes y empresas

¿A quién está dirijido el evento?
Empresarios, profesionales, docentes, estudiantes, tomadores de decisión en el ámbito público, técnicos en general se darán cita en este encuentro que prevé también un amplio espacio para intercambiar opiniones, socializar y compartir una jornada dedicada plenamente al software libre.

Más información sobre este evento en http://www.conurbania.org/

Templates CSS

Set de templates {es:CSS} predefinidos. Los posteo porque me parecen muy útiles en estos dos casos, si estas aprendiendo CSS podés ver como están hechos, que estilos se utilizan para la maquetación, etc.  Si estas comenzando  un proyecto web, te pueden servir para ahorrarte tiempo o como disparador para darle un nuevo formato al diseño del sitio.

templates_CSS

Podés verlos y bajarlos acá.

Crónicas del Sur

Bueno, estoy de regreso en Buenos Aires realmente muy pero muy contento porque las Jornadas del Sur fueron un éxito.
3 días de charlas y talleres, gran asistencia de público, buena comida, nuevos y viejos amigos y sobre todo, mucha informática y cultura libre. Todo lo que un geek de sangre puede pedir.

Las fotos:

DSCF1467
DSCF1479
DSCF1486DSCF1482
DSCF1485
DSCF1495P1020311P1020209P1020212
DSCF1498
DSCF1513DSCF1521DSCF1519

Remera

Menús usando html + css

Encontré este sitio muy bueno que enseña como hacer menús html+css y además ofrece el código de ejemplo de cientos de menús.

Todo usando listas html y estilos css.

Un ejemplo de como sería un menú de este tipo:

Primero la estructura del menú

esto sería el archivo HTML

<div id=»navcontainer»>
<ul id=»navlist»>
<li id=»active»><a href=»#» id=»current»>Item one</a></li>
<li><a href=»#»>Item two</a></li>
<li><a href=»#»>Item three</a></li>
<li><a href=»#»>Item four</a></li>
<li><a href=»#»>Item five</a></li>
</ul>
</div>

y  luego los estilos para darle la forma que queremos:

esto iría en la hoja de estilos CSS

#navcontainer
{
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

El resultado sería así:

menu_css