A todos los que usamos librerias para agilizar nuestro código creo que nos viene estupendamente tener un sitio donde ir a consultar si existe un plugin que haga eso que necesitamos antes de ponernos a programarlo por nosotros mismos ¿no?
The Ultimate jQuery List es un sitio donde poder ir a buscar plugins y tutoriales de jQuery de una forma cómoda y conveniente, en una sola página.
Los contenidos están divididos por categorías que incluyen validación de formularios, AJAX, Tooltips etc.
The Ultimate jQuery List: http://jquerylist.com/
Vía Xyberneticos
Hace unos días hablábamos de una aplicación online que nos permitía detectar selectores de nuestra hoja de estilo que no se estaban empleando en nuestros sitios y que, por tanto, podíamos eliminar para aligerar nuestra CSS.
Dust-Me Selectors hace esto mismo pero en forma de extensión para Firefox, de forma que no necesitaremos tener conexión a internet para hacer un poco de limpieza en nuestras hojas de estilo.
Podrás escanear páginas individuales o sitios completos y, cuando hayas acabado, obtendrás una lista de selectores que no están en uso.
Dust-Me Selectors soporta hojas de estilo locales o remotas, enlazadas o importadas mediante @import y declaraciones dentro de comentarios condicionales para Internet Explorer.
Dust-Me Selectors: http://www.sitepoint.com/dustmeselectors/
He incluído esta extensión en el recopilatorio de extensiones de Webmaster Libre para Firefox
Cada vez es más común que, en lugar de diseñar para páginas estáticas que sólo nosotros o alguien con conocimientos actualizará, diseñemos para CMS que nuestro cliente podrá editar y utilizar a su antojo.
Una parte importante del diseño y la maquetación de una plantilla para un CMS es la de tener en cuenta todos esos elementos que podrían aparecer en un sitio, dependiendo del uso que den nuestros usuarios, por ejemplo, al editor de entradas. No sería la primera vez que nos olvidamos de dar estilo a los encabezados más allá del h3 o que nos dejamos atrás cosas tan prácticas como los blockquotes o las listas de definición, pensando que nadie las va a usar.
Esta página HTML de prueba nos permitirá aplicar nuestros estilos a una página con todos los elementos que podrían aparecer en una página, de forma que es muy simple comprobar si hemos dado estilo a todo lo que deberíamos.
Obviamente, hay algunas combinaciones de etiquetas, como por ejemplo las listas anidadas, que no están contempladas en este documento pero nos puede servir como base para crear nuestra propia guia de estilo.
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
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Consejos para agilizar el desarrollo.
Excelentes formularios de comentarios para inspirarnos.
Ver más noticias de los usuarios