Sistema WordPress

Aquest espai web està construït amb el sistema de gestió de continguts WordPress en la versió 4.1. Podeu accedir a la documentació d’aquest sistema al següent enllaç. El disseny de la pàgina està basat en el ‘tema’ twentythirteen que ha estat modificat: el tema final aplicat s’anomena puig_ciutat.

Estructura

1. Pàgines. El lloc web està format per un esquelet de base format per pàgines a les quals es pot accedir directament des del menú principal. Algunes d’aquestes pàgines són estàtiques (per exemple la pàgina d’accés Projecte) i altres carreguen part del seu contingut de forma dinàmica (per exemple les pàgines Excavacions o Arqueologia en 3D). Els redactors no cal que afegeixin pàgines al sistema: poden modificar el contingut de les pàgines sense canviar l’estructura. En general, la tasca redaccional consistirà en afegir entrades a les pàgines existents.

Les pàgines que cal editar de forma directa per actualitzar el contingut són:

• Totes les pàgines de Recursos en línia: Bibliografia, Premsa i Vídeos.
• Les pàgines relacionades amb Arqueologia per a la comunitat.

2. Entrades. El principal mecanisme d’ampliació previst per a l’espai web és afegint entrades relacionades amb pàgines específiques (per exemple afegint nous sondejos o noves zones d’excavació a la pàgina d’Excavacions). La forma d’associar una entrada amb una pàgina determinada es descriu més avall.

Són entrades tots els elements que apareixen com a blocs d’informació dins les pàgines de l’apartat de Jaciment:

• Context
• Noves tecnologies
• Excavacions

També són entrades cadascuna de les fotogrametries presentades a l’espai Arqueologia en 3D.

Les Pàgines

Projecte

Aquesta és la pàgina d’entrada al lloc web de Puig Ciutat. És la que apareix quan entrem l’adreça web del lloc a la barra d’adreces del navegador i també la que apareix quan marquem la imatge de capçalera. Una particularitat d’aquesta pàgina és que la imatge amb els logos dels patrocinadors i col·laboradors està lligada a un mapa d’enllaços que porten a les pàgines web de les respectives empreses o entitats.

Jaciment

L’entrada de menú Jaciment redirigeix a la pàgina Context.

Context

Aquesta pàgina, igual que les altres dues de l’apartat de Jaciment, organitza el contingut presentant una capçalera amb una imatge i una descripció general de la pàgina. Aquests dos elements es defineixen des dels camps de text i de imatge destacada de la pàgina. La particularitat de la imatge és que va relacionada amb un mapa d’enllaços que porta als apartats definits per entrades que venen a continuació. Cadascun dels apartats d’aquesta pàgina és una entrada de la categoria ‘jaciment’. El fet de marcar aquesta categoria predefinida per a una entrada nova farà que aquesta aparegui llistada dins de la pàgina Context.

Aquest sistema dona flexibilitat per anar afegint nous apartats: una nova entrada de categoria ‘jaciment’ apareixerà automàticament en aquesta pàgina. Un inconvenient és que per tal que es pugui accedir al nou apartat des de la capçalera, cal modificar el mapa d’enllaços (que està programat a la pàgina). En aquest cas, també cal modificar la imatge.

Aquesta pàgina consta d’una capçalera amb un mapa que situa les excavacions i sondejos realitzats fins ara. El mapa va acompanyat d’una descripció general. Les excavacions estan documentades individualment o de forma agrupada més avall. La capçalera amb el mapa és un element fix. Les descripcions de les excavacions són entrades separades que s’agrupen en aquesta pàgina. Per tal d’afegir una nova excavació a la pàgina cal fer dos passos:

• 1. Preparar un quadre de diapositives per l’excavació
• 2. Redactar una nova entrada d’excavació i enllaçar-hi el quadre de diapositives
• 3. Afegir al mapa la nova zona d’excavació

1. Cal crear un quadre de diapositives ‘Slideshow‘ (1.1) específic per a cada entrada nova d’excavacions que contindrà totes les imatges que es vulguin presentar (1.2). Per a cada imatge es pot entrar un peu de foto. Per al quadre de diapositives es genera automàticament un codi que caldrà copiar al final del text de la nova entrada (1.3)(2.3).

2. Cadascuna de les entrades d’excavació consta d’un títol, una descripció escrita i se li associa un quadre de diapositives (2.3). Cal marcar l’entrada amb la categoria de ‘zona d’excavació‘ (2.2) per tal que quedi afegida automàticament a la pàgina. L’entrada queda ordenada cronològicament; si es vol alterar l’ordre en què apareixen les entrades es poden modificar les respectives dates de publicació fins a obtenir l’ordre desitjat.

3. Per a cada nova excavació afegida haurem d’actualitzar el mapa de la capçalera per ressenyar-la i enllaçar-la amb la nova entrada. És important utilitzar sempre la mateixa imatge (i enquadrament) de base per tal de poder afegir les noves zones al mapa sense que calgui modificar les que ja estaven definides. El mapa d’enllaços del mapa de capçalera està definit dins l’arxiu d’estils CSS general de la pàgina. Caldrà afegir-hi les noves zones de la manera següent:

• 3.1. Escriure una nova entrada a l’arxiu d’estil Style.css
• 3.2. Incloure la zona mapejada a l’arxiu excavacions.php

3.1. Com a exemple, la zona z5 del mapa de zones d’excavació es defineix de la manera següent dins la fulla principal d’estils style.css.

/*sondeig 5*/
.image-map a.z4 {
  bottom: 71%;
  left: 89%;
  width: 5%;
  height: 12%;
  /*background: #ffcccc;*/
}

Copiant aquesta entrada i canviant ‘z4’ per la següent zona del mapa (z5, que no coincideix necessàriament amb el número de zona d’excavació) fem el primer pas per afegir un enllaç al mapa.

La posició i mida de les zones d’enllaç es determina en valors percentuals sobre la mida total de la imatge. La línia background: determina el color d’aquesta àrea d’enllaç i normalment serà transparent (per això està desactivada). El color es pot activar quan s’està creant l’enllaç per visualitzar la taca a tall d’ajuda.

3.2. A l’arxiu excavacions.php cal afegir una entrada a la llista de zones del mapa i enllaçar-la amb el paràgraf que correspon a l’excavació. El codi de l’entrada (seguint amb l’exemple anterior per a l’enllaç z4 el codi ze_667) es pot trobar utilitzant inspecciona l’element al navegador. Si us situeu sobre el títol de l’entrada que vulgueu enllaçar podreu localitzar el codi que heu d’anotar a l’arxiu excavacions.php.

<!-- percentual image map -->
<div class="image-map">
  <a class="z1" href="#ze_56"></a>
  <a class="z2" href="#ze_59"></a>
  <a class="z3" href="#ze_63"></a>
  <a class="z4" href="#ze_667"></a>
  <a class="z5" href="#ze_644"></a>
</div>

Les imatges

Les imatges de tota la pàgina tenen un format de 1040×500 píxels. Les imatges d’aquesta documentació són exemples del format que emprem.

Visor 3D

El visor de núvols de punts utilitzat a la pàgina és una modificació del visor de codi obert Potree en la versió 1.0 i que es pot trobar en les seva versió més actual a potree.org.
Es tracta d’un visor incremental per al web, que renderitza núvols de punts de mides molt grans (milions de punts) i amb informació de color amb bones prestacions perquè fragmenta els núvols en parts i capes que representa en funció de les necessitats de la vista actual.