Creació de la pàgina web de l'Associació Esportiva BCN

Creació de la pàgina web de l’Associació Esportiva BCN 1 1. INTRODUCCIÓ Internet és la via de comunicació més fàcil i econòmica d’arribar a tot el món. Per aquest motiu, cada cop més gent es connecta a la xarxa a la recerca d'informació i/o serveis. La necessitat d’informació a l’instant i les diferents i noves formes de comunicació han ubicat a Internet com una de les principals fonts d’informació i comunicació del món. Ser-hi presents en aquest medi es quelcom que les principals empreses fan cada vegada amb major conveniència per a prevaldre en els competitius mercats actuals. Així doncs, l’ús d’Internet pot proporcionar molts avantatges que es tradueixen en millorar la difusió, captació de nous clients, informació i identificació. Es podria dir que una pàgina web [0]: - És la tarja de presentació de tot aquell que es dedica a una activitat professional. - Pot ser el millor venedor. - Pot ser vista per milions d'usuaris en el món, les 24 h, els 365 dies de l'any. - El cost de mantenir d’un lloc web a Internet és molt baix comparat amb altres mitjans publicitaris. - Dóna a l’empresa una imatge de qualitat i constant progrés. - Dóna avantatge competitiu. - Dóna igualtat de condicions per a competir amb altres professionals. Cal dir que algunes d’aquestes raons han estat claus a l’hora de fer sorgir la necessitat d’aquest projecte. D’una banda la pròpia motivació personal i d’altra la creada per l’Associació, han fet que es consolidés la realització d’aquest. El que es pretén amb aquest projecte és mostrar cóm amb un mínim de recursos es pot crear una pàgina web mitjançant un Gestor de Continguts. Introducció 2 Creació de la pàgina web de l’Associació Esportiva BCN 3 2. OBJECTIUS El que es vol amb aquest projecte, és crear una pàgina web dinàmica per a l’Associació Esportiva BCN. Mitjançant un Gestor de continguts es pretén que, tot i no tenir coneixements de programació i codificació, sigui possible realitzar una gestió i un manteniment de la pàgina a l’abast de qualsevol administrador. Els continguts s’aniran renovant a mesura que hi hagin noves activitats a l’Associació. Es poden distingir dos grups d’objectius: - Objectius sobre contingut: o Crear i introduir animacions flash. o Inserir imatges i galeries d’imatges. o Inserir vídeos propis i incrustar vídeos, relacionats amb l’associació, d’altres pàgines si s’obté el consentiment. o Inserir arxius (PDF’s). o Inserir un formulari de contacte. o Crear les pàgines php necessàries per visualitzar el seu contingut. - Objectius sobre disseny: o Disseny: confeccionar el disseny i prendre decisions sobre aquest per tal d’aconseguir que sigui atractiu i accessible tenint present la funció que ha de realitzar. o Distribució i estructuració del contingut: Realitzar una correcta distribució i estructuració del contingut de la web. - Objectius sobre Wordpress: o Conèixer el funcionament d’un sistema de gestió de continguts. o Saber gestionar els continguts d’una pàgina web mitjançant un CMS. o Crear un menú principal. o Crear un submenú i els diferents nivells necessaris per a la navegació entre els diferents continguts. o Instal·lar, activar i utilitzar plugins per ampliar les opcions de WordPress. Objectius 4 Creació de la pàgina web de l’Associació Esportiva BCN 5 3. ASSOCIACIÓ ESPORTIVA BCN 3.1. Projecte esportiu L’Associació esportiva BCN és una entitat sense ànim de lucre que es dedica a organitzar activitats físico-esportives per a persones amb discapacitat intel·lectual al districte de Sarrià-Sant Gervasi de Barcelona. Aquesta associació té com a objectiu principal garantir la integració de la pràctica físicoesportiva dins dels hàbits de vida diària dels seus usuaris. Actualment, dóna resposta a 355 esportistes amb discapacitat intel·lectual dins del districte esmentat amb anterioritat. Arrel de la tasca desenvolupada des de la seva constitució l’any 1997, l’associació ha esta guardonada durant aquesta temporada amb la Medalla d’Honor de la ciutat de Barcelona en reconeixement al comprimís amb el foment de l’esport entre les persones amb discapacitat com a via d’inclusió i de millora de la qualitat de vida. L’Associació Esportiva BCN parteix de la premissa que tothom pot gaudir de les activitats físico-esportives: L’esport com a eina de millora de la qualitat de vida Durant els anys 90, arrel de la detecció de necessitats realitzada dins del sector de població amb discapacitat intel·lectual, es planteja la possibilitat de pal·liar-les mitjançant la pràctica diària d’activitats de caire físico-esportiu. Progressivament, crea un programa poliesportiu amb la intenció de contribuir a l’assoliment d’una qualitat de vida òptima per als seus esportistes. Requeriments del client 6 Aquesta pràctica té com a punt de referència teòric, de manera transversal, els estudis del Dr. Robert Shalock sobre qualitat de vida 1. Aquesta teoria estableix vuit dimensions com a indicadors de la qualitat de vida. L’Associació Esportiva BCN, mitjançant el seu programa d’activitats físico-esportives promou amb els seus usuaris l’assoliment de set d’aquestes vuit dimensions, com són: benestar físic, benestar emocional, relacions interpersonals, desenvolupament personal, autodeterminació, inclusió social i execució de drets. D’altra banda, cal destacar que aquesta associació treballa amb l’esport considerant aquest com un mitjà per aconseguir les seves finalitats. En el marc del treball diari amb els seus esportistes es considera l’esport com el pretext; el pretext per conèixer món, per conèixer altres persones, per aprendre, per reconèixer errades, el pretext per aprendre a guanyar i a perdre, per entendre que hi ha millors i pitjors, que tots som diferents i que aquesta diversitat aporta molta riquesa personal. 1. Schalock, Robert L. i Verdugo, Miguel Ángel, Calidad de vida: manual para profesionales de la educación, salud y servicios sociales. Alianza Editorial, S.A. Grupo Anaya. Madrid. 2003. Kenneth D. Keith and Robert L. Schalock. Cross Perspectives on Quality of live. Research Monographs & Books American Association on Mental Retardation444 North Capitol Street, NW.Suite 846. Washington, DC 20001-1512. 2000. Creació de la pàgina web de l’Associació Esportiva BCN 7 4. REQUERIMENTS DEL CLIENT 4.1. Objectius de la web de l’Associació Els objectius fixats per l’Associació Esportiva BCN són els següents:  Difusió: Mitjançant la web, l’Associació pretén donar-se a conèixer i donar difusió de totes les activitats que realitza.  Informació: L’associació pretén que la web sigui una eina de consulta per als usuaris, familiars i responsables dels centres, i que d’aquesta manera puguin assabentar-se dels esdeveniments esportius que es van organitzant: horaris, adreces, dates, requisits i organització, així com també que puguin accedir per veure cóm ha anat o què ha passat a aquelles activitats o actes als que no han pogut assistir.  Identificació: L’associació vol que aquesta web esdevingui el focus d’interacció comú entre tots els usuaris i centres que la configuren. D’aquesta manera, l’associació serà com una xarxa amb un nucli d’interacció comú. La pàgina web esdevé un punt on tots poden adreçar-se per veure’s identificats, trobar les classificacions de la lliga, del seu equip o d’altres.  Captació d’entitats col·laboradores: Donat que l’associació és una entitat sense ànim de lucre, requereix de l’obtenció de subvencions i del suport d’entitats col·laboradores per tal d’aconseguir fer l’esport més accessible als seus usuaris, la majoria dels quals necessita atenció individualitzada o en grups reduïts. Requeriments del client 8 4.2. Justificació del moment Aprofitant l’existència d’un vincle que ens permet treure profit per ambdues parts (projecte final de carrera - necessitat de posar en marxa i materialitzar un projecte de pàgina web que fins ara era un objectiu de l’associació i que aquesta encara no havia pogut sortir endavant). Un altre motiu és que es viu a la era de la comunicació i les noves tecnologies, amb les avantatges que aquesta pot donar, s’ha cregut convenient posar en marxa una pàgina que permeti avançar i modernitzar a l’Associació. 4.3. Requisits de la pàgina - Accessibilitat: que permeti accedir a persones sense grans coneixements de navegació per Internet i als usuaris de l’associació, amb majors o menors necessitats de suport. - Dinamisme: la imatge de l’associació és actual, dinàmic i de caire esportiu. Vol transmetre vitalitat, frescor, evolució costant, energia i naturalitat per que fa al disseny. L’associació és una entitat jove i vol continuar creixent i evolucionant sense deixar mai d’innovar. - Funcional: que no deixi mai d’estar actualitzada a partir del moment de la seva presentació oficial. Que obeeixi a als objectius plantejats a l’apartat anterior (4.1. Objectius de la web de l’Associació). Creació de la pàgina web de l’Associació Esportiva BCN 9 5. ELECCIÓ D’ARQUITECTURA La idea inicial és fer una pàgina web en HMTL o FLASH, ja que els coneixements adquirits durant el grau ho permeten. Durant la primera reunió amb el tutor ponent del projecte, es suggereix que la millor opció per desenvolupar una pàgina web, amb unes característiques com les que requereix l’Associació, és un gestor de continguts. La justificació de la recomanació es basa en els següents raonaments:  L’associació necessita una pàgina dinàmica, ja que es fa una actualització de continguts, amb certa freqüència, incorporant de nous.  Permet una publicació ràpida de contingut.  No es requereix coneixements sobre maquetació ni programació.  Facilita la gestió, ja que els continguts es troben separats del full d’estil.  Els arxius es troben en una base de dades de forma estructurada i emmagatzemats en un servidor. Donat els avantatges que donen els gestors de continguts respecte de la creació d’una pàgina web en HTML o Flash (pàgines de caire més estàtic), s’arriba a la conclusió de que un CMS és una de les millors opcions per a la creació de la pàgina web de l’Associació Esportiva BCN. 5.1 Estudi i comparativa dels CMS més adients Un sistema de gestors de continguts (Content Management System) és un software que permet crear una estructura framework dissenyada per a donar suport al desenvolupament de llocs web dinàmics, aplicacions web i serveis web. Aquest software es troba en un servidor web al que normalment se li incorporen bases de dades que permeten a WordPress 16 - Pàgines Un cop ja tenim la plantilla carregada, el següent pas a donar és el de crear les pàgines. Amb la creació de pàgines, el que s’aconsegueix és la creació del menú principal de la pàgina web. Per crear una pàgina cal anar a l’opció Pàgines del menú principal i clicar Afegir. - Introduir contingut Un cop a l’editor de la nova pàgina, es poden veure diferent elements: o Títol de la pàgina: És necessari donar-li un nom a la pàgina. o Insercions multimèdia: Per inserir fotos, vídeos, sons i objectes. o Barra d’eina d’edició: permet editar el text que s’introdueix. o Edició Visual: edició de tipus “el que es veu és el que s’obté”. o Edició HTML: edició d’una entrada a través de la introducció de codi HTML. o Estat de la publicació: Esborrany, Publicat, Privat, Protegit... o Ordre de pàgina: per endreçar les pàgines del menú i submenú. Barra d’eines d’edició Estat de la p ublicació Insercions MM Ordre de pàgina Edició WYSIWYG Edició a través de codi HTML Títol pàgina Figura 7. Menú de la pàgina web a través de les pàgines creades amb WordPress Figura 8. Editor de pàgines del WordPress Creació de la pàgina web de l’Associació Esportiva BCN 17 - Endreçar el menú A l’apartat Pàgines del l’Administració o Panell de Control, es dóna una opció sota cada títol de pàgina que permet endreçar les pàgines i posar ordre a les subpàgines creades per tal de definir el submenú o menú desplegable. També es pot fer a través de l’opció Atributs durant l’edició de la mateixa pàgina. Les dades que demana per organitzar el menú és: la pàgina que precedeix i l’ordre que seguirà. Per exemple: Pàgina Superior Ordre Campionats de Catalunya Activitats Anteriors 0 Campionats de Districte Activitats Anteriors 1 Lligues Activitats Anteriors 2 Figura 9. Atributos Figura 10. Editor ràpid de pàgines del WordPress WordPress 18 D’aquesta forma, el que s’aconsegueix és el següent: - Llibreria Multimèdia Permet carregar arxius multimèdia: fotos, vídeos, i inclús arxius PDF. Per fer-ho cal anar a Afegir nou i se selecciona Escollir Arxiu per buscar l’arxiu a carregar. Figura 11. Menú desplegable de la pàgina web. Figura 11. Menú desplegable de la pàgina web. Figura 12. Llibreria Multimèdia. Creació de la pàgina web de l’Associació Esportiva BCN 19 - Plugins Existeix una gran varietat de Plugins. Els plugins amplien les funcions de WordPress. Per dur a terme la gestió d’aquest, es va a l’opció Plugins del menú dins l’Administració. Dins d’aquesta opció es poden veure els plugins instal·lats, els actius, els desactivats, els inactius, i els que tenen una actualització. També es pot activar, esborrar o fer l’edició d’un d’ells. A la part superior de la dreta hi ha un cercador que permet buscar un nou plugin, en cas de ser necessari. - Usuaris Existeixen diversos tipus d’usuaris segons el perfil: o Administrador: És qui té accés a tot. Té control total en les entrades i pàgines, sobre el tema, els comentaris, etc. Aquest pot atorgar-li aquest perfil al usuari que desitgi, però s’ha de tenir en compte que se li està donant el domini ja que estarà a la mateixa altura. Opció seleccionada i que es visualitza ara. Permet veure els plugins, segons el seu estat (actius, desactivats, inactius i amb actualitzacions) o tots a l’hora (tots) Accions disponibles per al plugin. Afecten a aquest de forma individual. Per cercar nous plugins Figura 13. Administrador de plugins. WordPress 20 o Editor: És gairebé un administrador que, excepte les funcions pròpies de l'administrador (instal·lacions, modificació de plantilles, plugins, etc) pot gestionar articles i notícies de qualsevol altre usuari. o Autor: Publica i edita els seus articles, pot posar etiquetes en els articles i triar entre les categories definides, però no pot crear-les. No poden publicar pàgines estàtiques, ni tenen accés al menú lateral. o Col·laborador: És qualsevol usuari que pugui escriure nous articles i notícies, i modificar-los. Qualsevol contingut nou no es publica directament sinó que requereix aprovació d'un administrador. Ideal per a blocs amb molts col·laboradors i que requereixin d'un nivell mínim de qualitat en les noves entrades [5]. o Subscriptor: No té privilegis. Són usuaris que poden accedir a continguts privats o només per a subscriptors. És un perfil ideal per a webs on es permeti només l'accés als continguts a usuaris registrats, capacitat que s'habilita també en el panell d'administració. La següent taula resumeix les principals opcions o tasques que poden realitzar i quins tenen accés a aquestes [6] : Tasques Admin Editor Autor Col·lab. Entrades : Crear noves i modificar les seves Si Si Si Si Entrades : Publicar Si Si Si No Entrades : Eliminar Si Si No No Pàgines : Crear Si Si No No Pàgines : Modificar – Eliminar Si Si No No Categories d’Entrades : Crear Si Si No No Enllaços (Blogroll) : Manteniment Si Si No No Presentació ( Plantilles i Widgets ) : Modificar Si No No No Usuaris : Manteniment Si No No No Opcions ( Generals, redacció, lectura, etc ): Manteniment Si No No No Figura 14. Taula de tasques segons el perfil. Creació de la pàgina web de l’Associació Esportiva BCN 21 L’administrador pot afegir nous usuaris i gestionar els rols del usuaris que ja existeixen des de l’opció Usuaris del panell d’administració. Aquesta web és gestionada actualment per Esther Rueda, projectista. També s’ha donat d’alta un usuari amb perfil d’administrador, Sr. Fèlix Masana, donat que en finalitzar el projecte s’encarregarà de l’administració d’aquest. - Opcions Consta de 8 opcions que venen per defecte, des de General fins a Miscel·lània, ja que les 5 últimes són plugins instal·lats posteriorment. Figura 15. Administració d’usuaris WordPress 22 L’apart d’opcions permet configurar les característiques generals, les de l’escriptura, lectura, comentaris...de la web que es crea: - Generals: Com títol del lloc, direcció de WordPress (URL), direcció del lloc (URL), perfil determinat per a nous usuaris, zona horària, format de la data, de l’hora, etc. - Escriptura: mida de la capsa de text, format, categories predeterminades d’entrades i enllaços, etc. A més es pot configurar la publicació remota i per email, així com els serveis d’actualització. - Lectura: permet definir com serà la pagina d’inici i dir el número màxim d’entrades de bloc, feed, etc. - Comentaris: Configuració per defecte d’entrades, altres opcions de comentaris, moderació de comentaris, visibilitat d’avatars, seleccionar un avatar per defecte, etc. - Multimèdia: Permet configurar les mides del arxius d’imatge i els incrustats. - Privacitat: es pot dir si volem aparèixer com a resultat en els motors de cerca. Figura 16. Opcions Generals de WordPress. Creació de la pàgina web de l’Associació Esportiva BCN 23 - Enllaços permanents: es pot seleccionar el mode dels enllaços proposats per WordPress o crear un de personalitzat. WordPress proposa els següents: Predeterminado http://bcnesport.es/?p=123 Día y nombre http://bcnesport.es/2010/05/29/sample-post/ Mes y nombre http://bcnesport.es/2010/05/sample-post/ Numérico http://bcnesport.es/archives/123 - Miscel·lània: es pot dir al WordPress on guardar els arxius que es pugen i com organitzar-se’ls un cop pujats. WordPress 24 Creació de la pàgina web de l’Associació Esportiva BCN 25 7. ELS PLUGINS Són necessaris per a determinades funcions de la pàgina, el procés d’instal·lació és per a tots el mateix. Només alguns d’ells necessiten d’alguna acció addicional per a finalitzar, però aquestes es detallen més endavant. A continuació es detallen els passos comuns per a tots . Per instal·lar un plugin es va a la secció Plugins del panell d’administració de WordPress i se selecciona Afegir nou. El pugin es busca a través de la paraula clau o etiqueta, per exemple Flash. De tots els que apareixen se selecciona un. El procés d’instal·lació és el següent: - Es fa clic a Instal·lar del plugin que interessa. - S’obre una finestra nova que descriu el plugin, i es torna a clicar a Instal·lar. - WordPress automàticament descarrega, descomprimeix i instal·la el plugin. - S’activa el plugin. 7.1. All in One SEO És un plugin molt complet que s’utilitza per treballar el posicionament dels blocs. Aquest permet posar una etiqueta Title, una descripció, i meta tags per a cada post o pàgina que es publiqui. Aquesta característica fa que sigui de gran ajuda perquè, d’aquesta forma, no cal introduir tots els Tags a la pàgina d'inici, per tant si hom busca una paraula que està en una altra pàgina que no sigui aquesta, el buscador el porta directament a la pàgina on es troba concretament. Figura 17. Instal·lació de plugins. Figura 18. Activació de plugins. Els plugins 32 Creació de la pàgina web de l’Associació Esportiva BCN 33 8. ARTISTEER Artisteer és un software que permet crear plantilles (Templates) sense la necessitat de tenir coneixements d’HTML (HyperText Markup Language) ni CSS (Cascading Style Sheets). Aquest software té dos versions, Artisteer Standard Edition i la Home and Academic Edition. Cada versió té les seves característiques i limitacions. En aquest cas, es disposa de l’Standard Edition. Figura 26. Logotip Artisteer Figura 27. Taula comparativa de versions d’Artisteer. Artisteer 34 Una de les raons per les que es decideix utilitzar aquest software és perquè no es troba cap plantilla convincent i que compleixi amb tots els requisits del projecte. Amb Artisteer es poden seleccionar els diferents elements que s'inclouen a la plantilla (capçalera, columnes, barra de menús, botons, etc.), es pot personalitzar l’aspecte (posició del text, color, fonts, etc.). Una de les avantatges d’Artisteer, és que permet una vista prèvia dels canvis en temps real i que, a més, es presenta en 13 idiomes diferents (anglès, alemany, holandès, francès, espanyol, rus, japonès, etc.). A través d’anuncis en les pàgines on es poden trobar i descarregar plantilles, és on es pot descobrir l’existència d’aquest software. Com a curiositat...[10] Nomenat Producte de l'Any per The Red Ferret Journal. Nomenat Producte de l'Any per Tech Now (Hong Kong). 8.1. Com funciona Artisteer En primer lloc, cal executar el programa. Al executar el programa, el que apareix, és una pantalla emergent on se selecciona el tipus de gestor de contingut per al que es desitja dissenyar la plantilla. En aquest cas se selecciona WordPress. Figura 28. Anunci d’Artisteer. Figura 29. Icona d’Artisteer a l’escriptori del PC. Creació de la pàgina web de l’Associació Esportiva BCN 35 Un cop seleccionat el Tema de Sistema de Gestió de Continguts, apareix el següent: Menú Principal Barra d'eines d'accés ràpid Barra de navegació Disseny preliminar Figura 30. Primera pantalla d’Artisteer, on se selecciona l’arxiu que es vol crear. Figura 31. Elements principals de la interfície d’Artisteer. Artisteer 36 Menú principal Permet fer els moviments bàsics amb l’arxiu, com: - Obrir un nou arxiu - Obrir un de ja existent - Guardar l’actual - Guardar-ho amb un altre nom i amb extensió “.artx” - Exportar - Veure prèviament amb el navegador Barra d'eines d'accés ràpid Aquesta deixa de manera rapida: - Obrir un document ja existent - Guardar el document actual - Desfer accions - Refer accions - Exportar el Tema Barra de navegació Si es fa una ullada al menú de navegació, es veu que es composa d’11 categories que permeten personalitzar la plantilla. Aquestes 11 categories estan endreçades d’esquerra a dreta del més general, com son els colors i l’organització, al més específic, com per exemple el disseny dels botons. Figura 33. Barra d’eines d’accés ràpid. Figura 32. Menú principals d’Artisteer. Figura 34. Barra de navegació Creació de la pàgina web de l’Associació Esportiva BCN 37 Disseny preliminar Permet visualitzar els canvis en temps real amb només posar el cursor a sobre de l’opció desitjada. 8.2. Com es crea la plantilla amb Artisteer - Colors i Fonts o Colors: El que es vol és un disseny que contingui els colors corporatius de l’Associació, és per aquest motiu, que se seleccionen com a colors principals el blau i el taronja, com a tercer color s’opta per un color neutre com és el gris. Llavors, crea un nou tema personalitzat amb els colors escollits. o Fonts: En quant a la tipografia seleccionada, s’escull la Verdana, ja que és una lletra fàcilment reconeguda per els diferents navegadors (IE, Firefox, etc). - Disposició o Disposició de la pàgina: Fa referència a com i on es col·loca el menú i la capçalera de la pàgina. o Columnes: Es on es configuren les divisions interiors que té el cos de la pàgina. En aquest cas només una. Figura 35. Colors del tema. Figura 36. Tipografia. Figura 37. Disposició de la pàgina. Figura 38. Columnes. Artisteer 38 o Disposició de Cerca / Categoria / Arxiu / Blogroll: Si es vol tenir barra lateral, es configura en aquest apartat. En aquest cas no s’aplica. - Fons o Fulgor de Fons: Serveix per aplicar resplendor i brillantor al fons, no procedeix en aquest cas, per tant no s’aplica. o Gradient del Fons: On es modifica el contrast i l’alçada del degradat, en aquest cas no s’aplica. o Fons Des d’arxiu: Es pot configurar el fons escollint una de les imatges que proposa el programa o carregant un fons propi. En aquest cas es carrega una imatge. Figura 39. Posició del Blogroll. Figura 40. Fulgor. Figura 41. Gradient. Figura 42. Inserir Fons. Figura 43. Fons inserit. Creació de la pàgina web de l’Associació Esportiva BCN 39 - Fulla La fulla és un quadrat que apareix a sobre del fons i fa de continent del contingut. En aquest projecte la fulla no es troba perquè es fa desaparèixer a través de la transparència i no cal configurar la resta de paràmetres. - Capçalera o Ample: En aquest apartat es configuren les dades d’amplada de la capçalera. La mesura s’ha de donar en píxels. La mesura que es dóna a la capçalera és de 1200 píxels. Figura 44. Transparència de la Fulla Figura 45. Ample de capçalera Artisteer 40 o Alçada: Correspon a l’alçada que tindrà la capçalera. En el cas d’aquesta plantilla, l’alçada és de 175 píxels. o Bloc de text: En aquesta plantilla no s’incorporarà text, per tant es marca l’opció Sense Bloc de Text. o Fons de la Capçalera: Per al fons d’aquesta pàgina, es carrega una foto Des d’Arxiu, tal com es mostra a continuació. o Posició: És on es defineix quin tros de la imatge de fons seleccionada es vol mostrar, en aquest cas l’expressió de les cares dels esportistes. Figura 46. Alçada de capçalera Figura 47. Bloc de text Figura 48. Com carregar pas a pas un fons per a la capçalera. Figura 49. Posició de la capçalera. Creació de la pàgina web de l’Associació Esportiva BCN 41 o Efectes: Cal tenir en compte, que Artisteer incorpora en la capçalera per defecte un efecte fulgor que cal treure si no interessa. Amb Fulgor Sense Fulgor o Foto de Primer Pla: Imatge que va a sobre del fons de la capçalera, en aquest cas, el logotip de l’Associació Esportiva BCN. Cal anar a buscar-la des de la opció Des d’Arxiu. o Efectes: Aquesta opció permet aplicar efectes a la foto de Primer Pla en quant al color i a la il·luminació, però cap dels dos procedeix en aquest cas. Figura 50. Fulgor de la capçalera. Figura 51. Foto de PP de la capçalera. Figura 52. Efectes de la foto de PP de la capçalera. Artisteer 48 o Estil del Text del Subítem: Aquest pot ser negreta, cursiva, regular i negreta+cursiva. En aquest cas es defineix l’estil regular. - Articles o Estil de Forma del contingut de l’article: Dóna la opció de posar una mena de ombrejat sota el text que enquadra i permet separar continguts. No s’aplica en aquest cas. o Estil de Marge del contingut de l’article: És la separació que es deixa entre el contingut i la capçalera i el peu de pàgina. Es deixa 10 píxels de marge. o Marge Interior del Text de l’article: És la distància que hi ha entre el text i l’àrea destinada al contingut. Es defineix 10 píxels de marge interior. Figura 78. Estil del text del subítem del menú. Figura 79. Estil de forma del text dels articles. Figura 80. Estil de marge del contingut dels articles. Figura 81. Marge interior del contingut dels articles. Creació de la pàgina web de l’Associació Esportiva BCN 49 o Format del Text: En aquest apartat només s’han definit dos paràmetres, el color del text i la alineació. o Altres elements dels Articles: On es poden configurar els paràmetres del elements com els diferents títols, els enllaços, les vinyetes, les cites, les imatges i les taules. A les imatges es pot veure el gran ventall d’opcions que ofereix cadascun d’ells a l’hora de poder ser personalitzat. Valors definits per defecte Alienació justificada Color del text: Negre. Figura 82. Format del text dels articles. Figura 83. Altres elements dels articles. Artisteer 50 o Capçalera i Peu de pàgina de l’Article: Permet configurar l’aspecte de la part superior i inferior dels articles. Es desactiva l’opció en ambdós casos. - Blocs: no cal que es configuri perquè no s’aplica, tal com s’ha decidit en l’apartat Disposició / Columnes. Les opcions de Data, Autor i Editar també es desactiven d’aquesta forma. Les opcions de Categoria,Tags i Comentaris també es desactiven d’aquesta forma. Figura 84 i 85. Capçalera i peu de pàgina dels articles. Figura 86. Blocs. Creació de la pàgina web de l’Associació Esportiva BCN 51 - Botons: l’apartat de Blocs no cal que es configuri perquè no apareix cap aplicació que requereixi de botó, com seria el cas de l’apartar de cerca. - Peu de pàgina: fa referència a la llegenda de la part inferior de la pàgina. Aquesta ha estat configurada de la següent forma: Figura 87. Botons. No cal seleccionar el color del farciment ja que no hi haurà ni textura ni gradient. La transparència és 100%. Cal configurar tots tres ti p us d’enlla ç os. Figura 88. Peu de pàgina. Artisteer 52 Un cop seguits aquests passos, Artisteer permet una vista prèvia en el navegador. L’aspecte de la plantilla dissenyada és el següent: Figura 89. Aspecte de la pàgina un cop acabada. Creació de la pàgina web de l’Associació Esportiva BCN 53 A continuació s‘estudien les diferents zones que composen el lloc web: FOOTER O PEU DE PÀGINA COS DEL LLOC WEB MENÚ PRINCIPAL HEADER Figura 90. Parts de la pàgina. Artisteer 54 Creació de la pàgina web de l’Associació Esportiva BCN 55 9. IMPLEMENTACIÓ TECNOLÒGICA 9.1. Contractació del Hosting L’associació esportiva BCN, com ja s’ha dit anteriorment, feia temps que tenia l’objectiu de posar en marxa el projecte de pàgina web que fins ara no s’havia pogut tirar endavant. És per aquest motiu que, va donar-se d’alta a Arsys amb el pack més bàsic que hi havia en aquells moments, el Plan Correo, mentre s’anava construint la web, d’aquesta forma, Sr. Fèlix Massana (director de l’associació) podia disposar d’un compte de correu per anar treballant. En aquest hosting tenia allotjat bcnesport.com. El projecte parteix d’aquest estat. El que es fa, per tant, és buscar un hosting que s’adaptés a les necessitats de la web. Després de buscar per diverses empreses de servei de hosting, s’opta finalment pel Pack Hosting Starter versió linux de Nominalia, que ofereix entre altres coses [12]: - 1 GB d'espai web - 1 base de dades de 100 MB - 10 comptes de correu electrònic de 2 GB - 100 G de tràfic mensual - Backup diari - Atenció al client 24h. Es va optar per contractar un domini .es , ja que no es podia donar de baixa el .com d’Arsys, per no deixar al Sr. Fèlix sense correu temporalment. Figura 91. Pack Hosting Starter de Nominalia. Implementació tecnològica 56 9.2. Instal·lació Wordpress Nominalia té un script d’instal·lació al WordPress que facilita molt la instal·lació del programa i permet tenir el bloc operatiu en pocs clics. En un principi, es vol aprofitar aquest avantatge, però al veure que a l’actualitzar dóna error, s’opta per baixar el WordPress 2.9.2 disponible a la pàgina wordpress.org. Per fer-ho, es descomprimeix l’arxiu .zip, i es carrega la carpeta al FTP. 9.2.1. Crear BBDD i Usuari de BBDD Cal dir que és necessari crear una BBDD i un usuari que tingui tots els permisos sobre la BBDD. Per fer-ho cal entrar al Panell de Control de Nominalia i accedir al menú Base de datos MYSQL. Un cop dins del gestor de la BBDD, es crea una nova BBDD i un nou usuari que cal configurar. Afegir, també, que phpMyAdmin, es troba al servidor web i és una aplicació gràfica que ajuda a manejar la BBDD MySQL. [email protected]m Figura 92. Panell de Control de Nominalia. Gestió d’usuari i BBDD. Creació de la pàgina web de l’Associació Esportiva BCN 57 9.2.2. Crear un usuari FTP Aquest pas és necessari per poder pujar els arxius de WordPress al FTP. Al panell de control de Nominalia, a l’apartat de Usuaris FTP/FrontPage, es crea un usuari nou, que és l’usuari que s’utilitza per accedir a Flash FXP. Flash FXP és un programa FTP (File Transfer Protocol - Protocol de Transferència d’Arxius) per a Windows. 9.2.3. Modificar arxiu wp-config.php WordPress necessita connectar-se a la BBDD, per aquest motiu, s’introdueix les següents dades en aquest arxiu de configuració de WordPress: - Dades de proveïdor d’allotjament web. - Usuari MYSQL - Contrasenya MYSQL - Host de MYSQL (es troba a l’apartat d’administració del Panell de Control de Nominalia., és el nom del host de la BBDD de Nominalia, la que ha estat assignada per a bcnesport.es) [email protected] Figura 93. Panell de Control de Nominalia. Gestió d’accessos FTP. Creació de continguts 64 - Contactes.php Aquest document neix fruit de la necessitat de crear un formulari de contacte per la pàgina web que es crea. A continuació, es descriuen els passos a seguir per crear l’apartat de contactes: Primer cal obrir l’arxiu del tema Page.php, ja que, aquest arxiu conté el codi i la informació per crear cada pàgina de la web. Seguidament, cal obrim un bloc de notes o un Dynamic Page de tipus PHP al Dreamweaver i enganxar aquest codi: <?php require('./wp-blog-header.php');?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php get_header(); ?> <div class="art-contentLayout"> Aquí va el formulari amb el reCaptcha </div> <?php get_footer(); ?> Aquest codi carrega la capçalera i el peu de pàgina del tema de la pàgina. Després, introduïm el codi del formulari que es troba a una adreça d’Internet [11], ja que no es disposa de coneixement sobre programació JavaScript: <div class="art-formulario"> <p> </p> <p> </p> <form id="contacto" name="contacto" method="post" action="http://bcnesport.es/enviado.php"> Creació de la pàgina web de l’Associació Esportiva BCN 65 <p>Nom i Cognoms <input name="nombre" type="text" id="nombre" class="name"/> Mail <input name="mail" type="text" id="mail" class="mail"/> </p> <p> Assumpte <input name="asunto" type="text" id="asunto" class="asunto"/> </p> <p>Missatge</p> <p> <textarea name="mensaje" type="text" id="mensaje" class="msg" rows="10"/></textarea> </p> <p> <script> var RecaptchaOptions = { theme : 'white', lang : 'es'}; </script> <?php require_once('recaptchalib.php'); $publickey = "6LcbPboSAAAAAHXgLRYWuGsoiwtcfeVRPsKIzEcL"; echo recaptcha_get_html($publickey); ?></p> <p> <input type="submit" name="Submit" value="Enviar" align="center"/> </p> </form> </div> Com a darrer pas, s’introdueix una nova pestanya a la barra de menú que es diu Contactar. Per fer-ho, s’edita l’arxiu Header.php del tema. Dins d’aquest arxiu es localitzat la funció que crida a la barra de menús (<?php art_menu_items(); ?>) i just a sota s’escriu el següent codi: <li> <a href="http://bcnesport.es/contacto.php"> <span class="l"></span> Creació de continguts 66 <span class="r"></span> <span class="t">Contactar</span> </a> </li> Amb el complement de Firefox anomenat Firebug, un potent depurador de pàgines web, s’ha pogut saber com es construïa la barra de menús. A partit d’aquest, es crea l’anterior codi: l’etiqueta <li> introdueix un nou element a la llista de pestanyes del menú i les etiquetes <span class="l">, <span class="r”>, <span class="t”> donen l’estil a la pestanya “Contactar”. - Avís legal.php Aquesta pàgina s’ha creat de la mateixa forma que la de tennis i patinatge, ja que aquesta no cal que aparegui en el menú principal com ho fa la pàgina creada per a Contacte. Per fer-ho, es crea una Dynamic Page de tipus PHP amb Dreamweaver o s’obre un bloc de notes, el qual es guardarà amb l’extensió .php. Seguidament es copia el codi del Header i del Footer del Page.php de la plantilla i entre aquest dos codis es posa el text legal. Un cop fet es puja via FTP i es crea l’enllaç a través de l’apartat Aparença a l’opció Footer del panell d’administració de Wordpress. Cada paraula està enllaçada amb el document o pàgina corresponent perquè pugui obrir-se quan es faci clic sobre aquesta, com es detalla a continuació: <a href='contacto.php'>Contacte</a> | <a href='/wp-admin'>Administració</a> | <a href='aviso_legal.php'>Avís legal i Política de privacitat</a><br/> Copyright © 2010 . Tots els drets reservats. Creació de la pàgina web de l’Associació Esportiva BCN 67 11. CONTINGUTS DE LA WEB Per potenciar l’atractiu de la web es vol incorporar diferents elements que es poden trobar a mesura que es van descobrint les pàgines. Però no només l’atractiu és important, també es té en compte que l’usuari trobi sense gaires dificultats la informació que cerca. Una de les estratègies que s’ha dut a terme és la de posar els continguts endreçats de manera que els més s’actualitzen siguin els primers del menú. L’actualitat mou a l’usuari i aquesta és una eina avantatjosa que cal utilitzar. Aclaració: El contingut d’alguns dels següents apartats, no respecten l’estil temporal estipulat per la normativa, ja que estan extrets directament del contingut introduït a la pròpia pàgina. 11.1. Inici Per tal de cridar l’atenció, a la pàgina d’inici es troben les noticies més recents. Aquestes, normalment es composen de text i imatges (ja sigui vídeo o fotografies). També es poden veure un mínim de 2 banners que intenten fer publicitat sobre alguna activitat o esdeveniment de l’associació. Continguts de la web 68 11.2. Activitats Anteriors En aquest apartat es pot trobar un petit text, les classificacions en format PDF i una petita galeria de fotos. - Campionats de Catalunya - Campionats de districte - Lligues - Bàsquet - Futbol sala - Petanca 11.3. Notícies - Vídeos: aquesta secció conté tant vídeos de noticies relacionades amb l’associació com els visualitzats en la Festa de l’esport. - Premsa: Es poden trobar revistes on ha aparegut l’Associació. - De l’associació: com per exemple la noticia sobre la medalla o el vídeo que es va gravar quan Manel Fuentes va parlar per animar als esportistes a la Festa de l’Esport. 11.4. Agenda Temporada 20092010 Calendari_BCN_09-10: Enllaç que obre en una altra pàgina un PDF. Calendari_LLIGA_F_S_09-10: Enllaç que obre en una altra pàgina un PDF. Calendari_LLIGA_BASQUET_09-10: Enllaç que obre en una altra pàgina un PDF. Vídeo Figura 99. En aquesta secció es pot trobar les classificacions de les activitats. Figura 100. En aquesta secció es poden trobar vídeos, revistes i imatges. Figura 101. En aquesta secció es poden trobar arxius PDF i imatges. Creació de la pàgina web de l’Associació Esportiva BCN 69 11.5. Qui som i què fem? Apartat on es pot troba informació sobre l’Associació. Aquest inclou alguna fotografia. - Qui som: L’Associació esportiva BCN, és una entitat sense afany de lucre constituïda a l’any 1997 i té com a objectius el foment, desenvolupament i la pràctica continuada de l’activitat físicoesportiva per a persones amb discapacitat psíquica. Actualment dóna resposta a 353 esportistes garantint a cadascun d’ells, com a mínim, una hora d’activitat físico-esportiva setmanal. El nostre objectiu primordial és impulsar l’esport del dia a dia, partint de l’entrenament quotidià (creant un hàbit), en entorns naturals (utilitzant l’esport com a eina de participació) oferint un servei complet i professional (enfocant l’esport des del seu vessant educatiu, terapèutic i recreatiu) envers les persones. Amb aquest objectiu el que se’ns proposa és potenciar la inclusió dels nostres esportistes dins la societat en unes condicions que els permeti ser acceptats, respectats i valorats. Des de l’Associació esportiva BCN s’entén l’educació física des d’una concepció integral i no només en el seu vessant físic, així doncs aquest plantejament pot i ha de contribuir a l’assoliment d’una qualitat de vida òptima pels nostres esportistes. - Que fem Modalitats esportives que es practiquen:  Atletisme  Tennis taula  Futbol sala  Patinatge sobre gel  Bàsquet Figura 102. En aquesta secció es poden trobar imatges. Figura 103. En aquesta secció es poden trobar imatges. Continguts de la web 70  Tennis  Petanca  Natació Totes les modalitats esportives abans esmentades compten amb circuïts de proves adaptades. L’objectiu específic d’aquests circuïts és proporcionar l’oportunitat de desenvolupar les aptituds físiques i l’esperit de superació. També el fet compartir resultats i habilitats amb d’altres, però sempre amb la finalitat de donar resposta als esportistes de forma que tothom pugui participar activament en la pràctica esportiva. També es realitzen sessions d’educació física de base, preparació física, activitat física per a la gent gran, activitats de mobilització, etc. - Activitats aquàtiques Referent a les activitats aquàtiques, hi han 2 models ben diferenciats de portar a terme les activitats. 1) Contractant el servei a les instal·lació esportiva municipal, essent la funció el seguiment de l’activitat, assessorament i coordinació amb l’equip de monitors de la instal·lació per tal de que l’activitat sigui el més coherent i profitosa. En aquest tipus de servei, acostuma a fer càrrec del transport i el personal de suport dels vestidors a l’Associació. Les instal·lacions on es realitzen aquest servei són: CEM Mundet, CEM Can Caralleu, Poliesportiu Marítim, CEM L’Hospitalet Nord. 2) Realització de l’activitat dins de l’aigua. Actualment aquest servei el realitzen en les instal·lacions del DIR Diagonal. Figura 104. En aquesta secció es poden trobar imatges. Creació de la pàgina web de l’Associació Esportiva BCN 71 11.6. Activitats i llocs on ho fem Es aquest apartat es pot trobar detalladament les franges horàries, les activitats que es fan i on es fan. En horari de centre Actualment els entrenaments, els realitzen en el CEM Can Caralleu en diferents horaris. (consultar) Activitats aquàtiques Dimarts - CEM Mundet Dimecres - CEM Can Caralleu - CEM Marítim Divendres - CEM l’Hospitalet Nord Activitats dirigides pels entrenadors dins l’aigua: Dir Diagonal – dilluns, dimecres i divendres en horari de 10:00 a 13:00 hores. En horari de lleure Dimecres - Activitats aquàtiques – CEM Marítim Dijous - Patinatge sobre gel en la pista del FCB Dissabtes - Tennis al CEM Can Caralleu Lligues Durant l’any participem i organitzem diferents lligues. - Lliga de bàsquet Lliga organitzada per la federació, en horari de 10:00 a 13:00 hores, els dimarts, segons calendari, en les instal·lacions del CEM Mundet o pista de Montbau. Participem amb 4 equips. Figura 105. En aquesta secció es poden trobar imatges. Continguts de la web 72 - Lliga de futbol sala Lliga que s’organitza amb els equips que s’entrenen en horari de 11:00 a 13:00 hores els divendres, segons calendari, en les pistes de futbol sala de gespa artificial del CEM Can Caralleu. - Lliga de petanca Lliga que s’organitza amb les tripletes que entrenen en horari de 10:00 a 13:00 hores els dimecres, segons calendari, en el CEM Can Caralleu. Campionats Al llarg de la temporada i per tal de que els esportistes tingui l’oportunitat de mostrar el treball realitzat en els entrenaments, s’organitzen diferents esdeveniments esportius: - Campionat de petanca Sebastià Parés. - Campionat de jocs de taula. - Campionat de bàsquet Vicenta Verdú. - Campionat de futbol sala Sebastià Llopis. - Campionat de petanca de Vallvidrera - Clínic de tennis - Festa de l’esport Col·laboració en l’organització: Olimpíades escolars de Vallvidrera I per finalitzar, un cop al mes aproximadament (consultar calendari), participem en els Campionats de Catalunya i territorials de Barcelona que organitza la Federació. Creació de la pàgina web de l’Associació Esportiva BCN 73 11.7. Col·laboradors En aquest apartat es mostren els logotips de les diferents entitats que col·laboren amb l’Associació. 11.8. Contactar Aquest apartat conté un formulari que cal omplir si es vol contactar amb l’Associació. Figura 106. Logotips de les entitats col·laboradores. Figura 107. Formulari de contacte. Conclusions 80 Creació de la pàgina web de l’Associació Esportiva BCN 81 15. BIBLIOGRAFIA ACTIVA 15.1. Pàgines Web [0] http://www.fenixhardware.com/porque-optar-por-una-pagina-sitio-web-argentina.html [1] http://www.slideshare.net/cchez/gestores-de-contenido i http://ca.wikipedia.org/wiki/ Framework_per_a_aplicacions_web [2] http://www.investic.net/faq/38 [3] http://www.dckap.com/drupal-joomla-wordpress-comparison.htm [4] http://es.wikipedia.org/wiki/WordPress [5] http://patob2000.wordpress.com/2006/09/26/roles-y-privilegios-de-los-tipos-deusuarioen-wordpresscom/ [6] http://ebcre.wordpress.com/2010/03/21/perfil-y-permisos-de-los-usuarios/ [7] http://tools.dynamicdrive.com/favicon/ [8] http://www.flashxml.net/countdown.html [9] http://www.flashxml.net/text-menu.html#swmi-free-install [10] http://www.artisteer.com/ [11] http://chicafriki.org/formulario-de-contacto-con-captcha-integrado-en-wordpresscomo-una-pagina-mas-manual-sin-plugin/ [12] http://www.nominalia.com/ 15.2. Plugins Admin-Favicon: http://www.johnkolbert.com/project/admin-favicon/ All in One SEO Pack: http://semperfiwebdesign.com/ FLV Embed: http://www.channel-ai.com/blog/plugins/flv-embed/ NextGEN Gallery: http://alexrabe.de/wordpress-plugins/nextgen-gallery/ StatPress: http://www.statpress.org/ Wordpress/MU Favicon: http://rohan-kapoor.com/projects/plugins/wordpress-mu-favicon Bibliografia activa 82 15.3. Llibres Joan-Baptiste Jung, WordPress Complete. Packt Publishing Ltd. 32 Lincoln Road. Olton. Birmingham, B27 6 PA, UK. November 2006 Production Reference: 1161106 ISBN 1-904811-89-2 Figura 108. WordPress Complete. Joan-Baptiste Jung, WordPress 2.7 Cookbook. Packt Publishing Ltd. 32 Lincoln Road.Olton. Birmingham, B27 6 PA, UK. June 2009 Production Reference: 1190609 ISBN 978-1-847197-38-2 Figura 109. WordPress 2.7 Cookbook. 15.4. Programes Flash FXP: http://www.flashfxp.com/ Firebug: https://addons.mozilla.org/es-ES/firefox/addon/1843/ Windows Grep: http://www.wingrep.com/download.htm Adobe Dreamweaver: https://www.adobe.com/es/downloads/ Adobe Flash: http://www.adobe.com/es/downloads/ Artisteer: http://www.artisteer.com/ Creació de la pàgina web de l’Associació Esportiva BCN 83 ANNEX I. CONTINGUT DEL CD La carpeta Projecte Web Associació Esportiva BCN conté els següents elements: Dins de la carpeta Documents es pot trobar els següents arxius: A la carpeta programes es poden trobar els següents executables: Annex I 84