¿Cómo sería la universidad ideal?

En Meddia llevamos meses trabajando en el proyecto Universiag10.org desde su conceptualización hasta la programación y diseño del blog, ofreciendo también apoyo en la dinamización 2.0. Uno de los resultados de ese trabajo ha sido esta infografía sobre los resultados en twitter del hashtag propuesto #uniideal. Podéis ver en la siguiente imagen las respuestas a la pregunta “¿Con qué palabra definirías la universidad iberoamericana ideal?” (clicar en ella para ampliarla).

(Diseño de Meddia, junto con Elena Sanz, de Ciencia Digital)

All Creative Work Is Derivative

All Creative Work Is Derivative és el nom d’aquest vídeo tan original que ens mostra com gran part dels treballs creatius deriven o es basen altres treballs fets amb anterioritat.

Si observem la història de l’art occidental és normal veure cicles que es repeteixen, moviments que s’alimenten de moviments anteriors, recursos temàtics re-utilitzats, etc. El que més impacta d’aquest vídeo és que aquest cop no només se’ns mostra com l’art deriva en el temps, sinó que també se’ns mostra com l’art deriva entre diferents cultures d’indrets geogràfics molt distants. I les semblances poden arribar a ser sorprenents.

Una de les lectures que també podem fer és com la humanitat al llarg de la història ha progressat construint sobre el treball que altres van iniciar amb anterioritat, apilant coneixement sobre coneixement sense lleis de propietat intel·lectual que dificultessin aquest flux.

Drets d’autor, patents, copyright… Avui dia aquest excés de cel, no perjudica el progrés?

Un CMS no és el remei definitiu

Fragment extret de l’e-book Professional web design:

Molts dels clients amb els quals treballem confien cegament en sistemes de gestió de continguts o content manager system (CMS). Aquells que no disposen d’un pensen que solucionarà els seus problemes de gestió web, i els que en tenen gemeguen perquè no ho fan!

És cert que un CMS pot aportar molts beneficis. Aquests inclouen:

• reduir els obstacles tècnics d’afegir continguts,
• permet a més persones per afegir i editar contingut,
• facilita actualitzacions més ràpides,
• i permet un major control.

No obstant això, molts CMS són menys flexibles del que als seus propietaris els agradaria. Aquestes no compleixen amb les exigències canviants dels llocs web perquè únicament són una plataforma. Administradors web també es queixen que els seus CMS són difícils d’utilitzar. En molts casos, això es deu al fet que els que l’utilitzen no han tingut la formació adequada o no l’estan utilitzant amb suficient regularitat.

Finalment, un CMS pot permetre la fàcil actualització del contingut, però no garantir que el contingut s’actualitzarà o fins i tot que la qualitat de contingut serà acceptable. Molts llocs web basats en CMS encara tenen el contingut antiquat o mal escrit. Això és degut a que no s’han destinat prou recursos per a l’administració del web.

Si busques un CMS per resoldre els teus problemes de manteniment del lloc web, et decebrà.

Aquest text ha estat escrit per i per a dissenyadors, però el que al final intenta explicar és que un CMS només és una eina que per si sola no fa res, i que mal utilitzada acabarà perjudicant al seu propietari. Cal un esforç per part del propietari per:

• actualitzar els continguts amb regularitat,
• actualitzar correctament els continguts (com per exemple, una correcta escriptura),
• i fer servir el CMS adequat per a una determinada funció (com per exemple Wordpress per a un bloc)

A més a més voldria afegir un punt important, la creativitat (usabilitat i disseny)

Usabilitat, disseny, i plataforma tecnològica (la programació pura i dura) avui dia tenen el mateix nivell d’importància ja que els continguts d’un web han de ser fàcilment llegibles i trobables, el web ha de ser atractiu, i tot ha de funcionar correctament. Si un d’aquests elements falla es crea un desnivell. Tenim un problema.

Mitjançant un CMS podem fer servir una plantilla de disseny (template o skin) preconcebuda, però el fet que centenars d’altres webs facin servir el mateix template farà que el nostre web perdi exclusivitat, excel·lència. I si volem modificar la usabilitat i el disseny per que l’estil sigui més personal, la creativitat sempre s’haurà de supeditar al CMS (en aquest cas, la plataforma tecnològica). Tornem a tenir un desnivell que, en aquest cas, no farà que funcioni pitjor, però sí que limitarà la usabilitat i el disseny. L’eficàcia comunicativa minvarà.

No voldria semblar que estic demonitzant els CMS. Com ja he dit abans, els CMS són molt útils en situacions i moments molt determinats, però haurem d’estudiar si realment són la solució definitiva al que realment necessitem, pensant tant en el moment actual com en el futur del nostre web.

El poder ocult d’un regal

Fa alguns dies va aparèixer un article molt interessant al bloc de Seth Godin que parlava del valor afegit que té fer un regal. Lluny del tipus de transaccions a les que estem acostumats, en les quals tu em dones diners i jo et presto un servei, Godin ens parla del valor de regalar: quan regalem adequadament es produeix un desequilibri, i fruit d’aquest desequilibri es crea el moviment que empeny a un nou equilibri. Aquest moviment crea connexió.

Aquesta és sens dubte una de les claus del màrqueting actual, 2.0, digital o com li vulgueu dir. Oferir alguna cosa a canvi de res de vegades té efectes retroactius.

I a més a més, com diu en Godin: “…donar un regal fa sentir bé”

Primeres impressions

Uns investigadors de la Carlton University ens donen aquest consell: “Un web net, professional i que carregui ràpidament pot assegurar que la nostra primera impressió sigui bona“.

La primera impressió és vital, i més en el món web, on molts dels hàbits (bons i dolets) dels nostres interlocutors es veuen molt més accentuats que en d’altres canals. Només cal veure la taula per adonar-nos del temps de captació o primera impressió que dedicaran els usuaris finals del nostre web, cartell, tríptic, etc.

En el cas del web es radicalitza bastant, ja que només tindrem una oportunitat per convèncer als usuaris que es troben de pas per a que es quedin al nostre web durant més estona.

Naturalment hi entre en joc moltes variables, com per exemple la proporció entre text i imatges, l’interès de l’usuari pels continguts o l’atractiu visual. Com diu en Joan Costa, l’ull busca el plaer.

Fonts: Diseñar para los ojos / @loveday

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

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.

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.

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.