HTML5
Le principali novità dell’html5 (tag e attributi) sono:
– Tag semantici (main,
header, footer, section, article, aside )
– Attributi per i form
– tag per disegnare (svg, canvas)
– tag multimediali (audio, video)
Riguardo alle API javascript le novità sono:
– HTML Geolocation
– HTML Drag and Drop
– HTML Local Storage
– HTML Application Cache
– HTML Web Workers
– HTML SSE
Per usare i nuovi tag nelle versioni <= 9 bisogna usare questo script all’inizio della pagina:
<script>document.createElement(“nomeTag”)</script>
in realtà dalla versione <= 8 così riceverete un errore javascript, la soluzione da usare è l’utilizzo di HTML5Shiv:
<head<span style=”color:mediumblue”>>
<!–[if lt IE 9]>
<script src=”/js/html5shiv.js”></script>
<![endif]–>
</head<span style=”color:mediumblue”>>
(guardare le inclusioni particolari)
Perchè nuovi elementi semantici? Per rendere il codice più leggibile sia dalla parte del lettore che dalla parte dei browser e dei motori di ricerca. Perchè sempre più spesso venivano usati id come main/footer/header e quindi serviva qualcosa che standardizzasse tutto questo.
Tag section: definisce delle “sezioni”, cioè dei gruppi tematici in cui è suddivisa la pagina.
Article: definisce una parte “a sè” della pagina che parla di qualcosa di specifico. Degli articoli si possono trovare all’interno di una section, dato che una sezione può parlare di una tematica generale e gli articoli parlano di singoli fatti relativi a quelle tematica. Dentro un articolo a sua volta può esserci una sezione dedicata a un approfondimento se una particolare tematica riguardante l’articolo.
Footer: viene messo in fondo a un sito, sezione o articolo. All’interno possiamo trovare informazioni meno importanti o comunque secondarie (nome dell’autore, link meno importanti collegati al gruppo di cui il footer fa parte).
header specifica l’intestazione di un sito, di una sezione o di un articolo. Serve per introdurre qualcosa (un sito, una sezione/tematica, un articolo)
nav: specifica un gruppo dove all’interno troveremo dei link di navigazione
aside: solitamente per la barra laterale. Se si trova all’interno di un tag main, probabilmente conterrà qualcosa relativo al sito in generale. Se si trovano all’interno di una section, probabilmente conterrà qualcosa inerente alla tematica di quella sezione.
Lista dei nuovi tag e attributi dell’HTML5: file:///Users/xxx/Desktop/html5/HTML5%20New%20Elements.htm
Responsive
Usare sempre meta name “viewport” in modo che il sito si adatti bene sui vari device
<meta name="viewport" content="width=device-width, initial-scale=1">
Non creare mai blocchi generali con dimensioni fisse. Questo potrebbe creare problemi, sopratutto potrebbe dover richiedere dello scroll in orizzontale
nei dispositivi con pochi px in larghezza. Usare quindi delle dimensioni relative, tipo 100%.
In alternativa possiamo regolare le dimensioni usando le media query:
<link rel="stylesheet" href="print.css" media="print">
o scritte direttamente all'interno del file ".css":@media print {
/* print style sheets go here */
}
@import url(print.css) print;
Questa tabella è utile per i riferimenti di quando vengono applicate le media queries:
min-width |
Rules applied for any browser width greater than the value defined in the query. |
max-width |
Rules applied for any browser width less than the value defined in the query. |
min-height |
Rules applied for any browser height greater than the value defined in the query. |
max-height |
Rules applied for any browser height less than the value defined in the query. |
orientation=portrait |
Rules applied for any browser where the height is greater than or equal to the width. |
orientation=landscape |
Rules for any browser where the width is greater than the height. |
min-width si basa sulla dimensione della finestra, min-device-width si basa sulla dimensione dello schermo del device
Usare unità di misure relative (percentuale) per fare layout fluidi.
Per le media query, utilizzare dei break-point sensati.
Link di approfondimento: file:///Users/xxx/Desktop/Responsive%20Web%20Design%20Basics%20%C2%A0_%C2%A0%20Web%20%C2%A0_%C2%A0%20Google%20Developers.htm https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=en#css-media-queries
media types:
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that “reads” the page out loud
media queries possiamo fare condizioni riferendoci alle dimenisoni della finestra, o del device, o della densistà dei pixel o modalità portrait o landscape