CSSUtilities es una librería que permite entre otras cosas:
Algo muy parecido a lo que nos ofrece Firebug
Vía / DZone
La gente de SitePoint han publicado un gran artÃculo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artÃculo cómo podÃa pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artÃculo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box
Buen truco para darle la misma altura a diferentes bloques cuando mediante CSS no es fácil de hacer.
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}Equal Height Columns with jQuery
Vía / CSS Globe
TrimQuery es un script que permite usar sentencias SQL para obtener datos contenidos en un objeto JSON.
Entre las caracterÃsticas que permite, nos encontramos con:
Si por ejemplo disponemos del siguiente objeto:
Invoice : [ { id: 1, total: 100, custId: 10 },
{ id: 2, total: 200, custId: 10 },
{ id: 3, total: 300, custId: 10 },
{ id: 4, total: 400, custId: 20 } ],
Customer : [ { id: 10, acctBalance: 1000 },
{ id: 20, acctBalance: 2000 },
{ id: 30, acctBalance: 3000 } ]
Podemos obtener datos con la siguiente consulta:
SELECT Customer.id, Customer.acctBalance, Invoice.total FROM Customer, Invoice WHERE Customer.id = Invoice.custId ORDER BY Customer.id
Es sensible a mayúsculas y minúsculas, ya que diferencia entre FROM y from.
VÃa / dzone
Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.
El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).
$('#sidebar .sortable-list').sortable({
axis: 'y',
containment: 'parent',
forceHelperSize: true,
forcePlaceholderSize: true,
handle: '.section-title',
opacity: 0.8,
placeholder: 'placeholder',
update: function(){
$.cookie('sidebar-cookie', getItems('sidebar'));
}
});jQuery: Customizable layout using drag and drop
Vía @kingsleyphls
qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:
Vía / crishnakh
There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and buzz. One of the widgets I love is Twitter’s “Follow” button. Let me sho …
2 Comments
Comments are closed.