Lezione per le classi 3D e 3E SIA: Come progettare il proprio sito per diverse risoluzioni del monitor e dispositivi mobili

Lezione per le classi 3D e 3E SIA: Come progettare il proprio sito per diverse risoluzioni del monitor e dispositivi mobili

Le pagine web possono essere viste  in moltissimi modi, con qualsiasi sistema operativo (Windows, Linux, Macintosh,Android), con qualsiasi browser (Internet Explorer, Chrome, Safari,Mozilla, Opera…),con qualsiasi risoluzione dello schermo (640×480, 800×600, 1024×768, eccetera)… e su qualsiasi dispositivo mobile(smatphone, iphone, tablet, ipad…)

Chi realizza le pagine web deve sapere adattare il proprio sito a molteplici situazioni. 
Oggi la maggior parte degli utenti internet imposta il proprio monitor ad una risoluzione di 1024×768.

La prima cosa da fare è ottimizzare il sito che si vuole realizzare a 1024x768 per evitare che sulle pagine appaiano le barre orizzontali e verticali (in quest’ultimo caso solo se lo si ritiene opportuno). Impostiamo dunque il sito a una grandezza di 1000×700 (perché ci sono versioni di Windows che utilizzano le barre di scorrimento più grosse).
E’ consigliabile definire il sito “centrato  a qualsiasi risoluzione e che si ridimensiona a qualsiasi risoluzione.

È la soluzione usata su quasi tutti i siti Web.

Spesso il sito viene sviluppato con una testata (header), una colonna centrale, una o più colonne laterali, e una chiusura (footer). In effetti ricorda molto la disposizione tradizionale dei quotidiani. La centratura del sito viene per lo più ottenuta con un semplice:

<div align=”center”>
aperto subito dopo il <body> e chiuso prima della chiusura dello stesso </body>.

Per definire il sito ridimensionabile (partendo però da 800×600), bisognerà utilizzare le tabelle in percentuale in modo che ci siano una o più celle mobili, in grado di occupare tutto lo spazio necessario.
Per utilizzare le tabelle in percentuale esiste un modo che viene utilizzato per tutti i browser, che permette di risparmiare un sacco di lavoro.
Incominciamo a procurarci una gif trasparente di 1 pixel x 1 pixel. Si chiama “shim” ed è un’immagine vuota che nell’ordinaria costruzione di un sito ci è utile in una molteplicità di situazioni:
Si sa che, se non c’è nulla all’interno di una cella. È allora indispensabile riempire la cella con qualsiasi cosa: un “break” (<br>), un “non-breaking-space” ( ), oppure la nostra immagine vuota. 
Un altro problema che di verifica che su alcuni browser,  quando ci sono delle tabelle annidate, da una cella interna non è possibile vedere lo sfondo che sta sopra. Anche in questo caso la situazione si risolve mettendo un’immagine vuota di sfondo. Così:
<table width=”500″ border=”1″ cellspacing=”0″ cellpadding=”0″ height=”400″>
<tr>
<td background=”imgs/sfondoOmino.gif” align=”center” valign=”middle”> 
  <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
  <td background=”imgs/shim.gif”> </td>
  <td background=”imgs/shim.gif”> </td>
  <td background=”imgs/shim.gif”> </td>
  </tr>
  </table>
</td>
</tr>
</table>
La nostra immagine vuota, lo “shim”, ci viene in aiuto anche nel caso delle tabelle in percentuale. Per quanto possa sembrare strano, infatti, non occorre utilizzare delle percentuali realistiche, ma basta dare a una cella il valore dell’1% perché questa si “schiacci” sul proprio contenuto, basta darle invece un valore del 100% perché si allarghi al massimo.
È evidente, a questo punto, che le dimensioni non vanno più date alle celle (che saranno dell’1% o del 100%), ma va attribuito al contenuto.
Si tratta dunque di prendere il nostro “shim”, dargli le dimensioni che preferiamo, e quindi schiacciargli contro la cella: la dimensione della cella viene così tenuta dallo shim. Stesso procedimento nel caso in cui avessimo del “contenuto vero” contro cui schiacciare la cella (ricordarsi di usare il “nowrap” per le scritte).
La pagina non risulta appesantita dall’utilizzo di tutte queste immagini vuote: l’immagine viene infatti caricata una sola volta.
Questo metodo lo uso già da parecchio tempo (più di un anno) e funziona correttamente con ogni browser (con i debiti aggiustamenti).
Ovviamente se le celle ridimensionabili sono più di una, il 100% deve essere diviso fra tutte le celle che devono essere ridimensionate. Così:

Ecco il codice corrispondente al terzo esempio:
<table width=”100%” border=”2″ cellspacing=”0″ cellpadding=”3″ bordercolor=”#000000″>  <tr>   
<td width=”1%”><img src=”imgs/shim.gif” width=”40″ height=”20″></td>   
<td width=”33%”>Contenuto 1</td>  
<td width=”1%”><img src=”imgs/shim.gif” width=”80″ height=”20″></td>   
<td width=”33%”>Contenuto 2</td>   
<td width=”1%”><img src=”imgs/shim.gif” width=”40″ height=”20″></td>   
<td width=”33%”>Contenuto 3</td>   
<td width=”1%”><img src=”imgs/shim.gif” width=”40″ height=”20″></td>  
</tr> 
</table>
Come si vede la somma totale delle celle è di 103% e le proporzioni non rispettano la realtà, ma il layout viene visualizzato correttamente, perché la larghezza del 100% è espressa nel tag <table>, che “comanda” le celle sottostanti.
Proprio per questo stesso motivo (che cioè le percentuali non rispecchiano più la realtà), non ci sarà da stupirsi se – in talune situazioni – per avere tre celle della stessa misura e che si ridimensionano allo stesso modo, dovremo dare – ad esempio – alla prima il 60% alla seconda il 40% e alla terza il 30%.

Sono comunque eventualità da verificare caso per caso nella pagina.
Questa tecnica non dà alcun tipo di problemi finche si utilizza l’ “HTML standard” (cioè il 3.2). Se utilizziamo i livelli, dobbiamo invece prestare particolare attenzione (non solo nei “siti che si ridimensionano”, ma anche nel caso del “layout centrato”):
Livelli in posizione relativa: non abbiamo alcun problema, dal momento che i livelli in posizione relativa vengono “spostati” insieme con l’elemento che li contiene.
Livelli in posizione assoluta: la pagina si sposta o si ridimensiona, viceversa i livelli rimangono fermi e calcolano la propria posizione dall’alto e da sinistra. Se non vogliamo vedere i nostri livelli nel bel mezzo della pagina, dobbiamo utilizzare del codice javascript che individui la posizione e sposti il livello dove più ci fa comodo. In uno dei prossimi articoli vedremo come.

Altra regola fondamentale per chi realizza siti:

"Fare in modo che la pagina Web venga visualizzata in modo corretto anche sui dispositivi mobili".
Responsive Web Design - The Viewport


Cos'è The Viewport?

Il viewport è l'area visibile dell'utente di una pagina Web e varia a seconda del dispositivo ed è più piccolo su un telefono cellulare che sullo schermo di un computer.


Prima dell'uso di Internet sui tablet e sui telefoni cellulari, le pagine Web erano progettate solo per gli schermi dei computer e presentavano un design statico e una dimensione fissa.

Successivamente, quando gli utenti hanno iniziato ad usare i dispositivi mobili per navigare su Internet, nacque la necessità di definire un sistema che consentisse di ridimensionare la pagina Web in base al dispositivo utilizzato.
Impostazione di Viewport

HTML5 ha introdotto un metodo per consentire ai web designer di assumere il controllo sulla vista, tramite il tag <meta> .

Dovresti includere il seguente elemento <meta> viewport in tutte le tue pagine web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Un elemento <meta> viewport fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.

La width=device-width parte della larghezza del width=device-width imposta la larghezza della pagina in modo che segua la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).

La parte initial-scale=1.0 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.

Ecco un esempio di una pagina Web senza il meta tag viewport e la stessa pagina Web con il meta tag viewport:

Suggerimento: se si sta navigando in questa pagina con un telefono o un tablet, è possibile fare clic sui due collegamenti sottostanti per vedere la differenza.


Senza il meta tag della vista



Con il meta tag viewport


Contenuto delle dimensioni su Viewport

Bisogna tenere sempre presente che gli utenti visualizzano i siti Web verticalmente su dispositivi desktop e mobili, ma non in orizzontale!

Le pagine che presentano le barre in orizzontale e quindi scorrono da sinistra verso destra sono considerate errate e il sito è scadente.

E' importante seguire queste regole:


1. NON utilizzare elementi di larghezza fissa di grandi dimensioni; ad esempio, se un'immagine viene visualizzata con una larghezza più ampia della vista, può far scorrere la finestra orizzontalmente. Ricordarsi di regolare questo contenuto per adattarlo alla larghezza della finestra.

2. NON lasciare che i contenuti si basino su una particolare larghezza della finestra per renderizzare bene - Dal momento che le dimensioni e la larghezza dello schermo nei pixel CSS variano ampiamente tra i dispositivi, il contenuto non dovrebbe fare affidamento su una larghezza di finestra specifica per il rendering.

3. Utilizzare il CSS per applicare uno stile diverso per gli schermi di piccole e grandi dimensioni : l'impostazione di larghezze CSS assolute per gli elementi della pagina fa sì che l'elemento sia troppo ampio per la visualizzazione su un dispositivo più piccolo. Invece, considera l'utilizzo di valori relativi alla larghezza, come larghezza: 100%.

Inoltre, prestare attenzione all'utilizzo di valori di posizionamento assoluti di grandi dimensioni.Potrebbe causare la caduta dell'elemento all'esterno della finestra su dispositivi di piccole dimensioni.

Tratto da: Html .it e W3schools .com

Commenti

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi sulla rappresentazione della virgola mobile IEEE 754 (Floating Point)