Archive of Our Own ^beta

Introducció

Aquest tutorial et guiarà pas a pas en la creació d’una aparença d’obra a l’Archive of Our Own – AO3 (Un Arxiu Propi). Al final d’aquest tutorial hauràs creat la teva pròpia aparença d’obra, hauràs utilitzat fulls d’estil en cascada (CSS) per definir estils personalitzats i hauràs aplicat l’aparença d’obra a l’obra que hagis escollit.

Aquest tutorial pressuposa el següent:

• Tens coneixements previs sobre com publicar obres a l’AO3. Si encara no has publicat una obra a l’AO3, potser podries fer una ullada a les Preguntes freqüents sobre publicació i edició o seguir pas a pas el Tutorial: Publicar una obra.
• Tens coneixements bàsics de CSS. Si necessites un repàs de CSS, el Tutorial de CSS de W3Schools ofereix un curs bàsic gratuït (en anglès).
• Estàs accedint al web amb l’aparença per defecte (Archive 2.0). Si estàs fent servir una aparença personalitzada, tingues en compte que l’organització dels elements del web, en el teu cas, pot ser diferent de la descrita a les instruccions.

Si no tens clar què és una aparença d’obra o si preferiries fer-ne servir una de ja existent per a l’estil de la teva obra, visita les Preguntes freqüents sobre aparences i interfície de l’AO3.

Navegar fins al formulari Create New Skin (Crear una nova aparença)

Per començar, vés a la teva pàgina de Skins (Aparences):

1. Inicia sessió i vés al teu Tauler seleccionant la salutació "Hi, (nom d’usuari/a)!" i escollint "My Dashboard" (El meu tauler) al menú o seleccionant la teva imatge de perfil.
2. Selecciona "Skins" al menú que es troba al costat de la pàgina o al capdamunt en dispositius mòbils.

Això et porta a la teva pàgina de My Site Skins (Les meves aparences del web), que llista les teves aparences personalitzades del lloc web i ofereix botons per accedir a les teves aparences personalitzades d’obra i les aparences públiques. Per informar-te sobre la diferència entre les aparences de web i d’obra, consulta Què és una aparença?

Per a aquest tutorial, volem crear una nova aparença d’obra, així que selecciona "My Work Skins" (les meves aparences d’obra) i després "Create Work Skin" (Crear nova aparença d’obra) per navegar fins al formulari de Crear una nova aparença.

Configurar una nova aparença d’obra

Els únics camps obligatoris per a la creació d’una nova aparença que utilitzi CSS personalitzats són: Type (Tipus), Title (Títol) i els camps de CSS. La resta són opcionals, però en aquest tutorial els revisarem tots.

Pots tornar enrere i editar qualsevol d’aquests camps un cop finalitzada la configuració (consulta Editar la teva aparença d’obra per a més instruccions).

Tipus (obligatori)

Si has seleccionat el botó “Create Work Skin” (Crear Aparença d’obra) a la pàgina d’aparences, per defecte t’hauria de sortir "Work Skin" (Aparença d’obra).

Títol (obligatori)

Dóna un títol descriptiu a la teva aparença per tal que puguis distingir-la de qualsevol altra aparença d’obra que creïs en el futur. Els títols d’aparença han de ser únics, així que recomanem que incloguis el teu nom al títol (per exemple: «Aparença Homestuck (nom d’usuari/ària)»).

Descripció

Què farà la teva aparença? Hi haurà un tema específic? Pots consultar algunes descripcions d’aparença d’exemple a les pàgines d’Aparences de web públiques o d’Aparences d’obra públiques.

Penjar una previsualització

Aquí pots pujar una captura de pantalla dels teus estils CSS en acció a manera de previsualització. Pots tornar en un altre moment i fer-ho quan hagis començat a utilitzar la teva aparença d’obra.

Sol·licitar fer-la pública

Aquesta funcionalitat ha estat desactivada. Les aparences personalitzades ja no es poden fer públiques, actualment, de manera que seleccionar aquesta casella no afectarà la privacitat de la teva aparença.

CSS

L’últim camp al formulari de Crear una nova aparença és on has d’introduir els teus CSS personalitzats. A les següents seccions explicarem com introduir els CSS que formaran el nou estil nou de la teva obra.

Podràs veure un botó a la part superior on diu "Use Wizard" (Utilitzar auxiliar). Aquest porta fins al Site Skin Wizard (Auxiliar d’aparença de web), que malauradament només es pot fer servir per crear aparences de web i no d’obra (Què és l’auxiliar d’aparença?)

Però no t’amoïnis; amb aquest tutorial sabràs més que l’auxiliar en un tres i no res!

Fer servir CSS

Per raons de seguretat, l’AO3 només pot suportar un nombre limitat de les propietats dels CSS (fulls d’estil en cascada) i els seus valors. Qualsevol codi no suportat serà eliminat un cop desis els canvis.

Pots revisar la llista completa de propietats de CSS suportades seleccionant el signe d’interrogació blau ? al capdamunt del camp CSS. També pots consultar Quines propietats i valors de CSS puc fer servir en aparences personalitzades? per a més informació sobre fonts tipogràfiques, colors, URLs, etc.

Introduir els teus CSS

En aquesta secció introduiràs el CSS que determinarà quin estil es pot aplicar a la teva obra(es). Pots crear el teu propi CSS o seguir l’exemple de sota.

Diguem que tens una obra amb el següent HTML:

  
<p>Estimat Billy,</p>
<p>T’he escrit aquesta carta. Espero que estiguis <em>molt</em> impressionat.</p>
<p>Una abraçada,</p>
<p>Adelaide</p>

Sense cap aparença d’obra aplicada, aquest text mostraria l’estil per defecte de l’AO3.

Si volem que l’aparença d’aquest text simuli una carta manuscrita com a la imatge de sota, haurem de crear estils personalitzats fent servir CSS.

Primer, posem la vora negra estreta al text, canviem la font i augmentem la seva mida. Per fer això, afegeix el següent al camp del CSS de la teva aparença d’obra:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}

Després, afegim un estil especial al CSS per a la signatura («Adelaide»). Introdueix el següent CSS per augmentar encara més la mida de font i posar la firma de color vermell:

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

Finalment, per subratllar el text destacat («molt»), afegeix el CSS final:

  
#workskin em {
border-bottom: 3px double;
}

Ara el teu camp de CSS hauria de contenir CSS per a tres estils diferents:

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

La Referència de CSS de W3Schools (en anglès) proporciona una llista pràctica de propietats addicionals de CSS que pots afegir a la teva obra.

També recomanem fer una ullada a les Aparences d’obra públiques per veure exemples d’estils.

Nota: Imbricar els teus selectors de CSS (per exemple els elements .letter, .signature i em) sota l’id #workskin és necessari perquè els teus estils s’apliquin només al contingut de l’obra que tu escullis: tot el que hi ha per sota de la fitxa de l’obra i per sobre del botó "Top" (Inici) a la pàgina de l’obra. Tanmateix, si t’oblides d’imbricar el teu CSS sota l’id #workskin, ho afegirem nosaltres automàticament un cop hagis desat el codi.

Desar la teva nova aparença d’obra

Un cop hagis revisat el teu CSS i el teu codi sigui satisfactori, selecciona el botó "Submit" (Enviar) per desar la teva nova aparença d’obra. L’estil no s’aplicarà a cap obra fins que no hagis afegit manualment l’aparença a cada obra (d’això en parlarem a Aplicar la teva aparença d’obra).

Un cop hagis clicat “Submit”, eliminarem qualsevol codi no suportat i ens assegurarem que tots els selectors són imbricats sota un #workskin id.

Editar la teva aparença de l’obra

Immediatament després d’acabar la teva nova aparença d’obra, pots revisar el codi i escollir el botó "Edit" (Editar) per fer qualsevol canvi.

Aplicar la teva aparença d’obra

Has creat l’aparença d’obra; ara ja pots aplicar aquesta aparença a qualsevol obra que tinguis a l’AO3. Algunes coses a tenir presents:

• Una obra només pot fer servir una aparença.
• Una aparença es pot aplicar a múltiples obres.
• Si esborres l’aparença, qualsevol obra que faci servir aquella aparença perdrà l’estil.
• Si has cocreat una obra, la persona o persones amb qui l’has cocreat també poden aplicar la teva aparença d’obra a la vostra obra compartida.

Quan sàpigues a quina obra vols aplicar el nou format, vés a la pàgina Edit Work (Editar obra) de l’obra. Consulta Com puc editar una obra? si necessites instruccions.

A la secció Associations (Associacions) de la pàgina Edit Work, selecciona el títol de la teva aparença d’obra dins la llista "Select Work Skin" (Selecciona l’aparença d’obra).

Si els selectors dins la teva aparença d’obra es corresponen amb elements ja presents a l’HTML de l’obra (com ara totes les etiquetes <p> o <em>), pots ometre la següent secció i anar directament a Desar i previsualitzar la teva obra. Per exemple, si volies posar un doble subratllat a tot el text en cursiva de la teva obra, aplicar una aparença d’obra amb el següent CSS afegiria un subratllat doble a tot el text etiquetat amb les etiquetes <em>:

  
#workskin em {
border-bottom: 3px double;
}

Fer servir els selectors de CSS a l’HTML de la teva obra

Si els selectors dels teus CSS encara no es corresponen amb l’HTML de la teva obra, ara és el moment d’afegir les teves etiquetes <div> i <span>, classes i ids dins l’etiquetatge de la teva obra. Pots editar l’etiquetatge de la teva obra navegant fins a la secció Work Text (Text de l’obra) de la pàgina Edit Work (Editar obra). Assegura’t que el botó «HTML» està seleccionat.

Si has introduït els teus propis CSS a Introduir els teus CSS, afegeix ara els selectors corresponents al teu CSS a l’etiquetatge de la teva obra. Si no, seguirem des d’on ha acabat el nostre exemple anterior.

En aquest exemple, tens una obra que conté l’etiquetatge següent:

  
<p>Estimat Billy,</p>
<p>T’he escrit aquesta carta. Espero que estiguis <em>molt</em> impressionat.</p>
<p>Una abraçada,</p>
<p>Adelaide</p>

Per aplicar els tres estils de l’aparença d’obra d’exemple hauràs d’inserir els elements i atributs d’HTML que es corresponen amb els selectors del teu CSS:

1. Per aplicar l’estil de carta, envolta el bloc sencer de text amb una etiqueta <div> amb la classe .letter de referència a la teva aparença d’obra.
2. Per aplicar l’estil de firma, afegeix la classe .signature de la teva aparença d’obra al final del paràgraf.
3. Per aplicar l’estil de subratllat no fa falta cap codi addicional perquè el selector em que has fet servir al CSS de la teva aparença d’obra ja correspon a l’etiqueta <em> a l’etiquetatge anterior.

El teu nou etiquetatge hauria de ser com el següent:

  
<div class="letter">
<p>Estimat Billy,</p>
<p>T’he escrit aquesta carta. Espero que estiguis <em>molt</em> impressionat.</p>
<p>Una abraçada,</p>
<p class="signature">Adelaide</p>
</div>

Desar i previsualitzar la teva obra

Pots previsualitzar la teva obra amb l’estil nou escollint el botó "Preview" (Previsualitzar) o directament desar els canvis seleccionant "Post Without Preview" (Publicar sense previsualitzar).

Felicitats, ara la teva obra està fantàstica!

Si has anat seguint l’exemple de com Introduir els teus CSS i Fer servir els selectors dels CSS a l’HTML de la teva obra, ara el text de la teva obra hauria de semblar una carta manuscrita.

Si vols aplicar la teva aparença d’obra a diverses obres simultàniament, consulta Com puc editar múltiples obres al mateix temps? Tingues en compte que sempre has d’inserir els selectors dels CSS de la teva aparença a l’HTML de cada obra individualment, si no ho has fet ja.

Per a més informació sobre com publicar i editar obres, consulta les Preguntes freqüents sobre com publicar i editar. També pots fer una ullada al Tutorial: publicar una obra per veure una guia pas a pas.

On puc trobar més informació si alguna pregunta no està resposta aquí?

Per a més informació sobre les aparences de l’Archive of Our Own – AO3 (Un Arxiu Propi), incloent-hi aparences del web i aparences públiques, consulta les preguntes freqüents sobre aparences i interfície de l’AO3. Altres preguntes freqüents sobre l’AO3 estan respostes a la pàgina general de FAQ (Preguntes freqüents) de l'AO3. Les preguntes i respostes sobre els nostres Termes i condicions de servei es troben a les Preguntes freqüents sobre els Termes i condicions de servei. També pots consultar la pàgina de Problemes coneguts. Si necessites ajuda pots contactar amb Suport.