Sobre este tema se podrían decir muchísimas cosas, pero este post es sólo para presentar un proyecto curioso del que tuve noticia ya hace un tiempo. Se trata de “Personas” del Mit. En principio es una instalación artística, aunque bien podría ser una aplicación para mostrar de forma gráfica lo que en internet se dice de nosotros. ¿Cómo funciona? Muy fácil, escribimos nuestro nombre en la pantalla y rápidamente empieza a buscar las palabras claves con las que estamos asociados. Al final nos lo muestra en un gráfico, por ejemplo resulta que yo soy “online” y “politics”:
La pena es que al estar programada en inglés (la búsqueda palabras clave no tiene en cuenta ningún idioma, por lo que supongo que se realiza por defecto en este idioma) los resultados de las personas que trabajamos en otras lenguas pueden ser muy diversos. Mi gráfica de hace unos meses, por ejemplo, no tenía nada que ver con ésta.
En cualquier caso, lo dicho, se trata de un curioso entretenimiento, que nos hace reflexionar sobre las huellas digitales que vamos dejando.
Pd: en una línea parecida, ya hace años que existe Googlism, una página en la que podemos introducir una palabra -sólo una- (por ejemplo nuestro nombre) y que nos ofrece aletoriamente resultados (en inglés, eso sí) extraídos de google de una forma bastante simpática.
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ó
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.
Ser creatiu. Utilitzar aquestes tècniques com un punt de partida per crear els propis mètodes personalitzats d’optimització.
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
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.
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:
El web www.ves.cat ens permet crear urls escurçades en un portal 100% català. Els que tenim Twitter veiem contínuament com les adreces que afegim s’escurcen de manera que ocupen menys. Va molt bé de cara a no haver d’enviar un xurro de caracters, per exemple.
Lluny del que pugui semblar, aquest és no és un article d’autobombo empresarial, si no un petit exemple de SMO i de com el seu bon (o correcte) ús afavoreix el SEO (Search Engine Optimization).
Segons la Wikipedia, SMO o Social Media Optimization (traduït de l’anglès com “Optimització dels mitjans socials”) és un terme de màrqueting que fa referència a l’estratègia i conjunt d’accions dutes a terme en xarxes socials i comunitats en línia amb una finalitat publicitària o comercial. El terme va ser creat per Rohit Bhargava i degut a la proliferació de llocs socials, el temps que els usuaris passen en ells i els beneficis que aporta en termes de trànsit i posicionament en cercadors ha adquirit una gran rellevància per part d’empreses i experts en màrqueting digital.
El que hi apareix a la següent captura de pantalla és el resultat de la cerca de la paraula “meddia” a Google. No ens enganyem, aquesta cerca no té gaire mèrit a no ser que hi hagi unes quantes desenes d’empreses que es diguin igual que la nostra. El resultat indica clarament, a data de 8 d’agost de 2009, com els social media posicionen la nostra marca en aquest cercador, fins i tot per sobre de la pàgina web de l’empresa.
Google va endreçar de la següent manera els resultats relacionats amb la nostra empresa:
Aplicació de NetworkedBlogs a Facebook, on s’hi llista el nostre bloc.
El posicionament fluctua molt, i avui el resultat no ha estat el mateix que el de fa dos dies (els camins del SEO i de les 200 variables del famós i secret algoritme de Google són inescrutables).
El cas és que un bon (o un correcte) ús de les xarxes socials no implica únicament la presència de l’empresa en aquestes, si no que requereix d’una dedicació, d’actualitzacions continuades o regulars per part dels responsables que l’empresa hagi designat per administrar les seves xarxes socials.
Els usuaris de Linkedin, Facebook, Twitter, etc. són, en molts casos, internautes experimentats. Per aquest motiu no els podrem vendre cap moto únicament aplicant estratègies de màrqueting tradicional dins els nostres perfils empresarials a les xarxes socials, als articles dels nostres blocs d’empresa o fins i tot als nostres butlletins electrònics. Hem de mirar de mostrar-nos de forma natural, sincera i directa, sense publicitat encoberta, i mirant d’oferir alguna cosa a canvi de res.
Si amb això aconseguim captar l’interès i el clic d’algun internauta cap a la nostra pàgina, ja haurà estat un gran triomf.
És el títol original de la que fins al moment ha estat la lectura més estimulant d’aquest estiu: “Si és dolent t’ho recomano” del novaiorquès Steven Johnson. Publicat per primer cop en anglès l’any 2006, La Campana l’ha traduït al català.
Diu la sinopsi: <La tesi d’Steven Johnson contradiu l’opinió generalitzada que la cultura de masses ens està idiotitzant. Segons Johnson tots som cada cop més intel·ligents. I no gràcies al que aprenem a les aules, sinó perquè els mitjans de cultura de masses són cada cop més complexos i per tant exigeixen un esforç intel·lectual cada cop més gran als seus consumidors.
Per avalar la seva tesi Johnson analitza amb rigor –deixant de banda aspectes morals o estètics– l’esforç cognitiu que ens obliguen a fer productes de la cultura de masses com ara els videojocs (demanen decisions a curt termini sense perdre de vista objectius a més llarg termini i ens exigeixen un esforç analític que ens acosta al mètode científic), les telesèries (de trames cada cop més envitricollades) o Internet i ho compara amb l’estímul que rebien els consumidors de productes de cultura popular de generacions anteriors.
Si és dolent t’ho recomano és sens dubte un llibre controvertit, però convincent. I és que fins i tot el lector més escèptic quedarà captivat pels interrogants que planteja. Després de llegir Steven Johnson no podreu evitar mirar una telesèrie, un reality show o un videojoc amb uns altres ulls>.
HTML 5 és la primera gran revisió del llenguatge HTML (Hypertext Markup Language), i es va començar a projectar l’any 2008. Pensat com el següent pas al HTML 4 i el XHTML 1.0 (segons la Wikipedia l’actualització d’aquest últim es va aturar), la versió 5 està pensada com un llenguatge molt més semàntic i més propici pel desenvolupament d’aplicacions web.
Tot i que encara està en procés de desenvolupament, ja s’hi han afegit un bon nombre de noves etiquetes. Per a la majoria d’usos quotidians, aquestes etiquetes substituiran molts dels típics div del nostre codi.
Quins són els fonaments?
El DOCTYPE
El DOCTYPE en HTML 5 és el següent:
<!DOCTYPE html>
No es va optar per <!DOCTYPE html5> per evitar peculiaritats amb IE6, així que finalment va quedar com <!DOCTYPE html>
Petit i significatiu, fàcil de recordar.
Elements estructurals
<header>
Representa la secció de la capçalera.
<nav>
Element reservat per a la navegació principal.
<section>
Element per a una secció genèrica de continguts, possiblement situat entre la capçalera i el peu de pàgina (footer). Té el comportament d’un div si no fos per la separació d’una part del document. Dins hi poden niar altres etiquetes section, a banda de qualsevol quantitat d’etiquetes típiques.
<article>
Etiqueta que ens permet definir un fragment de contingut com a article. Ideal per a blocs o diaris.
<aside>
Element que representa el contingut relacionat amb l’àrea principal del document, expressat normalment per les columnes laterals
<footer>
Secció reservada al peu de pàgina.
El proper 2010 arriba Tron Legacy, la segona part del clàssic del cinema geekTron (1982) …pel·lícula que vaig veure de petit i que em va impressionar bastant. Des de llavors algunes pel·lícules i alguna sèrie d’animació m’han recordat Tron en algun aspecte (El cortador de césped, Matrix, ReBoot…). No recordo si va tenir gaire èxit, però es va convertir en un clàssic de culte que ha estat imitat durant els anys posteriors. A la segona torna a aparèixer en Jeff Bridges (ja és un bon començament, oi?)
Per fer el vídeo promocional de l’Office 2010, la gent de Microsoft s’ha hagut de gratar la butxaca. Tot i això han parit un vídeo de molta qualitat i, a més a més, força divertit.
La creació dels wireframes és una de les primeres passes que cal fer abans de dissenyar un lloc web. El wireframe ajuda a organitzar i simplificar els elements i els continguts dins d’un lloc web, i és una eina essencial en el procés de desenvolupament.
Un wireframe és bàsicament una representació visual de la disposició dels continguts en un lloc web. És un prototip que mostra la ubicació dels elements de la pàgina, com ara la capçalera, el peu de pàgina, el contingut, les barres laterals, la navegació, etc.
També especifica la ubicació dels elements dins d’aquestes àrees de contingut. Si es desitja desenvolupar un web que coincideixi amb exactitud amb les exigències del client i reduir al mínim les revisions del projecte, el wireframing us mantindrà en el bon camí.
Beneficis del wireframing
La creació de wireframes dóna al client, programador o dissenyador l’oportunitat de tenir una mirada crítca a l’estructura del lloc web i permet de fer les revisions amb facilitat en les primeres etapes del procés. El wireframing porta els següents beneficis:
Dóna al client una visió ràpida del disseny del web.
Pot inspirar el disseny i desemboca en un procés creatiu més fluid.
Dona al desenvolupador un panorama clar dels elements que es necessiten per codificar.
Clarifica les accions o funcions de cada pàgina.
És fàcil d’adaptar i pot mostrar la disposició de moltes seccions del web.
Eines per al desenvolupament de wireframes
Dibuixar a mà en paper. Sempre un bon punt de partida per a qualsevol dissenyador. Si s’és molt precís en el dibuix, es pot fer servir com a wireframe definitiu de cara al client.
Sou al bloc de Meddia, cultura i comunicació. Terra Meddia és un espai per exposar idees, exemples, inspiracions, recursos i, naturalment, opinions. Benvinguts!
Lluny del que pugui semblar, aquest és no és un article d’autobombo empresarial, si no un petit exemple de SMO i de com el seu bon (o correcte) ús afavoreix el SEO (Search Engine Optimization).
És el títol original de la que fins al moment ha estat la lectura més estimulant d’aquest estiu: “Si és dolent t’ho recomano” del novaiorquès Steven Johnson. Publicat per primer cop en anglès l’any 2006, La Campana l’ha traduït al català.
HTML 5 és la primera gran revisió del llenguatge HTML (Hypertext Markup Language), i es va començar a projectar l’any 2008. Pensat com el següent pas al HTML 4 i el XHTML 1.0 (segons la 
La creació dels wireframes és una de les primeres passes que cal fer abans de dissenyar un lloc web. El wireframe ajuda a organitzar i simplificar els elements i els continguts dins d’un lloc web, i és una eina essencial en el procés de desenvolupament.
Comentaris recents