Disseny web: diferència entre les revisions

3.604 bytes afegits ,  fa 9 mesos
afegit conceptes d'usabilitat i responsive web design
m (Format)
(afegit conceptes d'usabilitat i responsive web design)
=== Etapes ===
Pel disseny de pàgines web hem de tenir en compte tres etapes:
# La primera, és el disseny visual de la informació que es desitja editar. En aquesta etapa es treballa distribuint el text, els gràfics, els vincles a altres documents i altres objectes multimèdia que es considerin pertinents. És important que abans de treballar sobre l'ordinador es realitzi un pre-disseny sobre el paper mitjançant l'ús de ''wireframes''. Això facilitarà tenir un ordre clar sobre el disseny.<ref name="Chapman, Evolution" >{{citar ref|cognom=Chapman |nom=Cameron |títol=The Evolution of Web Design |url=http://sixrevisions.com/web_design/the-evolution-of-web-design/|editorial=Six Revisions|arxiuurl=https://web.archive.org/web/20131030030802/http://sixrevisions.com/web_design/the-evolution-of-web-design/ |arxiudata= 30 octubre 2013}}</ref>
# La segona, és l'estructura i relació jeràrquica de les pàgines del lloc web, una vegada que es té aquest esbós es passa a 'escriure' la pàgina web. Per això, i fonamentalment per manipular els vincles entre documents, es va crear el llenguatge de marcació d'hipertext o [[HTML]]. Els enllaços que apareixen subratllats en aquests document i altres de Wikipedia són exemples d'hipertext.<ref>{{ref-web|cognom=Stone|nom=John|títol=20 Do’s and Don'ts of Effective Web Typography| url=http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography|consulta=2012-03-19|data=2009-11-16}}</ref>
# La tercera, etapa consisteix en el posicionament en buscadorscercadors o [[Optimització per a motors de cerca|SEO]]. Aquesta consisteix a optimitzar l'estructura del contingut per millorar la posició en que apareix la pàgina en els resultats d'una determinada cerca.
 
=== Fonaments ===
=== Accessibilitat ===
El disseny web ha de seguir uns requeriments mínims d'accessibilitat web que fagi que els seus llocs web o aplicacions puguin ser visitats pel major nombre de persones. Per aconseguir aquests objectius d'accessibilitat s'han desenvolupat pautes com les del [[W3C]]: Pautes d'accessibilitat al contingut Web 1.0 WCAG.
 
=== Disseny web responsive ===
El disseny web adaptatiu -Responsive Web Design- neix amb l'ús intensiu de tablets i mòbils com Iphone, Ipads o dispositius Android amb l'objectiu que la pàgina web es mostri d'una forma o altra adaptant-se a la resolució de la pantalla. El seu ús no abasta únicament dispositius mòbils sinó que s'amplia a ordinadors de sobretaula que disposen de grans resolucions de pantalla.<ref>{{Ref-web|títol=El disseny web enfocat a mobile first|url=https://www.latevaweb.com/ca-ES/el-mobile-first-en-el-disseny-web|consulta=2022-02-26|llengua=ca|nom=Marc Berenguer|cognom=|data=2022-01-17}}</ref>
 
=== '''Usablilitat''' ===
La usabilitat web (UX o user experience, en anglès) és el grau de facilitat d'ús que té una pàgina web per als usuaris que accedeixen i interactuen amb ella. Una de les missions principals del dissenyador web és fer que una pàgina web tingui un disseny web usable. [[Jakob Nielsen (informàtic)|Jakob Nielsen]] està considerat el pare de la usabilitat i, el 1999 va llançar al mercat el llibre '''''Designing Web Usability: The Practice of Simplicity'''''<ref>{{Ref-web|títol=Designing Web Usability: a Book by Jakob Nielsen|url=https://www.nngroup.com/books/designing-web-usability/|consulta=2022-02-26|llengua=en|nom=World Leaders in Research-Based User|cognom=Experience}}</ref> on exposa els '''10 principis''' que han de regir la usabilitat de qualsevol disseny web<ref>{{Ref-web|títol=Diferències entre disseny web i disseny gràfic|url=https://www.latevaweb.com/ca-ES/conceptodisenoweb-ca|consulta=2022-02-26|llengua=ca|nom=Francesc|cognom=Sánchez Loro|editor=https://www.latevaweb.com|data=2010-12-14}}</ref>. Aquests són:
 
# Visibilitat de l'estat del sistema. El sistema, és a dir la web o aplicació, sempre ha de mantenir en tot moment els usuaris informats sobre el que està succeint, a través de missatges en temps i forma.
# Coincidència entre el sistema i el món real El sistema ha de parlar l' idioma dels usuaris, amb paraules, frases i conceptes familiars per a l' usuari i no amb termes tècnics.
# Control i llibertat de l'usuari. Donar la possibilitat als usuaris a corregir els seus errors en la navegació per la pàgina web. El botó de tornar enrere seria un bon exemple.
# Consistència i estàndards. Els usuaris no haurien d'haver de preguntar-se si diferents paraules, situacions o accions signifiquen el mateix.
# Prevenció d'errors. Fins i tot millor que els bons missatges d'error és un disseny acurat que evita que ens equivoquem.
# Reconeixement en lloc de record. Hem de minimitzar en la mesura del possible que l'usuari hagi de recordar que ha fet prèviament fent visibles els objectes, les accions i les opcions.
# Flexibilitat i eficiència d'ús. Els acceleradors, que no són vistos per l'usuari novaiorquès, sovint poden accelerar la interacció per a l'usuari expert, de manera que el sistema pot atendre tant usuaris inexperts com experimentats.
# Disseny estètic i minimalista. En disseny web menys és més. Hem de mostrar la informació estrictament necessària perquè l'usuari no es perdi o marxi. Hem de conduir-lo per on ens interessa.
# Ajudar els usuaris a reconèixer, diagnosticar i recuperar-se d'errors. Els missatges d'error s'han d'expressar en un llenguatge senzill (sense codis), indicar amb precisió el problema i suggerir constructivament una solució.
# Ajut i documentació. Tot i que és millor si el sistema es pot utilitzar sense documentació, pot ser necessari proporcionar ajut i documentació.
 
== Referències ==
3

modificacions