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.

Jeffrey Zeldman (izq) y Jeremy Keith. Fotografía de Tantek

Jeremy Keith estuvo en el reciente Un Evento Aparte San Francisco y anotó en su blog, como hace siempre que va a este tipo de cosas, una serie de excelentes resúmenes y observaciones que, la verdad, son documentos indispensables para cualquier diseñador o desarrollador web.

Me quiero concentrar en el primero, Entender el Diseño Web, que trata de la exposición de Jeffrey Zeldman y comienza con la pregunta-respuesta ¿Qué es el diseño web? Empatía. Empatía con el usuario para ser más específicos. Jeffrey habla de la dificultad a la que se enfrentan los diseñadores web para hacer su trabajo más respetable, la inutilidad de los concursos y premios de la industria y lo que necesitamos hacer para mejorar nuestro oficio: no hacer diseño para impresionar a los demás (Como dice Dan Cederholm: Existe la posibilidad que un diseño web *realmente bueno* no reciba ni loas ni críticas. Funciona y ya.); el buen diseño es invisible, trata sobre la personalidad del contenido, no del diseñador, pone al usuario por delante.

Termina la exposición con 12 consejos para lograr un diseño web empático:

1. Comenzar por el usuario.
2. Conoce tus debilidades.
3. Busca el trabajo o proyecto que te guste hacer.
4. Vende las ideas, no los pixeles.
5. Decirle al cliente “no sé” debe ser aceptable.
6. Cultiva la confianza del cliente, que sepan que sabes lo que haces.
7. Apoya tus ideas. No tengas miedo de respaldarlas con investigación.
8. Documenta lo que estás haciendo. Deja un camino de papeles.
9. Nunca cobres de menos.
10. No hagas muestras gratuitas. No hagas una prueba gratis para conseguir un trabajo.
11. No aceptes contratos que piden resultados apresurados. Nunca funcionan.
12. Termina con el usuario. Y si tienes alguna duda, regresa al usuario.

Los consejos me parecen excelentes para todo aquel que se dedique al diseño web, y además hacen mucho eco con lo que apuntaba Cybergus en su blog sobre Lo que todo diseñador debería saber.

Espero que estas recomendaciones no caigan en oídos sordos, u ojos ciegos.

Veo tu futuro muy borroso… ¡ah, pérame! es que tengo que actualizar los controladores. Fotografía de MisfitGirl

La toquibola está basada en un producto ya existente para mostrar la imagen y en la toquimesa y es una muestra de concepto de lo podrían ser las interfaces del futuro.

Parece muy interesante excepto por una cosa ¡yo quiero estar adentro de la esfera! Claro, debería se una esfera algo más grande de la presentada y tener mucha mayor resolución, pero ¿a poco estaría de peluches estar rodeado de la imagen generada por la computadora y poder moverte y manipular los objetos a tu alrededor? Igual y deberá venir con su cubeta para vomitadas pero los simuladores de vuelo, juegos de aventura y de primera persona serían otra cosa. Estoy seguro que también se podrían usar para algo útil.

Así como la veo, la toquibola es algo exótica, me la imagino en un cuarto oscuro como esfera mágica con un grupo de jugadores de rol alrededor. También se puede usar en quioscos de información, ferias y demostraciones de productos; pero no uso común, que entiendo que tampoco es el caso de la demostración.

Vamos a ver que más se presenta a lo largo del año pero esto es apenas la punta del desarrollo en la tecnología multi-toques, sin duda durante los siguientes meses vamos a ver nuevos conceptos en interfaces y aplicaciones.

Hace poco más de un mes escribí El diseñador web empleable a manera de comentario al original de Andy Rutledge con el mismo título. El buen Cybergus me dejó un comentario también a raíz del que yo hice en el sitio de Isopixel sobre otros comentarios de una propuesta de trabajo para un diseñador. ¿No es fantástico esto del internet? Sale un post en un sitio, después en otro donde hay comentarios y los comentarios de los comentarios acaban en el otro donde alguien más puede comentar de otra cosa. Es una gran carne asada con cervezas, sólo que sin la carne asada ni las cervezas.

En fin, reproduzco aquí el comentario de CyberGus:

Mmmm no estoy de acuerdo en todo, supongo es bueno, sino no habría discusión.

Yo no se de todo lo que comentas ahí, me sorprendo a mi mismo instalando un blog y metiéndome a mover php o etiquetas de Textpattern.

Creo que alguien que, más allá de diseñador gráfico, puede jactarse de simplemente entender “diseño” a nivel general y tener una idea básica de hacer interfaces usables y saber separar bloques como pensando en componentes de imagen, puede hacer sitios aceptables.

Es importante sin duda comprender las tecnologías… pero habría que delimitar que es saber “lo básico” y qué es ser un Guru… porque lo que he visto en algunas agencias es que a veces requieren que seas “Guru” de todo.

Yo había escrito una contestación como comentario dentro del mismo post, pero salió demasiado largo a mi gusto como para ser comentario, así que lo pasé a esta nueva entrada en el blog. Para seguir comentando sugiero que los comentarios hacia el artículo de Andy vayan en aquel post y los que sean sobre las diferencias entre diseño gráfico contra diseño web y la educación en ambas vayan en éste. O hagan lo que quieran, da igual.

Mi respuesta:

Claro, si estuviéramos todos de acuerdo no valdría la pena tener blogs.

¡Y es exacto! Tú ya tienes una idea de que lo que hay en un sitio web va más allá de la fachada y que el diseñador le puede tener que meter mano al php o a las etiquetas de textpattern de vez en cuando.

Mi preocupación no va por aquellos que hemos aprendido la web por nuestra cuenta casi desde sus inicios, algunos desde el lado visual y otros desde el lado programático, pero finalmente dándonos cuenta de las diferentes áreas que confluyen para hacer un buen sitio y que bien o mal nos hemos tenido que fajar para aprender cosas que no estaban en nuestros planes.

Por ejemplo, yo aprendí el diseño web desde el lado de la programación pero nunca he sido muy bueno con la comunicación visual. En los primeros días de la web eso no importaba tanto, pero conforme fue avanzando la tecnología y la sofisticación de los sitios tuve que aprender ese lenguaje visual, cosas como la importancia del espacio negativo, la tipografía y la ilustración. Pero nunca he sido, ni voy a ser, capaz de crear un sitio que se pueda llamar “bello” aunque por lo menos no van a estar tan feos. Y eso se lo explico a mis clientes y jefes.

Lo que me preocupa son las escuelas de diseño gráfico y sus egresados que no tienen idea de lo que es un sitio web; o quienes consideran que diseñar un sitio es una extensión del diseño gráfico. Y creo que es parte de la razón por la que una agencia quiere que seas gurú en todo (además de querer ahorrar).

Cuando alguien se presenta como “diseñador web” lo que un cliente, agencia, etc. entiende es que puedes diseñar todo el sitio. Es decir, te pedirán “que los visitantes se registren, manden correo y levanten pedidos en el sitio y que los pedidos se manden automáticamente al sistema de ventas”.

Si el “diseñador web” acaba de salir de la escuela de diseño gráfico con apenas una embarrada de Flash y Photoshop, pues lo que va a pensar es “la pucha, pues ni idea”. Y lo que pasa es que diseño web no es nada más la interfaz con el usuario, sino además la funcionalidad y la interacción con el servidor, bases de datos y otras aplicaciones.

Igualmente, un programador que sepa programar en PHP, Perl, Ruby, C++ y lenguaje máquina del Zilog Z-80 no necesariamente va a poder hacer una interfaz atractiva y fácil de usar. Y tal vez ninguno de los dos sepa hacer un sitio que se ajuste a estándares y esté optimizado para buscadores. O teléfonos celulares.

Mi punto es que en las universidades, o los autodidactas, se debe considerar el diseño web como una disciplina en sí misma que combina elementos del diseño gráfico, de la programación de sistemas y de arquitectura de información. Claro, uno puede especializarse en el diseño de interfaces o en el desarrollo de las aplicaciones, pero sin ignorar las otras partes.

Esto es algo que deben entender también las agencias cuando formen un equipo de trabajo y los diseñadores mismos, que reconozcan su especialidad y admitan lo que no pueden hacer.

Creo que salió más larga esta contestación al comentario que el mismo post original; a decir verdad cuando escribí el post sentí que le faltaba algo pero no supe en ese momento como encuadrar todo lo demás.

¡Gracias por tu comentario!

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?

Este fin de semana fue el vigésimo Festival de Jazz en las playas de Toronto. Como siempre, los grupos estuvieron geniales, un buen tramo de la calle Queen y el parque Kew Gardens fueron tomados por bandas de jazz y amantes de la música.

Aunque el festival es de jazz las bandas son de estilos muy variados: rock, rythm’n'blues, folk latinoamericano, big band y ritmos afrocaribeños.

Videos

Blackboard Blues Band

The Sultans of String

Taurean Clarke Quartet

Photos

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.

Diwaker decidió hacer un post sobre esto, sin percatarse todavía que las similitudes eran más que mera coincidencia, de hecho el código estaba copiado completamente de una de las plantillas anteriores de ULA hasta el punto de no haber quitado los comentarios del código que dejaban establecida la propiedad. Zeldman se percató y a su vez hizo un post acusando directamente al CCC de robo. Lo que es peor es que el CCC depende del Fondo Nacional para las Ciencias, parte del gobierno de los Estados Unidos.

Las reacciones contra el CCC no se hicieron esperar y más de uno mandó un correo directamente a los responsables del sitio para cuestionarles sobre el diseño robado. Hay que reconocer que la acción del CCC fue rápida y adecuada; al verse alertados quitaron inmediatamente el sitio dejándolo sin nada más que una nota de “En Mantenimiento”, se disculparon con Zeldman y Una Lista Aparte y después subieron otro diseño con la disculpa pública visible a todo mundo. Que la dependencia oficial haya tomado esas acciones de manera tan rápida y humilde es loable.

Lo más seguro es que la administración del CCC no se hubiera dado cuenta (aunque cuesta trabajo creerlo, con los comentarios del código, pero démosles el beneficio de la duda) y que algún otro diseñador bajo contrato se le haya hecho fácil robarse el código y cobrar como si fuera original. Por supuesto, ése diseñador ahora puede ser sujeto a tener que reparar daños y perjuicios.

Leer los comentarios en el post de Zeldman es fascinante. Es alentador ver que la táctica del escarnio público funciona por lo menos en algunos casos, pero sigue siendo triste la facilidad con que algunos “diseñadores” se apropian del trabajo de otros sin los permisos necesarios y ni siquiera dar las gracias.

Me pregunto ¿pasaría lo mismo en México si algún sitio gubernamental o empresa se robara un diseño, foto o texto aún de manera tan descarada? Díganme cínico pero yo creo que no. Y eso me entristece.

Pues hicimos eso y hoy fue el día que entrevistamos a tres agencias de desarrollo cuyas propuestas nos parecieron más meritorias. La primera fue una propuesta cara, fuera de nuestro presupuesto, pero queremos saber que ofrecen y si hay manera de ajustarnos mutuamente.

La segunda es una propuesta barata, no mucho, pero más barata, y queremos saber quienes son, porque tan barato y si estamos sacrificando algo vital.

La tercera fue alguien que nos recomendó un conocido, demasiado barata pero nada más por no dejar estamos dispuestos a que nos sorprendan.

Las entrevistas se desarrollaron más o menos así: la primera agencia no se quiso bajar de precio ni modificar su plan. ¿Nos hizo quererlos menos? ¡No! Al igual que cuando alguna chica/o se hace el difícil nos hizo quererlos más. El problema es que la barrera del presupuesto es bastante real y definitoria para nosotros. A pesar de que nos sugirieron maneras diferir los costos la verdad es que para una organización sin afán de lucro como la nuestra es muy difícil saber si podremos contar con fondos en el momento necesario.

Así que, lección número uno: Pregunta al cliente cuales son sus barreras y objeciones para contratarte, si es posible se flexible ante ellas y respétalas.

La segunda agencia nos pareció técnicamente competente aunque con poca experiencia en la clase de proyecto que estamos realizando. Como nosotros mismos estamos poco experimentados en este tipo de proyectos pues nos gustaría alguien con más experiencia. Aún así éste no es un obstáculo insalvable puesto que tienen mucha experiencia en muchas  otras áreas que puede trasladarse a este proyecto. Sin embargo, parecen no estar muy entusiasmados o muy dispuestos a involucrarse con nuestros objetivos.

Lección número dos: Aprende de tu cliente, acéptalos como socios y tómate de manera personal el éxito o fracaso eventual del proyecto, aunque lo tuyo sea nada más armar el sitio web.

El tercer equipo fueron dos jóvenes, muy jóvenes, con experiencia técnica  pero con aparente poca experiencia en proyectos de esta magnitud y diversidad. No nos quedó duda que desde el aspecto tecnológico no tienen problemas para armar y desarmar un sitio con los ojos cerrados, pero tampoco nos demostraron que supieran o tuvieran conciencia que un proyecto va mucho más allá de los requisitos técnicos e involucra manejar un montón de factores humanos. No hicieron ninguna pregunta y su primera frase fue “no vemos ningún reto”. Nuestra impresión fue de que requerirían supervisión constante.

Lección número tres: Relaciona tu experiencia directamente con la problemática del cliente. Sí, el sitio que estás desarollando para otro cliente está muy bonito, pero no tiene nada que ver. Haz preguntas aunque creas saber la respuesta y no subestimes la dificultad técnica o humana que puede representar un proyecto.

De manera rápida estas fueron mis impresiones del día de hoy. Se me ocurren muchas cosas más pero ya las iré organizando y escribiendo.

Actualización: Elegimos a la de en medio.

Tradicionalmente cuando uno usa sitios de redes sociales como flickr y deviantart para compartir sus fotografías, ilustraciones o videos uno lo hace aceptando que el sitio podrá usar esos trabajos en eventos y promociones del mismo sitio, pero en ningún caso pierde el autor sus derechos sobre estas obras ni el poder beneficiarse económicamente de ellas en el futuro o usarlas en algún otro medio o para usarlas como base de otra obra.

Pero no en el sitio de adidas. Ahí mismo, en los términos y condiciones se expone claramente que con el sólo hecho de subir algo al sitio, lo que sea, todos los derechos pasan de manera exclusiva y permanente a ser propiedad de adidas, quienes podrán usar estas obras para cualquier cosa, desarrollar nuevos productos, publicidad, logos, etc. y no tienen que darte ni un sólo centavo, ni siquiera crédito por la idea original o por la obra.

Ya antes en Moccablog había aparecido la historia de las empresas que arman concursos para hacerse de material e ideas de forma barata, pero esto es el colmo, ya que ni siquiera premios hay.

En fin, mi única recomendación es que si decides participar en uno de estos sitios como creador leas muy bien la letra pequeña y estés conciente que estás regalando tu trabajo, que mucho o poco pero algo te costó.