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.
Devilonline – Made in Italy e Italian Style
Devilonline è un negozio di e-commerce che vende accessori per animali, materassi tecnici e innovativi e accessori per camper, roulotte, tende, camion e nautica e idee per la casa, il viaggio ed il tempo libero. Tutto rigorosamente Made in Italy.
Aperto da pochi giorni, il sito propone al momento una LINEA PET con centinaia di articoli per cani, gatti, volatili e roditori ed una LINEA RIPOSO, CAMPEGGIO E NAUTICA con l’offerta di materassi memory, lattice, fresh gel, silver, tencel, aloe vera realizzati su misura e su disegno del cliente (anche di forma non rettangolare per adattarsi a qualsiasi utilizzo).
La sezione OFFERTE SPECIALI propone una serie di articoli a prezzo scontato per periodi di tempo limitato ed a rotazione.
Il negozio è tuttavia in continuo aggiornamento e presto verranno inseriti numerosi altri articoli nella LINEA ACCESSORI.
Il sito è stato sviluppato da INSTANT WEBSITES su piattaforma open-source OpenCart che permette di evitare i costi inerenti alla licenza d’uso, avendo a disposizione un sistema comunque efficace e flessibile, in grado di gestire migliaia di prodotti e metodi diversi di spedizione e pagamento.
Si tratta quindi di una piattaforma di e-commerce con caratteristiche professionali ed altamente personalizzabile, implementabile con relativa economicità – rispetto alle soluzioni “proprietarie” – e facilmente gestibile.
INSTANT WEBSITES è disponibile ad esaminare le esigenze di ciascun potenziale cliente in modo da individuare la soluzione più adatta e formulare offerte su misura.
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?