Best practices per lo sviluppo Frontend

Best practices per lo sviluppo FrontendCRISTIANO RASTELLI

WEB & INTERACTION DESIGNER

Alcune cose prima di iniziareForse le più importanti...

Best practicesgood

browser-side


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

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

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

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

IE Developer Toolbarhttp://www.microsoft.com/downloads/

Web Developer Toolbarhttp://chrispederick.com/work/web-developer/

Best practices per lo sviluppo Frontend

Technology

Transcript of Best practices per lo sviluppo Frontend