best practices per lo sviluppo frontend
DESCRIPTION
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.NETTRANSCRIPT
![Page 1: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/1.jpg)
Best practices per lo sviluppo FrontendCRISTIANO RASTELLI
WEB & INTERACTION DESIGNER
![Page 2: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/2.jpg)
Alcune cose prima di iniziareForse le più importanti...
Best practicesgood
![Page 3: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/3.jpg)
browser-side
Alcune cose prima di iniziareForse le più importanti...
sviluppo Frontend
![Page 4: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/4.jpg)
Alcune cose prima di iniziareForse 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 CSSinterazione utente tramite JSmanipolazione pagina tramite DOM
![Page 5: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/5.jpg)
Di cosa stiamo parlando? Linguaggi Demo
“Presentazione” “Interazione” “Manipolazione”
Risorse utili
AGENDA
![Page 6: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/6.jpg)
Di cosa stiamo parlando?
![Page 7: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/7.jpg)
Una domanda...
Quanto ne sapete di HTML, CSS & Javascript?
Poco Abbastanza Tanto
![Page 8: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/8.jpg)
I nostri confini
![Page 9: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/9.jpg)
Il nostro modello client-server
SERVER
BROWSER
RENDERING MODE
LAYOUT ENGINE
• standard mode• quirks mode
VISUAL FORMATTING MODEL
BOX MODEL• standard W3C• traditional IE
DOCTYPEDTD
DOCUMENT OBJECT MODEL
http
://
![Page 10: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/10.jpg)
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 boxschema posizionalerelazione con gli altri elementi del document-tree
condizioni al contorno
![Page 11: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/11.jpg)
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/verticaledimensione del margine esternodimensione del padding internodimensione del bordo
![Page 12: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/12.jpg)
Box Model
![Page 13: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/13.jpg)
Box Model
![Page 14: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/14.jpg)
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”
![Page 15: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/15.jpg)
Il documento
<html><head><title>Heloworld</title>
</head><body><h1id=”stw”>Savetheworld</h1><p>Savethe<i>cheer</i>leaders.</p>
</body></html>
![Page 16: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/16.jpg)
Il documento a oggetti
id
DOCUMENT
<html>
<head>
<title>
Heloworld
<body>
<h1>
Savetheworld
<p>
Savethe <i>
cheer
leaders.
ELEMENT
TEXTATTR
![Page 17: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/17.jpg)
Accesso ai nodiAttraversamento dell’albero
.parentNode
.childNodes[x]
.firstChild
.lastChild
document.firstChild.firstChild.lastChilddocument.firstChild.childNodes[0].lastChilddocument.firstChild.childNodes[0].childNodes[2]
document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1]
![Page 18: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/18.jpg)
Accesso ai nodiDiretto tramite selettore
.getElementsByTagName('tag')[x]
.getElementById('xxx');
document.getElementsByTagName('h1')[0]document.getElementsByTagName('p')[3].lastChild
document.getElementById('stw');
![Page 19: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/19.jpg)
Gestione dei nodiCreazione/Modifica/Eliminazione
.createElement('hr')
.appendChild(x)
.removeChild(document.childNodes[3].firstChild)
.createTextNode('loremipsum')
varx=document.createElement('span');vary=document.createTextNode('Iamaparagraph');x.appendChild(y);document.appendChild(x);
![Page 20: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/20.jpg)
Il documento a oggetti
span
I am a paragraph
id
DOCUMENT
<html>
<head>
<title>
Heloworld
<body>
<h1>
Savetheworld
<p>
Savethe <i>
cheer
leaders.
ELEMENT
TEXTATTR
![Page 21: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/21.jpg)
Modifica dei nodiProprietà degli elementi
.id
.className
.nodeValue
.innerHTML
setAttribute(…)getAttribute()removeAttribute(…)
![Page 22: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/22.jpg)
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.
![Page 23: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/23.jpg)
DOM
Un mondo (quasi) perfetto
Frameworks
l’implementazione in Javascriptdei metodi di accesso al DOMnon è standard fra i browser
![Page 24: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/24.jpg)
il browser...(si, ma quale??)
Il nostro client
![Page 25: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/25.jpg)
(si, ma quale??)
Il nostro client
![Page 26: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/26.jpg)
Rendering engines
Market-share dei principali motori di rendering
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
0%
10%
20%
70%
TridentGeckoWebKitPresto
![Page 27: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/27.jpg)
Javascript engines
V8NitroJScript
FutharkSquirrelFishSpiderMonkey
Motori Javascript presenti nei browser più diffusi
![Page 28: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/28.jpg)
Framework & Librerie Javascript
Alcuni dei framework Javascript più noti
![Page 29: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/29.jpg)
Framework & Librerie CSS
Alcuni dei framework CSS disponibili
![Page 30: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/30.jpg)
Il nostro server
<whatever you=”like”/>L’importante è che ci permetta di fare quello che ci occorre...
![Page 31: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/31.jpg)
I nostri strumenti di sviluppo
DEVELOPMENT TEST & DEBUG
![Page 32: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/32.jpg)
I linguaggi
![Page 33: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/33.jpg)
HTML
![Page 34: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/34.jpg)
Struttura di una pagina HTML
<!DOCTYPEHTMLPUBLIC"‐//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>
<head><title>Untitled</title></head>
<body>.................TAGSOUP.............
</body></html>
![Page 35: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/35.jpg)
Elenco tag HTML
•ADDRESS‐Addressinformation•APPLET‐Javaapplet•AREA‐Hotzoneinimagemap•A‐Anchor•BASE‐Documentlocation•BASEFONT‐Defaultfontsize•BIG‐Largertext•BLOCKQUOTE‐Largequotation•BODY‐Documentbody•BR‐Linebreak•B‐Bold•CAPTION‐Tablecaption•CENTER‐Centereddivision•CITE‐Shortcitation•CODE‐Codefragment•DD‐Definition•DFN‐Definitionofaterm
•DIR‐Directorylist•DIV‐Logicaldivision•DL‐Definitionlist•DT‐Definitionterm•EM‐Emphasizedtext•FONT‐Fontmodification•FORM‐Inputform•H1‐Level1header•H2‐Level2header•H3‐Level3header•H4‐Level4header•H5‐Level5header•H6‐Level6header•HEAD‐Documenthead•HR‐Horizontalrule•HTML‐HTMLDocument•IMG‐Images
![Page 36: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/36.jpg)
Elenco tag HTML
•INPUT‐Inputfield,button,etc.•ISINDEX‐Primitivesearch•I‐Italics•KBD‐Keyboardinput•LINK‐Sitestructure•LI‐Listitem•MAP‐Client‐sideimagemap•MENU‐Menuitemlist•META‐Meta‐information•OL‐Orderedlist•OPTION‐Selectionlistoption•PARAM‐ParameterforJavaapplet•PRE‐Preformattedtext•P‐Paragraph•SAMP‐Sampletext•SCRIPT‐Inlinescript•SELECT‐Selectionlist
•SMALL‐Smallertext•STRIKE‐Strikeout•STRONG‐Stronglyemphasized•STYLE‐Styleinformation•SUB‐Subscript•SUP‐Superscript•TABLE‐Tables•TD‐Tablecell•TEXTAREA‐Inputarea•TH‐Headercell•TITLE‐Documenttitle•TR‐Tablerow•TT‐Teletype•UL‐Unorderedlist•U‐Underline•VAR‐Variable
![Page 37: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/37.jpg)
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 strutturaMolta semanticaPoca formattazione
![Page 38: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/38.jpg)
CSS
![Page 39: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/39.jpg)
Un po’ di storia
![Page 40: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/40.jpg)
colorfonttext formattinglist style/typeborder
Utilizzo dei CSS
PRESENTAZIONE LAYOUT
positionsizingmargin/paddingdisplayfloat/clear
![Page 41: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/41.jpg)
I vantaggi
Separazione fra “contenuto” e “presentazione” Riduzione banda (“traffico”) e latenza nel rendering Migliore controllo del codice HTML e del layoutMaggiore consistenza fra le pagine e fra i browser
![Page 42: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/42.jpg)
Concetti di base
Cascading (precedenza)Author --› User --› User AgentOverridingStile dichiarato vs. Stile computato
SpecificitàElemento (b, div, span) 0.0.1Classe/Pseudoclasse (.redbox, :hover) 0.1.0ID (#mainBox) 1.0.0
Ereditarietà
![Page 43: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/43.jpg)
La sintassi
/*‐‐‐‐‐‐‐HEADER‐‐‐‐‐‐‐*/
div{color:#000000;}
p,li,span.redbox{color:#FF0000;}
h2{ margin:10px; font‐size:1.5em; color:#000000;}
commenti
selettore‐›regole
selettorimultipli
dichiarazioneo“stanza”
![Page 44: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/44.jpg)
I selettori
h1,h2,p{…}
#boxRoot,h2#title{…}
.redbox{…},span.redbox{…}
span.redbox.special{…}
a:hover{…}
div>p,h1+h2{…}
input[type=button]
***
elementoHTML
id
classe
classimultiple
pseudo‐classi
figli/adiacenti
attributi
emoltialtri...
![Page 45: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/45.jpg)
Struttura di un file CSS
body{…}
h1{…}h2{…}h3{…}p{…}a,a:hover,a:active,a:visited{…}
#boxHead{…}#boxBody{…}#boxFoot{…}
body#pageHomeh1,body#pageHomeh2,body#pageHomeh3{…}body#pageAbout#boxMaintable#tblAboutPeople{…}body#pageContacts#boxMain#bmContactPlacep{…}
.sIFR‐flash{…}
.sIFR‐hasFlash#boxMainh1{…}
![Page 46: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/46.jpg)
Javascript
![Page 47: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/47.jpg)
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.
![Page 48: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/48.jpg)
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.
...oppure in base al logo!
![Page 49: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/49.jpg)
Perché adottare un framework?
window.xpath=!!(document.evaluate);if(window.ActiveXObject){ window[window.XMLHttpRequest?'ie7':'ie6']=true; window.ie=true;}elseif(document.childNodes&&!document.all&&!navigator.taintEnabled){ window[window.xpath?'webkit420':'webkit419']=true; window.webkit=true; window.khtml=true;}elseif(document.getBoxObjectFor!=null){ window.gecko=true;}
Vi immaginate fare questo per tutte le funzioni?
Lasciamo che sia il framework a farlo per noi!
![Page 50: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/50.jpg)
HTML+CSS+JS
![Page 51: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/51.jpg)
Separazione, ora e sempre!
Contenuti
Presentazione
Comportamento
È fondamentale la separazione fra i diversi ambiti o layer “logici” di una pagina web:
![Page 52: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/52.jpg)
Ad ognuno il suo!
HTML
CSS
JS
Lasciamo che ogni linguaggio faccia ciò per cui è stato pensato e progettato:
semantica
visualizzazione
interazione
![Page 53: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/53.jpg)
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 & JSMaggiore rigore formale e controllo sul codiceMaggiore controllo sul renderingMaggiore capacità di elaborazione lato client (JS)Più attenzione a semantica e accessibilità
![Page 54: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/54.jpg)
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
![Page 55: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/55.jpg)
DO’s / DONT’s
![Page 56: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/56.jpg)
table-less layout(lasciamo le tabelle libere di fare le tabelle)
![Page 57: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/57.jpg)
avoid inline stile(spostiamo la presentazione nei CSS)
![Page 58: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/58.jpg)
Avoid inline style
Evitate per quanto vi è possibile questo:
<pstyle="color:red;">...
<palign="center"><b><fontsize="4">
<divalign="right"><p>...</p></div>
<p>...</p><br/><br/><br/><br/><p>...</p>
![Page 59: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/59.jpg)
avoid inline code(teniamo ordinato il nostro codice)
![Page 60: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/60.jpg)
Avoid inline code
Evitate sempre e comunque questo:
<ahref="#"onclick="javascript:func();returnfalse;">
<ahref="javascript:func()">
<scripttype="text/javascript">...</script><p>...</p>
<selectonchange="javascript:func();">
![Page 61: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/61.jpg)
don’t browser-detec(i browser cambiano più spesso di quanto pensiamo)
![Page 62: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/62.jpg)
DEMO
“Presentazione”Come utilizzare i CSS
![Page 63: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/63.jpg)
Esempi “presentazione”
![Page 64: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/64.jpg)
“Interazione”Come essere dinamici
DEMO
![Page 65: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/65.jpg)
Esempi “interazione”
![Page 66: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/66.jpg)
“Manipolazione”Come intervenire sul DOM
DEMO
![Page 67: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/67.jpg)
Esempi “manipolazione”
![Page 68: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/68.jpg)
In conclusione
SEPARAZIONE LAYER
STATI LOGICI = STATI VISUALI
OGGETTI DELLA PAGINA = LEGO
EVENTI <=> INTERAZIONE
I CLIENT SONO EVOLUTI
![Page 69: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/69.jpg)
Grazie a tutti!
CRISTIANO RASTELLIwww.didoo.net
![Page 70: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/70.jpg)
Risorse utili
![Page 71: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/71.jpg)
Referenze
![Page 72: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/72.jpg)
Piccola biblioteca del web-developer
![Page 73: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/73.jpg)
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 (HTML/CSS)
![Page 74: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/74.jpg)
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/
Bookmarks (JS/Frameworks)
![Page 75: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/75.jpg)
Ferri del mestiere
![Page 76: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/76.jpg)
Firebughttp://getfirebug.com
![Page 77: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/77.jpg)
Firebughttp://getfirebug.com
![Page 78: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/78.jpg)
Firebughttp://getfirebug.com
![Page 79: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/79.jpg)
Firebughttp://getfirebug.com
![Page 80: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/80.jpg)
Firebughttp://getfirebug.com
![Page 81: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/81.jpg)
Firebughttp://getfirebug.com
![Page 82: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/82.jpg)
IE Developer Toolbarhttp://www.microsoft.com/downloads/
![Page 83: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/83.jpg)
Web Developer Toolbarhttp://chrispederick.com/work/web-developer/
![Page 84: Best practices per lo sviluppo Frontend](https://reader034.vdocuments.mx/reader034/viewer/2022051314/54c763304a79599a1a8b4626/html5/thumbnails/84.jpg)