Cell. +39 3479684755
Il Blog di Instant Websites
Rendere reattivo un sito esistente – 2
In un precedente articolo (questo: https://lnx.instantwebsites.it/iwblog/?p=1585) abbiamo visto i presupposti per rendere reattivo un sito sviluppato prima dell’avvento di HTML5/CSS3.
Elenchiamo ora i passi fondamentali per realizzare questo risultato, sia pure in forma molto sintetica e non esaustiva.
Codice HTML
Cominciamo dalle pagine, cioè dai relativi file in formato HTML:
- cambiare il DTD da XHTML 1.0 Transitional/Strict a HTML5.
La linea di codice che deve aprire la pagina è semplicissima:
<!doctype html> - inserire il metatag viewport per istruire i dispositivi mobili a considerare la loro effettiva risoluzione della viewport invece di zoomare la pagina:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no” - prima di associare il foglio o i fogli di stile, prevedere il caricamento della libreria html5shim (o html5shiv) per i browser non compatibili con l’ultima versione di HTML.
Per fare questo, si impiega un commento condizionale destinato alle versioni di Internet Explorer 8 e precedenti:
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js” type=”text/javascript”></script>
<![endif]–>
Si noti che in questo caso la libreria viene caricata dal CDN (Content Delivery Network) googlecode.com ma è anche possibile scaricare il file dalla stessa fonte e caricarlo in locale. - migliorare la semantica del codice di pagina, inserendo quantomeno i tag più tipici di HTML5 tra i quali, in particolare: <header>, <nav>, <section>, <article>, <aside>, <footer>.
Per evitare di dovere cambiare i nomi dei selettori nel foglio di stile è possibile usare questi tag abbinandoli ad un id o una classe, se ad esempio originariamente avevamo:
<div id=”menu”> … </div>
possiamo procedere nel modo seguente:
<nav id=”menu”> … </div> - fare attenzione agli stili “in linea”, cioè alle dichiarazioni delle proprietà di taluni elementi direttamente nel codice HTML, come ad esempio nella linea:
<img style=”margin-top:40px; float:right;” src=”…” alt=”…” />
E’ possibile infatti che quanto impostato in tale modo generi un risultato sgradito una volta che la pagina viene visualizzata su un dispositivo mobile.
Dopo avere eseguito queste operazioni, è consigliabile effettuare una prima “convalida” del codice, cioè verificare la sua corrispondenza alle raccomandazioni del W3C per il DTD scelto.
Se la pagina è online si può utilizzare il servizio del W3C stesso a questo indirizzo: http://validator.w3.org/
Passiamo ora alle modifiche ed aggiunte nel foglio di stile.
Rendere reattivo un sito esistente – 1
La caratteristica di “reattività” (o “adattività“) di un sito è attualmente un requisito imprescindibile per un sito Internet.
Secondo le statistiche, gli utenti che accedono al web tramite dispositivi portatili hanno superato quelli che usano computer da tavolo e se è vero che molti tablet hanno risoluzioni video elevate, tali da non richiedere quindi modalità specifiche di visualizzazione delle pagine, gli smartphone comportano questa necessità per consentire una fruizione agevole dei contenuti.
Nella progettazione e nello sviluppo di un sito di nuova realizzazione verrà pertanto creata una versione di base del sito e, tramite adeguate media query e le relative regole nel foglio di stile, saranno aggiunte le versioni particolari del sito stesso per i dispositivi mobili.
Per quanto attiene invece ai siti già esistenti, che cosa è possibile nonché preferibile fare?
E’ possibile cioè rendere adattivo un sito esistente o è più facile, pertanto economicamente conveniente per il cliente, costruirne uno ex novo?
Corsi di web design a Vigevano (Pavia)
Le aree fondamentali del programma base sono le seguenti:
- Introduzione al Web Design
- La struttura di un sito web
- HTML5 e CSS3: progettazione e sviluppo di pagine reattive
- Promozione del sito (SEO)
Le caratteristiche più importanti della nostra proposta di corsi sono:
- interazione diretta con l’insegnante, essendo seduti alla stessa scrivania, anche nei corsi collettivi che prevedono al massimo 3 partecipanti;
- flessibilità di giorno e di orario delle lezioni (nei limiti delle disponibilità);
- possibilità di personalizzare il programma, nel caso si disponga di una preparazione di base e/o ci si voglia concentrare su determinate aree del programma;
- programma ampio e completo, dato che parte dalla progettazione di un sito alle pratiche di SEO (ottimizzazione per i motori di ricerca).
Siamo a Vigevano (Pavia), il nostro ufficio è facilmente raggiungibile anche da Milano:
- in treno, partendo dalla stazione di Milano Porta Genova o Milano San Cristoforo: circa 30′ di viaggio, poi 10′ di camminata dalla stazione alla sede;
- in auto, con ampio parcheggio gratuito proprio davanti alla sede stessa.
I corsi possono essere organizzati in orari mattutini, pomeridiani o serali (nei giorni feriali) ed è possibile concordare:
- corsi di gruppo ed individuali;
- lezioni e consulenze singole;
- corsi con programmi personalizzati;
- corsi specializzati (ad es. su WordPress, Joomla!, OpenCart ed altri CMS).
Programma: scarica il file con il programma aggiornato dei corsi (Corso Base + moduli proposti per il Corso Avanzato)
I nostri siti di riferimento: www.corsidiwebdesignavigevano.it / www.corsiwebdesign.it / www.corsidiwebdesign.eu
Modulo di richiesta informazioni: lnx.instantwebsites.it/iwblog/?page_id=953
Telefono: 3479684755 – 0200618547 (segreteria telefonica)
Possibilità di incontro conoscitivo gratuito e senza impegno