Estudis dInformtica, Multimdia i Telecomunicaci.

Grau de Multimdia

Arquitectura de la informaci
Jaume Reig Carrascosa
Quarta Prctica dAvaluaci Continuada (PAC4)

NDEX
I.eSQUeMA --------------------------------------------------------------------------------------3 II.WiReFRAMe --------------------------------------------------------------------------------- 6 III.OBJeCTiUS ---------------------------------------------------------------------------------- 16 IV.OPini PeRSOnAL -------------------------------------------------------------------------- 17 BiBLiOGRAFiA ----------------------------------------------------------------------------------- 18

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

I. ESQUEMA
BSQUEDA HOTELES SOBRE NOSOTROS Continua cap a: A

INFO LEGAL NUESTROS HOTELES Continua cap a: B

PLAYAS ALMERIA

mapa interactiu de les platjes amb informacions generals

LLEGENDA
Entrada al site

GESTIN RESERVA INICIO

Continua cap a: C

Relacions entre pgines Base de dades

CONTACTO

OFERTA DEL DA Oferta del da en format banner grc, en el contingut de la pgina

OFERTAS DEL DA FINES DE SEMANA ESPECIAL PUENTES

Components de pgina Mitjanant la base de dades recuperarem les dades de les ofertes segons els criteris. El Banner mostra de forma alleatria les diferents ofertes en portada. Grups de pgines relacionades

Documents

BANNER

Pgina

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

I. ESQUEMA
Prov de: A INTERFICIE DE CERCA BASE DADES RESERVA

DATES

UBICACI GEOGRFICA

DESCRIPCI HOTEL FOTOS

SERVEIS MAPA UBICACI PREU (PROFORMA)

N HABITACIONS Cerdador hotels per data dentrada i sortida, ubicaci geogrca i n habitacions.

Llistat hotels disponibles segons criteris de cerca

Prov de: B

BASE DADES

RESERVA

FOTOS NOTA1: Camps de cerca (dates entrada, sortida, habitacions) per comprovar disponibilitat hotel.

DESCRIPCI HOTEL PREUS

SERVEIS

Si hotel est disponible

FITXA HOTEL

UBICACI

DISPONIBILITAT
Veure nota1

Recupera el llistat sencer dhotels

Si no est disponible torna a llista hotels

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

I. ESQUEMA
Prov de: C INTERFICIE SEGUIMENT

Si codi reserva s correcte DADES RESERVA

N RESERVA PGINA ERROR Si codi reserva no s correcte

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (HOME)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio BUSCADOR HOTELES Entrada: Salida: Playa Rural Almera (ciudad) BUSCAR Habitaciones: 1 BANER OFERTAS Y PROMOCIONES NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

10

OFERTAS DEL DA

FOTO

OFERTA DEL DA

FINES DE SEMANA

FOTO

ESPECIAL PUENTES

FOTO

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (SUBHOME)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio -> Nuestros hoteles NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

EN LA PLAYA

HOTELES RURALES ALMERA

ALMERA CIUDAD

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (SUBHOME OFERTAS DEL DA)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio -> Ofertas del da H**** MIRADOR DE ADRA H*****ENVIA HOTEL WELLNESS H**** PLAYADULCE NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

H**** PLAYATROPICAL

H**** PORTOMAGNO

H**** PUERTO SALUD

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (FITXA)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

Inicio -> Nuestros hoteles -> En la playa BUSCADOR Entrada: BSQUEDA FILTRADA Salida: Habitaciones: 1 DETALLES Ordenar por: Precio: HOTEL MIRADOR DE ADRA El hotel Mirador de Adra**** se encuentra ubicado en un entorno incomparable a escasos metros del mar. En la playa del poniente abderitano, situado en un pueblo con gran tradicin pesquera, donde hacer la ruta de la tapa entre otras actividades lugareas. El hotel est situado: A 60 km del aeropuerto de Almera, a 40 km de Roquetas de Mar, a 55 km de Almera (Capital), y a 20 km de las Alpujarras orientales. Hasta 50 de 50 a 100 de 100 a 150 ms de 150 Veure Nota pg 10

BUSCAR

DESCRIPCIN

SERVICIOS

FOTOS

UBICACIN

FOTO HOTEL Aqu a sota estarien les altres txes dhotel que siguin de: En la playa. En cas dhaver-hi molts resultats podria paginar-se COMPARTIR:

Categoria: 1 estrella 2 estrella 3 estrella 4 estrella 5 estrella

ALOJAMIENTO: 150 MEDIA PENSIN: 180 PENSIN COMPLETA: 200

COMPROVAR DISPONIBILIDAD

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (FITXA -NOTA)

Botons Javascript. Per defecte surt la pestanya Buscador Si premem el bot Javascript Bsqueda ltrada ens apareixen ms opcions tals com: Categoria, Regim (estncia). Un cop feta la cerca aquest ja mostraria els resultats amb lutilitat de Reserva ja que ja coneixem quins hotels estan disponibles. Aqu podrem ltrar els hotels de les diferents categories: En la Playa; hoteles rurales, etc.. per preu i categoria.

BUSCADOR Entrada:

BSQUEDA FILTRADA Salida:

Habitaciones:

DETALLES Ordenar por: Precio: Hasta 50 de 50 a 100 de 100 a 150 ms de 150

BUSCAR

DESCRIPCIN

SERVICIOS

FOTOS

UBICACIN

HOTEL MIRADOR DE ADRA El hotel Mirador de Adra**** se encuentra ubicado en un entorno incomparable a escasos metros del mar. En la playa del poniente abderitano, situado en un pueblo con gran tradicin pesquera, donde hacer la ruta de la tapa entre otras actividades lugareas. El hotel est situado: A 60 km del aeropuerto de Almera, a 40 km de Roquetas de Mar, a 55 km de Almera (Capital), y a 20 km de las Alpujarras orientales.

FOTO HOTEL

Categoria: 1 estrella 2 estrella 3 estrella 4 estrella 5 estrella

COMPARTIR:

ALOJAMIENTO: 150 MEDIA PENSIN: 180 PENSIN COMPLETA: 200

COMPROVAR DISPONIBILIDAD

Icones de compartici txa hotel a les xarxes socials

Espai on s mostrar la informaci, per defecte surt activat Descripcin. Mitjanant els botons Javascript podrem veure la resta dinformacions: Servicios, Fotos, Ubicacin

En aquest punt encara no sabem si lhotel est disponible. Un cop comprovat ja anem a la utilitat de reserva.

10

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (RESULTAT CERCA)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Com a resultat de la cerca la utilitat ja mostra una proforma i el bot Reservar. Lusuari pot decidir fer una nova cerca. Inicio -> Resultado bsqueda BUSCADOR Entrada: BSQUEDA FILTRADA Salida: 30/12/2011 Habitaciones: 1 DETALLES Ordenar por: Precio: HOTEL MIRADOR DE ADRA El hotel Mirador de Adra**** se encuentra ubicado en un entorno incomparable a escasos metros del mar. En la playa del poniente abderitano, situado en un pueblo con gran tradicin pesquera, donde hacer la ruta de la tapa entre otras actividades lugareas. El hotel est situado: A 60 km del aeropuerto de Almera, a 40 km de Roquetas de Mar, a 55 km de Almera (Capital), y a 20 km de las Alpujarras orientales. Hasta 50 de 50 a 100 de 100 a 150 ms de 150 NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

25/12/2011

BUSCAR

DESCRIPCIN

SERVICIOS

FOTOS

UBICACIN

FOTO HOTEL

Categoria: 1 estrella 2 estrella 3 estrella 4 estrella 5 estrella

Altres resultats de la cerca i paginaci si sescau

COMPARTIR:

ALOJAMIENTO: 150 MEDIA PENSIN: 180 PENSIN COMPLETA: 200

RESERVAR

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

11

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (CONTACTE)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio -> Contacto NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

Hoteles Almera SL C/ Ochoa, 23 05265

Para cualquier consulta sobre reservas, reclamaciones o sugerencias, rellenar el formulario, y en la mayor brevedad posible le contestaremos.

TELFONOS DE CONTACTO Y HORARIOS ATENCIN

Nombre Email Telfono Motivo

Telfono: 950 26 10 10 Fax: 950 26 10 10 Skype: Horarios atencin: de lunes a viernes de 9:00 a 20:00

Comentarios

ENVIAR

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

12

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (MAPA WEB)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio -> Mapa web NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

MEN PRINCIPAL Inicio Nuestros hoteles

En la playa Hoteles rurales Almera Almera ciudad

Cabo de gata Toyo Almera Aguadulce Roquetas de mar El Ejido y Almerimar

Sobre nosotros Mapa web

Playas Almera
Pulp Cuevas de Alzamora Vera Garrucha Mojacar Aguamarga Las negras San Jos

Gestin Reservas Contacto MEN CONTEXTUAL Ofertas del da Fines de semana Especial puentes MEN PIE PGINA Info legal

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

13

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (PLAYAS ALMERA)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio -> Playas Almera NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

LEVANTE ALMERIENSE Pulpi Cuevas de Alzamora Vera Garrucha Mojacar ALMERA Y CABO DE GATA Aguamarga Las negras San Jos Cabo de gata Toyo Amera PONIENTE ALMERIENSE Aguadulce Roquetas de mar El Ejido y Almerimar Berja Adra MAPA INTERACTIVO PLATAS ALMERA

En passar el punter per les diverses zones del mapa ens mostrar una foto de la platja. En fer clic ens enviar a la txa de cada platja.

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

14

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

II. WIREFRAME (GESTIN RESERVA)

LOGO PATRONAT ALMERA RESERVAS 950 26 10 10 INICIO Inicio -> Gestin reservas NUESTROS HOTELES PLAYAS ALMERA GESTIN RESERVAS CONTACTO

LOGO

FOTO CAPALERA

GESTIN RESERVAS

Usuario (Email):

n Reserva VER RESERVA

Info legal - Sobre nosotros - mapa web - Email hotelesAlmera - Direccin - Telfono

15

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

III. OBJECTIUS
Com ja vaig dir en els objectius de lanterior prctica, el meu principal inters en la realitzaci daquesta ha sigut que la utilitat de reserva fos el ms fcil e intutiva possible de cara a lusuari. Per a mi s ms que evident que la utilitat reserva t que ser leix principal de la web, ja que en ella es basa tot el model de negoci de la web (sense reserves per molt bonica y fcil dutilitzar per part de lusuari no hi ha negoci). Totes les altres opcions que estan al voltant de la utilitat de reserva, tals com les informacions sobre platges, hotels i les diverses opcions a visualitzar per part de lusuari en les fitxes dels hotels (fotos, mapa ubicaci, descripci,..) (filtres de cerca segons preu, categoria, rgim allotjament,..) sn simplement un embolcall necessari per acabar de convncer als usuaris, per repeteixo el principal per a mi s que la reserva estigui present en la web de forma continuada i accessible per als usuaris. Per aquest motiu mhe decidit a integrar totes les informacions en la fitxa de lhotel mitjanant pestanyes Javascript, i al mateix temps que lusuari pugui modificar els criteris de cerca dintre la mateixa pgina on es mostren els resultats duna cerca dhotel. Per altra part me nhe adonat (tal i com vas comentar-me en lanterior prctica) que era bastant innecessari que la pgina Sobre nosotros estigues al men global del site, per aquest motiu he posat aquesta etiqueta en el peu de pgina juntament amb la info legal i el mapa web.

16

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

IV. OPINI PERSONAL

Certament lelaboraci duna AI un cop acabada pot semblar una cosa senzilla de realitzar de cara als responsables de donar la conformitat a la proposta web. Justament per la prpia naturalesa dels entregables de la AI, on es sintetitzen totes les idees al mxim perqu els responsables de donar la conformitat a la proposta, com dissenyadors, maquetadors, programadors,.. vegin clarament les pautes que han de seguir en la web. Malgrat aquesta enganyosa percepci que es pugui tindre des de lexterior, jo me nhe adonat que no s una feina banal, com tamb me nhe adonat que durant la fase de realitzaci daquesta arquitectura anava descobrint coses noves, problemes i solucions que no se mhavien acorregut abans de plasmar-ho tot en els documents entregables, i que un cop posats a la prctica ens evitaran molts entrebancs tant en lmbit de disseny grfic, programaci, usabilitat, .. que un cop comenada ja la fase dimplementaci del lloc web podrien ser molt difcils de resoldre, si ni ho haguessin previst amb anterioritat. Per la meva part en faig una valoraci positiva de lassignatura, daquesta feina de conceptualitzar, sintetitzar i finalment plasmar-ho tot sobre paper, en definitiva crear una arquitectura de la informaci dun lloc web.

17

UOC. Estudis dInformtica, Multimdia i Telecomunicaci. Grau de Multimdia

Arquitectura de la informaci. 1er semestre 2011-2012. PAC4. Jaume Reig Carrascosa

BIBLIOGRAFIA
Morville, Peter. Rosenfeld, Louis (1998). Arquitectura de la Informaci per la World Wide Web. OReally Media, Inc, 1005 Gravenstein Highway North, Sebastopol. Collaboradors de la Viquipdia. Folcsonomia [en lnia]. Viquipdia, lEnciclopdia Lliure, 2009 [data de consulta: 17 de octubre del 2011]. Disponible en <http:// ca.wikipedia.org/w/index.php?title=Folcsonomia&oldid=4644621>. Hassan Montero, Yusef Francisco. Fernndez, J. Martn (30 de Marzo de 2003) [en lnia]. Gua de Evaluacin Heurstica de Sitios Web. No solo Usabilidad [data de consulta: 17 de octubre del 2011]. Disponible en < http://www.nosolousabilidad.com/articulos/heuristica.htm>. Collaboradors de la Viquipdia. Benchmarking [en lnia]. Viquipdia, lEnciclopdia Lliure, 2011 [data de consulta: 15 doctubre del 2011]. Disponible en <// ca.wikipedia.org/w/index.php?title=Benchmarking&oldid=7852441>. Rosenfeld. Louis (Aug 17, 2004). Information Architecture Heuristics [en lnia]. Bloug: Information Architecture Heuristics [data de consulta: 17 de octubre del 2011]. Disponible en < http://louisrosenfeld.com/home/bloug_archive/000286.html > Princeton University. Guide to Creating Website Information Architecture and Content [en lnia].[data de consulta: 3 de novembre del 2011]. Disponible en < http://www.princeton.edu/communications/services/docs/IAguide2.pdf> Jesse James Garrett . Un vocabulario visual para describir arquitectura de informacin y diseo de interaccin [en lnia].[data de consulta: 3 de novembre del 2011]. Disponible en < http://www.jjg.net/ia/visvocab/spanish.html> Sofa Savoy . Diseo del Sitio Web para Audiomusica S.A. [en lnia].[data de consulta: 3 de novembre del 2011]. Disponible en <http://wiki.ead.pucv.cl/index.php/ Dise%C3%B1o_del_Sitio_Web_para_Audiomusica_S.A.#Wireframes> fuzzymath.com. how to read a wireframe[en lnia].[data de consulta: 3 de novembre del 2011]. Disponible en < http://blog.fuzzymath.com/2011/07/12/how-toread-a-wireframe/ >

Jaume Reig Carrascosa Desembre de 2011

18