Los menús de navegación son uno de esos elementos de un sitio web en los que solemos poner bastante atención. Ayudar al usuario a encontrar lo que busca es una de sus misiones fundamentales y suelen estar presentes en todas las páginas de nuestro sitio.
Styled Menus nos ofrece una gran cantidad de bonitos menús desarrollados con HTML y CSS, compatibles con todos los navegadores y validados.
Sin duda nos resultarán de ayuda para nuestros futuros diseños o, incluso, como base para aprender a realizar nuestros propios e impresionantes menús.
Styled Menus: http://www.styledmenus.com/
Vía Intenta
Puede que para algunos el tema de los PNG en Internet Explorer 6 sea ya algo cansino, seguramente si los ciclos de actualización de los usuarios del navegador de Microsoft fueran tan activos como los de otros navegadores este tema tendría que haber quedado zanjado hace mucho pero, los hechos ratifican que sigue habiendo mucha gente navegando con Internet Explorer 6.
En este blog ya hemos comentado algunos métodos para conseguir que funcionen correctamente los PNG con transparencia pero ninguno es del todo fiable, con algunos no funcionan bien cosas tan simples como posicionar un fondo o repetirlo…
Drew Driller se dió cuenta de que el VML soportaba los PNG transparentes y se puso manos a la obra para identificar la funcionalidad y aislarla en un script.
Con DD_belatedPNG podremos:
Para más información, instrucciones y ejemplos dirigios a la web del script: http://www.dillerdesign.com/experiment/DD_belatedPNG/
Vía Snook.ca
Sitepoint, conocidos por publicar algunos de los mejores libros sobre desarrollo web nos quiere hacer un regalo de lo más interesante.
Sólo tienes que acceder a Twitter y comenzar a seguir a @sitepointdotcom en un periquete recibirás un mensaje directo con un enlace para que puedas descargarte la versión en PDF de The Art & Science of CSS.
El libro es, según mi opinión, una de las lecturas casi obligatorias para cualquiera que trabaje con hojas de estilo en cascada.
Eso si, si lo queréis daos prisa porque quedan sólo 6 días de promoción.
Más información en http://twitaway.aws.sitepoint.com/
Puede que los menús desplegables no sean el modo más adecuado de presentar varios elementos de un menú pero es cierto que cuando tenemos múltiples opciones y poco espacio son un recurso muy socorrido.
Si te has pasado tiempo peleando para conseguir menús desplegables sólo con CSS, que funcionasen en todos los navegadores y todo eso quizá para la próxima quieras probar con este framework css.
Viene cargado por defecto con unos cuantos estilos para tus menús pero crear un estilo nuevo es bastante sencillo y funcionará bien en todos los navegadores. Eso si, para IE6 necesitarás cargar también un fichero javascript también incluído.
CSS Drop-Down Menu Framework: http://lwis.net/free-css-drop-down-menu/
Siempre viene bien tener a mano una referencia donde consultar nuestras dudas, para todos los que ya habéis convertido al Firefox en la navaja suiza del desarrollo web os traigo hoy DevBoi.
DevBoi es un plugin que instalará una completa referencia de HTML, CSS, el DOM y Javascript en el sidebar de vuestro navegador.
Además de las referencias incluídas en la instalación estándard podréis ampliar su soporte a otros lenguajes como PHP o Ruby on Rails
Hace ya tiempo os comentaba la existencia de unos interesantes iconos a los que podíamos cambiar el aspecto sólo con CSS, el truco era simple: una imagen transparente y un fondo de color.
Hoy me encuentro con esta idea aplicada a un icono de RSS, mejor explicada y con ejemplos: How to make RSS icons in every color with just an image
El truco es el mismo, una imagen semi-transparente y un fondo de color. En este caso, la imagen que se superpone también tiene dibujados los bordes redondeados, para que el efecto sea total.
Sé que probablemente andar jugando con los colorines de un icono estandarizado como el del RSS no sea una gran idea (o si, quien sabe) pero obviamente la técnica es válida para otras situaciones menos controvertidas.
Cada día es más difícil sorprender a nuestros usuarios pero ¿qué tal si nuestro sitio reflejase el tiempo metereológico del momento?
En CSS Tricks publican un artículo de David Walsh que nos explica de forma sencilla como conseguir este efecto con PHP y CSS.
Para ello David nos ayuda con un script que obtendrá la información metereológica mediante el API de Yahoo! Weather y lo traducirá a una clase CSS con la que lograremos el efecto interesante ¿no?
Using Weather Data to Change Your Websites Apperance through PHP and CSS
Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.
David Walsh comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):
<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.
Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…
Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.
Hace algún tiempo os comentaba una pequeña librería Javascript con la que hacer que IE6 se comportase como su hermano mayor y mejor educado IE7.
Como Internet Explorer 7 ya está en la calle, listo y disponible para cualquier usuario de Windows, Dean ha decidido actualizar la librería e incluir algunos cambios interesantes:
Sin duda es algo que todos los que nos pasamos el día peleando con Internet Explorer vamos a agradecer, sobre todo con la mejora en la velocidad ya que antes con algunos fixes se relentizaba toda la página un montón.
Seguro que durante los últimos meses habéis visto un montón de páginas haciéndose eco de un fantástico tutorial de Ask the CSS Guy que nos enseñaba como conseguir que nuestros enlaces mostraran iconos identificando su destino. (Showing hyperlink cues with CSS).
Sin duda, es un efecto bonito que, usado con moderación, añade un punto extra de usabilidad a nuestras páginas. Como seguro sabéis, el contrapunto es que puede ser tedioso preocuparse de agregar estilos para todos los tipos de cosas que podemos llegar a enlazar y que, al usar selectores avanzados, no funciona en el aún omnipresente Internet Explorer 6.
Si sois de los vagos, como yo, habréis estado dejando pasar esta técnica, pero hoy, desde Infected FX nos llega la solución: Iconize text links with CSS.
Desde el sitio de Alexander Kaiser podréis descargar una completa CSS acompañada de los iconos necesarios para que con sólo subir los archivos y copiar el código en vuestra CSS (o llamarlo desde otra petición, que ya sabéis que no es tan sano para el servidor) podáis empezar a utilizarlo.
Además, con sobreescribir los iconos o editar un poco la CSS ya lo tendremos totalmente personalizado. Buena idea ¿eh?
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
