CSS responsive

CSS responsive

In quest’articolo studieremo come realizzare il nostro CSS responsive per il template in HTML5 che abbiamo preparato in questo articolo: https://www.codingcreativo.it/template-responsive-con-html/

Il template finito è visibile al seguente link: https://www.codingcreativo.it/coding_creativo_modello/

Apriamo un nuovo file con notepad++ o con il blocco note e cominciamo a creare il nostro CSS responsive.

Creazione del CSS responsive

Innanzitutto per creare il nostro CSS responsive, occorre creare il file. Nominiamo il file style.css e lo salviamo nella stessa cartella del file .html, in futuro per progetti più complessi ci organizzeremo con delle cartelle.

Per creare il nostro CSS responsive, il primo passo da fare, come vi dicevo nell’articolo sui ‘CSS e valori di default del browser‘, è inserire il reset CSS, quindi appena apriamo il nuovo foglio inseriamo questo codice:

/*reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Dopo aver inserito il reset procediamo ad impostare i vari elementi che ho progettato nella precedente struttura in HTML5.

Partiamo da quelli essenziali che commenteremo con main style per un facile riconoscimento.

Main style

Chiaramente io li ho impostati in questo modo, ma voi potete anche variare.

Cominciamo dal body, che rappresenta il corpo della pagina, a cui assegno un colore di sfondo #d8e8f5 che corrisponde all’azzurrino che vedete nell’esempio, un colore di testo #303030 che corrisponde al grigio scuro, font-family scelgo la famiglia di caratteri senza grazie Helvetica e Arial con dimensione di 14 pixel.

Dopo imposto i valori di default dei collegamenti ipertestuali (<a>), sia quando sono ‘a riposo’ sia quando si passa con il mouse sopra il collegamento (hover).

Faccio lo stesso per i tag dei titoli da h1 ad h6 a cui assegno le dimensioni in pixel.

Per il tag p imposto un’altezza della riga pari a 16 px, per facilitare la lettura dei testi.

Ad hr imposto un colore di linea #d8e8f5 che corrisponde ad un azzurro.

Al tag semantico figure dò una distanza dal margine dal basso di 10 pixel, per creare un pò di spazio tra le immagini e il testo.

Imposto un margine di 20 pixel per p, hr, h1, h2, h3, h4, h5, h6, ol, ul; è sempre un buon consiglio quello di non scrivere tutto attaccato ma creare appositi spazi vuoti.

/* Main style*/
body {
	background-color:#d8e8f5;
	color:#303030;
	font-family:Helvetica, Arial, sans-serif;
	font-size: 14px;
}
a 	{color: #3e75b9;text-decoration: none;}
a:hover {color: #416695;}

h1 	{font-size: 32px;}
h2 	{font-size: 28px;}
h3 	{font-size: 26px;}
h4 	{font-size: 21px;}
h5 	{font-size: 18px;}
h6 	{font-size: 16px;}

p {line-height:16px;}
hr {color:#d8e8f5}

figure {margin-bottom:10px;}
p, hr, h1, h2, h3, h4, h5, h6, ol, ul {margin-bottom: 20px;}

Sezione header

Imposto la sezione header con larghezza 920px, allineamento a sinistra, sfondo bianco e padding uguale a 20. Il padding è la distanza degli elementi attorno al box che li contiene, serve a creare il giusto spazio per dare armonia alla pagina.

/*** Header ***/
header 	{width: 920px;float:left;padding:20px;background:#fff;} 

Sezione nav

Adesso pensiamo alla barra di navigazione nav. Imposto la barra al 100% della larghezza del suo contenitore con allineamento a sinistra e sfondo azzurro (#197dd1).

Imposto per l’elenco <ul> sempre la disposizione a sinistra, ma con allineamento del testo centrale (text-align:center), senza punto elenco (list-style: none) e imposto overflow: hidden ovvero gli indico con questa proprietà che il contenuto eccedente deve essere ritagliato, cioè nascosto.

/*nav*/
nav		{width: 100%;float:left;background: #197dd1;}
nav ul 		{margin: 0px;float:left;width:100%; list-style: none;overflow:hidden;padding:10px;text-align:center;}
nav ul li 	{float: left;margin: 0px;position: relative;}
nav a 		{color: #fff; display: block;font-size:0.9em;padding: 14px 20px;text-transform:uppercase;}
nav a:hover {background:#d8e8f5;}

Struttura

Adesso inseriamo gli id assegnati ai tag div che compongono la struttura.

Al wrapper che è assegnato al primo tag div che apro sotto body, dò una larghezza di 960 px, sfondo bianco e margin sopra e sotto pari a 0 e a destra e sinistra auto, questa proprietà è importante per visualizzare la struttura di tutto il sito al centro della finestra del browser.

Al container dò una larghezza di 920 px perchè se notate sto dando un padding di 20 px, cioè una distanza dal box di 20px per ciascun lato. Infatti (920+20+20)px=960 px. Con float:left gli sto dicendo di posizionarsi sulla sinistra.

Al content, che rappresenta la parte a sinistra della pagina (sotto l’immagine grande), dò una larghezza di 620px lasciando così gli altri 300 per la sidebar, cioè per il menù laterale (meno un pò di padding) .

/* Struttura */
#wrapper 	{width: 960px;margin:0 auto;background:#fff;}
#container	{width: 920px;float:left;padding:20px;}
#content	{width: 620px;float:left;}

Post

Ai post assegno le seguenti proprietà: il padding lo metto a zero perché non mi interessa creare altro spazio. Al titolo dò un margine dal basso di 20 pixel e a entry-title a dò il grassetto e una distanza tra le lettere di -1, tanto per creare un effetto diverso.

.post 		     {padding:0px;}
.post .entry-title   {margin-bottom: 20px;}
.post .entry-title a {font-weight:bold;letter-spacing:-1px;}
.post .entry-content {line-height:24px;}

Barra laterale

Adesso pensiamo alla barra laterale, che indico usando il tag semantico aside. La larghezza che imposto è 270px e imposto chiaramente float a destra in quanto la barra laterale in genere và a destra.

Per i widget laterali imposto per ciascuna voce dell’elenco nessun punto elenco e una distanza tra le linee di 35 pixel.

/*barra laterale */
aside		{width: 270px;float:right;}
.widget li 	{line-height:35px;list-style-type:none}

Altre classi utili

Innanzitutto ho impostato un classe clear con la proprietà clear:both per ripulire da altri posizionamenti a destra o a sinistra.

Dopo ho creato anche una classe per le immagini di nome img in modo tale da avere la larghezza al 100%, altezza automatica e margine dal basso di 10 pixel, questo è importantissimo per visualizzarle scalate su tutti i dispositivi.

Poi ho impostato l’id sitemap che serve a visualizzare il menù in basso con una distanza dal bordo sinistro di 10px.

.clear 	    {clear:both;}
.img	    {width:100%;height:auto;margin-bottom:10px;}
#sitemap    {padding-left:10px;}

Footer

Il piede della pagina, indicato dal tag semantico footer, ha una larghezza di 920 pixel; infatti ho impostato il padding di 20 pixel. Il colore di sfondo è grigio scuro #676767, mentre il carattere è bianco.

Ho impostato i collegamenti con una dimensione di 14 pixel, di colore bianco e altezza della linea di 30 pixel per creare un effetto gradevole.

I collegamenti diventano azzurrini quando si passa sopra con il mouse.

footer {width:920px;float:left;padding:20px;background:#676767;color:#fff;}
footer a 	{font:14px;color:#fff; line-height:30px;}
footer a:hover 	{color:#d8e8f5;}
footer p 	{padding-left:10px;}

Media query

Continuiamo la creazione del nostro CSS responsive.
Per rendere una pagina web responsive uno dei possibili metodi è utilizzare le media queries. Le media queries sono nate con la versione 3 dei CSS e consentono di riconoscere il dispositivo con cui si sta navigando, sia per la risoluzione sia per l’orientamento.

Così basterà programmare la nostra pagina seguendo la sintassi:

@media (max-width: risoluzione) { ... }

Oppure:

@media (min-width: risoluzione) { ... }

Ed è possibile anche usare gli operatori logici, ad esempio:

@media (min-width: risoluzione) and  (max-width: risoluzione) { ... }

Dove risoluzione è il valore che di volta in volta vado a cambiare.

Per strutture che hanno una larghezza massima di 767 pixel allora imposto la mia pagina web con questi valori:

@media (max-width: 767px) {
body      {padding:10px;background:#fff;}
header    {width:100%;padding:20px 0 20px 0px;} 
nav	  {width:100%;float:left;}
#content  {width:100%;float:left;}
aside     {width:100%;float:right;padding:20px 0 0 0px;}
footer	  {width:100%;padding:20px 0 20px 0px;}
#wrapper      {width:100%;margin: 0 auto;}
#container    {width:100%;float:left;padding:20px 0 0 0;}
#site-title a {font-size:25px;margin-left:10px;}

}

Noterete che ho impostato molti valori al 100% per far in modo che prendono tutto lo schermo.

Per i dispositivi che hanno una risoluzione da 768px a 980px imposto questi valori:

@media (min-width: 768px) and (max-width: 980px) 	{
header 		{width:708px;float:left;padding:20px;} 
nav	        {width:100%;float:left;}
aside		{width:210px;float:right;}
#wrapper        {width:748px;margin: 0 auto;}
#container 	{width:708px;float:left;padding:20px;}
#content	{width:470px;float:left;}
footer		{width:708px;float:left;padding:20px;}
}

Per i dispositivi che hanno una risoluzione maggiore di 1200px imposto questi valori:

@media (min-width: 1200px) {
header 		{width:1130px;float:left;padding:20px;} 
nav		{width:100%;float:left;display:block;}
aside		{width:420px;float:right;}
footer		{width:1130px;float:left;padding:20px;}
#wrapper 	{width:1170px;margin:0 auto;}
#container	{width:1130px;float:left;padding:20px;}
#content        {width:670px;float:left;}
}

Chiaramente è possibile impostare anche altre risoluzioni, ma vi parlerò ancora delle media queries più avanti in dettaglio.

In questo modo avete creato il vostro CSS responsive. Salvatelo e provate, il risultato dovrà essere come questo:
https://www.codingcreativo.it/coding_creativo_modello/

Le immagini le potete prendere aprendo la pagina dal link sopra, cliccando con il tasto destro e scegliendo salva con nome. Per un corretto funzionamento dovete creare una sotto-cartella di nome images dove le andrete ad inserire, perché ho inserito il percorso nella pagina html.

In pratica dovreste avere questa situazione, dove dentro images inserirete le immagini.

percorso delle immagini

Chiaramente questo vuole essere solo un semplice esempio di struttura realizzata con HTML5 e CSS3 responsive.

Se provate i collegamenti non porteranno a niente, programmate voi le altre pagine come meglio credete e realizzate i collegamenti.

Questo è solo un esempio di possibile realizzazione di un CSS responsive.

Alcuni link utili:

Form in html

Tag strong

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Template Responsive

Template Responsive

In quest’articolo impareremo a predisporre un semplice template responsive con HTML, che può essere utilizzato anche a scopo didattico.

Questo vuole rappresentare solo un buon punto di partenza per lo sviluppo di altri progetti più corposi.

Chiaramente poi sarà il foglio di stile che lo renderà responsive, ma occorre predisporre anche il codice HTML in maniera idonea.

Potete visionare il modello che impareremo a sviluppare al seguente link:

https://www.codingcreativo.it/coding_creativo_modello/


Validazione del codice secondo il W3C

Che cosa vuol dire validazione del codice secondo il W3C?

Vuol dire che il vostro sito web sta rispettando le giuste regole sia per l’HTML5, sia per il CSS3.

Questo semplice modello creato è valido secondo le regole del W3C ed è validato per HTML5 e per CSS3.

Es: Inserite tutto il percorso completo
https://www.codingcreativo.it/coding_creativo_modello/ nel sito del W3C come da figura sotto:

W3C validator CSS

Ecco il messaggio generato dal sistema che ci dice che non ci sono warnings ed errori nel codice.

W3C html validator

Proviamo la validazione anche del foglio di stile, cioè vediamo se il nostro CSS rispetta le regole del W3C.

Andate su questo sito per validare i CSS https://jigsaw.w3.org/css-validator/ e inserite nuovamente il percorso completo: https://www.codingcreativo.it/coding_creativo_modello/

Ecco il risultato della verifica, che ci dice che il nostro foglio è in regola per il W3C.

validator css

Bene adesso iniziamo a svilupparlo.


Template Responsive

I template responsive sono quei modelli di pagine web che si adattano a ciascun dispositivo.

Oggi ormai è un requisito indispensabile perché circa il 70-80 % delle visite ad un sito web arrivano proprio da smartphone.

Il modello che vi presento non ha codice JavaScript per il menù ma lo adatta in maniera molto semplice.

Quando inizierò la guida su JavaScript vi insegnerò ad inserire il menù dinamico che automaticamente si trasforma per gli smartphone o altri dispositivi mobili.


Struttura del template responsive con HTML

Pensiamo a come strutturare la pagina:

Header – dove si inserisce il logo e magari un banner.

Nav – dove si inserisce la barra di navigazione del sito.

Slider – sezione dedicata alle immagini a scorrimento, ma per il momento lasceremo un’immagine statica.

Sezione articoli – qui inseriremo i nostri articoli.

Sidebar -Barra laterale dove inseriremo i collegamenti agli ultimi post per ciascun argomento.

Footer – ripeteremo il menù principale e citeremo il web-master.

Bene, queste sono le varie parti del nostro modello.


Iniziamo a creare il template

Iniziamo a scrivere il codice html e quindi apriamo il nostro editor. Come vi dicevo, vi consiglio di utilizzare notepad++ che potete scaricare gratuitamente da questo sito web https://notepad-plus-plus.org/

All’interno del codice html ho inserito le cassi e gli id per la formattazione con i CSS. Se volete sapere cosa sono i CSS, prima di continuare con l’esempio, potete consultare, se non l’avete già fatto, queste pagine:
https://www.codingcreativo.it/i-fogli-di-stile-css/
https://www.codingcreativo.it/fogli-di-stile-esterni/
https://www.codingcreativo.it/selettori-nei-css/

Oppure continuate a leggere inserendo comunque le proprietà class e id dove sono indicate all’interno dei tag.

Partiamo dall’head, ovvero dalla sezione del titolo, e dai tag che precedono title.

<!doctype html>
<html lang="it"> 
<head>
    <meta charset="utf-8" />
    <title>Coding Creativo, fare coding divertendosi</title>   
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

Ho inserito il tag meta per i caratteri:

<meta charset="utf-8" />

E poi ho inserito anche il tag necessario per la visualizzazione del sito web sui dispositivi mobili.

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

Quando utilizziamo i tag meta nell’attributo name indichiamo l’oggetto che vogliamo trattare e nel content l’azione che deve essere compiuta.

In questo caso stiamo dicendo al browser di impostare la larghezza della viewport, ovvero dell’area di visualizzazione, in base alla larghezza dello schermo del dispositivo. Cioè widht=device-width ovvero larghezza=larghezza del device. Separati da virgole possiamo aggiungere altre proprietà. Ad esempio aggiungiamo initial-scale=1 per indicare che vogliamo un rapporto 1:1.

Ci sono altri parametri che è possibile indicare ma ve ne parlerò in seguito con degli esempi pratici.

Continuiamo la creazione della nostra pagina.

Come vi dicevo sono importanti i tag semantici per la costruzione di un sito web.

Quindi struttureremo il nostro sito tenendone conto.

Corpo della pagina

Iniziamo adesso a progettare il nostro template responsive strutturando il corpo della nostra pagina.

Dunque, dopo il tag body come prima cosa inseriamo il tag div che sarà il contenitore di tutto il contenuto della nostra pagina web (in pratica si chiuderà prima del tag </body>) e che convenzionalmente prende nome di wrapper (traduzione avvolgere – perché è come se avvolgesse tutta la pagina).

Dopo aggiungiamo il tag semantico header, dove all’interno per il momento inseriremo solo il logo del sito web.

Sezione header

Il logo si trova dentro un’apposita cartella di nome images, dunque scrivo:

<body>
<div id="wrapper">
 <header>   
      <figure>
        <img src="images/logo_coding_creativo.png" alt="coding creativo" class="img">
      </figure>	
   </header> 

Notate che ho inserito all’interno del tag img una classe (selettore CSS) di nome img, che vedremo sarà indispensabile per visualizzare bene un’immagine anche su smartphone.

Sezione nav

Dopo l’header inserisco la barra di navigazione, utilizzando il tag semantico nav e un elenco puntato <ul> che poi formatterò con i CSS.

<nav>
    <ul>
     <li><a href="home.html" title="Home">Home</a></li>
     <li><a href="scratch.html" title="Scratch">Scratch</a></li>
     <li><a href="algobuild.html" title="Algobuild">Algobuild</a></li>
     <li><a href="linguaggio_c.html" title="linguaggio c">Linguaggio C </a></li>
     <li><a href="linguaggio_html.html" title="HTML">HTML</a></li>
     <li><a href="css.html" title="CSS">CSS</a></li>
    </ul>
</nav>

Sezione slider o immagine statica

Sotto il menù di navigazione inserisco un’immagine statica:

<figure><img src="images/logo_coding_creativo.png" alt="coding creativo" class="img"></figure>	

Utilizzo il tag semantico figure a cui assegno un id di nome logo che poi formatterò con i CSS.

Sezione principale del sito

Per realizzare il nostro esempio di template responsive ho pensato di strutturare il corpo del sito inserendo tutto all’interno di un livello div a cui ho assegnato un id di nome container.

Dopo ho creato la sezione principale dove ho inserito i vari articoli, usando il tag semantico article, seguendo una struttura ben precisa.

Per separare un articolo dall’altro ho utilizzato il tg <hr> che produce una linea di separazione. Questo tag non ha una chiusura.

<div id="container">
	<div id="content">

            <article class="post">            
                <h2 class="entry-title">Olimpiadi di matematica con scratch</h2>
               <p>Sei nell'articolo: olimpiadi di matemativa - <a href="#">Scratch</a></p>
                <figure><a href="#"><img src="images/gara_nazionale.jpg" class="img" alt="anno bisestile"></a></figure>
                <div class="entry-content">In questo esempio realizzeremo un algoritmo per la risoluzione di un quesito matematico proposto alle gare nazionali.
                </div>
            </article> 
            <hr> 
            <article class="post">            
                <h2 class="entry-title">Anno bisestile con scratch</h2>
                <p>Sei nell'articolo: anno bisetile - <a href="#"> Scratch</a></p>
                <figure><a href="#"><img src="images/sfondo_bisestile.jpg" class="img" alt="scratch bisestile"></a></figure>
                <div class="entry-content">In questo esempio realizzeremo un algoritmo per il calcolo dell'anno bisestile</div>   
            </article>
            <hr>
    	</div>    


    <aside id="sidebar">
        <div class="widget">
         <h3>Scratch</h3>
          <ul>
          <li><a href="">Olimpiadi di matematica con scratch</a></li>
          <li><a href="">Olimpiadi di informatica con scratch</a></li>
          <li><a href="">Massimo tra n numeri con scratch</a></li>
          <li><a href="">Anno bisestile con scratch</a></li>
        </ul>
           </div>
            <div class="widget">
            	<h3>Algobuild</h3> 
                <ul>
                   <li><a href="">Olimpiadi di matematica con algobuild</a></li>
                   <li><a href="">Olimpiadi di informatica con algobuild</a></li>
                   <li><a href="">Massimo tra n numeri con algobuild</a></li>
		   <li><a href="">Anno bisestile con algobuild</a></li>
               </ul>
           </div>
           <div class="widget">
                <h3>CSS</h3>
                <ul>
                    <li><a href="#">Template responsive</a></li>
                    <li><a href="#">Pseudo-classi</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
    	</aside>  
   
    </div><!--chiude il div class="container" -->

Infine c’è da creare il piede della pagina, dove inserisco il menù di navigazione e l’autore del sito.

Il livello dove ho indicato la classe clear serve ad evitare possibili allineamenti di altri oggetti a destra o a sinistra. Chiaramente deve essere impostata con i CSS, come vi dirò nel tutorial sul foglio di stile creato per questa pagina web.

<footer>
    <div id="sitemap">
	<a href="home.html" title="Home page">Home</a> | <a href="scratch.html" title="About Us">Scratch</a> | <a href="algobuild.html" title="Servizi">Algobuild</a> |
    </div>
    <p><a href="https://www.codingcreativo.it"> Coding creativo</a></p>
 </footer>
 <div class="clear"></div>
</div> <!--chiude il div class="wrapper" -->

Ovviamente non dobbiamo dimenticare di inserire i due tag di chiusura:

</body>
</html>

Ecco quindi quello che è solo un possibile esempio di template responsive con HTML5.

Adesso occorre formattare la pagina perché sia gradevole ed effettivamente adattabile su tutti i dispositivi. Perciò occorre andare nella sezione sui CSS, dove vi spiego come creare il foglio di stile in modo tale da rendere responsive il nostro sito web.


Alcuni link utili

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web