Las anclas o enlaces dentro de una misma página para posicionar al usuario en una ubicación especifica suele ser bastante útiles, pero el efecto de situarlos de forma instantánea que tienen los navegadores, los hace menos conscientes de como llego ahí.
Una forma sencilla de solucionarlo y mejorar con ello la experiencia del usuario es con jQuery:
Solución sencilla
En el header de la página se agrega el script que hará el efecto:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#arriba').click(function(){ //Id del elemento cliqueable
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
Y el enlace que envía al usuario arriba es:
<a href='#' id='arriba'>Volver arriba ↑</a>
Solución completa
Una solución más completa y personalizada se consigue con plugins como:
Los plugins son más robustos, así que valen la pena solo si hace mucho uso de anclas en una página y estas son claves en la navegación. Recordar que usar estas soluciones con jQuey se justifican si la librería se usa en la solución de otros problemas, de otro modo, una solución basada en javascript "puro" sería más viable.
La legibilidad, un conjunto de características que hace a un texto o tipografía más fácil de leer, puede mejorarse de varias formas. Una de ellas la introdujo Firefox 3.0 y que ahora adoptan Safari 5, Chrome y la beta de webkit (del que derivan otros navegadores) y se trata de un propiedad CSS que controla el renderizado de un texto: text-rendering.
¿Cómo funciona?
Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering puede tomar los siguientes valores:
optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y la ligadura de la tipografía.auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px y optimizeSpeed para los de mayor tamaño. optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto. geometricPrecision – Da prioridad a la geometría del texto.
Ejemplos:
body { text-rendering: optimizeLegibility; }
.post { text-rendering: optimizeSpeed; }
Comentario
Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.
Elena, una estupenda diseñadora rumana y creadora de Design Disease y Premium Themes, ha actualizado el diseño de su sitio web y ha tenido la gentiliza de liberar su antiguo y genial diseño. El nombre del theme para WordPress no podía ser otro que Design Disease y ahora, convertido a plantilla Blogger por Blog and Web.
Características
- 3 Columnas.
- Menú con páginas estáticas.
- Configuración de colores desde el panel.
- Comentarios en el footer totalmente adaptados.
- Formulario en la misma página y excelente soporte de avatares.
Descargar
Continuar leyendo →
Blogger in Draft presenta una característica: Estadísticas web desde el panel de Blogger. Este sistema de estadísticas es independiente de Google Analytics y tiene como principal característica brincar datos casi en tiempo real.
¿Cómo funciona?
Por ahora, solo esta disponible entrando desde Blogger in Draft ( draft.blogger.com ), una vez ahí existe una nueva pestaña en cada blog llamada, precisamente, estadísticas, que a su vez, se divide en 4 secciones:
1. Visión general
Continuar leyendo →
CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.
Solución
En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img o rounded-img2. Ejemplo:
Continuar leyendo →
