Humanstxt, la web por y para humanos

humanstxt

Web de Humanstxt

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 :)

jQuery: fixedTo plugin para posicionar elementos

plugin fixedTo

jquery.fixedto.min.js

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 :)

Fuentes en web ¿Con cual te quedas?

Cufón, Google webfonts, Typekit, Fontsquirrel

Cufón, Google webfonts, Typekit, Fontsquirrel

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 : )

CSS3: Transformaciones en 2D

Mientras esperamos a la llegada definitiva de la versión 3 de CSS, no puedo evitar ir trasteando las nuevas propiedades, y esta vez le he echado el ojo a “transform” y “transform-origin”.

CSS3 transformaciones

CSS3 transform

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 :)

Meme: Yo confieso que soy fan de…

Yo confieso que soy fan de...
Flickr: Yo confieso que soy fan de…

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.