Le formule magiche

Layout HTML5 di baseBasic HTML5 layout

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

COMUNICATI

26/09/2024 - Le icone dei social sono state aggiornate.
28/04/2023 - Le immagini sono state caricate con il supporto del nuovo formato avif per soddisfare i parametri di Google.
28/02/2022 - Lo script per il consenso dei cookie è stato aggiornato in ottemperanza alle nuove norme di sicurezza dei browser.
NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

Basic layouts ready to customize.

Layout di base pronti da personalizzare

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

Contenuto:
  • index.html
  • altre pagine (solo nei layout che lo richiedono per la funzionalità)
  • cartella styles
  • cartella js
  • cartella img
  • cartella doc (privacy, cookie informative)

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

Opzioni:
  • Sommario dei titoli della pagina
  • Connessione a Google Search Console

Indicazioni:

Il metatag di verifica di Search Console va inserito nella pagina index, prima della chiusura </head>, dove indicato.
Il sommario dei titoli h2 e h3, se desiderato, 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 e sia implementata la regola di stile max-width: 100% (già presente nel file css per tutti gli iframe).
Esempio con iFrame per YouTube:
<iframe width="600" height="400" allowfullscreen src="https://www.youtube-nocookie.com/embed/XXXXXXXXX" ></iframe>


I bottoni dei social hanno funzione overlay e url globale (+ url immagine x Pinterest) da impostare nello script a fondo pagina. Per fornire un esempio chiaro di compilazione, contengono provvisoriasmente gli url di lachiavenelpozzo.com da sostituire. I bottoni non sono funzionanti nelle anteprime.
AGGIORNAMENTO al 15 novembre 2022. Sono state apportate alcune modifiche per soddisfare i nuovi parametri di Google Speed Insights.
Il codice html dei bottoni va compilato, come di seguito, con l'aggiunta del tag title e di href="#".
Il valore href="#" va lasciato così com'è. Fa eccezione il bottone di Instagram e YouTube nel quale va inserito l'URL della pagina relativa, non avendo questi social dei codici di condivisione.
<a title="facebook" class="fb-btn icon icon-facebook" href="#"></a>

Promemoria cookie script: lo script per i cookie è implementato e funzionante. Potete trovare versioni differenti scaricando il file zip completo nella pagina "Risorse varie".

Impostazioni menu su mobile: per i layout: due colonne, tre colonne e full page.
È possibile modificare le regole di stile per far aprire la tendina del menu spostando il contenuto sottostante verso il basso, anzichè sovrapponendovi le voci di menu.
Per ottenere questo risultato, basta attivare le regole indicate e oscurate nel foglio di stile.


NOTA BENE: i layout da scaricare vengono periodicamente aggiornati per essere sempre conformi ai parametri di Google e superarne la validazione. Ciò non viene fatto sui layout utilizzati per le anteprime che sono solo dimostrativi. Per questo motivo, potrebbero esserci leggere differenze di aspetto tra anteprime e prodotti scaricati.

13a-Classic HTML5 layout

13a-Layout HTML5 classico

Preview + download


13b-Two columns HTML5 layout

13b-Layout HTML5 a due colonne

Preview + download


13c-Three columns HTML5 layout

13c-Layout HTML5 a tre colonne

Preview + download


13d-Full page HTML5 layout

13d-Layout HTML5 full page

Preview + download


13e-Sidebar HTML5 layout

13e-Layout HTML5 con sidebar

Preview + download


13f-Horizontal scroll layout

13f-Layout HTML5 a scroll orizzontale

Preview + download


NOTA: attualmente (2020), l'effetto scroll del parallax non è supportato correttamente dal browser Safari dei dispositivi Apple, sia desktop che mobile.
Per questo motivo, nel codice dei parallax avanzati, c'è uno script che annulla l'effetto per tali dispositivi e che potrà essere rimosso quando non più necessario.

13g-Simple HTML5 parallax layout

13g-Layout HTML5 parallax semplice

Preview + download


13h-Simple HTML5 parallax layout with double background

13h-Layout HTML5 parallax semplice con backgound doppio

Preview + download





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

File htaccess

Il file htaccess contiene impostazioni per il server. È importante per qualunque sito web su server NCSA compatibili che supportano moduli mod_write (come Apache).
Fornisco un esempio da scaricare, con la premessa che deve essere sottoposto all'approvazione di un tecnico del vostro servizio di hosting.
htaccess example (member only)

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
robots.txt example (member only)

File sitemap.xml

La sitemap.xml contiene l'elenco delle pagine del sito da scansionare e indicizzare.
Per info sulla sitemap.xml leggi anche: Indicizzazione del sito
Fornisco un esempio da scaricare e completare con tutte le pagine del sito per le quali è richiesta l'indicizzazione.
Inoltre: esempio di sitemap per immagini, esempio di sitemap index (per più sitemap).
Per i video consulta la guida ufficiale: https://developers.google.com/search/docs/advanced/sitemaps/video-sitemaps?hl=it
La sitemap potrà poi essere inviata a Google Search Console o ad altri motori di ricerca. L'indicazione di scansione può essere inserita nel file robots.txt.
sitemap.xml example (member only).

Membership index


Argomenti del sito correlati:
Leggi tutto
Mappa del sito
Mappa del sito