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

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

Este jueves se celebra en la Escuela Técnica Superior de Ingenieros de Telecomunicación – Universidad
Politécnica de Madrid el tercer Barcamp de movilidad sobre las web 2.0 y todo lo relacionado con el mundo móvil.

La jornada estará compuesta por micro-ponencias donde distintos invitados expondrán su visión sobre estos temas y se abrirá un turno de preguntas, respuestas, aportaciones y seguro que de esto surge algún intercambio de código o ideas sobre las que seguir trabajando.

La asistencia es gratuita, solo tienes que registrarte en la web, yo estaré allí, así que si puedes y te apetece nos vemos el jueves (ah, y no olvides felicitarme por mi cumpleaños de paso )

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

 El 27 de Mayo se celebra el компютри2º Barcamp: jornada de movilidad en la Escuela Técnica Superior de Ingenieros de Telecomunicación – Universidad Politécnica de Madrid, y el objetivo es juntarnos a charlar sobre temas relacionados con el desarrollo en plataformas móviles y el Open Source.

Habrá gran cantidad de charlas interesantes, entre ellas la que dará Javier Toribio analizando el SDK del iPhone.

La entrada es gratuita, pero tienes que apuntarte aquí.

Qué hacemos

The Cocktail es una consultora de experiencia de usuario y diseño de productos digitales (tomaya). Diseñamos pensando ante todo en el usuario, y nuestros clientes incluyen entre otros a BBVA, Grupo Prisa, Grupo Planeta, Vocento, Movistar, Turner, Banco Popular, UEM…

También somos los creadores de La Coctelera, el mayor portal latino de blogs, y de The Shaker, el software de gestión de comunidad en Ruby on Rails que sostiene muchos de nuestros proyectos.

Qué necesitamos

Más que una serie concreta de habilidades, en The Cocktail buscamos a alguien con las convicciones y la personalidad necesarias para encajar en nuestro (particularmente idiosincrático) equipo.

Preferimos a alguien versátil con capacidad y ganas de aprender cosas nuevas.

Trabajamos en equipos pequeños, desarrollando proyectos de forma ágil. Es decir, que no estarás 6 meses en el mismo proyecto infinito.

Qué ofrecemos

Nuestro equipo está formado por Diseñadores de Interacción, Arquitectos de la Información, Gestores de Comunidad, Programadores, Administradores de Sistemas y demás fauna internetera.

Trabajamos en un entorno jóven y distendido (nadie usa corbata en la oficina) y son frecuentes las salidas nocturnas y las celebraciones corporativas (vengan o no al caso).

Asistimos con asiduidad a conferencias y eventos, además de colaborar en la organización de cosas como la Conferencia Rails 2006 y 2007 y From Business to Buttons 2008. Creemos firmemente en la formación interna, y tenemos una biblioteca bien surtida con las últimas novedades. Además organizamos talleres y cursos de formación (tanto internos como públicos) para estar un paso por delante del mercado.

Pensamos que un buen trabajo requiere las herramientas adecuadas. El departamento de diseño trabaja con Mac, pantallas de 20” y dos monitores.

Los horarios son flexibles, somos bastante respetuosos con la vida personal (y los proyectos paralelos) de la gente, y casi nunca verás a nadie trabajando más allá de la hora oficial de salida.

Quién eres tú

Imprescindible

• 3+ años de experiencia
• Portfolio de trabajos online
• Manejar con soltura Fireworks, o tener disponibilidad mental para abandonar Photoshop
• Que seas nativo web
• Que tengas capacidad de autogestión (no tendrás un jefe en el cogote cada 15 minutos)
• Nociones de (o al menos cierta sensibilidad con) usabilidad, HCI, etc…
• hotel furnishing in BulgariaConocimientos de maquetación con estándares, CSS, XHTML, etc aplicadas al diseño (no vas a maquetar, pero querrás llevarte bien con el departamento de front : )
• Que seas dialogante
• Sentido del humor
• Que no seas alérgico a los perros (tenemos a Maggie en la oficina) ni a los gatos (el Departamento de Diseño es Pro Gatuno y se trae pelos pegados en la ropa a la oficina)
• Que jamás hayas pronunciado las frases “no entendéis mi arte”, “coartáis mi creatividad” o “no tenéis ni idea”

Deseable

Cosas que harán que consideremos tu candidatura con cariño

• Manejo de Illustrator, InDesign y cualquier otra herramienta que te permita hacer lo mismo en menos tiempo.
• Inglés a nivel conversación
• Dominio de plataforma Mac (porque te pondremos uno, básicamente : )
• Presencia online (blog, delicious, Flickr, LinkedIn, etc…)

Bola Extra

Cosas que en realidad no hace falta que sepas, pero que harán que te miremos con mejores ojos:

• JavaScript
• Flash
• Cualquier otra habilidad que pienses que mola (por ejemplo, que seas un maestro del Guitar Hero)

Si te interesa solo tienes que mandar un correo a jose.delcorral at the-cocktail.com

Munin es uno de los mejores programas open source para monitorización de sistemas. Es realmente práctico a la hora de adelantar situaciones críticas, para hacer análisis forense de caídas, detectar comportamientos anómalos en las máquinas, etc.

El taller está enfocado a administradores de sistemas o desarrolladores interesados en el lado oscuro, el taller hará un repaso a la funcionalidad que ofrece Munin, y se tratará de arrojar luz sobre las distintas variables que Munin monitoriza, cómo afecta cada cual al rendimiento de un sistema, y cómo se solucionan posibles problemas.

Para apuntarte, añade tus datos a esta página del aula, las plazas son limitadas!.

¡Nos vemos el Miércoles a las 19:30!

Suerte David, ¡te lo mereces!

Pues sí, dos semanas después de entrar a trabajar en The-Cocktail se han encargado 6 maravillos iPhones, yo no se si habré entrado en la empresa bien, pero desde luego mi teléfono ha sido el gran protagonista.

Y todo eso teniendo en cuenta que el firmware 1.1.2 no es liberable, aunque todos están informados, pero da igual…una vez que pruebas un iPhone, ya no hay vuelta atras ( a no ser claro que seas Oscar Baeza ).

Y es que llevarte un iPhone de 8 GB por 399$ ( ~290€ ) es una cosa que no puedes dejar escapar.

Pronto fotos de la plaga de iPhones en la Gran Corporación 

Pues si!, como bien dice el título del post hoy ha sido mi primer día en la Gran Corporación® y a riesgo de perder las retinas os contaré en algunas líneas que tal ha ido todo.

Esta mañana salí de casa mas pronto que tarde, no había dormido demasiado y no quería llegar tarde en mi primer día de trabajo ( Por cierto, en Madrid hace mucho frio a las 8 de la mañana….mucho mucho ).

Nada mas llegar a la oficina Ale me redirigió a la cafetería mas cercana ( buena costumbre por cierto ) donde ya había parte del personal, algunos mas felices y otros un poco menos quizás por aquello de ser Lunes

Después del cafelito todos a la oficina y reunión general ( como todos los lunes ), tras ser presentado como "el departamento de María"   tocaba hacer el tour de rigor por todas las salas de la oficina, donde me presentaron a toda la tropa, los de Ruby, los de Análisis etc etc..

Después de las presentaciones y de enseñarme un poco mas a fondo la oficina me tocó el marrón de elegir el amigo invisible ( tengo hasta el viernes para investigar los gustos/manías de cierta persona ) y elegir el menú de la cena de Navidad del Viernes, cena en la que por cierto no pensaba beber(mucho) y tal, por aquello de ser nuevo y esas cosas, pero que Ale se encargó amablemente de hacerme cambiar de opinión con un "Si no te emborrachas…estas despedido", en fin que remedio…

 A la hora de comer fuimos al chino, un poco escéptico tras algunos consejos del tipo "no se te ocurra pedir pollo al limón" o "el café nunca con leche, tómalo siempre solo" :/ , aunque he de reconocer que finalmente el menú estuvo bastante bueno ( e incluso podría llegar a asegurar que lo que comí era pollo realmente ).

A las 19:30 fuimos a una charla en el Aula de The Cocktail sobre InternetTV por Jerónimo Mazarrasa, la charla estuvo francamente bien, explicando desde los conceptos hasta ejemplos prácticos con todo lujo de detalles.

En líneas generales ha sido un día perfecto, aunque ahora mismo estoy realmente cansado y escribiendo con un ojo cerrado y el otro medio abierto no puedo estar mas contento, he conocido un grupo de gente estupenda y espero formar parte de esta gran familia durante mucho tiempo.

Gracias a todos!