3. The Tecnology
Come è noto HTML e CSS sono i due acronimi che
racchiudono il DNA dell'interattività in ambito Web. A
fine anni 90 divennero raccomandazioni e da allora
abbiamo a disposizione HTML4.01 e CSS2.
L'evoluzione è passata da XHTML ovvero HTML riscritto
con le ferree regole dell'XML (noto metalinguaggio molto
apprezzato anche in ambito umanistico per la marcatura
delle risorse digitali). XHTML è stato subito preso in
mano dagli sviluppatori e la sua diffusione è stata
capillare. Il nostro modulo, di stampo pratico, utilizzerà
suddetti Mark-Up per creare pagine web interattive
soffermandoci sul web semantico, approdo ancora in
essere ovvero: HTML5; oltre che allo studio dei CSS3.
4. HTML5 e CSS3 sono già più che sufficientemente
supportati dai browser di ultima generazione e quindi già
pronti ad essere usati per modellare le proprie opere
(vedremo di volta in volta il supporto).
Il nuovo linguaggio rappresenta una rivoluzione con
novità consistenti, alcune scelte sono discutibili, ma va
apprezzato il pragmatismo che ha guidato la definizione
del nuovo standard ovvero: meglio far diventare
specifica tutto ciò che prima tutti comunque utilizzavano
come buona prassi.
In HTML5 la semantica viene stabilita a priori e diviene
standard condiviso.
The Tecnology
6. The Tecnology
L'immaginazione incontra l'implementazione.
HTML5 non è ancora una raccomandazione,
ma è destinato a divenire la pietra angolare
del World Wide Web, HTML5 è il linguaggio
di marcatura destinato a sostenere
l'evoluzione e a favorire il pieno potenziale
che il web ha da offrire. Siamo di fronte a
una rivoluzionaria raccolta di strumenti a cui
HTML5 fornisce un ricco vocabolario. Data di
rilascio, salvo sorprese, a fine 2014
http://www.w3.org/html/logo/
7. HTML5 Semantics
Verrà dato un senso alla struttura: la semantica è davanti e al centro di
HTML5. Un ricco insieme di tag consentono una più utile gestione dei dati
sia per i programmi sia per gli utenti.
8. Offline & Storage
Le Web Apps si avvieranno più velocemente e potranno lavorare anche off-
line, grazie alla HTML5 App Cache, così come alla memorizzazione locale
dei dati.
9. Device Access
Cominciando con le API di Geolocalizzazione, le Web App potranno
dialogare con diversi Device e saranno in grado di riconoscere
caratteristiche ed esperienze utente.
10. Multimedia
Audio e Video saranno cittadini di prima classe nel web ripensato da
HTML5, gli elementi multimediali vivranno in armonia con le Applicazioni.
11. 3D, Graphics & Effects
Con il supporto a SVG, Canvas, WebGL, CSS3 con funzionalità 3D,
potremo stupire gli utenti con una grafica mozzafiato resa nativamente dal
browser dando l'addio plug-in (si vedrà...)
12. CSS3 Styling
CSS3 offriranno - ma già offrono - una vasta gamma di stili e effetti,
migliorando le Applicazioni Web senza sacrificare la struttura semantica o
la performance. Inoltre il Web Open Font Format (WOFF) fornirà una
flessibilità e un controllo tipografico mai visto prima.
13. Seppure a fronte di un crescente supporto da parte dei
browser per HTML5, non mancano alcune voci critiche
che invitano a raffreddare facili entusiasmi soprattuto a
causa di alcuni browser un po' ritardatari; per iniziare a
lavorare con HTML5 può essere perciò d'aiuto sondare il
supporto di una data funzionalità utilizzando:
• http://caniuse.com
• http://html5readiness.com
• http://html5test.com
• http://mobilehtml5.org
Compatibilità e gestione delle
incompatibilità
14. Identificazione delle funzionalità, buona idea...
seguendo questa filosofia, Modernizr, nota libreria
Javascript, testa in maniera booleana le funzionalità
restituendo vero o falso.
• Modernizr: verifica il riconoscimento di specifiche
funzioni.
• Excanvas: abilita Internet Explorer all'utilizzo delle
funzionalità di <canvas>; anche se sembra ancora da
verificare la sua efficacia lo segnalo comunque.
• Close-pixelate: consente particolari soluzioni artistiche.
• Popcorn: aggiunge sottotitoli ad un filmato, progetto in
rapida evoluzione...
Compatibilità e gestione delle
incompatibilità
15. Queste librerie Javascript per la compatibilità appena
viste consentono, in questo periodo di transizione, prima
che il supporto definitivo di HTML5 su tutti i browser
diventi realtà, consento l'uso di HTML5 e sopperire
all'eventuale mancato supporto.
La promessa di queste soluzione è di poter utilizzare da
subito le funzioni di HTML5 senza dover revisionare il
codice in futuro: quando il supporto sarà definitivo
basterà disabilitare le librerie.
Compatibilità e gestione delle
incompatibilità
16. Con Modernizr, per esempio, il test per verificare il
suppporto video diventerebbe:
<script>
if(Modernizr.video) {
/* codicecon video supportato */
} else {
/* codice alternativo per mancato
supporto */
</script>
Le correnti norme dell'HTML5 non specificano quali formati video i browser
debbano supportare nel tag video. Pertanto ad oggi essi possono
supportare qualunque formato che i loro sviluppatori ritengano appropriato.
Il Dibattito sul formato unico è molto interessante ed è paradigmatico di
molte diatribe informatiche.
Compatibilità e gestione delle
incompatibilità
17. In breve: in questa fase di transizione alcune specifiche
HTML5 sono utilizzaibili subito mentre altre presentano
ancora un supporto ancora limitato, partendo da queste
considerazioni abbiamo visto Modernizr:
"Modernizr is an open-source JavaScript library that
helps you build the next generation of HTML5 and
CSS3-powered websites."
• http://modernizr.com
• https://github.com/Modernizr/Modernizr
Compatibilità e gestione delle
incompatibilità
18. In sintesi: utili elementi da tenere in considerazione
sono:
1. le tabelle di compatibilità viste prima
2. prevedere una strategia per la gestione delle
incompatibilità, ovvero ragionare in termini di retro-
compatibilità, strategia fondamentale per non
scontentare percentuali di utenti
http://browsershots.org
Compatibilità e gestione delle
incompatibilità
20. Semantica di HTML5
Chi viene da studi umanistici sa che la
semantica è quella branca della linguistica
che studia il significato delle parole, nel
nostro caso la semantica e riferita ai <tag>
che si spogliano di ogni implicazione
stilitistica e di formattazione. Qualcuno si
ricorda <blink> e <marquee>, chi viene da
XHTML ben conosce la distinzione struttura/
formattazione, con HTML5 questa distinzione
diviene ancora più evidente.
21. Per la costruzione del layout all'inizio si
utilizzavano le tabelle, ma è una modalità del
secolo scorso, la sostituizione di queste con i
<div> ha migliorato di molto la situazione, gli
sviluppatori si facevano però facilmente
prendere la mano nidificando in maniera
compulsiva <div> neutri che, grazie a div id
e div class, sono richiamati dai selettori CSS.
Anche le tecnologie assistive beneficieranno di
tale semantica e si ipotizza a breve un impatto
negli algoritmi di indicizzazione.
Semantica di HTML5
22. <!DOCTYPE html>
Una delle novità di HTML5 è il doctype corto ovvero: <!
doctype html> o doctype dtdless, che essendo privo
di indicazioni sulla DTD (Document Type Definition) o
sul linguaggio utilizzato, forza automaticamente il
browser in modalità standard senza l’aggiunta di
ulteriore codice.
<meta charset="UTF-8">
La codifica dei caratteri avviene specificando un charset
valido per il documento che sostituisce il precedente:
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
Chi ben comincia...
23. Per il collegamento a file esterni (Script e CSS) si usano
sempre i tag <script> e <style> ai quali però si può
omettere l’attributo “type”; nel caso dei fogli stile, quando
si utilizza il tag <link> occorre aggiungere l’attributo
“rel”:
<script>// script interno</script>
<script src="js/javascriptesterno.js"></
script>
<style>/* Foglio di stile interno */</
style>
<link href="css/fogliodistileesterno.css"
rel="stylesheet“>
Collegamenti
24. HTML5 semplifica la scrittura del Mark-Up fornendo un
nuovo vocabolario semantico che attribuisce significato
a tutti gli elementi che definiscono la struttura del
documento e che erano resi attraverso i <div> e
attraverso gli attributi id e di class, ecco alcuni tag:
<section>
<header>
<footer>
<article>
<aside>
<nav>
<video>
<audio>
Un nuovo vocabolario
Naturalmente i <div> restano comunque
validi nel caso in cui sia necessario
introdurre dei contenitori per raggiungere
specifici effetti di impaginazione.
Sostituendo molti dei <div> con gli elementi
semantici che identificano la struttura del
documento si mantiene il codice più pulito,
compatto e comprensibile.
25. Layout con
attributi id e class
utilizzati sia con
HTML 4.01
che con
XHTML 1.0 e 1.1
si trattava di prassi
La costruzione del Layout
in HTML 4.01 e XHTML 1.0 e 1.1
26. Nuovo vocabolario
Nuovi tag
Layout sematico
reso con nuovi
elementi strutturali;
la prassi diviene
specifica;
La costruzione del Layout
in HTML5
27. I nuovi tag
descrizione dei nuovi elementi
della specifica
a.a.
2012/2013
|
Salvatore
Paone
|
salvatore.paone@unifi.it
28. Secondo le specifiche l'elemento header contrassegna
l'intestazione della sezione di un documento,
un’introduzione, eventualmente un <hgroup>, un logo,
uno slogan, la cosiddetta tag-line; è legittimo avere
anche <nav> all'interno:
<header>
<h1><a href="index.html">Titolo
principale della sezione</a></h1>
<p>Scritto da Salvatore Paone</p>
<time datetime="2011-09-28"
pubdate="pubdate"></time>
</header>
Elemento <header>
29. Gli elementi di supporto alla navigazione sono racchiusi
in un tag <nav> dedicato a raccogliere i link della
navigazione principale fornendo un Mark-Up più
rigoroso dal punto di vista semantico di grande aiuto per
gli Screen Reader.
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="faq.html">F.A.Q.</a></li>
</ul>
</nav>
Elemento <nav>
30. Si può dare al tag footer lo stesso modello di contenuto
degli elementi <header> e <nav>, ma rappresentando
il pie' di pagina per la sezione a cui si applica, ma non
deve stare necessariamente al termine della pagina.
<footer>
<nav>
<ul>
<li><a href="faq.html">faq</a></li>
<li><a href="mappa.html">Mappa</a></li>
</ul>
</nav>
</footer>
Elemento <footer>
31. Demarca un insieme di contenuti fra di loro logicamente
correlati, come le sezioni di una home page come
Contatti, News... Esso cmq non è da intendersi come un
contenitori privo di significato, utilizzato solo per dare
una serie di stili, in quel caso va ancora benissimo
l'utilizzo del tag <div>.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF)
is....</p>
</section>
Elemento <section>
32. Si usa per marcare un contenuto che sia almeno in linea
di principio utilizzabile o distribuibile in modo
indipendente. I tag <article> possono essere
nidificati se vi è una relazione fra il contenuto nidificato e
il contenitore.
Potential sources for the <article> element:
Forum post
Blog post
News story
Comment
Elemento <article>
33. Questo tag marca un contenuto che è in relazione con
l'elemento che lo annida, può essere usato sia dentro
sia fuori il tag <article>:
Se è utilizzato all'interno di <article>, il contenuto
deve essere specifico a tale articolo (ad esempio, note,
suggerimenti, citazioni, glossari o elenchi di link
correlati).
Se è utilizzato come contenitore di qualcosa che si trova
al di fuori del flusso dell’articolo, il contenuto deve
essere relativo all’intero sito (ad esempio moduli di
ricerca, link di navigazione aggiuntiva, ed event.
contenuto pubblicitario se il contesto è relativo alla
pagina).
Elemento <aside>
34. La specifica definisce l'uso del tag <figure> impiegato
per contrassegnare:
"self-contained content, like illustrations, diagrams,
photos, code listings, etc.
While the content of the <figure> element is related
to the main flow, its position is independent of the main
flow, and if removed it should not affect the flow of the
document."
Le informazioni racchiuse da questo tag possono essere
arricchite dal tag <figcaption> creando una
didascalia.
Nuovi elementi
<figure> e <figcaption>
35. In sintesi il tag <figcaption> fornisce una didascalia
al tag <figure>, ecco un esempio:
<figure>
<img src="img_pulpit.jpg" alt="The
Pulpit Rock" />
<figcaption>Fig1. - A view of the
pulpit rock in Norway.</figcaption>
</figure>
Elemento <figcaption>
36. Questo tag raggruppa due o più intestazioni (da h1 ad
h6), tutte le intestazioni così marcata sono trattare al
livello del titolo più importante, ecco un esempio:
<hgroup>
<h1>Stranilivelli</h1>
<h2>Grafica e Web Design</h2>
</hgroup>
Le due intestazioni vengono considerate come un
tutt'uno marcando h2 come un sottotitolo che non va a
interferire con altri h2 presenti nel documento.
Elemento <hgroup>
37. L'elemento demarca data e ora:
<time datetime="YYYY-MM-DDThh:mm:ssTZD">
<p>Erano solo le <time
datetime="2010-10-21T05:00+01:00">5 di
mattina</time> quando ho raggiunto
Milano.</p>
• YYYY - year (e.g. 2011)
• MM - month (e.g. 01 for January)
• DD - day of the month (e.g. 08)
• T - a required separator if time is also specified
• hh - hour (e.g. 22 for 10.00pm)
• mm - minutes (e.g. 55)
• ss - seconds (e.g. 03)
• TZD - Time Zone Designator
Elemento <time>
38. L'elemento <mark> demarca una parte di testo per
enfatizzarne il significato, il browser restituisce il testo
come se fosse evidenziato. La specifica suggerisce ad
esempio l'uso per demarcare una parte di testo
successiva ad una ricerca:
<p>Do not forget to buy <mark>milk</mark>
today.</p>
The <mark> tag defines marked text. Use the <mark>
tag if you want to highlight parts of your text.
Elemento <mark>
39. Alcune importanti novità riguardano anche il tag <a>
soprattutto relativamente ad alcuni annidamenti che
prima non erano accettati; p.e. possono nidificarsi
paragrafi, liste, tabelle e addirittura sezione, basta che
questi non contengano a loro volta pulsanti o altri link.
<a href="http://www.w3schools.com"><p>Do
not forget to buy <mark>milk</mark>
today.</p></a>
Fra un po' vedremo il nuovo attributo target.
Vecchi non più vecchi
Elemento <a>
40. Scopo del tag <address> è di proporre informazioni di
contatto relative all'articolo o al suo contenitore più
diretto.
<address>
Written by <a
href="mailto:salvo@stranilivelli.com">Sal
vo Paone</a>.<br />
Visit us at:<br />
www.stranilivelli.com<br />
Firenza<br />
Italia
</address>
Vecchi non più vecchi
Elemento <address>
41. <b> ovvero bold è stato usato in passato per la
formattazione del testo, ma in HTML5 i tag che avevano
come obiettivo la definizione di stili sono stati sforbiciati,
uno dei pochi a salvarsi è stato <b> assieme ad <i> per
il corsivo, probabilmente per il largo uso in miliardi di
pagine web. Per <b> vi sono evidenti aree di
sovrapposizione con i tag <strong>, <em> e <mark>
mentre <i> ha scenari d'uso più definiti quali le frasi
idiomatiche, termini tecnici, parole straniere.
Vecchi non più vecchi
Elemento <b> e <i>
42. <cite> è una altro caso dibattuto di semantica, indica
come già nelle versioni precedenti citazioni di fonti
esterne al documento. E' stata lungamente dibattuta la
prassi consolidata di marcare anche le persone, il nome,
se "citato". L'argomento è ancora dibattuto e non si
esclude una ulteriore rivisitazione di questo tag.
<p><cite>The Scream</cite> by Edward
Munch. Painted in 1893.</p>
The <cite> tag defines the title of a work (e.g. a book,
a song, a movie, a TV show, a painting, a sculpture...).
Note: A person's name is not the title of a work.
Vecchi non più vecchi
Elemento <cite>
43. <hr> ovvero Horizontal Rule ha avuto un sognificato
visuale che in HTML5 viene meno in quanto
l'interruzione deve essere tematica:
<h1>HTML</h1>
<p>HTML is a language for describing web
pages.....</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML
elements.....</p>
Vecchi non più vecchi
Elemento <hr>
44. <menu> deprecato in HTML 4.01 è stato ripristinato
nella nuova versione del linguaggio per racchiudere una
lista di comandi, sono i valori dell'attributo type che
indicano che tipo di menù sia stato dichiarato.
<menu type="toolbar">
<menu type="context">
<menu type="list">
mentre <label> è utilizzato per dare un nome al menù:
<li><menu label="File"><button
type="button"
onclick="file_new()">New...</button></li>
Ad oggi il supporto è praticamente nullo
Vecchi non più vecchi
Elemento <menu>
45. <small> finora utilizzato per riprodurre il corpo del
testo in maniera più piccola, rimane con HTML5
l'elemento per marcare parti che per contenuto e brevità
possono essere mostrate in piccolo: p.e. le note a
margine o i diritti d'autore.
Differences Between HTML 4.01 and HTML5
Practically none. In HTML 4.01 the small element is
displayed as smaller text. In HTML5 the small element
defines small text and other side comments, and is
displayed as smaller text.
Vecchi non più vecchi
Elemento <small>
46. In HTML 4.01, the <strong> tag defines strong
emphasized text, but in HTML5 it defines important text.
<em>Emphasized text</em>
<strong>Strong text</strong>
Sui vecchi tag riesumati in HTML5 è opportuno fare un
po' di chiarezza nonostante le aree di sovrapposizione
possano esistere.
Approfondimento
Vecchi non più vecchi
Elemento <strong>
47. Html5 è rigoroso! Vuole rafforzare la semantica delle
pagine web, e per farlo deve interrompere una serie di
brutte abitudini degli sviluppatori:
Basta elementi e/o attributi con significato di stile. Per
questo ci sono i CSS
Basta elementi e/o attributi che hanno causato problemi
di accessibilità e usabilità (i famosi frame, frameset, &
co.)
Elementi e attributi non più validi
48. Ecco la lista degli esiliati:
applet, acronym, basefont, big, bgsound, blink, center,
dir, font, frame, frameset, noframes, index, listing,
marquee, multicol, nobr, noembed, nextid, plaintext, rb,
s, spacer, strike, tt, u, xmp
Si veda la sezione ufficiale
Elementi e attributi non più validi
50. Il leader indiscusso della categoria è HTML5 Boilerplate,
un template che racchiude un mix di soluzioni HTML5
cross-compatibili con davvero (quasi) tutti i browser, ma
anche stili CSS e librerie JavaScript a disposizione degli
sviluppatori smaliziati che vogliono un prodotto moderno
e funzionante con le nuove specifiche.
Boilerplate è stato ideato da Paul Irish, membro nella
comunità di sviluppo di Google Chrome e jQuery.
Questa soluzione ha portato grande entusiasmo ed ha
guadagnato un enorme successo tra i gruppi di lavoro.
HTML5 Boilerplate
51. Un altro interessante tool è Initializr, un completo ed
avanzato configuratore per generare un template
HTML5 personalizzato con componenti avanzati e
moduli Javascript d’avanguardia, tra i quali appunti quelli
di Boilerplate. Si può decidere :
1. se inserire codice di esempio di avvio nella pagina
iniziale;
2. se includere script JavaScript o la libreria jQuery;
3. se utilizzare Modernizr o html5shiv;
4. se utilizzare un file di configurazione per il server
(.htaccess, Web.config o nginx.conf).
Initializr
52. Ognuno di questi tools contiene ovviamente un
file di reset (ricordiamo l’importanza di
mantenere un sito web compatibile con tutti i browser
inserendo delle istruzioni CSS in grado di impostare una
visualizzazione comune degli elementi html di una
pagina web).
Il nuovo concorrente della lista è HTML5 Reset, un
nome in grado di competere con Normalize.css. Il
progetto è un insieme di file con una struttura studiata
dai suoi autori per rendere facile e intuitivo lo sviluppo di
applicazioni HTML5, troviamo anche un tema
WordPress HTML5!
HTML5 reset
53. Arrivati a questo punto avremo bisogno di riempire il
documento HTML5 di contenuti e funzionalità. Per farlo
dovrai conoscere i tag e le specifiche delle nuove API:
una risorsa come questa sarà d’aiuto. Si tratta di un
cheatsheet che presenta ciascun tag con una esaustiva
descrizione.
HTML5rocks è un'altra interessante risorsa che propone
svariati esempi di codice e tutorial per apprendere alcuni
dei punti essenziali della tecnologia.
Altre risorse: link e Cheat Sheets
55. CSS3, Novità:
Braccio destro di HTML5
• Strumenti tipografici
• Opacità degli elementi
• Angoli smussati
• Transizioni
• Trasformazioni
• Animazioni
Si usano meno immagini
da usare nei “punti giusti” e
nel modo giusto..
56. a[href^="mailto:"] {text-decoration:none;
color: green; font-weight: bold;}
in questo caso l'attributo devo contenere un "URL
mailto"
<footer>
<a href="mailto:info@stranilivelli.com">
info@stranilivelli.co</a>oppure puoi
compilare il form
<a href="/contattami.php">contatti</a>
</footer>
Nuovi selettori di attributo
57. time[datetime*="-09-"] {color: green;
font-weight: bold;}
viene applicato a tutti i time che presentano un attributo
datatime che abbia quel determinato valore.
<p> Era il <time datetime="2010-09-01">
primo settembre 2010</time> ... </p>
<p>Un mese prima, il <time
datetime="2011-08-01"> primo agosto
2010</time>... </p>
Nuovi selettori di attributo
58. a[href$=".edu"] {color: red; font-weight:
bold;}
viene applicato a tutte le a che presentano un attributo
che termini con quel determinato valore.
<p><a href="http://www.example.edu"
title="edu link">conoscenza</a></p>
<p><a href="http://www.example.com"
title="com link">denaro</a></p>
<p><a href="http://www.example.org"
title="org link">solidarietà</a></p>
Nuovi selettori di attributo
59. Fra le pseudo classi dinamiche:
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
si aggiunge elem:target che agisce
sull'elemento dell'ancora che rappresenta a
destinazione del link.
Esempio 1
Pseudo-classi
60. A List Apart apre la sua sezione sui Web Fonts
scrivendo: "C'è vita dopo Georgia e Verdana"; a
dimostrare la grande attenzione sul modulo CSS3
relativo alla tipografia. La regola @font-face permette
di includere qualunque tipo di carattere aggirando la
limitazione client. Il supporto:
The @font-face rule is supported in Internet Explorer
9, Firefox, Opera, Chrome, and Safari.
However, Internet Explorer 9 only supports .eot type
fonts, while Firefox, Chrome, Safari, and Opera
support .ttf and .otf type fonts.
Note: Internet Explorer 8 and earlier versions, do not
support the @font-face rule.
Web Fonts ed effetti tipografici
61. @font-face {
font-family: MEgalopolisExtra;
src: url(fonts/MEgalopolisExtra.otf);
}
body {font-family: MEgalopolisExtra,
sans-serif;}
La prima dichiarazione assegna un mome al
set di caratteri, la seconda mi indica il
percorso del file .otf; nel caso in cui @font-
face non sia supportato sarà ignorato dal
browser. Esempio 2
Web Fonts ed effetti tipografici
63. Vista la precedente tabella a prescindere dal
supporto a @font-face si dovrà fornire il
carattere nel formato corretto, nel caso di IE
il formato .eot
Strumenti:
http://www.fontsquirrel.com/
http://www.fontsquirrel.com/fontface/
generator
http://www.smeltery.net/
Web Fonts ed effetti tipografici
64. Indispensabile una tecnica di utilizzo cross-browser :
@font-face{
font-family: MEgalopolisExtra;
src: url(/fonts/my_font.eot);
src: local(MEgalopolisExtra), url(/fonts/
my_font.ttf)
format("truetype");
}
.fontface {
font: 16px MEgalopolisExtra, Helvetica,
sans-serif;
}
Web Fonts ed effetti tipografici
65. Altra strategia è cufón - fonts for the
people, permette l’utilizzo di qualunque font
si voglia, oppure Google fonts.
• http://cufon.shoqolate.com/generate/
• http://www.google.com/webfonts
Web Fonts ed effetti tipografici
66. Testo ombreggiato:
fino a poco tempo fa ci si doveva servire di
software grafici, la promessa del text-
property è quella di liberarci da questo
onere fornendo pagine più leggere e
accessibili.
Effetti tipografici
67. Text-shadow è la nuova proprietà di formattazione testi
per il web, introdotta nell’ultima release dei fogli di stile.
Il testo ombreggiato è una novità grafica di facile
implementazione per titoli, sottotitoli e blocchi di testo.
Il markup di realizzazione è facile e immediato:
h1{text-shadow: 2px 3px 3px #ff0000;}
il primo indica lo spostamento dell’ombra in orizzontale
di 2 pixel (asse x), il secondo di 3 pixel in verticale (asse
Y), il terzo definisce la sfocatura e il quarto il colore. I
primi 2 elementi sono obbligatori e vengono sempre
definiti prima in orizzontale poi in verticale. La sfocatura
(blur) e il colore sono invece attributi facoltativi.
Effetti tipografici
68. In realtà giocando con questi valori, p.e.:
h1{text-shadow: 2px 3px 3px #ff0000;}
vediamo come questi siano alla base anche di altri effetti
come il bagliore:
body{background: #000;}
h1{text-shadow: 1px 1px 5px #fff;}
e la sfocatura:
h1{text-shadow: 1px 1px 5px #fff;}
Effetti tipografici
Propietà Browser
text-shadow GC2+, FF3.5+, O9.5+, Safari 3+
69. Per quel che riguarda la compatibilità multipiattaforma,
la proprietà CSS3 text-shadow è supportata in tutti i
maggiori browser ad eccezione del software Microsoft <
IE10. Infatti, CSS3 text-shadow su Internet Explorer
non funziona regolarmente, se non ricorrendo a qualche
piccolo trucco dai risultati poco esaltanti: i filtri proprietari
Glow, Shadow e DropShadow:
<!--[if IE]>p.glowParagrafo {
filter: glow(color=#0000ff,strength=3);
display: block;
width: 100%;}<![endif]-->
Effetti tipografici
70. Un metodo comune era, ed è tuttora, quello di ottenere
le colonne attraverso tanti <div> quanti il numero di
colonne necessarie per poi flottarle a sinistra dando
larghezze con misure relative od assolute.
Il Modulo “Multicolumn layout” dei CSS3, rivoluziona il
mondo dell’impaginazione web rendendola flessibile e
facilitandole l’implementazione e, cosa non da poco,
l'accessibilità, il tutto con poche righe di codice:
*purtroppo il supporto è con prefissi proprietari
Impaginazione del testo in colonne
Argomento Browser
colonne multiple* GC4+, FF3+, Safari4+, Opera
71. div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* S e GC */
column-count:3;
}
oppure
div{
-moz-column-width: 10em;
-webkit-column-width: 10em;
column-width: 10em;
}
Impaginazione del testo in colonne
72. lo spazio fra colonne viene gestito da column-gap
mentre column-rule pone una riga fra le colonne.
div{
-moz-column-width: 10em;
-webkit-column-width: 10em;
column-width: 10em;
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
column-gap: 3em;
-moz-column-rule: 0.3em dotted #ccc;
-webkit-column-rule: 0.3em dotted #ccc;
column-rule: 0.3em dotted #ccc;}
Impaginazione del testo in colonne
73. Un unico modulo CSS3 si occupa della
definizione di bordi e sfondi. Esempio di
compatibilità:
*FF vuole -moz, mentre Safari prima della 5 vuole -
webkit-
Bordi e Sfondi
Proprietà Browser *
border-radius GC5+, FF3.5+, Safari5+, IE9, O10.5
79. La proprietà box-shadow consente di applicare
un'ombreggiatura ad un elemento HTML:
div{
box-shadow: 10px 10px 5px #888888;
}
Sintassi:
box-shadow: h-shadow v-shadow blur spread
color inset;
http://www.w3schools.com/cssref/
css3_pr_box-shadow.asp
Ombreggiatura applicata ai box
80. Per quanto riguarda la compatibilità cross-browser si
ripresentano moz e webkit in quanto in la proprietà e
ben supportata da in IE9+, Firefox 4, Chrome, Opera,
and Safari 5.1.1.
#example1{
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
Esempi: www.css3.info/preview/box-shadow/
Ombreggiatura applicata ai box
81. Il modulo CSS3 relativo a bordi e sfondi permettere di
raggiungere un controllo più raffinato anche sulle
immagini di background, p.e. gli sfondi multipli:
#div{
width: 640px;
height: 210px;
border: 3px solid #ccc;
background: url(http://img/
caffe.jpg) top left no-repeat,
url(http://img/neve.jpg) top right no-
repeat
}
Sfondi
82. Questo modulo CSS3 introduce anche il controllo delle
dimensioni delle immagini grazie alla proprietà
background-size
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
Al solito, accanto alla proprietà nella sua forma
standard, adottare per garantire un'ampia compatibilità
cross-browser la proprietà -moz-background-size a
favore di Firefox e -webkit-background-size a
favore delle meno recenti versioni di Safari.
Sfondi
83. La proprietà background-size permette 4 diverse
modalità di definizione:
Le prime due più immediate:
• Valori Assoluti: p.e. 100px 50px la prima indica la
larghezza, la seconda indica lunghezza.
• Valori relativi: relativi all'elemento contenitore e
vengono indicati in %.
Sfondi
84. Le seconde due più particolari:
Contain: l'img viene ridimensionata per adattarsi all'area
dell'elemento cui viene applicata; mantiene sempre il
suo rapporto di aspetto, la visualizzeremo sempre nella
sua interezza, nessuna parte sarà tagliata, ma alcune
aree dell'elemento potrebbero risultare scoperte.
Cover: l'img viene ridimensionata per coprire
interamente l'elemento a cui viene applicata; in questo
processo possono essere tagliate alcune parti
dell'immagine per adattarla al meglio all'elemento, alle
sue dimensioni e al rapporto d'aspetto di quest'ultimo,
l'elemento sarà sempre coperto nella sua interezza.
http://css.html.it/guide/lezione/5115/background-size/
Sfondi
85. Con opacity è possibile definire il livello di trasparenza
non solo di uno sfondo, ma di qualunque elemento. Di
fatto, come recita la specifica, con opacity regoliamo il
modo in cui un oggetto presente sulla pagina si fonde
nella resa a schermo con lo sfondo. Ogni elemento ha di
default un valore di opacity pari a 1. Se vogliamo
regolare la sua trasparenza, usiamo una scala che va
da 0.0 (oggetto completamente trasparente) a 1
(oggetto completamente opaco):
div{
background:white;
color:black; opacity: 0.5
}
Sfondi
