Publicado el: 18 Abril, 2007
Archivado en: AJAX, Enlaces
With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API.
Con el API AJAX para Feed, puedes descargar cualquier feed público Atom o RSS usando solamente JavaScript, de esta forma podrás unir feeds con tu contenido y otros APIs como la de Google Maps
Sin duda una gran noticia para todos los desarrolladores que tienen que lidiar a diario con los feeds y su integración.
Anuncio Oficial: http://googleajaxsearchapi.blogspot.com/2007/04/announcing-google-ajax-feed-api.html
Google AJAX Feed API
A través del blog de Andrés Nieto, que estoy segura que todos leeis ya, descubro Blobular un interesantísimo experimento con SVG y Javascript que nos demuestra, una vez más la flexibilidad y potencia de SVG.
Blobular no es más que una bola que podremos manipular, escindir, hacer más o menos viscosa, cambiar el color…

Yo, por lo menos, con cosas así no necesito pensar en Flash más de lo preciso ¿Creéis que será posible algún día sustituir el omnipresente Flash por Javascript y SVG (entre otros)?
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
Publicado el: 4 Abril, 2007
Archivado en: CSS, General
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?