Introduzione - Come iniziare

In questa lezione di introduzione non imparerete quasi nulla sul mondo dello skinning. Prima di iniziare a parlare di ciò che verrà trattato durante il corso, è necessario acquisire alcune informazioni, non di vitale importanza, ma che vi faranno capire ciò che state andando a fare.

Chi fa una skin, in sostanza, cosa fa?
Lo skinner è colui che crea una veste grafica ad un sito/forum. Per poter creare una skin, non è necessario esser in possesso delle informazioni tecniche necessarie alla realizzazione di un sito web, o di un forum, per esempio. Questi sono scritti con linguaggi come HTML, XHTML, PHP, FLASH e tanti altri ancora. Lo skinner sfrutta i fogli di stile, CSS, per cambiare colori, immagini, e più in generale la grafica ad un sito/forum/blog.

I linguaggi HTML ed XHTML posseggono due selettori che vengono sfruttati per il cambio della grafica; usarli solamente nel codice HTML(XHTML) non comporta alcuna modifica alla pagina in cui vengono usati. Questi selettori sono le classi e gli id, e sono realmente utili solo quando trovano una corrispondenza nel foglio di stile CSS. La differenza tra questi selettori, è che mentre il selettore della classe (class) può comparire più volte in una pagina, il selettore id può comparire una sola volta in una pagina, e perciò identifica in modo univoco un elemento, nella pagina presa in considerazione. Messi da parte i motivi che spingono i designer a scegliere un selettore piuttosto che l'altro, vediamo quello che realmente ci servirà: come modificare una classe e un id.

una classe, viene indicata con
.NOMECLASSE {attributi}
dove NOMECLASSE viene sostituito dal nome della classe, e tra le parentesi graffe sono presenti gli attributi della classe stessa

un id viene indicato con
#NOMEID {attributi}
dove NOMEID viene sostituito dal nome dell'id, e tra parentesi graffe sono presenti gli attributi dell'id

facciamo un esempio di classe e id che si chiamano entrambe pippo, e che hanno lo scopo di colorare il testo di un certo colore (prendiamo in considerazione il colore nero)

.pippo {color: #000000} ---> Classe pippo, che colora il testo di nero
#pippo{color: #000000} ---> Id pippo, che colora il testo di nero


Nell'attività di skinner, avrete praticamente sempre a che fare con classi e ID, e quindi, è bene sapere come si indica l'una, come si indica l'altra, cosa sono e a che servono. Avere una conoscenza non approfonditissima dell'utilizzo di queste non è findamentale, uno skinner non deve sapere dove e come utilizzarle, ma deve sapere dove sono situate, per poterle modificare in modo corretto.

In questo corso vedremo prevalentemente come costruire una skin per il circuito forumfree/forumcommunity/blogfree, e segue dolo potrete creare delle skin per questo circuito; tuttavia, imparate le basi, e anche tecniche più avanzate, potrete esser in grado di realizzare anche skin per altri circuiti. Ovviamente realizzare una skin per un altro circuito, o un sito, non sarà esattamente come crearne una per questo circuito, in quanto cambieranno il nome delle classi e degli id, ciò che ogni determinata classe o ogni id devono "fare" e quindi le loro proprietà pprincipali. Questo corso vi darà (spero in modo abbastanza chiaro) le basi per codificare una skin per il circuito in cui ci troviamo, ed una conoscenza del CSS tale da consentirvi di non trovarvi spaesati nella realizzazione per skin esterne al circuito.
Abbiamo detto che perchè una determinata porzione di codice (X)HTML venga modificata e formattata secondo gli attributi class ed id, il nome dato alla classe/id nel codice, deve trovare una corrispondenza nel foglio di stile CSS. Non ci occuperemo di "come" creare una corrispondenza tra codice (X)HTML e CSS, ma andiamo a vedere dove si trova il file da modificare, per modificare classi e id. Da questo momento in poi si farà riferimento solo al circuito forumfree/forumcommunity/blogfree.

Amministrazione > Grafica > Colori e stili
Andando in questa specifica voce del pannello amministrazione di ogni forum, vedete che compare un editor testuale, contenente un testo abbastanza lungo. Questo è il CSS della skin montata in questo momento sul forum; è modificando questo che potremo creare una skin tutta nostra.

ATTENZIONE: non tutti i CSS possono esser usati come base (e quindi modificati) per creare una propria skin. Alcuni skinner, dato che hanno speso del tempo per lavorare alla skin, pongono il divieto di usare il loro codice come base per creare una skin. Su questo circuito, ci sono due tipi di skin: predefinite, e create dagli utenti. Tutte le skin predefinite possono essere usate come base.
Potete trovare le skin predefinite in
Amministrazione > Grafica > Skin
Le skin predefinite si trovano nel blocco di selezione in basso, mentre nel blocco in alto sono presenti le skin create dagli utenti del circuito.

Ultima cosa, prima di andare finalmente avanti nel corso. Se avete intenzione di creare una skin scura, usate una base scura (come la skin predefinita Amnesiac), se avete intenzione di creare una skin chiara, usate una base chiara (come la iCG Station).

Detto ciò, possiamo andare avanti nel corso; questa prima parte introduttiva, noiosissima, finisce quì

Edited by ¬kiros - 26/2/2010, 11:33

bella introduzione^^

introduzione perfetta !