Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de March de 2007

Tooltips simples con CSS y un poco de Javascript

En HTML disponemos de una forma estándard de crear tooltips (pequeñas ventanas emergentes con texto adicional que aparecen al pasar el ratón sobre los elementos que disponen de un atributo title). Estos tooltips, no obstante, están muy limitados: solo pueden contener un número reducido de caractéres y no podemos controlar su aspecto.

Vamos a crear, en un par de pasos, unos tooltips personalizables que podremos aplicar a cualquier elemento (salvo las imágenes).

Para empezar, necesitamos corregir un error de Internet Explorer que sólo admite la pseudo-clase :hover en elementos a. Para ello es necesario descargar csshover.htc e incluirlo en nuestros sitios mediante un comentario condicional entre las etiquetas <head>

<!--[if IE] >
  <style type=”text/css”>
   body {behavior: url(#topofpage);}
  </style>
 <![endif]–>

Ahora crearemos el Javascript.

El funcionamiento del script es muy sencillo: buscaremos en el documento los elementos que tengan la clase jsttip y, si estos tienen un atributo title con contenido, crearemos un span hijo donde introduciremos el contenido de ese atributo title.

/* Esta función nos permite obtener todos los elementos marcados con una clase
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i< n; i++) {
if (tips[i].title && tips[i].title != '') { /* Si el elemento con la clase jsttip tiene titulo y el titulo no está vacio */
var tspan = document.createElement("span"); /* Creamos un elemento span */
var ttext = document.createTextNode (tips[i].title); /* Creamos el texto extrayendo el atributo title */
tspan.appendChild(ttext); /* Añadimos el texto al span */
tips[i].appendChild(tspan); /* Añadimos el span al documento como hijo del elemento con la clase */
tips[i].title = '';  /* Y vaciamos el titulo */
}
}

}

Y, por fin, el CSS y ya tendremos tooltips

La auténtica mágia de estos tooltips está en el CSS

.jsttip{/* Cambiamos el cursor por uno más significativo */
cursor: help;
}

a.jsttip {cursor: pointer;} /* Evitamos que cambie el cursor en los enlaces */

.jsttip:hover {position:relative} /* Importante */

.jsttip span {display: none;} /* Ocultamos el span hasta que es su momento */

.jsttip:hover span {  /* Creamos el tooltip */
z-index: 100; /* Lo posicionamos por encima de todas las capas */
position: absolute; /* Lo posicionamos respecto a su padre */
top: 1.5em;
left: 2em;
display:block;
padding: 1em 1.2em;
background: #fff url(/2007/03/page/2/info.png) no-repeat;
width:15em;
border:1px solid  #003170;
color: #003170;
font-size: 0.9em;
}

Para usarlo sólo tendréis que dar al elemento que sea una clase jsttip y escribirle un buen atributo title

<a href="#topofpage" title="Escribe cosas que valga la pena leer" class="jsttip">Enlace</a>

Os he dejado unos ejemplos muy sencillos y un zip por si preferís descargar el script en lugar de copiarlo

Efecto Parallax para fondos

A través de Ajaxian me entero de que Brett Taylor ha hecho un experimento con HTML+CSS+Javascript para conseguir el efecto Parallax con el fondo de un sitio web.

Parallax Backgrounds

El efecto hace que diferentes capas del sitio hagan scroll a diferente velocidad. Es difícil comprenderlo sin verlo así que id ahora si no habéis ido aún.

No sé si es el ejemplo, o el efecto en sí, pero me parece incómodo, desconcentra y puede llegar a marear. ¿Vosotros qué pensáis? ¿Creéis que usando otros fondos podría dar lugar a efectos interesantes?

Killerphp: Videotutoriales de PHP para diseñadores

Si estás empezando en esto del desarrollo web seguro que, en alguna ocasión, te has planteado aprender PHP.
PHP sigue siendo, con diferencia, el lenguaje más extendido de programación para web.
Seguramente, para todos, lo más dificil es empezar. Entender esas nociones básicas, comprenderlas para poder aplicarlas después. Para la mayoría de nosotros, sobre todo los más enfocados al diseño, una de las principales barreras es el lenguaje especializado, la jerga de los programadores que, en ocasiones, nos resulta incomprensible.

Vía Xyberneticos descubro Killerphp, un lugar donde podrás encontrar videotutoriales, en inglés, de PHP desde el nivel más básico, explicados con un lenguaje sencillo y muy lejano de toda esa jerga Geek.

KillerPHP: PHP Video Tutorials for Web Designers

Railscasts: screencasts de Ruby on Rails

Si andáis buscando screencasts de Ruby on Rails y no tenéis problema con el inglés Railscasts hará vuestras delicias.
Excelentes screencasts a los que puedes suscribirte mediante RSS o, incluso, mediante iTunes para que seguirlos te sea lo más comodo posible. Eso si, requieren tener instalado el Quicktime Player.

Se trata de una página aún muy joven y a día de hoy solo hay 7 videos pero, si mantiene el ritmo de publicación, pronto será un recurso impresionante.

Railscasts Ruby on Rails Screencasts

Referencia de diseño para móviles

El otro día hablabamos un poco de desarrollo para móviles, en aquel momento sólo nos limitabamos a ver si nuestros sitios actuales se podrían visitar adecuadamente con un dispositivo móvil.
Personalmente no creo que ir probando a ver si suena la flauta por casualidad y nuestro sitio es compatible con la navegación móvil sea el acercamiento más adecuado para un sector que más temprano que tarde será muy importante, incluso más que el de los ordenadores de escritorio.

Vía CSS Lab descubro un interesantísimo manual de referencia de desarrollo para dispositivos móviles, escrito por Brian Fling: dotMobi Mobile Web Development. En su web lo tenéis disponible para descargar en formato pdf y, eso si, en inglés.

10 cosas que no puedes hacer con javascript (en el navegador)

Matt Dibb ha escrito un interesante artículo con 10 cosas que no se pueden hacer con javascritp en el navegador que paso a traducir (medio libremente) a continuación:

Javascript es una herramienta bastante incomprendida - hasta hace poco nadie le hacía realmente mucho caso salvo para crear ventanas pop-up o enmascarar enlaces - pero es una herramienta potente y cada vez más gente la utiliza para crear cosas buenas.

Pero ¡hay mucha confusión! Algunas personas están confundiendo las posibilidades de Javascript con las de otros lenguajes como PHP o ASP, por tanto aquí va una lista de malentendidos que veo una y otra vez:

  1. Javascript no puede acceder al sistema local de archivos. No puedes leer o escribir en la computadora del usuario - se trata de una medida de seguridad para evitar que los sitios hagan lo que quieran con tu ordenador, por ejemplo, introducirte un virus.
  2. Javascript tampoco puede acceder al sistema de archivos remoto. Solía aceptarse como verdad que no podías acceder a archivos almacenados en el server… Las cosas han cambiado mucho con la expansión del soporte para XMLHttpRequest pero de todas formas sólo tienes HTTP para jugar - no puedes mover archivos, renombrarlos o cambiarles los permisos sólo mediante javascript
  3. Javascript no puede ejecutar aplicaciones fuera del navegador. Al igual que el punto 1 se trata de una medida de seguridad
  4. Javascript no puede acceder a tu scanner/impresora/webcam. Javascript no tiene acceso a tus perifericos si no utilizamos algún componente de terceras partes
  5. Javascript no puede modificar la URL mostrada por el navegador. Otra medida de seguridad para evitar que cualquier sitio suplante la identidad de otro.
  6. Javascript no puede modificar el historial del navegador.
  7. Javascript no puede acceder a tu base de datos. Para acceder a tus bases de datos tendras que utilizar un lenguaje del lado del servidor como PHP o ASP
  8. Javascript no puede “encriptar” tu HTML ni evitar el “robo de imágenes”. Si se puede ver se puede copiar, no pierdas el tiempo con “medidas de seguridad” tan fáciles de saltarse.
  9. Javascript no puede controlar el teclado o el ratón del usuario. No, no vas a poder controlar el ratón de tus visitantes y hacerles dar click en tus anuncios.
  10. Javascript no puede utilizar múltiples hilos de ejecución. Existen algunos movimientos para tratar de crear una librería que pueda conseguirlo pero, de momento, no te preocupes de optimizar tu Javascript para ordenadores de doble núcleo.

Podéis leer el artículo original en: 10 things you cannot do with Javascript

JSJuicer edición web

Seguro que ya conoces JSJuicer, un excelente compresor de código javascript que, hasta ahora, podías descargar en C++.

Basándose en este script de Adrian Johnston, Boris Popof ha creado una versión online. Sólo copia y pega tu código en el cajón de texto y escoge que operaciones quieres realizar sobre él.

JsJuicer Web Edition

Imágenes con estilo y pie de foto

Cuando introducimos manualmente las imágenes en un documento HTML es muy sencillo darles estilo y agregarles pies de foto. No obstante, cuando queremos introducir imágenes en nuestros sitios mediante nuestros CMS o pretendemos permitir que nuestros clientes lo hagan, la labor se complica.

Paul Boag
ha creado un script que buscará las imagenes marcadas con determinada clase (o clases), extraerá el contenido del atributo title y lo convertirá en un párrafo que hará las veces de pie de página. El script envolverá la imagen en un div, junto al párrafo y quitará la clase a la imagen aplicándola al div. Esto junto con un buen CSS dará lugar a un resultado muy agradable y, lo mejor de todo, automáticamente.

Styled images with caption

En un ratillo he creado un plugin para WordPress, en un rato tendré lista una página con algunas instrucciones pero de momento podéis ir descargándolo aquí:

Image Captions 1.0a

Para utilizarlo simplemente descomprimidlo en la carpeta de los plugins y activadlo mediante el panel de control. Dad a las imágenes una clase de imgLeft o imgRight y escribe un atributo title que merezca la pena. Por supuesto, podéis editar el archivo para cambiar el nombre de las clases o el estilo (he mantenido todo tal cual era en el script original). El script fue publicado con licencia Creative Commons by-nc-sa y por la misma licencia se rige este plugin. Que lo disfrutéis.

Edit:
He subido una versión con un estilo más usable para que no tengáis que ir a editar el css si no queréis.

Edit 2: He creado una página muy sencilla para el plugin, http://labs.webmasterlibre.com/wp/image-captions/

Creando buenas páginas de error

En Coding Horror han publicado un interesante artículo sobre las páginas de errores 404. Supongo que la mayoría (por no decir todos) los que seguis este blog sabéis perfectamente lo que significan: Página no encontrada.

Las páginas de error son frustrantes para nuestros visitantes, no encontrar algo que estaban buscando puede conducirles a abandonar nuestro sitio si no sabemos manejar los errores con elegancia. En Coding Horror nos dan 5 consejos, unos más sencillos de seguir que otros, para crear páginas 404 con sentido. Aquí tenéis una traducción libre y resumida de los mismos, con algunas aportaciones mías:

  1. Elimina el 404: Tanta jerga técnica puede contribuir a que nuestros ya perdidos usuarios se pierdan aún más. Donde digo 404 digo 301 etc. Cualquier página de error que vaya a ser mostrada a humanos no debería incluir esos “crípticos” códigos.
  2. Que los errores te sean notificados automáticamente. Este es uno de los difíciles, crear algún sistema que te envíe automáticamente alertas de las páginas de error de tu sitio. Personalmente utilizo los logs y las estadísticas para localizar las páginas que han dado errores. Adicionalmente puedes montar un formulario mediante el cual puedan ser tus usuarios quienes te notifiquen cualquier error aunque debes tener en cuenta que ese no es su trabajo si no el tuyo.
  3. Si puedes, trata de averiguar lo que el usuario buscaba y presentale enlaces a contenidos relacionados. Otra solución, o solución adicional a esta, es incluir una caja de búsqueda en tus páginas de error
  4. Aprovecha las páginas de error para presentarle a tus visitantes enlaces al contenido más reciente o popular
  5. Mantén las páginas de error simples

A esto me gustaría añadir que, por lo general, es menos frustrante para nuestros usuarios si nosotros mismos asumimos parte de la culpa de los errores. Llegar a una página de error ya es desagradable, cuanto más desagradable cuando parece que el que la escribió pensaba que si habías llegado a ella era porque eres tonto. Personalmente me crispa encontrarme errores que me instan una y otra vez a comprobar que he tecleado correctamente sin darme ninguna solución alternativa.

Finalmente, os dejo los enlaces que aparecían en el artículo original para que sigáis leyendo sobre el tema si os interesa:


Armonth
ha hecho una traducción completa y literal del artículo, por si os apetece más leerlo completo en castellano aquí os dejo el enlace: Creando páginas de error 404 amigables para el usuario

Gallery 2.2

Gallery 2 Logo

Después de casi un año de desarrollo ya está con nosotros la nueva versión de Gallery: la 2.2
Esta nueva versión viene con los típicos bugfixes, nuevas traducciones y un montón de suculentas novedades.

  • Plugins descargables: Módulos y temas que podrás instalar directamente a través del panel de administración.
  • Soporte para álbumes dinámicos, basados en etiquetas o puntuaciones, por ejemplo.
  • Cambios y mejoras en la gestión de marcas de agua
  • Nuevos temas: carbon y ajaxian
  • Nuevo módulo WebDAV para montar Gallery como una unidad de red en tu ordenador
  • Nuevo módulo para enviar Ecards
  • Añadido soporte para video en Flash y ASF
  • etc

Personalmente Gallery es el sistema de galería que más me gusta, sencillo y mucho más ligero que otras alternativas.

Anuncio Oficial: Gallery 2.2 (Double Double)