dimarts, 23 de desembre del 2008

Llibres d'estils Vol. 2

Continuem amb la segona part del document de Llibre d'estils

Aspectes conceptuals

1. La web

  • Definir el propòsit del web

2. Arquitectura de llocs web

  • Cal definir l’estructura general i la jerarquia de continguts
  • Cal definir els estils interactius i el sistema de navegació
  • Cal definir l’estructura de les pàgines: definició de la retícula base compositiva i composició de continguts a nivell de pàgina.

3. Usabilitat i Accessibilitat

  • Definir els criteris d’ Accessibilitat i Usabilitat que es duran a terme.
  • Definir el validadors de codi i accessibilitat i els tests de usabilitat.

Aspectes tècnics

1. Continguts

2. Disseny

Creació, si s’escau, del Manual de imatge corporativa:

Aquests són els aspectes sobre els que cal incidir i especificar:

  • Sistema de identificació visual:

    Marca: definició del logotip i anagrama que formen la marca. Estructura, proporcions, colors, tipografia original, variants, mides mínimes, etc.
    Sistema cromàtic: definició dels colors corporatius principals i complementaris en diferents sistemes de codificació.
    Tipografia: definició de la/les família/famílies tipogràfica /tipogràfiques i ús de les variants

  • Sistema de suports gràfics:
    Papereria estàndard: paper de carta, albarans, fax, etiquetes sobres, targetes, etc.

  • Sistema de senyalètica:
    Cartells


3. Codificació

  • Definició de la codificació de les pàgines segons idioma, tipus de documents, estàndards, etc.

4. Desenvolupament:

  • Definició de tecnologies utilitzades.
  • Disseny de la Base de Dades

5. Disseny del lloc:

  • Definició de com s’aplicarà la marca (logotip i anagrama)
  • Estils tipogràfics
  • Esquema de colors
  • Elements gràfics. Imatges, icones, fons, elements interactius

Continuarà...

Articles relacionats:
Llibres d'estils Vol. 1
Read more ...

Llibres d'estils Vol. 1

Hola que tal

Vull compartir amb vosaltres un document que vaig fer sobre els llibres d'estils, què són, què s'ha de tenir en compte, tipus de llibres d'estils, etc.

Llibre d'estils
Font: Bedizen

Què és un llibre d'estils?

És un document que recull normes i patrons bàsics relacionats amb l’aspecte d’una interfície per a la seva aplicació en el desenvolupament de noves pàgines dins d’un entorn concret (pàgines web en el nostre cas.)

Perspectives que aborda un Llibre d’estils:

  • Significat: continguts o informació de la plana web: texts, botons, menús, camps de formulari

  • Comportament: com funciona la interfície (validacions de formularis, enllaços)
  • Aspecte: Aparença final: colors, tipografia, disposició dels elements, gràfics


Llibres d’estil en el disseny web.

Pel disseny i desenvolupament web es tindran en compte els següents aspectes:

Aspectes conceptuals

  • La web
  • Arquitectura de llocs web
  • Usabilitat i Accessibilitat

Aspectes tècnics

  • Continguts
  • Codificació
  • Desenvolupament
  • Disseny del lloc
Continuarà...
Read more ...

dilluns, 22 de desembre del 2008

Disseny centrat en l'usuari

La Usabilitat i la utilitat i no el disseny visual, són els que determinen l’èxit o el fracàs d’un lloc Web.
Es tracta de consensuar el disseny gràfic amb la usabilitat, de manera que el resultat sigui fàcil, útil i agradable a l’usuari final.
És el que s’anomena Disseny centrat en l’usuari.

Font: Anivers
El disseny centrat en l'usuari intenta optimitzar la interfície de l'usuari al voltant de com els usuaris poden, desitgen o necessiten treballar, més que no pas en forçar els usuaris a canviar la forma en que treballen per acomodar-se al sistema.
El disseny centrat en l’usuari es caracteritza per assumir que tot el procés de disseny i desenvolupament del lloc web ha d’estar conduit per l’usuari, les seves necessitats, característiques i objectius.
Centrar el disseny en els seus usuaris (en oposició a centrar-lo en les possibilitats tecnològiques o en el disseny gràfic) implica des d’un principi als usuaris: cal conèixer com son, què necessiten, per a què faran anar el lloc web, etc.
La idea és innovar sempre amb l’objectiu clar de millorar l’experiència de l’usuari.
Read more ...

dijous, 27 de novembre del 2008

Com validar l'accessibilitat d'un lloc web: bones pràctiques


Font: Rough Draft


Revisió automàtica

  1. Es recomana validar l’accessibilitat de forma automàtica amb, com a mínim, dos validadors diferents, com per exemple TAW i HERA
  2. Per Firefox existeix una extensió del TAW on es pot validar l’accessibilitat d’un lloc web amb només un clic. Extensió TAW pel Firefox

    Validador d'accessibilitat HERA

    Validador d'accessibilitat TAW

  3. Revisar el codi HTML o XHTML de la pàgina. Validador codi
  4. Revisar el codi CSS de la pàgina. Validador CSS
  5. Navegar per la pàgina amb connexions lentes per comprovar quan de temps triga en descarregar-se la pàgina. Per comprovar el grau de càrrega del web es pot utilitzar la següent eina: PingDom

Revisió manual

Revisar manualment els problemes d’accessibilitat que no poden comprovar els validadors automàtics.
  1. Textos alternatius de les imatges, un validador automàtic ens informarà només de si hi són o no, però manualment es pot comprovar si el text alternatiu es suficientment descriptiu i vàlid.
  2. Provar i navegar per la pàgina amb diferents navegadors i versions, també navegadors de només text o navegadors de veu, des de diversos sistemes operatius, i des de diferents tipus de màquines (telèfons mòbils, PDA’s).
  3. Revisar l’ús del color en la pàgina. Aquest és un altre punt de revisió manual, cal revisar el contrast entre el fons i el text, comprovar que no s’utilitzen color per donar informació, ect.
  4. Navegar per la pàgina amb les imatges deshabilitades.
  5. Navegar per la pàgina amb el so desconnectat.
  6. Navegar per la pàgina amb el Javascript deshabilitat.
  7. Navegar per la pàgina amb els applets de Java deshabilitats.
  8. Navegar per la pàgina amb el CSS deshabilitat.
  9. Navegar per la pàgina només amb el teclat (navegació tabular).
  10. Navegar per la pàgina amb ordinadors vells.
S’aconsella la instal·lació per Firefox de la barra d’eines Web Developer Toolbar
Demanar a persones amb diferents problemes de discapacitat que naveguin per la pàgina, d’aquesta manera podrem comprovar de veritat si la tasca que hem dut a terme és vàlida.
Read more ...

Recursos Vol. 2: Utilitats que ofereix Google

Font: Ambrosia

Algunes utilitats interessants del Google:

Sketchup
Per modelar en 3D, gratuït online

Docs Google
El Google docs ens permet crear online qualsevol document .doc .xls .pdf etc etc guardar-lo al ciberespai, descarregar-lo al nostre pc....

Code Google
És una enciclopèdia oberta y biblioteca de referència sobre el mundillo web.

Si us interessa més coses del Google
  • Gmail: Potser el millor gestor de correu web que existeix
  • Picasa: Àlbums de fotos
  • Talk: El xat de Google
  • Desktop: per fer cerques en el teu ordinador amb la mateixa rapidesa que ho fas amb google
  • Google Chrome: Navegador web
Eines per a webmasters de Google
Read more ...

Recursos Vol. 1: Eines online per a dissenyadors

Hola què tal, benvinguts als recursos

Font: Sunday Morning Garage Sale

ColorBlender: Eina gratuita i online per cercar i crear paletes de colors

QuickRibbon: Generador online de cintes

Flip Title: és una eina online que ens permet escriure un texte cap per avall.
Qualsevol cosa que escriguis es veurà al revés, és molt fàcil de fer anar.
Curiós i recomanable.

Pixlr: és una eina gratuïta online que ens permet la edició de imatges, que pots carregar a l'aplicació des de una URL o des del teu ordinador.
Aquesta aplicació està feta amb flash però no triga gens en carregar i permet treballar amb múltiples imatges sense que l'aplicació es ralentitzi.
Es necesssita el plug in de Flash per fer-la anar.

Fresh Generator: és una generador online de gràfics estil 2.0.

3d-pack: és una aplicació online que ens permet, a partir de imatges que nosaltres mateixos pujem, crear caixes en 3d-box cd-box dvd-box 3d-dvd.
Curiós

Web Graphics Maker: és una aplicació online que ens permet crear grafics com backgrounds, línies, botons, etc. per web.


Vector Magic: eina online que transforma en vector qualsevol imatge.
Read more ...

dissabte, 22 de novembre del 2008

Criteris per avaluar un projecte

Criteris per avaluar un projecte

Una petita guia a l'hora d'enfrontar-se amb un projecte nou

Investigació de l’usuari: investigar el comportament dels usuaris, com pensen, quines preferències tenen, aspectes socials, tecnològics, etc. Aquesta informació s’usarà per a construir un lloc web orientat a ells.

Objectius del web: definir els objectius del nou web.

Definició de la solució tecnològica: definir quines tecnologies s’usaran per a construir el lloc.

Definició dels continguts: identificar quins continguts són de interès per a l’usuari i quin és el millor format per a representar-lo.

Arquitectura de la informació i interacció: definir l’arquitectura de la informació i la navegació.

Disseny gràfic: realitzar el disseny gràfic (portada, interiors, llistats, estils...).

Programació: desenvolupar el lloc web.

Generació de contingut: definir qui serà el responsable de generar els continguts un cop el lloc web sigui públic.

Gestió del projecte: La gestió del projecte és un punt que és vigent durant tot el desenvolupament.

Read more ...

divendres, 21 de novembre del 2008

Recursos i serveis web gratuïts que ofereixen altres webs. Vol. 1

Hola que tal, us presento una petita cerca sobre serveis web o mashups: es tracta de la creació d’un lloc web o aplicació que utilitza continguts de més d’una font per a crear un nou servei complet.
Per a que sigui útil i rentable cal afegir valor més enllà del que ofereixi el propi servei (o API).
Així dons ens trobem exemples com Panoramio que amés dels mapes ofereix la possibilitat de geoposicionar les imatges.
My Strands.TV utilitza els vídeos de Youtube però el seu valor és el sistema de recomanacions.


Aspectes legals a tenir en compte
A Espanya cal tenir en compte la la LOPD i la LSSI-CE. També hi ha continguts que la seva distribució és legal al país proveïdor de l’API, però no al país on s’està construint l’aplicació.

Serveis que podem trobar
  • Mapes
  • Viatges
  • Fotos
  • RSS
  • Compres
  • Vídeos
  • Notícies
Continuarà...
Read more ...

dimecres, 22 d’octubre del 2008

El disseny universal

El disseny universal, o disseny per a tots, és un concepte relativament nou que moltes vegades es confon amb el concepte de disseny accessible, encara que l’accessibilitat web va estretament lligada amb el disseny universal, es pot dir que el concepte de disseny universal és molt més ampli.
El disseny universal, inclou:
  • accessibilitat del producte
  • com es ven el producte
  • la imatge del producte
De manera que estigui a l’abast i pugui captar un major nombre de consumidors.
Accessibilitat i usabilitat són dues paraules i conceptes que estan molt lligats i poden fer que un producte (web) funcioni millor que un altre.

Principis del disseny universal

Igualtat d’ús: El disseny ha de ser fàcil d’usar i adequat a tothom independentment de les seves capacitats i/o habilitats.
Flexibilitat: El disseny s’ha de poder adequar a un rang ampli de preferències y habilitats individuals.
Simple i intuïtiu: Fàcil d’entendre amb independència de la experiència, els coneixements, les habilitats o el nivell de concentració de l’usuari.
Informació fàcil de percebre: El disseny ha de ser capaç d’intercanviar informació amb l’usuari amb independència de les condicions ambientals (hardware, connexió) o de les capacitats sensorials de l’usuari.
Tolerant a errors: S’han de minimitzar les possibles accions fortuïtes o accidentals que puguin tenir conseqüències no desitjades (eliminació per error d’un element, vincles trencats, etc.)
Sense esforç físic: El disseny s’ha de poder usar d’una manera eficaç i amb el mínim esforç físic (dreceres de teclat, navegació tabular, etc.)
Dimensions apropiades: Les dimensions i espais han de ser apropiats per a la seva manipulació i ús per part de l’usuari, sense importar valors com la grandària, posició o mobilitat.
Read more ...

dissabte, 11 d’octubre del 2008

Deep Catalonia Live Tour Vol.3

Divendres 10 d'octubre: La Pobla de Montornés (El Baix Gaià)

Concert a la Pobla dins del festival de Folk del Baix Gaià.

L'hora convinguda eren les 10 de la nit, però a les 10 en punt erem al carrer fent la ceveseta i el cigarret perquè encara no havia arribat ningú. Quan ens pensaven que tornaríem a casa sense tocar, van apareixer uns quants espectadors (menos mal!).

Després una hora de concert amb el flabiolaire oficial del grup fent de mestre de cerimònies.

En destaquem, la moguda política de la zona, tothom en parlava i té molta "xixa" que si immobiliàries, que si virus polítics...


Read more ...

dimarts, 23 de setembre del 2008

Extensions pel Firefox

Hola que tal, benvinguts a una nova edició de les extensions pel Firefox

Firefox mola!!!!

Extensió que ens permet "caçar" els flaxos que hi hagi a qualsevol web. SWF Catcher for Firefox

Extensió que ens fa una vista prèvia en miniatura de les webs quan fem una cerca al Google o al Yahoo: GooglePreview

Extensió que ens mostra el codi font de la pàgina d'una manera més ordenada i amable: View Source Chart

Read more ...

divendres, 19 de setembre del 2008

Eines per a webmasters de Google


L’omnipotent Google es pot dir que té gairebé de tot. Com que a la majoria ens interessa estar ben amunt en el rànking d’aquest buscador, Google ens ofereix una eina per a crear llocs web que s’adaptin als requisits de Google.Aquesta eina ens mostrarà el nostre lloc web des de la perspectiva de Google i ens ajudarà a fer diagnòstic dels problemes que detecti, consultes de rendiment del lloc web (el tràfic que es genera i quina ruta segueixen els usuaris per arribar-hi), així com la possiblilitat de compartir informació per a poder millorar la visibilitat del nostre lloc web.
Per fer anar aquest servei, només cal accedir amb el nostre compte de Google (el compte de gmail ens serveix per a tot! dins de Google és clar…) i afegir la URL del lloc web que es vol analitzar. Fàcil i a més gratis.
L’eina ens ofereix:
Una visió general del lloc web amb la indexació.
Diagnòstic: ens verifica el lloc web, per tenir informació detallada de les estadístiques i dels errors
Estadístiques: de índex de rastreig
Vincles: externs, vincles d’altres llocs web i vincles interns
Sitemaps
Eines: verificació de l’arxiu robots.txt
Encara que de tots és ben sabut (o si més no, seria necessari que tothom ho sabés), que per a que el nostre lloc web aparegui ben amunt en el rànking de Google, cal que el nostre web estigui ben programat a nivell de CSS i de XHTML, és bo saber que existeix aquesta eina que ens permetrà millorar encara més el nostre lloc a la xarxa.
I si com sembla, Google és qui mana, no hi ha res millor per aprovar que contestar en un exàmen allò que el profe vol.
Si teniu curiositat:
https://www.google.com/webmasters/tools/docs/es/about.html
Read more ...

dilluns, 25 d’agost del 2008

Deep Catalonia Live Tour Vol.2

Espremulls on Tour

Diumenge 24 d'Agost: La Febró (el Baix Camp)

Despres d'una bona provisió de Gelocatils, vam arribar a La Febró. Poble perdut enmig de la serralada Pre-litoral a 9 kilòmetres de Prades.

Per arribar-hi vam atravessar boscos, boires i fins i tot una antiga caserna militar on ara hi van el caparrots a fer Paintball.

Ens va tocar sopar popular a base de pa amb tomata i pernil, pa sol i cava i vi dels guarros.

Despres 1 hora de concert on es van tocar tots els Greatets hits del grup a més d'amenitzar la vetllada amb comentaris i presentacions vàries.

Feia un fred que pelava.




Read more ...

diumenge, 24 d’agost del 2008

Deep Catalonia Live Tour Vol.1

Espremulls on Tour

Dissabte 23 d'Agost: El Catllar (Tarragonès)

Bonica població del Tarragonès que va celebrar la seva festa major aquest passat cap de setmana.

Despres d'una missa que a tothom li va semblar eterna, el mossen tenia molt a dir, va començar el cercavila per carrers del poble.

El seguici popular estava format pels diables del Catllar, els Gegants i una colla gegantera convidada els gegants de Sant Pere i Sant Pau de Tarragona.

El Cercavila va finalitzar als jardins on es va servir un vermut. A comentar la gana que el poble duia perque el vermut va ser vist i no vist.




Read more ...

divendres, 22 d’agost del 2008

Deep Catalonia Live Tour: Espremulls de gira

Espremulls, cobla antiga es forma amb músics provinents de diferents formacions de música tradicional amb el propòsit de treballar en la investigació, la interpretació i la difusió de la música de les cobles antigues. Alguns dels seus membres també es dediquen a la docència de diferents instruments i d'altres camps de la cultura tradicional i popular catalana.

El seu repertori beu tant de fonts de la tradició oral, músiques populars esteses a tot el territori, peces extretes de la pròpia investigació i recerca dels membres del grup així com músiques de nova composició totes, elles arranjades pel propi grup.

Han actuat arreu dels Països Catalans i també a Simancas, Chatelaillon Plage, San Esteban de Gormaz, etc... en l'acompanyament de bestiari, autoritats, concerts, processons, danses de carrer, esbarts dansaires, etc... El grup es pot constituïr en diverses formacions segons la funcionalitat, el tipus d'actuació o necessitats requerides.
Read more ...

dimarts, 19 d’agost del 2008

Parlem amb propietat (o no)

Ni banner, ni cibertira, ni bànner

Segons el centre de terminologia de Catalunya:

ca bàner, mes banneres tira publicitaria fr bandeaufr bannièreit bannerpt banneren advertising banneren banner
Definicions ca: Espai publicitari en una pàgina web, generalment de forma rectangular, el qual, quan s'hi fa clic, permet d'accedir al web o a una altra pàgina de l'anunciant.

Benvinguts a límit nord-est
Read more ...