Técnica CSS para pies de página

Friday, September 5th, 2008

El buenazo de Paul Boag nos remite una técnica muy interesante usada por Ed Merrit, uno de sus diseñadores en Headscape, para hacer pies de página fijos sin javascript, que se queden hasta abajo de la ventana si el contenido es corto, pero que se muestren abajo del contenido si éste es largo.

Usando las propiedades position: fixed; bottom: 0; puedes lograr que el pie de página se quede anclado a la parte inferior de la ventana, pero no se moverá con el contenido si éste es más alto que la ventana. Generalmente el problema se resuelve usando javascript: lees la altura del contenido, lo comparas contra la altura de la ventana y aplicas el posicionamiento que corresponda.

Sin embargo no siempre es conveniente usar javascript ya que puede estar deshabilitado, es una lata asegurarse que funcione en todos los navegadores y siempre es más recomendable resolver un problema de presentación usando css puro.

La técnica mostrada es puro css y dice como sigue:

html


<div id="contenedor">
<div id="contenido"></div>
<div id="pie"></div>
</div> 

O sea, creamos una capa que rodée al contenido y al pie.

css


*, body {margin: 0; padding: 0;}
#contenedor {display: block; position: absolute; min-height: 100%;}
#contenido {display: block; margin-bottom: 3em;}
#pie {position: absolute; display: block; bottom: 0; height: 3em } 

Si tienes experiencia usando css seguro que habrás pensado “¡ajá! esto no va a funcionar en IE6″ y tienes razón.

Para que funcione hay que poner:

body, #container {height: 100%;}

de preferencia en una hoja de estilos separada llamada mediante comentarios condicionales.

Y ahí lo tienen, eso es todo. Hay algunas consideraciones que se cubren en la página original, pero los invito a experimentar con esta técnica.

Conseguir un trabajo nuevo a través de tu portafolios

Tuesday, July 29th, 2008
AcordeónFotografía por Mireia vía Flickr

Muchos diseñadores gráficos, fotógrafos, artistas y similares saben de la importancia de tener un portafolios con sus trabajos para convencer a nuevos clientes o patrones y que los contraten.

Sin embargo el uso de un portafolios no tiene porqué limitarse a las ramas artísticas, sobre todo en esta era electrónica donde es muy fácil poner ejemplos de nuestros pasados logros. Programadores, escritores, ingenieros y otros pueden añadirle más interés a su curriculum o résumé añadiendo un portafolios en línea.

Pero no todo es tan fácil, un buen portafolios debe reunir los mismos requesitos de un sitio web: estar actualizado, ser fácil de usar y poderse encontrar. Thursday Bram nos ofrece una guía de 7 trucos para tener éxito con nuestro portafolios en el sitio de Stepcase Lifehack. El original está en inglés pero interpretado rápidamente dice más o menos así (notas adicionales mías en italicas):

  1. Ponerlo en línea. Si lo mandas como anexo en un correo electrónico puede que no lo abran por miedo a los virus (o que lo filtre el servidor de correo). Tampoco leerán un portafolios de papel. Una liga a tu portafolios tiene mejor oportunidad de verse.
  2. Que no haya que descargar nada. O sea, nada de PDFs, archivos de Word o cualquier otra cosa que haya que descargar y abrir. Si eres programador no incluyas ejecutables, sino capturas de pantalla.
  3. Organiza el portafolio. No necesariamente en orden alfabético (o histórico, o las plastilinas del kinder) pero debe ser lógico para el reclutador donde debe hacer clic y qué va a ver. Hazlo para que hasta tu abuelita lo entienda (a menos que tu abuelita sea Grace Hopper).
  4. Contextualiza. Incluye etiquetas y descripciones de lo que estás mostrando. Sin un contexto adecuado quienes vean tu trabajo no van a saber ni de que se trató ni porqué es importante. Usa esto como un reto para exponer tus habilidad de comunicación y pulir tu redacción.
  5. Dale enfoque. Expón los trabajos que reflejen a lo que te quieres dedicar (los que den a conocer las habilidades que quieres usar en una nueva carrera o que le interesarían a un empleador). Puedes crear portafolios separados para cada una de las carreras que te interesen.
  6. Usa una variedad de medios (me caga la palabra “multimedia”). No todas las habilidades se pueden expresar a través de la palabra escrita o la fotografía. Si quieres ser vendedor tal vez unas gráficas que demuestren tu desempeño sean l9o mejor; si quieres ser animador, un video que demuestre como prendes al público es mejor que una simple fotografía.
  7. Compra tu propio nombre de dominio — o no. Si planeas mantener tu portafolios a largo plazo comprar tu nombre de dominio es buena idea, pero aún así puedes usar uno de los muchos sitios gratuitos donde puedes poner muestras de tu trabajo.

Thursday termina diciendo que ella se limita a poner trabajos que ha hecho bajo comisión para otros ya que los personales no han pasado por el mismo rigor de un trabajo pagado. Yo no he armado todavía un portafolios, pero he jugueteado bastante con la idea durante el último par de años, sobre todo para no olvidar que tanto he hecho.

¿Y tú? ¿Has hecho alguno? ¿Tienes planes para hacerlo? ¿Qué otra utilidad o peligro le ves?

Los usos y desusos de blockquote

Thursday, July 24th, 2008

Una de las ventajas más grandes de usar los elementos de html de manera correcta está en que puedes identificar rápidamente las diferentes secciones de texto y a que parte corresponden. Sin embargo no todos los desarrolladores conocen la manera correcta de usarlos.

Entre los elementos más incomprendidos está blockquote. Muchos, muchos desarrolladores lo usan para darle un margen mayor a un párrafo, siendo que en realidad este elemento debe servir para indicar que un párrafo proviene de una cita textual de otra fuente.

Por ejemplo, si estamos citando de un libro:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

Es importante que la diferencia quede clara porque, sí, si no aplicamos estilos habrá un margen mayor del lado izquierdo en casi todos los navegadores, pero aplicándole estilos a blockquote podemos hacer que ese bloque de texto tenga cualquier característica:

El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.

Lo más importante es que en el código estos párrafos siguen identificados como una cita textual y la podemos tratar como corresponde e identificarlas rápidamente. Un elemento adicional que pertenece dentro de este elemento es cite. Con éste hacemos la aclaración de donde proviene la cita:

Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque por conjeturas verosímiles se deja entender que se llamaba Quijana. Pero esto importa poco a nuestro cuento: basta que en la narración dél no se salga un punto de la verdad.
El ingenioso hidalgo Don Quijote de la Mancha

El último elemento es la simple y sencilla q. La q la usamos cuando queremos hacer una cita corta dentro del mismo párrafo. Internet Explorer no agregará comillas automáticas, todos los demás navegadores sí. Como el viejo decía: Si las cosas que valen la pena se hicieran fácilmente, cualquiera las haría. Esto distingue el texto citado del resto tanto de manera visual como en el código. Incluso la podemos usar dentro de otra cita:

…porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura.
El ingenioso hidalgo Don Quijote de la Mancha

¿Qué hacemos entonces si necesitamos distinguir un párrafo que no es una cita textual? Simplemente creamos una clase para ese párrafo y le aplicamos estilos. En estos ejemplos estoy creando estilos en la línea, pero lo mejor es aplicarlos en una hoja de estilos separada. Recuerda que es preferible que los nombres de las clases digan porqué es importante el elemento, no como se va a ver.

Correcto: class="nota", class="advertencia", class="pocoImportante"
Incorrecto: class="fondoRojo", class="orilladoalaorilla", class="fonditoAzulChiclamino"

Este párrafo no es una cita, pero su importancia, relevancia, agudo ingenio y encanto precisan que se le dé una presentación especial de buen gusto y mejor vestir.

Finalmente la importancia de mantener el buen uso de blockquote, cite y q está en que estos elementos de html nos permiten mantener nuestro código limpio y fácil de leer, y eso lo apreciaremos a la hora de hacer cambios.

Efecto de acordeón en javascript

Tuesday, May 27th, 2008
Lo interesante y novedoso de este script para un efecto de acordeón es que es muy ligero, sólo mide 1 KB y no necesita de otras bibliotecas como jQuery o Mootools. Los resultados quedan bastante bien, se degrada grácilmente y no hay que sacrificar la codificación semántica del sitio. Muy recomendable si estás buscando este tipo de efecto en tu sitio.
clipped from www.leigeber.com
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.
blog it

Creando una página usando capas con Dreamweaver

Tuesday, February 19th, 2008

Crear un sitio que use capas y css tiene un gran número de ventajas, pero muchos no saben como hacerlo. Presento aquí un video-tutorial usando Dreamweaver.

De Robertobaca.Net

Además de ser código válido y semántico, programar con capas nos permite desarrollar y cambiar nuestras páginas de manera muy rápida. Podemos ahorrar mucho tiempo sobre todo a la hora de cambiar el sitio o agregar nuevas secciones.

Desafortunadamente a muchas personas todavía se les enseña a crear sitios usando tablas y dejando toda la programación al editor, como Dreamweaver, lo cual produce código muy difícil de leer y mantener. Incluso en el modo de diseño adiciones o cambios posteriores al diseño se hacen muy difíciles.

Si hasta ahora no has tenido oportunidad de ver como se crea un sitio con capas, espero que este video tutorial te lo deje un poco más claro.