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/
Si sueles emplear muchas fotos en tus sitios y te apetece colocarles unos pies de foto elegantes de verdad, echale un vistazo a jQuery Captify.
Mediante este plugin podrás incorporar pies de página que aparecerán cuando el usuario pase el ratón por las fotos y que, para los usuarios que no tengan javascript no supondrán ninguna molestia.
Para crear nuestros pies de foto podremos optar por dos formas: mediante el atributo alt (es decir, cogemos el atributo alt que ya deberían llevar todas nuestras fotos y lo mostramos a nuestros usuarios como pie de foto) o creando un div que contenga el pie de foto y asociándolo con la foto mediante el atributo rel.
<!-- Mediante el atributo alt -->
<img src="theimage.jpg" class="captify" alt="Caption Text" />
<! -- Creando un div y asociandolo mediante el atributo rel -->
<img src="theimage.jpg" class="captify" rel="caption1" />
<div id="caption1"> Flickr // Pilot and Index </div>
Nuestros pies de foto además, podrán ser animados (efecto slide o fade) o fijos y, a diferencia de otros plugins similares, jQuery Captify está preparado para ser empleado en entornos de producción.
jQuery Captify: http://masterfidgeter.com/projects/captify/
Si hay algo que reprocharle a las hojas de estilo en cascada (CSS) es que cada uno las escribimos de la forma que mejor nos conviene y no siempre las optimizamos, tanto en peso como en reutilización de elementos.
Nicolle Sullivan hace una aproximación a las CSS orientadas a objetos (OOCSS), de manera que se generen una serie de modulos reutilizables y seamos capaces de crear hojas de estilo ligeras y manejables incluso para sitios grandes.
Además de presentarnos la idea mediante la metáfora de crear piezas de lego con las que ir construyendo nuestros sitios, de manera que mantengamos la consistencia en el diseño, el respeto por los estándares, la semántica (separando los contenedores del contenido y el código del diseño) y el peso de los archivos de estilos bajo control, nos deja su código fuente liberado con licencia libre en GitHub.
El concepto me parece muy interesante, sobre todo desde el punto de vista de la facilidad de legar el código a otros desarrolladores y permitir crear nuevas páginas de un sitio con rapidez, sin duplicar elementos y manteniendo la consistencia a lo largo de todo el sitio, independientemente de quien haya tocado.
¿Qué os parece a vosotros?
Vía Ajaxian
Si estabas buscando la forma de ofrecer un servicio de alojamiento de imágenes sencillo pero potente y completo Chevereto es justo lo que buscabas.
Chevereto es un script php liberado con licencia libre que podrás instalar en tu servidor y que te ofrece todas las características que podrías desear en un servicio así: subir imágenes desde tu disco duro o desde una dirección web, redimensionarlas y crear enlaces cortos a tus fotos gracias a su integración con TinyURL.
Chevereto es fácil de instalar y configurar, personalizable 100% y, de serie, viene con una interfaz de usuario más que agradable. Todo de la mano de Rodolfo Berrios.
Chevereto: http://chevereto.com/
Demo: http://demo.chevereto.com/
Vía Xyberneticos
Nos gusten más o menos, de momento parece que no podemos librarnos de los Captcha. En lo personal me desagradan terriblemente, sobre todo cuando son extremadamente complicados o no especifican si son sensibles a las diferencias entre mayúsculas y minúsculas y tengo que rellenarlos varias veces para saberlo…
AJAX Fancy Captcha es un script creado con PHP y jQuery que pretende hacer más visual la tarea de determinar si alguien es o no humano.
Para ello nos presenta una serie de iconos y nos pide que arrastremos a la zona especificada uno en concreto de ellos.
Sin dudas es una alternativa muy vistosa y seguramente agradable para los usuarios que navegan con las CSS, los Javascript y el ratón activados. Supongo que accesible no debe ser demasiado (se basa en imágenes, precisa el uso del ratón etc.) y en la web del autor no se habla de como degradará si no hay javascript, CSS, ratón o si se usa un lector de pantalla. Una pena, ya que una solución así pero accesible sería una buena forma de librarnos de esos galimatías de letras y números que suelen amenizarnos los formularios.
AJAX Fancy Captcha: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin
Una de las novedades más esperadas de CSS 3 es la posibilidad de definir que cualquier elemento de una página se comporte como parte de una tabla. Con esto podremos hacer que un div pueda tener algunas caracteristicas muy deseadas que ya poseían las celdas de una tabla (sobre todo el centrado vertical, por lo menos en mi caso).
Con esta nueva característica han surgido voces que han empezado a hablar de una nueva forma de componer estructuras de página, sin flotes, sin tantos jaleos, otorgándole a nuestros divs esas cualidades de tabla pero sin llegar a volver a maquetar con tablas.
Es un lío, desde mi punto de vista suena raro ya desde el mismo principio. Salimos en desbandada de las estructuras montadas sobre tablas para volver a algo igual pero puede que incluso más complicado.
Puede que gracias a una inteligente estrategia de marketing, el libro editado por Sitepoint “Everything you know about CSS is wrong” (del que podéis leer un capítulo en Digital Web Magazine, en inglés) se ha extendido como la pólvora la idea de que el futuro está en esta maquetación con pseudo-tablas.
Hasta ahora no había leído más que piropos a esta aproximación y me había reservado mi opinión (no me gusta la idea) para cuando pudiera trabajar más con la idea, siempre pensando que al no haberla probado demasiado no podía juzgar. Pero hoy me entero vía CSS Tricks de que gente tan importante como Eric Meyer pone en entredicho esta idea por poco semántica y por volver a dejarnos atados al orden dentro del código fuente para mostrar los elementos. Por no hablar de la falta de compatibilidad hacia atrás (y si, sé que todo el mundo debería llevar el navegador en la última versión pero también sé que es utópico creer que sucederá).
Como ya digo, para mí la idea es una locura. Prefiero seguir peleandome con los elementos flotados que empezar a falsear elementos y tener que editar el HTML cada vez que quiera cambiar algo de sitio (¿no era esa una de las ventajas de dar estilo con CSS?), pero ¿y vosotros? Maquetación con tablas CSS ¿si o no?
En sitios donde la navegación profundiza bastante en páginas internas es siempre interesante facilitar al usuario la vida indicándole en todo momento donde se encuentra dentro de la jerarquía del sitio.
El método más empleado y práctico es el de las “migas de pan” o breadcrumbs (en inglés), con las que vamos indicando al usuario el camino y donde se encuentra con respecto a la home del sitio.
A veces, sobre todo si nuestras páginas tienen títulos largos, nos encontramos con el problema de encajar estas migas de pan en la estructura de la web. Para solucionarlo muchas veces recurrimos a limitar el número de pasos que mostramos pero esto no siempre es lo más cómodo para el usuario.
jBreadCrumb es un plugin para jQuery con el que podremos crear “migas de pan” que se colapsarán cuando sean muy largas o contengan muchos elementos, de esta manera el usuario seguirá disponiendo de la información pero sin molestarle demasiado visualmente.
Poner en marcha el plugin es tan simple como insertar el siguiente código:
jQuery(document).ready(function()
{
jQuery("#breadCrumb").jBreadCrumb();
})Podremos configurar varios efectos para cuando el usuario pase el ratón por encima de los elementos colapsados.
Para que funcione necesitaremos incluir en nuestras páginas la librería jQuery y el plugin easing.
jBreadCrumb: http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html
A la hora de copiar y pegar texto de relleno para nuestros trabajos contamos con un montón de alternativas, tanto en el web como en muchos programas y widgets.
No obstante, HTML-Ipsum ha conseguido en poco tiempo superar a todas y convertirse en un sitio de referencia. En primer lugar porque no nos ofrece simplemente el texto sin formatear. Podemos copiar listas ordenadas, desordenadas, parrafos largos, cortos, estructuras de tabla etc.
Pero, por si fuera poco Chris Coyier nos sorprende, con la ayuda de algunos de sus lectores, y nos ofrece una nueva gama de aplicaciones y archivos para incorporar HTML-Ipsum a nuestro flujo de trabajo:
Sin lugar a dudas un recurso importante para ahorrarnos tiempo a la hora de introducir texto de muestra.
Tenéis más información sobre estas nuevas características en CSS Tricks.
HTML-Ipsum: http://html-ipsum.com/
Por defecto, los navegadores no nos permiten definir el estilo de los campos de subida de ficheros o inputs de tipo file (input type="file").
En general no suele suponer más que una molestia sin más pero, por la dificultad de hacerlo con CSS, solemos dejarlo así sin más.
Ahora que vivimos una nueva era de interfaces web en las que se da una importancia capital al diseño es como una espinita clavada en el corazón del diseñador que, seguro, tiene en mente una forma más bonita de representar el campo o más bien el botón.
Una vez más, jQuery al rescate con un plugin que nos permitirá cambiar el botón sin demasiados quebraderos de cabeza.
Para ello, simplemente tendremos que incluir en nuestros sitios la librería jQuery y el plugin jQuery File Style.
<script src="jquery.js" type="text/javascript"> </script>
<script src="jquery.filestyle.js" type="text/javascript"></script>Y añadir un código tal que el siguiente, donde definiremos la imagen que hará las veces de botón así como el tamaño del input.
$("input[type=file]").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 250
});Los inputs modificados con este plugin mantienen la clase del input originario por lo que podremos seguir dándole estilo adicional mediante CSS.
File Style Plugin: http://www.appelsiini.net/projects/filestyle
Vía Intenta
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
