Stampa Scarica il PDF
HTML CSS

Che cos'è HTML?

  • Comprendere i tag HTML
  • Comprendere CSS (Cascading Style Sheet)
  • Perché utilizzare HTML con Notepad++?
  • Scelta della versione di HTML
  • Perché utilizzare HTML5?

Nozioni di base su HTML

  • Visualizzare file HTML
  • Aprire e modificare una pagina Web con Notepad++
  • Anteprima di una pagina Web in un browser Web
  • Eseguire, salvare e visualizzare le modifiche

Tag e proprietà di base

  • Differenze tra Tag aperti e chiusi
  • Differenze tra Tag in linea e di blocco
  • Il colore di sfondo
  • Immagine di sfondo
  • Margini delle pagine
  • Il tag di paragrafo
  • Il tag span
  • Il tag di intestazione
  • Il tag di interruzione
  • Stili del testo
  • Il tag font

Utilizzare elenchi e sfondi

  • Creare elenchi puntati e numerati
  • Elenchi nidificati
  • Cambiare il carattere del numero o del simbolo di spunta
  • Creare elenchi di definizione

Creare collegamenti ipertestuali e punti di ancoraggio

  • Creare un collegamento ipertestuale a una pagina Web
  • Utilizzo di percorsi relativi e assoluti
  • Impostare la finestra di destinazione
  • Creare un collegamento ipertestuale a un indirizzo di posta elettronica
  • Creare collegamenti ipertestuali su punti di ancoraggio
  • Creare collegamenti ipertestuali verso altri contenuti

Sintassi delle regole CSS

  • Differenze sintattiche tra linguaggio HTML e linguaggio CSS
  • Associare regole CSS a documenti HTML
  • Fogli di stile incorporati
  • Fogli di stile esterni
  • Fogli di stile importati

Selettori CSS2

  • Selettore universale
  • Selettore di tipo
  • Selettore d'attributo
  • Selettore class
  • Selettore id
  • Pseudoclassi
  • Pseudo-elementi
  • Combinatori
  • Raggruppamento di selettori

Selettori CSS3

  • Selettori di attributo
  • Pseudoclassi :enabled e :disabled
  • Pseudoclassi
  • Pseudo-elementi
  • Combinatore di precedenza

Nuove regole CSS3

  • Web font
  • Text-shadowColori RGBA
  • La proprietà Opacity
  • Sfondi multipli
  • Gradienti
  • Border-radius
  • Overflow-x e Overflow-y
  • Box-shadow
  • Trasformazioni
  • Transizioni
  • Animazioni
  • Media query
  • Media feature

La struttura di una pagina Web in HTML5

  • Elemento HEADER
  • Elemento FOOTER
  • Elemento ARTICLE
  • Elemento SECTION
  • Elemento NAV
  • Elemento ASIDE
  • Altri elementi
  • Microdata

Creare tabelle

  • Creare una tabella semplice
  • Specificare la dimensione di una tabella
  • Specificare la larghezza di una colonna
  • Unire celle di una tabella
  • Usare le tabelle per il layout di pagina

Formattare tabelle

  • Applicare bordi alla tabella
  • Applicare bordi usando gli attributi
  • Applicare bordi usando gli stili
  • Applicare riempimenti di sfondo e del testo
  • Modificare il padding, la spaziatura e l'allineamento di una cella
  • Impostare il padding di una cella
  • Impostare la spaziatura di una cella
  • Impostare l'allineamento orizzontale e verticale

Creare form utente

  • Creare un form
  • Creare una casella di testo
  • Campi speciali per indirizzi Web e di posta elettronica
  • Creare una casella di testo multiriga
  • Creare un pulsante Submit (Invia) o Clear (Cancella)
  • Aggiungere il testo predefinito o segnaposto
  • Creare caselle di controllo e pulsanti di opzione
  • Altri tipi di input in HTML5

Form HTML5

  • I nuovi tipi di elementi input
  • Controlli di data e ora
  • Datalist
  • Attributi

Inserire jQuery

  • Perchè utilizzare jQuery
  • Inserire uno slider immagini
  • Importare i fogli di stile
  • Impostare il div
  • Inserire il codice javascript
  • Modificare il comportamento di default dello slider
  • Aggiungere didascalie

Fruibilità di un sito Web

  • Cosa vuol dire fruibilità
  • Pianificare la fruibilità
  • Abbozzare l'organizzazione del sito
  • Progettare un modello di pagina coerente
  • Progettare il contenuto di singole pagine
  • Testare la fruibilità

Accessibilità di un sito Web

  • Linea guida 1: fornisci contenuti alternativi equivalenti sia per i contenuti visivi sia uditivi
  • Linea guida 2: non affidarti solo ai colori
  • Linea guida 3: utilizza markup e fogli stile e fallo in maniera appropriata
  • Linea guida 4: rendi chiaro l'utilizzo naturale della lingua
  • Linea guida 5: crea tabelle che si trasformino con grazia
  • Linea guida 6: assicurati che le pagine che danno evidenza a nuove tecnologie si trasformino con grazia
  • Linea guida 7: assicurati che sia modificabile il controllo dei contenuti sensibile al tempo
  • Linea guida 8: assicura l'accessibilità diretta di interfaccia utente incorporata
  • Linea guida 9: progettare per l'indipendenza dal dispositivo
  • Linea guida 10: utilizza soluzioni ad interim
  • Linea guida 11: utilizza le tecnologie W3C e le linee guida
  • Linea guida 12: fornisci informazioni di contesto e orientamento
  • Linea guida 13: fornisci meccanismi di navigazione chiari
  • Linea guida 14: assicurati che i documenti siano chiari e semplici

Nozioni di base sui siti per dispositivi mobili

  • Analisi dell’esperienza utente
  • Analisi dell’esperienza utente
  • Impatto su conversioni e interazione

Incrementare la velocità dei siti per dispositivi mobili

  • DOM e CSSOM
  • Struttura di rendering e layout
  • Analisi del percorso di rendering critico
  • Ottimizzare i contenuti
  • Memorizzazione nella cache http

Creare un’esperienza utente efficace sui dispositivi mobili

  • Valutare un sito per dispositivi mobili esistente
  • Best practice per la progettazione
  • Principi di navigazione e ricerca
  • Inserimento dati nei moduli
  • Usabilità
  • Testare e misurare il successo

Tecnologie web avanzate

  • Accelerated Mobile Pages
  • Progressive Web App
  • Service worker e API
  • Push web e notifiche
  • Integrazione dei magamenti

© Copyright 2017. Microsales