L’any passat en aquest mateix bloc us parlàvem de Chris Milk, un fotògraf i director americà que ha fet que hi hagi un abans i un després en els videoclips, creant experiències interactives des dels navegadors.
En aquest temps, hem anat veient webs en HTML5 que buscaven l’experimentació. Per una banda, són la constatació de que ja no ens cal Flash per a fer coses espectaculars i interactives en un lloc web i, per l’altra, que hi ha molt camp per recórrer i investigar.
Avui us proposem 4 webs on podeu veure cap on va aquesta experimentació, però segur que vosaltres mateixos també ens podeu recomanar altres webs on la creativitat aflora i que ens deixen amb la boca oberta.
Tanmateix tingueu en compte que alguns dels webs que us proposem només es visualitzen bé amb navegadors d’última generació com, per exemple, Google Chrome.
The exquisit forest és un experiment artístic creat per Chirs Milk i Aaron Koblin i produït per Google i la galeria Tate Modern.
Quan entrem a aquest exquisit bosc ens trobem amb tot d’arbres i branques, en què cada fulla correspon a una animació. A cada arbre hi regeixen unes normes establertes pel seu creador i, a partir d’aquí, nosaltres mateixos podem crear una animació – amb una potent eina gràfica – que en publicar-la esdevindrà una nova fulla. O també podem simplement veure les animacions que han fet els demés.
Les possibilitats són infinites i ja hi ha feines extraordinàries que es poden veure a la secció theater o algunes també són exposades a la Tate modern.
Aquest web et deixa conduir pel famós circuit de Fórmula 1 Yas Marina d’Abu Dhabi. L’interès d’aquest web rau en què s’ha utilitzat HTML5 per a presentar informació en forma de diapositives d’una manera original. Segons expliquen a la revista .net (número 237), s’ha convertit una imatge de 4 metres d’ample, que pesava 1.4 Mb, en 3000 línies de codi SVG, la qual cosa ha reduït el pes en més d’un 20 per cent. L’optimització també és un element a tenir en compte!
Vlog.it és un lloc web que recull 313 vídeos de YouTube i Vimeo que té com a preferits el seu autor, Marco Rosella, i que es carreguen de manera aleatòria i amb animacions amb SVG (Scalable Vector Graphics). El resultat és espectacular i molt visual. Si voleu saber com està fet, podeu llegir-vos aquest apunt.
També podeu veure el web personal del seu creador, una altra meravella de la interacció i el disseny web, en què a mesura que movem l’scroll ens anem apropant, fent zoom, a les diferents seccions.
I, finalment, l’HTML5 també ens obre les portes a una nova manera d’explicar les coses o de fer storytelling. Recentment us hem parlat de d’altres webs en HTML5 que també expliquen històries com ‘The Good Man‘ o ‘Jess & Russ‘.
Clouds over Cuba és un documental interactiu que explora noves formes narratives, en què es combina una línia de temps amb uns capítols i una informació addicional que l’usuari es pot anar guardant per a consultar més tard.
El lloc web està fet amb javascript, HTML5 i tecnologia web socket i ha guanyat alguns premis en el món del disseny web. La navegació està orientada a l’usuari, optimitzant-ne la seva experiència i la facilitat d’ús. El web també està pensat perquè s’hi pugui navegar des de qualsevol dispositiu mòbil. Podeu veure més informació tècnica de com s’ha creat al web de thefwa.com, en què va ser escollit millor web del mes d’octubre passat.
Oh, què dieu, que no en teniu prou?!? Podeu visitar també aquests altres webs:
Quan parlem de color, un altre aspecte a tenir en compte és la relació entre el color del text i el color de fons, perquè l’acte de llegir no suposi un esforç ni una dificultat per a l’usuari. Determinades combinacions poden dificultar enormement la lectura, mentres que d’altres poden ajudar a fer-la més plaent.
Des del punt de vista de l’accessibilitat, les WCAG 2.0 especifiquen, en la directriu 1.4.3, la ràtio que ha de tenir el text, de manera que sigui fàcilment llegible per tothom.
Per ajudar-nos a complir amb la normativa disposem d’una sèrie d’eines que ens poden ajudar a calcular aquesta ràtio i fer un web més accessible:
És important l’interfície gràfica d’una pàgina web, però també n’és la Usabilitat i Accessibilitat d’aquesta. Una pàgina web pot ser molt bonica visualment, però si costa trobar el menú, l’usuari pot abandonar la pàgina en sentir-se fustrat al no poder complir el seu objectiu. A més, si la web no és apta per ser llegida per persones amb alguna discapacitat visual per exemple, no és accessible.
És per això que aquests dos termes són importantíssims a l’hora de crear una pàgina.
Accessibilitat web: permet que totes les persones, independentment de les seves capacitats tècniques o físiques, puguin utilitzar correctament una interfície.
Usabilitat web: una interfície és usable quan l’usuari pot aconseguir un objectiu concret. Com menys temps passi per aconseguir l’objectiu en qüestió, més usable és.
Eines per millorar l’accessibilitat
Els punts més importants a l’hora de crear un lloc accessible són:
Utilitza l’atribut “alt” de les imatges per descriure-les
Organització de la pàgina coherent: utilitza sempre l’estructura <h1>, <h2>, <p> ordenadament. Les llistes amb <ul> i <ol>.
Sempre definir els estils en CSS
Definir clarament què ens trobarem en un enllaç: utilitzar per exemple “Visiti el nostre portfoli” en compte de “Cliqui aquí”.
Utilitza l’atribut “lang” quan es defineixin diferents idiomes.
Eines per millorar la usabilitat
Per millorar la usabilitat d’una pàgina web has de tenir en compte:
Dissenya una navegació fàcil i intuïtiva
Escriu continguts resumits, esquematitzats. Els dos primers paràgrafs han de contenir la informació més importants.
Utilitza títols, llistats, paraules amb negreta per diferenciar i marcar la importància dels diferents punts del contingut.
Utilitza les tècniques SEO: inclou els keywords, title i description.
Aplica, si és possible, la norma dels 3 clicks: l’usuari ha de poder accedir a tots els continguts en no més de 3 clicks.
A continuació, us mostrem un vídeo de com una persona cega navega per diferents interfícies, i explica perquè és important que una pàgina web sigui accessible i usable.
Està molt bé tenir una pàgina web de la teva empresa i indicar la seva adreça a les targetes de l’empresa, als contractes, als uniformes… Ara bé, i si el client perd la targeta amb el número de telèfon de la teva empresa i no sap com trobar la pàgina web per buscar-lo? L’opció més generalitzada és anar al Google (el 96% de les cerques del país són fetes amb Google).
És per això que avui indicarem algunes tècniques de SEO per augmentar el posicionament de la nostra web.
SEO: Optimització per a motors de cerca, Search engine optimization en anglès, és un procés que s’utilitza per augmentar el posicionament web en la pàgina de resultats dels motors de cerca. D’aquesta manera, també es poden aconseguir més visites.
SEM: Search Engine Marketing, en anglès, és també el procés per augmentar el posicionament, però en aquest cas, a través d’enllaços patrocinats. És a dir, es realitza un pagament al motor de cerca perquè la nostra pàgina web aparegui en els primers resultats.
Tècniques SEO
Redacció de continguts i correcta estructura de pàgina
Sembla obvi, però és important una redacció de continguts correcta amb la utilització de paraules clau que identifiquen la teva empresa. L’estructura de la pàgina, ha de seguir tots els estàndards web i ha de ser ordenada perquè els motors de cerca puguin llegir-la més fàcilment.
Optimització i tècnica de la pàgina:
Utilitzar paraules clau als títols de la pàgina (a les etiquetes <h1>, <h2>…)
No utilitzar frames
Utilitzar títols (<title>) i etiquetes metas (<meta>) diferents en cada pàgina
Crear un Mapa del Lloc visual per l’usuari, un en XML per als cercadors i un robots.txt
Oblidar-se de la tecnologia Flash
Els arxius de Flash (.swf) són complicats per la indexació als cercados, tot i que ha millorat, segueixen sent prioritàries les pàgines web fetes amb codi estàndard.
Actualitzacions, continguts dinàmics
Els cercadors indexen amb més freqüència les pàgines que canvien els continguts.
Utilitzar un seguiment de resultats Google Analytics és una eina molt complerta que et permet estudiar les estadístiques de les visites que arribin a la teva web. Es poden realitzar informes i determinar si s’ha aplicat correctament les tècniques de SEO.
Aquesta setmana s’ha presentat l’iPhone 5 i, com cada vegada que Apple fa una presentació, ha semblat que el món s’hagués d’aturar. No s’ha aturat, no. Però tal com passa a cada keynote han sortit els enamorats de la poma cantant les virtuts del nou producte i els detractors dient que no n’hi ha per tant.
He parat bé les orelles i he sentit de tot: he escoltat que les presentacions, des que les fa Tim Cook, han perdut màgia i que ja no tenen l’encant que tenien quan les feia el gran Steve Jobs. I també he sentit a dir que, en fer un dispositiu més llarg, es perdia en usabilitat ja que el polze, el dit gros de la mà, no pot arribar a dalt de tot de la pantalla. I és clar, a alguns els ha faltat temps per pronosticar com serà l’iPhone 10!
També he de dir que jo no sóc d’Apple. Si més no en el sentit religiós que algunes persones li atorguen. Però aquesta setmana m’he trobat amb aquesta paròdia de l’iPhone 5 i m’ha fet gràcia. He de reconèixer que és bastant freak i que la cançó és americana al 100%, però treu llenya a l’assumpte i fa mofa a això que tant ens preocupa: si Apple pot seguir essent la millor sense l’Steve Jobs.
És habitual que els dissenyadors i els programadors i, en general, tota la gent que ens dediquem al món del disseny web, utilitzem un munt de manuals i que llegim habitualment articles, ja que la nostra feina requereix estar permanentment informat.
Fa uns dies us deixàvem la lectura seleccionada per “A List Apart” per a passar l’estiu entretinguts llegint, però com que sabem que l’ànsia per aprendre no s’acaba mai, hem fet una selecció d’ebooks de diverses temàtiques relacionades amb el món web, que es poden trobar gratuïtament a la xarxa.
En aquest llistat trobareu llibres que només estan disponibles online i que no es poden descarregar. En la majoria de casos, podreu utilitzar Readability o l’extensió dotepub.com per passar-ho al vostre llibre electrònic.
Esperem que el recull us sigui d’utilitat. Bona lectura!
