Obiettivi del percorso formativo
Il corso “Web Development con HTML, CSS e WordPress” è mirato alla formazione di un profilo professionale in grado di operare all’interno del Web, utilizzando le tecniche base di creazione delle pagine HTML con codice puro e attraverso l’utilizzo dei cosiddetti CMS (Content Management System). All’interno del percorso, verranno analizzate le caratteristiche della SEO, in modo da fornire alla figura professionale tutte le nozioni per poter pubblicizzare ed ottimizzare i contenuti presenti nelle pagine.
Programma didattico
1– I MOTORI DI RICERCA E GOOGLE
- quando nascono i motori di ricerca e perché?
- ottobre 1998: nasce Google, lo sviluppo in venti anni di un gigante del web- Cenni storici e numeri;
- come si è evoluto? Come funziona Google?
- i crawler e “Googlebot”;
- l’algoritmo di Google: come funziona, cosa dobbiamo conoscere;
- tutte le funzionalità del motore di ricerca più famoso al mondo e le ultime novità: da “Risposte” a “Percorsi”;
- “The Keyword”, il blog di Google da seguire.
1A– INTRODUZIONE ALLA SEO
- che cos’è la SEO? E se invece parliamo del SEO?
- glossario fondamentale della SEO;
- la differenza tra indicizzazione e ottimizzazione;
- le query e la SERP di Google;
- page rank: che cos’è e come si calcola;
- le “Keyword”, le parole chiave da inserire nei contenuti;
- strategie per “aggredire la long tail”;
- la snippet di Google: come lavorare bene su questo contenuto fondamentale;
- il titolo SEO e la meta description;
- la cassetta degli attrezzi per chi si occupa di SEO;
- la SEO off page e il link building;
- la nuova SEO e il web semantico.
2– INTRODUZIONE ALL’HTML
- nozioni di base di HTML;
- analisi introduttiva sulla sintassi del linguaggio html e sui tag che lo compongono;
- struttura base di una pagina HTML;
- analisi dei tag principali che compongono la struttura di una pagina HTML.
2A– GESTIONE DEL TESTO E DELLE IMMAGINI CON HTML
- analisi dei tag html utilizzati per la gestione del testo;
• collegamenti ipertestuali;
• tipologie di collegamenti ipertestuale;
• gestione delle immagini con html5.
3– I FOGLI STILE CSS
- introduzione ai fogli stile css;
• analisi introduttiva sui fogli stile css;
• formattare il testo con i fogli stile css;
• gestire gli sfondi e i bordi degli elementi con il css;
• regole di impaginazione di un sito web.
4– STRUMENTI DI FOTORITOCCO
- Apprendimento degli strumenti fondamentali per l’elaborazione di immagini in Photoshop: livelli, strumenti di ritocco, correzione di prospettiva, HDR, livelli di regolazione ed effetti speciali, conversione del bianco e nero, strumenti e metodi di selezione, metodi di fusione.
5– ELEMENTI DI GRAFICA EDITORIALE
- utilizzo dei software Illustrator ed Indesign: Grafica bitmap e grafica vettoriale;
- area di lavoro, strumenti di selezione, strumenti di disegno dei tracciati, strumenti di cancellazione;
- il testo;
- strumenti di trasformazione;
- strumenti di colorazione;
- il concetto di aspetto;
- i livelli;
- gestione delle immagini;
- gli effetti;
- gestione avanzata dei pennelli;
- il nuovo strumento;
- forme dinamiche;
- lo strumento penna con anteprima.
6– STRUMENTI E TECNICHE DI OTTIMIZZAZIONE DEI CONTENUTI
- le regole d’oro per scrivere un contenuto in ottica SEO: titoli, paragrafi, tag, metadati, header, gli elenchi puntati, i bold e link interni;
- come ottimizzare al massimo una foto con i metadati;
- gli strumenti che il web mette a disposizione (gratuiti e professionali): da Google Search Console a SemRush;
- come creare traffico verso il sito aziendale attraverso la qualità e il valore dei contenuti;
- realizzazione di contenuto in ottica SEO;
- valutare la user experience sul sito con contenuti ottimizzati: gli strumenti fondamentali.
7– GOOGLE ANALYTICS
- lo strumento fondamentale per chi lavora nel marketing digitale;
- la dashboard di Analytics: le funzioni più utili per utilizzare al meglio questa piattaforma e profilare il pubblico del sito/blog;
- gli alert personalizzati, la segmentazione dell’audience e i tracciamenti delle conversioni.
8– LA SEO IN WORDPRESS
- perché utilizzare WordPress per la realizzazione di un sito Web di successo;
- gli strumenti necessari per i WebMaster;
- ottimizzazione dei file Robots.txt;
- gestione dei plugin necessari da integrare.
9– WORDPRESS
- installazione di WordPress: utilizzo di un semplice manuale per poter installare in totale autonomia lo strumento;
- scaricare WordPress, creare un utente FTP (nozioni base di concetto di FTP);
- installare un database MySQL, introduzioni ai concetti di un database e in particolare dell’architettura MySQL Alternative di installazioni e manuali completamente free;
- inserimento dei contenuti: pagine, articoli e media (immagini, video e documenti), imparare la differenza tra articoli e pagine, inserire, modificare commentare e eliminare un articolo;
- impostazione dei menù di navigazione, le categorie.
10– REALIZZARE UN PROGETTO CON WORDPRESS
- realizzazione e pubblicazione di un sito personale o aziendale con WordPress;
Verranno proposti alla classe alcuni casi studio specifici per la realizzazione di un progetto, che verrà analizzato, sviluppato, pubblicato e modificato. Il progetto verrà analizzato dalla parte SEO per la scelta della chiavi, la scrittura dei TAG e il contenuto chiave da pubblicare.
comandi rapidi di Visual Studio Code
maiusc ! e poi TAB per avere la struttura base di una pagina html
oppure scrivo html (senza simbolo<) e scelgo dalla lista htm5 e poi invio (questo se si ha estensione Emet attivata)
———————————————————————
DUPLICARE
ALT MAIUSC FRECCIA GIù
si può fare anche per più righe basta selezionare più righe
———————————————-
SPOSTARE
ALT E FRECCIA SU O GIù
in questo caso si sposta
———————————————
ctrl + Enter
da qualunque posizione in una riga mi porta ad una riga in basso vuota
(alternativa il tasto fine e poi invio)
———————————————–
ALT MAIUSC F (occorre prettier?)
per formattare html
———————————————
per salvare? ctrl S (ma ho verificato che si salvano lo stesso i file anche senza questo comando)
_________________________________________
ctrl ù per trasformare un testo selezionato in un commento
——————————————————
<!– per scrivere un commento