Text enlloc d’un logo mitjançant el CSS text-indent

“text-indent” estableix la tabulació de la primera línia de text d’un element. La tabulació es pot indicar mitjançant qualsevol de les unitats de mesura definides per CSS 2, incloent els percentatges.

Amb la propietat text-indent podem amagar el text, per exemple, d’una capa, i colocar-hi una imatge o logotip amb un link com a imatge de fons. Dit d’una altra manera: podem substituir un logotip per text pla, però el que visualitzarem serà únicament el logotip.

<style type="text/css">
h1 a {
   display: block;
   text-decoration: none;
   width: 128px;
   height: 128px;
   bottom: 0px;
   background: url(mozilla-icon.png) no-repeat left top;
   text-indent: -99999px;
}
</style>

<h1><a href="http://www.mozilla-europe.org/ca">Mozilla</a></h1>

La solució de text-indent és més enrevessada que la típica imatge amb etiquetes alt i title, però és millor de cara al SEO.

Js emulador de CSS3 per a Internet Explorer 5, 6, 7 i 8

ie-css3.js permet a Internet Explorer identificar els selectors de CSS3. Només s’ha d’incloure la seqüència de comandaments a les pàgines HTML i començar a utilitzar els selectors CSS3 als fulls d’estil.

<script src="DOMAssistantCompressed-2.7.4.js" type="text/javascript">
</script> <script src="ie-css3.js" type="text/javascript"></script>

A la pàgina de Keith Clark tenim informació ampliada: coses a tenir en compte, explicacions sobre el funcionament, descàrrega del javascript…

Sens dubte és una molt bona eina per mirar endavant i començar a perdre la por al jou que representa IE6 pel que fa al disseny i desenvolupament web (i al nostre creixement interior com a dissenyadors i desenvolupadors web).

Claves del Nuevo Marketing

Buscant informació sobre màrqueting digital he trobat aquesta joia. Es tracta del llibre Claves del Nuevo Marketing. Escrit per diversos autors, es pot trobar a les llibreries i també a la xarxa de forma gratuïta.

Publicat originàriament en format digital, el llibre repassa els canvis que s’estan experimentant ja s’han experimentat dins el màrqueting, i dona consells i solucions cap a la comercialització digital dels nostres productes.

Una joia, sens dubte.

Article relacionat: Tienes 5 Segundos

Google Browser Size

Google Browser Size és una pàgina/utilitat que ens permet de visualitzar diferents amplades de finestra i el percentatge de visitants que fan servir aquestes amplades.

Per exemple: la xifra “90%” vol dir que el 90% dels visitants tenen, com a mínim, aquesta o una mida més gran de finestra de navegador.

Es tracta d’una pàgina molt útil per dissenyadors, arquitectes de la informació, desenvolupadors, etc. ja que permet saber si un contingut important queda fora, total o parcialment, del camp de visió dels visitants.

El Google Wave: entre el fòrum, el wiki, el correu electrònic i l’escriptori web

És aquesta l’eina que estàvem esperant per evitar les confuses tirallongues de mails a l’hora de decidir diferents temes? Ens permetrà tenir reunions online?

Wave (vídeo) és l’última sorpresa de Google. És tan sorprenent que fins i tot costa de definir. És obra dels germans danesos Lars i Jens Rasmussen, que idearen Google Maps i que asseguren que canviarà internet; cau a mig camí dels fòrums de sempre, els wikis, el correu electrònic, la missatgeria instantània i, potser, fins i tot dels escriptoris web. De moment no és obert a tothom, sinó únicament als qui hi són convidats. Però ho podeu sol·licitar.

D’entrada, quan accediu a Google Wave, veureu una interfície que recorda la del GMail, amb una barra d’eines a i els contactes a l’esquerra i un cos central on s’apleguen els missatges, anomenats ‘wave’, ona en anglès. Però Wave va molt més enllà del correu electrònic. Cada ona és com una mena de correu electrònic col·laboratiu, instantani, que poden construir a la vegada qui l’ha començat i tothom a qui va adreçat.

En això s’assembla als wikis: tothom que forma part d’una ona la pot escriure, retocar i comentar. Però, a diferència dels wikis, no cal actualitzar la pàgina per veure els canvis fets pels altres usuaris. De fet, és tan immediat que es pot veure com van apareixent les lletres a mesura que els altres les escriuen o les esborren; cada lletra que s’escriu s’envia a la xarxa. És, doncs, ideal per fer documents o textos entre uns quants internautes.

També us pot resultar útil per a fer pluja d’idees, compartir fotografies, treballar en grup en general o, fins i tot, jugar. Però aquesta interactivitat immediata encara va més enllà, amb les extensions, aplicacions en javascript que podeu instal·lar a la interfície, podeu ampliar les possibilitats de Wave. Podeu editar mapes de Google maps, fer videoconferències, rutes de viatge, etc. I qualsevol amb prou coneixements tècnics pot fer extensions noves.

Els germans Rasmussen diuen que Wave serà el successor del correu electrònic, que el deixarà obsolet. Però, ara com ara, no és fàcil de fer servir. I no perquè no sigui intuïtiu, sinó perquè té tantes possibilitats que costa d’arribar a fer-se la idea de com treure’n profit. Per això fins i tot se n’ha publicat una guia força completa que us podeu descarregar (pdf, en anglès).

Com maquetar newsletters compatibles

Tot i que el butlletí electrònic (newsletter) és ja un veterà del màrqueting digital, gràcies a un ús intel·ligent pot seguir sent una eina de difusió molt efectiva.

Bàsicament, un butlletí electrònic és codi HTML enviat per correu electrònic. Per tal de maximitzar la compatibilitat amb els diferents gestors de correu cal seguir algunes pautes. En quant a maquetació és com recular uns quants anys enrere, però és la millor manera d’assegurar-nos que el butlletí es veurà bé en la majoria de clients de correu:

1. Maquetació

• Fer servir taules, i evitar les capes el màxim possible.
• Incorporar atributs HTML a les taules sempre que es pugui (p.e. border=”0″ valign=”top”…)
• Aplicar els atributs, mides o estils directament als TD.
• Aplicar a tots els TD la mida d’amplada que els correspongui.
• Feu servir target=”_blank” en els enllaços.
• Les etiquetes IMG han de fer servir l’atribut border=”0″, i han de tenir els atributs HTML d’alçada i amplada.

2. Estils CSS

• Aplicar els estils en línia a través de l’atribut style=”", dins el mateix codi, i no dins l’etiqueta HEAD.
• Mirar d’evitar les imatges de fons. És millor situar-les dins el codi com a IMG.
• Si es fan servir imatges de fons, no s’ha de fer a través de CSS, si no del defenestrat atribut HTML background=”"
• Evitar l’ús d’estils incompatibles. Normalment són aquells que es fan servir per posicionar o moure capes: float, display, overflow…

Podeu trobar aquesta informació molt més ampliada i en anglès a ReachCustomersOnline.

Imprimir el listado de los archivos de una carpeta: PrintFinder

Comienzo una serie de posts con utilidades varias, frikis y no tanto, que quizás en algún momento nos puedan servir para tareas muy concretas.

Quizás nos hemos encontrado alguna vez con la necesidad de enviar un mail con una carpeta comprimida en un zip, en la que incluimos varios archivos, y queremos listar esos archivos en el mismo mail, para especificar el contenido de la carpeta y añadir algún comentario si es necesario sobre algún archivo concreto.

La primera opción es la de hacerlo a mano, volviendo a teclear uno a uno el nombre de los archivos en el mail. Sin embargo, buscando un poco encontré PrintFinder, un programita sólo para Mac (hasta donde yo sé), que con sólo arrastrar sobre él  la carpeta cuyos archivos queremos listar, nos muestra una previsualización de la lista (perfecta para copiar y pegar directamente donde queramos) y además, nos permite exportar esta lista en varios formatos: .txt, .doc, .pdf, .html… La lista puede incluir los archivos de las subcarpetas o no, según lo definamos.

Para mí es una pequeña utilidad que me ahorra mucho tiempo cuando envío archivos, y además, me permite documentar mejor todo lo que voy enviando.

Editado para añadir algunos enlaces a programas similares en windows (no los he probado):

• Directory Lister v0.9.1 : Éste parece el más completo, por lo que he leído antes era gratuito, sin embargo en la página oficial ahora es de pago. El link que dejo es a una página desde la que parece todavía se puede descargar la versión gratuita.
• Folder-To-TXT 1.01
• FileLister

Atenció usuaris de WordPress 2.8.4!

S’ha descobert un problema greu de vulnerabilitat que afecta a Wordpress 2.8.4 i les seves versions anteriors, segons es comenta a Desvaríos informáticos. Aquest bug pot arribar a desembocar en una caiguda del servidor que l’allotgi, degut a una sobrecàrrega de la CPU.

Solució al problema:

1. Busqueu l’arxiu “wp-trackback.php” (línia 45)

$charset = $_POST['charset'];

2. Substituïu-la per:

$charset = str_replace(",","",$_POST['charset']);
if(is_array($charset)) { exit; }

Tant nosaltres com tots els blocs que han reportat aquest problema us recomanem que apliqueu aquesta solució tan ràpid com us sigui possible.

Software gratuito: la oferta del día

Me acabo de encontrar con una curiosa página que donde podemos encontrar gratis programas de pago, de forma totalmente legal y funcional (no son demos, sino programas completos, registrados legalmente). El “truco” es como la oferta del día de un supermercado: cada día hay una “oferta” distinta, es decir, un programa completamente gratis. Junto al programa aparece el tiempo que queda para que te lo puedas descargar, en plan cuenta atrás.

Por lo que he visto no son programas “de los grandes” sino más bien pequeñas utilidades, pero que a veces nos pueden solucionar una tarea concreta. Por ejemplo, el día 20 de octubre la oferta era el “PDF to PowerPoint converter”.

Es una buena estrategia para captar clientes, ya que puedes llegar al sitio atraído por la oferta del día y acabar comprando otro programa (el precio suele ser entre 10 y 40 dólares). La mayoría son para Windows, eso sí, así que los usuarios de Mac tendremos que conformarnos sin ofertas.

Adéu al problema de velocitat de Flash en Mac

El problema de la lentitud del Flash Player en Macintosh és un greuge històric que fa molt de temps que dura. Per sort hi ha una manera molt senzilla de solucionar-ho.

Aneu a MacintoshHD/Libreria/Internet Plug-Ins i elimineu l’arxiu flashplayer.xpt

La diferència es nota.

Gràcies pel recurs, David