Webmaster Libre

Si alguna vez te ha picado la curiosidad por saber si los enlaces que recomiendas a tus visitantes son de su interés, si necesitas conocer un poco más las costumbres de tus usuarios o si, simplemente, quieres obtener más datos sobre tu sitio web, encontrarás bastante interesante un artículo publicado por Javascript Examples:

How to track out going links with javascript.

En él se nos explica paso a paso como crear un script con el que controlar nuestros enlaces salientes utilizando la librería Behavior

.

Lightbox, slimbox, ventanas modales… ¿No hay ya demasiadas? Pues parece que no, lighWindow va un paso más allá de todas ellas siendo la más versátil.

Con lightWindow no sólo podremos mostrar imágenes si no también videos, documentos en pdf, flash, paginas web… Cualquier cosa que se os ocurra tiene cabida en estas ventanas.

Requiere Prototype 1.5+ y Script.aculo.us 1.7+

lightWindow: http://stickmanlabs.com/lightwindow/

Via Ajaxian

Mañana se “celebra” el día del desnudo integral en internet, lamentablemente no se trata de mostrar el serrano cuerpo de bloggers y webmasters si no de atreverse a mostrar tu sitio sin hoja de estilo (je, a ver cuantos nos llevamos una sorpresa).

Webmaster Libre se suma este año al despelote (y no solo por el PR 7 de la página) y mañana os recibirá a todos como si hubiesemos vuelto atrás unos cuantos años en el tiempo, antes de que nuestro querido CSS hiciese furor.

En la página del CSS Naked Day tenéis más información y unos cuantos enlaces a plugines y funciones que os ayudarán a automatizar la tarea…

Un consejo, aprovechad la estupenda extension de Firefox Web Developer para comprobar como andan de código vuestros sitios si no queréis llevaros un susto jeje…

Hobo es una extensión Open Source para Ruby on Rails que te ayudará a construir aplicaciones web completas de una forma increíblemente rápida y sencilla.

Sus principales características son:

• Implementación rápida de interfaces dinámicos con AJAX sin necesidad de programación extra
• Themes intercambiables
• Poderoso lenguaje de marcado, DRYML, que combina el desarrollo rápido con la flexibilidad del diseño.

Hobo es ideal tanto para experimentados desarrolladores de Ruby on Rails que quieren acelerar la creación de sus aplicaciones, como para diseñadores que no quieren complicarse demasiado e incluso para novatos en el desarrollo con Ruby.

Via eHub

Si eres de los que no se conforman con mostrar a tus usuarios un gif animado mientras cargan tus imágenes quizá te interese probar una alternativa mucho más espectacular:

Onload image fades without Flash

Basado en un efecto de Flash y creado con Javascript y CSS, degrada sin problemas para usuarios tanto sin javascript como sin css.

Un toque original para esas páginas con muchas imágenes o imágenes de gran tamaño (vale, o ambas)

Desde que empezaron a asomar sus curvas esquinas a internet, los bordes redondeados se han convertido en una constante del diseño “a la 2.0″. Seguro que ya conocíais RUZEE.Borders, uno de tantos scripts javascript con los que conseguir el efecto.

RUZEE.shadedborder es el sustituto del anterior que soluciona unos cuantos problemas (lentitud, incompatibilidad con ciertos navegadores, dificultad…) y trae unas cuantas características más que interesantes:

• Renderizado “a lo Photoshop” sólo con Javascript, sin necesidad de imágenes externas
• Bordes redondeados
• Sombras
• Efectos de glow
• Bordes con diferentes grosores
• Soporte completo para layouts líquidos
• Soporte para on-hover (salvo para IE6)
• Deshabilita los bordes que no quieras
• Cambia los bordes al vuelo
• Transparencia real, se ve perfecto con cualquier fondo
• Cross-browser
• No obtrusivo
• Ligero
• Rápido
• Sin dependencia con ninguna librería

Vía Ajaxian

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(csshover.htc);}
  </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
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(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="link.htm" 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
			

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.

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?

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

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