Aggiunta guida navigazione al readme e alla pagina di index. Modifica…

…to stile.

README.md

@@ -6,7 +6,26 @@ Le materie trattate fanno parte della laurea in informatica dell'Università deg
 ### Come posso accedere agli appunti?
 Puoi scaricarli direttamente da questo repository ed eseguirli nel tuo browser.
 Oppure puoi accedere al sito, senza scaricare niente sul tuo computer: [link](https://davidefalco.github.io/appunti-informatica/).
-### Guida alla navigazione degli appunti (da scrivere)
+### Guida alla navigazione degli appunti
+Per chi conosce Obsidian, la navigazione è identica a quella dell'applicazione stessa per computer.
+Per chi non lo conoscesse, di seguito una breve guida all'uso. <br>
+Se scorrete più avanti nella pagina, troverete dei link che vi rimandano a dei _punti di ingresso_ alle pagine con gli appunti per ciascun capitolo/parte della materia.
+Una volta aperti tali link vi troverete di fronte una schermata come quella che segue. <br>
+
+- Il riquadro numero 1 serve per abilitare/disabiltiare la modalità scura.
+- Il riquadro numero 2 serve per aprire/chiudere la sidebar a sinistra.
+- Il riquadro numero 3 serve per aprire/chiudere la sidebar a destra.
+
+![schermata principale](./images/tutorial_1.png)
+
+La sidebar di sinistra elenca tutti i capitoli nella cartella della materia selezionata. 
+Mentre la sidebar a destra (utlima foto) mostra il grafo tipico di Obsidian. 
+Il grafo fornisce una visuale grafica di come sono collegati i documenti/argomenti tra di loro.
+Tra una pagina e un'altra vi imbatterete sicuramente in dei link che vi collegano con altri argomenti.
+La sidebar a destra contiene anche un riassunto dei contenuti della pagina in cui vi trovate.
+
+![sidebar di destra](./images/tutorial_2.png)
+
 ### Degni di nota
 Gli appunti verranno, per quanto mi è possibile nel tempo, continuamente aggiornati e sistemati, da un punto di vista organizzativo, ma anche ortografico e sintattico. Vi prego di perdonarmi per eventuali errori ortografici e/o grammaticali.
 # Appunti disponibili al momento</h1>
@@ -30,9 +49,9 @@ _Accedendo a uno dei capitoli qualsiasi, dalla navigazione della sidebar di sini
 **Libri**: Sicurezza dei computer e delle reti (William Stallings), Computer and Internet Security - a hands-on approach (Wenliang Du)<br>
 _Per redirigere questi appunti (dato il contenuto streminzito delle slide) ho dovuto approfondire gli argomenti su altri testi come: Building Internet Firewalls and Web Security e Network Security Essentials - applications and standards e il libro di reti (citato sopra)_ <br>
 **Parte 00**: [cifrari simmetrici](https://davidefalco.github.io/appunti-informatica/sicurezza/00-cifrari-simmetrici/cifrario-start-point.html)<br>
-**Capitolo 2**: [DES e AES](https://davidefalco.github.io/appunti-informatica/sicurezza/01-des-e-aes/cifrari-a-flusso-e-cifrari-a-blocchi-start-point.html)<br>
-**Capitolo 3**: [cifrari asimmetrici](https://davidefalco.github.io/appunti-informatica/sicurezza/02-cifrari-asimmetrici/introduzione-start-point.html)<br>
-**Capitolo 4**: [computer security e internet security](https://davidefalco.github.io/appunti-informatica/sicurezza/03-network-security-e-software-security/sicurezza-delle-reti-e-dei-software-start-point.html)<br>
+**Parte 01**: [DES e AES](https://davidefalco.github.io/appunti-informatica/sicurezza/01-des-e-aes/cifrari-a-flusso-e-cifrari-a-blocchi-start-point.html)<br>
+**Parte 02**: [cifrari asimmetrici](https://davidefalco.github.io/appunti-informatica/sicurezza/02-cifrari-asimmetrici/introduzione-start-point.html)<br>
+**Parte 03**: [computer security e internet security](https://davidefalco.github.io/appunti-informatica/sicurezza/03-network-security-e-software-security/sicurezza-delle-reti-e-dei-software-start-point.html)<br>
 _Accedendo a uno dei capitoli qualsiasi, dalla navigazione della sidebar di sinistra, si riesce ad accedere a tutti gli altri, tra di esse è disponibile una cartelle "Esami vecchi" in cui sono contenute vecchie domande di esami e possibili soluzioni (da me elaborate, in continuo aggiornamento)._
 
 ### Se ti piace il mio lavoro, offrimi un caffè

index.html

@@ -31,6 +31,26 @@ <h3>Cos'è questo sito?</h3>
                 </p>
                 <hr>
                 <h3>Guida alla navigazione degli appunti (da scrivere)</h3>
+                <div class="tutorial">
+                    <p>Per chi conosce Obsidian, la navigazione è identica a quella dell'applicazione stessa per computer.
+                        Per chi non lo conoscesse, di seguito una breve guida all'uso. <br>
+                        Se scorrete più avanti nella pagina, troverete dei link che vi rimandano a dei <em>punti di ingresso</em> alle pagine con gli appunti per ciascun capitolo/parte della materia.
+                        Una volta aperti tali link vi troverete di fronte una schermata come quella che segue. <br>
+                        <img src="images/tut_1.png" alt="tutorial-1">
+                        Per visualizzare meglio l'immagine potete aprirla in un'altra finestra.
+                        <ul>
+                            <li>Il riquadro numero 1 serve per abilitare/disabiltiare la modalità scura.</li>
+                            <li>Il riquadro numero 2 serve per aprire/chiudere la sidebar a sinistra.</li>
+                            <li>Il riquadro numero 3 serve per aprire/chiudere la sidebar a destra</li>
+                        </ul>
+                        La sidebar di sinistra elenca tutti i capitoli nella cartella della materia selezionata. Mentre la sidebar a destra (foto in basso) mostra il grafo
+                        tipico di Obsidian. Il grafo fornisce una visuale grafica di come sono collegati i documenti/argomenti tra di loro.
+                        Tra una pagina e un'altra vi imbatterete sicuramente in dei link che vi collegano con altri argomenti.
+                        La sidebar a destra contiene anche un riassunto dei contenuti della pagina in cui vi trovate.
+                    </p>
+
+                    <img src="images/tut_2.png" alt="tutorial-2">
+                </div>
                 <hr>
                 <h3>Degni di nota</h3>
                 <p>Gli appunti verranno, per quanto mi è possibile nel tempo, continuamente aggiornati e sistemati, da un punto di vista organizzativo, ma 

style.css

@@ -75,6 +75,14 @@ body{
     margin-right: auto;
 }
 
+.tutorial img[alt="tutorial-1"]{
+    width: 100%;
+}
+
+.tutorial img[alt="tutorial-2"]{
+    width: 40%;
+}
+
 /*@media only screen and (max-width: 768px){
 /*@media only screen and (-webkit-min-device-pixel-ratio: 3.5){*/
 @media all and (max-width: 768px){