Piccole, medie e grandi strategie per la presentazione, l'interazione e la manipolazione delle pagine web tramite fogli di stile, client-scripting e uso del DOM.
Community Tour 2009, Microsoft Italia e UGIAL.NET
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
Best practices per lo sviluppo Frontend
1. Best practices per lo sviluppo Frontend
CRISTIANO RASTELLI
WEB & INTERACTION DESIGNER
2. Alcune cose prima di iniziare
Forse le più importanti...
g ood
Best practices
3. Alcune cose prima di iniziare
Forse le più importanti...
ser- side
brow
sviluppo Frontend
4. Alcune cose prima di iniziare
Forse le più importanti...
Piccole, medie e grandi strategie per
la presentazione, l'interazione e la manipolazione
delle pagine web tramite
fogli di stile, client-scripting e uso del DOM.
presentazione visuale tramite CSS
interazione utente tramite JS
manipolazione pagina tramite DOM
5. AGENDA
Di cosa stiamo parlando?
Linguaggi
Demo
“Presentazione”
“Interazione”
“Manipolazione”
Risorse utili
9. Il nostro modello client-server
SERVER
LAYOUT ENGINE
RENDERING MODE VISUAL FORMATTING MODEL
http://
• standard mode BOX MODEL
DOCTYPE • quirks mode • standard W3C
DTD • traditional IE
DOCUMENT OBJECT MODEL
BROWSER
10. Visual Formatting Model
È il modello con il quale viene processato il document-tree
per il rendering verso media visuali.
Ogni elemento del document-tree genera o meno un box il
cui layout grafico è determinato in base a:
tipo e dimensione del box
schema posizionale
relazione con gli altri elementi del document-tree
condizioni al contorno
11. Box Model
È il modello con il quale viene elaborato il layout grafico
del singolo box all’interno del document-tree.
Le dimensioni grafiche del box sono determinate in base a:
dimensione orizzontale/verticale
dimensione del margine esterno
dimensione del padding interno
dimensione del bordo
14. Document Object Model ( )
“A document object model (DOM) is an application
programming interface (API) for representing a document
(such as an HTML document) and accessing and
manipulating the various elements (such as HTML tags and
strings of text) that make up that document.
JavaScript-enabled web browsers have always defined a
document object model.”
Oggi convenzionalmente ci si riferisce al DOM come
rappresentazione del documento in memoria nel browser.
Attenzione: DOM ≠ “Source”
15. Il documento
<html>
<head>
<title>Helo world</title>
</head>
<body>
<h1 id=”stw”>Save the world</h1>
<p>Save the <i>cheer</i> leaders.</p>
</body>
</html>
16. Il documento a oggetti
DOCUMENT
<html>
<head> <body>
ELEMENT
<title> <h1> <p>
Save the
Helo world
world
Save the <i> leaders.
cheer
id
ATTR TEXT
18. Accesso ai nodi
Diretto tramite selettore
.getElementsByTagName('tag')[x]
.getElementById('xxx');
document.getElementsByTagName('h1')[0]
document.getElementsByTagName('p')[3].lastChild
document.getElementById('stw');
19. Gestione dei nodi
Creazione/Modifica/Eliminazione
.createElement('hr')
.appendChild(x)
.removeChild(document.childNodes[3].firstChild)
.createTextNode('lorem ipsum')
var x = document.createElement('span');
var y = document.createTextNode('I am a paragraph');
x.appendChild(y);
document.appendChild(x);
20. Il documento a oggetti
DOCUMENT
span
<html>
I am a paragraph
<head> <body>
ELEMENT
<title> <h1> <p>
Save the
Helo world
world
Save the <i> leaders.
cheer
id
ATTR TEXT
21. Modifica dei nodi
Proprietà degli elementi
.id
.className
.nodeValue
.innerHTML
setAttribute(…)
getAttribute()
removeAttribute(…)
22. Manipolazione del DOM
Abbiamo tramite il DOM il completo accesso agli
elementi del documento. Questo vuol dire che, nel
browser, tramite Javascript, possiamo modificare
programmaticamente qualsiasi parte del documento.
Ovviamente va come sempre considerato il supporto dei
browser ai metodi del DOM, che se nel caso del CORE
sono abbastanza standard, per il resto hanno
implementazioni che variano da browser a browser.
23. Un mondo (quasi) perfetto
l’implementazione in Javascript
dei metodi di accesso al DOM
non è standard fra i browser
DOM
Frameworks
34. Struttura di una pagina HTML
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
................. TAG SOUP .............
</body>
</html>
35. Elenco tag HTML
• ADDRESS ‐ Address information • DIR ‐ Directory list
• APPLET ‐ Java applet • DIV ‐ Logical division
• AREA ‐ Hotzone in imagemap • DL ‐ Definition list
• A ‐ Anchor • DT ‐ Definition term
• BASE ‐ Document location • EM ‐ Emphasized text
• BASEFONT ‐ Default font size • FONT ‐ Font modification
• BIG ‐ Larger text • FORM ‐ Input form
• BLOCKQUOTE ‐ Large quotation • H1 ‐ Level 1 header
• BODY ‐ Document body • H2 ‐ Level 2 header
• BR ‐ Line break • H3 ‐ Level 3 header
• B ‐ Bold • H4 ‐ Level 4 header
• CAPTION ‐ Table caption • H5 ‐ Level 5 header
• CENTER ‐ Centered division • H6 ‐ Level 6 header
• CITE ‐ Short citation • HEAD ‐ Document head
• CODE ‐ Code fragment • HR ‐ Horizontal rule
• DD ‐ Definition • HTML ‐ HTML Document
• DFN ‐ Definition of a term • IMG ‐ Images
36. Elenco tag HTML
• INPUT ‐ Input field, button, etc. • SMALL ‐ Smaller text
• ISINDEX ‐ Primitive search • STRIKE ‐ Strikeout
• I ‐ Italics • STRONG ‐ Strongly emphasized
• KBD ‐ Keyboard input • STYLE ‐ Style information
• LINK ‐ Site structure • SUB ‐ Subscript
• LI ‐ List item • SUP ‐ Superscript
• MAP ‐ Client‐side imagemap • TABLE ‐ Tables
• MENU ‐ Menu item list • TD ‐ Table cell
• META ‐ Meta‐information • TEXTAREA ‐ Input area
• OL ‐ Ordered list • TH ‐ Header cell
• OPTION ‐ Selection list option • TITLE ‐ Document title
• PARAM ‐ Parameter for Java applet • TR ‐ Table row
• PRE ‐ Preformatted text • TT ‐ Teletype
• P ‐ Paragraph • UL ‐ Unordered list
• SAMP ‐ Sample text • U ‐ Underline
• SCRIPT ‐ Inline script • VAR ‐ Variable
• SELECT ‐ Selection list
37. HyperText Markup Language
Linguaggio di markup, ovvero di descrizione di un
contenuto, non di programmazione.
Osservando con attenzione le specifiche W3C
sull’uso e sul significato dei tag, si capisce che:
Molta struttura
Molta semantica
Poca formattazione
40. Utilizzo dei CSS
PRESENTAZIONE LAYOUT
color position
font sizing
text formatting margin/padding
list style/type display
border float/clear
41. I vantaggi
Separazione fra “contenuto” e “presentazione”
Riduzione banda (“traffico”) e latenza nel rendering
Migliore controllo del codice HTML e del layout
Maggiore consistenza fra le pagine e fra i browser
42. Concetti di base
Cascading (precedenza)
Author --› User --› User Agent
Overriding
Stile dichiarato vs. Stile computato
Specificità
Elemento (b, div, span) 0.0.1
Classe/Pseudoclasse (.redbox, :hover) 0.1.0
ID (#mainBox) 1.0.0
Ereditarietà
44. I selettori
h1, h2, p {…} elemento HTML
#boxRoot, h2#title {…} id
.redbox {…}, span.redbox {…} classe
span.redbox.special {…} classi multiple
a:hover {…} pseudo‐classi
div > p, h1 + h2 {…} figli/adiacenti
input[type=button] attributi
*** e molti altri...
45. Struttura di un file CSS
body {…}
h1 {…}
h2 {…}
h3 {…}
p {…}
a, a:hover, a:active, a:visited {…}
#boxHead {…}
#boxBody {…}
#boxFoot {…}
body#pageHome h1, body#pageHome h2, body#pageHome h3 {…}
body#pageAbout #boxMain table#tblAboutPeople {…}
body#pageContacts #boxMain #bmContactPlace p {…}
.sIFR‐flash {…}
.sIFR‐hasFlash #boxMain h1 {…}
47. Quale Javascript?
Differenti browser implementano diversi engine
Javascript, con diverse estensioni applicative
(componenti, utility, metodi, ecc.).
Ma soprattutto, implementano diversi metodi di
accesso al DOM.
Dovremmo riempire ogni singola funzione di “if” e
di test sul browser utilizzato, con tutto ciò che
comporta una scelta del genere.
Conclusione: dobbiamo utilizzare un framework.
48. Quale Framework?
Ogni framework avrà la sua sintassi e la propria
libreria di “effetti speciali”.
Quello che è comune ai framework in realtà è il
fatto di disporre di metodi cross-browser di
accesso e manipolazione del DOM.
Come sceglierlo? In base al tipo di applicazione e di
utilizzo che andremo a farne. s e al lo
go!
ba
...opp ure in
49. Perché adottare un framework?
Vi immaginate fare questo per tutte le funzioni?
window.xpath = !!(document.evaluate);
if (window.ActiveXObject) {
window[window.XMLHttpRequest ? 'ie7':'ie6'] = true;
window.ie = true;
} else if (document.childNodes && !document.all && !
navigator.taintEnabled) {
window[window.xpath ? 'webkit420':'webkit419'] = true;
window.webkit = true;
window.khtml = true;
} else if (document.getBoxObjectFor != null) {
window.gecko = true;
}
Lasciamo che sia il framework a farlo per noi!
51. Separazione, ora e sempre!
È fondamentale la separazione fra i diversi ambiti
o layer “logici” di una pagina web:
Comportamento
Presentazione
Contenuti
52. Ad ognuno il suo!
Lasciamo che ogni linguaggio faccia ciò per cui è
stato pensato e progettato:
HTML semantica
CSS visualizzazione
JS interazione
53. Browser evoluti
In cosa consiste l’evoluzione dei browser?
Nel crescente supporto agli standard del W3C.
Quali vantaggi per gli sviluppatori?
Impiego intelligente di CSS + DOM & JS
Maggiore rigore formale e controllo sul codice
Maggiore controllo sul rendering
Maggiore capacità di elaborazione lato client (JS)
Più attenzione a semantica e accessibilità
54. L’importanza del “DOM scripting”
Cosa posso fare in una applicazione web tramite la
manipolazione del DOM? TUTTO.
Capite allora l’importanza del DOM ai fini dello
sviluppo di pagine e soprattutto applicazioni web:
posso spostare moltissima logica verso il client.
DOM
58. Avoid inline style
Evitate per quanto vi è possibile questo:
<p align="center"><b><font size="4">
<p style="color:red;">...
<div align="right"><p>...</p></div>
<p>...</p><br/><br/><br/><br/><p>...</p>