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:
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]-->
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?
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:
Podéis leer el artículo original en: 10 things you cannot do with Javascript
A través de Ajaxian descubro un fantástico script Javascript con un poco de CSS, de Lalit Patel que nos permitirá detectar las tipografías instaladas en los equipos de los visitantes de nuestras páginas.
Este script funciona gracias al simple principio de que cada caracter aparece de forma diferente en cada tipografía. Por tanto, tipografías diferentes ocuparán diferente anchura y altura. Esto puede abrir amplias posibilidades a los desarrolladores de aplicaciones web y, en general, a los diseñadores.
Funciona en Firefox 2, Internet Explorer 6+ y Opera 9
Hace unos días llegaba a portada de Digg un artículo escrito por Harry Maugans: How to Create a Collapsible DIV with Javascript and CSS. En principio me sorprendió que un script tan simple lograse tanto eco pero lo que más me sorprendió es que utilizase cosas tan intrusivas como display: none en la hoja de estilo para ocultar inicialmente el div y el evento onclick en un elemento a del html.
Como se le podían hacer unas cuantas mejoras sin meterse muy a fondo con el javascript me puse a ello y el resultado lo tenéis en: Divs que aparecen y desaparecen - tgdiv.js
Sé que no es nada del otro mundo pero las mejoras respecto al original son interesantes ya que mantienen separado el contenido de la presentación y el comportamiento de la página.
Si tenéis cualquier duda, queja o sugerencia ahí tenéis los comentarios.
Cuando creamos un sitio web es importante que nos aseguremos de que es accesible por cualquier usuario desde cualquier plataforma. No obstante, sobre todo a los diseñadores y desarrolladores de javascript, no nos gusta renunciar a las mejoras visuales y de usabilidad que nos pueden proporcionar ciertas técnicas. ¿Cómo podemos compaginar la accesibilidad de un sitio con las técnicas más avanzadas?
Existen dos respuestas: creando sitios web que se degraden aceptablemente o mejorando nuestros sitios paulatinamente.
La degradación aceptable (Graceful degradation) consiste en crear nuestros sitios web pensando en los usuarios de los principales navegadores y crear elementos que sustituyan a los no compatibles con navegadores antiguos o agentes de usuario no convencionales.
Un ejemplo claro de degradación aceptable es la inclusión de etiquetas <noscript> para los navegadores que no soportan Javascript.
La mejora progresiva (Progresive Enhancement) consiste en comenzar creando sitios simples, compatibles con todos los navegadores y agentes de usuario e ir introduciendo mejoras que, en caso de no ser compatibles, no provocarían cambios importantes en la página (salvo, por supuesto, la desaparición de algunas funciones no imprescindibles)
Ambos enfoques tienen sus pros y contras, para seguir indagando en el tema os recomiendo dos artículos, ambos en inglés:
Como dicen en Ajaxian: PQuery es a JQuery lo que los helpers de Rails son a Prototype y Script.aculo.us
PQuery es un set de clases helper para la librería Javascript JQuery.Esta librería te permite integrar facilmente AJAX , efectos y otras funcionalidades de JQuery en tus scripts PHP.
Además, es compatible con PHP4 y 5
Si construyes habitualmente formularios, más o menos complejos, estoy segura que encontrarás interesante la clase javascript validate.js
Con ella podrás validar gran cantidad de datos de tus formularios: campos requeridos, caracteres introducidos, sintaxis…
Webmaster Libre es un blog de Alma Fernández
Iconos: FamFamFam
Manejado con WordPress
Sitemap (xml): Mapa del Sitio
