Best practices per lo sviluppo Frontend

Best practices per lo sviluppo Frontend
CRISTIANO RASTELLI
WEB & INTERACTION DESIGNER

Alcune cose prima di iniziare
Forse le più importanti...

g ood
Best practices


ser- side
brow
sviluppo Frontend


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

AGENDA
 Di cosa stiamo parlando?
 Linguaggi
 Demo
 “Presentazione”
 “Interazione”
 “Manipolazione”
 Risorse utili

Una domanda...

Quanto ne sapete di HTML, CSS & Javascript?

Poco Abbastanza Tanto

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

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

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

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”

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>

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

Accesso ai nodi
Attraversamento dell’albero

.parentNode
.childNodes[x]
.firstChild
.lastChild

document.firstChild.firstChild.lastChild
document.firstChild.childNodes[0].lastChild
document.firstChild.childNodes[0].childNodes[2]

document.firstChild.childNodes
[0].parentNode.firstChild.childNodes[1]

Accesso ai nodi
Diretto tramite selettore

.getElementsByTagName('tag')[x]
.getElementById('xxx');

document.getElementsByTagName('h1')[0]
document.getElementsByTagName('p')[3].lastChild

document.getElementById('stw');

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);

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

Modifica dei nodi
Proprietà degli elementi

.id
.className
.nodeValue
.innerHTML

setAttribute(…)
getAttribute()
removeAttribute(…)

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.

Un mondo (quasi) perfetto

l’implementazione in Javascript
dei metodi di accesso al DOM
non è standard fra i browser

DOM
Frameworks

Il nostro client

il browser...
(si, ma quale??)

Il nostro client

(si, ma quale??)

Rendering engines

Market-share dei principali motori di rendering

20%

Trident
Gecko
WebKit
10% Presto
70%
0%

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

Javascript engines

Motori Javascript presenti nei browser più diffusi

JScript Nitro V8

SpiderMonkey SquirrelFish Futhark

Framework & Librerie Javascript

Alcuni dei framework Javascript più noti

Framework & Librerie CSS

Alcuni dei framework CSS disponibili

Il nostro server

<whatever you=”like”/>
L’importante è che ci permetta di fare quello che ci occorre...

I nostri strumenti di sviluppo

DEVELOPMENT TEST & DEBUG

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>

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

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

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

Utilizzo dei CSS

PRESENTAZIONE LAYOUT

color position
font sizing
text formatting margin/padding
list style/type display
border float/clear

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

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à

La sintassi

/* ‐‐‐‐‐‐‐ HEADER ‐‐‐‐‐‐‐ */ commenti

div { color: #000000; }  selettore ‐› regole

p, li, span.redbox {color:#FF0000;}  selettori multipli

h2 { dichiarazione o 
  margin: 10px; “stanza”
  font‐size: 1.5em;
  color: #000000;
}

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...

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 {…}

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.

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

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!

Separazione, ora e sempre!

È fondamentale la separazione fra i diversi ambiti
o layer “logici” di una pagina web:

Comportamento

Presentazione

Contenuti

Ad ognuno il suo!

Lasciamo che ogni linguaggio faccia ciò per cui è
stato pensato e progettato:

HTML semantica

CSS visualizzazione

JS interazione

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à

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

table-less layout
(lasciamo le tabelle libere di fare le tabelle)

avoid inline stile
(spostiamo la presentazione nei CSS)

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>

avoid inline code
(teniamo ordinato il nostro codice)

Avoid inline code

Evitate sempre e comunque questo:

<a href="javascript:func()">

<a href="#" onclick="javascript:func();return false;">

<select onchange="javascript:func();">

<script type="text/javascript">
...
</script>
<p>...</p>

don’t browser-detec
(i browser cambiano più spesso di quanto pensiamo)

DEMO

“Presentazione”
Come utilizzare i CSS

DEMO

“Interazione”
Come essere dinamici

DEMO

“Manipolazione”
Come intervenire sul DOM

In conclusione

SEPARAZIONE LAYER
STATI LOGICI = STATI VISUALI
OGGETTI DELLA PAGINA = LEGO
EVENTI <=> INTERAZIONE
I CLIENT SONO EVOLUTI

Grazie a tutti!

CRISTIANO RASTELLI
www.didoo.net

Piccola biblioteca del web-developer

Bookmarks (HTML/CSS)

The W3C MarkUp Validation Service
http://validator.w3.org/

CSS2 Specification
http://www.w3.org/TR/REC-CSS2/

CSS pocket reference
http://www.culturedcode.com/css/reference.html

PPK - CSS
http://www.quirksmode.org/css/contents.html

CSS browser support
http://www.westciv.com/style_master/academy/browser_support/

The W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/

Bookmarks (JS/Frameworks)

PPK - JavaScript
http://www.quirksmode.org/js/

Core JavaScript 1.5 Guide - MDC
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

jQuery
http://jquery.com/

jQuery UI
http://jqueryui.com/

Yahoo! UI Library
http://developer.yahoo.com/yui/

Mootools
http://mootools.net/

Firebug
http://getfirebug.com

IE Developer Toolbar
http://www.microsoft.com/downloads/

Web Developer Toolbar
http://chrispederick.com/work/web-developer/

Best practices per lo sviluppo Frontend

Best practices per lo sviluppo Frontend

More Related Content

What's hot (11)

Viewers also liked (20)

Similar to Best practices per lo sviluppo Frontend (20)

More from Cristiano Rastelli (20)

Best practices per lo sviluppo Frontend