Cell. +39 3479684755
Il Blog di Instant Websites
tecnoelettrasas.it – nuovo sito in linea
Tecnoelettra S.a.s. di Colli Pietro e C. è un azienda con sede a Fizzonasco (Milano) che ha per oggetto la realizzazione di macchine speciali per assemblaggio, automazione di macchine ed impianti, robotica industriale, attrezzature di controllo, quadri elettrici di comando e controllo.
Nata nel 1999, questa azienda ha recentemente deciso di aprire un sito Internet affidandosi a INSTANT WEBSITES per la progettazione e lo sviluppo.
Il sito è sviluppato su piattaforma WordPress, molto apprezzata poiché permette all’utente di gestire i contenuti in autonomia, ed è “reattivo” vale a dire la visualizzazione dei contenuti è ottimizzata in base al tipo di dispositivo sul quale il sito stesso viene visto.
Si tratta di un requisito praticamente indispensabile per un website di nuova realizzazione, data la diffusione capillare dei dispositivi mobili (smartphone e tablet) ed il loro utilizzo per navigare su Internet.
L’URL è: www.tecnoelettrasas.it
Introduzione al design reattivo – esempi di Media Query
Premessa
In un precedente articolo di questo blog (Introduzione al design reattivo – https://lnx.instantwebsites.it/iwblog/?p=1272) abbiamo introdotto alcuni principi di base del design “reattivo” o “adattivo“.
Per approfondire il discorso, vediamo ora alcuni esempi di Media Query che consentono di subordinare l’applicazione di determinate dichiarazioni (proprietà e relativi valori), all’interno del foglio di stile, alla ricorrenza di condizioni prefissate concernenti la risoluzione video del dispositivo su cui il sito viene visualizzato e/o l’orientamento dello schermo.
Rammentiamo innanzitutto che nella sezione head della pagina occorre inserire quanto segue:
<meta name=”viewport” content=”width=device-width” />
per fare sì che il riferimento sia la risoluzione “reale” del dispositivo (dimensione della viewport) prevenendo lo zoom automatico della pagina che quest’ultimo effettuerebbe per visualizzarla interamente.
E’ anche opportuno impedire che l’utente possa materialmente effettuare lo zoom stesso, completando quanto sopra nel modo seguente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
oppure, in modo equivalente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” />
Rammentiamo inoltre che per impostare le media query ci sono due modi:
1) creare diversi fogli di stile ed eseguirli a seconda del dispositivo impostando le condizioni nella sezione head (Media Feature), come nell’esempio seguente:
<!– foglio di stile comune a tutti i supporti –>
<link href=”css/common.css” rel=”stylesheet” media=”screen” />
<!– media feature compatibili con tutti gli schermi –>
<link href=”css/smartphone.css” rel=”stylesheet” media=”only screen and (max-width: 480px)” />
<link href=”css/tablet.css” rel=”stylesheet” media=”only screen and (min-width: 481px) and (max-width: 767px)” />
…
2) utilizzare un singolo foglio di stile, inserire le regole comuni, poi quelle specifiche impiegando, appunto, le Media Query come negli esempi che seguono.
Immagine adattiva con punti attivi
Supponiamo di dovere inserire un’immagine con punti attivi in una pagina di un sito adattivo, o reattivo (“responsive“), che – cioè – si ridimensioni (e quando necessario, ridisponga i suoi elementi) in base alla risoluzione dello schermo del dispositivo su cui il sito viene visualizzato.
Il problema è costituito dal fatto che la mappa comprende delle coordinate di punti che cessano di avere valore nel momento in cui l’immagine subisce il ridimensionamento; se quest’ultimo è elevato, quindi, le aree attive si spostano non corrispondendo più con le zone dell’immagine da cliccare.
Queste immagini si utilizzano, per esempio, al fine di realizzare delle pagine introduttive, talvolta chiamate splash pages, in cui a diverse zone dell’immagine stessa corrispondono dei link alle differenti pagine, o parti, del sito.
E’ possibile risolvere il problema appena esposto tramite l’uso dei CSS3 e di un plugin per jQuery chiamato wdImageMaps jQuery (crediti e link per il download in fondo a questo articolo).
Vediamo dunque come procedere.