Come ho creato il mio sito di Odontoiatria Legale e Forense

Blog, Computerese

Una delle mie passioni è diventata finalmente una professione. Spiego come ho creato il mio sito di Odontoiatria Legale e Forense, disponibile su https://legale.zarli.it/

Dopo aver frequentato un Master di specializzazione in Odontoiatria Legale presso l’Istituto Stomatologico Toscano, ho trasformato questa mia passione in una professione.

Ora serviva un sito che illustrasse questa parte importante della mia attività, spiegando in parole semplici cos’è l’Odontoiatria Legale e Forense.

Per le mie esigenze non serviva un sito completo come il mio blog, ma era sufficiente una sola pagina suddivisa in sezioni, praticamente una Landing Page.

Per una pagina di questo tipo sono sufficienti HTML5 e CSS3, ma per renderla più accattivante mi sono appoggiato alle librerie di Bootstrap, aggiungendo anche del Javascript.

Volendo cimentarsi in questa avventura, esistono dei corsi gratuiti ad esempio su W3Schools Online Web Tutorials

Ho iniziato a scorrere i template gratuiti di Bootstrap, ma la mia idea era diversa. Con il prezioso aiuto di Laura, abbiamo focalizzato le diverse sezioni della pagina e scritto i contenuti.

Ho copiato le sezioni da template diversi, tutti ottimizzati per dispositivi mobili ed il risultato ci ha soddisfatto. Andiamo nel dettaglio.

Header

La prima sezione è un “header fullscreen”, munita di tasto per passare alla prossima sezione per chi non scrollasse la pagina. Lo scroll viene reso fluido dal tag “scroll-behavior:smooth;”

Completa questa sezione una barra di navigazione che rimane fissata in alto e si rimpicciolisce quando si scorre la pagina con i tag “navbar navbar-dropdown navbar-fixed-top navbar-expand-lg” ed il classico avviso dei cookies con il tag “navbar fixed-bottom”.

Con javascript l’avviso viene nascosto quando la pagina scrolla più di 15 pixel:

<body onscroll='scrollHide();'>
<script>

	var oneShot=true;
	var scrollCount=0
	
	function scrollHide() {
		if (oneShot) {
			scrollCount++;
			if (scrollCount > 15) {
				hide('GDPR');
			}
		}
	}


	function hide(id) {
		if (oneShot) {
			document.getElementById(id).remove();
			oneShot=false;
		}
	}
	
	</script>

Sezioni informative

Nelle sezioni successive con le spiegazioni delle competenze dell’Odontoiatria Legale e Forense alterno delle normali sezioni con sfondo bianco a quelle con sfondo scorrevole utilizzando jarallax con il tag “img class=jarallax-img” per l’immagine di sfondo. Già le opzioni di default sono molto eleganti e non mi è sembrato il caso di esagerare.

I visitatori hanno poco tempo per leggere. Per limitare la verbosità delle sottosezioni, ho utilizzato delle sezioni collassabili, che si aprono e chiudono con un pulsante.

<a class="btn" data-target="#testo" data-toggle="collapse">Leggi di più</a>
<div id="testo" class="collapse">
    testo da nascondere
</div>

In questo caso il pulsante apre/chiude la sottosezione con il testo più esplicativo.

FAQ

Per le FAQ di Odontoiatria Legale e Forense, dove parlo anche di prezzi e risarcimenti, ho scelto un altro template con due colonne su schermi grandi ed una sola su schermi piccoli.

Lo stesso template l’ho usato per le note personali, in cui ho riassunto la mia carriera professionale con un curriculum breve.

Ho corredato le note da un bel ritratto che mi ha fatto Laura, con un’espressione seria da Odontoiatra Legale e Forense.

Footer

Concludo la pagina con il contatto email, copyright autoaggiornante con javascript e la famosa Cookie policy, anche questa usando la classe “collapse” ed il pulsante magico come per le note informative.

Ancora una spruzzata di Google Analytics utilizzando le chiare istruzioni del sito e la pagina è servita!

Augurando che la mia esperienza possa aiutare, ecco il risultato sul mio sito di Odontoiatria Legale e Forense https://legale.zarli.it/

Loading