El caso es que pretendo que este espacio me sirva también para tener ordenado todos aquellos tutoriales, demos, prácticas varias o curiosidades con los que me he ido encontrado en estos tiempos, si de paso le sirve a alguien más, mejor que mejor.

Problemas con esquinas redondeadas, sean de la complejidad que sean:

Nifty Corners Cube: Los de toda la vida, los de la abuela, para hacer redondeos más o menos típicos

Shaded Border: Para los que buscan grandes emociones, con fondos degradados y demás historias.

Reemplazo de fuentes

Cufón: Mi nuevo muy mejor amigo, funciona generalmente bien (a veces se pega con otros niños-plugins) , es fácil de implementar y las librerias no ocupan demasiado

Sprites

CSS Sprite Generator: Reconozco que yo soy más de hacerlo a mano, pero una buena herramienta se agradece (no penséis mal leches)

Tooltips

Simpletip: Claro y consiso, para hacer tooltips, sin chorradas.

Beauty Tips: Todo lo contrario al anterio plugin, con todas las opciones y chorraditas varias que se puedan imaginar.

Lightboxs

Shadowbox: Muy chulo, con bastantes opciones 

Thickbox: El rey de la selva, básico fundamental en todos mis proyectos

Retícula

Jquery-reticulator: Basada en el reticulator de Ale Muñoz, una creación de Manuel Muñoz, básico para cualquier maquetación que tenga que estar al pixel.

Transparencias en IE6

IE Png Fix: Mi otro mejor amigo, este es el que te salva el culo siempre, especialmente cuando llegan diseños puteantes complejos.

Tablas Ordenadas:

Tablesorter: Salvador para aquellos proyectos llenos de tablas con datos de ordenados de usuarios y demás rollos

Bola extra: Google Buttons Style: Fáciles de implementar y quedan chulísimos en cualquier proyecto

La solución es fácil, con un simple plugin de jquery podemos darle el estilo que queramos, la forma es bastante sencilla:

Añadimos el plugin en el head de nuestro site, junto con el css básico al que luego podremos dar forma:

<script type="text/javascript" xsrc="jScrollPane.js"></script>

<link rel="stylesheet" type="text/css" media="all" xhref="styles/jScrollPane.css" /> 

Ahora solo tenemos que llamar al elemento de bloque, con overflow:auto, al que queramos dar estilo, si tenemos por ejemplo:

<ul class="lista_enlaces">

   <li><a xhref="link1.html">Enlace 1</a></li> 

   <li><a xhref="link2.html">Enlace 2</a></li> 

   <li><a xhref="link2.html">Enlace 3</a></li> 

</ul> 

La llamada será tal que así:

$(function(){	

    $('.lista_enlaces').jScrollPane();

}); 

¡Y eso es todo!

Más información: jScrollPane

Se trata de LibrosWeb.es, una web donde se puedes descargarte o leer online multitud de libros sobre XHTML, CSS, Javascript , Ajax etc etc.

Los libros se actualizan continuamente, están en castellano y te los puesdes descargar en PDF para leértelos por ahí, y lo mejor de todo, no están nada mal!

En SmileyCat nos enseñan que no hay trabajo imposible, si usted es capaz de probar todos los métodos y no encuentra la solución, no se preocupe, puede probar con esto, o quizás con esto otro ( ya nos contará que tal)

Más información | CSS Rounded Corners 'Roundup'

No pretendo escribir sobre agradecimientos y buenos momentos (podría llenar varios posts solo hablando de eso), más bien me apetecía dejar plasmado en algún lugar mi experiencia y poder volver a leerla dentro de un año, al igual acabo de hacer ahora.

Me considero una persona afortunada en el terreno profesional, he tenido la suerte de conocer y trabajar día a día con lo mejor de cada casa, desde diseño a maquetación, pasando por programadores, diseñadores de interacción y jefes de proyecto.

A lo largo de este año he aprendido a trabajar en grupo, a formar parte de un equipo de desarrollo, a tomar decisiones y a ser independiente en mi trabajo, y entre otras cosas no menos interesante he formado parte de un equipo de fútbol, aprendido que son los Scrums, y el gran significado de sabias palabras como Twitteador® o Deployador®

Resumiendo, no quería llenar este post de agradecimientos…pero no lo puedo evitar, soy un romántico.

Gracias a:

Alberto, Cristina, Macla, Jero, Jorge, Ale, Luis, Joaquín, Adriana, Ana, Keko, Damaris, Cristina, María, Bea, Antonio, Diego, Álvaro, Blat, Ricardo, Aitor, Fernando, Roberto, Guillermo, Luis, Dani, Pepe, Juan, Nando, Gaizka, Alfredo y Mari Carmen.

Millones de gracias a mi compañero de maquetación Iván ( por tener que aguantarme cada día ).

Y por encima de todos, gracias a Mamuso, por tantas cosas que no sería capaz de enumerar.

PD: Volver a leer dentro de un año

En esta nueva era de la web, parece que está de moda hacerlo todo mucho más "visualmente atractivo", los clientes se olvidan completamente del trabajo de los diseñadores y algunos diseñadores dejan fluir su imaginación y se olvidan completamente de los maquetadores, cuanto más dospuntocerista sea tu diseño mejor.

Ale Muñoz definió un nuevo tag XHTML para cuando nos encontráramos con alguna de estas locas propuestas de los clientes, el CWT (Client Want This) y expresa claramente el ejemplo del que voy a hablar en este post.

Las esquinas redondeadas en un diseño son ya algo normal, maquetarlas se puede hacer de forma sencilla usando alguna técnica como la Slinding Doors, de esta forma lograrás tener un contenedor elástico con bordes redondeados, perfecto!

Pero como esto no es lo suficientemente cool vamos a darle una vuelta de tuerca, las esquinas redondeadas pasan ahora a tener tres o cuatro niveles de sombreados grises tanto en sus bordes horizontales como en los verticales, es decir, más o menos esto:

Mamuso (al cual le tengo que agradecer este post que estoy escribiendo) me dice siempre: "No hay diseños imposibles sino maquetadores sin recursos" , así que vamos a ver como podríamos resolver esta pequeña putadita:

Necesitaremos 6 elementos HTML para definir la estructura, si la caja lleva título podemos usar uno de ellos como encabezado (h2 por ejemplo), de lo contrario necesitamos 6 DIVs, uno para cada esquina y dos para los bordes de los lados ( que deberán crecer a la misma velocidad que crezca el texto):

 El código HTML sería algo así como: 

Usaremos un div "header"  y un h2 para la parte de la cabecera (usando el método de Sliding Doors), dos divs uno dentro del otro,  "center_content" e "inner_content",  para representar los bordes sombreados de la caja y otros dos divs, "footer" y "footer_content"  para la parte del pie.

Ya tenemos la parte fácil, ahora vamos a la CSS:

Tanto la parte del header como la del footer están hechas con la técnica de Sliding Doors que mencionamos antes, es decir, dos imágenes, una muy larga que representa la esquina izquierda y el borde , y la otra que representa la esquina derecha:

Para la parte central utilizaremos dos imágenes, con el borde sombreado justo que usaremos de fondo posicionadas a izquierda y derecha con un repeat-y.

Para que los bordes queden superpuestos en los dos contenedores centrales, debemos de darle un margen negativo de 2px al contenedor interior, de lo contrario los bordes no encajarían ( esto NO habría que hacerlo para IE6).

El resultado es una estructura TOTALMENTE COMPATIBLE con todos los navegadores de uso cotidiano, ELÁSTICA y sobre la que se puede hacer ZOOM (ya que está maquetada con ems).

Y esto es todo amigos, no se si el resultado ha quedado muy claro (entre otras son las tantas de la mañana) pero todo es cuestión de probarlo y a ver que tal

Tras todo este tiempo he ido incorporando a mi día a día diferentes técnicas de maquetación, me he convertido en una persona más ordenada y he aprendido a afrontar los problemas que se presentan de la mejor manera posible, ¿Qué más se puede pedir?

El problema viene cuando te vas acostumbrando y empiezas a tener vicios, a la vez que tus conocimientos son los suficientes como para pensar o argumentar que lo que haces está bien…pero no siempre es así.

En mi caso lo he tenido bastante fácil, he tenido la suerte de trabajar al lado de Manuel Muñoz y lo que he podido aprender a su lado cada día no está pagado con dinero, pero como no todo el mundo tiene la misma suerte es conveniente marcar algunos aspectos a tener muy en cuenta a la hora de afrontar tareas de maquetación.

Si tenéis curiosidad por saber cuales son esos aspector no os podéis perder los consejos que da Manuel en su blog, y aunque alguno de vosotros pueda pensar que son obviedades, os aseguro que el 80% de los maquetadores no siguen ni la mitad de los puntos…ahí queda eso

Más información: Mamuso.net – Maquetación para desarrollo

Como dice Keko, nanoc es realmente sencillo de utilizar, es es ligero y fácilmente extensible, separa el contenido del diseño y soporta los lenguajes de plantillas más comunes.

Muchas veces nos hemos encontrado maquetando grandes sites, con decenas de páginas en las que muchos elementos se repetían, y la manera más simple de replicar el código es básicamente copiar y pegar de un html a otro. El problema viene cuando hay que realizar cambios concretos y tenemos infinidad de html para tocar…uno a uno.

A muchos les recordará a los includes de php o a las llamadas a los frames que se hacían allá por los 90, la idea es así de simple, pequeñas llamadas a bloques de layout que se carguen en tu html sin tener que repetir el código cada vez que te haga falta colocar el sidebar o o header.

Para que os hagáis una idea de lo que me refiero, esta sería por ejemplo una estructura de layout básica con llamadas a pequeños partials que cargaría los módulos segun nos hagan falta:

 En resumen, os recomiendo probarlo porque realmente vale la pena y no os podéis hacer una idea de como simplifica las cosas en el día a día.

Podéis encontrar más información aqui:

Tutorial sobre nanoc de Bomberstudios
Grupo de nanoc en castellano
Manual de nanoc
Nanoc en Rubyforge
Grupo de nanoc en inglés
Feed de nanoc by Feedburner

Agradecimientos a Keko Ponte, Manuel Muñoz, Ale Muñoz y Jorge Correa

No obstante he tenido que usarlo ya que entre los nuevos cambios de la versión 3 está la nueva (correcta) interpretación de los contenedores (divs), y eso había que verlo.

Semánticamente hablando hasta ahora un div ha sido tratado como un bloque, al igual que lo puede ser un párrafo, y esa ha sido la tendencia al maquetar a lo largo de los últimos tiempos, pero ahora la cosa cambia.

Al igual que en Safari, Firefox 3 interpreta un div como un elemento que puede o no ser tratado como bloque, es decir, no lo será a menos que tu se lo indiques especificamente, esto supone un paso adelante pues nos acercamos a un futuro común entre navegadores, en teoría Safari, Firefox 3 e Internet Explorer 8 renderizarán de forma similar…al menos en teoría.

Cambiando totalmente de tema, lanzo esta pregunta porque igual soy yo pero..¿Os gusta como ha quedado el nuevo Firefox visualmente? a mi nada!, eso si, en Mac va muchísimo más rápido que anteriores versiones, y la carga de memoria ha bajado considerablemente.

1. Errores de Auto

body {
margin: 0 auto;
padding: 0 auto;
background-color: #fff;
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, Serif;
font-size: 10pt;
color: #666;
}

Es muy común el uso de margin: 0 auto para centrar los bloques, pero esto no funciona con el padding.

2. Errores con !important

.imagelist ul li a img.lastfmimage {
height: 100px; !important
}

Generalmente te habrás sentido tentado de hacer uso del !important para ahorrarte quebraderos de cabeza o como dice Eric Meyer, porque eres un vago . En realidad en un código bien estructurado no es necesario la inserción de !important, ademas de ser es una mala costumbre.

3. Errores con "none"

#content{
  padding:none;
  margin:none;
  background-color:none;
}

El uso del "none" es muy común, hay una tendencia a querer usarlo para eliminar o resetear los valores, pero esto es un error. Las valores de padding y margin solo admiten literales como valores, por lo que habría que usar 0 en vez de none.

Para las propiedades de background, se debe reemplazar el valor de "none" por "transparent".

4. Errores de color

a:hover{
  text-decoration:underline;
  color: grey;
}

"grey" no es un valor válido para un color, los valores válidos para la propiedad color son, o bien un código RGB o bien un código de color válido, es decir:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow

Quizás la opción más clásica sea la de usar la técnica FIR (Fahrner Image Replacement) consistente en un span adicional, al que se le da en la hoja de estilos el valor de display:none, pero desde hace tiempo existen ya multitud de técnicas de reemplazo, vamos a hablar sobre aquellas que se acerquen más a una accesibilidad total. 

Método Phark

Este método ofrece una solución sin span adicional usando la propiedad de text-indent sobre el contenedor de la imagen, el problema es que no muestra nada en el caso de desactivar imágenes.

     <h3 class="phark">
        Texto a reemplazar
    </h3>

    /* css */
    .phark {
        text-indent: -99999px;
        background: url(imagendereemplazo.jpg);
        height: 25px;
     }

Método Gilder/Levin  + Shea Enhancement

Posiblemente el mejor método de reemplazo de imágenes, funciona perfectamente en todos los casos, incluso al desactivar las imágenes. Solamente tiene un fallo, y es que no oculta el texto descriptivo en el caso de ser las imágenes transparentes.

Además de eso se ayuda de una mejora consistente en añadir el title en el contenedor de la imagen de reemplazo, lo que facilita la lectura por parte del lector.

    <h3 class="gilder" title="Texto descriptivo">
        <span></span>Texto a reemplazar
    </h3>
   
    /* css */
    .gilder {
        width: 329px;
        height: 25px;
        position: relative;
        }
    .gilder span {
        background: url(imagendereemplazo.jpg)no-repeat;
        position: absolute;
        width: 100%;
        height: 100%;
        }

Pues para vosotros flohos™ del mundo, aqui tenéis Izzy Menu, que es basicamente un creador online de menús, de tal forma que con darle un par de opciones como si lo queréis vertical, horizontal, ancho, imagen de fondo o borde, os genera en un plis el menú completo con el html y css para que lo incluyáis en vuestra web, ala, más fácil imposible señores. 

Vía | Xyberneticos

Enlace | IzzyMenu 

• Carlos Mantero
• Andrés Milleiro
• Pepe Ortuño

Lo primero que tenemos que hacer es crear el contenedor con los enlaces de los tres personajes que tengo aquí arriba:

    <div id="fotitos">
    <img xsrc="http://farm3.static.flickr.com/2177/2039281697_e36ed0be8b.jpg">
    <ul>
    <li class="mantero">
    <a xhref="http://www.carlosmantero.com">
    <span class="note">Carlos Mantero</span>
    </a>
    </li>
    <li class="milleiro">
    <a xhref="http://www.andresmilleiro.info">
    <span class="note">Andrés Milleiro</span>
    </a>
    </li>
    <li class="pep">
    <a xhref="http://www.fotomurcia.com.es">
    <span class="note">Pepe Ortuño</span>
    </a>
    </li>
    </ul>
    </div>

Una vez hecho esto, tenemos que maquetarlo con CSS, la idea es muy simple, vamos a posicionar los nombres de las notas lejos de la pantalla y cuando hagamos un hover encima de cada uno centramos la etiqueta, veamos como quedaría:

    #fotitos {
    width: 500px;
    height: 375px;
    position: relative;
    font-family: Arial, Verdana;
    font-size: .9em;}
    
    #fotitos ul {
    margin: 0;
    padding: 0;
    list-style: none;}
    
    #fotitos a {
    position: absolute;
    width: 100px;
    height: 120px;
    color: #000;
    text-decoration: none;
    border: 1px solid transparent;}
    
    #fotitos .mantero a {
    top: 160px;
    left: 15px;}
    
    #fotitos .milleiro a {
    top: 150px;
    left: 100px;}
    
    #fotitos .pep a {
    top: 130px;
    left: 150px;}
    
    #fotitos a:hover {
    border-color: #d4d82d;}
    
    #fotitos a .note {
    position: absolute;
    bottom: -3em;
    width: 8em;
    padding: 0.2em 0.5em;
    background-color: #ffc;
    text-align: center;
    left: -3000000px;
    margin-left: -5em;}
    
    #fotitos a:hover .note {
    left: 50px;}

Podéis ver como queda en la foto de arriba.

Y es que cuando se presentan ciertas oportunidades no las puedes dejar pasar, este ha sido mi caso.

Desde hoy paso a formar parte de la gran familia de The Cocktail , si hay alguno que no haya oido oir sobre ella, The Cocktail es una de las consultoras mas punteras ( o la mas puntera ) en diseño de interacción, experiencia de usuario y una de las que mas apuesta por el desarrollo agil con Ruby on Rails.

Pero lo mejor sin duda son las personas que hay dentro, lo mejor de lo mejor, algunas ya he tenido el placer de conocerlos ( a otras espero hacerlo pronto ) y desde luego espero poder aprender mucho trabajando junto a todos ellos.

En tres semanas estaré viviendo en Madrid, los que me conoceis sabéis de sobra que siempre ha sido mi sueño vivir allí, ¿ qué mas puedo pedir?.

Echaré de menos a mis amigos de Sevilla, aunque espero poder hacerles visitillas a menudo

Un saludo a todos.

POSICIÓN ESTÁTICA

Creo que este atributo es un poco inútil, ya que es el valor que tiene el parámetro position por defecto. Si no definimos posición, será esta la que aparezca, así que no hace falta especificarla.

Con esto especificamos que el elemento div aparecerá donde lo haría normalmente, a la izquierda y arriba. Un ejemplo para que veais el funcionamiento básico.

POSICIÓN RELATIVA

Esta posición determina la distancia entre la situación de la div y la que tendría que tener por defecto. Esto quiere decir quees como una position:static, pero podemos mover la capa tantos píxeles como queramos hacia cada lado, usando para ello las etiquetas top, right, bottom y left.

Con el anterior código he movido la capa número uno 50 píxeles hacia abajo y hacia la derecha. Recordad que los números negativos cambian el sentido del movimiento: top:-50px sería moverlo hacia arriba, y left:-50px sería hacia la izquierda. Un ejemplo de posición relativa.

POSICIÓN ABSOLUTA

La posición absoluta anula la relatividad de la posición. En otras palabras: ahora no movemos la capa en relación a la capa superior, sinó que la movemos a través de toda la pantalla.

Este código coje la capa del ejemplo y la coloca a 0 píxeles de arriba y a 0 píxeles de la izquierda. Si fuera position:relative, la pondría en la esquina de la capa en la que se encuentra, pero al ser absoluta la coloca en la esquina de la página. Un ejemplo de esta posición aquí.

Esto pasa porque si no hay una div referida como relativa con el atributo position:relative, el elemento que coje el relative es la pantalla del navegador. Si usamos un position:absolute en un elemento que esta dentro de una div con position:relative, el elemento no se moverá dentro de la pantalla sinó dentro de la caja del div relativo. Ejemplo práctico.

Recordad que podemos aplicar el position:absolute a tantos divs como queramos, mientras estén dentro del div que tiene el position:relative.

FLOATS (FLOTADORES)

Imaginad ahora que queremos hacer un par de columnas y utilizamos una capa relativa, y en su interior dos capas absolutas (una a la derecha y otra a la izquierda). En principio está bien pero, ¿qué pasa si quiero que estas columnas sobrepasen la altura de la capa que las contiene? ¿y si quiero que cada columna tenga una altura distinta? Para eso usaremos los flotadores (floats).

Miradlo en funcionamiento. Por último, quiero añadir que esta situación es incómoda debido a que, si ahora queremos añadir una nueva div abajo, por ejemplo un footer, en este caso dios sabe dónde quedará colocado. Lo normal es que queramos colocarlo en el borde inferior de la columna que llegue hasta más abajo, pero puede que no sepamos cual de las dos será mas alta.

Para que el footer quede a ran de la columna más alta (la que quede más abajo) tendremos que usar el atributo clear:both en el div que haga de footer. Último ejemplo: footer sin el clear:both, y footer con el clear:both.

Via:Edenahp.net