El menú desplegable es uno de esos recursos casi me atrevería a decir indispensables, sobre todo cuando queremos mostrar mucho contenido en poco espacio (lo mismo que sucede, por ejemplo, con los sistemas de pestañas).
La búsqueda de un menú desplegable accesible y compatible con todos los navegadores nos ha llevado a ir probando diversas soluciones, incluso a desarrollar cada uno la suya.
Pop! es una solución más que agregar a nuestra caja de herramientas, con ella podremos crear desplegables que degradarán perfectamente para usuarios sin javascript y en los que podremos colocar cualquier tipo de contenido ya sea texto, enlaces, videos, fotos…
Pop! requiere el uso de jQuery y crear nuestros menús es tan fácil como incluir el javascript y la hoja de estilo (que podremos adaptar a nuestras preferencias)
<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/>
<script language="javascript" src="/pop/javascripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>
Inicializar Pop!
<script type='text/javascript'>
$(document).ready(function(){
$.pop();
});
</script>
Y envolver el contenido que queramos convertir en desplegable con un div con la clase “pop” (o la que hayamos definido al inicializar el script).
Pop! está bajo licencia MIT.
Cuando hablamos de diseño web, sobre todo en la fase propiamente de diseño en programas de edición de gráficos, es relativamente frecuente observar un efecto conocido como “page curl” o pliegue de página.
Para entendernos todos, es el efecto que observamos cuando pasamos las páginas de un libro por ejemplo.
Si quieres agregar un toque curioso a tu sitio web y agregar una esquina que se doble para mostrar el contenido de debajo te vendrá bien este plugin libre para jQuery creado por Elliott Kember.
Para hacerlo funcionar sólo necesitarás usar jQuery y jQuery UI (preferiblemente la versión 1.5) con el módulo resizable. Luego con un par de líneas de código y creando un elemento con id “target, que contendrá lo que quieras que se vea tras la página, estarás listo.
The Sexy Curls jQuery plugin: http://www.elliottkember.com/sexy_curls.html
Vía Ajaxian
Supongo que ya os habréis dado cuenta de que, cuando seleccionamos texto en una página web el color viene determinado por el navegador.
En algunos casos ese color, generalmente azul, que pone el navegador como fondo al texto seleccionado es o poco legible o simplemente desentona terriblemente con el sitio web.
Mediante CSS podremos controlar el color del texto seleccionado de nuestros sitios y, así, dar un toque más de refinamiento a nuestros diseños.
El código es tan sencillo como:
::selection { /* Para Safari, Chrome, Konqueror, Opera etc.*/
background: #006ab3;
color: #fff; }
::-moz-selection { /* Para Firefox, Flock, etc. */
background: #006ab3;
color: #fff; }
Como seguro que habréis notado por el código, no funcionará en todos los navegadores. Más correctamente no funcionará en Internet Explorer ni nada basado en su motor, pero ya estamos acostumbrados a eso ¿Verdad?
Podéis comprobarlo en vivo seleccionando cualquier texto en el blog.
Vía Brenezl
Si tenéis la misma memoria que yo seguro que ya habéis hecho una buena colección de chuletas de los lenguajes que empleáis más a menudo.
Con el uso cada vez más extendido de jQuery como librería javascript ya me iba haciendo falta una para no tener que andar buscando por la documentación cada vez que me olvido de algo y por eso os traigo esta que he encontrado vía Nettuts y que han publicado en Color Charge
Además, de formato png para consultarla en el ordenador la tenéis disponible para consultarla online desde vuestro iPhone e iPod Touch
jQuery Cheatsheet: http://colorcharge.com/jquery/
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
Salvo que os guste escribir una y otra vez los mismos fragmentos de código cada vez que iniciais un proyecto seguro que tenéis almacenados vuestros snippets en alguna parte.
Yo o bien lo hago en el propio Aptana, creando una carpeta con snippets y agregándola al repositorio de códigos listos para usar o bien los tengo almacenados en Snippely, una aplicación hecha con Adobe Air de la que ya os hablé cuando os comenté mis aplicaciones favoritas hechas en Adobe Air.
Aún así, tener los fragmentos de código almacenados en local tiene el inconveniente de que si trabajas en más de un equipo tienes que repetir el proceso una y otra vez.
Snipt es una aplicación online, como otras muchas de las que ya hemos hablado, que te permite almacenar fragmentos de código o comandos para tenerlos siempre a mano.
La principal diferencia con otras aplicaciones similares es su fantástica interfaz de usuario, con un diseño muy cuidado y una clara intención de hacernos muy fácil ingresar nuevos fragmentos y navegar por los que ya tenemos almacenados.
El registro es muy rápido y completamente gratuito.
Snipt: http://snipt.net/
Vía Feed My App
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/
De un tiempo a esta parte me he encontrado varias veces con sitios maquetados de forma poco accesible y mucho menos semántica y desarrolladores que se ofenden al apuntarles lo incorrecto de ciertas prácticas ya que “el validador del w3c no arroja ningún fallo”.
Es una suerte que, por lo menos, se haya extendido la buena costumbre de validar nuestro marcado pero parece que con la excusa de que un código es válido nos olvidamos de que ningún software puede poner en contexto un sitio web, ni comprobar si hemos empleado la etiqueta más adecuada para la tarea que pretendemos desempeñar.
Por poner un ejemplo, una página maquetada con tablas, con el estilo totalmente definido mediante etiquetas obsoletas puede validar perfectamente empleando el doctype adecuado. Si, porque creo que todos hemos aprendido a engañar al validador con un doctype transicional cuando no nos apetece comernos la cabeza ¿verdad?.
Que una herramienta de validación no arroje fallos no implica necesariamente que hayamos hecho un buen trabajo, sólo quiere decir que no hemos cometido ningún error grave. Maquetar un sitio web es comparable a escribir un texto, podríamos escribir un texto carente de todo sentido pero que no provocase ningún error visible para el corrector de nuestro programa de edición de textos.
Por eso, porque las máquinas tienen sus limitaciones, debemos siempre complementar la verificación automática con la manual. Y no sólo con el W3C, si empleamos TAW o Hera o cualquier otro software para verificar la accesibilidad de una página web nos encontraremos con multitud de puntos que deben comprobarse manualmente.
No hay nada que pueda sustituir a un buen planteamiento a la hora de maquetar ni a un buen uso y entendimiento de las etiquetas HTML.
Más de una vez he entrado en un sitio y me ha encantado alguno de los efectos javascript que tenía, hasta ahora solía irme a ver el código fuente para averiguar con qué librería javascript, si se usaba una, se habían conseguido.
Parece que no soy la única con curiosidad, pero puede que no la más vaga, ya que Oskar Krawczyk ha creado un cómodo bookmarklet con el que averiguarlo en un sólo click.
WTFramework Bookmarklet: http://blog.olicio.us/2008/11/08/wtframework-bookmarklet/
Vía Feed My App
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
