Arquitectura de la información

Neus Barbanoj Fernández

Estudiant de Multimedia

PAC 03
Definirem l’arbre de continguts i un wireframe per a un lloc web responsiu.
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

ÍNDEX
Descripció 2
Per abordar-ho ens podem ajudar de les idees i conclusions extretes de la PAC2 i també podem aplicar noves idees que vagin sortint en el
procés. Hem de continuar amb els mateixos sites seleccionats en la PAC2.
En el cas de voler canviar de site caldria justificar-ho.

Us recordem els sites proposats:

https://www.bachimport.com/es/

https://prnoticias.com/

Haurem d’elaborar un únic document que inclogui els següents blocs: 2

BLOC I 3
Crear un nou arbre de continguts del lloc web corresponent al site seleccionat. 3

BLOC II 7
Definir un wireframe d'una pàgina corresponent al site seleccionat. 7

BLOC III 8
Llistar els objectius que s'han volgut aconseguir amb la proposta d’arbre de continguts i de wireframe (màxim 1 pàgina). 8

1
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

Descripció
Per abordar-ho ens podem ajudar de les idees i conclusions extretes de la PAC2 i també podem aplicar noves idees
que vagin sortint en el procés. Hem de continuar amb els mateixos sites seleccionats en la PAC2.
En el cas de voler canviar de site caldria justificar-ho.

Us recordem els sites proposats:

https://www.bachimport.com/es/

https://prnoticias.com/

Haurem d’elaborar un únic document que inclogui els següents blocs:

2
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

BLOC I
Crear un nou arbre de continguts del lloc web corresponent al site seleccionat.

L'arbre bàsic/senzill ha de ser senzill que mostri només l'estructura de pàgines del site.
L'arbre ha de ser clar i intuïtiu.
Es valorarà les reestructuracions de planes, navegacions, creació de noves planes/continguts i/o eliminació d'altres planes.

3
Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

4
Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

5
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

BLOC II
Definir un wireframe d'una pàgina corresponent al site seleccionat.

PR NOTICIA​​S​: pantalla de detall d'una notícia

Es demana un wireframe amb alt nivell de detall.

El wireframe ha d’estar pensat per ser responsiu, és a dir, que els continguts de cada pàgina s’adaptin i reubiquin correctament als canvis de mida de
les diferents resolucions dels diversos dispositius (escriptori, tablet, mòbil).
Cal dibuixar el wireframe optimitzant per a resolució per a 320 x 480 px de mòbil i a 1280 x 1024 px per escriptori.

ATENCIÓ​​!​ ​Cada pantalla, és a dir cada wireframe dissenyat, caldrà que tingui l’alçada que requereixi els continguts de cada pantalla. Fem cada
wireframe tan alt com necessiti els seus continguts de plana. Caldrà preveure com s’adapten els diferents continguts entre aquestes dues mides de
pantalles. En aquesta adaptació hi haurà reestructuracions.

Si la pàgina proposada conté elements amagats en el contingut central de la pàgina (p.ex. pestanyes, capes) o interaccions importants caldrà
replicar la pàgina o el mòdul corresponent per mostrar aquests elements ocults i interaccions.

Es valorarà la reestructuració i la creació de mòduls de continguts nous i de funcionalitats/tasques noves incloses en el disseny del/s wireframe/s,
l'eliminació d'altres... No es demana cap rèplica de les planes actuals online.
Es recomana començar a dissenyar pel wireframe per a mòbil i després, passar al wireframe per a escriptori. Ajuda a enfocar-se en les tasques
importants.

Anotació​: Ara no cal fer totes les pàgines del site, comencem en aquesta PAC amb una primera proposta de l’arbre i els dos wireframes de la
pantalla demanada i després en la Pràctica ja es revisarà i es completarà amb les pàgines principals del site.

6
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

Aquesta versió de mòbil. Inclou els elements principals de la web, però es destaca la noticia
principal, hem fet elements nous que la web original no tenía. Com ara, els botons de
tornar enrere, o avançar a la següent notícia. Això ens simplifica la web, i la fem més
funcional.

7
Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

Wireframe de la web, a escala

per entrar al document. (Tenim
l'original en un arxiu adjunt).

Aquesta imatge és original

creada amb illustrator.

8
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

WIREFRAME
Capçalera:
Trobem el logo, que cada cop que cliquem ens porta a la pàgina principal, una botonera d’entrar o enregistrar-se, i els logotips de les
xarxes socials principals. I el menú principal de la web. Aquesta capçalera la tindrem en totes les web.

Cos de la web:
El cos de la web, és el que va variant, en el cos trobarem la noticia que volem visualitzar, tindrem la imatge i al costat el text,
a sobre de la noticia podem trobar la botonera de poder tornar enrere o avançar a la següent notícia, però aquesta opció també
la podem trobar a sota de la noticia principal, tindrem dues imatges amb la descripció que ens portarà a la següent notícia o a la
anterior. D’aquesta manera solucionem el problema de teñir totes les notícies desordenades en el cos de la web.

Peu:
En el peu, sempre tindrem la descripció de la web, el telèfon de contacte, i les bases legales.

9
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

BLOC III
Llistar els objectius que s'han volgut aconseguir amb la proposta d’arbre de continguts i de wireframe (màxim 1
pàgina).

Els objectius de crear les modificacions de la web, sempre és millorar el lloc web. Destacaría dos objectius principals: que la web fos pràctica de cara
a l’usuari i estigués preparada per mostrar continguts constantment actualitzats d’una manera atractiva. Un cop evaluada la pàgina amb l’anàlisis
heurístic i el benchmarking, es va anotar que l’usuari permet identificar la web amb el logotip, però hi havia errades de falta d’integració del color
corporatiu en la web, i una lógica ordenada dels elements. Aquesta errada s’ha solucionat simplificant el menú principal, i creant una capçalera i
peu de pàgina en totes les web. I destacar sempre en la pàgina web que estem, que quedi bien identificat.

Un altre dels errors que es van trobar, eren els continguts, no eren descriptius, ara hem modificat això deixant només una notícia per web, amb les
sub noticies sota de la principal, això s'ordena per notícies actualitzades en tot moment. Sempre veurem la última en primera plana. Submenu
simplificats. Només un menú principal, i botons per tornar enrere de la noticia o avançar a la següent, això ens simplificará molts submenu.

La web té pocs gràfics, per tant, això també quedará corregit, donat que les imatges de les noticies serán la principal crida d’atenció a l’usuari, no
només text. Molts cops ens impacta molt més una imatge. El buscador web queda a la capçalera, i molt més vistós.
S’ha creat un apartat de registre per els usuaris per tal de poder contactar amb l’empresa i tenir feedback, això serà important de cara a que molts
cops amb les tecnologies, són els usuaris als que ens poden ajudar a filtrar notícies en cada moment.

La utilitat de la web no era correcta, ja que no s’especialitza en res, i totes les notícies estaven desordenades, al simplificar els menú, ho tindrem
molt més visible, també s’ha re-organitzat el menú principal, amb la principal funció de trobar més fàcilment les noticies que volem trobar.

I per últim, hem creat una web responsiva, que pasada a multidispositivos no perd informació, ni es desordena, una web, simple, i funcional per tots
els multidispositius que volem. Això ens facilita al hora de voler treballar amb altres dispositius que no son escriptori.

10
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

OPINIÓ PERSONAL

El més complex ha sigut crear l’esquema de la web, aparentment es veuen les errades de la web, però quan ens posem a reorganitzar el menú, i
l’esquema de la web ens trobem que és més complicat ordenar una web creada, que fer una de cero, ja que cadascú té els seus criteris a l’hora de
prendre decisions. Per crear l’esquema, he creat primer varis borradors, intentant organitzar i troben temes comuns per crear un menú principal, i a
partir d’aquí seria més senzill crear els submenu.

Finalmente s’ha creat el menú buscant la definición de prnoticies, el objectiu de la web, és informar de tot tipus de notícies, per això el menú s’ha
fet diferenciant les noticies dels diferents medis de comunicació.

Un cop creat el menú principal, ha sigut més senzill continuar i omplir els submenu.

11
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

Recursos

Sobre Arquitectura de la informació:

● http://iainstitute.org/es
● Morville, Rosenfeld (2012). “Arquitectura de la informació per al World Wide Web”.Catalunya. Fundació per a la Universitat Oberta de
Catalunya

Webs emprades per realitzar comparacions de la PAC 02

● https://www.bbc.com/mundo/internacional
● https://www.elconfidencial.com/ultima-hora-en-vivo/
● https://www.survival.es/noticias
● https://news.un.org/es/
● https://www.elmundo.es

Sobre disseny responsiu:

● http://olgacarreras.blogspot.com.es/2014/01/responsive-design-y-accesibilidad.html
● Dimensiones móbiles y tablets: ​http://stefhatcher.com/projects/device-dimensions/
● http://alistapart.com/article/responsive-web-design

12
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

Sobre arbre de continguts:

● http://boxesandarrows.com/site-diagrams-mapping-an-information-space/
● Templates de árboles y wireframes ​http://iainstitute.org/tools/

Sobre les imatges:

Totes les imatges han estat capturades dels llocs web esmentats, i si és el cas, modificades per l’autor.
● Realització d’esquemes / wireframes personals. Originals creades amb Illustrator.

13
 Arquitectura de la información
Neus Barbanoj Fernández
Estudiant de Multimedia

Propietat intel·lectual
Sovint és inevitable, en produir una obra multimèdia, fer ús de recursos creats per terceres persones. És per tant comprensible fer-ho en el marc d'una pràctica dels estudis del Grau
de Multimèdia, sempre i això es documenti clarament i no suposi plagi en la pràctica.

Per tant, en presentar una pràctica que faci ús de recursos aliens, s'ha de presentar juntament amb ella un document en què es detallin tots ells, especificant el nom de cada recurs,
el seu autor, el lloc on es va obtenir i el seu estatus legal: si l'obra està protegida pel copyright o s'acull a alguna altra llicència d'ús (Creative Commons, llicència GNU, GPL ...).
L'estudiant haurà d'assegurar-se que la llicència que sigui no impedeix específicament seu ús en el marc de la pràctica. En cas de no trobar la informació corresponent haurà
d'assumir que l'obra està protegida pel copyright.

Hauran, a més, adjuntar els fitxers originals quan les obres utilitzades siguin digitals, i el seu codi font si correspon.

Un altre punt a considerar és que qualsevol pràctica que faci ús de recursos protegits pel copyright no podrà en cap cas publicar-se en Mosaic, la revista del Grau de Multimèdia a la
UOC, a no ser que els propietaris dels drets intel·lectuals donin la seva autorització explícita.

14