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

28/04/2023 - Le immagini dei template sono state caricate con il supporto del nuovo formato avif per soddisfare i parametri di Google. 31/03/2022 - Per i template personalizzati provvisti di modulo di contatto: sui dispositivi mobili, il foglio di stile dello user agent può contenere regole che determinano il colore dei campi input. Consigliato aggiungere il colore del testo (con il colore preferito) per la classe .button nel file contact.css (Es: color: #000 !important;).
28/02/2022 - Lo script per il consenso dei cookie, in uso nei template, è 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
  • pag1.html (solo nei layout con parallax)
  • 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, 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.
Esempio con iFrame per YouTube:
<iframe width="600" height="400" allowfullscreen src="https://www.youtube-nocookie.com/embed/XXXXXXXXX" >
</iframe>


I bottoni dei social sono implementati con funzione overlay e global url da impostare nello script a fondo pagina. I collegamenti non sono funzionanti in anteprima.
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: trovate tutte le indicazioni sull'implementazione dello script per il blocco dei cookie scaricando il file zip completo nella pagina "Risorse varie"

Impostazioni menu su mobile: per i template: 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 e i template 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 hanno solo lo scopo di dimostrazione visiva. Per questo motivo, potrebbero esserci leggere differenze tra la grafica delle anteprime e i 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


13i-Advanced HTML5 paralax layout

13i-Layout HTML5 parallax avanzato

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;

Custom template examples (downloadable)

Esempi di template personalizzati (scaricabili)

  • Home page + 1 pagina.
  • Pagine documenti
  • Modulo di contatto
  • Bottoni social con url globale
  • Script per il blocco dei cookie

NOTA BENE: i layout e i template 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 hanno solo lo scopo di dimostrazione visiva. Per questo motivo, potrebbero esserci leggere differenze tra la grafica delle anteprime e i prodotti scaricati.

13l-Template 1

Preview + download

13m-Template 2

Preview + download

13n-Template 3

Preview + download

13o-Template 4

Preview + download



Useful files

File utili

Html map

Mappa html

html map example (member only)


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, oltre ad inserire l'indicazione di scansione nel file robots.txt.
sitemap.xml example (member only).

Membership index


Argomenti del sito correlati: