Wikipedia: Piele

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare
User-info.svg
User-info.svg

Cum să vă înregistrați ( Autentificare · Aut. Cu doi factori )

O piele , în IT și terminologia Wikipedia, este aspectul grafic și aspect cu care pot să apară pe site - ul Wikipedia.

Descriere

În timpul dezvoltării software-ului MediaWiki , la baza Wikipedia, au fost scrise mai multe skin-uri și în prezent sunt disponibile șase:

  • Vector (implicit), creat în 2009 și implicit din 2010 (MediaWiki 1.17)
  • Monobook, creat în 2003, implicit până în 2010
  • Modern
  • Minerva Neue
  • Atemporal

Un utilizator neînregistrat îl poate folosi doar pe cel implicit, Vector, în timp ce un utilizator înregistrat îl poate modifica în Preferințe / Aspect .

Un skin constă din scripturi PHP și CSS , JavaScript și imagini care vin împreună cu pagina web. [1] Încărcarea acestor resurse de către browser nu se întâmplă direct prin URL-uri statice ci printr-un serviciu numit ResourceLoader, un script PHP care le oferă într-un mod optimizat (concatenare, minificare, ...). [2]

Personalizare CSS

În plus față de CSS -urile skin-urilor, care fac parte din MediaWiki în sine, software-ul Wikipedia vă permite să creați altele noi, la nivel global (pentru toți utilizatorii, chiar neînregistrați), care pot fi modificate doar de către administratori sau pentru fiecare înregistrat utilizator, care poate fi modificat chiar de utilizator: [3]

Aceste CSS personalizate sunt, de asemenea, încărcate de browser datorită ResourceLoader. [2]

În funcție de modificările pe care doriți să le faceți, este nevoie de cunoștințe mai mult sau mai puțin aprofundate despre CSS. Această pagină oferă o primă introducere, pentru informații suplimentare este recomandabil să vizitați site-ul W3C , care pe lângă standardele oficiale oferă și o colecție de linkuri către site-uri cu tutoriale la diferite niveluri.

HTML și CSS

O pagină web modernă constă de obicei din cel puțin următoarele două componente:

  • Pagina în format HTML cu conținutul textual și structura (titluri, paragrafe, liste, tabele etc.). În cazul Wikipedia, software - ul transformă sursa wiki în pagini HTML.
  • Foaia de stil în format CSS care definește practic toate aspectele vizuale ale paginii (fonturi, culori, dimensiuni, margini, margini, fundaluri etc.).

Fiecare element al unei pagini HTML este marcat cu așa-numitele „etichete” . De exemplu, un paragraf de text începe cu eticheta <p> și se termină cu </p> . Liniile se găsesc în mod implicit în foaia de stil „monobook”

 p {
   marja: 0,4em 0em 0,5em 0em;
   înălțimea liniei: 1,5em;
}

unde „p” (aici fără paranteze unghiulare) indică faptul că următoarele proprietăți se referă la toate paragrafele paginii relative. Toate proprietățile acestui element sunt închise între paranteze {}. Valoarea (de exemplu "1.5em") este separată de proprietate (de exemplu "linia-înălțime", adică distanța dintre linii) printr-o perioadă dublă și este urmată de un punct și virgulă.

Pentru a diferenția aspectul elementelor de același tip, se pot utiliza clase și id-uri pentru a atribui diferite „nume” elementelor. În cazul Wikipedia, aceste nume sunt atribuite automat de software . Să luăm un exemplu din stilul implicit „monobook”:

 table.diff {fundal: alb; }

Cu aceasta obținem că toate tabelele (elementul "tabel") cu clasa "diff" (separate de numele elementului cu un punct) au un fundal alb. (În pagina HTML, aceste tabele încep cu eticheta <table class="diff"> .) Aspectul celorlalte tabele (fără clasa "diff") nu este afectat de aceasta. Diferența dintre clasă și id ne interesează doar prin faptul că sintaxa se schimbă minim: numele unui id este separat de numele elementului printr-un hash # în loc de un punct.

Dacă doriți să atribuiți proprietăți tuturor elementelor cu o anumită clasă sau id , lăsați numele elementului departe. Un exemplu din „monobook”:

 .error {
   culoarea rosie;
   font-size: mai mare;
}

Orice element cu clasa „eroare”, fie că este un paragraf, un titlu sau altul, apare în font roșu și puțin mai mare decât în ​​mod normal.

În cele din urmă, ne putem referi doar la elementele care se găsesc în anumite alte elemente:

 #toc p {margin: 0}

În acest exemplu, marginile paragrafelor sunt șterse, dar numai cele care se află în interiorul unui element cu ID - ul „toc”. Acest lucru nu trebuie confundat cu

 p # toc {margin: 0}

care se referă la paragrafe care au ele însele id - ul „toc”.

Spațiile de nume

Simplificând puțin, putem spune că elementul „corp” este pagina însăși. Acest lucru ne permite să înțelegem cum să personalizăm aspectul diferitelor spații de nume : software-ul Wikipedia atribuie automat o clasă care depinde de spațiul de nume elementului „corp”. Numele este format din „ns-”, urmat de numărul spațiului de nume. Iată lista completă:

  • .ns-0 : Principal
  • .ns-1 : Discuție
  • .ns-2 : Utilizator
  • .ns-3 : Discuții cu utilizatorii
  • .ns-4 : Wikipedia
  • .ns-5 : Discuții pe Wikipedia
  • .ns-6 : Imagine
  • .ns-7 : Fire de imagine
  • .ns-8 : MediaWiki
  • .ns-9 : Discuții MediaWiki
  • .ns-10 : Șablon
  • .ns-11 : Discuții șablon
  • .ns-12 : Ajutor
  • .ns-13 : Ajutor discuții
  • .ns-14 : Categorie
  • .ns-15 : Discuții pe categorii
  • .ns-102 : Proiect
  • .ns-103 : Discuții despre proiect

Dacă am dori să setăm fonturi mai mari numai pentru paginile din spațiul de nume principal, am putea pune

 body.ns-0 {font-size: medium; }

sau mai simplu

 .ns-0 {font-size: medium; }

Amintindu-ne de cele spuse în introducere, putem schimba și aspectul paragrafelor din spațiul de nume principal, lăsându-l neschimbat în celelalte:

 .ns-0 p {margin: 0; text-indent: 2em; }

Dacă, pe de altă parte, am dori să aplicăm acest stil tuturor spațiilor de nume , ar fi suficient să lăsăm clasa „ns-0” departe:

 p {margin: 0; text-indent: 2em; }

Părți ale paginii (skin Monobook)

Pentru a actualiza
Acest articol sau secțiune ar trebui să fie revizuite și actualizate cât mai curând posibil.
Comentariu : Adăugați o secțiune și pentru skinul Vector, care a devenit implicit
Într-adevăr, se pare că această intrare conține informații învechite și / sau învechite. Dacă aveți posibilitatea, să contribuie la actualiza.

Următoarea listă prezintă principalele clase și id-uri ale structurii paginii Wikipedia cu aspectul Monobook:

  • #globalWrapper : element ("div") care cuprinde întreaga pagină
    • #column-content și #content : elemente ("div") care conțin conținutul paginii (fără elementele de navigare)
      • .firstHeading : antetul paginii
      • #bodyContent : conținutul fără antetul paginii
        • #toc : conține indexul
        • .editsection : conține linkuri pentru editarea secțiunilor individuale
        • #catlinks : conține linkurile către categoriile inserate în pagină
    • #column-one : conține toate elementele de navigare
      • #p-cactions : conține linkuri către „acțiuni” („pagină”, „discuție”, „editare” etc.)
      • #p-personal : conține linkuri către instrumente personale (discuții despre pagină și utilizator, preferințe etc.)
      • #p-logo : conține logo-ul
      • #p-nav : conține navigare („Pagina principală”, „Portal comunitar” etc.)
      • #p-search : conține blocul „căutare”
      • #p-tb : conține instrumente („Indicați aici”, „Modificări corelate” etc.)
      • #p-lang : conține „interwiki”
    • #footer : conține bara din partea de jos a paginilor

Deci, dacă îl puneți

 #globalWrapper {font-size: 150%}

dimensiunea fontului pentru întreaga pagină este mărită cu 50%. In schimb

 # column-content {font-size: 150%}

mărește dimensiunea fontului conținutului, lăsând neschimbate linkurile de navigare.

Încercând ultimul exemplu, una dintre diferitele dificultăți întâmpinate la modificarea foilor de stil poate fi văzută: dimensiunea unor părți ale paginii poate depinde de dimensiunea caracterelor, astfel încât modificarea dimensiunii caracterelor se poate întâmpla să deranjeze aspectul întregului.pagină. O altă dificultate constă în înțelegerea priorității definițiilor. De exemplu,

 corp {culoare: verde}

nu face ca textul paginii să apară în verde, deoarece există o altă definiție în MediaWiki: Monobook.css care are prioritate. O soluție (din mai multe posibile) pentru a schimba culoarea textului și a titlurilor este

 p, h1, h2, h3, h4, h5, h6 {culoare: verde; }

Personalizare JavaScript

Diferitele skin-uri pot fi personalizate și extinse în funcționalitate chiar și cu scripturi JavaScript , de asemenea la nivel global (pentru toți utilizatorii, chiar neînregistrați), editabile numai de către administratori sau pentru fiecare utilizator înregistrat, editabile de către utilizator însuși: [4]

Tunel

Notă

  1. ^(EN)mw: Manual: Skinning
  2. ^ A b(EN) mw: ResourceLoader
  3. ^(EN) mw: Manual: interfață / foi de stil
  4. ^(EN) mw: Manual: Interfață / JavaScript

Documentație

Pe MediaWiki.org

Pe Meta-Wiki

Pagini conexe

Adus de la „ https://it.wikipedia.org/w/index.php?title=Wikipedia:Skin&oldid=117517577 ”