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?
En esto de la web, el tamaño importa y, por lo general, a más pequeño mejor.
TinyJS es un sitio web dedicado a recopilar scripts que, a pesar de tener un tamaño casi ridículo, son potentes y prácticos.
Los scripts se dividen en categorías por librería: jQuery, YUI y MooTools.
Tiny.js: http://tinyjs.com/
Vía Intenta
Tiene razón Carlos y parece que tengo algo en contra de Mootools. Ante todo decir que no, no tengo nada personal contra esta librería, me parece realmente buena y os animo a probarla. El único problema que tengo es que jQuery colma mis necesidades tan eficazmente que no me quedan ojos para otros.
Aún así, como sé que muchos preferis Mootools voy a enmendar mi error y voy a empezar a daros el protagonismo que merecéis, para empezar hoy os traigo una recopilación estupenda: Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery?
Ahí tenéis de todo, sistemas de pestañas, slideshows, drop downs, autocompletado para formularios etc.
Sin duda, con todo este material, los que no hemos usado mucho la librería podremos probarla a fondo y, los que la usáis habitualmente para vuestros desarrollos tendréis unas cuantas herramientas a mano.
Somos muchos los que alguna vez nos hemos visto tentados a ofrecer nuestro sitio en varios idiomas, no obstante la falta de tiempo o conocimientos puede habernos frenado.
A pesar de que no soy muy amiga de las traducciones automáticas, lo cierto es que cada vez son más frecuentes y para algunos pueden ser un buen recurso (preferiblemente avisando a los lectores de que se trata de una traducción generada por un script para que no se escandalicen demasiado si aparecen verdaderas burradas).
Si te has decidido a usar uno de estos scripts seguro que te gusta Sunday Morning, un script realizado con jQuery que te permite incluir de forma elegante y sencilla las capacidades de Google Translate en tu web.
Sunday Morning te permite trabajar de diversas formas: incluyendo un menú con las opciones de idioma, traduciendo palabra por palabra, permitiendo que tus usuarios introduzcan texto para traducir o mediante un bookmarklet con el que acceder a versiones traducidas de cualquier sitio web.
Sin duda, la calidad de las traducciones depende mucho de Google Translate pero por lo menos la forma de presentarselas a nuestros usuarios mejorará mucho respecto a otras soluciones.
Sunday Morning: http://sundaymorning.jaysalvat.com/
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
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
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
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”
Ver más noticias de los usuarios
