\n
![\"Canal](\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/canalDistribucioInternet.png\")
<\/a><\/li>\n\n
<\/a><\/li>\n<\/ul>\n\n
Organitzaci\u00f3 de la informaci\u00f3<\/h3>\n
En un entorn web, l’usuari rarament s’atura molt temps en una p\u00e0gina, sin\u00f3 que tendeix a donar una ullada r\u00e0pida pel contingut a la recerca de la informaci\u00f3 que li interessa. Estructura de navegaci\u00f3<\/strong><\/p>\n Pel que fa a l’estructura del lloc web<\/strong>, la navegaci\u00f3 \u00e9s m\u00e9s senzilla si els continguts s’organitzen horitzontalment. Quan hi ha molts nivells de profunditat, l’usuari t\u00e9 m\u00e9s ocasions per perdre’s, ja que ha de confiar en la seva mem\u00f2ria a curt termini.<\/p>\n \u00c9s aconsellable no superar els tres nivells de profunditat <\/strong>a partir de la p\u00e0gina inicial. Si resulta impossible respectar aquest principi, els men\u00fas m\u00e9s amplis han de correspondre al primer nivell, perqu\u00e8 l’usuari pugui identificar la major part de continguts directament a la p\u00e0gina principal. Una web organitzada en enlla\u00e7os de paginaci\u00f3 seq\u00fcencial que nom\u00e9s permeten avan\u00e7ar o retrocedir implica una navegaci\u00f3 lenta i tediosa que convida a l’usuari a abandonar el lloc. El major nivell de satisfacci\u00f3 per part de l’usuari s’obt\u00e9 quan es combinen tres tipus d’enlla\u00e7os:<\/p>\n El format de la p\u00e0gina web supera moltes vegades les dimensions de la pantalla de l’ordinador, de manera que si l’usuari vol accedir a la totalitat dels continguts ha d’utilitzar les barres de despla\u00e7ament (scroll<\/em>). Per aquesta ra\u00f3, la informaci\u00f3 m\u00e9s important s’ha de localitzar sempre en l’espai inicialment visible <\/strong>en pantalla.<\/p>\n Avui dia la resoluci\u00f3 m\u00e9s estandarditzada pel que fa al desenvolupament web \u00e9s 1.024 px d’ample per 768 px d’alt. Una part d’aquest espai est\u00e0 ocupat pels elements propis del navegador (barra d’opcions, barra d’estat, etc.), per la qual cosa el format visible del web queda limitat a unes dimensions d’aproximadament 1.000 x 600 p\u00edxels, tot i que l’al\u00e7ada no es t\u00e9 sempre en compte per l’\u00fas habitual dels despla\u00e7aments verticals. Posici\u00f3 dels elements<\/strong><\/p>\n Els usuaris tendeixen a buscar elements espec\u00edfics en determinades localitzacions que s’han convertit en est\u00e0ndard:<\/p>\n Organitzaci\u00f3 visual de les opcions<\/strong> Quan s’inclouen imatges en una p\u00e0gina, cal tenir en compte que poden incrementar notablement el temps de desc\u00e0rrega<\/strong>, de manera que \u00e9s aconsellable que tinguin una mida limitada, i amb el m\u00e0xim nivell de compressi\u00f3 que permeti preservar la qualitat de la imatge.<\/p>\n Les imatges poden ser molt efectives per a\u00a0missatges simples<\/strong>, per\u00f2 en cas de continguts complexos \u00e9s millor utilitzar text.<\/p>\n Pel que fa a la inclusi\u00f3 d’animacions<\/strong>, a m\u00e9s de provocar problemes relacionats amb un increment del temps de desc\u00e0rrega, poden dispersar l’atenci\u00f3 dels usuaris. Per tant, s’han d’utilitzar amb moderaci\u00f3 i sempre justificadament, no com a simple recurs ornamental.<\/p>\n En l\u00ednia amb el rastreig r\u00e0pid de la p\u00e0gina, l’usuari no s’atura a observar les imatges fins que visita per segona o tercera vegada la web. Les seves prefer\u00e8ncies s’orienten cap al contingut textual, al qual se sol dedicar el doble de temps. Les imatges molt coloristes i amb format de b\u00e0ner s\u00f3n ignorades sovint, segurament perqu\u00e8 s’associen instintivament amb un missatge de car\u00e0cter publicitari.<\/p>\n Formats gr\u00e0fics<\/strong><\/p>\n Les imatges per a web poden tenir tres formats -GIF, JPG i PNG-, que permeten comprimir les imatges per a optimitzar-ne la desc\u00e0rrega. Cadascun d’aquests formats t\u00e9 unes caracter\u00edstiques espec\u00edfiques:<\/p>\n Generaci\u00f3 d’imatges per a p\u00e0gines web<\/strong><\/p>\n En preparar gr\u00e0fics per a un lloc web hem de prioritzar la\u00a0desc\u00e0rrega\u00a0r\u00e0pida de les p\u00e0gines. Per tant, els arxius gr\u00e0fics han de tenir la\u00a0mida m\u00e9s petita possible<\/strong>, tenint presents els factors que es detallen a continuaci\u00f3 (i que s’apliquen als arxius gr\u00e0fics, ja que actualment molts d’aquests efectes poden obtenir-se mitjan\u00e7ant CSS3: per a m\u00e9s informaci\u00f3 sobre CSS3, vegeu\u00a0Especificacions t\u00e8cniques de disseny per a web<\/a>).<\/p>\n En una p\u00e0gina web podem integrar dos tipus de text:<\/p>\n <\/p>","protected":false},"excerpt":{"rendered":" Introducci\u00f3 A m\u00e9s dels factors que cal tenir en compte en el disseny d’aplicacions en general, en la producci\u00f3 de p\u00e0gines web intervenen una s\u00e8rie de determinants particulars. Les raons d’aquesta especificitat s\u00f3n b\u00e0sicament dues: El canal de distribuci\u00f3 -Internet- estableix l\u00edmits t\u00e8cnics relacionats amb el temps de desc\u00e0rrega de la informaci\u00f3. D’altra banda, l’\u00e0mbit … <\/p>\n
\nPer aix\u00f2, \u00e9s recomanable utilitzar un estil conc\u00eds<\/strong>, en qu\u00e8 es desenvolupi una idea per par\u00e0graf, i en qu\u00e8 els conceptes principals estiguin visualment destacats (mitjan\u00e7ant negretes, per exemple) o reunits en forma de llistes.<\/p>\n
\n<\/a><\/p>\n\n
\nEstructura de la p\u00e0gina<\/h3>\n
<\/a>
Font: http:\/\/www.uoc.edu<\/figcaption><\/figure>\n
\nD’altra banda, quan plantegem un disseny web, \u00e9s important tenir en compte els diferents dispositius. Per a alguns dispositius \u00e9s necessari plantejar diferents versions o, com veurem m\u00e9s endavant una web responsiva<\/a>, per tal que es visualitzi correctament en els diferents formats. Per tant, tenint en compte la poca difer\u00e8ncia en p\u00edxels d’ample respecte a la resoluci\u00f3 est\u00e0ndard de 1.024 px\u00a0que ens ofereixen algunes tauletes, com per exemple l’iPad, amb una zona visible de 960 px x 640 px, \u00a0molts desenvolupadors dissenyen ja pensant en aquestes mides una mica m\u00e9s redu\u00efts.<\/p>\n\n
<\/a><\/p>\n
\nPel que fa a l’organitzaci\u00f3 visual de les opcions, cal tenir en compte els seg\u00fcents factors:<\/p>\n\n
<\/a><\/a>\n
\nTractament de les imatges<\/h3>\n
\n
\n
<\/a><\/li>\n\n
<\/a><\/li>\n\n
<\/a><\/li>\n<\/ul>\n\n
\n<\/a><\/li>\n\n
\n<\/a><\/li>\n\n
<\/a><\/li>\n<\/ul>\n
\nIntegraci\u00f3 de text<\/h3>\n
\n
\nEl text gr\u00e0fic t\u00e9 l’avantatge de no dependre de les fonts instal\u00b7lades a l’ordinador de l’usuari perqu\u00e8 es visualitzi correctament, per\u00f2 ocupa m\u00e9s espai en suport que el text font.
\nEn entorn web, s’utilitza principalment en titulars, men\u00fas, subt\u00edtols, etc. \u00c9s a dir, en aquells elements que no contenen grans blocs de text i en els que aquest ha de rebre un tractament especial.<\/li>\n
\nEl text font dep\u00e8n de les fonts instal\u00b7lades al sistema de l’usuari, de manera que ha de editar sempre amb tipus de lletra que es troben per defecte en el sistema operatiu de l’usuari (algunes de les fonts de Windows, per exemple, serien Arial, Times, Courier, etc.).
\nEn entorn web, el text font s’utilitza sempre que sigui possible, i especialment en els grans blocs de text: p\u00e0gines de contingut, ajuda, \u00edndexs, etc.<\/li>\n<\/ul>\n
\nM\u00e9s informaci\u00f3<\/h3>\n
\n