Post on 27-Jan-2015
description
Best practices per lo sviluppo FrontendCRISTIANO RASTELLI
WEB & INTERACTION DESIGNER
Alcune cose prima di iniziareForse le più importanti...
Best practicesgood
browser-side
Alcune cose prima di iniziareForse le più importanti...
sviluppo Frontend
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
Di cosa stiamo parlando? Linguaggi Demo
“Presentazione” “Interazione” “Manipolazione”
Risorse utili
AGENDA
Di cosa stiamo parlando?
Una domanda...
Quanto ne sapete di HTML, CSS & Javascript?
Poco Abbastanza Tanto
I nostri confini
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
://
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
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
Box Model
Box Model
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>Heloworld</title>
</head><body><h1id=”stw”>Savetheworld</h1><p>Savethe<i>cheer</i>leaders.</p>
</body></html>
Il documento a oggetti
id
DOCUMENT
<html>
<head>
<title>
Heloworld
<body>
<h1>
Savetheworld
<p>
Savethe <i>
cheer
leaders.
ELEMENT
TEXTATTR
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]
Accesso ai nodiDiretto tramite selettore
.getElementsByTagName('tag')[x]
.getElementById('xxx');
document.getElementsByTagName('h1')[0]document.getElementsByTagName('p')[3].lastChild
document.getElementById('stw');
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);
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
Modifica dei nodiProprietà 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.
DOM
Un mondo (quasi) perfetto
Frameworks
l’implementazione in Javascriptdei metodi di accesso al DOMnon è standard fra i browser
il browser...(si, ma quale??)
Il nostro client
(si, ma quale??)
Il nostro client
Rendering engines
Market-share dei principali motori di rendering
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
0%
10%
20%
70%
TridentGeckoWebKitPresto
Javascript engines
V8NitroJScript
FutharkSquirrelFishSpiderMonkey
Motori Javascript presenti nei browser più diffusi
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
I linguaggi
HTML
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>
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
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
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
CSS
Un po’ di storia
colorfonttext formattinglist style/typeborder
Utilizzo dei CSS
PRESENTAZIONE LAYOUT
positionsizingmargin/paddingdisplayfloat/clear
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
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à
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”
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...
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{…}
Javascript
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.
...oppure in base al logo!
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!
HTML+CSS+JS
Separazione, ora e sempre!
Contenuti
Presentazione
Comportamento
È fondamentale la separazione fra i diversi ambiti o layer “logici” di una pagina web:
Ad ognuno il suo!
HTML
CSS
JS
Lasciamo che ogni linguaggio faccia ciò per cui è stato pensato e progettato:
semantica
visualizzazione
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 & JSMaggiore rigore formale e controllo sul codiceMaggiore controllo sul renderingMaggiore 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
DO’s / DONT’s
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:
<pstyle="color:red;">...
<palign="center"><b><fontsize="4">
<divalign="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:
<ahref="#"onclick="javascript:func();returnfalse;">
<ahref="javascript:func()">
<scripttype="text/javascript">...</script><p>...</p>
<selectonchange="javascript:func();">
don’t browser-detec(i browser cambiano più spesso di quanto pensiamo)
DEMO
“Presentazione”Come utilizzare i CSS
Esempi “presentazione”
“Interazione”Come essere dinamici
DEMO
Esempi “interazione”
“Manipolazione”Come intervenire sul DOM
DEMO
Esempi “manipolazione”
In conclusione
SEPARAZIONE LAYER
STATI LOGICI = STATI VISUALI
OGGETTI DELLA PAGINA = LEGO
EVENTI <=> INTERAZIONE
I CLIENT SONO EVOLUTI
Grazie a tutti!
CRISTIANO RASTELLIwww.didoo.net
Risorse utili
Referenze
Piccola biblioteca del web-developer
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)
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)
Ferri del mestiere
Firebughttp://getfirebug.com
Firebughttp://getfirebug.com
Firebughttp://getfirebug.com
Firebughttp://getfirebug.com
Firebughttp://getfirebug.com
Firebughttp://getfirebug.com
IE Developer Toolbarhttp://www.microsoft.com/downloads/
Web Developer Toolbarhttp://chrispederick.com/work/web-developer/