Recursos del buen maquetador [Volumen 1]
Siempre digo que tengo que escribir un pequeño post con todos los recursos que suelo usar cuando trabajo, soy demasiado vago para meterlos en delicious y muchos los tengo por ahí guardados o listas de correo.
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
Como dar estilos a tu barras de scroll rapidamente
La idea es simple, tenemos un precioso diseño pero al maquetarlo nos damos cuenta que queda un poco feote con esas barras de scroll de sistema.
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:
Ahora solo tenemos que llamar al elemento de bloque, con overflow:auto, al que queramos dar estilo, si tenemos por ejemplo:
La llamada será tal que así:
$(function(){ $('.lista_enlaces').jScrollPane();});
¡Y eso es todo!
Más información: jScrollPane
De libros va la cosa
Siempre he procurado tener a mano esos libros técnicos que te salvan la vida cuanto te atascas en algo ( y no tienes a mamuso a mano ), y casualmente buscando el otro día algunas técnicas sobre rounded borders acabé en una web que me pareció muy interesante.
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!
63 técnicas distintas para maquetar Rounded Corners
Ni una, ni dos, ni tres, 63 formas distintas para que puedas coger las malditas esquinas de tu precioso diseño y maquetarlas al pixel, atrás quedaron esas tediosas quejas a los diseñadores y sus pobres familias. Cómprelo ahora y se llevará de regalo un equipo profesional para hacer degradados.
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’
Un año trabajando en The Cocktail
Ha pasado ya un año desde que dejara Sevilla y me viniera a vivir a Madrid para trabajar en The Cocktail, y lo cierto es que en líneas generales no me puedo quejar.
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
Maquetar esquinas redondeadas con sombras y degradados
Seguro que más de uno habrá escuchado alguna vez eso de “Dale una vuelta, métele esquinas redondeadas y un par de degradados y quedará mucho más 2.0”
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:
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 :)
Maquetación agil…de verdad
Antes de comenzar a hablaros sobre la maquetación agil y las buenas maneras os hablaré de mi experiencia personal en The Cocktail tras más de ocho meses trabajando junto a lo mejor de cada casa.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
Nanoc, o como hacerte la vida más fácil
Empecemos por el principio, Nanoc es un framework para crear sites estáticos altamente configurable, basicamente simplifica el trabajo de los maquetadores a la vez que ordena y estándariza tu aplicación.
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
IzzyMenu: Creador de menús CSS para flohos™
Ya sabemos que hay dos tipos de vagos, el vago bueno y el vago malo, pero ademas de esos personajes, están los flohos™, que rezan aquello de, a mi me lo das todo mascadito y que solo tenga que hacer dos clicks.
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
Notas al estilo Flickr con CSS
Desde que uso flickr una de las cosas que más me gustan son las notitas que se le pueden poner a las fotos, y últimamente he tenido la curiosidad de ver como se harían mediante CSS, y la verdad es que es muy fácil.
Lo primero que tenemos que hacer es crear el contenedor con los enlaces de los tres personajes que tengo aquí arriba:
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.
