Progettazione delle pagine Web

• Le pagine Web sono aumentate rapidamente con l'espansione di Internet.
• Le aziende, le organizzazioni, le persone utilizzano siti Web per condividere informazioni, presentare prodotti, servizi, iniziative e interessi personali.
• Un sito Web è un insieme di pagine collegate relative a un'entità, un argomento o un'azienda.
• I siti Web sono il modo principale per trasmettere informazioni in Internet.
• Un sito Web può includere informazioni, gallerie di immagini e altri contenuti multimediali (suoni, video).

Siti Web Aziendali

• I siti Web aziendali non sono solo statici (testi e immagini), ma possono includere contenuti multimediali, animazioni, cataloghi, moduli di contatto e chat.
• Un sito Web efficace è progettato attorno a un'idea che riflette gli obiettivi del sito e il target di riferimento (età, interessi, competenze dei potenziali visitatori).
• La progettazione del sito inizia con un'analisi di mercato per comprendere le esigenze dei clienti.
• Un'analisi dei concorrenti è essenziale per comprendere cosa offrono e mantenere gli aspetti vincenti, ma anche introdurre innovazioni.
• La struttura e l'estetica del sito sono progettate tenendo conto delle tendenze e dei modi di comunicazione che si adattano al dispositivo utilizzato (PC, tablet, smartphone).
• È fondamentale che le informazioni siano chiare e ben organizzate, evitando eccessive quantità di testi o immagini di dimensioni troppo grandi per evitare tempi di caricamento troppo lunghi per l'utente.
• L'organizzazione degli elementi (layout) è importante per creare una buona esperienza utente.

Elementi di una pagina Web

• Un'intestazione con logo e barra di navigazione.
• Icone dei social network.
• Piè di pagina con informazioni legali e contatti.
• Guida per l'uso del sito e informazioni su collaboratori o sponsor.
• Ricerca interna al sito.
• Links ad altri siti o argomenti correlati.
• Form per inviare feedback o richieste.
• I link permettono di navigare tra le varie pagine del sito Web in un modo non sequenziale e di accedere ad altri siti, secondo i percorsi di consultazione dell'utente.

Web Editor

• I programmi di Web editor possono essere di due tipi:
  • Non visivi: facilitano la scrittura del codice, ma non lo generano automaticamente. Essi colorano i termini chiave, completano il codice automaticamente o segnalano errori grammaticali.
  • Visuali: generano codice HTML utilizzando un'interfaccia visiva, noto anche come WYSIWYG (What You See Is What You Get) in quanto la pagina apparirà uguale a quella che viene visualizzata dall'utente.

HTML (HyperText Markup Language)

• Il linguaggio HTML è il linguaggio di formattazione delle pagine Web.
• I documenti HTML sono visualizzati in un browser.
• I file HTML si distinguono perché hanno estensioni .html o .htm.
• HTML include tag che formattano il testo e definiscono gli elementi in modo preciso e chiaro.
• I tag HTML sono racchiusi tra parentesi angolari, come

  e

  .

• Il linguaggio HTML non è un linguaggio di programmazione, ma di formattazione.
• HTML viene utilizzato per l'organizzazione e la strutturazione di documenti Web, inclusi i collegamenti ipertestuali, gli elementi multimediali e le interazioni con l'utente.

Elementi multimediali

• Le immagini sono rappresentate dal tag con l'attributo src (sorgente).
• Il tag si scrive senza tag di chiusura.
• È possibile usare l'attributo "alt" per fornire una descrizione dell'immagine per utenti che non dispongono di funzionalità grafiche.
• Esistono diversi formati di immagini (GIF, JPEG, PNG).
• I video sono inclusi usando il tag
• Gli audio sono inclusi usando il tag

I form

• I form consentono agli utenti di inviare informazioni al server del sito Web, e sono molto importanti per attività come la registrazione degli utenti, la ricerca, le domande e i questionari.
• Usare un tag di form <form> </form>
• Usare input-tag differenti come testo, password, opzione di selezione o controllo.

Fogli di stile CSS

• I fogli di stile CSS forniscono un modo per separare il contenuto da come viene visualizzato, definendo le caratteristiche esterne, estetiche e di formato.
• Esistono tre metodi di collegamento dei fogli di stile CSS a un documento HTML:
  • Fogli di stile in linea: lo stile viene applicato direttamente a un singolo elemento HTML.
  • Fogli di stile incorporati: lo stile viene inserito direttamente all'interno del documento HTML.
  • Fogli di stile collegati: lo stile definito in un file separato (estensione .css) viene collegato al documento HTML.