Best practices per lo sviluppo Frontend
•
2 likes•667 views
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
Report
Share
Related slideshows
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
- 6. Di cosa stiamo parlando?
- 7. Una domanda... Quanto ne sapete di HTML, CSS & Javascript? Poco Abbastanza Tanto
- 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
- 12. Box Model
- 13. Box Model
- 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
- 17. 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]
- 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
- 24. Il nostro client il browser... (si, ma quale??)
- 25. Il nostro client (si, ma quale??)
- 26. 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
- 27. Javascript engines Motori Javascript presenti nei browser più diffusi JScript Nitro V8 SpiderMonkey SquirrelFish Futhark
- 28. Framework & Librerie Javascript Alcuni dei framework Javascript più noti
- 29. Framework & Librerie CSS Alcuni dei framework CSS disponibili
- 30. Il nostro server <whatever you=”like”/> L’importante è che ci permetta di fare quello che ci occorre...
- 31. I nostri strumenti di sviluppo DEVELOPMENT TEST & DEBUG
- 32. I linguaggi
- 33. HTML
- 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
- 38. CSS
- 39. Un po’ di storia
- 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à
- 43. 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; }
- 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 {…}
- 46. Javascript
- 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!
- 50. HTML+CSS+JS
- 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
- 55. DO’s / DONT’s
- 56. table-less layout (lasciamo le tabelle libere di fare le tabelle)
- 57. avoid inline stile (spostiamo la presentazione nei CSS)
- 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>
- 59. avoid inline code (teniamo ordinato il nostro codice)
- 60. 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>
- 61. don’t browser-detec (i browser cambiano più spesso di quanto pensiamo)
- 62. DEMO “Presentazione” Come utilizzare i CSS
- 64. DEMO “Interazione” Come essere dinamici
- 66. DEMO “Manipolazione” Come intervenire sul DOM
- 68. In conclusione SEPARAZIONE LAYER STATI LOGICI = STATI VISUALI OGGETTI DELLA PAGINA = LEGO EVENTI <=> INTERAZIONE I CLIENT SONO EVOLUTI
- 69. Grazie a tutti! CRISTIANO RASTELLI www.didoo.net
- 70. Risorse utili
- 71. Referenze
- 72. Piccola biblioteca del web-developer
- 73. 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/
- 74. 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/