Rich Typography a la web

Independentment del que encara puguin pensar alguns nostàlgics, cada vegada hi ha un major control en el disseny i l’ús de la tipografia.

Al marge de les tipografies tradicionalment utilitzades en la composició de text de les pàgines web, l’ús de tipografia en pantalla s’ha vist limitat a la seva conversió en imatge -com JPG o GIF- o bé, com a molt, mantenint el seu format vectorial en animacions flash.

L’història de l’ús i disseny de la tipografia per pantalla va lligada a l’història de l’edició digital. Des de començaments d’aquest segle, hi ha un canvi d’inflexió respecte a l’ús de la tipografia en pantalla. Si bé fins a finals dels anys noranta les millores en la visualització de les fonts han tingut com a objectiu principal donar resposta a la necessitat de facilitar el treball de composició tipogràfica a la pantalla però per a finalitats que van lligades fonamentalment a l’edició en paper, amb el canvi de segle, gràcies als avenços tecnològics que han permès una major rapidesa en la transmissió de dades i gràcies, també, a la major resolució dels monitors, la tipografia troba a la pantalla un suport en igualtat de condicions al paper.

No serà fins a la introducció en llenguatge HTML de les especificacions que van facilitar la creació de fulls d’estil CSS que la tipografia va començar, encara que tímidament, a jugar un paper determinant en el disseny de l’edició electrònica.
Les anomenades «web-safe-fonts», és a dir, aquelles fonts que es troben disponibles en la majoria dels ordinadors i que han estat el pà de cada dia de qualsevol pàgina web, es convertiran ben aviat en un recurs del passat.

El «tag» @fontface permet utilitzar qualsevol font de repertori, encara que l’usuari no disposi en el seu ordinador d’aquesta font, però nomès ho soporten els navegadors moderns. Existeix una eina online que ens facilita la creació del codi.

Hi han altres solucions comercials com la proposta llançada fa aproximadament un any per la distribuïdora typekit.com o, més recentment, per typoteque.com no són més que solucions intermitges.
Totes dues ofereixen llicències d’ús mitjançant un sistema de subscripció pel qual les fonts no es descarreguen al servidor on s’allotja la pàgina web sinó que els fitxers font es troben en servidors propietat de la distribuïdora i, a través d’un enllaç, la tipogràfia es renderitza directament a la finestra del navegador.

El format WOFF (web open font format), de moment només funciona amb el navegador Mozilla Firefox 3.6, diuen que es el format del futur. WOFF és un format comprimit específicament dissenyat per a la web. Creat per dissenyadors de tipografia i programadors, està cridada a ser la solució més esperada dels últims 4 anys. A més ja s’està treballant en una versió del Firefox que permetrà poder treure el màxim profit de les especificacions de CSS3, obtenint un control molt més gran de la composició tipogràfica a la pantalla.

El futur definitiu de la tipografia en pantalla està molt a prop.

Search Engine Optimization per a WordPress

El posicionament en cercadors o posicionament web és el resultat de la recuperació d’informació a la base de dades dels grans Motors de Cerca d’Internet per l’ús d’algorismes de cerca en el programari.

La tasca d’ajustar la informació de les pàgines que es pretenen fer aparèixer en primeres posicions dels resultats és coneguda com SEO, sigla en anglès de Search Engine Optimization, optimització per a motors de cerca. Consisteix a aplicar diverses tècniques per aconseguir que els cercadors d’Internet situïn determinada pàgina web en una posició i categoria alta (primeres posicions) dins de la seva pàgina de resultats per a determinats termes i frases clau de cerca.

Markus Walter ha creat un document el qual explica molt bé totes les passes per conseguir un bon SEO pel nostre WordPress. El document esta destinat a aquest CMS tan popular, encara que la mayoria de consells son aplicables a tots els webs.

Optimització de PNGs

Com dissenyadors de pàgines web em d’estar familiaritzats amb el format d’imatge PNG, la seva principal característica es la funció del canal alfa (transparències en els píxels). Però també em de tindre en compte aspectes com el pes de les imatges per accelerar el temps de descàrrega de les webs.
Normalment pensem que el no hi han moltes opcions d’optimització de les imatges Truecolor PNG (PNG-24 de Photoshop), i es veritat, no les tenim, però si existeixen algunes tècniques avançades que ens ajudaran a millorar el pes, sense destrossar els nostres PNG’s.

1. Posterització

Això és un mètode conegut de l’optimització d’imatge de truecolor. Busqueu la icona de capes d’Ajustaments en el paleta de Capes i escullir Posterize.
Escollir la quantitat possible més petita de Nivells (normalment 40 és prou) i salvar la imatge:

Original, 84 KB

Posterized, 53 KB

Així és com funciona: la posterització simplement redueix la quantitat de colors, convertint colors similars en un únic, crea així regions de posterizat. Això ajuda a realitzar un millor filtratge de scanline i aconseguir una millor compressió. La desavantatge d’aquest mètode és alternança de color, que és especialment visible si està intentant implementar l’imatge amb un fons d’HTML.

2. Transparència Bruta

Doneu un cop d’ull a les imatges següents:

74 KB

30 KB

Els dos s’han salvat amb Photoshop sense cap mena d’optimització. Fins i tot si feu una comparació de per píxel d’aquestes imatges, no notareu cap diferència. Però per què és la primera imatge 2,5 més gran que la segona?
La resposta es ben sencilla. La primera esta salvada com a imatge RGBA (els valors RGB + el canal Alfa), per tant tindrem els tres canals d’informació de color, més un adicional que es el que crea la transparència, l’Alfa. Amb aquest mitjá es poden amagar tots els píxels on l’alfa tingui un valor 0. Però aquestes dades de RGB encara existeixen i, a més, impedeixen al codificador de PNG a empaquetar i codificar el correctament les dades. Així, que hem de treure aquestes dades ocultes, omplint les zones on afecti l’alfa, d’un color sòlid, com per exemple negre i salvem la imatge.

3. Divisió per transparència

PNG-24, 62 KB

A vegades s’han de salvar imatges en PNG-24 “pesades” a causa dels pocs píxels semitransparents que hi contenen. Podem estalviar Kbs extra si dividim la imatge en dues parts, es a dir, una amb píxels sòlids, l’altre amb els semitransparents. Podem salvar píxels semitransparents en PNG-24, i píxels sòlids en PNG-8 o fins i tot JPEG.

PNG-8, 17 KB

PNG-24, 6 KB

I aquí tenim el resultat:

Abans 63 KB

Després 23 KB

Aquest mètode té un desavantatge obvi: té dues imatges en comptes d’un, que pot ser un inconvenient per utilitzar (per exemple, quan fent una web en CMS).

4. Escala de grisos

Photoshop no pot salvar en escala de grisos un PNG, així que hauriem d’utilitzar OptiPNG després de salvar imatges en blanc i negre.

PNG-24, 8167 bytes

PNG-24 (Escala de grisos d’OptiPNG), 6132 bytes

5. Menys Colors

Això és una alternativa al mètode de Posterització de colors. La Posterització pot canviar dramàticament els colors de la imatge, que és inacceptable si s’ha de barrejar la imatge amb el fons del lloc web. Aquest mètode ens dóna més control sobre color però es limita a 256 colors.

El mètode és bàsicament extreure dades d’imatge de la imatge semitransparent (treure transparència), convertir-lo en un color indexat i aplicar la màscara original.

6. Mès trucs d’optimització

1. Cada optimització ha de començar amb una anàlisi de l’imatge minuciosa. Esculliu la millor tècnica per aconseguir millors resultats a cada imatge.
2. Ser creatiu. Utilitzar aquestes tècniques com un punt de partida per crear els propis mètodes personalitzats d’optimització.
3. Molta gent pensa que PNG-8 sempre es millor que PNG-24 per a imatges amb pocs colors. Però no es aixi, en alguns casos, PNG-24 ens pot donar millors resultats:
   
   PNG-8, 833 bytes

   
   PNG-24, 369 bytes

4. Si estem utilitzant una versió més vella de Photoshop (previ CS3), podem trobar que les imatges de PNG, en l’editor d’imatge, semblin diferents en un Navegador Web. La causa d’aixó es la informació de gamma que es guarda a l’arxiu PNG. El podem treure d’una manera segura amb eines com TweakPNG (Windows només) o smush.it.
5. No utilitzeu el “Salvar Com” per salvar imatges PNG per al web, sino, el “Salvar per a Web”. Per defecte, Photoshop inclou una imatge de presentació com informació addicional a l’arxiu, fent unes quantes vegades més gran l’arxiu del que necessita ser.

Com a exemple final us deixo una demostració real de totes les técniques enumerades aquí, recopilades en un video:

Advanced PNG Optimization from Sergey Chikuyonok on Vimeo.

Mobify

Mobify es una eina online que ens permet adaptar molt còmodament una web per a dispositius mòbils, agendes electròniques o consoles portàtils. Disposa d’una versió gratuïta (no de prova), i dues de pagament amb algunes opcions adicionals.
A part que optimitzar per mòbils millora el posicionament d’una plana web, l’eina ens baixa el pes considerablement per facilitar a les conexions lentes la descàrrega de la pàgina.

Portal de software open source

Codi obert (en anglès open source) es el terme com es coneix el software distribuït i desenvolupat lliurement.
A Alternativeto podem trobar la alternativa “Opensource” del teu software de pagament preferit. Realment molts d’ells no tenen res que envejar als de codi tancat, i com son lliures cada cop evolucionen més i millor.