I linguaggi del web - seconda edizione (2° giornata)

I linguaggi del Web – 2ª Ed. (2° Giorno)

Diego La Monica – Web Solution Developer
Email: me@diegolamonica.info
Web: http://diegolamonica.info
Twitter: http://twitter.com/jast/
Slide Share: http://slideshare.net/diego.la.monica/
Skype: diego.la.monica
Mobile: +39 333 7235382

Chi sono?
● Web solution developer
● Membro di IWA/HWG
● Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009

2
● Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per
conto di IWA/HWG
● Autore del tool “Wi.Li.” http://wili.diegolamonica.info
● Autore del framework JavaScript “JAST” http://jastegg.it
● Autore del framework PHP “ALPHA”
http://github.com/diegolamonica/ALPHA/

I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it

Il programma della giornata

Modulo 2 – Stili e Crossbrowsing
 Cos'è uno stile

3
 Come si può descrivere lo stile di un elemento
 Una cascata di... colori
 Separare l'informazione dalla sua presentazione
 Rendere la regola cross-browser
 L'accessibilità sempre in testa!


Il programma della giornata

Modulo 3 – Javascript
 Cos’è Javascript

4
 Document Object Model
 Browser Object Model
 Graceful degradation
 Progressive enhancement


Nota sulla slide

Nell'angolo inferiore destro di alcune slide è
presente un “pallino” come è visibile in

5
questa slide.
Esso indica che per la slide è prevista una
sessione pratica.


Modulo 2 – Stili & Crossbrowsing

 Cos'è uno stile
 Come si può descrivere lo stile di un elemento

6
 Una cascata di... colori
 Separare l'informazione dalla sua presentazione
 Rendere la regola cross-browser
 L'accessibilità sempre in testa!


Cos'è uno stile

È una regola che descrive la presentazione di uno
o più elementi (tag) presenti su un documento.

7
border: 1px solid red; Regola di stile

background-color: #ffe; Proprietà

font-size: 2em ; Valore

Color: #800 ; Separatore


Stilizzare un elemento #1

Stile “in linea”:

8
<div style="border: 1px solid red">

Lorem Ipsum dolor sit amet

</div>


Stilizzare un elemento #2
Stile “sulla pagina”:
<style type="text/css">
div{

9
border: 1px solid red;
Selettore
Color: #f00;
Background-color: #ffe;
}
</style>


Stilizzare un elemento - 3
● Può fornire informazioni sulla
pagina (es. link di navigazione).
Stile “separato dalla pagina”: ● Può riferirsi aun foglio di stile
(rel="stylesheet")
● Può riferirsi per esempio a una
copia stampabile della pagina

10
corrente (rel="alternate"
media="print")
<link rel="stylesheet"
href="mioStile.css"
Definisce l'URL del media="screen" />
foglio di stile

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv


Descrivere lo stile di un tag
h1{
display: block;
text-indent: 1em;

11
}

div{
font-family: Verdana, Arial, Sans-serif;
font-size: 0.8em;
}


Attributi speciali id e class
<div id="mio-div">Lorem Ipsum</div>
Riferimento univoco
sul documento
<div class="altro-elemento">

12
Dolor Sit Identifica elementi
con caratteristiche
</div> presentazionali simili

<p class="altro-elemento">
Amet
</p>


Stile in base a id e class

#mio-div{ ← In base all'ID
…

13
}

.altro-elemento{ ← In base alla Classe
…
}


Una cascata di colori
p{ … } ← Applicato a tutti i paragrafi

div p{ … } ← Applicato a tutti i paragrafi

14
che sono sotto un DIV

div p.myclass{ … } ← Applicato a tutti i
paragrafi con classe
myclass sotto un DIV


Separare la presentazione dal contenuto
“Usare i fogli di stile per controllare la presentazione dei contenuti e
organizzare le pagine in modo che possano essere lette anche quando i
fogli di stile siano disabilitati o non supportati.”
DM 8 Luglio 2005 – Requisito n. 11

<style type="text/css">
@import "myStyle.css"
</style>
15
<link rel=”stylesheet” type=”text/css” href=”myStyle.css” />

Oppure:


Rendere la regola cross-browser
Ciascun browser interpreta alcune caratteristiche dei CSS indicate
nella documentazione W3C in modo arbitrario.

Talvolta le caratteristiche vengono implementate solo da alcuni di essi.

16
border-radius: 5px; ← Specifica per angoli arrotondati in CSS3

-moz-border-radius: 5px; ← Versione dello stile definita da
Mozilla (non consente la validazione del CSS)

-webkit-border-radius:5px ← Versione supportata da Safari e

Chrome (non consente la validazione del CSS)

Cross-browser... offuscato...

Una caratteristica trattata secondo interpretazione
soggettiva è la trasparenza:

17
opacity: 0.9; ← Indica che l'opacità dell'oggetto è del 90%.

Su Internet Explorer non funziona…

Filter: opacity(alpha=90); ← Versione funzionante per IE...
ma il CSS non viene validato


Per pochi... solo per IE...
Per consentire a Internet Explorer di caricare dei
contenuti che gli altri browser non dovranno
interpretare è necessario utilizzare dei tag di

18
commento strutturati in modo particolare:

… per Opera, Safari, Chrome, Firefox …
Utilizzare selettori di dispositivo (Media Queries) più
articolati (però si tratta di caratteristiche di CSS 3):

19
href="/style.css" media="all and (color)">

http://www.w3.org/TR/css3-mediaqueries/

Anche Internet Explorer 9 supporta le Media Queries

… e per tutti gli altri?
Secondo Microsoft per servire delle parti di HTML
a tutti browser ad eccezione di IE è necessario
utilizzare la seguente sintassi:

20
<![if !IE]> … <![endif]>

Ma il markup diventerà invalido... Soluzione?

href="all-browsers.css" />

Codici condizionali di IE
Operatore Descrizione
IE Identifica Internet Explorer o se seguito da un numero è
un vettore di versionamento
lt “Less Than” = Minore Di

21
lte “Less Than Equal” = Minore o uguale a
gt “Greater Than” = Maggiore di
gte “Greater Than Equal” = Maggiore o uguale a
! Negazione (NOT)
&,| Operatori And e Or
() Raggruppamento di sottoespressioni
True, False Costanti booleane Vero Falso


Problema: il “Box Model”
According to the CSS1 specification,
released by the World Wide Web
Consortium (W3C) in 1996 and
revised in 1999, when a width or

22
height is explicitly specified for any
block-level element, it should
determine only the width or height of
the visible element, with the padding,
borders, and margins applied
afterward.

Il “Box Model”: la soluzione
<div class=”esterno”> annidare due box,
<div class=”interno”>
Lorem Ipsum definire in quello
</div> più esterno un width
</div>
pari alla larghezza

23
che si vuole abbia il
box, e in quello più
interno solo il
Lorem Ipsum
padding ed il border
desiderato.

CSS 3 – A che punto siamo?
Caratteristiche supportate Internet Explorer 6, 7 e 8
● word-wrap

linear-gradient (utilizzando dei filtri proprietari)

24
●

● Alcune trasformazioni (utilizzando filtri proprietari)

● Opacity (utilizzando filtri proprietari anche se un po' tutti
fino a poco fa lo facevano)

● @font-face

Caratteristiche supportate dai browser attuali
(Internet Explorer 9, Opera 10+, Firefox 3.5+, Chrome e Safari 3+)
● box-sizing (funziona anche in IE8) ● Multiple Backgrounds

25
● border-radius ● Background-clip
● box-shadow ● Background-origin
● Colori nel formato RGBA ● Background-size
● Colori nel formato HSLA ● Transforms
● Media Queries


Caratteristiche supportate dai browser attuali
(ad eccezione di IE9)
● text-shadow

26
● border-image
● outline-offset
● transizioni (non disponibili in Firefox 3.x; aggiunte in Firefox 4+)


L'accessibilità sempre in testa
● Rispetto degli standard
● Aumentare la semantica
Perchè?

27
● Per garantire alle tecnologie assistive di poter fruire i contenuti
● Perchè accessibilità e usabilità viaggiano di pari passo
● Perchè i motori di ricerca non guardano... Leggono!
“Fare web e come partecipare ad un gioco: Standard, Accessibilità e Usabilità
sono solo alcune delle sue regole. Nessun gioco è bello se non si seguono le
regole!”

Riferimenti sul web
● Specifiche CSS2: http://www.w3.org/TR/CSS2/
● Box Model: http://www.w3.org/TR/CSS21/box.html
● Roadmap CSS3: http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/

28
● Supporto dei CSS3: http://www.impressivewebs.com/css3-browser-support/
● Supporto della caratteristica opacity:
http://www.impressivewebs.com/css-opacity-reference/
● Aderenza di IE ai CSS:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
● Datasheet sulle caratteristiche CSS3 supportate da IE9:
http://www.impressivewebs.com/css3-support-ie9/

Modulo 3 – Javascript


Cos'è Javascript
● Javascript è un linguaggio di scripting lato client
● Basato sullo standard ECMAScript
Il nome deriva dalla somiglianza strutturale della

30
●

grammatica di Java
● Ciascun vendor ha implementato la sua versione
● Quasi tutti i browser supportano Javascript
● Tuttavia bisogna pensare anche a chi non lo supporta

Il terminatore di riga
Ogni istruzione può terminare con un “;” oppure

con la sequenza di caratteri CR+LF (oppure solo

31
LF), salvo eccezioni
var xyz = 123; //Riga terminata con “;”

var abc = “ciao mondo” // Riga terminata senza “;”

var abc = 1 +

2; // l'eccezione

Commentare il codice

// Commento su singola linea

/*

32
Commento su più linee

*/
/**
* Commento in formato javadoc
*/


Blocchi condizionali - if
Per descrivere dei blocchi di codice si usano “{” e “}”.

“If” esegue un blocco di codice se la condizione

33
“expression” si verifica. Altrimenti esegue l'“alternativa”

if(expression){
…
} else {
…
}


Blocchi condizionali - switch
Controlla se l'espressione assume uno dei possibili valori

switch(expression){
case(value1):
…

34
break;
case(value2):
…
break;
default:
…
break;
}

Cicli iterativi
Blocco di codice ripetuto fino al verificarsi di una precisa
condizione.
for(var i=0; i<100; i++){
…

35
}

for(keys in object){
…
}

while(i++<100){
…
}

Gli array

L'elemento di un array è referenziato tramite un indice
descritto tra parentesi quadre.
var myArray = new Array();

36
myArray[0] = 1;
myArray[1] = “lorem ipsum”;
myArray[2] = true;
Esistono inoltre array Associativi
myArray[“chiave”] = 123;


Gli oggetti
I metodi e le proprietà di un oggetto sono referenziate

tramite “.”
alert(document.title)

37
window.location.href = “http://192.168.0.1/index.htm”

Ma un oggetto in Javascript equivale ad un array

associativo:

document['title'] == document.title

Cosa sono gli oggetti
Ogni cosa in JavaScript è o un valore primitivo o un oggetto. Gli oggetti sono
entità dotate di unicità (sono uguali solo a sé stessi) e che associano nomi di
proprietà a valori.
function Home(){
this.windows = 8;

38
this.doors = 1;
this.flors = 2;
this.doorIsOpened = false;
function openDoor(){
this.doorIsOpened = true;
}
…
}

var home = new Home();
alert(home.doorIsOpened?'La porta è aperta':'La porta è chiusa');
home.openDoor();
alert(home.doorIsOpened?'La porta è aperta':'La porta è chiusa');


Estendere gli oggetti
● Javascript è un linguaggio orientato a oggetti basato su
prototipi
● l'ereditarietà è fra oggetti, non fra classi.

39
● gli oggetti ereditano le proprietà dai loro prototipi.
● si possono aggiungere ulteriori proprietà o metodi ai
singoli oggetti dopo la creazione.
● ogni oggetto del linguaggio espone una proprietà conosciuta
come prototype.


JSON (da http://www.json.org/ )

JSON is a lightweight data-interchange format. It is easy for
humans to read and write. It is easy for machines to parse and

40
generate. It is based on a subset of the JavaScript Programming Language

,Standard ECMA-262 3rd Edition - December 1999. JSON is a text format
that is completely language independent but uses conventions
that are familiar to programmers of the C-family of languages[…].
These properties make JSON an ideal data-interchange language.


Stringhe in JSON

41

Numeri in JSON

42

Array con JSON
Array indicizzato:

[ 1, 2, 3,
4, 5 ];

43
Array associativo:

{
'cat': 'foo',
'dog': 'bar'
}


Oggetti con JSON
var coords = {
X: 100,
Y: 110,
Z: 25,
movePoint: function(offsetX,offsetY,offsetZ){
…

44
},
getPoint: function(){
return {
x: this.X,
y: this.Y,
z: this.Z
}
}
}

Document Object Model
● È la struttura di un documento
HTML/XML esposto sotto forma di
oggetto a Javascript

45
● Ogni elemento ha delle caratteristiche
comuni agli altri e alcune
“specializzazioni”
● Esistono nodi di tipo TextNode
● E nodi di tipo HTMLNode


Metodi principali del DOM
element.getElementById(<nodeid>)

Restituisce il nodo del DOM che ha come
attributo id il valore specificato per <nodeid>

element.getElementsByTagName(<tagname>)

Restituisce un array di elementi del DOM il
cui tag è <tagname>.
46

Manipolazione degli attributi
element.setAttribute(<attribute name>, <value>)

Imposta il valore dell'attributo <attribute name> per l'elemento
element

element.getAttribute(<attribute name>)

Restituisce il valore dell'attributo
element. 47
<attribute name> per l'elemento


Navigazione tra i nodi

element.parentNode
Restituisce il nodo padre del nodo element
element.firstChild

48
Restituisce il primo nodo nella struttura del DOM figlio di element.
element.lastChild
Restituisce l'ultimo nodo nella struttura del DOM figlio di element.
element.childNodes
Restituisce in un array tutti i nodi figli di element.


Creare e collocare nodi nel DOM
document.createElement(<element type>)
Restituisce un elemento di tipo HTML. <element type> corrisponde al
tag name dell'elemento.
document.createTextNode(<text content>)

49
Restituisce un nodo di tipo testo impostando come contenuto il valore
specificato.
element.appendChild(<new node>)
Imposta come ultimo figlio di element nella struttura del DOM il nodo
<new node> che equivale a un oggetto creato con una delle funzioni
createElement oppure createTextNode.

Rimuovere un nodo del DOM

element.removeChild(<child node>)
Elimina il nodo <child node> figlio di element.

50
var element = document.getElementById('the-div');
var elementFirstChild = element.firstChild;

// Rimuovo il primo nodo figlio di element
element.removeChild(elementFirstChild)


Definire il valore di un nodo

Rispettando le specifiche W3C:
element.nodeValue = "Lorem Ipsum"
Imposta il valore del nodo element.

Non rispettando le specifiche W3C:
element.innerHTML = "<strong>Dolor sit amet</strong>"
Imposta il valore HTML dell'elemento element.
51

Cos'è un evento?

Invocazione di un metodo al verificarsi
di una data condizione (click del mouse,

52
pressione tasto della tastiera).

Ciascun nodo del DOM espone una serie
di eventi intercettabili da javascript


Tipi di eventi
Eventi generati da azioni svolte con il mouse
● onclick, ondblclick, onmousedown, onmouseup, onmouseover,

onmouseout, onmousemove

Eventi generati dall'interazione utente/tastiera

53
● onkeypress, onkeydown, onkeyup

Eventi della pagina, dei frame e degli object
● onload, onunload,onresize, onerror, onabort

Eventi scatenati dall'interazione con un modulo (form)
● onselect, onchange, onsubmit, onreset, onfocus, onblur


Intercettare un evento
Modalità inline:
<a href="#" onclick="alert('ciao mondo');">ciao</a>

Modalità classica:
element.onclick = function(){ alert('ciao mondo'); };

54
Modalità avanzata suggerita W3C:

element.addEventListener(
'click',
function(){
alert('ciao mondo');
});


Manipolare lo stile

Impostando direttamente lo stile sull'elemento:
element.style
Tramite element.style è possibile modificare tutte le proprietà di stile

55
dell'elemento applicate tramite CSS.

Impostando una classe di stile:
element.className = "example-class"


Browser Object Model (BOM)
● window (la finestra del Browser)
● document (il DOM)
● frames

56
● history (la cronologia della sessione corrente)
● location (la barra degli indirizzi del Browser)
● navigator (proprietà dello User Agent)
● screen (lo schermo del client)

Oggetto window
Proprietà Metodi
● window.status ● window.open(url, nome, prop)
la barra di stato del browser apre una finestra
● window.location
la pagina visualizzata nella finestra ● window.close( )

57
● window.location.href chiude una finestra
l'url della pagina visualizzata
● window.parent
● window.history.go(n)
la finestra contenitore avanti e indietro nella storia
● window.top
la finestra principale
● window.self
la finestra della pagina stessa
● window.history
la storia di navigazione

Graceful degradation

● Si progetta per la massa
● Si cura successivamente la minoranza

58
● Esempi pratici:
● Testo alternativo dell'immagine
● Tabelle per il layout
● Elemento <noscript></noscript>


Progressive Enhancement – cos'è?

● Progettazione strutturale
● Si parte da una “versione di base”

59
● Progressivamente si verificano le capacità del
browser per esporre nuove e più evolute
funzionalità


Progressive Enhancement – uso #1

● Pagina HTML

Viene caricato il contenuto informativo della pagina

60
●

● Se il browser supporta i fogli di stile caricherà anche gli

stylesheet definiti nel documento (Progressive

Enhancement)



● Menu a tendina
● Il menu viene presentato come un elenco puntato

61
● Se Javascript è disponibile vengono caricati i CSS e

creati eventuali altri nodi del DOM (Progressive

Enhancement)



● Validazione Form
● La validazione avviene lato server

62
● Se Javascript è disponibile viene effettuato il

controllo anche lato client (Progressive

Enhancement)



●
Caricamento AJAX di contenuti
● Viene caricata la pagina con link alle risorse

63
● Viene intercettata la richiesta (Evento click e
keypress), caricati i contenuti parziali e annullato
l'evento per evitare che ci sia il caricamento
completo della pagina (Progressive Enhancement)


Wi.Li. - Link esterni discrezionali
●
Caricamento pagina
● La pagina viene presentata con i comportamenti
predefiniti su ciascun link

64
● Viene creata una selezione per sapere se i link
devono essere caricati nella finestra corrente o in
una nuova finestra e generati gli handler per
intercettare l'evento. (Progressive Enhancement)


I linguaggi del Web (2° Giorno)

Diego La Monica – Web Solution Developer
Email: me@diegolamonica.info
Web: http://diegolamonica.info
Twitter: http://twitter.com/jast/
Slide Share: http://slideshare.net/diego.la.monica/
Skype: diego.la.monica
Mobile: +39 333 7235382

I linguaggi del web - seconda edizione (2° giornata)

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Semelhante a I linguaggi del web - seconda edizione (2° giornata)

Semelhante a I linguaggi del web - seconda edizione (2° giornata) (20)

Mais de Diego La Monica

Mais de Diego La Monica (20)

I linguaggi del web - seconda edizione (2° giornata)