Your SlideShare is downloading. ×
3.Com Ha De Ser Un Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

3.Com Ha De Ser Un Web

551
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Planta't a Internet! Telejet Garrotxa Professor: Marc Nicolau
  • 2.
    • Bona web  Bon contingut
      • Un bon contingut és clau perquè la web es promocioni amb èxit.
      • Cal preguntar-se:
        • Per què els visitants es quedaran a la meva web?
        • Què és el que busquen?
        • Què tinc que ells necessitin?
        • Com els puc mantenir després d’haver visitat la meva web?
  • 3.
    • Es treballa sobre paper:
      • Què es vol aconseguir amb la web?
      • Descripció breu dels continguts de la pàgina, títol principal, etc.
      • Finalitat que es persegueix amb la web : informar, fer negoci, entretenir, etc.
      • Estudi de pàgines similars : què pot oferir que no tinguin les altres per atreure els usuaris, etc.
      • Descriure quina és la tipologia dels meus usuaris : nivell informàtic, idiomes, interessos, problemes físics, etc.
        • Adaptar la pàgina a les seves característiques.
      • On es visualitzarà la web : navegadors més utilitzats, elements específics, etc.
  • 4.
    • Dibuixar un organigrama amb totes les parts de la web.
      • Distribuir el text.
      • Gràfics.
      • Vincles a altres documents.
      • Objectes multimèdia que cal incloure.
  • 5.
    • Tipus d’estructuració
      • Àrbre :
        • Pàgina principal que enllaça amb altres pàgines, que també tenen enllaços a altres pàgines de nivell inferior.
        • Agrupació de les pàgines amb nivells: per anar del primer a l’últim nivell cal passar pels intermitjos
        • És una estructura poc navegable si la web té moltes pàgines.
  • 6.
    • Tipus d’estructuració
      • Llista :
        • Estructura oposada a l’estructura amb arbre.
        • No hi ha pàgina principal  totes estan al mateix nivell.
        • Per arribar a l’última pàgina cal recòrrer totes les anteriorrs.
        • És una bona estructura per presentar manuals o altres aplicacions de tipus “seqüencial”.
  • 7.
    • Tipus d’estructuració
      • Mixta :
        • Combinació de les dues anteriors.
        • Pàgines amb jerarquia de nivells, que alhora estan connectats entre sí en forma de llista.
        • Molt més navegable i pràctica.
  • 8.
    • Tipus d’estructuració
      • En xarxa :
        • Totes les pàgines de la web estan connectades entre sí.
          • Més complexe i menys ordenada.
        • Avantatge: des de cada pàgina es pot anar a qualsevol altra.
        • Necessita que hi hagi molta planificació per evitar que l’usuari no sàpiga cap on ha de navegar.
  • 9.
    • Fer un inventari de tot el material que es vol mostrar a la web.
    • Inicialment, organitzar el matreial per temes.
      • Posteriorment, contruir gràficament l’estructura de la web.
  • 10.
    • És molt útil construir varis prototips o esboços:
      • Serveix per comprovar la reacció dels usuaris.
        • Fer varies plantilles amb diferents estructures
        • Demanar a amics i familiars que naveguin per la web i donin la seva opinió.
  • 11.
    • La porta d’entrada a la web.
    • Cal fer ben visibles els continguts que puguin interessar més als visitants.
    • Deixar ben clar el tema de la web.
    • Cal incloure un enllaç cap a la pàgina d’inici des de la resta de pàgines.
      • Facilita molt la navegació.
  • 12.
    • Fer un bon disseny de la web pot ser molt difícil.
    • En general, una web ha de ser:
      • Agradable
      • Que mostri informació
      • Que “quedi” a la ment del visitant
      • Tècnicament i visualment coherent.
  • 13.
    • Precedència (guiar l’ull)
      • Facilitat amb que els usuaris troben alguna cosa a la pantalla sense molt esforç.
        • Si l’usuari tarda més de 10 segons intentant el que busca, acabrà tancant la finestra.
      • Per aconseguir-ho, cal tenir en compte:
        • La posició, el color i el contrast dels elements
        • Exemple : Adobe
          • Utilitza zones amb diferents colors per guiar a l’ull a través de les seccions.
  • 14.
    • Espaiat
      • Fa que les coses es vegin més clares.
      • Cal tenir en compte l’espaiat:
        • Entre línies.
        • Entre caràcters.
        • Els espais en blanc.
      • Exemple : web Marius
        • Web molt neta, simple i utilitza bé els espais.
  • 15.
    • Navegació
      • Mecanisme que permet a l’usuari moure’s per la web i trobar la informació que cerca.
      • Tots els enllaços de navegació han de funcionar perfectament.
        • No hi ha res més frustrant que un enllaç que no funciona!
      • Utilitzar paraules que indiquin clarament cap on porta l’enllaç.
        • No posar coses com “click aquí” o “aquesta web”.
      • Diferenciar clarament què és un enllaç del que no ho és:
        • Posant un color diferent.
  • 16.
    • Navegació
      • Dos tipus bàsics de navegació:
        • La que diu on pots anar
        • La que indica on estàs: Inici -> Secció -> Subsecció
      • Exemple : web Generalitat de Catalunya
        • Web amb un bon sistema de botons de navegació.
  • 17.
    • Dissenyar per construir
      • Abans de dissenyar res, cal tenir en compte que tot pot canviar:
        • Tipus de navegador: provar-ne de diferents.
        • Resolució de pantalla: cal que es vegi bé en diferents resolucions
  • 18.
    • Tipografia
      • El text és un dels elements més importants del disseny
      • Cal tenir en compte:
        • El tipus de font: com a màxim, 3 tipus diferents. Amb contorns arrodonits (Arial, Verdana, etc.)
        • La mida de la font: si no és un títol, no superar la mida 14 punts.
        • L’espaiat.
        • La llargada de la línia.
        • El color.
        • Els paràgrafs.
      • Exemple: flickr
        • Web on s’utilitza molt bé les tipografies.
  • 19.
    • Usabilitat
      • Cal utilitzar els estàndards web.
      • Pensar amb l’usuari:
        • Que pugui fer el que volem que faci.
        • Posar-nos en el seu lloc.
      • Exemple : Google
        • Web molt usable ja que és simple i fàcil d’utilitzar.
  • 20.
    • Alineació
      • Mantenir els elements de la web alineats és molt important.
      • Exemple : Electric Pulp
  • 21.
    • Claretat
      • Text i imatges a proporcions iguals .
        • Pàgines on més del 50% de l’espai mostrat és només text, no es tenen en compte .
        • 2 o 3 imatges per pàgina
        • Pàgines amb molts efectes són molt denses, cansades, pesades, ...
      • Text:
        • Crear llistes d’idees.
        • Paràgrafs.
        • Frases amb negreta i cursiva.
        • Subapartats
        • Etc.
        • La gent a la web llegeix depressa  lectura fàcil i agradable.
  • 22.
    • Claretat
      • Cal detallar molt bé cada contorn.
      • Assegurar-se que el contrast dels colors és alt.
        • No són agradables els colors de text oposats als colors de fons (blau-groc), o colors difícils de llegir (groc sobre fons blanc) .
        • La combinació perfecta seria aquella que utilitzés tota la gama de tons d’un color concret unida a altres dos o tres colors diferents.
      • Exemple : Generalitat de Catalunya
  • 23.
    • Consistència
      • Tot ha de conincidir:
        • Mides dels títols
        • Estils
        • Colors
        • Elements.
        • Etc.
      • Exemple: Veerle
        • Manté una consistència en tota la web.
  • 24.
    • www.guiesmeranges.com/principalcatala.htm
      • Contingut obsolet.
      • Enllaços trencats.
      • Falta consistència.
      • Entre altres.
    • www.guiesmeranges.com
      • Tipus de lletra difícil de llegir.
      • Colors de fons diferents a les pàgines de la web.
      • Entre altres.