le formule magiche

Basic HTML5 layout

Layout HTML5 di base

Layout di base pronti da personalizzare.

Caratteristiche:
  • HTML5, CSS, JS
  • W3C validation
  • Mobile responsive

Contenuto:
  • index.html
  • pag1.html (solo layout parallax)
  • cartella styles
  • cartella js
  • cartella img
  • cartella doc (privacy, informativa)

Funzionalità:
  • Cookie script
  • Google analytics
  • Adjust iFrames
  • Social buttons

Opzioni:
  • Sommario titoli pagina
  • Collegamento a Search console

Indicazioni

Il metatag di verifica di Search Console va inserito nella pagina index, prima della chiusura </head>, dove indicato.
Il codice di Google Analytics si trova nel file utils.js, nella cartella js. Basta inserire il proprio ID al posto delle x in questa linea:
ga('create', 'XXXXXXXXXXXXXXX', 'auto');

Il sommario può essere inserito nelle pagine con questo codice:
<!-- sommario-->
     <div class="summary shadow-page">
       <span>Sommario:</span>
         <ul id="tocList">
         </ul>
     </div>
<!-- end sommario-->

Gli iFrame sono resi automaticamente responsive grazie allo script apposito che si trova nel file utils.js.
Affinchè lo script possa funzionare, è necessario che nell'iFrame siano indicate la larghezza e l'altezza di base.
Esempio con iFrame per YouTube:
<iframe width="600" height="400" allowfullscreen src="https://www.youtube-nocookie.com/embed/XXXXXXXXX" >
</iframe>

Promemoria cookie script:

Fonte: https://github.com/Corsidia/it_cookie_law

Per bloccare lo scaricamento, prima del consenso, degli script di servizi esterni che creano cookie, si sostituisce "src" con "data-blocked", in questo modo:
<script data-blocked="file.js"></script>

NOTA: con questa modifica, l'impostazione "async" non può essere implementata, perchè causa errore nella validazione del codice. Questo non è un problema, dato che, al primo caricamento della pagina, lo script esterno viene bloccato e caricato solo dopo il consenso. Non rallenta, quindi, la velocità di caricamento della pagina stessa. L'impostazione "async", non avrebbe più alcuna utilità.
Ai successivi accessi alla pagina, lo script sarà già in cache nel browser e non dovrà più essere ricaricato fino allo scadere del consenso, dopodichè verrà nuovamente bloccato e via di seguito.
Provato, verificato e confermato con Google PageSpeed Insights.
NOTA: il collegamento in CDN alla libreria jQuery non è interessato dal problema e non deve mai essere modificato in alcun modo.
Come pure i collegamenti agli script nativi del sito e necessari alle funzionalità primarie.


Se desiderate la variante dello script che crea un velo su tutta la pagina per impedire la navigazione, potete scaricare il file zip completo, con entrambe le versioni, nelle pagina "Risorse varie".

Per creare un pulsante che cancella il cookie di consenso, uso questo codice:
<input type="button" onclick="eraseCookie()" value="Delete Cookie">


Dato che lo script per il blocco dei cookie utilizza la libreria jQuery che può non essere supportata dalle vecchie versioni di Internet Explorer, è possibile aggiungere un avviso per gli utenti.
Avviso per IE vecchi che non supportano jQuery (da mettere nella zona head):
<!--[if lte IE 6]>
<div style="border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; padding: 10px; position: relative; font-family:'arial', sans-serif;">AVVISO: Stai usando un browser obsoleto e il blocco dei cookie non pu&ograve; essere attuato tramite lo script in uso su questo sito.
<br>Tutti i cookie del sito verranno, quindi, caricati sul tuo browser.
<br>Potrai, se vuoi, cancellarli manualmente dopo aver lasciato il sito.
<br>Per info leggi: <a href="/doc/informativa">Informativa estesa</a>
<div style="position: absolute; right: 4px; top: -18px"><a style="text-decoration:none; font-size: 3.0rem; padding:0" href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'>&Cross;</a></div></div></div>
<![endif]-->


Classic HTML5 layout

Layout classico

Anteprima

Anteprima + download (member only)


Two columns HTML5 layout

Layout a due colonne

Anteprima

Anteprima + download (member only)


Three columns HTML5 layout

Layout a tre colonne

Anteprima

Anteprima + download (member only)


Full page HTML5 layout

Layout full page

Anteprima

Anteprima + download (member only)


Sidebar HTML5 layout

Layout con sidebar

Anteprima

Anteprima + download (member only)


Simple HTML5 parallax layout

Layout parallax semplice

Anteprima

Anteprima + download (member only)


Advanced HTML5 paralax layout

Layout parallax avanzato

Anteprima

Anteprima + download (member only)





NOTA: nel "Layout parallax semplice", l'immagine panoramica di bg a scorrimento può essere sostituita da un'immagine normale ferma, omettendo le regole indicate in rosso (style.css):
.parallax {
    height: 600px;
    background-attachment: fixed;
    background-size: cover;
    background-image: url("../img/bg-para1.jpg");
    -webkit-animation: parallax 500s linear infinite;
    animation: parallax 500s linear infinite;

Special files

File speciali

Il file htaccess

Il file htaccess contiene impostazioni per il server. È indispensabile in qualunque sito web.
Fornisco un esempio da scaricare, con la premessa che deve essere sottoposto all'approvazione di un tecnico del vostro servizio di hosting.
Declino, quindi, ogni responsabilità in caso di funzionamento non corretto per inosservanza di questo avvertimento.
Esempio htaccess (member only)

Il file robots.txt

Il file robots.txt contiene impostazioni per i motori di ricerca.
Fornisco un esempio da scaricare che contiene il permesso di scansione del sito (Disallow:) con le esclusioni di alcune cartelle e l'indicazione del percorso della sitemap.xml
Esempio robots.txt (member only)

Il file sitemap.xml

La sitemap.xml contiene l'elenco delle pagine del sito da scansionare e indicizzare.
Fornisco un esempio da scaricare e completare con tutte le pagine del sito per le quali è richiesta l'indicizzazione.
Disponibile anche un esempio di sitemap per l'indicizzazione delle immagini.
La sitemap potrà poi essere inviata a Google Search Console, o ad altri motori di ricerca.
Esempio sitemap.xml (member only)
Esempio sitemap.xml per le immagini (member only)


Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 

Modulo di contatto per i membri

Argomenti del sito correlati: