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/
Personalmente no soy muy partidaria de usar hacks en las hojas de estilo para solucionar las deficiencias de uno u otro navegador, aún así comprendo que hay circunstancias en las que se hace necesario y siempre viene bien tener el conocimiento por si llegase ese momento.
Paul Irish nos ha ahorrado mucho trabajo haciendo una recopilación de hacks que podremos emplear para los diversos navegadores disponibles. Aquí os la dejo, con los comentarios traducidos:
/***** Hacks con selectores ******/
/* IE 6 y anteriores */
* html #uno { color: red }
/* IE 7 y anteriores */
*:first-child+html #dos { color: red }
/* IE 7 y navegadores modernos */
html>body #tres { color: red }
/* Navegadores modernos (IE 7 no) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 y anteriores */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Hacks con Atributos ******/
/* ie6 y anteriores */
#once { _color:blue }
/* ie7 y anteriores */
#doce { *color: blue } /* or #color:blue */
/* 'Navegadores Modernos' incluye IE8, estés o no de acuerdo.. 
*/Paul además nos ha dejado una página de prueba con todos los hacks y un enlace a browsershots donde podréis comprobar como funcionan en los diversos navegadores.
Cuando vi la noticia sobre esta aplicación tuve que revisarla varias veces porque pensaba que era una broma del April’s Fools (ya sabéis, el dia de los inocentes anglosajón).
ie6fixer es una aplicación web que ojalá pronto sea innecesaria cuya finalidad es generar los correspondientes hacks para que tus hojas de estilo sean 100% compatibles con Internet Explorer 6.
Para trabajar con la aplicación simplemente copiaremos y pegaremos el código de nuestras hojas de estilo y escogeremos si queremos crear una hoja específica para ie6 que introduciremos mediante comentarios condicionales (opción recomendada) o si lo que preferimos es introducir hacks en nuestra hoja.
ie6fixer: http://www.onderhond.com/tools/ie6fixer/
Vía anieto2k
Mantener las hojas de estilo ordenadas, que sigan una cierta lógica, es una de esas buenas costumbres que todos deberíamos cultivar.
No obstante, cuando heredamos código de otros desarrolladores o, incluso, cuando trabajamos con prisas o sin prestar suficiente atención, podemos encontrarnos con auténticos desastres.
Styleneat es una cómoda aplicación online que promete dejar tus hojas de estilo limpitas como una patena. Para ello sólo tendrás que cargar tus estilos de una de las tres formas disponibles (pegar directamente el código, subir el fichero css o importarlo desde una dirección web).
Una vez cargado el código podrás seleccionar unas cuantas opciones para formatearlo: organizar las propiedades alfabéticamente, organizar selectores alfabéticamente (con cuidado, según pone la propia web, así que supongo que podría salir mal), importar y organizar el código de hojas de estilo enlazadas (@import) y si queremos formatear nuestras reglas de estilo en una sola línea o en varias. Por último, existe una casilla etiquetada “safe organize” que supongo prevendrá a la aplicación realizar acciones que pudieran “romper” nuestras hojas de estilo.
Supongo que os resultará práctico para poder presumir de tener unas hojas de estilo perfectamente ordenadas y limpias.
Styleneat: http://www.styleneat.com/
Vía Wwwhat’s new?
Cuando desarrollo plantillas para sitios complicados suele gustarme dividir los diversos aspectos de la hoja de estilo en distintos ficheros. Luego, cuando llega la hora de subir el sitio a producción suelo copiar y pegar el contenido de las diversas hojas en un único fichero para evitar hacer llamadas innecesarias.
MinifyMe es una pequeña aplicación hecha en Adobe AIR con la que automatizar este proceso de combinar hojas de estilo y ficheros javascript de una forma simple y sencilla. Sólo hay que arrastrar los diversos archivos al programa y listo.
MinifyMe es mucho más simple que otras aplicaciones similares y, salvo quitar algunos espacios en blanco y saltos de línea, no comprime tus ficheros así que si lo que buscas es algo que además de combinar comprima quizá debas optar por la utilidad desarrollada por Yahoo, Compressor, algo más complicada debido a que deberás trabajar en línea de comandos.
MinifyMe: http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/
Ya sabemos que lo mejor para ahorrar peso y tiempo de carga es usar “sprites” en los casos que vayamos a usar imágenes para adornar nuestros enlaces ¿verdad?
A pesar de los claros beneficios, como mejorar el tiempo de carga o conseguir un efecto rollover más limpio y sin saltos, crear una barra de navegación basada en gráficos mediante sprites puede ser un poco aburrido.
Navigation Bar Code Generator es un proyecto de Matt Varone que nos ayudará en la tarea. Sólo tendremos que subir nuestra imagen que se compondrá de los 3 estados básicos de la barra de navegación en un sólo fichero, seleccionar el aspecto de nuestro estado normal y seleccionar los diferentes botones de los que está compuesta.
Una vez hayamos dividido nuestra imágen, sólo tendremos que introducir el nombre de los diversos enlaces que la compondrán y recoger nuestro código xHTML y CSS, perfectamente válido y en unos segundos.
Para que os hagáis una idea más clara de cómo funciona lo mejor es que veáis un video explicativo o hagáis vuestras pruebas con la imágen de ejemplo.
CSS Navigation Bar Code Generator: http://lab.mattvarone.com/navbar/
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