divendres, 25 de desembre del 2009

Bones pràctiques web: Vol. 3

Taules
Les taules es composen d’un conjunt de files i columnes de cel•les que es poden omplir amb text i gràfics. Les taules les utilitzarem per organitzar i presentar informació de manera estructurada, però mai per a maquetar continguts.
Justificació de les taules
S’aconsella posar sempre títol i resum de la taula.
Alineació: Selecció de l’alineació de la taula esquerra, centre o dreta.

Imatges
Les imatges reforçaran els textos i donaran “color” a la pàgina, amenitzen la lectura i aclareixen conceptes.
Les imatges les utilitzarem per a completar la informació dels textos.
Es desaconsella totalment l’ús de imatges de fons ja que dificulten la lectura i distreuen a l’usuari.
Text alternatiu: Breu descripció de la imatge. S’aconsella afegir sempre el text alternatiu per les imatges.

Enllaços
Els enllaços són parts de text les quals porten a una nova ubicació. En el llenguatge Web són molt importants, ja que són la essència de Internet.
Quan volem posar un enllaç, cal que ens assegurem que l’usuari el reconeixerà. Tant si és un enllaç intern, un enllaç extern o un enllaç a un document descarregable, cal que escrivim un text d’enllaç el suficientment descriptiu.
Cal evitar les expressions del tipus “Fes clic aquí”
Es recomana que el nombre de paraules que formin l’enllaç no superi de 4 paraules i que aquestes estiguin en una mateixa línia.

Imatges com enllaços

Utilitzar imatges com enllaços de vegades pot resultar molt més intuïtiu per a l’usuari. Tot i això no s’aconsellen ja que és possible que:
  • l’usuari no entengui la relació imatge – significat
  • l’usuari no entengui la imatge com un enllaç
  • la càrrega de la pàgina pot ser més lenta
  • que es dificulti la visibilitat d’alguns elements
continuarà...
Read more ...

dissabte, 19 de desembre del 2009

The Smashing Book

Després de mesos esperant ja tenim aquí l'Smashing Book.
Els d'Smashing Magazine han publicat un llibre molt interessant i actual sobre el món web.
300 pàgines sobre:
  • Interfícies web
  • CSS
  • Tipografia
  • Usabilitat
  • Optimització de llocs web
Molt recomanable
Read more ...

Bones pràctiques web: Vol. 2

2ª Part: Recursos Disponibles

Títols i subtítols (encapçalaments)
Els títols són un element crucial en la estructuració de cada pàgina. Tant des del punt de vista de codi com de presentació, la seva utilització estableix la jerarquia de continguts i facilita la navegació, així com la indexació en els cercadors.
Els encapçalaments ens ajudaran a dividir paràgrafs i a introduir conceptes.

Els encapçalaments aporten molta informació en poques paraules i ens permetran estructurar els continguts en unitats informatives més petites que en facilitaran la lectura.
Amb l’ús d’encapçalaments podrem organitzar el text. Ens ajudaran a estructurar millor els textos, donen mides de lletra proporcionals a la importància de cada part, millorem la lectura en dispositius adaptats i la presencia en cercadors.
Useu encapçalaments per a introduir conceptes, idees, paràgrafs, en els textos.

Llistes i enumeracions
Sempre que ens sigui possible és correcte la presentació de la informació en format de llista (numerada o de pics) amb apartats i subapartats. Les llistes es llegeixen millor que els paràgrafs.
Exemples de llistes:
  • Llistes d’enllaços
  • Llistats d’adreces

Frases i Paràgrafs
Cal usar frases senzilles, no cal que es compliquin innecessariament les frases.
Un paràgraf, una idea. Pensem si podem dividir en dos un paràgraf de 6-8 línees.
La norma ens aconsella:
  • Títols: 8 paraules o menys
  • Frases: de 15 a 30 paraules
  • Paràgrafs: de 40 a 70 paraules
  • Planes i documents: 500 paraules o menys

Justificació del text
Un recurs que facilita la lectura del text en les pantalles d’ordinador és l’alineació a l’esquerra, no obstant això, es disposa de diferents funcionalitats de modificació del paràgraf, però si n’escollim una, cal que la fem servir igual per tot el web.


Negretes, cursives i subratllats
Utilitzar la negreta i la cursiva sobretot per les paraules clau i també per les parts més importants del text.
  • Negretes: ens serveixen per remarcar i destacar informació d’interès i paraules clau.
  • Cursives: estilísticament per donar èmfasi a una paraula o frase, i també per mots especials.
  • Subratllat: molt utilitzats en el llenguatge web per mostrar enllaços.
Usarem aquests recursos per a destacar paraules clau en els textos.

continuarà...
Read more ...

dijous, 17 de desembre del 2009

Bones pràctiques web

Bones pràctiques a l'hora d'introduir continguts en un web, seguint criteris d'accessibilitat i usabilitat.

En les pantalles d’ordinador els textos es llegeixen més lentament i amb més dificultats que els textos impresos. Val a dir també, que els usuaris d’Internet cada cop són més impacients i escanegen la pàgina en comptes de llegir-la.
Escanejar la pàgina vol dir fer un escombrat a la pantalla d'esquerra a dreta i de dalt a baix, per això en ocasions es parla de la zona calenta de la pàgina (dalt i a l'esquerra), perquè és el primer punt on l'usuari posa la seva mirada per a iniciar la lectura o visió del web.
És per això que la distribució dels continguts dins d’una plana web, cal fer-la seguint unes petites normes o bones pràctiques que ens ajudaran en la tasca de maquetació dels continguts i també facilitaran la lectura i la cerca de conceptes en el nostre web per parts dels usuaris.

1ª Part: Escriure per al web
Recomanacions per tal d’escriure els continguts pel web:
  • Els continguts cal que siguin informatius, concisos i ben estructurats.
  • Utilització d’un llenguatge senzill, accessible, no tècnic.
  • Agrupar la informació relacionada, per a ajudar a l’usuari a trobar la informació interessant d’un determinat assumpte més fàcilment.
  • No abusar de les majúscules, dificulta la lectura de les paraules.
  • Cal tenir especial cura amb l’ortografia i la gramàtica.
  • Brevetat
continuarà...
Read more ...

dimecres, 9 de desembre del 2009

Google Chrome Extensions

Per fi extensions pel Google Chrome
En destaquem:
Firebug
Web Developer (mini)
Cooliris
FlashBlock
Extensions de les aplicacions de Google més populars:
  • Picassa
  • Gmail
  • Google Wawe
  • Google Docs
  • Google Reader
i d'altres RSS, música, facebook, twitter, etc.

Interessant fer-hi una ullada.... per si hem de deixar de banda el Firefox....
Read more ...

dijous, 3 de desembre del 2009

Tendències en disseny web pel 2010

Recull de tendències en disseny web pel 2010 via WebDesignerLedger

Disseny:
  • Tipografia
  • Encapçalaments i logos
  • Estil retro
  • Estil minimalista
  • La importància de les imatges
Estructura
  • Estructura tipus revista (magazine)
  • Perspectives
  • Monopàgina
Tecnologia
Scripts que ens converteixin les fonts en imatge
Read more ...

Recursos Vol. 30: Inspiració!

Read more ...