Cell. +39 3479684755
Il Blog di Instant Websites
Corsi di Web Design a Vigevano e Milano
Premessa: a cosa serve un corso di web design?
Le capacità legate al web design ed allo sviluppo del codice XHTML delle pagine web sono sempre più importanti in un contesto come quello attuale, in cui la presenza sulla Rete appare vitale in svariati campi.
Sapere realizzare siti web ben costruiti e compatibili con i diversi dispositivi esistenti costituisce perciò una voce rilevante del proprio curriculum vitae al fine dell’inserimento in imprese, oppure la base di una professione autonoma stimolante e di grande soddisfazione.
Lo studio freelance INSTANT WEBSITES di Della Bianca Paolo Ettore organizza corsi da alcuni anni, a Milano ed ora nella nuova sede di Vigevano (Pavia).
Che cosa si impara con il corso base di web design?
Pur definendosi “base”, dal momento che non richiede conoscenze pregresse in materia da parte di chi si iscrive, il nostro corso ha un programma decisamente ampio: si parte dall’analisi dei fattori preliminari nella realizzazione di un sito, si esaminano gli elementi grafici che compongono una pagina, si passa allo sviluppo della stessa utilizzando XHTML (HTML e CSS), infine si affronta la tematica del SEO (ottimizzazione per i motori di ricerca).
Quanto dura il corso?
Il corso comprende 32 ore di lezione di base, articolate in incontri di 3 o 4 ore, più 4 ore finali solitamente dedicate all’esame di un progetto svolto dal partecipante.
Il totale è dunque di 36 ore.
Che cosa comprende il programma del corso?
Le aree fondamentali del programma base sono le seguenti:
- Introduzione al Web Design
- La struttura di un sito web
- XHTML e CSS: Uso di Adobe Dreamweaver©
- Promozione e manutenzione del sito
E’ possibile scaricare il programma del corso in formato pdf.
Il programma dettagliato è disponibile a richiesta.
Migliorare l’aspetto dei collegamenti ipertestuali con CSS3
La formattazione dei collegamenti ipertestuali (hyperlinks) tramite CSS prevede, come noto, la definizione delle proprietà delle differenti pseudoclassi dinamiche.
Queste vengono normalmente distinte in due gruppi: il primo corrispondente al link “a riposo”, cioè non attivato ed il secondo corrispondente al link attivato con uno dei vari dispositivi di puntamento possibili, con la seguente sintassi nel foglio di stile:
a {
// qui le proprietà comuni a tutte le pseudoclassi dinamiche
…
}
a:link, a:visited {
// qui le proprietà dei link a riposo, già visitati o meno
…
}
a:hover, a:focus, a:active {
// qui le proprietà dei link attivati tramite un dispositivo di puntamento
…
}
(si rammenti che l’ordine in cui le pseudoclassi vengono definite è tassativo in base alle raccomandazioni del W3C).
Di solito i link visitati vengono formattati nello stesso modo di quelli non ancora visitati, tuttavia in casi particolari è possibile assegnare loro proprietà particolari: ad esempio, in un elenco con un numero molto elevato di collegamenti, si potrebbe volere agevolare il visitatore segnalando visivamente quali di questi sono già stati visitati.
Tramite i CSS è quindi possibile variare colore del testo, colore di sfondo, sottolineatura o meno ed altre proprietà, tenendo conto che le regole di fruibilità del sito sconsigliano l’evidenziazione dei links tramite il solo colore differente da quello del testo ordinario, soprattutto quando tali links si trovano nel corpo del testo e non isolati in un menu a parte.
I CSS3 hanno introdotto alcune proprietà che permettono di migliorare l’aspetto dei collegamenti ipertestuali con effetti semplici e gradevoli che, fino ad oggi, richiedevano l’utilizzo di Javascript.
Vediamone un paio che impiegano la proprietà transition.
Immagine di sfondo al 100% con CSS3 e con CSS2
Si pone talvolta l’esigenza di impostare una singola immagine di sfondo alla pagina del nostro sito, che presenti le seguenti caratteristiche:
1) deve ridimensionarsi in relazione alla viewport (dimensione, o meglio risoluzione dello schermo dell’utente),
2) non deve deformarsi in seguito a quanto sopra, vale a dire le proporzioni devono restare immutate.
Sembra facile ma, come sanno bene gli sviluppatori, non lo è anche se la nuova versione dei Cascading Style Sheet facilita di molto la vita.
Vediamo dunque come procedere:
CSS3
E’ stata introdotta la nuova proprietà background-size, impostandone il valore su contain o cover è possibile ottenere l’effetto desiderato.
Il codice CSS sarà dunque:
body {
margin: 0;
padding: 0;
background: url(immagini/index.jpg) no-repeat center center fixed;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
Usando contain, l’immagine non viene deformata ma può lasciare degli spazi bianchi sul lato lungo dello schermo; usando cover, invece, l’immagine riempie interamente lo schermo ma può deformarsi.
Il limite è rappresentato dal fatto che solo i browser più recenti supportano la proprietà in questione.
Pur adottando la sintassi differenziata vista sopra (pur specificando cioè mozilla o webkit quali “motori” del browser), resta il problema di Internet Explorer che supporta background-size solo dalla versione 9; come è noto, chi ha un PC che gira sotto Windows XP non può avere una versione superiore alla 8 quindi si tratta di un problema serio che richiede una soluzione alternativa.