|

Cinco consejos sobre CSS

ByLuis

Cada cual tiene su forma de desarrollar y todo aquel que considera que su experiencia puede ser de utilidad, da consejos sobre cómo poder hacer las cosas. Nunca viene mal aprender de otros, por eso os muestro 5 consejos que nos ofrece Mike Rundle.

  • Organiza tus estilos según el siguiente formato: primero reune las que correspondan a los contenedores y layouts, después las cabeceras (<h1>..<h6>), seguido iría los párrafos y los enlaces, y por último todas las listas (navegación, …).
  • No uses estilos por defecto, en vez de crear un estilo para todos los enlaces (<a>), defínelo contenido por bloques (por ejemplo: #contenido a {..}).
  • Utiliza etiquetas HTML para incluir estilos dentro de otros estilos, por ejemplo, si queremos que una línea tenga distintos colores, en vez de usar capas y clases, define estilos para etiquetas tipo <em> para que quede un código más limpio.
  • En vez de usar capas con un estilo definido, usa etiquetas HTML que representen la misma función que quieres mostrar, por ejemplo, en vez de usar una capa para el título, usa una etiqueta de cabeceras (<h1>..<h6>). No reinventes la rueda.
  • Nombra los estilos según su funcionalidad, no como aparecen, en vez de crearte un estilo llamado rojo, create uno que se llame error, cuando es precisamente un error lo que quieres mostrar.

My 5 CSS Tips
Vía / SkimCSS

Similar Posts

24 ways: buenos trucos para tu web

ByLuis

24ways.png24 ways es un sitio a tener en cuenta a la hora de encontrar trucos y efectos para tu web desarrollados por gurus del desarrollo web.

En especial me han gustado cinco de ellos:

Vía / QuirksBlog

CSSEmbed: incrustar imágenes en tus CSS

ByLuis

CSSEmbed es un script que te sustituye las imágenes de un CSS por su representación en base64. ¿Qué conseguimos con esto? reducir el número de peticiones HTTP, por ejemplo. Para ello debemos usar DATA URIs, las cuales sustituyen a las URLs por el contenido codificado en base64.

.ejemplo {
background: url(imagen.png);
}
/* Sustituido por */
.ejemplo {
background:   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAADwCAMAAACe2r56AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJl
YWR5ccllPAAAAwBQTFRFAAMAAAQA8fbw6O3nAQYAHCEbCA0HlpuV3uPdyM3HR0Dwv8S+BAYRSjvmYmdhDw0yPzTG1NnTCAkdoKWfO0A6LzQuLSiXRjnbeH
13goeBtbq0ERYQbnNtqq+pGxxhjJGL7tgZEBVARUpEExA9FBhLTlNNJSokWV5YGBtXOzK6ODCwIiF2JiOBQzfRNCysMCmhKSWMCwonHx9sJisl3cQWMTYwys/J5
s4YU0kH1bsWZGljl5yWFBMANC8EAgcBwKsUg4iCt6ESExgSREEFgncNWlEHHR4BEhcRn48PqZoRjZKMoaagZFwKwMW/mYcQZWpkT1ROl4UOY1sJx7MUq7Cqy
LQVv6oToZERWl9ZmIYPGxwARktFeX54CQ4ICA4AZV0LNTAFkH0OUFVPVUsJioAOHh8Cb3RuMjcxmJ2XeGsKPjoHPEE7fXAPNjEGMy4D1rwXPTkGcWMLXFMJkX
4Pem0McmQMFhUBDgwBBw0AMDUvoqehBgwA8/jyqJkQJCYBW2BaJigD3sUXeWwLYloIDgsIcGIKDAsoUUcFOzcEY2hiHiMdJykErLGry9DKiX8Ne24Ntru13+TePD
gFMzgyPDO7qpsSuKITFhsVwcbANDkzybUWuaMUQ0AEDw0CXlULbmgN1drUKC0nEhA1gHULExIAHyADR0xGLC8CcHVvHyQea2UKUVZQVVJPICUfDhMNTUEIdH
FusZkT6/DqCg8JQj8D6e7oalsLQUZAICBtLicFrbKs38YY2b8aGyBLPUI8CxAKppYWTEAHz7scsJgSICEEyc7ISUYKFxYCopISHB1idXp0uqQVFRgbkn8QbGYLEA4D
NzIH+/OhHh5rTkIJzNHLISIFBgsFRTja6dEbCQoeV1RRCQYDKigdSEUJ2t/ZMzQXQT4CFRI/588ZSkUaCgs...
}

Lógicamente con versiones inferiores a IE8 da problemas y hay que usar alternativas, pero en el resto de navegadores va bien. Se puede ver un ejemplo real en las imágenes de las búsquedas de Google.

CSSEmbed

|

Evitar el caché en las hojas de estilo

ByLuis

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la función de Prototype $$, pero se podría hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo añadiría dos:

  • si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, así los cambios aparecerán, luego los podrás ver en la página.
  • si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

gotApi: colección de APIs

ByLuis

gotapi.pngYa hace tiempo hablamos de una web de referencias para programadores, y como cuanta más variedad de servicios parecidos tengamos, mejor que mejor. En esta ocasión os mostramos un directorio de APIs, que accediendo a las páginas originales, nos muestran las referencias que necesitamos.
Dentro de las distintas APIs encontramos referencias sobre HTML, Javascript (Prototype incluida), CSS, XML, C++, PHP, bases de datos, Java, Apache, ActionScript y mucho más que va creciendo poco a poco.
Lo que más me gusta es poder elegir el origen de referencia del API, por ejemplo para HTML puedes mirar en w3.org o en msdn.microsoft.com, aunque me hubiera gustado que se pudiera buscar también en xulplanet.com.
gotAPI.com
Vía / dzone

6 formas de hacer un diseño destacable

ByLuis

A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.

  • Fondos de pantalla grandes: los fondos de pantalla grande pueden hacer que el diseño resalte, a parte de que son fáciles de añadir.consejos1.png
  • Layout original: no es la primera vez que veo diseños con secciones de tamaños que superan el ancho y alto del navegador y que para acceder a cada sección hay que hacer un scroll progresivo (mediante javascript). Son originales y en algunos casos muy acertados. En el ejemplo que os pongo, cada color es una sección y el tamaño original tiene un ancho de 6000px.consejos2.png
  • Navigación creativa: la navegación puede dar mucho juego para mejorar el diseño, ya sea mediante rollovers u otras cosas. Eso sí, ante todo que prime la usabilidad. En el ejemplo que os paso los menús van a juego con los colores de la calle.consejos3.png
  • Minimalismo: aunque por ahora se ha tratado de consejos con un gran diseño, eso no implica que un gran diseño tenga que ser aparatoso, puede ser perfectamente minimalista, lo cual hace que llame mucho la atención.consejos4.png
  • Logo: está claro que un buen logo hace que te represente y además te diferencie.
  • Layout horizontal: aunque la gente está acostumbrada al scroll vertical, este tipo de diseño puede llegar a ser muy atractivo, aunque haya gente que lo odie.consejos6.png

6 Methods to Make Your Website Standout

|

21 cuestiones sobre block, inline y floating en HTML

ByLuis

Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
Vía / Pixel Groovy