Block Sound Store

Texto completo

(1)Projecte Postgrau Disseny Web. Presentació del projecte. 12/05/2015. Consultor/a: Sergio Schvarstein Liuboschetz Professor: Quelic Berga Carreras. Alumne: Jordi Mata Pàmies. Postgrau de Disseny web: usuaris, interfícies i mòbils.

(2) Índex. 1.. Presentació del projecte ........................................................................................ 3. 2.. Pàgina d’inici ......................................................................................................... 4. 3.. 2.1.. Menú de navegació ........................................................................................ 4. 2.2.. Part superior del cos de la web ....................................................................... 7. 2.3.. Columnes laterals ........................................................................................... 8. a). Columna esquerra .......................................................................................... 8. b). Columna dreta ................................................................................................ 9. 2.4.. Footer o peu de pàgina ................................................................................. 11. “Tienda On-line” i pantalles del procés de compra ............................................... 12 3.1.. Pàgina de categoria ...................................................................................... 12. 3.2.. Fitxa d’article ................................................................................................ 13. 3.3.. Carret de la compra ...................................................................................... 14. 4.. “Comunidad” ........................................................................................................ 15. 5.. “Eventos” ............................................................................................................. 18. 6.. Registre d’usuari .................................................................................................. 20. 7.. Cercador de la web .............................................................................................. 22. 8.. Xat ....................................................................................................................... 24. 9.. Botiga de segona mà ........................................................................................... 25. 2.

(3) 1. Presentació del projecte Amb aquesta web volem reunir totes les eines possibles que pot necessitar un músic o gent relacionada amb la música, tant a nivell professional com amateur i tant per feina com per afició. Quan parlo de músic o gent relacionada amb la música englobo instrumentistes, cantants, tècnics de so, compositors, productors, DJ’s, etc. i tant principiants o professionals. El músic és un usuari molt actiu, li agrada estar informat en tot moment del que pot fer, o del que pot ajudar-lo aconseguir el que vol fer. És un món amb constants canvis i actualització, això genera que el músic, independentment de l’instrument que utilitzi, sigui un usuari que acostuma a consumir molta informació. Què ens passa la majoria de vegades quan busquem informació per internet sobre alguna cosa que ens interessa? Normalment acabem obrint una gran quantitat de pestanyes en el nostre navegador, sobretot quan el nostre objectiu és, per exemple, comprar algun producte. Aquesta acció ens genera una sèrie de comportaments reflexes diferents a quan simplement el que busquem és informació gratuïta i que com a molt la guardarem al nostre ordinador o dispositiu mòbil. Quan volem comprar, primer de tot busquem informació en diferents webs, blogs, busquem opinions d’altres usuaris, etc. i després si ens decidim a comprar tampoc ens agrada o ens fa por comprar a una web que no coneixem o que no la tenim com a web habitual i ens genera desconfiança. El que volem al crear aquesta web, és englobar totes aquestes parts, creant un lloc on l’usuari pugui extreure informació o compartir-la, comunicar-se amb altres usuaris i interactuar, comprar, vendre o inclús intercanviar productes, i finalment crear una web de confiança per l’usuari i un referent en el món de la música. Aquesta web, en aquest cas, està enfocada en la part musical però es pot utilitzar i adaptar a qualsevol sector amb un perfil similar on es mescli la part professional i amateur com podria ser el sector del motor, alpinisme, etc.. 3.

(4) 2. Pàgina d’inici A la figura 1 es pot observar la pàgina d’inici de la web, on l’usuari podrà trobar una mostra de cada part de la web.. Figura 1. Pàgina d'inici i distribució inicial del projecte. 2.1.. Menú de navegació. A la part superior trobem el menú principal on podrem tenir accés a totes i cada una de les parts de la web, que són les següents: Tienda on-line: en aquesta part del menú, trobem separat per seccions, tot el material que es pot comprar a la botiga, aquesta secció té submenús per de cada categoria . (figura 2) Novedades: en aquesta part del menú, trobem el producte nou, material que sortirà al mercat pròximament i els productes més venuts, hi ha una última part amb mostra visual dels 4 productes més venuts de la web (figura 3) Comunidad: en aquesta secció, trobem moltes opcions per interactuar amb altres usuaris de la web mitjançant els fòrums o directament amb la web en temps real utilitzant els xats. En els fòrums, podem trobar consultes d’altres usuaris amb les 4.

(5) respostes donades per altres usuaris i podem respondre també nosaltres, podem fer consultes, etc. També tenim una secció compra/venta de segona mà entre usuaris (figura 4) Eventos: on trobem tots els esdeveniments anunciats tant per la web com per els usuaris. Podem filtar aquesta secció amb els filtres de recerca per data, ciutat, estil etc. (figura 5). Contacto: on trobarem links directes a les xarxes socials de la web o enviar un email (figura 6).. Menú Novedades desplegat. Figura 2. Menú de la secció “Tienda On-line” desplegat. Figura 3. Menú de la secció “Novedades” desplegat. 5.

(6) Figura 4. Menú de la secció “Comunidad” desplegat. Figura 5. Menú de la secció “Eventos” desplegat. Figura 6. Menú de la secció “Contacto” desplegat. Un cop vist els diferents menús desplegats del menú principal, veurem les diferents parts fixes de la web. A la pàgina web, hi han algunes parts fixes que apareixen a tota la web i que explico a continuació.. 6.

(7) 2.2.. Part superior del cos de la web. A la part superior del cos de la web hi ha un slider interactiu amb les últimes novetats de productes, com el que es mostra a la figura 7, que és el que apareixerà a la pàgina prncipal. Podrem clickar en qualsevol d’aquest productes per veure la seva fitxa completa o podrem moure’ns a dreta i esquerra per veure altres productes indicats com a novetats.. Figura 7. Slider superior amb les últimes novetats de la web. A la part superior de les altres pàgines apareixeran banners aleatoris, com per exemple els que mostren novetats de productes a la web (com el que s’ha presentat a la figura 7), els productes més venuts (figura 8), ofertes (figura 9) o altres banners aleatoris. Això, a nivell de programació es seleccionarà al introduir el producte, inclús es podria marcar un període de temps on aquest producte apareixerà com a novetat. L’aparició d’aquests productes en aquesta part serà aleatòria per atreure l’atenció de l’usuari cada cop que entra i que no aparegui sempre els mateixos productes.. Figura 8. Banner aleatori 1. Figura 9. Banner aleatori 2. 7.

(8) 2.3.. Columnes laterals. En aquest apartat es detallen les columnes laterals de la web, que com s’explicarà a continuació poden ser variables en funció de la pàgina que visiti l’usuari.. a) Columna esquerra A la part esquerra de la web tenim una columna que ens mostrarà diferent informació. La part superior d’aquesta columna variarà segons la pàgina de la web que l’usuari estigui consultant. Per exemple, a la pàgina d’inici, la part superior de la columna esquerra ens mostra els productes més venuts, d’aquesta manera l’usuari sempre tindrà relació de quins son els productes “top vendes” (figura 10). En algunes seccions de la web aquesta informació varia. Per exemple quan estiguem a la secció de la “Tienda on-line”, veurem en aquesta part un menú de les diferents seccions de la botiga (figures 11 i 12). Això s’ha fet així per facilitar la navegació de l’usuari en aquesta secció i evitar la incomoditat de tenir que desplegar aquesta secció des de el menú principal. En la part inferior de la columna lateral esquerra, sempre trobarem un filtre de recerca (figures 10, 11 i 12). Aquest filtre funciona per la secció en la que estiguem en el moment de fer la recerca.. Figura 10. Columna lateral esquerra de la pàgina d’inici.. Figura 11. Columna lateral esquerra de la secció “Tienda online”.. Figura 12. Columna lateral esquerra de la secció “Tienda online”, subsecció “Instrumentos”. 8.

(9) b) Columna dreta A la columna de la dreta trobem, en primer lloc, l’accés per l’usuari registrat, l’opció per fer el registre o l’opció de recordatori de la contrasenya si aquesta s’hagués oblidat (la contrasenya serà reenviada a l’adreça d’email que l’usuari ha utilitzat a l’hora de fer el registre), i també un espai perquè es puguin fer cerques concretes, tal i com es pot veure a les figures 13 i 14. Aquestes seccions (registre d’usuaris i cercador de la web) s’expliquen en els següents punts). La informació que apareix a la part inferior de la columna dreta (sota les opcions d’accés, registre i cercador) varia en funció de la pàgina que l’usuari estigui visitant, però sempre estarà relacionada amb les seccions participatives de la web (el fòrum, accés al xat, esdeveniments, etc.), explicades a continuació.. Figura 13. Columna lateral dreta, amb els últims posts al fòrum.. Figura 14. Columna lateral dreta, amb el menú del fòrum i els esdeveniments recents.. 9.

(10) La part inferior de la columna lateral dreta, com s’ha comentat anteriorment, té dos formats: en la majoria de seccions de la web trobarem un llistat dels últims posts que hi ha en el fòrum (com s’ha vist a la figura 13 i com mostra més detalladament la figura 15). Això és útil perquè sempre tindrem una referència dels últims fils de conversa que hi ha en els fòrums. Aquesta part inferior serà diferent un cop l’usuari estigui logejat (mostrat a la figura 14 i amb més detall a la figura 16). En aquest cas, trobarem un petit menú dels fòrums, on podrem veure o modificar el nostre perfil, podrem tornar al índex de la web, veure els posts propis de l’usuari i les respostes, els últims posts o directament veure les categories del fòrum. A continuació, també trobem un link al xat de la web per parlar o deixar un missatge al comercials de la web, així com també tenim un link directe a la secció de compra i venta de producte de segona mà. Per finalitzar, trobem un petit quadre on veiem els esdeveniments programats pel dia a l’inici de la llista i, des de la fletxa de la part inferior d’aquest quadre, podem veure més esdeveniments tant del mateix dia com de dies posteriors.. Figura 15. Part inferior de la columna lateral dreta, amb els últims posts al fòrum.. Figura 16. Columna lateral dreta, amb el menú del fòrum i els esdeveniments recents.. 10.

(11) 2.4.. Footer o peu de pàgina. Aquesta part és la última secció fixa de la web. Aquí trobem el logotips de cada patrocinador de la web amb links directes a les seves webs, també hi ha un petit menú de la web (igual que el menú principal però més reduït) on, a part d’anar directament a cada secció de la web, també podrem logejar-nos. També hi ha els logotips a les xarxes socials, un text amb el copyright de la pàgina, i l’accés al xat directe amb els comercials de la web (explicat més endavant), tal i com s’observa a la figura 17.. Figura 17. Footer de la web.. Un cop vistes i explicades la pàgina inicial i les parts fixes de la web, a continuació hi ha l’ explicació de cada una de les seccions, presentades en el següent ordre: -. “Tienda on-line” i pantalles del procés de compra. -. Comunidad. -. Eventos. -. Pàgines de registre. 11.

(12) 3. “Tienda On-line” i pantalles del procés de compra Aquest és el format que trobem quan entrem a la secció de “tienda on-line” (figura 18). Els productes que apareixen inicialment són una selecció aleatòria de productes de les diferents categories de la botiga. Com hem vist anteriorment (punt 2.3.a), s’observa que el contingut de la columna de l’esquerra ha canviat, mostrant un menú de les categories de la botiga.. Figura 18. Pàgina de la secció “Tienda on-line”.. Des d’aquest menú desplegable situat a la part esquerra de la pàgina, on hi ha cada una de les seccions de la botiga on-line i també el filtre de recerca, podem navegar per diferents categories de la web de forma senzilla.. 3.1.. Pàgina de categoria. Quan fem click en una categoria, ens apareixen productes que estan dintre d’aquesta categoria en la part central. Per exemple, la figura 19, mostra la imatge que veuríem si haguéssim seleccionat la categories de guitarres. En aquesta figura també podem veure que el banner superior ha canviat i ara ens mostra els productes més venuts d’aquesta categoria. Totes les categories tindran el mateix comportament respecte el 12.

(13) panell de productes de la part superior. També veiem en la part inferior que tenim un petit panell de navegació per pàgines, des d’on podem veure les pàgines següents o anteriors dintre de la categoria en la que estiguem.. Figura 19. Pàgina de la secció “Tienda on-line” amb la categoria “Guitarras” seleccionada.. 3.2.. Fitxa d’article. Des de la pàgina de categoria, així com des dels sliders superiors amb productes, podem entrar a la pàgina o fitxa de cada article, és a dir, de cada producte de la web. Com a exemple, a la figura 20, es mostra la fitxa d’un teclat. Des de la fitxa de producte podem realitzar les següents accions: -. veure les especificacions tècniques del producte veure imatges del producte valorar amb estrelles el producte conèixer la pàgina del fabricant veure el manual d’instruccions visualitzar vídeos des de Youtube buscar posts relacionats amb aquest producte al fòrum de la web si n’hi ha fer m’agrada o compartir el producte a Facebook Comparar-lo o afegir-lo al nostre carret de la compra. 13.

(14) Figura 20. Pàgina de “fitxa d’article”, amb les seves diferents funcionalitats.. 3.3.. Carret de la compra. Si des de la pàgina de “fitxa d’article” fem click al botó de compra s’afegirà el producte a la cistella de la compra (figura 21) i podrem finalitzar al compra o seguir comprant més articles.. Figura 21. Pàgina de carret de la compra. 14.

(15) 4. “Comunidad” Estem a la secció de Comunitat on inicialment es mostra el menú dels fòrums. En aquesta secció trobarem una sèrie de canals de conversa per poder interactuar amb altres usuaris sobre productes, dubtes tècnics, buscar o donar consells, etc. Quan entrem en aquesta secció (figura 21), la columna de la dreta ens mostra un panell de menú del fòrum, on també hi ha un accés al xat comercial de la web, a la secció de compra/venta entre usuaris i un petit quadre on ens informa dels pròxims esdeveniments anunciats.. Figura 21. Pàgina inicial de la secció “Comunidad”.. A continuació es mostren dues imatges del contingut del fòrum. En la primera imatge (figura 22) veiem el format del fòrum amb la secció d’instruments acústics desplegada i en la segona amb la secció d’instruments elèctrics desplegada (figura 23). Totes les seccions es desplegaran o contrauran quan les anem obrint o tancant. Tenim un submenú en cada secció, podem observar que en cada línia de secció veiem informació com títol del post, quantes respostes a obtingut i la data de creació del post.. 15.

(16) Figura 22. Pàgina de format del fòrum amb la secció d’instruments acústics desplegada.. Figura 23. Pàgina de format del fòrum amb la secció d’instruments elèctrics desplegada. 16.

(17) En la següent imatge (figura 24), veiem que un cop seleccionat un missatge del fòrum es dividirà la finestra i el visualitzarem en la part inferior, on apart del missatge, veurem també les respostes que pugui tenir, en el cas que hi hagin més d’una resposta aquesta finestra tindrà un scroll o una fletxa, que ens permetrà baixar el text que visualitzem a primera instància i podrem veure la resta del contingut del post.. Figura 24. Pàgina de format del fòrum amb un missatge seleccionat.. 17.

(18) 5. “Eventos” En aquesta secció de la web trobarem un calendari d’esdeveniments, com per exemple concerts, demostracions de producte, clinics/masterclass de músics, festivals de música, fires demostratives i tot el que estigui relacionat amb el so i la música. Com veiem en la imatge següent (figura 25) tenim dos columnes en el cos de la web. A la columna de l’esquerra veiem els esdeveniments programats per ordre de proximitat de data. Per defecte, quan obrim aquesta secció, veurem aquesta llista sense cap filtre, això significa que veurem tots els esdeveniments en orde de data però mesclats en ubicació. A la columna de la dreta tenim, primer de tot, un calendari on podem seleccionar un mes i un dia del calendari i ens mostrarà a la columna de l’esquerra els esdeveniments programats per aquell dia o dies. També podem utilitzar els filtres de sota del calendari per filtrar la recerca. Podem cercar per ubicació, estil d’esdeveniment, data, lloc on es farà o preu. A la part inferior hi ha on botó on podrem informar d’un esdeveniment i que el pugui veure tothom.. Figura 25. Pàgina de la secció d’”Eventos”.. 18.

(19) En la imatge inferior (figura 26), sota el calendari, veiem el que trobem un cop hem premut el botó d’informar d’un esdeveniment. Haurem de omplir un formulari, on caldrà estar registrat per poder fer-ho, i ens demanarà el nom de l’esdeveniment, la data, la ciutat, el lloc, el preu, etc.. Figura 26. Pàgina per publicar un esdeveniment propi.. 19.

(20) 6. Registre d’usuari Per tal de registrar-se com a usuari de la web, els usuaris tenen dues opcions: o fer-ho com a particular, o com a professional. En el formulari per donar-se d’alta es demanen les dades més habituals, però hi ha diferències segons el tipus d’usuari que es desitgi (particular o professional). En el formulari per usuaris particulars l’opció de fer el registre ràpidament utilitzant el registre d’algunes de les xarxes socials més importants, mentre que en el registre per professionals no hi ha aquesta opció ja que s’han de donar d’alta amb el NIF d’empresa, etc. A continuació veiem les dos imatges del formulari de registre, tant per usuaris particulars (figura 27) i per usuaris professionals (figura 28).. Figura 27. Pàgina de registre com a usuari particular.. 20.

(21) Figura 28. Pàgina de registre com a usuari professional.. 21.

(22) 7. Cercador de la web Per últim, com s’ha vist anteriorment, la web també ofereix l’opció de fer una cerca, que ens buscarà per paraula o paraules dintre del contingut de la web que contingui aquest text. També tenim l’opció de fer una recerca avançada, en la qual podrem definir més acuradament els paràmetres per fer la cerca que desitgem. En les dos següents imatges veiem el formulari per fer una recerca avançada (figura 29) i el resultat de la recerca, ja sigui simple o avançada (figura 30).. Figura 29. Pàgina de cerca.. 22.

(23) Figura 30. Pàgina de resultats de la cerca.. 23.

(24) 8. Xat Com s’ha comentat anteriorment, una de les potencialitats de la pàgina web que proposo és la possibilitat d’interacció i intercanvi entre els usuaris i els professionals de la web. Una eina que permet aquest intercanvi (a part dels fòrums, la botiga de segona mà, etc.), a temps real, és el xat de comunicació directa amb els comercials de la web. La figura 31 mostra, al peu de la pàgina web, la finestra de xat oberta, en cas que l’usuari hagi escollit activar aquesta opció.. Figura 30. Finestra del xat oberta.. 24.

(25) 9. Botiga de segona mà En aquesta secció els usuaris, registrats prèviament, podran vendre, comprar i intercanviar material i productes de segona mà. El format de la pàgina és molt similar al del fòrum, on els usuaris poden penjar anuncis, buscar-ne, respondre a peticions, etc., tal i com es pot veure a la figura 31 (pàgina principal de la botiga de segona mà) i figura 32 (botiga de segona mà amb un missatge obert).. Figura 31. Pàgina principal de la botiga de segona mà.. 25.

(26) Figura 32. Pàgina de la botiga de segona mà amb missatge obert i quadre de text per escriure.. 26.

(27)