
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come progettare il proprio sito per diverse risoluzioni del monitor
Questa è una piccola verità, ma è anche un errore frequente di chi si trova a sviluppare per la prima volta delle pagine web. Troppo spesso (e soprattutto all’inizio) si ragiona basandosi su parametri “cartacei”, quando tutto rimane fermo, fisso e immutabile. Così si cerca di ottimizzare il sito in modo che non compaiano barre orizzontali o verticali, ma poi ci si dimentica di domandarsi «come si vedrà il mio sito a una risoluzione del monitor diversa da quella in cui sto lavorando?».
Uno dei pregi del web è infatti la relativa indipendenza dei contenuti dai “contenitori”: le pagine web possono essere viste infatti in moltissimi modi. Il che vuol dire anche che posso girare nel web a partire da qualsiasi piattaforma (Windows, Linux o Macintosh), con qualsiasi browser (Internet Explorer, Netscape Navigator, Mozilla, Opera…), e a qualsiasi risoluzione dello schermo (640×480, 800×600, 1024×768, eccetera)… Ma potrei vedere delle pagine web anche su PALM …
Una delle caratteristiche del buon web master è dunque quella di sapere adattare il proprio sito a molteplici situazioni. E se il sito non sarà perfetto, almeno dovrà essere decente, e comunque sempre visibile.
Oggi la maggior parte degli utenti internet imposta il proprio monitor in questo modo (dati tratti dal sito Netmechanic: http://www.netmechanic.com/browser-photo/background.htm#sizes):
I dati sono solo indicativi e non tengono conto del target: infatti se dovessimo sviluppare un sito di ICT, dovremmo anche tenere conto del fatto che chi opera nel ramo informatico di solito utilizza monitor piuttosto grandi che gli consentono una risoluzione di 1024 x 768 (con cui è più semplice lavorare…).
In ogni caso, visto che oramai gli utenti che utilizzano risoluzioni del monitor di 800×600 e quelli che invece preferiscono 1024×768 si equivalgono, è opportuno sviluppare il sito in modo che si veda in maniera corretta a entrambe le risoluzioni.
Iniziamo dunque a ottimizzare il nostro sito a 800 x 600: si tratta di evitare che nel sito compaiano barre orizzontali e verticali (in quest’ultimo caso solo se lo si ritiene opportuno). Impostiamo dunque il sito a una grandezza di 780×450 (con Windows XP, che utilizza delle barre più grosse, queste grandezze diventano: 779×430).
Dopodiché abbiamo diverse possibilità. A risoluzioni superiori di 800×600:
A seconda del tipo di layout potremo preferire una soluzione oppure l’altra. Ma analizziamo le varie situazioni nel dettaglio.
Si tratta per lo più di una svista o di un errore di progettazione. Tuttavia in particolari contesti il sito potrebbe rimanere tranquillamente sulla sinistra del monitor: in questo caso il webmaster giocherà abilmente con il colore di sfondo in modo da “mimetizzare” il tutto. Così la parte che a 1024 o a risoluzioni superiori viene lasciata “vuota”, apparirà invece come logica continuazione del layout.
È la soluzione che prediligono molti portali o testate giornalistiche (HTML.it stesso è impostato in questo modo). Per lo più 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>.
Il sito occupa la totalità del monitor a qualsiasi risoluzione (partendo però da 800×600). In questo caso utilizzeremo le tabelle in percentuale in modo che ci siano una o più celle mobili, in grado di occupare tutto lo spazio necessario.
Abbiamo visto che per far sì che un sito si ridimensioni a tutta pagina occorre mantenere varie celle fisse e lasciare una o più celle libere di ridimensionarsi a proprio piacimento: saranno queste celle “libere” a colmare lo spazio che altrimenti risulterebbe “vuoto”.
Potrebbe sembrare particolarmente laborioso l’utilizzo delle tabelle in percentuale. A prima vista saremmo infatti portati a credere di dover utilizzare le proporzioni matematiche per ri-calcolare la percentuale delle celle di tutto il sito.
Nulla di più sbagliato. Esiste infatti un piccolo escamotage (che funziona correttamente con tutti i browser), che ci 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:
<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>
Se non ci fosse l’immagine trasparente, con Netscape 4 la tabella interna avrebbe uno sfondo bianco.
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”):
Se vuoi aggiornamenti su Come impostare un sito ridimensionabile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Gimp rappresenta una alternativa piuttosto interessante al classico Photoshop; in questo tutorial vedremo come utilizzare gli strumenti che ci mette […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Utilizzare CSS ed HTML è più che sufficiente per realizzare uno slider interattivo da integrare all’interno di una pagina web, senza usare JavaScript.
Un tutorial semplice e pratico per imparare facilmente ed in modo rapido a realizzare un footer per la nostra pagina web utilizzando Bootstrap.
Alcuni esempi che mostrano come utilizzare CSS3 per realizzare forme geometriche di vario tipo, da includere all’interno di una pagina web.
Tailwind CSS è un framework CSS che si propone come alternativa a soluzioni più tradizionali ed abbondantemente diffuse come Bootstrap o w3.css. Rispetto a questi ultimi, Tailwind CSS si contraddistingue per l’approccio diverso, non più basato su classi che realizzano elementi già preconfenzionati, bensì sfruttando una serie di classi di utility per implementare le nostre idee direttamente nelle pagine HTML.