Hace un par de meses se encendió una pequeña bombilla sobre la cabeza de @cssbarcelona, la idea de colocar en cada web un pequeño archivo donde se indique quiénes son las personas que han realizado esa web.

Hoy en día encontramos en la mayoría de las webs un archivo llamado robots.txt donde le decimos a los robots de los buscadores cuales páginas queremos indexar, cuales no, y demás parámetros de configuración.

Pero si cada web está hecha por y para humanos ¿Por qué no incluir un pequeño archivo, nada intrusivo, nada pesado, dedicado a nosotros?

Y así nació humanstxt, una iniciativa un estándar en el que han trabajado varias personas y al que cada día se unen más humanos atraídos por las ventajas que supone frente al poco esfuerzo que conlleva.

En su web oficial, podemos descubrir a los miembros del h-team, a quienes recomiendo sigáis sus pasos pues son grandes profesionales y mejores personas.

Colocar un humans.txt en una web no significa que seamos los propietarios de ella, si no que hemos puesto nuestro granito de arena (diseñadores, programadores, SEOs, redactores, etc) para que saliera adelante.

Para informaros un poco mejor sobre cómo y por qué utilizarlo, podéis visitar la web oficial donde está todo genial explicado y además tienen diseño nuevo que merece la pena ver.

Por mi parte, ya tengo mi humans.txt creado :)

Hace un par de semanas necesité maquetar un elemento de forma que permaneciese siempre fijo en la parte inferior de la página, no me llevó mucho, ya que se resolvía con:

elemento{
   position:fixed;
   bottom:0;
}

Pero una vez lo tenía listo lo ví tan simple, que necesitaba darle un poco de vida.
Me puse manos a la obra, y después de unas horas surgió el plugin fixedTo.

El funcionamiento no se limita al css escrito antes:
- Puedes indicar la posición de la ventana en la que quieres colocar el elemento, si es en un lateral, se gira automáticamente.
- Siempre permanece centrado a los laterales y recalcula su posición al redimensionar la ventana, para no perder el centro.
- Incluye la opción de hacer que el elemento se muestre / oculte o que permanezca siempre visible.

Aunque antes de explicar más, lo mejor es que veáis un ejemplo online.

Recordaros que el plugin trabaja sobre jQuery, por lo que necesitamos tener la librería enlazada para que funcione:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Es el primer plugin como tal que publico, y aunque aún tengo que mejorar el código, he querido compartirlo por si hay alguien a quién le pueda servir, sobra decir que me encantaría recibir consejos de quienes hayan realizado ya alguno :)

No es la primera vez que escribo un post sobre el uso de diferentes fuentes en páginas web, pero recientemente he hablado sobre esto con varias personas y me veía en la necesidad de volver a escribir sobre ello y organizar mejor mis pensamientos. Así que allá voy:

Como norma general, la fuente que indiquemos en nuestra web, tiene que ser una fuente que tenga instalada en su ordenador la persona que acceda a ella. Por eso, estamos limitados a una lista de fuentes muy corta.

Pero por suerte para los diseñadores todos, hoy en día podemos ampliar esta lista de dos formas:

1 – Con el uso de JS combinado con Flash o HTML5.

Con la ayuda de algunas llamadas a javascript podemos conseguir localizar el texto al que queramos aplicar una fuente distinta a las habituales y reemplazar éstos por elementos flash o canvas.

Un ejemplo sería la plataforma Cufón.

Para trabajar con este plugin debes disponer de una fuente en formato .ttf, .otf o .pfb y de su licencia de uso. Desde la propia aplicación web seleccionas la fuente de tu ordenador y se generará automáticamente un archivo de javascript para incluir en tu web.

Cufón trabaja solamente con selectores generales (h1,p,etc), pero nos da la opción de utilizar selectores más específicos (h1.destacado,p:first-child,etc) si incluimos alguno de los frameworks con los que es compatible: jQuery, MooTools, Dojo, etc.

Y aunque es un método fácil y rápido para incluir cualquier fuente en nuestra web y que se vea correctamente en todos los navegadores (IE6 incluido), le encuentro unas cuantas desventajas:
– La propiedad “line-height” funciona sólo si utilizamos un DOCTYPE strict.
– Con mucho texto a transformar, ralentiza la web.
– No permite seleccionar y copiar el texto.

2 – Con la propiedad @font-face de CSS3

Cuando apareció la versión 2.0 de CSS, vino con la propiedad @font-face debajo del brazo aunque poco pudimos disfrutarla ya que los navegadores no se ponían de acuerdo con los estándares a utilizar y en la versión 2.1 dieron marcha atrás y la retiraron hasta el actual CSS3.

Lo que nos permite esta propiedad es poder instalar cualquier fuente en nuestra web, digo instalar porque previamente tendremos que tener el archivo de la tipografía en nuestro servidor y a través de @font-face indicamos la ruta y el nombre con el que la llamaremos. Un ejemplo de uso, sería:

@font-face {
    font-family:'Nombre de la fuente';
    src:url('/ruta/fuente.ttf'), /* safari, firefox */
 	    url('/ruta/fuente.svg') format('svf'), /* iphone, ipad */
    	url('/ruta/fuente.eot') format('eot'), /* internet explorer */
    	url('/ruta/fuente.woff') format('woff'); /* ultimas versiones navegadores */
    	font-weight:normal;
    	font-style:normal;
}
h1 { font:normal 1.2em/1.4em 'Nombre de la fuente',sans-serif; }

Si queremos que sea compatible con varios navegadores, debemos incluir varios formatos para la misma fuente. Os dejo una lista de navegadores y los formatos de fuente que soportan (visto en webfonts.info):

Safari: .ttf, .otf
iPhone/iPad: .svg (hasta iOS 4.1), .ttf (desde iOS 4.2)
Opera: .ttf, .otf, .svg
Internet Explorer: .eot, .woff (desde IE9)
Firefox: .ttf, .otf, .woff (desde 3.6)
Chrome: .ttf, .otf, .woff (desde 6)

El Web Open Font Format (.woff) está en proceso de normalización como recomendación de la W3C y se espera que llegue a ser el único formato de letra reconocido por todos los navegadores.

Hay varias empresas que nos ofrecen la posibilidad de utilizar este método a través de una galería de fuentes instaladas en sus servidores, algunos ejemplos son:

- Google webfonts
- Typekit
- Fontsquirrel

Como conclusión final me quedo con @font-face. Aunque nos lleve algo más de tiempo implementarlo, si se puede hacer con css no veo la necesidad de incluir javascript y abordar el frontend con elementos innecesarios.

Y vosotros ¿Con cual os quedáis?

Actualizo: cssbarcelona me pasa el enlace a una encuesta que hizo en twitter sobre este tema: http://twtpoll.com/r/zxwmti , @font-face se queda en cabeza : )

Con transform podemos modificar elementos de varias formas:

1. Transladar el elemento a otra posición:

elemento{transform:translate(a,b);}

2. Escalar el elemento:

elemento{transform:scale(a);}

3. Rotar el elemento:

elemento{transform:rotate(a);}

4. Sesgar el elemento:

elemento{transform:skew(a,b);}

5. Deformar el elemento:

elemento{transform:matrix(a,b,c,d);}

Por defecto, la mayoría de los navegadores asignan como punto de origen de las transformaciones el centro del elemento (50% 50%), pero podemos modificar este punto con la propiedad transform-origin:

Poniendo, por ejemplo, el punto de origen en la esquina superior izquierda:

elemento{transform-origin:0 0;}

Como aún no es compatible esta propiedad de CSS3 con los navegadores actuales, existen unas cuantas alternativas para que functione en todos los navegadores (IE6 incluido), pero hay que tener en cuenta que si las utilizamos ahora mismo nuestro código no validará.

En firefox: -moz-transform / -moz-transform-origin
En Safari / Chrome: -webkit-transform / -webkit-transform-origin
En Opera: -o-transform / -o-transform-origin

Para hacerlo compatible con Internet Explorer, nos complican un poco más, por defecto nos pone de punto de origen la esquina superior izquierda y no nos deja modificarla y solo podemos transformarlo con el filtro Matrix, que nos deja deformarlo de cualquier forma, pero es algo más complicado, aunque he encontrado un generador online que nos puede servir de ayuda.

Los modelos de filtros serían:

- En Internet Explorer 8:

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11,M12,M21,M22)";

- En Internet Exporer 6 y 7:

filter:progid:DXImageTransform.Microsoft.Matrix(M11,M12,M21,M22);

Si preferís verlo en directo, he creado una página con ejemplos de transformación 2D, espero que lo veáis más claro :)

Juanjo me envía este meme (podéis leer el suyo aquí), para que confiese 3 marcas de las que soy fan.. así que allá voy..

1º- Fan de Apple. No lo puedo evitar, se me antoja todo lo que sacan.. aunque me gustaban más los modelos blanquitos.. los iMacs G4 que bonitos eran.. ais!

2º- Fan de Taschen. Esta editorial es genial, libros buenos, bonitos y baratos, sobra decir más.

Y por último.. pero no menos importante.. “redoble Tino“..

3.- Supermegafan de Starbucks. Adoro sus cafés hipergrandes, calentitos, con nata por encima y un toque de chocolate en polvo.. sólamente he ido 6 veces (las tengo contadas) pero el día que viva en una ciudad en la que haya un Starbucks, creo que me voy a arruinar XD

Y una vez confesadas mis debilidades en cuanto a marcas, paso el relevo a:

- @mianmaro
- @dbeltra
- @martinpulido (meme)

¿Alguien más se atreve a contarnos 3 marcas de las que sea fan? :D

Actualizo: Acabo de ver en el blog de Santi que el meme inicial fué este, así que puesto queda.

Es la 1 de la madrugada, he pasado todo el día oyendo conferencias sobre diseño y aún así estoy en el ordenador a estas horas, y es que lo tengo tan reciente que quiero apuntarlo todo antes de que se me olvide..

Empezamos el día con la masterclass de Adobe, donde en hora y media nos explicaron las novedades de las nuevas versiones CS5. Muchas herramientas por destacar, las que más me llamaron la atención fueron:

* Illustrator: La herramienta anchura y los modos de dibujo.
* Photoshop: Rellenar según el contenido.

* Acrobat: La herramienta portafolio y el hecho de que los PDF puedan reproducir flash incluidos en ellos.
* Premier: Ahora con render a tiempo real y ya se puede importar y exportar archivos .avi y final cut, también el complemento mocha que permite el rastreo de una figura dentro de un video.
* Dreamweaver: Integridad con Joomla!, WordPress y Drupal y la vista en vivo de los archivos .php, igual que la opción de detectar los ficheros vinculados. Adobe Browserlab, para comprobar la compatibilidad en distintos navegadores.
* Flash: Los textos fluidos entre varios cuadros de texto, las nuevas propiedades físicas (fuerza y potencia) para la herramienta huesos y la facilidad de insertar ActionScript con los fragmentos de código.

Después de la primera masterclass hubo una pequeña presentación al MAD MMX, donde nos mostraron el vídeo de créditos realizado por los chicos de Physalia Studio, y seguidamente ellos mismos nos contaron cómo lo realizaron. Muchas horas de trabajo, construyeron un sistema de travelling doble, trabajaron con escáneres, con la videocámara de la ps3 y un software open source.
La verdad que transmitieron muy buen rollo y sobre todo sabiendo que sólamente han pasado 4 años desde que se juntaron y comenzaron a crear vídeos tan alucinantes cómo este: Timelapsus.

Gaby Castellanos nos contó de una manera original los mandamientos del social media, nos reveló que el primer influencer de la historia fué Jesús y nos mostró una serie de videos de campañas virales que han tenido éxito. Los videos fueron estos:
* Boda bailada con la música de Chris Brown.
* Guantes rosas contra el cáncer.
* Greyson Chance cantando Paparazzi de Lady Gaga.
* Total eclipse of the heart (Versión literal).
Y en cuanto a los mandamientos, destacaría:
* Debemos dedicar tiempo, dinero y talento, no porque sea algo online no tenemos que invertir dinero.
* Hay que estar siempre donde esté la gente, si las redes sociales cuentan con millones de usuarios, debemos estar allí.
* Si nos critican, no hay que ignorarles, sino aceptarlo y ofrecer soluciones. Nunca borrar comentarios.
* Hay que creer en nuestro empleados y aceptar sus opiniones y aportes.
* Nunca plagiaremos, ya que todo se sabe.

Como ponentes extranjeros pudimos disfrutar de la compañía de tres grandes profesionales del diseño, por suerte para mí había traductora y me pude enterar de lo todo lo dicho. Aunque no pude tomar notas, pues tenía que estar concentrada en la traducción para no perderme, por lo que os lo cuento de forma más resumida.

Ross Lovegrove es un diseñador industrial enamorado de la forma, muchos de sus diseños se basan en una única pieza desde la que “nace” el elemento. También está muy coincienciado con el medio ambiente y las energías renovables, siempre buscando que sus diseños se fusionen con la naturaleza. Lo que no me convenció mucho fué su diseño de coche-farola, pero quién sabe, cosas más raras se han visto…

Mario Lombardo es un director de arte de los más galardonados, a la par que profesor en la Universidad Bauhaus. Nos mostró fotografías y videos de su vida, de su estudio, de su trabajo diario.. y me sorprendió descubrir que realizaba la mayoría de los diseños de forma manual, sin ordenador. Le gusta mezclar conceptos, tipografías tejidas, páginas de una revista simulando un albúm de sellos, textos con hojas cortadas de una planta,…

Y por último, Kyle Cooper, diseñador gráfico especializado en créditos de películas. Juega con las tipografías integrándolas con las escenas y si no pudiera conseguirlo, las coloca de manera que no estorben. Ha realizado los créditos de películas cómo Se7en, Spiderman o Sherlock Holmes, entre muchas otras. Me gustó ver esa rama del diseño gráfico, ya que se sale un poco de lo común.

Y poco más que contaros, en general me han gustado mucho todas las ponencias, cada una tenía su toque y creo que ha merecido la pena -con creces- asistir. Y lo mejor de todo es que mañana hay más :D

Si queréis ver fotitos del eventos, he subido unas pocas a flickr: MAD MMX.

No sé vosotros, pero yo tengo una manía que si no escribo sobre algo, no me conciencio.. así que toca escribir sobre las Hogueras, que ya huelo la pólvora por la calle y aún no me he enterado de nada.

El caso es que el año pasado ya me las perdí (aunque no me arrepiento de ello) y el anterior no salí, por lo que este toca disfrutarlas. Yo ya me he averiguado de los eventos que más me interesan, os los cuento por si alguien se anima..

A destacar:
- La plantà será el viernes 18 a las 11:00h y la cremà la noche del jueves 24 de junio.
- El desfile folklórico es algo que no os podéis perder, será el miércoles 23 a las 20:30 y pasará por Alfonso El Sabio y La Rambla.

Mascletàs: La primera será el sábado 19 de junio a las 14:00 en la Plaza de los Luceros, a partir de entonces todos los días a la misma hora y mismo lugar, hasta la noche de la cremà.
Este año las veré desde el trabajo, una segunda planta de la misma plaza, comprobaremos la resistencia de los cristales xD
Aunque ya llevamos 3 días con mascletàs nocturnas, el viernes 18 es la última, en Luceros a medianoche.

Conciertos:
Con Cadena 100 en la Zona Volvo: Hombres G y Efecto Pasillo (18), Celtas Cortos (19) y Rosana (23) para estos hay que recoger invitaciones.
Con Cadena Ser junto a C.C. Panoramis: Sobre estos no encontré las actuaciones exactas aún, he leído que vienen La oreja de van gogh y El koala entre otros, creo que con saber eso tenemos bastante XD Cuando me entere mejor actualizaré el post.

Fuegos artificiales: Desde el viernes 25 hasta el martes 29 a medianoche podremos disfrutar del concurso de fuegos artificiales en la playa del Postiguet. Ver fuegos artificales tumbado en la arena es lo mejor.

Y vosotros, ¿Preferís huir de Alicante para estas fechas o estáis deseando que lleguen? :P

Hace tiempo que pasó de moda quedar con los amigos para ver las fotografías de la fiesta del día anterior, también nos libramos de que nos invite algún familiar a su casa para ver las fotos de su viaje a Roma.. ahora lo que se lleva es ver las fotografías en el muro de tus amigos.

Justo por eso, porque cuando queremos ver fotos tenemos que entrar a Facebook, me ha encantado la posibilidad que ofrecen desde la imprenta Nuevo Zorita, pues envíandoles el enlace al albúm que queramos nos lo enviarán impreso en menos de dos semanas.
El caso es que yo ya tengo mi álbum impreso y voy a contaros mi opinión:

No me gusta:
- Las tapas son muy clásicas, por un lado me gusta el estampado del logo de facebook con relieve y en tinta dorada, pero por otro la cubierta clásica de las encuadernaciones me parece aburrida.
- Las ampliaciones más grandes pierden calidad. Aquí hay que tener en cuenta, que aunque subamos imágenes de muy buena calidad a facebook, éste nos las redimensiona y pierden calidad, por lo que no podemos pretender imprimirlas a grandes tamaños y que queden perfectas.

Me gusta:
- La flexibilidad al elegir el formato del álbum.
- La calidad de los materiales, con hojas de más de 200 gramos y una muy buena calidad en cuanto a colores e impresión en mate.
- El tiempo que ahorras al enviar directamente el enlace del album, no tienes que utilizar ningún programa adicional para maquetar el albúm con lo que te ahorras complicaciones.

En general me ha gustado mucho la idea y el álbum en sí, creo que es un detalle muy gracioso para regalar y para quienes cómo a mi, nos gustan poder tocar las fotos y verlas sin tener que estar frente a una pantalla.

¿Vosotros también queréis uno?
Pues tenéis que enviar un email a la copisteria Nuevo Zorita desde su formulario de contacto, indicando el enlace al album de fotos con permiso público, ellos se bajan las fotos y realizan la impresión digital de las mismas y la encuadernación. Podéis indicar el tamaño que queráis y el color de las tapas.

Si al final os decidís acordaos de comentarme que tal la experiencia :D

Estos días Google está presentando bastantes novedades, y una de mis preferias es el Google Font Directory.

Nuestro querido Google recopila 18 fuentes (seguro que irá añadiendo más) para que podamos implementar, de manera sencilla, en nuestra web.

Ya conocíamos otros métodos para poder incluir nuevas fuentes (y olvidarnos de la Arial y la Times por un ratito), pero siempre utilizando una tecnología adicional (llámese Javascript). Con esta nueva opción simplemente tenemos que añadir el enlace a la hoja de estilos que nos indican, especificando la familia de la fuente a utilizar:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

E indicarla en el css como si de una fuente predeterminada se tratase:

h1 { font-family: 'Droid Sans', arial, serif; }

¿Sencillo, verdad? Por mi parte estoy encantada! :D

Os dejo el enlace a la guía rápida y deciros que es compatible con Chrome, Firefox 3.5+, Safari 3,1+ e Internet Explorer 6+.

Para ello he creado una función ayudándome de la librería jQuery, tened en cuenta que para que os funcione tenéis que tener esta librería enlazada en vuestra web.

La explicación:
Lo que hace la función es seleccionar todos los enlaces que tengan asociada la clase “cargar”. Cuando se hace click sobre uno de éstos se anula el enlace para que no nos lleve directamente a la página y pueda ejecutar la función tranquilamente. Luego, recoge la url a cargar del atributo href y el nombre del div en el que se cargará del atributo name del enlace. Por último, carga la dirección dentro de éste.

Espero que os sirva al menos como base, ya sabéis que podéis / debéis trastearla y adaptarla a vuestro proyecto.

La función:

$("a.cargar").live('click', function(event){
     event.preventDefault();
     var url = $(this).attr("href");
     var div = "#"+$(this).attr("name");
     $(div).load(url);
     return false;
});

El html:

<a href="formulario.php" title="Formulario" class="cargar" name="formulario">Contacto</a>
<div id="formulario"></div>