Guida rapida a Visual Studio Code

In questo breve tutorial vi mostrerò il mio setup di Visual Studio Code e come poterlo utilizzare al meglio per migliorare il vostro workflow.

 

…appunti…

Highlighting del testo

VS Code evidenzia con colori diversi la presenza dei tag, così come più o meno ci apparivano nella developer tools del browser.

Abbreviazioni

All’interno di VS Code è presente

Navigare tra i contenuti della pagina

In questa ultima lezione vediamo come navigare tra i contenuti della pagina attraverso gli anchor tags, ovvero quegli elementi che ci permettono di creare ipertesti in una pagina web.

Fino ad ora abbiamo fatto uso degli anchor tags per spostarci da una pagina all’altra, ma cosa devo fare se intendo puntare ad una determina sezione della stessa pagina? Ipotizzate di avere un articolo particolarmente lungo e che la vostra intenzione sia quella di creare un indice ipertestuale che vi permetta di raggiungere comodamente l’inizio di ciascun paragrafo.

Per navigare tra i contenuti della pagina possiamo ricorrere all’attributo id, che è possibile applicare ad un qualsiasi tag. Grazie a questo attributo possiamo specificare il nome dell’elemento verso cui il link deve puntare. Potete quindi dichiarare la destinazione del link, specificando nell’href l’id dell’elemento.

Vediamo passo-passo come creare questo sistema in modo da comprendere meglio il funzionamento dei link interni e capire come navigare tra i contenuti della pagina.

1. Creo l’indice ipertestuale

<a href="#html-per-principianti">HTML Per principianti</a>
<a href="#guida-rapida-vscode">Guida rapida a VScode</a>
<a href="#design-di-app-figma">Design di app con Figma</a>

Osservate con attenzione i valori specificati per gli attributi href. Quello che dovrebbe risaltare subito ai vostri occhi è la presenza del carattere che precede l’ID dell’elemento a cui punta il link. Attraverso questo carattere comunichiamo al browser di non cercare risorse nella directory del sito, ma di ricercare all’interno di quella pagina un elemento che abbia quell’id.

Quindi, <a href="#html-per-principianti">HTML Per principianti</a> non è altro che un link che cercherà all’interno della pagina web un elemento che abbia specificato nell’attributo id il valore html-per-principianti.

2. Creo i contenuti

<h1 id="html-per-principianti">HTML PER PRINCIPIANTI</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

<h1 id="guida-rapida-vscode">Guida rapida a VScode</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

<h1 id="design-di-app-figma">Design di app con Figma</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

Come potete notare, ho deciso di applicare ad ogni titolo di ciascun paragrafo un attributo id. In questo modo ho impostato sui titoli i punti di destinazione dei relativi link presenti nell’indice. Ciò significa che al click sul link: Guida rapida a VScode, l’utente verrà correttamente indirizzato all’inizio del paragrafo e più precisamente in corrispondenza del titolo.

Sito Web Old School [Parte 6]

Avete creato i vostri articoli blog come suggerito nella scorsa lezione? Benissimo, adesso siete pronti per rendere il tutto molto più user friendly! Inserite sotto l’immagine thumbnail del vostro articolo un indice interattivo che permetta di raggiungere determinate sezioni della pagina. Permettere agli utenti di navigare tra i contenuti della pagina vi consentirà di avere una maggior tempo di permanenza sul sito, perché i visitatori avranno modo di raggiungere più facilmente ciò che cercano.

Ricordate che molto pagine web non sono fatte per essere lette, ma consultate. Avete pochissimo tempo per comunicare le informazioni che l’utente cerca. Se non saprà come trovarle entro pochi secondi, sceglierà di tornare su google e ricercherà quelle informazioni sul sito di un vostro competitor.

Congratulazioni! Avete completato la guida introduttiva al linguaggio HTML. Adesso siete più che pronti per entrare nel vivo dello sviluppo e conoscere gli elementi più complessi.

Nelle prossime settimane troverete online la seconda parte di questa guida intitolata HTML5 Per esperti, dove toccherete con mano tutti gli elementi legati all’ultima versione dell’HTML. Il mio consiglio nel frattempo è di approfittate di questo periodo per mettervi alla prova con i concetti che abbiamo affrontato nel corso di queste lezioni provando a creare diversi siti Web Old School e sperimentando diverse modi e approcci nella navigazione fra le pagine web o l’inserimento di risorse esterne.

Potete inoltre affinare le vostre competenze ricercando sulla rete anche altro materiale! Vi saluto postandovi qui sotto una serie di link che trattano in modo diverso gli argomenti che abbiamo affrontato nel corso di questa guida.

Vi invito inoltre ad iscrivervi alla newsletter qui sotto per ricevere la notifica via mail che vi comunicherà esclusivamente la pubblicazione della guida HTML5 Per esperti.

Ciao e alla prossima! 😀