Si creias que lo habías visto todo en cuanto a cosas frikis, o mejor dicho, geeks, mirad que canción se ha currado este tío sobre el CSS3. Basada en la famosa canción “Say you, say me”, se nota que el tío está completamente enamorado de los estándares y la buena programación web :)

Vía Ajaxian

Artículos relacionados:

1. Colección de chuletas para HTML 5 y CSS3
2. 70 tutoriales de CSS3 y HTML5
3. Google publica Google AJAX Translation API

Hoy he descubierto Sprite me, una herramienta muy práctica que facilita enormemente la tarea de optimización de páginas web mediante la técnica CSS sprite. La herramienta detecta todas las imágenes de fondo asignadas con CSS mediante la propiedad background-image, y las muestra en una caja. Utiliza firebug lite para inspeccionar las imágenes y proporcionar más información al desarrollador.

Una vez seleccionadas las imágenes que queremos agrupar en una, solo tenemos que pulsar sobre “Make Sprite”, lo que generará una nueva imagen que compone a todas las imagenes anteriores. Después pulsando sobre “export CSS” podremos obtener el código CSS necesario para implementar en el sitio que estamos optimizando.

Spriteme puede ejecutarse en cualquier sitio web como un bookmarklet, añadiendo la URL de la aplicación a favoritos y pinchando sobre el marcador en el sitio que quieres optimizar.

Te recomiendo que sigas el pequeño tutorial que hay en el sitio web de SpriteMe para aprender el funcionamiento de la aplicación.

Haz click aquí para ejecutar Sprite Me, y guarda el enlace en favoritos si quieres ejecutarlo en cualquier sitio web.

Artículos relacionados:

1. CSS Redundancy Checker, herramienta útil para depurar tus hojas de estilos CSS
2. Estilo CSS para wp-caption en WordPress
3. Artisteer, herramienta para crear plantillas de Joomla, WordPress y Drupal

Hace un tiempo descubrí en Cristalab una serie de videotutoriales donde se abordaba el proceso de maquetar un diseño, realizado con Photoshop en formato PSD, a XHTML/CSS. Esta es una tarea que todo buen maquetador debe dominar a la perfección si quiere que sus plantillas se visualicen correctamente en todos los navegadores.

En los vídeos se tratan algunos conceptos básicos de CSS, como el modelo de cajas (box model) de CSS, el proceso de “slice”, donde se cortan trocitos del diseño para maquetarlos más tarde. También se tratan temas como la inclusión de efectos con Javascript o fuentes personalizadas con Cufon. Si te interesa el tema no puedes perdértelos. Recientemente, la autora (Raymicha) ha finalizado la serie de videos y los ha colgado todos en Vimeo. Si te interesa el tema te recomiendo que le eches un vistazo por que puedes aprender bastante sobre el proceso de maquetación de un PSD.

Los vídeos aparecen al pinchar sobre “Seguir leyendo”.

Artículos relacionados:

1. CSS Redundancy Checker, herramienta útil para depurar tus hojas de estilos CSS
2. Hacks Css para diferenciar entre Internet Explorer 6 y 7
3. Chuleta para atajos CSS

Vía Genbeta encuentro CSSText, un editor visual de CSS para texto. Permite crear estilos de texto visualmente marcando y desmarcando opciones, al estilo de Form Style Generator.

Artículos relacionados:

1. CSS Redundancy Checker, herramienta útil para depurar tus hojas de estilos CSS
2. Estilo CSS para wp-caption en WordPress
3. Usar el editor wysiwyg de Joomla en tus componentes

Reconozco que el título es un poco sensacionalista, pero es que me ha hecho gracia lo que he visto. Matt Cutts, el jefe del equipo de cálidad en busquedas de Google, famoso por que es cara visible de Google y suele publicar muchos consejos en forma de videos sobre buenas prácticas en posicionamiento para Google, publicó hace poco un video en el que decía que no hay que usar técnicas de sustitución CSS en los logos para indicar el texto del logo, ya que esto podría ser interpretado como spam por Google. La buena práctica es incluir una etiqueta img con un atributo alt, que Google puede leer perfectamente. Aquí dejo el video para que veáis que no miento.

Básicamente dice que usar técnicas CSS para esconder el texto del logo es algo un poco turbio y que puede ser considerado como spam. Mucho mejor usar una etiqueta img. Hasta aquí todo claro y lógico.

Lo que no me parece tan lógico es que Google vaya predicando esto y luego en sus aplicaciones haga justamente lo que desaconseja. Y es que me lleve una sorpresa cuando nada más acabar de ver el video abro mi cuenta de FeedBuner y veo que justamente están usando la misma técnica que Matt Cutts desaconseja.

Lo que están haciendo es básicamente utilizar un text-indent de -5000 para esconder el texto del h1. Es una tontería y lógicamente no creo que Google se dedique a hacer “Black Hat SEO”, no creo que lo necesite, pero me ha parecido curioso que la todopoderosa Google se contradiga.

Espero que no me sancione Google por esto, jeje.

Artículos relacionados:

1. Carga lento Google analytics en tu web?
2. Controla las imágenes rotas de tu web con jQuery y Google Analytics
3. Completo analizador SEO online

Vía Facebook me encuentro con este fantástico recopilatorio de 70 tutoriales de HTML5 y CSS3 realizado por CSS3 Gallery.

Artículos relacionados:

1. Colección de chuletas para HTML 5 y CSS3
2. Recopilatorio de recursos y tutoriales sobre Mootools por w3avenue y Smashingmagazine
3. La canción del CSS3

El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien maquetado debería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores, es decir, mejor para SEO, y un tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página.

El otro día, vía Twitter me os hablé de un pequeño tutorial donde se enseñaban las bases del posicionamiento CSS en 10 lecciones prácticas. El tutorial me pareció muy bueno y creo que es básico para cualquier persona que quiera aprender a maquetar sitios web con CSS.  Los pasos son realmente sencillos de seguir.

Para todo el tutorial se va a utilizar siempre la misma estructura XHTML, que se muestra a continuación.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

	<div id="example">
 
		<div id="div-before">
			<p>id = div-before</p>
		</div>
 
		<div id="div-1">
			<div id="div-1-padding">
 
				<p>id = div-1</p>
 
			        <div id="div-1a">
				        <p>id = div-1a</p>
				        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
			        </div>
 
			        <div id="div-1b">
				        <p>id = div-1b</p>
				        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
			        </div>
 
			        <div id="div-1c">
				        <p>id = div-1c</p>
			        </div>
 
			</div>
		</div>
 
		<div id="div-after">
			<p>id = div-after</p>
		</div>
 
	</div>

POSITION STATIC

El posicionamiento normal de todos los elementos es static, que significa que cada elemento se posiciona donde le corresponde según el flujo normal de la página. Si no se indica nada, este es el valor que toman todos los elementos.

1
2
3

#div-1 {
    position:static;
}

El resultado que se muestra es el mismo que si no se hubiese aplicado ninguna regla CSS.

POSITION RELATIVE

Si se especifica la posición relativa para un elemento, puedes posicionar este elemento usando las propiedades top, bottom, left y right, y el elemento se posicionará a la distancia indicada respecto de donde debería estar según el flujo normal de la página.

1
2
3
4
5

#div-1 {
    position:relative;
    top:20px;
    left:-40px;
}

POSITION ABSOLUTE

Si se especifica position absolute, el elemento se muestra exactamente donde se indica en las propiedades top, bottom, left o right.

1
2
3
4
5
6

#div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
}

POSITION RELATIVE + POSITION ABSOLUTE

Si especificas la posición de div-1 de forma relativa, todos los elementos contenidos dentro de div-1 se posicionaran relativamente a div-1, por lo tanto si le establecemos la posición absoluta a div-1a, este se posicionará en la esquina superior derecha del contendor div-1.

1
2
3
4
5
6
7
8
9

#div-1 {
     position:relative;
}
#div-1a {
     position:absolute;
     top:0;
     right:0;
     width:200px;
}

2 COLUMNAS POSICIONADAS DE FORMA ABSOLUTA

Utilizando posicionamiento relativo en el contenedor y absoluto para las columnas se pueden posicionar las columnas, una en cada lado.
Una ventaja de usar este posicionamiento es que se puede colocar el HTML de las columnas en cualquier orden, ya que el posicionamiento se realiza de forma absoluta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#div-1 {
      position:relative;
}
#div-1a {
      position:absolute;
      top:0;
      right:0;
      width:200px;
}
#div-1b {
     position:absolute;
     top:0;
     left:0;
     width:200px;
}

Si te fijas, los demás elementos han sido tapados por las dos columnas que están posicionadas de forma absoluta. Vamos a ver cómo solucionar esto.

COLUMNAS POSICIONADAS DE FORMA ABSOLUTA CON ALTO DEFINIDO

Para poder visualizar el contenido tapado por las dos columnas, habría que darle un alto definido al elemento contenedor, de esta forma ya se visualizarían.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#div-1 {
    position:relative;
    height:250px;
}
#div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
}
#div-1b {
    position:absolute;
    top:0;
    left:0;
    width:200px;
}

Pero esta no es una solución válida para la mayoría de los diseños, porque lo normal es que no se sepa cual va a ser la longitud del texto introducido en las columnas. ¿Cómo se puede solucionar esto? Sigue leyendo…

POSICIONAMIENTO FLOTANTE

Para columnas de altura variable, el posicionamiento absoluto no sirve, en este caso hay que utilizar el posicionamiento flotante. Con la propiedad float se puede posicionar un elemento lo más a la derecha posible o lo más a la izquierda posible, dejando que el resto de elementos fluya alrededor suyo. El div div-1a está flotado a la izquierda, y el texto del resto de divs fluye alrededor el div-1a, pero el resto de divs (div-1b y div-1c) siguen ocupando la misma posición que antes, es decir todo el contendor, porque son elementos de bloque. Esto significa que el texto no se solapará con div-1, pero si le asignas una imagen de fondo con CSS, esta imagen sí que se solapará con div-1.

1
2
3
4

#div-1a {
    float:left;
    width:200px;
}

COLUMNAS FLOTANTES

Para que no se solapen unos elementos con otros hay que flotar todas las columnas. Para que se muestren una al lado de otra, entre todas las columnas han de sumar un ancho no superior al ancho del contenedor. Si te fijas, tanto div-after, como div-1 (que hace de contenedor) se solapan con las columnas creadas, vamos a ver como solucionar esto.

1
2
3
4
5
6
7
8

#div-1a {
    float:left;
    width:150px;
}
#div-1b {
    float:left;
    width:150px;
}

COLUMNAS FLOTANTES CON CLEAR

Luego, en el último div (div-1c), en este caso el que hace de pie, se le puede añadir la propiedad clear, para que deje de tener efecto el flotado de las columnas de arriba y el resto del contenido se posicione debajo.

1
2
3
4
5
6
7
8
9
10
11

#div-1a {
    float:left;
    width:190px;
}
#div-1b {
    float:left;
    width:190px;
}
#div-1c {
     clear:both;
}

FIN

Con estos pasos se ha aprendido lo básico del posicionamiento CSS. Se han dejado bastantes cosas por ver, como la compatibilidad entre navegadores, etc… Pero creo que es una buena introducción para aprender a colocar cada elemento de la página donde le corresponde sin usar tablas o técnicas desaconsejadas.
Este tutorial está basado en el tutorial de BarelyFitz Designs.

Artículos relacionados:

1. Dar estilo a comandos de Windows con Css
2. Css CheatSheet para Joomla 1.5
3. Estilo CSS para wp-caption en WordPress

Que no sea por chuletas. En WebResourcesDepot han hecho una recopilación de chuletas sobre HTML 5 y CSS3. Hay que estar al día, así que voy a echarles un vistazo que no quiero quedarme desfasao en estas nuevas tecnologías que se avecinan. Menos mal que Microsoft tardará en implementar los estándares en su navegador y nos dará tiempo, jejeje.

Artículos relacionados:

1. RefCardZ, sitio web con muchas chuletas de todo tipo
2. Chuleta para atajos CSS
3. Chuleta de HTML 5 en Woork