Disseny web

El disseny web és una activitat que consistix en la planificació, disseny, implementació i manteniment de llocs web. Comprén diferents aspectes com el disseny gràfic web, dissenye d'interfaç i la experiència d'usuari, ademés de la navegabilitat, interactividad, usabilidad, arquitectura de l'informació i interacció de mijos, entre els que podem mencionar àudio, text, image, enllaços, video i l'optimisació de motors de busca. A sovint moltes persones treballen en equips que cobrixen els diferents aspectes del procés de disseny, encara que existixen alguns dissenyadors independents que treballen sols.

L'unió d'un bon disseny en una jerarquia ben elaborada de continguts, aumenta l'eficiència de la web com a canal de comunicació i intercanvi de senyes, que brinda possibilitats com el contacte directe entre el productor i el consumidor de continguts.

El disseny web ha vist àmplia aplicació en els sectors comercials d'Internet, especialment en la World Wide Web. A sovint la web s'utilisa com a mig d'expressió plàstica en sí. Artistes i creadors fan de les pàgines en Internet un mig més per a oferir les seues produccions i utilisar-les com un canal més de difusió de la seua obra.

Disseny web aplicat

El disseny de pàgines web és la construcció de documents d'hipertext per a la seua visualisació en diferents navegadors. Aixina com assignar-li una presentació per a diferents dispositius d'eixida (en una pantalla de computador, en paper, en un teléfon mòvil, etc).

Estos documents o pàgines web poden ser creades:

• Creant archius de text en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.
• Utilisant un programa visual WYSIWYG o WYSIWYM de creació de pàgines.
• Utilisant programació del costat del servidor, per a generar la pàgina web.

Etapes

Per al disseny de pàgines web devem tindre en conte huit etapes:

1. Objectius: El procés per a establir els objectius, per a definir el propòsit del sitie web i el públic objectiu. Durant este procés, és important saber si l'arquitectura de la pàgina ya ha segut alineada i, en cas que lo estiga, tindre clar que està subjecta a canvis a mida que el proyecte evoluciona.
2. Investigació i anàlisis: Una investigació detallada garantisa que es dispon de tots els coneiximents necessaris per a ser competitius. L'investigació assegura que el lloc web considera tots els desenrolls actuals en térmens de tecnologia, indústria, comportament de l'usuari i expectatives de l'usuari (UX).
3. Arquitectura del lloc: Basant-se en els objectius i els resultats de l'investigació, ara es pot elaborar una arquitectura de lloc exhaustiva. Estos resultats deuen delinear cóm deu ser la navegació principal i secundària, les subpáginas, les categories i atres seccions del sitie web. Lo ideal seria que l'arquitectura del lloc canvie en acabant de que es tinguen en conte els resultats de l'investigació. Si per alguna raó cap nova percepció de l'investigació i l'anàlisis va ser capaç de proporcionar o recomanar canvis en l'arquitectura del lloc, deuria alarmar-se ya que podria haver alguna cosa mal. Durant l'arquitectura del lloc, es deuen respondre les següents preguntes: ¿Quins són els objectius i mensages de cada pàgina? ¿Quina acció s'espera de l'usuari en estes pàgines?
4. Wireframing: El Wireframing és un pas important en qualsevol procés ya que et permet definir la jerarquia de l'informació. En acabant de que tots els resultats de l'investigació estiguen disponibles i es puga usar una arquitectura de pàgina clara com a plantilla, ara es deu crear un wireframe per a cada pàgina. El wireframing és una de les fases més incomprendidas i difícils durant tot el procés d'un Disseny d'una pàgina web.

1. Disseny i Maquetació: El disseny i la maquetació web és el procés en el que el prototip gràfic també denominat «layout» «Look and Feel» (en els requisits estructurals i estètics definits i aprovats en un anàlisis inicial) pansa a transformara en còdic html, css i js (estàndars web) per a que els navegadors puguen interpretar-ho correctament.
2. Especificacions tècniques: Les Especificacions Tècniques (Tech Specs) són un document que consistix en una série d'instruccions per al desenrollador sobre cóm programar el lloc web. Per eixemple, les fonts, l'espayat, el text i el comportament de les imàgens es descriuen en detalle en una Especificació Tècnica. Les funcions i característiques deuen ser mostrades i explicades, aixina com el comportament de navegació, animacions, pop-ups i moltes més.
3. Programació: Ara que tots els passos anteriors s'han realisat correctament, res s'interpon en el camí de la codificació de la pàgina web. Una volta terminada, és clau realisar un control de calitat per a enumerar els errors i gestionar les seues solucions. Este procés no deuria tardar més de dos dies ni deuria tindre un cost adicional.
4. Migració i transició: Si es tracta d'un nou sitie web, tot el contingut té que ser migrado al nou disseny. Per a llocs més grans, tot el contingut del lloc antic deu ser inclós ara en el nou lloc. Un dels processos més importants dins de la migració és el mapage d'URL. Per a tots els URLs de pàgines antigues, es deu establir una redirección 301 als nous URLs. Si s'omet este punt de SÈU, el nou sitie web pert tota la confiança SÈU guanyada en anterioritat i totes les classificacions dels motors de busca com Google.

El HTML consta d'una série d'elements que estructuren el text i són presentats en forma d'hipertext per agent d'usuari o navegadors. Açò es pot fer en un simple editor de texts (deu guardar-se com text pla, sense cap tipo de format i en extensió .html o .htm). Deprendre HTML és relativament fàcil, aixina que és senzill crear pàgines web d'esta manera. Esta era l'única manera de generar-les fins que varen aparéixer, a mitan de 1996, alguns editors visuals d'HTML, com MS FrontPage i Adobe Dreamweaver. En estes ferramentes no és necessari deprendre HTML (encara que sí aconsellable), en la qual cosa el desenrollador es concentra en lo més important, el disseny del document.

Fonaments

Un bon dissenye web és aquell que considera dins del seu desenroll tant els elements bàsics del disseny gràfic (la diagramación, el color, els gràfics i les fonts) com els fonaments tècnics (estructura, compatibilitat, funcionalitat i interactividad) per a crear tant l'impacte visual com l'experiència d'usuari òptima per a l'assimilació del contingut.

Estàndarts

El dissenye web implica conéixer cóm es deuen utilisar cada u dels elements permesos en l'HTML, és dir, fer un us correcte d'este llenguage dins dels estàndars establits per la W3C i referent a la web semàntica. Per la permisibilidad d'alguns navegadors web com Internet Explorer, esta premissa original s'ha perdut. Per eixemple, este navegador permet que no siga necessari tancar les etiquetes del marcat, utilisa còdic propietari, etc. Açò impedix que eixe documente web siga universal i independent del mig que s'utilise per a ser mostrat.

Accessibilitat

El disseny web deu seguir uns requeriments mínims d'accessibilitat web que faça que els seus llocs web o aplicacions puguen ser visitats pel major número de persones. Per a conseguir estos objectius d'accessibilitat s'han desenrollat pautes com les del W3C: Pautes d'accessibilitat al contingut Web 1.0 WCAG.

Web semàntica

La web semàntica, per una atra part, advoca per un us llògic dels elements segons el significat per al que varen ser concebudes. Per eixemple s'utilisarà l'element <P> per a marcar paràgrafs, i <TABLE> per a tabular senyes (mai per a dispondre de manera visual els diferents elements del document). En la seua última instància, açò ha supost una autèntica revolució en el disseny web posat que aposta per separar totalment el contingut del document de la visualisació.

D'esta forma s'utilisa el document HTML únicament per a contindre, organisar i estructurar l'informació i les fulls d'estil CSS per a indicar com es mostrarà dita informació en els diferents mijos (com per eixemple, una monitor de computadora, un teléfon mòvil, imprés en paper, llegida per un sintetisador de veu, etc.). Per llògica, esta metodologia beneficia enormement la accessibilitat del document.

També existixen pàgines dinàmiques, les quals permeten interacció entre la web i el visitant, proporcionant-li ferramentes tals com a buscadors, chat, fòrums, sistemes d'enquestas, etc. i posseïxen d'un panel de control d'administració de continguts. Est permet crear, actualisar i administrar cantitats illimitades de contingut en la mateixa.

Història

En un principi era sol text, pero a mida que ha evolucionat la tecnologia, tant els ordenadors com les rets de telecomunicacions, s'ha generat noves formes de desenrollar la web. L'inclusió d'imàgens va ser la més significativa, pero també devem mencionar el vídeo i la animació, o els espais 3D, lo que aporta valors estilístics, de disseny i d'interactividad jamai imaginats abans.

El disseny de pàgines web s'ha desenrollat a mida que ha evolucionat Internet. En 1992 solament hi havia al voltant de 50 llocs web. Estadístiques (2005) nos afirmaven que la cantitat de llocs web ronda els 8000 millons de llocs, als que diàriament se'ls sumixca a raïl de 4400 per dia.

Ràpidament, la seua importància alcançarà les mateixes quotes que la televisió o el teléfon. Senyes recents estimen que hi ha al voltant de dos mil millons de pàgines penjades i s'espera que en els pròxims anys aplegue als huit mil millons, excedint el número d'habitants del planeta. No obstant, solament una fracció d'este número és visitat habitualment per la majoria dels usuaris (solament al voltant de 15 000 llocs web, el 0,4 % del total).

A partir d'estes senyes es pot entendre la necessitat de concentrar els esforços per a atraure i mantindre l'atenció dels usuaris. Junt en un desenroll efectiu de l'estructura web i del contingut, el disseny i l'us del color són la clau per a atraure i ser identificat, formant vínculs en el subconscient de l'usuari i generar esquemes per a captar i fidelizar a nous visitants.

Al mateix temps que l'evolució dels aparats i de la seua introducció en les llars, també ha aumentat la calitat de les transmissions a través Internet i ha baixat el seu preu. A mida que la tecnologia ha solucionat estes dificultats, ya no nos trobem en problemes de forma sino de contingut.

HTML 5

L'última versió d'este llenguage bàsic correspon al HTML5, a on s'introduïxen nous elements per a millorar la navegació i la usabilidad dels llocs web en els distints navegadors.

Un eixemple d'això és l'introducció d'etiquetes HTML en un component semàntic: Plantilla:Tag (encapçalat), Plantilla:Tag, Plantilla:Tag, Plantilla:Tag, Plantilla:Tag, Plantilla:Tag (navegació) i Plantilla:Tag (peu de pàgina).

Aixina mateix, una de les principals novetats és l'utilisació de "Canvas" o marcs de treball, que servixen per a utilisar animacions sense necessitat d'instalar plugins ni usar un reproductor Atobó Flash para videos web, estàndart considerat de facto. Esta opció és un gran alvanç, ya que Flash té grans desventages en els gràfics web, com que els motors de busca no puguen llegir el text dins, que pesen molt i tarden en carregar. En implementar-se en canvas, s'usarà únicament còdic Javascript, allaugerant el pes de la pàgina.

També queden obsolets alguns elements del HTML 4, raó per la qual és convenient repassar sobre les novetats que inclou HTML5, el llenguage de les quals és regulat per W3C.

CMS

Els CMS o sistema de gestió de contingut són plataformes web que estandardisen processos i que permeten als usuaris que no posseïxen molt coneiximent tècnic en llenguage de programació crear i maquetar contingut fàcilment per a la seua pàgina web a través d'un backend o gestor de contingut .

Entre els CMS més complets i famosos del mercat trobem a Wordpress i Joomla. Darrere de varis CMS existix una gran comunitat de desenrolladors de complements o plugins que realisar treballs específics com a administració de contingut. Estes plataformes són famoses per la versatilitat de dissenys que es poden implementar a través de plantilles. La qual cosa per la seua banda abaratix els costs de realisació de la pàgina, ya que s'elimina un esclavó de la cadena de publicació, el maquetador, i agrega la capacitat de replicar contingut en facilitat.

El llenguage de programació utilisat normalment per estes plataformes és PHP, HMTL5, CSS Java Script i JQuery. L'usuari pot tindre accés a la programació del lloc, la qual cosa torna molt versàtils a estes plataformes de creació de contingut web. Són prou escalables per la seua estandardisació de continguts i la seua gestió dinàmica d'usuaris i permissos .

Disseny web adaptable

Archiu:Dissenye-web.jpg

Dissenye web adaptable.

El disseny web adaptable (en inglés: responsive, a voltes mal adaptat com «responsivo») és una filosofia de disseny web que té com a objectiu adaptar una mateixa pàgina web a distints tamanys de pantalla, dispositius i orientacions. Encara que el còdic HTML que envia el servidor siga el mateix, l'apariència del lloc canviarà d'acort en les especificacions (denominades mija queries) dels fulls d'estil en cascada CSS.

Experiència d'usuari en disseny web

Artícul principal → Disseny d'experiència d'usuari.

L'usabilitat web (UX o user experience, en anglés) és el grau de facilitat d'us que té una pàgina web per als usuaris que accedixen i interactuen en ella. Jacob Nielsen està considerat el pare de la usabilidad i, en 2000 va llançar al mercat el llibre Designing Web Usability: The Practice of Simplicity (1999) (ISBN 1-56205-810-X) a on expon els 10 principis que deuen regir la usabilidad de qualsevol web.

Estos principis són:

1. Visibilitat de l'estat del sistema. El sistema, és dir la web o aplicació, sempre deu mantindre en tot moment als usuaris informats sobre lo que està succeint, a través de mensages en temps i forma.
2. Coincidència entre el sistema i el món real. El sistema deu parlar l'idioma dels usuaris, en paraules, frases i conceptes familiars per a l'usuari i no en térmens tècnics.

1. Control i llibertat de l'usuari. Donar la possibilitat als usuaris a corregir els seus errors en la navegació per la pàgina web.
2. Consistència i estàndars. Els usuaris no deurien tindre que preguntar-se si diferents paraules, situacions o accions signifiquen lo mateix. Un dels grans reptes com a dissenyadors és saber usar de forma habitual les convencions o recursos habituals de les pàgines web.
3. Prevenció d'errors. Inclús millor que els bons mensages d'error és un disseny cuidadós que evita que nos equivoquem. Un bon dissenye web deu eliminar les condicions propenses a errors.
4. Reconeiximent en lloc de recort. Devem minimisar en lo possible que l'usuari haja de recordar de que ha fet prèviament fent visibles els objectes, les accions i les opcions.
5. Flexibilitat i eficiència d'us. Els acceleradors, que no són vists per l'usuari novell, a sovint poden accelerar l'interacció per a l'usuari expert, de modo que el sistema pot atendre tant a usuaris inexpertos com experimentats.
6. Disseny estètic i minimaliste. En disseny web menys és més. Devem mostrar l'informació estrictament necessària per a que l'usuari no es perga o marche. Devem conduir-ho per a on nos interessa.
7. Ajudar als usuaris a reconéixer, diagnosticar i recuperar-se d'errors.
8. Ajuda i documentació. Encara que és millor si el sistema es pot utilisar sense documentació, pot ser necessari proporcionar ajuda i documentació.

Johnson (2010) recapitula en l'introducció del seu llibre Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules alguns dels intents que s'han realisat a lo llarc de l'història contemporànea per a establir regles que guien el disseny d'interfaços d'usuari aplicat a sistemes computacionals interactius:

• Cheriton (1976) va propondre pautes de disseny d'interfaç d'usuari per als primers sistemes informàtics interactius (de temps compartit).
• Norman (1983a, 1983b) va presentar regles de disseny per a interfaços d'usuari de software basades en la cognició humana, inclosos els errors cognitius.
• Smith i Mosier (1986) varen escriure potser el conjunt més complet de pautes de disseny d'interfaç d'usuari.
• Shneiderman (1987) va incloure "Huit regles d'or del disseny d'interfaç" en la primera edició del seu llibre Designing the User Interface i en totes les edicions posteriors.
• Brown (1988) va escriure un llibre de directrius de disseny, titulat Human-Computer Interface Design Guidelines.

• Nielsen i Molich (1990) varen oferir un conjunt de regles de disseny per al seu us en l'evaluació heurística d'interfaços d'usuari.
• Marcus (1991) va presentar directrius per al disseny gràfic en documents en llínea i interfaços d'usuari.

Per una atra part, Garrett (2011) explica en el seu llibre The Elements of User Experience: User-centered Design for the Web que l'implementació de principis d'experiència d'usuari al disseny de llocs web, ya siguen productes orientats a continguts o aplicacions interactives, és particularment important per la seua naturalea de auto-servici; és dir, que no conten en un "manual d'instruccions" o una "plataforma de servici al client" dirigida específicament a l'aprenentage de la navegació i interacció dels usuaris en els continguts desplegats, sino que dites accions es porten a terme de forma individual i intuïtiva. Mentres més complicada siga la interfaç de qualsevol lloc web, més dificultats tindran els seus visitants per a navegar en ella, i com a conseqüència, en paraules de Garrett, se sentiran "incompetents, estúpits, culpables". L'autor també establix que, si ben els usuaris no tenen la culpa de cóm estiga configurada una pàgina en llínea, eixa sensació que els cause interactuar en ella serà la que determine si tornarien a visitar eixe lloc en el futur, i per lo tant, el seu èxit com a producte digital.

El llibre dividix la construcció de l'experiència d'usuari d'un lloc web en cinc grans capes:

1. Superfície: Conformada per elements gràfics, com a texts, fotografies i ilustracions. Poden contindre vínculs a atres parts dins del mateix sitie web.
2. Esquelet: És la posició establida als botons, controls, imàgens i blocs de text dins de l'espai que ocupa la pàgina en una pantalla. Està dissenyat per a optimisar la disposició d'estos elements i aixina conseguir la màxima eficiència en navegar en la web.
3. Estructura: És el desplegament conceptual de totes les funcionalitats incloses en una pàgina web, i els continguts que es volen mostrar despuix d'efectuar accions concretes. Pot visualisar-se com una ramificació que contempla l'unió de tots els elements d'un lloc en una operació específica (per donar alguns eixemples, la redirección a una subpágina, obertura d'una nova finestra, reproducció de vídeo o àudio, etcétera).
4. Alcanç: És la definició de quins continguts i funcionalitats es desigen incorporar en una pàgina. Es determinen, entre atres factors, depenent del propòsit que es perseguix en la creació del sitie web, i el tipo d'usuaris als que es desija aplegar.
5. Estratègia: Inclou no solament lo que les persones que administren un lloc volen obtindre d'ell, sino també lo que els usuaris volen obtindre de la seua visita a la pàgina web. En atres paraules, és la determinació dels objectius que es volen perseguir i els potencials usuaris als que es desigen aplegar per mig del disseny i implementació d'un sitie en llínea.

Si be el funcionament correcte de les capes superiors depén en gran mida del plantejament conceptual de les capes inferiors, la seua orde al moment de treballar en elles no és forçosament llineal; moltes falles detectades en llocs ya terminats, segons argumenta Garrett, s'han donat per incoherències entre el plantejament inicial de la pàgina i el producte final. Per a evitar contratemps, i que les despeses de producció superen al presupost contemplat al principi de cada proyecte, ell recomana no alvançar cap al desenroll de les capes superiors fins a haver terminat completament de treballar en les capes inferiors.

Vore també

• Disseny web adaptatiu
• WAI
• World Wide Web Consortium
• Accessibilitat web
• W3C
• Posicionament en buscadors
• Domini d'Internet
• Estage web
• Correu corporatiu