A pesar de su innegable utilidad para cosas tan pesadas como maquetar un diseño basado en una retícula (grid based en inglés) siempre me ha parecido que usar frameworks CSS era matar moscas a cañonazos.
La mayoría nos proponen usar una hoja de estilo adicional, llena de cosas que podemos usar o no y, francamente, me da angustia.
The 1Kb CSS Grid es la solución a mis problemas con los frameworks, me permitirá arrancar un diseño en retícula de forma mucho más rápida y controlada pero sin sobrecargar mis páginas con cosas inútiles.
Selecciona el número de columnas que quieres emplear, su tamaño y el tamaño de los márgenes entre ellas y listo, es tan sencilla que incluso es cuestión de segundos modificar los nombres de las clases para usar unos con algo más de sentido.
The 1Kb CSS Grid: http://www.1kbgrid.com/
Sobre todo cuando trabajamos con hojas de estilo grandes podemos dejarnos atrás elementos que ya no se utilizan y que, a pesar de no servir para nada, suman al peso final de nuestra CSS.
CSS Redundancy Checker es una sencilla utilidad online con la que podremos encontrar todos esos selectores a los que ya no se hace referencia desde ninguna de nuestras páginas. Para ello simplemente tendremos que introducir la dirección de nuestra hoja de estilo y las URL de todas las páginas que la utilizan (o una muestra significativa de ellas para sitios basados en plantillas, por ejemplo).
La utilidad se encargará de comprobar los selectores que se emplean en las páginas y nos devolverá una lista de aquellos que nos sobran por no ser utilizados en ninguna de esas páginas.
CSS Redundancy Checker: http://services.immike.net/css-checker/
Vía No Sólo Código
Cuando tenemos que crear un sitio web con columnas podemos optar por dos aproximaciones: columnas de ancho fijo o columnas flexibles basadas en porcentajes del tamaño de la ventana del navegador.
Cuando escogemos columnas flexibles o líquidas, generalmente planteamos un número fijo de columnas y hacemos que llenen el espacio disponible.
Si escogemos las columnas de ancho fijo podremos aprovechar resoluciones mayores de pantalla mostrando más columnas por línea pero, llegados a un punto, seguramente nos encontraremos con que las columnas no encajan perfectamente en el espacio que deben cubrir y dejan un antiestético margen al costado.
Soh Tanaka ha ideado una forma de conseguir aunar los beneficios de ambas aproximaciones: permitimos el máximo de columnas que encajen en el espacio y con jQuery repartimos el espacio sobrante de forma uniforme entre todas.
http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/
Los formularios, no hace mucho hablabamos de que tenemos que conseguir que nuestros visitantes se interesen los suficiente para rellenarlos pero ¿y si les facilitamos un poco más la tarea?
GeoFill es una librería javascript basada en Yahoo Geo y Geo IP con la que podrás ofrecer a tus usuarios varias formas de completar automáticamente los campos relativos a su localización (ciudad y país).
En primer lugar puedes hacer la detección automáticamente con cada visita y después permitir que los usuarios decidan si esos datos que has obtenido son correctos o no y si desean utilizarlos.
En segundo lugar podrás esperar a que el usuario decida realizar la detección y hacerla en base a su dirección IP o a su código postal (aunque esto último es algo más complicado ya que muchos países usamos códigos similares) e igualmente permitir al usuario desechar o utilizar los datos.
En mi caso, el script es más bien poco fiable, cuando se hace la detección por IP me pone en Santiago de Compostela y cuando la intento por código postal me pone en los Estados Unidos, por eso me parece más que importante la opción de introducir mis datos manualmente pero estoy segura que a mucha gente le funciona estupendamente el sistema y para ellos será una ventaja interesante.
GeoFill: http://icant.co.uk/geofill/index.php
Vía Ajaxian
Hace unos días (más de los que había planeado en principio, lo siento) Fsc Xavier me preguntaba la forma de conseguir un menú acordeón básicamente sólo con CSS que mostrase los elementos anidados con sólo pasar el ratón por encima.
A pesar de que puede conseguirse, mi recomendación es no liarse en cosas tan raras y dejarse seducir un poco por el javascript. Con este plugin de jQuery es muy sencillito de hacer y, además, para los usuarios sin javascript es completamente accesible.
Para conseguir nuestro menú simplemente tendremos que llamar a la librería y el plugin como de costumbre, versiones minimizadas a poder ser, e inicializamos el script pasándole el id de nuestro menú y, si queremos, la configuración para nuestro acordeón.
<head>
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.hoveraccordion.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('mimenu').hoverAccordion();
</script>
</head>La estructura del menú consiste en una lista desordenada, como la de cualquier menú con listas anidadas.
<ul id="mimenu">
<li><a href="#">Item 1</a>
<ul>
<li>Subitem 1a</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li>Subitem 2a</li>
</ul>
</li>
</ul>Para descargar el plugin y ver un par de ejemplos de uso dirigíos a la página del autor.
HoverAccordion: http://berndmatzner.de/jquery/hoveraccordion/
Si sueles publicar ficheros con música o podcasts seguro que ya has probado más de una opción para hacerte la tarea de introducir un reproductor de audio lo más sencilla posible.
No sé si ya lo habrás conseguido pero más sencilla que la que nos proponen con el Yahoo! Music Player lo dudo.
Para hacerlo funcionar simplemente tendrás que incluir el script en tus páginas (sin necesidad de descargarlo, llamándolo directamente a los servidores de Yahoo!) y enlazar tus ficheros mp3.
Con sólo ese enlace, colocarás un boton de play/pause con el que tus usuarios podrán escuchar directamente el fichero. El script detectará todos los enlaces a .mp3 de tu sitio y los convertirá en una lista de reproducción. Además, pondrás a su disposición un completo reproductor de audio con el que controlar lo que escuchan, permitiéndoles moverse entre los diferentes archivos de forma cómoda.
Yahoo! Media Player: http://mediaplayer.yahoo.com/
Via Feed My App
PHP Quick Profiler es una completa y vistosa libería con la que puedes obtener datos tan interesantes de tus aplicaciones hechas en PHP como: tiempos de carga, uso de memoria, archivos incluídos y consultas a la base de datos.
Todo el aspecto visual de la interfaz está encapsulado en la librería, de modo que no tendrás que preocuparte de agregar archivos CSS o js.
Ponerlo a funcionar en tus aplicaciones tiene algo de truco, así que si te interesa lo mejor es que te pases por su página y eches un vistazo al completo tutorial de instalación y a la demo online.
PHP Quick Profiler: http://particletree.com/features/php-quick-profiler/
Y para los usuarios de WordPress que quieren optimizar el rendimiento de sus instalaciones existe un plugin, llamado WP-PHP Quick Profiler que usa una version modificada de PQP.
Con él podrás comprobar tiempos de carga y uso de la base de datos. Sólo los administradores con privilegios para activar plugins podrán verlo, aún así no se recomienda para sitios en producción ya que podría revelar información sensible.
WP-PHP Quick Profiler: http://www.zy.sg/wp-phpquickprofiler/
Vía Sentido Web
ByScripts es un pequeño sitio en el que podemos descargar tres estupendos plugins para MooTools liberados bajo licencia MIT.
Desconozco si se irá ampliando la colección pero estaría bien ¿no?. Los scripts disponibles son:
ByScripts: http://www.byscripts.info
Creo que para muchos jQuery ya es nuestra librería javascript de cabecera, es sencilla de usar y potente.
Aún así, para muchos no tan hábiles desde el lado del código siempre viene bien cualquier ayuda posible, sobre todo si convierte la tarea de crear efectos en algo tan sencillo como seguir un asistente.
Glimmer es una aplicación de escritorio para WIndows (con los fuentes disponibles así que espero que pueda compilarse para otros sistemas) que te permitirá crear menús desplegables, tooltips, rotación de imágenes y otros efectos cómodamente desde tu escritorio y sin tocar ni una línea de código.
Glimmer: http://visitmix.com/Lab/Glimmer
Para mí, el espacio para acortadores de direcciones web está claramente superpoblado. Cada dos días surge un nuevo sitio, unos con dominios más cortos, otros con alguna característica nueva…
Aún así, estoy segura que seguirán surgiendo más. Si no te has desanimado viendo la cantidad de competencia que tendrás si te introduces en este “mercado” hoy te traigo unas cuantas soluciones libres para que te pongas a lo que realmente importa: conseguir un dominio corto y bonito y montar un sitio que de gusto navegar.
En esta ocasión nos vamos a centrar en las opciones que requieren PHP y MySQL para funcionar:
Estoy segura de que existen muchas más alternativas libres y gratuitas, a mi me gustan estas y creo que cubren casi cualquier tipo de necesidad pero ¿usáis o conocéis algún otro script que valga la pena mencionar?
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
