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?