12 técnicas básicas de plantillas CSS

ByLuis

Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es más de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseños están divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorías, a su vez tiene diseño estático, estático con paneles en el pie de página y diseño fluido.
csstemplates.png
Se pueden descargar los diseños cuando los visualizas.
12 Basic CSS Templates
Vía / Digg

Similar Posts

Script AJAX para crear pestañas

ByLuis

Aunque es más fácil hacer copy/paste de un script o simplemente usarlo, que ver cómo funciona por dentro, os recomiendo que le echéis un ojo a este script para crear pestañas mediante AJAX.
Si os fijáis, se trata de una lista ul que mediante estilos forma las pestañas. En cada uno de los elementos li hay un enlace a cada una de las páginas que queremos mostrar. También habrá un div que contendrá la página que queremos mostrar en su interior.
Lo más interesante para mí es que la idea que se suele tener de que AJAX tiene que apuntar a un script no es cierta, apunta a una url y obtiene el resultado, si es un script, el resultado que este devuelva, y si es una página HTML, el contenido de esta.
La segunda cosa que resaltaría es una forma de programar que me parece muy limpia, escribir el HTML sin Javascripts añadidos que son complicados de seguir (sobre todo eventos: onclick, onmouseover, …) y luego que el script general se encargue de modificar los elementos HTML como corresponda, en este caso coge los enlaces y les añade el evento onclick, el cual depende del contenido del atributo href y el atributo rel.
Ajax Tabs Content script
Vía / Digg

Porcentaje de carga mediante CSS

ByLuis

Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.

porcentaje.png

Usando este código HTML:

<div id="box">
<div id="bar">50%</div>
</div>

y estos estilos:

#box{
width:250px;
border:1px solid #000;
height:17px;
}
#bar{
width:50%;
background:#000 /* u otro background */;
height:14px;
color:#fff;
text-align:right;
padding:3px 0px 0px 0px;
}

podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.

CSS Percentage Bars

Vía / Posh CSS

Consejos para desarrollar cumpliendo estándares

ByLuis

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

  • Menos es más, no uses mas código del necesario
  • No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
  • Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
  • No uses meta etiquetas redundantes
  • Usa microformatos para hacer tu sitio legible
  • Usa tablas solo para mostrar tablas
  • Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
  • No uses Javascript mediante enlaces
  • No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

CSS Sprits: generador de sprites para CSS

ByLuis

Un sprit en CSS es usar una imagen que contenga a varias imágenes para usar parte de ellas como si fueran independientes y así no tener que estar cargando distintas imágenes. Técnica que se usaba en el ejemplo de personalización de checkboxes y radio buttons que ya contamos hace bastante tiempo.
fuglychecks.pngCrear este tipo de imágenes puede ser algo complicado para algunas personas que no están acostumbradas al uso de programas de dibujo, ya que en algunas circunstancias puede haber imágenes de distintos tamaños.
Para cuando queramos crear el sprit, y no sepamos cómo, o tengamos prisa, podemos usar la aplicación que ofrece CSS Sprites Generator, la cual nos solicita las imágenes y nos devuelve la imagen ya tratada, más sencillo imposible.
CSS Sprites Generator
Vía / PHPDeveloper.org