Sapevi che il fantastico, bellissimo contenuto che scriviamo è letto da oltre 100 milioni di persone in tutto il mondo ogni mese? E lo sapevi che oltre il 50% di queste persone stanno leggendo i tuoi contenuti su un tablet o un telefono mobile?[1]
Le migliori pratiche di FANDOM ti aiuteranno a costruire e formattare i tuoi contenuti per renderli al meglio su qualsiasi dispositivo, con il nostro sito ricco e dinamico, il nostro sito mobile o le nostre applicazioni specializzate per mobile.
Quali sono le pratiche migliori?
FANDOM ha lavorato con diversi amministratori esperti e membri della community per stabilire una serie di cose da fare e da non fare per i contenuti di FANDOM e template. I nostri obiettivi sono quelli di sostenere e promuovere la creatività che esiste sulla piattaforma FANDOM oggi, incoraggiando moderne pratiche e gli standard web. Le pratiche migliori sono facili da aggiungere ai Template e i contenuti. La maggior parte dei contenuti esistenti continueranno ad apparire e funzionare esattamente come oggi sul desktop, ma ancora meglio su telefoni cellulari e tablet, tra cui la nostra App della Community. Inoltre, queste buone pratiche sono in grado di migliorare il posizionamento SEO per le vostre community e diminuire i tempi di caricamento della pagina.
C'è già una buona quantità di condivisione e similitudini tra le community, ma in seguito le nostre pratiche migliori aiuteranno FANDOM a identificare diversi tipi di contenuto (InfoBoxes, navboxes, template di citazione, ecc) e visualizzarli correttamente per fornire la lettura di classe mondiale e l'esperienza di modifica.
Pratiche migliori
Infobox
Gli Infobox sono uno degli elementi più comuni sulla pagine di articoli FANDOM in tutte le nostre community. Per avere infobox funzionanti su dispositivi mobili, usa il codice
class="infobox" nella tabella di primo livello della struttura dell'infobox.
- Esempio
Vedi Template:Actor Infobox su Arrested Development wiki per la piena realizzazione.
{| class="infobox"
|-
[...]
- Anteprima
Citazioni
Molte community includono citazioni tra i loro articoli. Le citazioni sono parti del contenuto che i lettori amano leggere e condividere. Ci sono due opzioni per la creazione di un template di citazione:
- Costruisci il template all'interno di un tag div, non in tabelle e usa
class="quote"o conclass="blockquote"nel div appropriato.
- Usa il tag
<blockquote>...</blockquote>per costruire il template.
- Esempio
Visita Template:Quote sulla Hunger Games wiki per la costruzione completa.
<div class="quote">{{{contenuto}}}</div>
oppure
<blockquote>''{{{contenuto}}}'' — <cite>{{{autore}}}</cite></blockquote>
- Anteprima
Tabelle
Le tabelle sono più complicate che le altre nostre pratiche consigliate, ma un uso improprio delle tabelle può avere incredibili conseguenze avverse sulla resa degli articoli sui vari dispositivi — desktop, tablet, o mobile.
La prima pratica consigliata per le tabelle è di evitare di costruire e formattare pagine interamente in tabelle. Esse, infatti, dovrebbero essere usate solamente per organizzare e mostrare dati, come la ripartizione statistica di un'arma in un videogame o la lista di attori in un episodio. Per ottenere specifici design per i tuoi articoli, usa i moderni HTML e CSS, come viene insegnato su W3Schools.com.
La seconda pratica consigliata per le tabelle è quella di evitare di inserire le tabelle una dentro l'altra. Invece, unire le celle ogniqualvolta sia possibile, o comunque, rispettare le convenzioni dic W3Schools.
La terza pratica consigliata per le tabellle è quella di essere ragionevoli sul numero di colonne e righe usate, per essere sicuri che siano facili da leggere sia da desktop che da dispositivi mobili. Suddividi i grandi ammontare di dati in tabelle più piccole e più facili da "digerire".
Presto in arrivo...
Quelle che seguono sono le pratiche migliori che già puoi rispettare, con il supporto mobile in arrivo nel 2015:
Avvisi
Gli avvisi sono gli elementi che appaiono in testa agli articoli, notificando ai lettori e ai contributori riguardo informazioni legate all'articolo.
Per avere una corretta visualizzazione degli avvisi sui dispositivi mobili, usa class="notice" nell'elemento di livello più alto (primo div o tabella) della struttura dell'avviso. Per identificare quale specifica categoria di avviso si tratta, includi la categoria dell'avviso nel class (esempio: class="notice spoiler")
C'è una grande varietà di tipi di avvisi, ma i 5 principali tipi di categorie di avvisi che FANDOM riconosce sono spoiler, disambig, stub, maintenance e informational.
- Esempio
Guarda Template:Gallery sulla Tron wiki per la costruzione completa.
<div class="notice">
'''[[{{BASEPAGENAME}}|Gallery: {{BASEPAGENAME}}]]'''<br />Questa pagina contiene immagini sulla Tron Wiki relative a [[{{BASEPAGENAME}}]]. [...]
</div>
- Anteprima
Il supporto mobile arriverà presto!
I box di navigazione (Navbox) sono utilizzati su molte Wiki della community per aiutare i lettori a navigare nelle relative pagine. La maggior parte sono inserite a fondo pagina.
Per avere una visualizzazione ottimale sui dispositivi mobili, usa class="navbox" nell'elemento principale della struttura del navbox. Raccomandiamo l'uso del tag nav, come si vede nell'esempio sotto.
- Esempio
Guarda Template:Ep Nav S1 sulla Scrubs wiki per la costruzione completa.
<nav class="navbox"> <div class="navbox-title">Season One Episodes</div> # "[[My First Day]]" # "[[My Mentor]]" # "[[My Best Friend's Mistake]]" # [...] </nav>
- Anteprima
Il supporto mobile arriverà presto!
Preview
Elementi espandibili
Per salvare spazio, molte community utilizzano gli elementi espandibili per nascondere i dettagli sia di navigazione che degli articoli dietro ad un pulsante "mostra". Molti di questi sono navbox, come in questi esempi:
Per avere un rendering appropriato di queste funzionalità nel mobile e nell'esperienza di modifica, usa class="mw-collapsible" nella loro costruzione. Sarà comunque riconosciuto anche usando class="collapsible". Queste classi possono essere combinate con altre.
- Esempio
Guarda Template:Navbox nella Lostpedia wiki per la costruzione completa.
<div class="navbox mw-collapsible"> [...] </div>
- Anteprima
Il supporto mobile arriverà presto!
Elementi scorrevoli
Simili agli elementi espandibili, molte community utilizzano gli elementi scorrevoli (solitamente attraverso il template Scrollbox) per avere una lunga lista di informazioni confinata in un box di dimensioni ridotte.
Per ottenere un rendering ottimale degli elementi scorrevoli sui dispositivi mobili, usa class="scrollable" nella costruzione del template o dell'elemento. Questa classe può essere combinata ad altre.
- Esempio
Guarda Template:Scroll box sulla Powerlisting wikia per la costruzione completa.
<div class="scrollable"> [...] </div>
- Anteprima
Il supporto mobile arriverà presto!
Preview
Domande?
Se hai qualche domanda riguardo queste pratiche consigliate, o se hai bisogno di aiuto per adattare i tuoi contenuti per seguire queste pratiche migliori, per favore contattaci sul forum della Community Centrale o attraverso Speciale:Contatta.
Ricorda — puoi sempre utilizzare l'anteprima mobile all'interno dell'editor sorgente per controllare velocemente come vengono resi i tuoi contenuti sugli smartphone.
