Cell. +39 3479684755
Il Blog di Instant Websites
Introduzione al design reattivo
Il World Wide Web è un mondo in continua e rapida evoluzione tecnologica e, in tale contesto, l’innovazione che ha portato con sé le conseguenze più rilevanti per i designer e gli sviluppatori è stata la diffusione dei dispositivi portatili quali smartphone e tablet.
Le previsioni dicono che in tempi brevi gli accessi ai siti Internet tramite i suddetti dispositivi supereranno quelli effettuati sui PC da tavolo e notebook; al di là della precisione di tali previsioni, si impone dunque di considerare le circostanze nel progettare e sviluppare i siti.
La soluzione tecnica adottata per adattare in qualche modo la pagina del sito alla risoluzione dello schermo, fino all’introduzione di HTML5/CSS3, era quella di ricorrere ad un layout liquido in cui, cioè, le dimensioni degli elementi contenitori della pagina fossero espresse non in termini “fissi” (px) bensì in termini relativi: % o ems, dunque.
Questa soluzione comportava però delle difficoltà e degli svantaggi, riassumibili per brevità come segue:
1) un eccessivo allargamento (o restringimento) della risoluzione disponibile a video – anche solo a seguito del ridimensionamento della finestra del browser – determinava una ridisposizione dei contenuti sgradevole e poco compatibile con la fruibilità degli stessi.
Era possibile applicare delle dichiarazioni che limitassero il ridimensionamento, innanzitutto, del contenitore principale del layout tramite le proprietà max-width e/o min-width ma il mancato supporto da parte di IE7 e versioni precedenti – in anni in cui questo era il browser largamente dominante! – rendevano la soluzione poco efficace.
2) in generale, uno scarso controllo sulla disposizione degli elementi all’interno della pagina soprattutto in presenza di contenuti non particolarmente abbondanti.
Con l’introduzione di HTML5/CSS3 è stato reso disponibile uno strumento mirato alla costruzione di siti “reattivi” costituito dalle media query, che istruiscono il browser a leggere la risoluzione dello schermo disposibile sul dispositivo e disporre gli elementi della pagina ed i contenuti di conseguenza.
Un sito reattivo (responsive), anche detto adattivo, è dunque un sito che cambia il suo aspetto a seconda che sia visualizzato su uno schermo di grandi dimensioni o su un telefonino/tablet, per dirla in breve.
Posta questa premessa, e prima di vedere un esempio concreto (sia pure semplificato), occorre chiarire se e quando sia indispensabile applicare questa tecnologia di sviluppo.
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.
Uso di PHP per includere un footer con menu multilingua
E’ pratica comune nei siti con numerose pagine, costruiti con codice dinamico PHP, quella di inserire il footer (piè-di-pagina) tramite la funzione include per consentire di apportare modifiche allo stesso intervenendo su un file solo invece che su tutte le pagine.
Chi svolge questo lavoro sa bene quanto di frequente i committenti cambiano idea su quello che deve essere riportato o meno, quindi qualsiasi trucchetto che velocizzi gli interventi risulta bene accetto.
In pratica, si crea un file chiamato ad es. footer.php contenente i dati aziendali e quant’altro e, nel codice di ciascuna pagina, si inserisce quanto segue:
<?php
include (‘footer.php’);
?>
Fin qui, tutto facile.
Supponiamo ora che il sito debba diventare multilingue, o che lo sia già, e ci venga chiesto di inserire nel footer di ciascuna pagina un menu che consenta di cambiare lingua per quella stessa pagina.
Ad esempio, nella pagina catalogo.php in italiano si abbia un menu del tipo:
English –> catalogo_en.php (in inglese)
Francais –> catalogo_fr.php (in francese)
ecc.
Usando solo HTML, non sarebbe più possibile includere un singolo file perché i link cambiano da pagina a pagina.
E’ possibile usare per questo scopo ancora PHP.