[Disseny d'interfícies multimèdia] PAC 2: Disseny d'interacció multiplataforma

download

of 14

  • date post

    30-Oct-2014
  • Category

    Documents
  • view

    968
  • download

    0

Embed Size (px)

description

Ms informaci a elmeuordinador.blogspot.com

transcript

<p>DISSENY DINTERFCIES MULTIMDIA</p> <p>DISSENY DINTERACCIMULTIPLATAFORMAPAC 2</p> <p>JORDI LLONCH ESTEVECC BY-NC-SA</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p> NDEXndex .................................................................................................................................... 2 1. Arbre de continguts per a mbil ............................................................................. 3 2. Wireframes ..................................................................................................................... 4 2.1 Wireframes per a mbil ........................................................................................ 4 2.2 Wireframes per a tauleta ....................................................................................... 8 3. Informe.......................................................................................................................... 12 3.1 Arbre de continguts per a mbil .................................................................... 12 3.2 Adaptaci per a mbils i tauletes ................................................................... 12 3.3 Caracterstiques fonamentals de lAI ............................................................. 12 3.4 Experincia personal ........................................................................................ 13 4. Bibliografia i altres recursos................................................................................... 14</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 2/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>1. A RBRE DE CONTINGUTS PER A MBILMes actual Notcies Mesos passats Actualitat Properament Bloc del Cmic Blocs Bloc del Manga</p> <p>Europeu</p> <p>Origen</p> <p>Nordameric</p> <p>Japons</p> <p>Manga Tipus Cmic</p> <p>Navegaci segons</p> <p>Infantil</p> <p>Edat</p> <p>Juvenil</p> <p>Autors</p> <p>Adult</p> <p>Superherois</p> <p>Catleg</p> <p>Sries</p> <p>Supervendes</p> <p>Microsites</p> <p>Reimpressions</p> <p>Inici</p> <p>CIMOC Cmics online</p> <p>Catleg anual</p> <p>Presentaci</p> <p>Enviament d'arts</p> <p>Sala de premsa</p> <p>Sobre l'empresa</p> <p>Borsa de feina</p> <p>Norma Cmics</p> <p>Distribuci</p> <p>Localitzador de tendes</p> <p>Contacte</p> <p>Normacomics.com</p> <p>Informaci complementria</p> <p>Termes legals</p> <p>Cerca</p> <p>Webmaster</p> <p>Mapa web</p> <p>Carro Entra Identifica't Nou usuari Com comprar</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 3/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>2. W IREFRAMES2.1 W IREFRAMESPER A MBIL</p> <p>Pgina inicial</p> <p>Pgina de cerca</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 4/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>Pgina de registre</p> <p>Pgina de catleg segons edat</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 5/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>Pgina dactualitat</p> <p>Pgina duna notcia</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 6/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>Pgina duna fitxa de llibre</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 7/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>2.2 W IREFRAMES</p> <p>PER A TAULETA</p> <p>Pgina dinici</p> <p>Pgina de cmics supervendes</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 8/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>Pgina de notcies</p> <p>Pgina dautors</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 9/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>Pgina de presentaci</p> <p>Pgina duna fitxa de llibre</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 10/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>Pgina del carro de compra</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 11/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>3. I NFORME3.1 A RBREDE CONTINGUTS P ER A MBIL</p> <p>La pgina web de Norma Editorial s molt complexa i disposa de molta informaci, la qual cosa implicaria una navegaci massa complicada si es volgus reproduir de la mateixa manera en un dispositiu mbil de mida reduda, per aix he aplicat molts canvis en larbre de continguts descriptori. Per comenar haig de dir que he emprat el mateix codi de colors de larbre base en el nou arbre de continguts per a facilitar el reconeixement dels elements de manera rpida. La nova reestructuraci dels continguts permet localitzar la informaci que es busca de manera ms rpida. He aconseguit aix, remodelant per complet la categoria Catleg, la qual disposa ara de vries formes daccs a la informaci ms important. He eliminat la categoria Enllaos de la pgina original per passar a incloure el que aquella contenia de manera desendreada a les fitxes de cada autor, llibre, subapartat, etc. depenent de cada cas. Aix doncs, crec que he aconseguit tant una navegaci ms fluda com una percepci de menys sobrecrrega dinformaci.</p> <p>3.2 A DAPTACI</p> <p>PER A MBIL S I TAULETES</p> <p>Els aspectes tinguts en compte durant ladaptaci de la pgina web descriptori a telfons mbils intelligents i a tauletes (en format vertical) sn varis i els podem trobar als materials de lassignatura: Pblic objectiu: el mateix que la pgina web. Usabilitat: lusuari s ms exigent amb els resultats duna pgina web en un telfon mbil. Adaptaci tctil: he adaptat les accions de ratol i teclat a les accions que es poden portar a terme amb els dits.</p> <p>3.3 C ARACTERSTIQUES</p> <p>FONA MENTALS DE L AI</p> <p>Trobo que lexperincia de navegaci per la versi web s massa feixuga i t fora mancances de contingut, identitat, navegaci, etiquetatge, utilitat, de grfics i de retroalimentaci. Tot i que el nou arbre de continguts est adaptat per a telfons mbils intelligents, amb poques modificacions podria esdevenir un arbre ms lgic i ms til que lactual de la versi descriptori.</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 12/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>3.4 E XPERINCIA</p> <p>PERSONAL</p> <p>Per concloure, haig de dir que aquesta proposta ha estat possible grcies a lestudi previ i anlisi de PACs i prctica de lassignatura Arquitectura de la informaci, cursada el quadrimestre anterior. imprescindibles per al plantejament de les solucions que he expressat en aquesta PAC. Quanta ms informaci he recopilat, ja sigui analitzant la pgina web, repassant la meva feina del curs passat o revisant el model de proposta que proporciona lenunciat, ms fcil mha resultat dur a terme lactivitat. Per aix, les dificultats que he trobat han estat les relacionades amb la fase danlisi, ja que crec que s la part ms important del disseny (o redisseny) de qualsevol arquitectura dun lloc.</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 13/14</p> <p>Disseny dinterfcies multimdia PAC 2: Disseny dinteracci multiplataforma</p> <p>4. B IBLIOGRAFIA I ALTRES RECURSOSTona Monjo Palau. Disseny dinterfcies multimdia. Barcelona. Fundaci per a la Universitat Oberta de Catalunya, 2011. Wiki de lassignatura. [en lnia]. Disponible a Internet noms a travs del campus virtual. Consideracions bsiques per al desenvolupament daplicacions mbils. [en lnia] http://www.slideshare.net/soreygarcia/consideraciones-basicaspara-el-desarrollo-de-aplicaciones-mviles [Consulta: octubre 2012] Responsive design: [en lnia] http://xn--diseowebresponsivo-q0b.com.ar/ http://uxdesign.smashingmagazine.com/2012/05/30/design-processresponsive-age/ http://bradfrost.github.com/this-isresponsive/index.html [Consulta: octubre 2012] Les imatges presents en aquest document sn de domini pblic, de producci prpia o semparen a ls raonable (fair use).</p> <p>Jordi Llonch Esteve</p> <p>CC BY-NC-SA</p> <p>Pg. 14/14</p>