MASTERY Project Work Web Design Documentazione
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Web Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
MASTERY
Project Work Web Design
Documentazione
Ricerche e Progettazione Sito
Sezione Generale
Argomento: Mastery
Struttura Sito
• Pagina Principale → Descrizione e Spiegazione dell'Argomento
• Pagine Centrali (CornerStone Content)
▪ Albert Einstein
▪ Larry Page
▪ Leonardo da Vinci
• Pagine Secondarie
▪ Info sul Progetto
▪ FAQs
▪ Sul Progetto
▪ Su Mastery
Sezione Accessibilità
• Check Accessibilità da Mobile: Strumenti per Sviluppatori di Google
Chrome
Check Accessibilità da Altri Dispositivi
Sezione Usabilità
• Risorsa per Check Visibilità: https://contrast-ratio.com/
• Risorsa per Check Design e UX:
Web Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
Sezione Grafica e Design
• Risorsa per Check Ruota
Cromatica: https://www.canva.com/colors/color-wheel/
•
• Tipografia:
Titoli – Lato, Bold, Peso 900, 40pt
Sottotitoli – Lato, Corsivo, Peso 600, 30pt
Testo Principale - Lato, Normale, Peso 300, 20pt
Didascalie e Citazioni – Lato
• Tipo Palette: Triadica
Colore Primario: #8231CE
Colore Secondario: #31CE82
Colore Terziario: #CE8231
Aggiunta della Scala di Grigi per Aumentare la Variabilità
Web Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
Sezione Tecnica – BackEnd
• Strumento Check Velocità: Google
LightHouse https://developers.google.com/web/tools/lighthouse#devt
ools
PageSpeed Insights -
https://developers.google.com/speed/pagespeed/insights/
• Installazione Software Protezione: WordFence
• Installazione Plugin Ottimizzazione Immagini – HummingBird +
AutoOptimize
Sezione SEO e SEM
• Strumenti Check SEO Esterno: Yoast SEO
• Installazione di Google Analytics e dei Google Tools
• Installazione del Tag Pixel e Analytics
• Utilizzo di Google Trends e di Google Ads per la Scelta dei Testi
• Link-Building tramite Iscrizione ai Vari Portali Search Engine
• Condivisione del Sito e delle Pagine sui Gruppi FaceBook per
Generazione Traffico
• Check Tecnico SEO: Yoast SEOWeb Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
Step Creazione del Sito Web
1. Scelta dell’Argomento e del Nome: Mastery – L’Arte del Pensiero
2. Creazione del SottoDominio – mastery.gabrielecarbone.it
3. Creazione di Account Gmail dedicato – mastery0120@gmail.com
4. Creazione della Palette di Colori tramite Canva.com
5. Creazione del Logo del Sito tramite NameCheap.com
6. Installazione Manuale di WordPress
a. Creazione della Tabella PHP con Nome DB, Nome Utente e
Password
b. Download di WordPress dal Sito Ufficiale ed Upload sul Server
tramite FireZilla
c. Procedura di Raccordo DB PHP e WordPress
d. Creazione Account di Amministrazione
7. Pulizia Dati Preesistenti
a. Cancellazione dei Temi PreInstallati
Fatta eccezione per il Tema “Twenty Twenty” per ragioni di
sicurezza
b. Eliminazione dell’Articolo di Default “Ciao Mondo!”
c. Eliminazione del Plugin “Hello Dolly!”
Lasciato “Akismet AntiSpam” per possibile utilizzo futuro
8. Installazione del Tema Scelto: Hello Elementor tramite Menù Dedicato
Motivo della Scelta → Tema e Plugin correlato offrono un alto grado di
flessibilità tecnica e artistica, senza tralasciare gli aspetti di progettazione
improntata all’usabilità e al mobile
Oltretutto il tema di per sé ha pochissime funzionalità, permettendo al
sito di essere estremamente veloce
9. Installazione ed Impostazione dei Plugin Necessari
a. Per gli Slider → MetaSlider
b. Per il SEO → Yoast SEO
c. Per la Sicurezza → WordDefence
d. Per la Suite Google → Google Site Kit
10. Collegamento e Configurazione della Suite Google
a. Google Analytics
b. Google Tag Manager
c. Google Optimize
d. Google Search Console
e. Google PageSpeed Insights
11. Upload Logo e FaviconWeb Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
12. Impostazione della Home come Pagina Statica
13. Raccolta d’Immagini Stock da Librerie Gratuite
Unsplash
14. Creazione del Menù con le Voci Principali
secondo Struttura del Sito
15. Creazione dello Slider per l’Home Page
16. Cambio del Template
Hello Elementor Free non aveva abbastanza flessibilità, specialmente per
quanto riguarda le opzioni del Menù
a. Installazione di Page Builder FrameWork
17. Creazione della Pagina Leonardo da Vinci
a. Installazione del Plugin SmartSlider per Carosello dei Progetti
b. Aggiunta dell’Accordion a fondo pagina
18. Creazione della Pagina Larry Page
a. Ricerca di un Video con una Palette di Colori simile a quella
utilizzata per il Sito
b. Inserimento del Video all’interno della Pagina tramite Elemento
dedicato
19. Creazione della Pagina Albert Einstein
a. Ricerca e Selezione delle Citazioni su Einstein
b. Ricerca delle Immagini necessarie per l’Elemento a metà pagina
20. Creazione della Pagina di Privacy e Cookie Policy
a. Ricerca di una Policy simile a quella necessaria
b. Clonazione ed integrazione della Policy trovata
21. Creazione della Pagina Mastery – Il Concetto
a. Clonazione del Testo dalla Tesina
b. Divisione ed Integrazione del Testo per migliorare la leggibilità
22. Creazione della Pagina Info sul Progetto
a. Creazione della Pagina e Caricamento delle Risorse Collegate
b. Scrittura delle FAQs
23. Aggiornamento del Menù e dei Collegamenti interni al Sito con i link
delle nuove pagine
a. Rimozione della Text-Decoration dei testi linkati tramite CSS inline
24. Aggiunto Plugin per Consenso Cookie tramite Cookie Notice
25. Invio di Traffico di Prova al Sito per Test Plugin Suite di Google tramite
LoadImpact
26. Correzione del Design del Menù tramite CSS codice visibile sotto
“Personalizza”Web Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
27. Controllo Visibilità da Mobile tramite Strumenti per Sviluppatori di
Google Chrome
a. Duplicazione del Ribbon “FAQs”
b. Cambio Posizione di alcune immagini di Sfondo
28. Controllo Interno SEO tramite Yoast SEO
a. Invio della SiteMap completa a Google Search Console
29. Controllo Esterno SEO tramite Strumenti Esterni
a. Check su Tool di Neil Patel - https://neilpatel.com/seo-analyzer/
I. Corretti i Title delle Pagine poiché troppo corti
II. Aggiunte Meta Description tramite Yoast SEO
III. Rimane un errore riguardante la mancanza del protocollo
SSL
b. Check su Tool Site Checker Pro - https://sitechecker.pro/
I. Corretti Titoli con Parole Duplicate
II. Corretti H1 Duplicati in 4 Pagine
30. Controllo Velocità del Sito tramite Google PageSpeed Developer
Criteri – Per tutte le Pagine:
a. Indice Velocità Mobile > 75
b. Indice Velocità Desktop > 90
31. Controllo Performance Sito tramite Google LightHouse
a. Test Mobile – Slow Internet – Throttiling
I. Tutti i controlli passati tranne Performance (35) e Best
Practice (64). Quest’ultimo è dovuto alla mancanza del
Protocollo SSL
b. Test Mobile – Fast Internet – Throttling
I. Tutti i controlli passati tranne Performance (35) e Best
Practice (64)
c. Test Mobile – No Throttling
I. Tutti i controlli passati: Performance 100, Accessibility 93,
Best Practice 64, SEO 99
d. Test Desktop – Stessi risultati del Mobile
32. Controllo Sicurezza tramite WordFence
33. Controllo Accessibilità tramite Contrast Ratio Checker secondo WACG
a. Cambiato Colore Bottoni da #31CE82 a #1AAB43 a causa del
contrasto troppo basso
Contrasto con tra Bianco e #1AAB43 = 3.02 – Passa per le scritte
sopra i 18pt e per quelle sopra i 14pt in grassetto (caso dei
bottoni)Web Design A.A. 2019/2020 Gabriele Carbone
Matricola n°4489575
34. Aggiunta di un Redirect per Correggere Errore MenùPuoi anche leggere
