Tfg laura agustí barea - Nectarina

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Taula de continguts I. Índex de figures

3

II. Agraïments

6

III. Resum

7

IV. Resumen

8

V. Abstract

9

VI. Paraules clau

10

1. Marc teòric

10

1.1. Internet com a eina de promoció i visibilitat

10

1.1.1. Estratègies de màrqueting online

11

1.1.2. El màrqueting de continguts

12

1.1.3. Les marques personals

13

1.2. La creació de pàgines web

14

1.2.1. El World Wide Web

15

1.2.2. El funcionament de les pàgines web

15

1.2.3. El HTML i el CSS

16

1.2.4. El Javascript

17

1.2.5. El PHP i el MySQL

18

1.2.6. El disseny web i l’experiencia d’usuari

18

1.3. Els gestors de continguts

20

1.3.1. WordPress

21

1.3.2. Blogger

22

1.3.3. phpBB

23

1.3.4. MediaWiki

23

1.3.5. Moodle

23

1.3.6. Joomla

23

1.3.7. Drupal

24

1.3.8. Prestashop i Magento

24

1.4. La comercialització de plugins i themes

25

1.4.1. Els marketplaces

26

1.4.2. Themeforest

27

1.4.3. Requisits per vendre un producte a Themeforest

29

1.4.4. Benchmarking: Anàlisis de les plantilles per WordPress

1

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

de Themeforest més exitoses

29

1.4.5. Altres marketplaces

37

2. Disseny i desenvolupament d’una plantilla web de WordPress

38

2.1. Objectius del projecte

38

2.2. Creació i conceptualització del tema

39

2.3. Establiment dels objectius i operativa de treball

41

2.4. Desenvolupament

43

2.4.1. Com crear una plantilla de WordPress

43

2.4.2. L’estructura d’arxius d’una plantilla de WordPress

44

2.4.3. Com afegir funcionalitats a WordPress

48

2.5. El resultat: Nectarina

49

2.5.1. Estructura de grids o de retícula

49

2.5.2. Disseny adaptatiu o responsive/fluid design

51

2.5.3. Disseny adaptatiu amb estructura de retícules

52

2.5.4. Hooks

53

2.5.5. El header

54

2.5.6. El blog

58

2.5.7. El disseny de les pàgines

66

2.5.8. Botiga online

69

2.5.9. El footer

70

2.5.10. Validació del codi

71

2.5.11. Rapidesa d’execució

71

2.5.12. Optimització en diferents suports

71

VII. Conclusions VI.I. Perspectives de desenvolupament futur

72 72

VIII. Llista de referències

74

IX . Annexos

77

2

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

I. Índex de figures Figura 1. Comparació entre el disseny del portal Yahoo l’any 1998, 2005, 2009, i la versió actual redissenyada el 2014.

17

Figura 2. Panell d’administració de WordPress en la seva versió 4.0.1.

22

Figura 3. La pàgina web oficial de La Casa Blanca i el portal del famós diari The Economist estàn fets amb Drupal.

24

Figura 4. El portal web de Themeforest permet trobar la plantilla web que s’adapta més a les necessitats de cada client.

27

Figura 5. Disseny de la plantilla premium per WordPress Avada, la més descarregada al portal Themeforest.

28

Figura 6. Taula comparativa de la situació actual de les plantilles per WordPress més venudes a Themeforest. Data de consulta: 8 d’abril de 2015.

30

Figura 7. Mides que se solen utilitzar per adaptar un disseny web a mòbil (Bootstrap, 2015).

31

Figura 8. Vendes de la plantilla HTML Mandarina des del 23/07/2013 fins el 20/05/2015.

39

Figura 9. Diagrama de Gantt dividit en les diferents fases del projecte.

41

Figura 10. Procés d’instal·lació de WordPress.

43

Figura 11. Interfície d’administració de WordPress.

44

Figura 12. Els Posts Formats s’escullen per cada entrada, dins de l’editor de text que permet personalitzar el contingut d’aquesta.

47

Figura 13. L’usuari, a través de l’editor de la pàgina, pot configurar quin estil o plantilla de pàgina aplicar.

47

Figura 14. Estructura de retícula o de columnes que utilitza Nectarina.

50

3

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Figura 15. Mostra l’estructura que s’utilitza del Header dins d’una pàgina. Hi ha una caixa que ocupa una quarta part, i una altra que ocupa les tres quartes parts restants. Envoltant aquestes dues caixes, n’hi ha una altra que té una mida que va canviant segons l’amplada de la finestra o de la pantalla del dispositiu.

51

Figura 16. Mides per adaptar la pàgina web a mòbils que s’han utilitzat a la plantilla.

52

Figura 17. En groc es mostra com s’aplica dins del index.php les funcions que guarden el codi HTML que s’utilitza a aquest arxiu.

54

Figura 18. Interfície del Customizer. Comparació del header entre escollir un logo o esborrar­lo.

55

Figura 19. Capçalera amb el logotip a la dreta.

56

Figura 20. Capçalera amb el logotip al centre.

56

Figura 21. Capçalera amb un color de fons fosc.

57

Figura 22. Capçalera amb un color de fons fosc sense opacitat i amb una línia divisoria.

57

Figura 23. Com es mostra la capçalera i la barra lateral quan la pàgina web s’executa en dispositius amb poca amplada.

57

Figura 24. Aparença de les opcions del Customizer i del color de fons dels sub­elements del menú, on es mostra també el carret i la icona de cerca.

58

Figura 25. Aparença de l’arxiu del blog segons els sidebars que utilitza.

59

Figura 26. Capçalera que utilitza l’arxiu d’articles basat amb l’autor.

60

Figura 27. Anatomia d’una entrada de blog de l’arxiu.

60

Figura 28. Comparació entre l’entrada individual que té imatge destacada i la que no en té.

61

Figura 29. Aparença d’un article de l’arxiu i un del single.php amb el format de galeria.

62

4

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Figura 30. Aparença dels articles del Quote Post Format dins del bucle de l’arxiu d’entrades.

63

Figura 31. Article que utilitza el Image Post Format.

64

Figura 32. Aparença d’una amb Audio Post Format, detectant la primera etiqueta <iframe>.

65

Figura 33. Exemple d’entrada que utilitza el Status Post Format amb, i sense imatge destacada.

66

Figura 34. Aparença del Page Builder dins de l’editor d’una pàgina.

67

Figura 35. Exemple de disseny d’una pàgina creada amb el Page Builder.

68

Figura 36. Disseny de la pàgina de Productes i de la pàgina individual d’un producte.

69

Figura 37. Disseny del peu de pàgina.

70

5

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

II. Agraïments

Aquest projecte s’ha realitzat sota la tutorització d’Arnau Gifreu, a qui m’agradaria agrair per haver­me guiat i ajudat en tot moment. Agrair la seva paciència, temps i dedicació per a que aquest projecte hagi estat possible.

També m’agradaria agrair als meus pares i la meva germana, per haver­me recolzat sempre i per haver­me brindat la oportunitat d’estudiar el que realment he desitjat malgrat tot el que hem hagut de lluitar per aconseguir­ho.

A tots els professors que han compartit amb mi tot els seus coneixements i de qui he pogut aprendre tant els anys que he estat a l’ERAM i a tots els companys que han volgut compartir amb mi aquests anys a la universitat.

Finalment volia expressar el meu profund agraïment a en Jordi, per aguantar­me i animar­me dia rere dia, per ajudar­me a aconseguir tot allò que em proposo i per deixar­me emprendre junts el projecte de la vida.

6

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

III. Resum Català

Aquest projecte es basa en la conceptualització, creació i desenvolupament del primer producte de l’agència de disseny i desenvolupament web Mildthemes . Aquest primer producte és una plantilla web per al gestor de continguts WordPress, de qualitat professional i amb una gran capacitat de personalització. Aquesta plantilla vol ser capaç de satisfer les necessitats d’un públic objectiu orientat al sector empresarial, tant per donar a conèixer el seu treball, com per ser la base del seu negoci.

Aquest producte té dos segments de públic objectiu principals:

El primer comprèn tots aquells desenvolupadors web que es dediquen a crear projectes web per a altres empreses. L’adquisició d’una plantilla web professional els farà de suport per accelerar el procés de desenvolupament del producte web que estan realitzant, donant­los la possibilitat de no haver de crear una pàgina web des de zero. Gràcies a les diferents opcions de personalització de la plantilla, aquest desenvolupador podrà dur a terme un projecte únic i personalitzat exclusivament per al seu client, estalviant­se molts recursos de temps i de diners.

L’altre públic objectiu es centra en el client final , en totes aquelles persones que volen tenir, siguin professionals o no, una pàgina web o un blog per mostrar qui són, què fan i a què es dediquen. Aquestes, sense necessitat de contractar un desenvolupador web i sense la necessitat d’aprendre a programar, podran obtenir una pàgina web ràpidament i fàcilment personalitzable.

Aquest dos segments de públic objectiu són a nivell internacional, ja que un cop acabat el producte es vol comercialitzar a través d’Internet, sent l’anglès l’idioma escollit per tal de desenvolupar­lo i promocionar­lo.

7

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

IV. Resumen Español

Este proyecto se basa en la conceptualización, creación y desarrollo del primer producto de la agencia de diseño y desarrollo web Mildthemes . Este primer producto es una plantilla web para el gestor de contenidos WordPress, de una calidad profesional y con una gran capacidad de personalización. Esta plantilla quiere ser capaz de cubrir las necesidades de un público objetivo orientado al sector empresarial, tanto por dar a conocer su trabajo, como para ser la base de su negocio.

Este producto tiene dos segmentos de público objetivo principales:

El primero abarca todos aquellos desarrolladores web que se dedican a crear proyectos web para otras empresas. La adquisición de una plantilla web profesional les hará de soporte para acelerar el proceso de desarrollo del proyecto web que están realizando, dándoles la posibilidad de no tener que crear una página web desde cero. Gracias a las diferentes opciones de personalización de la plantilla, este desarrollador podrá llevar a cabo un proyecto único y personalizado exclusivamente para su cliente, ahorrándose muchos recursos de tiempo y de dinero.

El otro público objetivo se centra en el cliente final , en todas aquellas personas que quieran tener, sean profesionales o no, una página web o un blog para mostrar quiénes son, qué hacen y a qué se dedican. Estas personas, sin necesidad de contratar un desarrollador web y sin tener que aprender a programar, podrán obtener una página web con rapidez y fácil de personalizar.

Estos dos segmentos de público objetivo son a nivel internacional, ya que una vez terminado el producto, se quiere comercializar a través de Internet, siendo el Inglés el idioma elegido para desarrollarlo y promocionarlo.

8

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

V. Abstract English

This project is based on the conceptualization, creation and development of the Mildthemes’ first product. Mildthemes is a design and development agency and this first product is a website template designed to work with WordPress, a Content Managment System. It has been developed with professional quality and a great customization ability.

This template goal is to be able to meet the needs of MIldthemes’ target, which is oriented to the business segment. This first product is aimed to help Mildthemes’ customers to spread their work and build their company basis.

This product has two main target segments:

The first one includes web developers who are working to create web projects for other companies. Purchasing a professional web template will support them to speed up their development without having to create a website from scratch. With all the template’s settings, the developer will be able to carry out an exclusive and unique customized project for his customer. In this way, this developer will save time and money.

The second one is focussed on the final customer . They are both professional and individuals who want to have either a website or a blog to show the world who they are and what they are working for. These users will be able to create their website without programming knowledge nor paying a web devolper. With Mildthemes’ product they will get a website quickly and really easy to customize.

These two targets are international. Once finished, the product will be commercialized via Internet, being the English the main language to develop and promote it.

9

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

VI. Paraules clau

Pàgina web, WordPress, comercialització, empresa, plantilla, disseny, programació, personalització, eficiència.

1. Marc teòric Contextualització

Per la realització d’aquest marc teòric s’ha realitzat un treball de recerca sobre Internet i la seva vessant comunicativa i publicitària per a empreses i particulars, focalitzant la importància de les pàgines web en tot aquest procés de promoció, i examinant les formes que es poden emprar a l’hora de dissenyar i desenvolupar una pàgina web per obtenir­ne un rendiment econòmic.

1.1. Internet com a eina de promoció i visibilitat

Internet ha revolucionat la manera de comunicar­nos. Ordinadors, mòbils, tauletes i altres dispositius intel·ligents ens permeten interactuar amb altres persones sense que calgui coincidir en espai i temps.

Usuaris i consumidors utilitzem dia rere dia Internet per accedir a tot tipus d’informació, productes o serveis. Tal i com explica F. Maciá (2014), CEO de Humal Level Communications, el perfil d’usuari d’Internet és molt heterogeni i, tot i així, s’ha convertit en l’eina perfecta per arribar a tot tipus d’usuaris, independentment de la seva edat, sexe, formació, localització geogràfica o capacitat adquisitiva.

D’altra banda, des de que Internet es va obrir a continguts comercials, cap a l’any 1995, les empreses tradicionals han anat adaptant els seus models de negoci enfocats a aprofitar els avantatges que proporciona Internet, per tal de promocionar­se i obrir­se a un mercat més internacional. Tot i així, no només són les empreses tradicionals les que han integrat el seu negoci a Internet, sinó que cada vegada estan apareixent més negocis

10

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

que utilitzen Internet no només per promocionar­se sinó també com a model de negoci.

J. Gosende (2014) argumenta que, actualment, Internet ofereix moltes més oportunitats de negoci online que els mercats tradicionals, i que les inversions per iniciar un negoci a Internet solen ser menys costoses que a l’hora de crear una empresa tradicional. Tot i així, l’èxit d’aquests negocis online depèn d’aquesta tecnologia i de la seva visibilitat als diferents canals d’Internet on es poden promocionar.

1.1.1. Estratègies de màrqueting online Siguin empreses tradicionals com empreses nascudes a Internet, totes busquen promocionar­se per poder obtenir nous clients o fidelitzar als ja existents. Al seu llibre, Maciá ennumera les diferents maneres que tenen les empreses de publicitar­se a Internet:

1.

Bàners: Una de les primeres formes de publicitar­se a Internet va ser el bàner, que es tracta d’un anunci gràfic de grans dimensions situat a una posició estratègica d’una pàgina web, on l’usuari pot accedir a uns continguts determinats de la marca que s’està publicitant.

2.

Videos: De la mateixa manera que els bàners utilitzen una imatge per promocionar els serveis o els productes de les empreses, els anuncis de televisió també han fet un salt a Internet per poder ser reproduïts a pàgines web com Youtube.

3.

Mail màrqueting: Les empreses també poden captar clients a través d’Internet gràcies al Mail Màrqueting, que consisteix en l’enviament de correus electrònics oferint els seus serveis o ofertes determinades a tots aquells usuaris que prèviament s’han subscrit a la seva newsletter a través de la seva pàgina web.

4.

Posicionament als cercadors: La majoria d’usuaris utilitza els cercadors per descobrir nous continguts a Internet. És per això que és molt important posicionar correctament i millorar la visibilitat de la pàgina web de l’empresa per a que els usuaris els trobin com més aviat millor, ja sigui mitjançant posicionament natural SEO (Search Engine Optimization) o a través d’enllaços patrocinats, on l’empresa paga per aparèixer en un espai exclusiu tant als cercadors com en altres pàgines web.

5.

Usabilitat: L’objectiu de les pàgines web és que els usuaris facin alguna acció determinada, tal com omplir un formulari, comprar un producte o descarregar una aplicació. La usabilitat és la tècnica que fa que la pàgina web en qüestió sigui

11

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

intuitiva i senzilla per l’usuari, per tal que l’empresa cumpleixi els seus objectius de conversió i maximitzar la seva rentabilitat.

6.

Xarxes socials: Les xarxes socials ajuden a les empreses a poder escoltar directament l’opinió dels seus clients, podent obtenir un feedback molt valuós per tal de millorar el seu negoci. Per altra banda, les xarxes socials també permeten captar un públic específic susceptible a contractar els seus serveis o de comprar els seus productes.

Totes aquestes formes de publicitat o estratègies de màrqueting online condueixen, a través d’un o diversos enllaços, a una pàgina web en concret , creada específicament per una sola campanya publicitària, o creada per tal de mostrar tots els serveis o productes que ofereix l’empresa.

Segons I. Rodríguez (2003), doctora en Ciències Econòmiques i Empresarials, moltes pàgines web tracten aconseguir uns objectius determinats, ja sigui donar a conèixer el productes o la marca de l’empresa, augmentar la notorietat de la marca, millorar la imatge de la marca, o mantenir la fidelitat dels compradors.

1.1.2. El màrqueting de continguts Les empreses poden fer servir els diferents mitjans de la seva presència online no només per promocionar els seus productes o serveis de manera directa, sinó també per generar, publicar o compartir diferents continguts d’interès per al client. Aquests continguts poden ser des de notícies o articles interessants, recomanacions o guies, fins a preguntes i respostes freqüents o fotografies i vídeos de l’activitat diària de l’empresa. Per fer­ho, utilitzen els blogs per generar el contingut, i els fòrums i les xarxes socials per compartir­lo i per poder rebre un feedback per part de l’usuari.

Aquesta estratègia, anomenada Màrqueting de continguts , permet atraure l’atenció dels clients potencials i posicionar­se com a referent del sector , encara que la venda per part del client no es dugui a terme fins a un mitjà o llarg plaç.

12

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

1.1.3. Les marques personals Malgrat que les empreses i les marques tenen una gran visibilitat a Internet, les xarxes socials i els cercadors han provocat que els usuaris, com a professionals, també tinguin una imatge determinada a la xarxa i tinguin la necessitat de posicionar­se.

A. Pérez Ortega (2014), líder en estratègia i marca personal a Espanya, defineix marca personal com: “la gestió adequada i conscient de les percepcions, els records i les expectatives que volem generar en els altres” (para. 6). A més, argumenta que “desenvolupar una marca personal consisteix en identificar i comunicar les característiques que ens fan sobresortir, ser rellevants, diferents i visibles en un entorn competitiu i canviant” (para. 1).

A través dels seus perfils socials, les persones disposen a Internet un espai on mostrar qui són, com són i què fan . És per això que cada vegada hi ha més usuaris que aprofiten les eines d’Internet com els blogs per tal de donar­se a conèixer.

La finalitat d’aquests blogs sovint no és vendre un producte o servei concret, sinó vendre’s com a professional, mostrar la seva opinió sobre els temes que domina, i compartir experiències i treballs personals. De la mateixa manera que les empreses utilitzen el màrqueting de continguts per atraure l’atenció a un client potencial, la creació d’aquestes interfícies permeten a l’usuari construir la seva pròpia marca personal, donant­li la possibilitat a mig plaç de millorar la seva carrera professional. Així doncs, la intenció d’aquests blogs o webs personals no és obtenir un rendiment econòmic directe, sinó obtenir un benefici més aviat personal .

13

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

1.2. La creació de pàgines web

Així com les empreses tradicionals utilitzen locals i botigues per mostrar i vendre els seus productes, els negocis online utilitzen la seva pàgina web per a fer el mateix.

M. Pardo (2013), fa un resum molt precís sobre que són les pàgines web: “Una pàgina web està formada per un conjunt de protocols mitjançant els quals és possible compartir informació entre ordinadors gràcies a un format d’arxiu que es coneix com hipertext . La seva característica principal és la utilització d’hipervincles o enllaços, que són referències creuades que serveixen per connectar uns documents web entre altres a través d’Internet . Generalment, una web està formada tant per text com per altres elements multimèdia tals com imatges, vídeos, sons o animacions.” (p. 10)

Com hem vist al capítol anterior, una pàgina web és un element fonamental en l’estratègia de negoci que es desenvolupa a Internet. Com a seu de l’empresa, és l’espai de referència en el procés de comunicació entre aquesta i el seu públic . Les empreses tradicionals normalment utilitzen les seves pàgines web per mostrar tot tipus d’informació sobre si mateixes i sobre el que fan, a més d’oferir els seus productes o serveis. Són pàgines web estàtiques , enfocades a mostrar un contingut fixe i permanent. En canvi, les empreses que tenen Internet com a model de negoci, a més de mostrar informació pròpia, utilitzen les pàgines web per materialitzar el seu projecte. Donen la possibilitat a l’usuari d’interactuar amb elles, comprar els seus productes o serveis, o llegir continguts nous generats a través de blogs. Aquestes són pàgines web dinàmiques , més complexes a nivell de programació que les estàtiques, però que ofereixen una experiència d’usuari més completa.

En la majoria d’ocasions, quan un usuari accedeix a la pàgina web per primer cop, ja sigui estàtica o dinàmica, es formarà una primera impressió de l’empresa o projecte en qüestió, i el fet d’haver trobat fàcil i ràpidament o no la informació o els productes que cercava, determinarà si hi tornarà a entrar o no.

És per això que és molt important tenir en compte el disseny de l’interfície, la usabilitat i l’accessibilitat de les pàgines web. De la mateixa manera que pots no entrar mai a una

14

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

botiga per l’aparença que té des de fora, el nostre cap decidirà si vol navegar o no dins d’una pàgina web en concret.

1.2.1. El World Wide Web Els termes Internet i el World Wide Web sovint es confonen, però no són el mateix.

Internet és el sistema global de xarxa que permet la comunicació entre ordinadors. El World Wide Web , en canvi, és un dels serveis que viatja per aquestes xarxes. El World Wide Web , també anomenat WWW o La Web, és el sistema d’informació que utilitza Internet per enllaçar documents escrits en hipertext connectats a través de vincles.

Aquests documents dins de La Web reben el nom de pàgines web , i qualsevol que disposi d’Internet al seu ordinador o dispositiu mòbil pot accedir a elles a través un software anomenat navegador (I. Jacobs i N. Walsh, 2004)

Tim Berners­Lee, un informàtic anglès i treballador del CERN (Organització europea per la recerca Nuclear) a Suïssa, és el considerat creador del World Wide Web . L’any 1989 va escriure una primera proposta al CERN que va acabar reformulant l’any 1990 juntament amb Robert Cailliau per acabar creant, a finals d’aquell mateix any, el primer navegador web i la primera comunicació web client­servidor d’Internet o, dit d’una altra manera, la primera pàgina web de la història (T. Berners­Lee i R. Cailliau, 1990). El dia 6 d’agost de 1991 La Web es va publicar com a un nou servei disponible a Internet, però no va ser fins el 30 d’abril de 1993 que el CERN va presentar el World Wide Web públicament com a una eina per a tothom i d’accés gratuït.

Paral·lelament, durant aquells primers anys del WWW , es va dedicar tot l’esforç a facilitar l’accés a les pàgines web, creant nous navegadors i nous servidors, i millorant els llenguatges de programació utilitzats per materialitzar aquestes pàgines web. Tot i així, no va ser fins el gener de 1994 que es va anunciar, finalment, la introducció d’Internet a les llars (D. Connolly 2000).

1.2.2. El funcionament de les pàgines web Quan accedim a una pàgina web, normalment ho fem introduïnt manualment el nom del domini, o a través d’un enllaç. És en aquest moment quan el navegador inicia una sèrie de processos i de missatges de comunicació per trobar i mostrar la pàgina sol·licitada.

15

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Primer de tot, el navegador localitza el servidor on està allotjada la pàgina web a través dels seus DNS (Sistema de Noms de Domini). Aquesta informació retorna una adreça IP, que és l’identificador assignat a l’ordinador que actua com a servidor, on es troben els arxius que contenen la pàgina web i, a la vegada, aquesta IP retorna el nom del domini de la pàgina web (Information Sciences Institute, 1981).

1.2.3. El HTML i el CSS El HTML (HyperText Markup Language) és el llenguatge estàndard amb que estan escrits els arxius que contenen les pàgines web. Aquest llenguatge conté una sèrie de markups o etiquetes que permeten organitzar una pàgina web. Aquestes etiquetes permeten etiquetar i organitzar textos i incloure enllaços o imatges a les pàgines web. El navegador analitza aquest codi i l’interpreta, mostrant com a resultat una pàgina web visible i llegible.

A part del HTML, les pàgines web necessiten un codi per donar format al contingut de la pàgina web, incorporant colors, mides, la disposició de la pàgina, tipografies i altres elements de disseny . Aquest codi és anomenat CSS (Cascading Style Sheets) i està inclós dins d’uns fulls d’estil que permeten incorporar aquestes característiques de disseny. Aquest CSS es vincula al document HTML a través d’una etiqueta en concret i la combinació d’ambdós llenguatges permet al navegador mostrar la pàgina web maquetada, així com millorar la seva presentació (T. Berners­Lee i D. Connolly, 1995).

Les pàgines web no han estat sempre igual pel que fa al seu estil de disseny, la seva programació i el seu ús final. Les primeres pàgines web tenien pocs elements gràfics i eren estàtiques. Només utilitzaven les etiquetes HTML amb enllaços i informació escrita, i modificar el contingut de la web era una feina feixuga que requeria coneixements avançats de programació.

Més endavant es van començar a introduir elements visuals com imatges o animacions i l’aparició del CSS va permetre poder donar format a aquesta informació. L’aparició de noves versions més intuïtives d’aquests llenguatges també van afavorir que molts usuaris avançats i empreses comencessin a crear les seves pròpies pàgines webs (W3C, 2015) .

16

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 1. Comparació entre el disseny del portal Yahoo l’any 1998, 2005, 2009, i la versió actual redissenyada el 2014.

Actualment, les versions que s’utilitzen per crear pàgines web són el HTML5 i el CSS3. La principal característica del HTML5 són les seves noves etiquetes, més descriptives i amb un sentit semàntic més gran, a més d’aportar una nova manera de validar els formularis.

Pel que fa al CSS3, permet crear nous atributs de disseny, incorporar animacions, i adaptar el contingut a diferents resolucions de pantalla.

1.2.4. El Javascript Aviat les necessitats de millorar les pàgines web per fer­les més intuïtives van augmentar, i això va afavorir la creació de nous llenguatges. El Javascript és un llenguatge de programació que també és interpretat pel navegador Web, creat especialment per utilitzar­lo dins de pàgines web, amb un codi basat amb llenguatges de programació per crear plataformes informàtiques (com C++ o Java). La seva característica principal és la de crear dinamisme a la pàgina web permetent una interacció més completa entre

17

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

l’usuari i la pàgina web . Per poder ampliar la seva funcionalitat, el Javascript utilitza l’AJAX, una tècnica que permet la interacció entre el servidor i el navegador, aconseguint fer canvis dinàmics en el contingut de la web sense haver de recarregar la pàgina (N. C. Zakas, 2012) .

1.2.5. El PHP i el MySQL Tant el HTML, com el CSS i el Javascript, necessiten un navegador Web per ser interpretats i a l’hora de crear una pàgina web, s’ha de tenir en compte que cada navegador els interpreta d’una manera diferent. Però existeixen llenguatges de programació pel desenvolupament web que s’executen per part del servidor:

El PHP és un llenguatge disponible a la majoria de servidors web que té l’objectiu de mostrar contingut dinàmic a una pàgina web. Quan un navegador fa una petició al servidor per mostrar una pàgina en PHP, aquest servidor interpreta el llenguatge per poder processar­lo i generar de manera dinàmica la pàgina web. Una de les utilitats del PHP és, per exemple, a l’hora d’enviar un formulari de contacte a través d’una web. Per altra banda, un altre avantatge és la seva capacitat per connectar­se a motors de bases de dades com per exemple MySQL. (T. C. Arntzen et. al., 2001)

La utilització de bases de dades en les pàgines web ens permet crear webs dinàmiques on la informació que apareix en pantalla depèn de les accions que realitza l’usuari i aquesta s’emmagatzema al servidor per a futures referències. MySQL és un sistema de gestió de bases de dades que se sol utilitzar dins de les pàgines web per emmagatzemar i organitzar el seu contingut a través de taules i files. La combinació del llenguatge PHP i el MySQL és molt utilitzada en aplicacions web com els gestors de continguts, que permeten a l’usuari generar continguts web dinàmics fàcilment .

1.2.6. El disseny web i l’experiencia d’usuari A l’hora de dissenyar una pàgina web, sigui amb l’objectiu que sigui, s’ha de tenir molt present que els visitants han de trobar allò que busquen per tal de beneficiar­se d’aquest contingut i de gaudir de l’experiència d’haver accedit a ell. D’aquesta manera, hi ha d’haver un equilibri entre l’atractiu estètic de la pàgina web i la seva practicitat.

18

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Un dels pilars de l’experiència d’usuari és la navegació coherent . Quan una pàgina web té diferents subpàgines o enllaços dins de la mateixa web, l’usuari ha de tenir clar que no ha canviat de pàgina web quan accedeix a aquests diferents enllaços. Per això, la pàgina web ha de tenir una capçalera amb un menú de navegació fixe i que indiqui al visitant on es troba a cada moment, per a que aquest no es perdi.

Per tant, s’ha de facilitar a l’usuari localitzar ràpidament el contingut que busca a través de categoritzar i etiquetar el contingut de la web. Si no troba el que busca a simple vista, ha de tenir fòrmules per trobar­ho, ja sigui a través d’un cercador intern o a través de la navegació per menús de la pàgina web.

Quan es treballa amb una pàgina web dinàmica, l’excés de consultes a les bases de dades fa augmentar molt el seu temps de càrrega . Per altra banda, el pes dels arxius i el de les imatges fan que aquest temps encara sigui major. Un temps de càrrega massa gran pot fer que el visitant marxi de la pàgina abans d’esperar­se a poder accedir al contingut.

Una manera per millorar aquest temps és optimizant els elements multimèdia i el codi vinculats a la web reduint el tamany de l’arxiu en qüestió. Per altra banda, és recomanable evitar realitzar moltes consultes a la base de dades i utilitzar eines per emmagatzemar la web a la catxé del navegador.

Com hem dit anteriorment, els navegadors interpreten de maneres diferents el codi d’una pàgina web. És per això que és molt important tenir adaptat el disseny de la pàgina web per a que es vegi correctament als diferents navegadors web . Els més preparats per les tecnologies actuals són Google Chrome i Firefox, que juntament amb Safari, Internet Explorer i Opera, són els navegadors més utilitzats actualment. Per millorar l’experiència d’usuari és necessari comprovar que la pàgina web funciona igual per a tots aquests navegadors.

De la mateixa manera que és important una compatibilitat amb els navgeadors web més utilitzats avui en dia, també és necessari adaptar la pàgina web a l’amplada de la pantalla dels diferents dispositius des d’on es podrà accedir la pàgina web. Forrester , una empresa d’investigació global, afirma que més de la meitat de la població mundial disposa d’un dispositiu mòbil amb accés a Internet (S. Wu, 2012) . Així doncs, l’enorme quota de mercat dels telèfons intel·ligents o smartphones i els tablets han obligat als

19

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

dissenyadors i desenvolupadors web a trobar maneres d’adaptar òptimament l’estructura i el disseny de les pàgines web a un format de pantalla més reduït, facilitant l’accés i la navegació al visitant.

Finalment, un altre element a tenir en compte és la importància d’utilitzar, per programar la pàgina web, un codi correcte, vàlid i sense errors . Un codi ben estructurat, net i optimitzat pot tant millorar la velocitat de càrrega de la pàgina, com millorar la compatibilitat amb diferents navegadors web o fins i tot el posicionament als cercadors (B. Williams, D. Damstra, H. Stern, 2013).

1.3. Els gestors de continguts

Una manera per crear pàgines web sense tenir coneixements avançats de programació és la utilització d’interfícies d’usuari i d’administració anomenades gestors de continguts. Un gestor de continguts o Content Management System (CMS) és una eina que permet a l’usuari administrar, gestionar i mantenir una pàgina web dinàmica amb més facilitat.

Els gestors de continguts solen utilitzar les bases de dades per emmagatzemar i organitzar tot el contingut de la pàgina web, i la majoria d’ells utilitzen el PHP com a llenguatge de programació per treballar amb les bases de dades, el servidor i la pàgina web. Per altra banda, la majoria de gestors de continguts són de programari lliure, i són els propis desenvolupadors que ajuden dia rere dia a millorar les seves plataformes (és per aquest motiu que la majoria de CMS són gratuïts).

El flux de treball dels gestors de continguts permet que usuaris amb pocs coneixements tècnics puguin publicar contingut a la pàgina web fàcilment. A més, aquestes interfícies d’administració són capaces d’ organitzar el contingut mitjançant jerarquies i de manera coherent per a l’usuari . Una altra de les característiques bàsiques dels CMS és el dinamisme que aporta a la pàgina web, permetent al client o usuari final interactuar amb la pàgina web a través de formularis de contacte, fòrums, botigues online, etc.

Existeixen molts tipus de gestors de continguts: per crear blogs (WordPress o Blogger), fòrums (phpBB), desenvolupament col·laboratiu o Wikis (MediaWiki), entorns educatius

20

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

(Moodle), portals ( Joomla! o Drupal) o fins i tot comerços online (Prestashop o Magento) (M. Pardo, 2013).

1.3.1. WordPress WordPress és un dels sistemes d’administració de continguts de codi obert més coneguts i utilitzats. Va néixer com a un programa de creació de blogs, però ha evolucionat fins a convertir­se en un sistema integral de gestió de continguts utilitzat tant per particulars com per empreses.

WordPress utilitza el llenguatge PHP i les bases de dades MySQL, com la majoria de CMS. A més, és una eina gratuïta, adaptable i permet a usuaris amb mínims coneixement tècnics poder tenir una pàgina web on publicar­hi contingut tant escrit com multimèdia. Es pot nodrir de diferents plugins per augmentar les seves funcionalitats com per exemple convertir­se en una completa botiga online, en un fòrum o en una xarxa social, i també incorpora plantilles o themes que personalitzen l’aparença final de la pàgina web i la seva experiència d’usuari. Gràcies a aquests elements, una empresa o particular pot tenir llesta la seva pàgina web professional en molt poc temps.

Existeixen dues versions de WordPress: la versió WordPress.com, en línia, permet a l’usuari crear un blog ràpidament sense la necessitat de pagar un allotjament web ni un domini. Tot i així, té limitacions d’espai multimèdia, no permet la incoporació de plugins, i té una sel·lecció de themes reduida. En canvi, la versió WordPress.org permet total llibertat per incorporar plugins i themes tant gratuïts com de pagament. La única condició és disposar d’un allotjament web propi que tingui base de dades i un domini.

Els programadors Matt Mullengew i Mike Little van crear WordPress a partir d’un projecte existent amb llicència GPL (de codi obert) de Michael Valdrighi. Aquests programadors van veure una necessitat de crear una eina potent i senzilla a la vegada per crear blogs i pàgines web , i l’any 2003 va aparèixer primera versió de WordPress. Des de llavors, han anat apareguent noves versions de WordPress que han anat millorant el seu sistema de gestió de publicacions, incorporant estadístiques de la web, diferents tipologies de contingut, etc. L’any 2011 ja s’estaven creant 100.000 pàgines web al dia amb WordPress com a gestor de continguts (Williams et. al., 2013).

21

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

El que fa que WordPress sigui tan popular és que aquesta plataforma ofereix moltes funcionalitats: és senzill de configurar i d’utilitzar, està optimitzat pels motors de cerca, és segur, i ofereix una interfície i una infraestructura molt controlable i adaptable. El fet que sigui un programari de codi obert també ha provocat la creació d’una gran comunitat de desenvolupadors d’arreu del món que ajuden a millorar WordPress dia rere dia, donant com a resultat noves versions, nous plugins i noves plantilles disponibles de manera gratuïta per tothom.

✳

Figura 2. Panell d’administració de WordPress en la seva versió 4.0.1.

1.3.2. Blogger Blogger és una eina gratuïta de Google creada per publicar i compartir continguts en blogs . Els blogs estan allotjats a Google i la marca ofereix un subdomini gratuït al usuari on publicar el contingut del seu blog. Per personalitzar l’aparença utilitza diferents plantilles que l’usuari pot modificar fàcilment tant amb eines visuals de personalització com en codi HTML i CSS. Tot i que és senzill d’utilitzar, no té gaires funcions com a CMS, cosa

22

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

que fa que sigui més una plataforma de publicació de blogs que un gestor de continguts en sí (Google, 2015).

1.3.3. phpBB phpBB és una bona solució de codi obert i gratuït per crear fòrums amb un allotjament propi. Com el seu nom indica, funciona amb PHP i permet gestionar diferents fòrums que poden ser utilitzats per mantenir­se en contacte amb un grup de gent amb uns interessos comuns, per discutir o debatre diferents temes, o per oferir suport tècnic dins d’una empresa. (phpBB, 2014)

1.3.4. MediaWiki Les wikis són pàgines web ideats per a que multitud d’usuaris puguin editar el seu contingut. MediaWiki és un administrador de continguts que permet de manera senzilla i potent gestionar tot aquest contingut i els seus usuaris o editors. Per executar la pàgina web, es necessita allotjament propi i també utilitza PHP i base de dades. Un exemple de pàgina web creada amb MediaWiki és la famosa Wikipèdia (Mediawiki, 2015) .

1.3.5. Moodle Moodle és un sistema de gestió de continguts de codi obert enfocat a administrar cursos i recursos educatius. Per utilitzar­lo també és necessari disposar d’un allotjament propi i ofereix a l’usuari una interfície clara, així com eines com calendaris, administració de fitxers, personalització de l’aspecte visual de la pàgina web, etc. Actualment, és un CMS molt utilitzat en centres educatius d’àmbit nacional i internacional (Moodle, 2015) .

1.3.6. Joomla Joomla és un CMS orientat a la creació de portals web. De la mateixa manera que els altres gestors de continguts esmentats anteriorment, Joomla necessita un allotjament i una base de dades per ser executat. La seva interfície d’administració permet gestionar portals web amb una jerarquia complexa, podent personalitzar l’aparença de la pàgina web a través de plantilles, o augmentar la seva funcionalitat a través d’ extensions , d’una manera semblant com ho fa WordPress. Avui en dia és un dels CMS més utilitzats per crear

23

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

pàgines web d’empreses, siguent el gestor que utilitzen pàgines web com la de Ikea a diferents països, o la de Danone (Joomla, 2015) .

1.3.7. Drupal Drupal, com Joomla, és un gestor de continguts pensat per crear portals i webs complexes a nivell de jerarquia i continguts. És de codi lliure i gratuït, i és un dels CMS més utilitzats.

Està programat en PHP i, com la resta de gestors de continguts, utilitza les bases de dades per organitzar i guardar les configuracions de la pàgina web. Drupal també es nodreix de Mòduls per augmentar les seves funcionalitats, i de themes per canviar l’aparença de la pàgina web. Actualment, pàgines web com la de La Casa Blanca o The Economist utilitzen Drupal com a gestor de continguts (Haarek, et. al., 2015).

✳

Figura 3. La pàgina web oficial de La Casa Blanca i el portal del famós diari The Economist estàn fets amb Drupal.

1.3.8. Prestashop i Magento Prestashop i Magento són dos dels gestors de continguts utilitzats per e­commerce més coneguts. El seu panell d’administració incorpora tot el necessari per desenvolupar una botiga online: gestió de l’estoc, estadístiques de compra, passarel·les de pagament, preus, descomptes, etc. Els dos funcionen amb PHP i MySQL, i són gratuïts. Com la resta de gestors de continguts esmentats, per ampliar les seves funcions utilitzen mòduls o addons , i per canviar i millorar l’aspecte de la pàgina web utilitzen plantilles o themes (X. Borderie, 2013; Magento, 2015).

24

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

1.4. La comercialització de plugins i themes

Els gestors de continguts resulten molt útils per administrar tot el contingut d’una pàgina web. Incorporen panells d’administració que fan que l’usuari no hagi de tenir coneixements de programació per publicar continguts. Però els gestors de continguts només són la part interna de la pàgina web, anomenada backend .

Moltes vegades, per l’ús final que se li vol donar a una pàgina web, les funcionalitats que ofereix un gestor de continguts resulten limitades. Per afegir­hi funcionalitats extres, els desenvolupadors creen extensions, plugins o addons que permeten solucionar les necessitats específiques de cada pàgina web, per després utilitzar­los, compartir­los amb la comunitat de desenvolupadors i per tot el públic en general o, fins i tot, comercialitzar­los.

El mateix succeeix amb les plantilles o themes . La majoria de gestor de continguts posseeix un banc de plantilles que l’usuari pot escollir per personalitzar l’aspecte de la seva pàgina web. Tot i així, la varietat de les plantilles que disposen el gestors sol ser escassa, i l’avantatge d’utilitzar codi lliure permet tant desenvolupadors com a dissenyadors web poder crear i desenvolupar plantilles web específiques per utilitzar­les en un sol projecte, o per compartir­les amb tota la comunitat d’usuaris de manera gratuïta o de pagament.

L’augment de la utilització dels gestors de continguts per administrar pàgines web tant d’empreses com de particulars, ha afavorit la creació de nous models de negoci a Internet que es basen amb la creació i desenvolupament d’extensions i plantilles per els diferents CMS que existeixen, per després oferir­les al usuari de forma premium (de pagament).

Algunes noves empreses d’aquest sector s’estan especialitzant només amb la creació de plantilla i/o plugins per un gestor de continguts en concret, generant productes molt potents per augmentar notablement les funcionalitats i el grau de personalització d’una pàgina web sense que l’usuari final o client hagi de tenir nocions de programació o de disseny. Un cop creats aquests productes, els venen a través de la seva pròpia pàgina

25

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

web, i ofereixen a l’usuari una extensa documentació de com utilitzar el producte, actualitzacions gratuïtes i suport tècnic personalitzat.

L’avantatge de l’adquisició d’aquests productes, és que tant usuaris finals com els propis desenvolupadors o dissenyadors web els poden utilitzar per els seus projectes web.

1.4.1. Els marketplaces Un altre model negoci sorgit de la creació de plugins o de themes premium , han estat els marketplaces . Un marketplace és un portal web que ofereix als creadors, poder vendre els seus productes sense la necessitat de muntar­se per ells mateixos una botiga online.

Gràcies al seu posicionament als cercadors, aquestes plataformes web es converteixen en una molt bona eina de publicitat per als productes que s’hi venen i per als seus propis autors. A canvi d’oferir als usuaris penjar els seus productes de pagament a allà, per cada venda, ells es queden una part de l’import. Tot i així, existeixen uns requisits de qualitat tècnica i estètica molt concrets per poder vendre els productes a aquest tipus de marketplaces .

Pel que fa al desenvolupament de plugins i plantilles, existeixen diversos marketplaces que ofereixen als programadors rebre una retribució pels seus productes web. Una d’elles, la més coneguda, és la empresa anomenada Envato , que disposa de diferents marketplaces per vendre videos, fotografies, àudios, dissenys en 3D i flash, codi de programació, plugins , i plantilles web. El seu model de negoci es basa en quedar­se un 50% de l’import del producte per cada venda que aquest obtingui. Com més diners acumuli un usuari, aquest percentatge va baixant, permetent a l’usuari obtenir més ingressos per cada venda. A més, compten amb un programa d’afiliació, i si a través d’una URL concreta aconsegueixes que es registrin nous usuaris a la plataforma i comprin un producte, et paguen un 30% del import del producte que aquest usuari compri dins dels marketplaces. L’inconvenient d’aquesta plataforma és que són ells mateixos els que posen un preu al teu producte i que els requisits per entrar­hi són molt restrictius (C. Ta’eed, 2015).

Codecanyon és el marketplace d’Envato especialitzat en vendre paquets de codi de programació o snippets per utilitzar­los en pàgines web, i plugins per utilitzar­los a tots els gestors de continguts. El marketplace d’Envato més conegut és Themeforest , encarregat

26

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

de vendre plantilles web tant en HTML, com themes per a tots els gestors de continguts que n’accepten.

1.4.2. Themeforest

✳

Figura 4. El portal web de Themeforest permet trobar la plantilla web que s’adapta més a les necessitats de cada client.

Malgrat que al portal web de Themeforest existeixen tot tipus de plantilles web, actualment són les plantilles o themes de WordPress les que tenen més èxit . Un dels avantatges de portals com Themeforest és que els usuaris accedeixen al portal des d’arreu del món, abarcant un públic objectiu internacional i molt ampli. Tant és així, que existeixen empreses que s’han fet milionàries gràcies a aquesta plataforma de venda.

Un exemple n’és l’agencia de disseny web Theme Fusion . Aquest equip de California (EEUU) està especialitzat en la creació de themes per WordPress, i han aconseguit que la seva primera plantilla a Themeforest sigui la més venuda d’aquest portal en aquests

27

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

moments, amb una quantitat que supera les 100.000 descàrregues en menys de tres anys (ThemeFusion, 2015).

Avada , el nom de la seva plantilla, es caracteritza per ser adaptable per tot tipus de continguts i per tot tipus de sectors. A més, incopora un munt de funcionalitats que fan que l’usuari no hagi de tenir gaires coneixements de programació i disseny per poder obtenir una pàgina web professional en poca estona.

✳

Figura 5. Disseny de la plantilla premium per WordPress Avada , la més descarregada al portal Themeforest.

Un altre cas d’èxit és el de l’usuari Themeco , que amb la seva plantilla X | The theme ha aconseguit uns guanys de més de $1,000,000 en tan sols sis mesos a Themeforest .

Actualment, hi ha 3.781 usuaris a Themeforest que tenen una o més plantilles a la venda.

Investigant dins de l’arxiu d’autors de Themeforest, podem trobar autors de tots els països del món. Pel que fa a Espanya, també hi ha autors que han guanyat molts diners gràcies a

28

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

aquesta plataforma. Un exemple és Pixenmedia, usuari que porta acumulats més de $125,000 amb 15 plantilles.

1.4.3. Requisits per vendre un producte a Themeforest Que la teva plantilla de WordPress, o de qualsevol altre CMS, sigui acceptada a Themeforest no és fàcil. Les regles principals són senzilles: el producte ha de ser teu i has de tenir els drets de llicència per vendre’l.

Tot i així, un producte pot ser rebutjat per diferents causes (Envato Market Help, 2015): ✘ Per no ser prou útil pels compradors. ✘ Per contenir contingut ofensiu. ✘ Per no tenir una qualitat estètica prou bona. ✘ Per no estar ben estructurat. ✘ Per no ser prou compatible. ✘ Per no ser fàcil de personalitzar.

Pel que fa a l’adjudicació del preu de cada producte, utilitzen una guia depenent del gestor de continguts de la plantilla i del seu nivell de personalització i de funcionalitats. Per WordPress, segons el seu centre de suport, els especifica de la següent manera (Envato Market Help, 2014):

$28­33 Plantilla per mòbil o molt simple, com plantilles d’una sola pàgina. $38­43 Plantilles estàndards $48­53 Plantilles amb funcionalitats avançades. $58­63 Plantilles que incorporen eCommerce, compatibilitat amb BuddyPress o funcionalitats avançades excepcionals.

1.4.4. Benchmarking: Anàlisis de les plantilles per WordPress de Themeforest més exitoses Actualment a Themeforest hi ha milers de plantilles per WordPress, però poques han generat uns ingressos milionaris. Per saber quines característiques ha de tenir una plantilla de WordPress per ser acceptada a Themeforest i aconseguir un producte

29

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

competent, el millor és analitzar les característiques i el disseny de les més venudes per incorporar i millorar les funcionalitats que ja tenen.

Avada

Enfold

X Theme

uDesign

Salient

124.752

54.454

50.447

41.217

30.863

$58

$58

$63

$58

$58

$4.341.369,6

$1.894.999,2

$1.906.896,6

Corporate

Corporate

Miscellaneous

Corporate

Creative

Data de sortida

16 August 12

16 April 13

22 November 13

4 June 11

29 March 13

Última actualització

20 March 15

31 March 15

26 March 15

24 March 15

18 March 15

129,28

75,42

100,49

29,36

41,71

$4.498,83

$2.624,65

$3.798,6

$1.021,62

$1.451,4

Vendes Preu Beneficis estimats1 Categoria

Vendes per dia2 Beneficis per dia3

$1.434.351,6 $1.074.032,4

✳

Figura 6. Taula comparativa de la situació actual de les plantilles per WordPress més venudes a Themeforest. Data de consulta: 8 d’abril de 2015.

Multi­propostes de disseny La majoria de plantilles més venudes es defineixen com a multipurposes . Això significa que han estat dissenyats per a que l’usuari pugui crear la seva pàgina a mida per a que el resultat final sigui únic i exclusiu.

Hi ha diferents maneres de fer que uns plantilla tingui moltes propostes de disseny. Una és a través del disseny de múltiples plantilles de pàgina, que el desenvolupador pot crear i l’usuari podrà escollir si utilitzar per una secció concreta de la seva pàgina web.

Una altra pot ser la creació de Child Themes . Aquesta opció és molt útil si es vol personalitzar a fons una plantilla. Els Child Themes permeten crear plantilles filles que depenen de la plantilla superior o pare . D’aquesta manera, la plantilla pare es converteix en un framework que funciona com a motor de les plantilles filles. Es poden crear funcions i estils específics per aquesta plantilla sense haver de modificar el codi de la plantilla 1

Els beneficis estimats s’obtenen a partir de l’operació de multiplicar les vendes per el preu del producte, restant­hi el percentatge que es queda Themeforest. Aquest percentatge varia segons els ingressos generats per part de l’autor, i va des de un 50% fins a un 30%, però per fer el càlcul s’utiliza el percentatge mitjà de 40%.

2 Resultat de l’operació de dividir la xifra de vendes entre el nombre de dies que fa que va sortir a la venda.

3 Resultat de l’operació de dividir els beneficis estimats entre el nombre de dies que fa que va sortir a la venda.

30

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

superior. Així, quan hi ha una actualització de la plantilla pare, l’usuari es pot assegurar que les modificacions que hagi fet no es veuran alterades (WordPress, 2015c).

Responsive design o disseny adaptat a mòbils Actualment, totes les pàgines web han d’estar adaptades a diferents dispositius. Això és necessari perquè actualment més de la meitat del tràfic d’Internet prové de dispositius mòbils o tablets . Totes les plantilles que es comercialitzen actualment ofereixen un disseny 100% Responsive .

Existeixen diferents mides d’amplada de pantalla a l’hora d’adaptar els dissenys web per mòbil, però les més utilitzades són les següents:

Menys de 480px

Entre 481px i 768px

Entre 769px i 960px

Més gran de 960px

Mòbils

Mòbils i tablets

Tablets

Pantalles més grans

✳

Figura 7. Mides que se solen utilitzar per adaptar un disseny web a mòbil (Bootstrap, 2015).

Retina Display Amb l’aparició de les pantalles Retina Display tant per dispositius mòbils com per ordinadors, comercialitzades en els productes d’Apple, la densitat d’aquestes ha augmentat. Això fa que les imatges dels programes o pàgines web hagin de ser el doble de grans per a que no es vegin pixelades en aquests dispositius (C. Buckler, 2013).

La millor manera d’assegurar­se que la plantilla estigui llesta per Retina Display , és incorporar una funció a la plantilla en PHP i en Javascript, que farà que es detecti si l’usuari està navegant amb un dispositiu amb Retina Display o no.

Page Builder Totes les plantilles més venudes utilitzen un Page Builder , que permet maquetar i personalitzar totes les pàgines o seccions d’una pàgina web de manera senzilla i ràpida. El Page Builder permet afegir estils diferents a cada secció d’una pàgina i permet incorporar elements pre­configurats com contingut de text, llistat d’entrades de blog, mapes, formularis de contacte, etc. utilitzant una estructura de columnes definida com a grid .

31

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Algunes de les plantilles han optat per crear el seu propi Page Builder però d’altres, en canvi, han aprofitat plugins que incorporen aquesta funció. Un dels plugins més utilitzats és l’anomenat Visual Composer . A més d’incorporar un Page Builder dins de l’editor de l’administrador, l’usuari pot maquetar tota la seva pàgina web de manera visual, editant el contingut sobre la pàgina web i no dins de l’administrador. Aquest fet permet que l’usuari pugui veure exactament com quedarà el contingut que està introduïnt (WPBakery Inc., 2015). Un altre plugin utilitzat com a Page Builder és SiteOrigin Page Builder , que a més de ser gratuït, et permet crear widgets específics i plantilles de pàgina predefinides (G. Priday, 2014).

Els shortcodes Els shortcodes permeten, de la mateixa manera que el Page Builder , maquetar de manera senzilla el contingut d’una pàgina des de l’editor de l’administrador. S’utilitzen per afegir codi HTML a la pàgina sense que l’usuari hagi de tenir coneixements d’aquest llenguatge i tenen aquest format:

[shortcode]Contingut[/shortcode] o [shortcode /]

Les plantilles utilitzen els shortcodes per facilitar a l’usuari la maquetació del contingut de la seva pàgina web, com a alternativa i/o complement al Page Builder (WordPress, 2015b).

Opcions de la plantilla A més d’un Page Builder , totes les plantilles tenen un Theme Options o Opcions de la plantilla dins de l’administrador de WordPress per tal de configurar les opcions generals i l’estil general de la plantilla. A part, WordPress disposa d’un personalitzador propi molt visual on l’usuari pot veure els canvis de configuració de la web sense haver de recarregar la pàgina. És molt senzill afegir opcions a la pròpia plantilla per poder configurar­les en el Customizer nadiu de WordPress. Encara no hi ha massa plantilles que l’utilitzin per modificar tota la configuració de la plantilla, la majoria només l’utilitzen per modificar alguns aspectes de disseny (WordPress, 2015b).

32

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Facilitat d’instal·lació i de configuració de la plantilla Per poder comercialitzar una plantilla és necessari entregar a l’usuari una extensa documentació o guia de suport d’aquesta, que expliqui els passos bàsics per instal·lar­la i configurar­la. Normalment aquestes documentacions són molt llargues i complexes per un usuari que vol tenir una pàgina web llesta en poca estona, però sí que són útils per les persones que volen treure el màxim rendiment de la seva adquisició.

Per poder facilitar i agilitzar el procés de configuració de la plantilla, es sol incloure un Demo Content o una base de dades amb un contingut per defecte per a que l’usuari pugui visualitzar ràpidament com es veurà la seva pàgina web.

També és necessari que els autors de la plantilla tinguin un centre de suport per a que els clients puguin preguntar qualsevol dubte respecte aquesta. Per poder comprovar que l’usuari ha comprat la plantilla, es sol demanar un codi de compra que facilita Themeforest.

Un cop comprovat, l’usuari pot generar un ticket , o una pregunta a través d’un formulari, per a que els desenvolupadors puguin respondre els dubtes dels clients.

Algunes plantilles, fins i tot, tenen una base de coneixement online més extensa que la documentació o guia principal, així com tutorials per usuaris més avançats i que volen treure­li més rendiment a la plantilla.

Existeixen diverses eines a Internet per oferir aquest serveis als clients. Una d’elles és ZenDesk, que s’ocupa de generar un centre de coneixement i de suport per poder gestionar els tickets en casos com en les plantilles Premium (Zendesk, 2013).

El que no fan la majoria de plantilles és donar la possibilitat a l’usuari que, un cop instal·lada, pugui configurar­la amb un parell de clics, sense haver de consultar la documentació. A través de l’administrador mateix, es va informant a l’usuari dels passos que ha de seguir per acabar ràpidament de configurar la plantilla. És un mètode molt eficaç per aquells usuaris que es perden entre tanta informació i tantes opcions de les plantilles.

Actualitzacions automàtiques Un altre aspecte que no tenen la majoria de plantilles de Themeforest són les actualitzacions automàtiques de noves versions. Aquesta opció és una molt bona manera

33

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

per a que l’usuari vegi fàcilment quan té una actualització disponible de la plantilla, i poder­la descarregar i tornar a instal·lar sense sortir de l’administrador de WordPress.

Compatibilitat amb plugins i plugins incorporats Algunes plantilles inclouen plugins dins del seu themes . Ho fan perquè requereixen aquests plugins per augmentar les seves funcionalitats, i perquè molts d’aquests plugins són de pagament. Quan s’instal·la la plantilla en qüestió, aquesta suggereix a l’usuari instal·lar uns plugins determinats. Per poder fer­ho, existeix una eina anomenada TGM Plugin Activation , que comprova quins plugins estan inclosos dins de la plantilla per després facilitar a l’usuari la seva instal·lació amb només un clic (T. Griffin, 2014).

Malgrat això, totes les plantilles haurien de poder ser funcionals sense la necessitat de cap plugin extra, i no hauria d’haver­hi plugins requerits per fer funcionar la plantilla, sinó plugins recomanats per augmentar les característiques d’aquesta.

El que sí que és important és adaptar d’entrada la plantilla a tots aquells plugins més coneguts que l’usuari pugui instal·lar per part seva. Existeixen moltes extensions o plugins que afegeixen funcionalitats a una pàgina web, però una plantilla ha de saber adaptar el disseny de la part visual del plugin per a que encaixi amb el disseny general de la plantilla.

Alguns dels plugins o extensions més coneguts i útils per incloure a una instal·lació de WordPress són els següents:

○ Woocommerce : s’utilitza per crear una botiga online. És un dels plugins més complets i utilitzats per WordPress, a més de ser gratuït. ○ Visual Composer : afegeix un Page Builder a l’editor d’entrades de WordPress, a més de permetre l’edició i maquetació del contingut d’una entrada de manera visual dins de la pròpia pàgina web. ○ Contact Form 7 i Gravity Forms : dóna la possibilitat d’afegir formularis de contacte fàcilment a la pàgina web. ○ Jetpack : afegeix totes les funcionalitats que té WordPress.com, la versió online de WordPress. Són característiques com: formularis de contacte, slideshows, shortcodes, estadístiques de la web, etc. ○ Revolution Slider : és un dels plugins més complets per crear slideshows amb text, videos i animacions.

34

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

○ Uber Menu : Et permet crear Mega Menus. Un Mega Menu és un menú de WordPress més complet i ampli. ○ WPML (WordPress Multilingual) : És un plugin de pagament que et permet tenir la teva pàgina web en diversos idiomes, podent traduir tot el contingut a través d’un gestor de traduccions molt complet. ○ Yoast : Afageix funcionalitats per millorar el SEO o posicionament de la pàgina web. ○ Mailchimp : Et permet incorporar un formulari per a que els usuaris es puguin subscriure a una llista de Mailchimp, per després poder­los enviar newsletters . ○ BbPress: Et converteix una pàgina web en un fòrum. ○ BuddyPress: Transforma una instal·lació de WordPress en una xarxa social.

Traduccions Les plantilles Premium que es troben a Themeforest estan a l’abast de tot el món. És per això que han d’estar traduïdes a diferents idiomes o, si més no, ser capaces de ser traduïdes per altra gent. Fer que una plantilla sigui traduïble és molt senzill. Simplement s’ha d’afegir a qualsevol text de la plantilla el següent format (segons com s’utilitzi el text s’haurà d’introduir el primer o el segon exemple):

<?php __(‘Text a traduir’, ‘nom­de­la­plantilla’); ?> o <?php _e(‘Text a traduir’, ‘nom­de­la­plantilla’); ?>

Un cop adaptats tots els textos, a través de plugin esmentat abans, WPML, podrem traduir tots els textos de la plantilla.

Rapidesa de càrrega És molt necessari tenir en compte la rapidesa de càrrega de la pàgina web per a que tingui èxit. I la majoria de temps de càrrega ve donat pel temps que tarda a carregar tota la plantilla. És important, doncs, adaptar la plantilla per a que no utilitzi codi innecessari a totes les pàgines, sinó només quan realment requereixin les funcions. Normalment el que fa augmentar el temps de càrrega de la plantilla són els arxius en Javascript que incorporen, i el tamany de les imatges que afegeixen.

Existeixen diferents pàgines web per avaluar el temps de càrrega d’una pàgina web, i és necessari passar aquest test de velocitat abans de comercialitzar una plantilla.

35

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Optimització per SEO Un dels factors que més es valora a l’hora de crear una pàgina web és que el client voldrà sempre que aquesta apareixi a les primeres posicions dels cercadors. És important que el contingut de la web tingui relació amb les paraules o frases que el client vulgui posicionar, així com també és important actualitzar la pàgina web sovint per a que els cercadors vegin que es tracta d’una pàgina web activa. El mateix passa amb les xarxes socials que es vincules amb la pàgina web i la marca que vol promocionar el client.

A l’hora de crear una plantilla no es pot ajudar al client a millorar el contingut de la pàgina web, però si que es pot crear una estructura de codi que sigui correcta per a que els cercadors comprovin que és una pàgina web professional. Això inclou maquetar la pàgina web amb les etiquetes HTML correctes i que no hi hagin errors de programació. Per saber si la plantilla que estem creant té cap error de programació HTML o CSS, es poden utilitzar eines a Internet que analitzen el codi i et diuen com pots millorar­lo per a que sigui correcte. És necessari passar aquests tests per poder comercialitzar una plantilla a llocs com Themeforest.

Compatibilitat amb tots els navegadors La compatibilitat d’una plantilla amb tots els navegadors és un dels temes que genera més mal de caps als dissenyadors web. Cada navegador interpreta d’una manera diferent el codi d’una pàgina web, i hi ha navegadors que no accepten el mateix codi CSS o que el llegeixen de maneres diverses. És per això que es vol que la plantilla es vegi bé als navegadors que s’utilitzen actualment s’ha d’adaptar el codi CSS.

Els navegadors més utilitzats actualment són Google Chrome, Firefox, Safari, Opera, Internet Explorer (IE8, IE9, IE10, IE11) i navegadors mòbils com Android Browser o Safari per iOS. Per tant, una plantilla Premium haurà d’estar adaptada a tots aquests navegadors per a que tots els tipus d’usuaris puguin veure correctament la pàgina web dels clients que l’utilitzin.

Elements de disseny Hi ha diferents elements de disseny que es solen trobar a les plantilles Premium . Un d’ells és la possibilitat de deixar a l’usuari crear animacions en CSS del contingut de la plantilla a través de shortcodes . La incorporació de múltiples tipografies provinents de Google Web

36

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

fonts és un servei molt utilitzat per emprar tipografies de manera gratuïta, també utilitzades en plantilles Premium.

Un altre element de disseny utilitzat per totes les plantilles que es comercialitzen són els icones. Abans, els icones que s’utilitzaven eren imatges, però s’ha vist que utilitzant una tipografia que contingui icones es redueix molt el temps de càrrega d’una web. Actualment existeixen diferents tipografies com Font Awesome, que permeten a l’usuari incorporar centenars d’icones diferents (D. Gandy, 2015).

1.4.5. Altres marketplaces Tot i així, existeixen altres plataformes semblants a Themeforest, que tenen un model de negoci igual o molt semblant.

Mojo­Themes , és un portal especialitzat en plantilles web de tota mena que també s’atribueix el 50% de la venda de cada producte i existeix un programa d’afiliats, però els requisits per validar productes no són tan restrictius com a Themeforest i els preus que posen del teu producte moltes vegades són més alts. Actualment, Mojo­Themes està duent a terme una migració cap a un nou portal web anomenat Mojo Marketplace , que té una interfície més intuïtiva i semblant a la de Themeforest .

Un altre exemple és Creative Market , que a més d’allotjar plantilles web, també té un stock d’imatges, gràfics i tipografies. L’avantatge d’aquest portal respecte Themeforest o Mojo­Themes , és que no hi ha un procés de selecció dels productes. És a dir, qualsevol pot muntar una botiga online sense necessitat de passar per un filtre de requisits. A més, ets tu qui poses el preu dels teus productes, i ells només es queden amb un 30% de cada venda. També té un programa d’afiliació que consisteix en rebre un 10% de totes les vendes durant un any que faci l’usuari que has aconseguit que es registri a la plataforma.

L’inconvenient d’aquestes plataformes respecte a Themeforest , és que no són tan conegudes ni tan ben posicionades als cercadors, cosa que fa que qualsevol persona que busqui una plantilla per la seva web, la majoria de vegades va a Themeforest directament, en comptes d’altres marketplaces semblants.

37

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

2. Disseny i desenvolupament d’una plantilla web de WordPress Per a la seva futura comercialització

2.1. Objectius del projecte

Els objectius principals del projecte es centren en l’elaboració del primer producte de Mildthemes . Aquesta empresa ha estat conceptualitzada per tal d’oferir noves solucions a totes aquelles empreses, desenvolupadors i usuaris a nivell personal que volen crear una pàgina web de manera ràpida i a baix cost.

Mildthemes és una agència de disseny i desenvolupament web dirigida per Laura Agustí que s’encarrega de crear i vendre plantilles web amb dissenys predefinits, especialment centrada en la plataforma WordPress.

Aquest primer producte consistirà en una plantilla web que l’usuari pugui utilitzar a l’hora de dur a terme els seus projectes web per tal d’estalviar­se temps i diners. Aquesta plantilla, ajudarà a l’usuari a tenir llesta la seva pàgina web sense tenir nocions de disseny o de programació, mitjançant a una interfície molt senzilla d’utilitzar gràcies al gestor de continguts WordPress.

Un dels altres objectius d’aquest projecte és generar un producte de qualitat, permetent que aquest pugui tenir sortida al mercat, podent­lo comercialitzar a través d’Internet.

38

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Tot i així, els objectius més importants es podrien resumir en:

✓ Crear un producte el més personalitzable possible. ✓ Desenvolupar la plantilla web que sigui ràpida d’executar. ✓ Dissenyar una interfície usable per a que sigui fàcil d’utilitzar per l’usuari que l’hagi de personalitzar. ✓ Generar un producte que pugui millorar la conversió visitants­vendes segons l’objectiu que l’usuari s’hagi marcat. ✓ Dissenyar una experiència d’usuari òptima per al visitant de la pàgina web.

2.2. Creació i conceptualització del tema

Després de l’experiència a Themeforest amb una plantilla HTML pròpia anomenada Mandarina desenvolupada en tan sols en una setmana i després d’analitzar les plantilles de WordPress amb més vendes de Themeforest, es va valorar la possibilitat de crear una plantilla per WordPress que no fos tan complicada d’entendre i de personalitzar com les que ja existien al mercat. Una plantilla que pugués generar uns ingressos a través de Themeforest prou bons com per convertir­se en un model de negoci i, com a conseqüència, en una empresa.

✳

Figura 8. Vendes de la plantilla HTML Mandarina des del 23/07/2013 fins el 20/05/2015.

39

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

És per això que aquest projecte es basa en el disseny i desenvolupament d’una plantilla web professional per al gestor de continguts WordPress, amb l’objectiu d’obtenir el primer producte de l’agència Mildthemes que pugui ser comercialitzat a Internet, amb un mercat internacional.

Aquesta plantilla tindrà una sèrie de característiques que la faran atractiva pel seu futur consumidor i, per tant, la faran susceptible a ser comercialitzada amb èxit:

Serà una plantilla creada des de zero, utilitzant com a referència exemples d’altres plantilles de WordPress, per tal d’optimitzar i millorar al màxim les funcions de les plantilles existents.

A l’hora de programar­la, s’utilitzarà el PHP com a base de comunicació entre WordPress, la base de dades i la pròpia plantilla. Per tal de dissenyar­la i maquetar­la, s’utilitzarà el HTML5, el CSS3 i el Javascript per tal d’afegir dinamisme als elements gràfics del producte sense que la pàgina web acabi sent lenta a l’hora de la seva execució, així com per poder adaptar­se als diferents navegadors d’Internet i als diferents dispositius.

Per altra banda, serà una plantilla web atractiva, amb un disseny usable i coherent, que a més comptarà amb una interfície interna on l’usuari podrà modificar i personalizar l’aparença d’aquesta plantilla fàcilment, sense haver de tenir coneixements de programació.

A través d’una experiència d’usuari òptima pel visitant de la pàgina web generada amb la plantilla, es podrà millorar la conversió visitants­vendes. D’aquesta manera l’usuari podrà assolir l’objectiu que s’havia marcat, ja fos vendre un producte, aconseguir informació valuosa dels seus visitants (com el correu electrónic), o donar­se a conèixer fent que el visitant el recordi bé.

Tot i que el producte final serà en anglès, la plantilla web serà traduïble a diferents idiomes, per tal que els desenvolupadors web que l’adquireixin puguin traduir fàcilment el contingut de la plantilla. D’aquesta manera la plantilla podrà ser utilitzada arreu del món.

Per tal que l’usuari pugui aprendre com funciona el producte, la plantilla inclourà una guia de documentació on l’usuari podrà trobar tota la informació que necessita per obtenir una

40

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

pàgina web professional. A més, es crearà un centre de suport per a que l’usuari pugui interaccionar amb els desenvolupadors de la plantilla, per tal d’ajudar­lo en possibles dubtes que li puguin sorgir.

Finalment, i un cop la plantilla hagi sortit al mercat, s’aniran introduïnt millores del producte per a que l’usuari no tingui cap problema per poder crear la webs que necessita.

2.3. Establiment dels objectius i operativa de treball

Per dur a terme la plantilla per WordPress definida, és important dividir la feina en diferents fases.

✳

Figura 9. Diagrama de Gantt dividit en les diferents fases del projecte.

Per tal de definir quines característiques tindrà la plantilla és important tenir en compte l’anàlisis de la competència realitzat. De la mateixa manera, s’haurà de crear l’estructura que haurà de seguir la plantilla i una guia d’estils, així com crear el disseny de cadascún dels elements que la compondrà.

Un cop definit el disseny de la plantilla, aquesta s’haurà de maquetar amb HTML i CSS i s’hauran d’aplicar les funcions de WordPress corresponents per a que cada pàgina funcioni correctament.

41

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Per fer­ho, es crearà una estructura de quadrícules o grids des de zero, que ajudarà a maquetar el contingut amb més facilitat.

La quantitat de pàgines que s’hauran de dissenyar i maquetar depèn de les característiques o funcionalitats que preten tenir la plantilla. Per tal de generar una plantilla multifuncional i personalitzable s’hauran de dissenyar i programar moltes més pàgines que per obtenir una plantilla bàsica de WordPress.

És per això que es realitzaran diferents versions, prioritzant els elements bàsics que ha de tenir una plantilla de WordPress, i embolcallant aquesta plantilla amb les opcions i elements que la faran més personalitzable i exclusiva.

Un cop completades aquestes diferents versions, s’haurà de comprovar que no existeixen errors de programació i s’haurà de testejar a diferents dispositius i navegadors per comprovar que la plantilla funciona correctament dins de qualsevol plataforma, i que és ràpida d’executar.

Finalment, se seguirà el procés corresponent per tal de poder comercialitzar la plantilla.

Aquest procés inclou preparar una documentació per l’usuari en anglès, i preprarar la pròpia plantilla pera que es mostrin totes les seves característiques i dissenys.

42

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

2.4. Desenvolupament

2.4.1. Com crear una plantilla de WordPress Per generar una plantilla web per WordPress, el primer pas és obtenir un programari d’ordinador que et permeti executar codi de servidor (com el PHP) dins de l’ordinador.

D’aquesta manera no caldrà tenir un servidor online per tal de programar la plantilla i es podrà treballar sense connexió a internet. Per al sistema operatiu OS X ­el qual s’utilitzarà per dur a terme aquest producte­, existeix un programari anomenat MAMP que et permet simular un servidor web de manera offline i et permet crear i utilitzar bases de dades MySQL.

Un cop obtingut el programari necessari, s’haurà de baixar d’Internet la última versió de WordPress, en aquest cas en anglès, de la pàgina web https://wordpress.org/ . Aquest arxiu, descomprimit, s’ha de col·locar a la carpeta htdocs del MAMP per poder executar­lo en local. Depenent del nom de la carpeta d’arrel, la URL per accedir­hi serà la següent: localhost/nom­de­la­carpeta

✳

Figura 10. Procés d’instal·lació de WordPress.

Si accedim a aquesta pàgina, WordPress començarà el seu procés d’instal·lació. És important crear una base de dades dins del MAMP, doncs WordPress requereix una base

43

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

de dades per funcionar correctament. Un cop instal·lat, ja es podrà accedir al administrador de WordPress, i al lloc web en local, dins de l’ordinador.

✳

Figura 11. Interfície d’administració de WordPress.

Per crear una plantilla web, s’ha d’accedir a la carpeta on està instal·lat el WordPress, nom­de­la­carpeta/wp­content/themes. Per defecte, WordPress, porta instal·lades les últimes versions de seves plantilles.

2.4.2. L’estructura d’arxius d’una plantilla de WordPress Per crear una plantilla des de zero, s’ha de crear una carpeta que tingui el nom de la plantilla i, dins, uns arxius específics que faran que totes les seccions de la web es vegin correctament.

L’estructura bàsica d’arxius d’una plantilla de WordPress és la següent:

● header.php: És on es mostra la capçalera de la pàgina web, així com totes les dades per a que la pàgina web s’inicialitzi correctament. En aquest arxiu apareix vinculat l’arxiu CSS que utilitza la pàgina web per la seva aparença, i s’han de definir elements importants com el títol de la pàgina web, la seva descripció, i la

44

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

informació que es vol mostrar als cercadors que la indexin. A més, aquest arxiu s’ha de vincular a la resta d’arxius de la plantilla per a que es mostri correctament. ● index.php: És la pàgina principal de la plantilla per defecte. A dins, s’hi mostra un loop amb les últimes entrades del blog, i pot contenir o no tot el contingut de cada entrada. ● footer.php: Es situa al final de tots els arxius de la plantilla i actua com a peu de pàgina. Normalment, aquest arxiu s’utilitza per vincular­hi els arxius en Javascript, i per mostrar els crèdits o informació extra de la pàgina web. ● archive.php: Pot ser semblant al index.php, doncs conté el loop de les últimes entrades del blog. A part, s’hi poden incloure condicions per mostrar diferents elements: ○ Si es tracta un arxiu d’usuari, es mostren totes les entrades escrites per un mateix usuari. ○ En el cas de l’arxiu de categories, es mostren les entrades vinculades a una mateixa categoria. Passa el mateix amb l’arxiu d’etiquetes. ○ Pel que fa a l’arxiu per data, es mostren les entrades segons la seva data de publicació, podent recuperar les entrades que van ser publicades en un any, mes o dia concret. ● search.php: A través del cercador, es pot trobar informació dins de la pàgina web.

Aquest arxiu permet personalitzar l’aparença dels resultats de la cerca, o mostrar un avís d’error quan no s’ha trobat el que l’usuari buscava. ● searchform.php: Dins d’aquest arxiu es personalitza l’aparença del cercador. ● single.php: Aquest arxiu mostra l’entrada de blog concreta. Normalment, en els arxius i a l’index, només es mostra el principi del contingut, incitant a l’usuari a fer clic a l’entrada en concret per poder llegir la resta de contingut dins del single.php. ● comments.php: Dins del single.php, normalment s’hi vincula la plantilla de comentaris, que permet al lector interactuar amb l’autor de l’entrada sobre el tema que s’està tractant. ● 404.php: Aquest arxiu es mostra quan l’usuari intenta accedir a un apartat de la pàgina que no existeix. ● page.php: A part de les entrades de blog, l’usuari pot crear pàgines, que tenen com a característica oferir un contingut més estàtic. Pot ser semblant al single.php pel que fa a la seva aparença, però les pàgines no solen mostrar comentaris i normalment no tenen sidebar .

45

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

● sidebar.php: És on es personalitza l’aparença dels sidebars , que es defineixen com a barres laterals que ofereixen informació extra sobre el contingut de la pàgina web. Dins de l’administració de WordPress, es podran personalitzar quins widgets apareixen dins dels sidebars . ● functions.php: En aquest arxiu és on es creen les funcionalitats extres de la plantilla. És on es defineixen quins sidebars que tindrà la pàgina web i on es vinculen els arxius de CSS o Javascript de la pàgina web. A part, és on l’usuari podrà crear funcions específiques i avançades que vulgui utilitzar a la plantilla. ● style.css: Tota plantilla de WordPress ha de tenir un arxiu anomenat així que, vinculat al header.php, pugui mostrar l’aparença, colors, formes, mides i estructura del disseny de la pàgina web.

Per poder ampliar la funcionalitat de la plantilla, es poden afegir altres arxius que contenen variacions de les diferents pàgines. Una d’aquestes variacions són els Post Formats, que permeten personalitzar l’aparença d’una entrada de blog segons el tipus de contingut que inclou. N’hi ha deu:

● Standard: És el disseny estàndard que s’utilitza per crear una entrada de blog. La imatge destacada té una alçada concreta per tal de no mostrar­la tota. ● Gallery: Permet donar un estil diferent a les entrades que tenen una galeria d’imatges. Normalment, agafa la primera galeria de l’entrada i la transforma en un slideshow . ● Aside: Normalment s’utilitza per mostrar una nota sense títol. ● Image: Permet crear un disseny per tal de destacar la primera imatge adjuntada a una entrada. ● Quote: Permet crear un estil per les entrades de blog que tenen com a objectiu destacar una cita. Per fer­ho, s’agafa la primera cita de l’entrada etiquetada amb <blockquote> . ● Status: Permet dissenyar una entrada com si fos una actualització de Twitter o de Facebook, sense afegir cap títol, i mostrant tot el contingut. ● Video: S’utilitza per destacar un video. Normalment s’utilitza el primer video adjuntat a l’entrada de blog per col·locar­lo a una posició més destacada. ● Audio: Actua de la mateixa manera que el Post Format de Video, però agafant el primer audio.

46

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

● Link: Permet destacar un enllaç concret, normalment el primer enllaç que hi ha dins del contingut de l’entrada de blog. A aquí l’enllaç del títol de l’entrada no redirigeix al single.php , sinó que enllaça al primer link (extern o intern) de l’entrada. ● Chat: S’utilitza per destacar una conversa amb una aparença similar a la d’un xat.

Cada Post Format també pot tenir un estil diferent per la seva pàgina de l’article (el single.php), tenint en compte el contingut que es vol destacar. És per això que moltes vegades és útil escollir entre els Posts Formats per adaptar millor el disseny al contingut que es vol destacar.

✳

Figura 12. Els Posts Formats s’escullen per cada entrada, dins de l’editor de text que permet personalitzar el contingut d’aquesta.

Per altra banda, per donar la possibilitat de personalitzar a l’usuari les pàgines, es poden crear diferents plantilles de pàgina, que dins de l’estructura d’arxius s’anomenen de la següent manera: template­ nom­de­la­plantilla .php.

✳

Figura 13. L’usuari, a través de l’editor de la pàgina, pot configurar quin estil o plantilla de pàgina aplicar.

47

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

2.4.3. Com afegir funcionalitats a WordPress A part de maquetar i dissenyar l’aparença d’una plantilla, és important que aquesta incorpori algunes funcions extres que permetin donar­li un valor afegit. Per tal d’afegir funcionalitats noves o de modificar les funcions que WordPress fa servir sense haver de modificar el codi del seu nucli, WordPress proporciona unes funcions anomenades hooks .

N’hi ha de dos tipus: els Actions i els Filters .

● Els Actions permeten executar les funcions que hem creat en un lloc o moment concret del nucli o core de WordPress. ● Els Filters, en canvi, permeten modificar el contingut que proporciona el propi WordPress.

D’aquesta manera, es poden afegir funcionalitats que permetin a l’usuari personalitzar, a través de l’administrador de WordPress, més elements de la seva pàgina web.

Una de les maneres de personalitzar el que es mostrarà dins d’una plantilla de WordPress es a través d’afegir metaboxes dins de qualsevol pantalla de l’administrador. Els metaboxes són caixes d’informació vinculades a una entrada de blog, o a una pàgina que es guardaran a la base de dades i podran retornar el valor guardat.

A través dels hooks , és senzill crear camps de text per a que l’usuari hi afegeixi una informació complementària a una entrada de blog, per a que es guardi un cop publiqui l’entrada. Un exemple seria la possibilitat d’afegir o vincular un color concret a una pàgina de blog, per a que després l’aparença d’aquesta entrada mostri quelcom amb aquell color.

Els hooks també es poden utilitzar per crear widgets per col·locar dins dels sidebars disponibles de la plantilla. Els widgets permeten incorporar a una pàgina web informació complementària que pot ser útil per l’usuari, com per exemple, mostrar les últimes entrades del blog, mostrar un menú complementari, o una galeria de les últimes imatges penjades a Instagram.

Tot i així, l’eina més útil de personalització a través de la utilització de hooks és la possibilitat d’afegir opcions de personalització dins del Customizer de WordPress . El

48

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Customizer permet modificar diferents opcions de la plantilla o de la configuració interna de WordPress podent mostrar els canvis visualment.

A través dels hooks , es poden afegir opcions tals com modificar el color de la capçalera de la pàgina, definir un logotip per la web, triar el color de fons o dels enllaços, etc.

Els avantatges dels hooks no es queden només en modificar i afegir contingut del nucli de WordPress, sinó que també es poden utilitzar per organitzar la maquetació de la plantilla.

D’aquesta manera, si un desenvolupador adquireix la plantilla i necessita modificar qualsevol codi d’aquesta, no haurà de modificar el codi de la plantilla directament, sinó que podrà crear un Child Theme, que li permetrà crear funcions modificant el contingut dels hooks definits a la plantilla. Així, si hi ha una actualització de la plantilla, l’usuari que l’hagi adquirit no perdrà els canvis que hagi efectuat dins d’aquest Child Theme, i podrà gaudir, a la vegada de les noves funcionalitats de la nova versió de la plantilla.

2.5. El resultat: Nectarina

Nectarina és una plantilla web per WordPress creada per tal que l’usuari pugui personalitzar la seva pàgina web sense haver de tocar cap línia de codi a través d’una interfície intuïtiva.

En aquesta primera versió del producte, Nectarina es pot utilitzar per totes aquelles persones o empreses que vulguin tenir la seva pàgina web personal o corporativa i el seu blog, i que a més vulguin vendre un producte o un seguit de productes des de la seva pròpia pàgina web.

2.5.1. Estructura de grids o de retícula Per tal de desenvolupar­la i dissenyar­la, s’ha creat des de zero una retícula de sis columnes com a màxim amb CSS per tal de poder organitzar totes les caixes de contingut en diferents amplades i de manera lògica.

49

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Les mides de columnes que s’han contemplat són les següents:

✳

Figura 14. Estructura de retícula o de columnes que utilitza Nectarina.

Aplicant una classe de CSS determinada a una caixa, agafarà la mida de la caixa superior que l’envolta, i calcularà en percentatges(%) la mida que li correspon a la caixa de dins.

Per tant, si dues caixes tenen les següents etiquetes:

<div class="nectarina­col five­sixth"><h5>Five sixth</h5></div> <div class="nectarina­col one­sixth"><h5>One sixth</h5></div>

I la caixa que les envolta té una mida de 1.200px, la mida de cadascuna d’elles serà: Five sixth: 1.000px (83.3333333333%) + One sixth: 200px(16.6666666667%) = 1.200px.

Per tal de que aquesta retícula s’adapti a tot tipus d’amplada de pantalles, es treballa en percentatges. Així, encara que es tracti d’una amplada diferent, el percentatge seguirà sent sempre el mateix i es podrà aplicar correctament.

50

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 15. Mostra l’estructura que s’utilitza del Header dins d’una pàgina. Hi ha una caixa que ocupa una quarta part, i una altra que ocupa les tres quartes parts restants. Envoltant aquestes dues caixes, n’hi ha una altra que té una mida que va canviant segons l’amplada de la finestra o de la pantalla del dispositiu.

2.5.2. Disseny adaptatiu o responsive/fluid design Si s’utilitzessin els percentatges per definir totes les mides dels elements de la plantilla, aquesta esdevindria adaptada a mòbil. Aquest tipus de disseny s’anomena fluid .

Una altra manera d’adaptar el disseny a les pantalles de mòbil és a través dels @media queries de CSS. Aquesta propietat permet aplicar un CSS o disseny diferent segons l’amplada de la pantalla. Aquest mètode permet treballar amb un altre tipus de disseny, el responsive .

Es defineixen unes mides concretes de les caixes que englobaran tot el contingut de la pàgina web (wrapper) . Llavors, segons la mida de la pantalla, aquesta mida canviarà, fent que s’adapti el disseny a l’amplada del dispositiu.

51

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Per realitzar el disseny adaptatiu de la plantilla, s’han combinat aquests dos mètodes.

S’han definit unes mides per les diferents amplades de pantalla que hi poden haver i, en la mida de pantalla més petita s’ha aplicat un disseny fluid , per tal que s’adapti a qualsevol mida inferior a la definida.

L’avantatge de combinat els dos tipus de dissenys, és que si la pantalla és molt gran la pàgina web no ocuparà el 100% d’aquesta, cosa que faria més complicada la lectura del contingut. En canvi, si la pantalla és molt petita, és important mostrar el 100% de la pàgina per a que els marges de la pàgina no siguin més grans que l’amplada del propi contingut.

Les mides que s’han utilitzat per aquesta plantilla són les següents:

Dispositius

Menys de 769px

Mòbils

Entre 769px i 960px

Mida

Mida del wrapper

XS

100%

Tablets i mòbils

S

768px

Entre 961px i 1200px

Tablets

M

960px

Entre 1201px i 1500px

Portàtils

L

1200px

Més de 1500px

Pantalles grans

XL

1500px

✳

Figura 16. Mides per adaptar la pàgina web a mòbils que s’han utilitzat a la plantilla.

2.5.3. Disseny adaptatiu amb estructura de retícules De vegades la disposició dels elements canvia depenent si visualitzes la pàgina web en un mòbil o en un portàtil, per tal d’adaptar l’amplada dels elements segons la importància que tenen. Per poder canviar l’amplada definida a través de les columnes segons la mida de la pantalla, s’han creat unes classes CSS auxiliars que permeten fer aquesta modificació.

Per exemple, si es vol que una pantalla gran mostri una estructura de cinc sisens i d’un sisé, però que en una pantalla d’un tablet o d’un mòbil mostri una estructura de meitat i meitat, s’aplicaria un codi com el següent:

52

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

<div class="nectarina­col five­sixth one­second­m"><h5>Five sixth</h5></div> <div class="nectarina­col one­sixth one­second­m"><h5>One sixth</h5></div>

D’aquesta manera el contingut quedarà en dues columnes de la mateixa mida, serà més equilibrat i es podrà llegir o visualitzar millor.

De la mateixa manera, s’han creat unes classes de CSS per alinear el text de manera diferent segons la mida de la pantalla. Sobretot resulta pràctic quan es passa de mostrar el contingut de dues columnes a una (a la mida de mòbil), per tal de mostrar el text centrat.

Per tal de fer més eficient el procés de programació de la retícula, s’ha utilitzat un llenguatge de programació anomenat LESS , que permet fer diferents operacions matemàtiques amb CSS, podent després, amb un compilador de LESS , obtenir un arxiu CSS amb tots els resultats de les operacions. D’aquesta manera, és més ràpid calcular cadascun dels percentatges que s’ha d’aplicar segons la mida de cada columna.

2.5.4. Hooks El codi HTML de Nectarina està organitzat amb Actions dins de l’arxiu functions.php, Aquestes funcions després es criden a l’arxiu que requereixen aquesta part del HTML i el mostra. Hi ha dos avantatges principals d’utilitzar funcions per introduir el codi HTML a la plantilla:

El primer és que, d’aquesta manera, no cal duplicar codi HTML si es tenen dos arxius molt semblants, com podrien ser el index.php, el archive.php i el search.php. El fet de no haver de duplicar codi fa que l’arxiu pesi menys, cosa que provoca que la pàgina web trigui menys a executar­se.

El segon avantatge és que, guardar aquest codi en funcions de PHP, permet a qualsevol desenvolupador que vulgui modificar el codi de la plantilla, que pugui crear un Child Theme i modificar la funció des d’allà. D’aquesta manera, si la plantilla rep una actualització, les modificacions que hagi efectuat no es sobreescriuran.

53

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 17. En groc es mostra com s’aplica dins del index.php les funcions que guarden el codi HTML que s’utilitza a aquest arxiu.

Per altra banda, tots els textos de dins de l’estructura amb hooks utilitzen una funció de WordPress que fa que sigui molt senzill traduir­los. D’aquesta manera, si un programador necessita traduir els textos que apareixen dins de la plantilla, no caldrà que els modifqui manualment dins d’aquesta, sinó que podrà adjuntar un fitxer amb totes les traduccions o podrà utilitzar un plugin per fer­ho.

2.5.5. El header La capçalera de la pàgina web ha estat dissenyada per tal d’adaptar­se a les necessitats de qualsevol usuari. És per això que, a través del Customizer de WordPress, s’han desenvolupat unes opcions per a que l’usuari pugui personalitzar el disseny de la capçalera.

A més, el Customizer permet organitzar­les en seccions, cosa que fa més senzill organitzar totes les opcions desenvolupades per la plantilla. L’avantatge d’utilitzar aquesta

54

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

eina és que permet veure els canvis que es realitzaran a temps real i abans de guardar la configuració.

Les primeres opcions que permeten personalitzar el Header són: ✓ Poder escollir el títol de la pàgina web. ✓ Configurar una descripció de la pàgina web. ✓ Poder pujar un logotip. ✓ Poder inserir un favicon4 que identifiqui la pàgina web.

Per tal de fer que la personalització dels elements sigui més intuitiva, s’han desenvolupat unes funcions condicionals. Per una banda, si es penja un logotip, el Header mostrarà el logotip. Si, per l’altra, aquest logotip s’esborra, el Header mostrarà el títol i la descripció, configuració que apareix per defecte.

✳

Figura 18. Interfície del Customizer . Comparació del header entre escollir un logo o esborrar­lo.

A part de configurar com es mostra el títol de la pàgina web, també es pot personalitzar l’aparença general del header .

4

Un favicon és una petita icona quadrada que identifica la pàgina web. Es sol mostrar a les pestanyes del navegador, a les llistes de favorits, etc.

55

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Per una banda, permet habilitar el Sticky header, fet que provoca que la capçalera segueixi fixada encara que l’usuari faci scroll down (baixi avall, cap al contingut de la pàgina web). Així, pot veure en tot moment la capçalera i el menú de navegació.

Per una altra, també es pot escollir la posició del logotip dins de la capçalera d’entre tres possibilitats: a l’esquerra, al centre i a la dreta.

La majoria de pàgines web col·loquen el logotip a l’esquerra, però una bona part del món escriuen de dreta a esquerra, i solen posar el logotip a l’altra costat.

A més, en aquesta plantilla, es pot escollir posicionar centrat el logotip. Quan l’usuari escull aquesta opció, el menú de navegació que apareixia a la dreta, passa a col·locar­se a un marge, i a l’altre apareix un menú secundari que l’usuari podrà personalitzar.

✳

Figura 19. Capçalera amb el logotip a la dreta.

✳

Figura 20. Capçalera amb el logotip al centre.

Una de les altres configuracions que té el Header és la possibilitat de canviar el seu color de fons i l’opacitat d’aquest.

Per poder adaptar el color del text de dins de la capçalera al color de fons de la mateixa, s’ha creat una funció que detecta la luminància del color de fons, i aplica un color determinat a la font si supera un llindar establert. D’aquesta manera, es pot definir que, quan el color de fons de la capçalera sigui fosc, el color de la font sigui clara, i al revés.

56

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 21. Capçalera amb un color de fons fosc.

✳

Figura 22. Capçalera amb un color de fons fosc sense opacitat i amb una línia divisoria.

Per poder delimitar la zona de la capçalera, es pot habilitar una línia divisoria. Aquesta línia sol quedar molt bé quan la capçalera no té opacitat.

Tenint en compte que la pàgina web ha d’estar adaptada per tot tipus de dispositius, és important saber l’aparença que tindrà la capçalera dins de les pantalles més petites. És per això que, quan la pantalla és més petita de 769px d’amplada, la capçalera canvia.

Llavors, en comptes de mostrar el menú de navegació, es mostren una icona que permet ser clicada per accedir a una barra lateral, on l’usuari tindrà la possibilitat d’afegir­hi widgets , com un menú de navegació, o les xarxes socials.

✳

Figura 23. Com es mostra la capçalera i la barra lateral quan la pàgina web s’executa en dispositius amb poca amplada.

57

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

De la mateixa manera que la capçalera, el color de fons d’aquesta barra lateral es pot personalitzar, adaptant el color de les lletres segons el seu color de fons.

Un dels elements que també es pot personalitzar és el menú de navegació de la capçalera. A més de poder escollir quin menú es situarà a aquest espai de la pàgina web, l’usuari pot modificar si afegir un botó de cerca al final del menú, i si afegir un carret de compra, en cas que el plugin per convertir la web en una botiga online estigui activat (el Woocommerce). A part, també es pot definir quin color de fons aplicar quan apareixen els sub­elements del menú, adaptant sempre el color de la lletra al color de fons.

✳

Figura 24. Aparença de les opcions del Customizer i del color de fons dels sub­elements del menú, on es mostra també el carret i la icona de cerca.

2.5.6. El blog El blog és l’espai on es mostren els articles de la pàgina web i es divideix en dos grans pàgines: l’archive.php i el single.php.

L’arxiu del blog El fitxer archive.php és l’arxiu del blog i és on es mostren tots els articles publicats de manera cronològica, començant pels més nous, amb un extracte del seu contingut. Es mostren dins del que s’anomena un loop (un bucle) i estan organitzats per pàgines. A través de l’administrador de WordPress es pot escollir quants articles per pàgina es volen mostrar. A més de mostrar els articles més nous, dins de l’editor de l’article pots marcar una casella per a que l’article surti a dalt de tot, com a destacat, sigui quina sigui la seva

58

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

data de publicació. S’anomena Sticky post , i a la plantilla està marcat amb un cercle groc i l’icona d’una xinxeta.

L’arxiu del blog, a més, pot mostrar sidebars on hi apareix informació addicional del blog, com un llistat dels comentaris recents o un núvol d’etiquetes. Aquesta plantilla admet col·locar dos sidebars com a màxim dins del blog, una a la dreta i una altra a l’esquerra.

Per a que apareguin, han de contenir widgets . Si no en tenen cap, el sidebar desapareixerà. D’aquesta manera, l’estructura i disseny del blog canvia depenent el nombre de sidebars que es mostrin.

✳

Figura 25. Aparença de l’arxiu del blog segons els sidebars que utilitza.

Hi ha diferents plantilles per l’arxiu del blog segons el contingut que mostren. Per una banda, quan el visitant fa clic al enllaç de l’autor de qualsevol entrada, accedeix al arxiu d’autor , on es mostren tots els articles publicats pel mateix autor. Si, pel contrari, fa clic a qualsevol data, apareixeran els articles publicats durant aquella data. De la mateixa manera, si fa clic a una categoria, es mostrarà el arxiu de categories i si clica a qualsevol etiqueta, es mostraran tots els articles amb aquella etiqueta.

Per altra banda, si un visitant busca quelcom a través del cercador, accedirà a un arxiu amb tots els articles que contenen les paraules que ha cercat.

Per tal d’identificar cadascuna d’aquestes pàgines d’arxiu, s’ha afegit una capçalera dinàmica que mostra quin arxiu s’està visualitzant. En el cas de l’arxiu que mostra els resultats de la cerca, per exemple, es mostra un cercador per si el visitant vol buscar alguna altra paraula, i en el cas de l’arxiu per autor, es mostra una foto de l’autor, la seva

59

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

descripció i les seves xarxes socials. Aquesta informació d’autor es pot configurar dins de l’administrador de WordPress, on a més de poder escollir quines xarxes socials mostrar, es pot personalizar el color de les seves icones.

✳

Figura 26. Capçalera que utilitza l’arxiu d’articles basat amb l’autor.

A través del Customizer de WordPress es pot personalitzar l’aparença d’aquesta capçalera, podent escollir una imatge de fons, un color de fons i una opacitat.

Tot i que l’aparença d’un article dins de l’arxiu del blog depén del Post Format que s’hagi utilitzat, les entrades de blog normals tenen uns elements determinats.

✳

Figura 27. Anatomia d’una entrada de blog de l’arxiu.

60

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Mitjançant el Customizer, també podem escollir quina informació es mostra dins d’un article, podent desactivar la data de l’article, l’autor, el nombre de comentaris, les categories i el botó de “Llegir més”. A més a més, es pot escollir el text que tindrà el botó de “Llegir més” i es pot configurar el nombre de paraules que mostra l’extracte de l’entrada.

Quan una entrada té imatge destacada mostra la informació de l’entrada (el títol i les categories) centrada dins de la pròpia imatge. En canvi, quan no en té, el títol de l’entrada apareix alineat a l’esquerra.

L’article individual o single del blog El single del blog és el lloc on es mostra tot el contingut d’un article individual. Dins d’aquest, també apareixen els sidebars que s’hagin configurat per l’arxiu del blog.

D’aquesta manera, el single.php podrà tenir un sidebar a cada costat, un sidebar a la dreta, un sidebar a l’esquerra, o no tenir­ne cap. Però, a part de mostrar el contingut i els sidebars , l’article també mostra l’autor del mateix, alguns articles relacionats, els comentaris de l’entrada i un formulari per afegir més comentaris.

L’entrada individual també es mostra diferent segons si té imatge destacada o no. Quan l’article té imatge destacada, aquesta es mostra de manera semblant a com es mostra a l’arxiu, però aquest cop ho fa ocupant tota l’amplada de la pantalla. Per tal d’emfatitzar més el títol de l’entrada, quan escull una imatge destacada, l’usuari també pot escollir si aplicar un color de fons i una opacitat. En canvi, quan l’article no té imatge destacada, el títol i les categories apareixen dins d’una caixa amb la mateixa aparença de la capçalera dinàmica de l’arxiu del blog, que pot tenir una imatge amb opacitat o un color solid.

✳

Figura 28. Comparació entre l’entrada individual que té imatge destacada i la que no en té.

61

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

El blog en dispositius mòbils Gràcies a l’estructura de retícula creada especialment per la plantilla, és molt senzill personalitzar l’estructura del blog quan es visualitza en dispositius mòbils. Quan la pantalla és més petita de 769px d’amplada, el contingut de les entrades i els sidebars que té el blog passen a ser el 100% d’amples, fent que el lector pugui llegir amb més fluïdesa el contingut de l’article.

Per tal de millorar la rapidesa de càrrega de la web en dispositius mòbils, també s’han optimitzat les imatges destacades reduïnt­les de tamany sense que l’usuari pugui percebre la diferència entre la versió mòbil i la versió d’escriptori.

Els Post Formats dins del blog A part de l’entrada de blog normal, la plantilla accepta etiquetar els articles amb Post

Formats diferents segons el contingut d’aquest. En aquesta plantilla se n’utilitzen set: gallery, quote, image, audio, video, status i link .

El Gallery Post Format permet destacar una galeria. En aquest cas, s’ha optat per desenvolupar una funció que detecta quina és la primera galeria que es mostra dins de l’article, per després agafar totes les seves imatges i col·locar­les dins d’un slideshow (com si fos una presentació de diapositives). Finalment, per tal de no mostrar dues vegades les mateixes fotografies, la mateixa funció amaga la galeria utilitzada per al slideshow.

✳

Figura 29. Aparença d’un article de l’arxiu i un del single.php amb el format de galeria.

Un cop creat el slideshow , aquest es mostra dins de l’espai on aniria la imatge destacada per la visualització del bucle d’entrades. En canvi, dins de la pàgina que mostra l’article complet, s’utilitza la mateixa galeria a pantalla completa. A més a més, a través del

62

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Customizer es pot configurar si el slideshow s’inicialitza automàticament i les imatges van passant soles, o si és el visitant el que, per passar les imatges, ha de clicar a les fletxes dels laterals.

En el cas del Quote Post Format , el que es vol destacar és una cita. Per fer­ho, a través d’una funció semblant a l’anterior, es detecta quina és la primera cita etiquetada amb <blockquote>i es col·loca dins del contingut de l’extracte de l’entrada. De la mateixa manera, s’ha donat un estil diferent a aquest format, destacant encara més que el contingut es tracta d’una cita. Per altra banda, el títol de l’entrada s’ha estilitzat com si es tractés de l’autor de la cita, i s’ha amagat la resta del contingut que hi sol haver a una entrada normal. Tot i així, el single.php d’aquest Post Format manté exactament la mateixa estructura que la d’un article normal.

✳

Figura 30. Aparença dels articles del Quote Post Format dins del bucle de l’arxiu d’entrades.

Respecte el Image Post Format , el que es vol destacar és una imatge en concret. Com que els articles dins del bucle de l’arxiu ja destaquen una imatge, aquesta estructura dins de l’arxiu no ha patit canvis respecte a l’aparença d’una entrada normal. En canvi, s’ha optat per donar una estructura diferent al single.php d’aquest format d’entrada. En aquest cas, es mostra la imatge destacada a pantalla completa, permeten­la visualitzar molt més gran. A més a més, per tal d’indicar al visitant que el contingut de l’article segueix, s’ha col·locat una fletxa animada a la part inferior de la imatge.

63

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 31. Article que utilitza el Image Post Format .

El Audio Post Format permet destacar un arxiu d’audio concret. Per fer­ho, també utilitza una funció que detecta les etiquetes d’audio en HTML, agafa el codi de dins, i esborra les etiquetes de l’entrada. La funció, a més de reconèixer l’etiqueta de HTML5 <audio> , també detecta l’etiqueta <iframe>per

tal de poder inserir fitxers d’audio de pàgines web populars com SoundCloud .

Pel que fa a la pàgina individual de l’article, l’aparença segueix l’estructura que la d’un article normal, però abans de mostrar el contingut, mostra el primer audio de l’entrada.

64

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 32. Aparença d’una amb Audio Post Format , detectant la primera etiqueta <iframe> .

El cas del Video Post Format és molt semblant al de l’audio. Mitjançant una funció es detecta el primer video de l’article, s’esborra del contingut i es destaca enlloc de la imatge destacada. Un cop a l’entrada individual, el video es col·loca just abans de la resta del contingut.

El Status Post Format és el tipus d’entrada que té l’aparença més diferent de la resta. La característica principal d’aquest format d’entrada és que no té títol ni cap informació complementària com el dia que ha estat publicada o l’autor de la mateixa. Mostra exclusivament tot el contingut de tota l’entrada dins del propi bucle d’entrades. Si aquesta entrada té una imatge destacada amb un color i opacitat assignats, es mostrarà com a fons del propi contingut. Si no en té, simplement es mostrarà el text amb fons blanc.

65

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳ Figura 33. Exemple d’entrada que utilitza el Status Post Format amb, i sense imatge destacada.

Finalment, el Link Post Format s’utilitza per destacar un enllaç personalitzat. I per fer­ho, s’utilitza una altra funció que detecta el primer enllaç de l’entrada. Aparentment, es mostra igual que les entrades sense cap Post Format tan a l’arxiu com al single.php. Tot i així, en aquest format d’entrada, l’enllaç que porta el títol de l’entrada no redirigeix a l’article individual, sinó que accedeix al enllaç lloc web del primer enllaç que l’usuari hagi adjuntat a l’entrada.

2.5.7. El disseny de les pàgines Les pàgines de WordPress s’utilitzen per mostrar un contingut més estàtic que els articles del blog. A Nectarina, l’estil de les pàgines per defecte és semblant al del single del blog.

Quan té una imatge destacada, aquesta ocupa tota la pantalla. Quan no en té, l’aparença és la mateixa que la d’una entrada de blog sense imatge destacada. Tot i així, al contrari que els articles individuals, les pàgines per defecte no tenen cap sidebar . Tot el contingut es mostra al 100% de l’amplada.

WordPress dóna la possibilitat de crear diferents estils o plantilles de pàgina, podent­les escollir directament a l’editor de la pàgina, en funció del seu ús final. Per tant, per aquesta plantilla, a més de l’estil de pàgina per defecte, s’han creat tres estils més.

Un d’ells col·loca un sidebar a l’esquerra de la pàgina, i l’altre col·loca aquest sidebar a la dreta. A part, s’ha creat un tercer pensat per utilitzar­lo amb un Page Builder . És en blanc i

66

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

no té cap mena de marge als costats, cosa que fa que es pugui maquetar tota amb aquesta eina.

✳

Figura 34. Aparença del Page Builder dins de l’editor d’una pàgina.

El Page Builder que utilitza Nectarina és un plugin gratuït de l’empresa SiteOrigin . Aquest maquetador de pàgines es basa en la incorporar diferents widgets dins d’una pàgina, podent crear diferents seccions que tinguin diverses columnes amb widgets . Per poder optimitzar el Page Builder segons les necessitats de cada desenvolupadors, disposen d’una API per a que els propis desenvolupadors puguin crear noves funcionalitats i nous widgets . L’avantatge d’aquest plugin és que utilitza una retícula responsive, cosa que fa que l’usuari no s’hagi de preocupar per adaptar el seu contingut distribuit en seccions i columnes als dispositius mòbils. A més, permet crear, importar i exportar plantilles de pàgina predefinides per tal que l’usuari no hagi de començar de zero a crear una estructura de maquetació per la seva pàgina.

67

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

✳

Figura 35. Exemple de disseny d’una pàgina creada amb el Page Builder .

A part del Page Builder, l’editor de pàgines incorpora un metabox desenvolupat per poder afegir un extracte manual a la pròpia pàgina.

68

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

2.5.8. Botiga online Per tal de donar un valor afegit a la plantilla, s’han dissenyat totes les pàgines que incorpora el plugin Woocommerce , que converteix un WordPress amb una botiga online .

D’aquesta manera, si l’usuari vol vendre els seus productes online , podrà utilitzar la mateixa plantilla per fer­ho. El disseny d’aquestes pàgines segueixen la mateixa estructura que la resta de la pàgina web, fet que provoca que tant el blog, les pàgines i la botiga online estiguin integrades.

Les pàgines que incorpora Woocommerce són les següents:

✓ La botiga , que mostra totes els productes disponibles. ✓ La pàgina individual del producte , que mostra la descripció del producte, informació addicional i la possibilitat d’afegir­hi ressenyes. ✓ La pàgina del carret , que mostra tots els productes que s’han afegit al carret, així com el càlcul del preu total de la comanda. ✓ La pàgina de finalitzar compra , on apareix un formulari on s’han d’omplir les dades de facturació del client i com s’efectuarà el pagament.

✳ Figura 36. Disseny de la pàgina de Productes i de la pàgina individual d’un producte.

69

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

2.5.9. El footer Com la capçalera de la pàgina web, que es mostra al principi de cada pàgina, el footer o peu de pàgina es visualitza al final de cadascuna d’elles.

Dins del footer es poden mostrar fins a quatre columnes de widgets . Per personalitzar aquesta secció de la web, s’ha generat una funció per detectar si una àrea de widgets té un widget, i mostrar més o menys columnes en funció de les zones de widgets ocupades.

A part de la zona de widgets , el footer està format per una barra inferior on es sol mostrar informació sobre el propietari de la pàgina web, així com informació sobre els drets d’autor, les xarxes socials de l’empresa, o un menú de navegació extra.

✳ Figura 37. Disseny del peu de pàgina.

A través del Customizer, es pot configurar quin és el contingut que apareix a la part de l’esquerra del footer , i quines són les xarxes socials i el color de les seves icones que es mostren a l’altra costat. Pel que fa al contingut de la part esquerra, l’usuari pot escollir si mostrar un menú de navegació o un text personalitzat. A més, podrà escollir el color de fons i l’opacitat tant de l’àrea de widgets , com la barra inferior. De la mateixa manera com ho fa la capçalera, una funció detectarà el color de fons d’aquestes àrees per poder canviar el color de la font de sobre.

Com la resta de l’estructura web, quan el peu de pàgina es visualitza en dispositius mòbils, la seva aparença canvia per tal d’adaptar­se a l’amplada de la pantalla. D’aquesta manera el visitant de la pàgina web pot llegir correctament tota la informació que conté.

70

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

2.5.10. Validació del codi Per assegurar que tot el codi de la plantilla s’ha programat correctament i que és totalment vàlid, s’ha utilitzat un plugin que detecta qualsevol error de codi PHP. A més, dóna consells sobre quines funcions de WordPress és millor utilitzar pel que s’està intentant fer d’una manera errònia. Per altra banda, s’ha comprovat amb un validador de codi HTML i CSS que tot el programat amb aquests llenguatges també és correcte.

2.5.11. Rapidesa d’execució Per tal de comprovar la rapidesa de càrrega de la pàgina web, s’han anat efectuant diferents proves al llarg del desenvolupament de la plantilla. Per tal de millorar la velocitat de càrrega és important que l’usuari final utilitzi un tamany d’imatges adequada, de no més de 1.500px d’amplada. A partir d’aquestes proves també s’ha comprovat que els elements que fan enlentir més la pàgina web són aquells arxius de media que s’han inserit als articles.

Per tant, les últimes proves de velocitat efectuades a través de l’eina online més coneguda, ha donat un resultat molt positiu: Una pàgina web amb la plantilla de Nectarina és un 39% més ràpida que totes les altres pàgines web analitzades amb aquesta eina (Pingdom, 2015).

2.5.12. Optimització en diferents suports Nectarina ha estat dissenyada per adaptar­se a tots els dispositius, així com als diferents navegadors web. D’aquesta manera l’usuari es pot assegurar que la seva pàgina web pot ser visualitzada correctament al màxim de llocs possibles.

Per poder veure la plantilla en acció, visiteu la següent pàgina web: http://mildthemes.com/nectarina

71

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

VII. Conclusions

Desenvolupar una plantilla web des de zero no és una tasca senzilla. A més d’experiència, calen moltes hores de treball.

A través d’aquest projecte s’ha pogut dur a terme la primera versió d’un producte web que soluciona un problema a molta gent: poder tenir una pàgina web eficient, usable, a baix cost i fàcil de personalitzar.

Tot i així, una plantilla web amb les característiques que té Nectarina és un producte que ha d’estar en constant evolució. Les noves tecnologies no s’aturen, i dia rere dia sorgeixen nous avenços, nous llenguatges de programació i noves modes que els desenvolupadors i dissenyadors web han de saber veure i adaptar­s’hi el més ràpid possible.

Actualment, Nectarina és una plantilla web atractiva i podria ser utilitzada per dur a terme molts projectes web. Malgrat tot, abans de ser venuda, cal introduir noves funcions i possibilitats de personalització. D’aquesta manera, podrà arribar a un públic objectiu més ampli.

VII.I. Perspectives de desenvolupament futur Per a que una plantilla com Nectarina pugui ser venuda a Internet, a portals com Themeforest, ha d’incorporarar una sèrie de característiques que la facin més atractiva.

Una d’elles és incorporar la possibilitat de crear un portafoli. D’aquesta manera, dissenyadors i fotògrafs podran utilitzar la plantilla per mostrar els treballs.

Un altre aspecte a millorar és el Customizer. Calen afegir més opcions de personalització com per exemple poder escollir la tipografia, el color i el tamany de totes les fonts de la pàgina web. Una altra opció a afegir és poder donar la possibilitat d’escollir un header vertical.

72

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

A més a més, s’hauran d’introduir nous widgets per tal de poder utilitzar el Page Builder per incorporar tot tipus d’elements: botons, acordions, tabs, comptadors, divisors, formularis de subscripció, slideshows , etc.

Per altra banda, per tal que a l’usuari li sigui molt senzill crear pàgines amb el Page Builder , es generaran diverses plantilles predefinides per a que l’usuari només hagi de modificar el text per generar una maquetació usable i efectiva.

De la mateixa manera, s’hauran d’adaptar els plugins més utilitzats per utilitzar el mateix disseny que el de la plantilla. Un cop fet això, es dissenyaran diferents Child Themes per tal d’oferir un exemple de base en pàgines web de diferents sectors com poden ser: una botiga online, un restaurant, una pàgina web corporativa o un portafoli d’un professional, d’entre altres.

Un cop acabada la plantilla, i per tal de que la plantilla es pugui comercialitzar, s’haurà de generar una documentació per a l’usuari. A més, s’haurà de preparar un centre de suport per atendre a aquells compradors que tinguin problemes a l’hora d’utilitzar la plantilla. Per altra banda, es traduïrà la plantilla al castellà, per poder donar suport tant a la gent que entén l’anglès com la gent que entén el castellà.

Finalment i un cop fet això, la plantilla ja estarà preparada per ser posada en venda.

Llavors, es prepararà tota la documentació necessària per poder enviar­la a Themeforest .

El seu equip revisarà la plantilla i si la veu competent per la seva venda, entrarà al mercat per un preu que rondarà als 50 dòlars.

73

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

VIII. Llista de referències

Arntzen, T. C. et. al. (2001) PHP Preface. Recuperat des de http://php.net/manual/en/preface.php Berners­Lee, T. i Cailliau, R. (1990). World Wide Web: Proposal for a HiperText Project . Recuperat des de http://www.w3.org/Proposal.html Berners­Lee, T. i Cailliau, R. (Desembre de 1990). World Wide Web . Recuperat des de http://www.w3.org/History/19921103­hypertext/hypertext/WWW/TheProject.ht ml Berners­Lee, T. i Connolly, D. (1995). Hypertext Markup Language ­ 2.0. Recuperat des de http://tools.ietf.org/pdf/rfc1866.pdf Bootstrap (2015). Responsive design . Recuperat des de http://getbootstrap.com/2.3.2/scaffolding.html#responsive Borderie X. (2013). About Prestashop 1.5 . Recuperat des de http://doc.prestashop.com/display/PS15/About+PrestaShop+1.5 Buckler, C. (2013). 5 Ways to Support High­Desity retina Displays . Recuperat des de http://www.sitepoint.com/support­retina­displays/ Connolly, D. (2000). A Little History of the World Wide Web . Recuperat des de http://www.w3.org/History.html Envato Market Help (2015). WordPress Theme Submission Requeriments .

Recuperat des de https://help.market.envato.com/hc/en­us/articles/202822450­WordPress­The me­Submission­Requirements Envato Market Help (2014). Themeforest pricing information . Recuperat des de https://help.market.envato.com/hc/en­us/articles/203039014­ThemeForest­Pri cing­Information

74

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Gandy. D (2015). Font Awesome . Recuperat des de http://fortawesome.github.io/Font­Awesome/ Google (2015). Funcions de Blogger . Recuperat des de https://www.blogger.com/features Gosende, J. (2014). El libro blanco del emprendedor Web . Madrid: Ediciones Anaya Multimedia.

Griffin, T. (2014). TGM Plugin Activation. Recuperat des de http://tgmpluginactivation.com/ Haarek, et. al. (2015). The Drupal overview . Recuperat des de https://www.drupal.org/getting­started/before/overview Information Sciences Institute (1981). Internet Protocol. DARPA Internet Program Protocol Specification. Recuperat des de http://tools.ietf.org/pdf/rfc791.pdf Jacobs, I. i Walsh, N. (2004). Architecture of the World Wide Web. Volume One .

Recuperat des de http://www.w3.org/TR/webarch/ Joomla (2015). What is Joomla? Recuperat des de http://www.joomla.org/about­joomla.html Maciá, F. (2014). Màrqueting online 2.0 . Madrid: Ediciones Anaya Multimedia.

Magento (2015). Community Edition . User Guide. Recuperat des de http://www.magentocommerce.com/resources/user­guide­download Mediawiki (2015). About de project. Recuperat des de https://www.mediawiki.org/wiki/Project:About Moodle (2015). Features . Recuperat des de https://docs.moodle.org/28/en/Features Pardo Niebla, M. (2013). Creación y diseño web. Edición 2014. Madrid: Ediciones Anaya Multimedia, p. 10.

Pérez Ortega, A. (2014). Marca Personal . Recuperat des de http://www.marcapropia.net/que­es

75

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

phpBB (2014). Features of phpBB. Recuperat des de https://www.phpbb.com/about/features/ Pingdom (2015). Website speed test . Recuperat des de: http://tools.pingdom.com/fpt/ Priday, G. (2014). Page Builder 2 Changes Everything . Recuperat des de https://siteorigin.com/page­builder­2­changes­everything/ Rodríquez Ardura, I. (2003). Màrqueting.com i comerç electrònic en la societat de la informació . Barcelona: Editorial Pòrtic.

Ta’eed C. (2015). Envato Market ­ the Platform . Recuperat des de http://marketblog.envato.com/news/envato­market­platform/ ThemeFusion (2015). About us . Recuperat des de http://theme­fusion.com/ W3C (2015). HTML & CSS . Recuperat des de http://www.w3.org/standards/webdesign/htmlcss#whatcss Williams, B., Damstra, D. i Stern, Hal (2013). WordPress. Diseño y desarrollo.

Madrid: Ediciones Anaya Multimedia.

WordPress (2015a). Child Themes . Recuperat des de http://codex.wordpress.org/Child_Themes WordPress (2015b). Shortcode API . Recuperat des de http://codex.wordpress.org/Shortcode_API WordPress (2015c). Theme Customization API . Recuperat des de http://codex.wordpress.org/Theme_Customization_API WPBakery Inc. (2015). Visual Composer . Recuperat des de http://vc.wpbakery.com/ Wu, Susan (Febrer de 2012). Mobile Internet users will soon surpass PC Internet users globally. Recuperat des de http://forrester.com/ Zakas, N. C. (2012). Professional JavaScript for Web Developers . Wrox.

Zendesk (Octubre, 2013). Zendesk Overview [Video]. Recuperat des de https://youtu.be/WlDXW94E3Sc

76

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

IX. Annexos

77

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Annex 1. Mildthemes

Què és

?

Mildthemes és una agencia de disseny i desenvolupament web creada per Laura Agustí, que s’encarrega de crear i vendre plantilles web amb dissenys predefinits per WordPress, un dels gestors de continguts més utilitzats a l’hora d’administrar pàgines web.

Des de Mildthemes, volem oferir al client un producte molt fàcil de personalitzar, sense necessitat de tenir nocions de programació. A més, volem que els nostres productes ajudin al nostre client a confeccionar el seu projecte web eficaçment, proporcionant­li eines per obtenir una gran conversió i per a que aconsegueixi vendre aquell producte o servei que ofereix.

No volem que Mildthemes sigui únicament la marca dels nostres productes web. Volem que Mildthemes es converteixi en un portal online de coneixement per als nostres clients potencials, on puguem compartir la nostra experiència en el sector, i on poder esciure tutorials que puguin millorar els seus projectes web dissenyats amb les nostres plantilles.

L’avantatge de Mildthemes respecte a altres empreses de la competència és que volem que els nostres productes estiguin sempre en constant renovació, oferint al client poder gaudir de noves funcionalitats a mida que van creixent les seves necessitats com a emprenedor online , sense haver de comprar un nou producte web.

Sabem que el feedback que ens donin els nostres clients és molt important pels nostres productes i és per això que volem oferir­los disposar d’un producte sempre actualitzat sense cap cost afegit.

[Text extret del pla de negoci de Mildthemes]

78

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Annex 2. Imatge corporativa de Mildthemes:

Aquesta imatge corporativa es va dur a terme com a projecte final del Seminari de Disseny Gràfic de l’ERAM, conduït per Jordi Caralt.

79

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Annex 3. Diagrama de Gantt ampliat:

80

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Annex 4. Estructura d’una plantilla de WordPress:

81

Nectarina. Disseny i desenvolupament d’una plantilla web de WordPress TFG. Laura Agustí Barea. Grau en Audiovisuals i Multimèdia. Curs 2014­2015

Annex 5. Anatomia d’una entrada de blog individual:

82