0
Best practices per lo sviluppo Frontend
                          CRISTIANO RASTELLI
                           WEB & INTE...
Alcune cose prima di iniziare
Forse le più importanti...




            g ood
            Best practices
Alcune cose prima di iniziare
Forse le più importanti...




                                    ser- side
               ...
Alcune cose prima di iniziare
Forse le più importanti...


                 Piccole, medie e grandi strategie per
        ...
AGENDA
   Di cosa stiamo parlando?
   Linguaggi
   Demo
       “Presentazione”
       “Interazione”
       “Manipola...
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



                                   LAYOUT ENGINE
                   ...
Visual Formatting Model

 È il modello con il quale viene processato il document-tree
 per il rendering verso media visual...
Box Model

 È il modello con il quale viene elaborato il layout grafico
 del singolo box all’interno del document-tree.
 L...
Box Model
Box Model
Document Object Model (            )

 “A document object model (DOM) is an application
 programming interface (API) for r...
Il documento


  <html>
    <head>
      <title>Helo
world</title>
    </head>
    <body>
      <h1
id=”stw”>Save
the
worl...
Il documento a oggetti

                        DOCUMENT

                            <html>


   <head>                  ...
Accesso ai nodi
Attraversamento dell’albero


  .parentNode
  .childNodes[x]
  .firstChild
  .lastChild

  document.firstC...
Accesso ai nodi
Diretto tramite selettore


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

  document.getEle...
Gestione dei nodi
Creazione/Modifica/Eliminazione


  .createElement('hr')
  .appendChild(x)
  .removeChild(document.child...
Il documento a oggetti

                        DOCUMENT
                                                        span
    ...
Modifica dei nodi
Proprietà degli elementi


  .id
  .className
  .nodeValue
  .innerHTML

  setAttribute(…)
  getAttribut...
Manipolazione del DOM

 Abbiamo tramite il DOM il completo accesso agli
 elementi del documento. Questo vuol dire che, nel...
Un mondo (quasi) perfetto


            l’implementazione in Javascript
              dei metodi di accesso al DOM
       ...
Il nostro client




                   il browser...
                      (si, ma quale??)
Il nostro client




                   (si, ma quale??)
Rendering engines

       Market-share dei principali motori di rendering



                                             ...
Javascript engines

       Motori Javascript presenti nei browser più diffusi




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

 <!DOCTYPE
HTML
PUBLIC
"‐//W3C//DTD
HTML
4.01

 Transitional//EN""http://www.w3.org/TR/html4...
Elenco tag HTML

 •
ADDRESS
‐
Address
information   •
DIR
‐
Directory
list
 •
APPLET
‐
Java
applet            •
DIV
‐
Logi...
Elenco tag HTML

 •
INPUT
‐
Input
field,
button,
etc.   •
SMALL
‐
Smaller
text
 •
ISINDEX
‐
Primitive
search          •
ST...
HyperText Markup Language

 Linguaggio di markup, ovvero di descrizione di un
 contenuto, non di programmazione.
 Osservan...
CSS
Un po’ di storia
Utilizzo dei CSS


      PRESENTAZIONE       LAYOUT


        color              position
        font               sizin...
I vantaggi

 Separazione fra “contenuto” e “presentazione”
 Riduzione banda (“traffico”) e latenza nel rendering
 Migliore...
Concetti di base

 Cascading (precedenza)
   Author --› User --› User Agent
   Overriding
   Stile dichiarato vs. Stile co...
La sintassi



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

  div
{
color:
#000000;
}
               selettore
‐›
re...
I selettori


  h1,
h2,
p
{…}
                 elemento
HTML

  #boxRoot,
h2#title
{…}         id

  .redbox
{…},
span.red...
Struttura di un file CSS
  body
{…}

  h1
{…}
  h2
{…}
  h3
{…}
  p

{…}
  a,
a:hover,
a:active,
a:visited
{…}

  #boxHead...
Javascript
Quale Javascript?

 Differenti browser implementano diversi engine
 Javascript, con diverse estensioni applicative
 (compo...
Quale Framework?

 Ogni framework avrà la sua sintassi e la propria
 libreria di “effetti speciali”.
 Quello che è comune ...
Perché adottare un framework?

 Vi immaginate fare questo per tutte le funzioni?
  window.xpath
=
!!(document.evaluate);
 ...
HTML+CSS+JS
Separazione, ora e sempre!

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


   ...
Ad ognuno il suo!

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


     HTML            ...
Browser evoluti

 In cosa consiste l’evoluzione dei browser?
 Nel crescente supporto agli standard del W3C.
 Quali vantagg...
L’importanza del “DOM scripting”

 Cosa posso fare in una applicazione web tramite la
 manipolazione del DOM? TUTTO.
 Capi...
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:


    <p
align="center"><b><font
size="4">

    <p
style="...
avoid inline code
 (teniamo ordinato il nostro codice)
Avoid inline code

  Evitate sempre e comunque questo:


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

    <a
href="#"
onclick="javasc...
don’t browser-detec
(i browser cambiano più spesso di quanto pensiamo)
DEMO

“Presentazione”
    Come utilizzare i CSS
Esempi “presentazione”
DEMO

“Interazione”
 Come essere dinamici
Esempi “interazione”
DEMO

“Manipolazione”
  Come intervenire sul DOM
Esempi “manipolazione”
In conclusione


  SEPARAZIONE LAYER
  STATI LOGICI = STATI VISUALI
  OGGETTI DELLA PAGINA = LEGO
  EVENTI <=> INTERAZIONE...
Grazie a tutti!

 CRISTIANO RASTELLI
       www.didoo.net
Risorse utili
Referenze
Piccola biblioteca del web-developer
Bookmarks (HTML/CSS)

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

 CSS2 Specification
    http://www....
Bookmarks (JS/Frameworks)

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

 Core JavaScript 1.5 Guide - MDC
    https...
Ferri del mestiere
Firebug
http://getfirebug.com
Firebug
http://getfirebug.com
Firebug
http://getfirebug.com
Firebug
http://getfirebug.com
Firebug
http://getfirebug.com
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
Upcoming SlideShare
Loading in...5
×

Best practices per lo sviluppo Frontend

1,167

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,167
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Best practices per lo sviluppo Frontend"

  1. 1. Best practices per lo sviluppo Frontend CRISTIANO RASTELLI WEB & INTERACTION DESIGNER
  2. 2. Alcune cose prima di iniziare Forse le più importanti... g ood Best practices
  3. 3. Alcune cose prima di iniziare Forse le più importanti... ser- side brow sviluppo Frontend
  4. 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. 5. AGENDA  Di cosa stiamo parlando?  Linguaggi  Demo  “Presentazione”  “Interazione”  “Manipolazione”  Risorse utili
  6. 6. Di cosa stiamo parlando?
  7. 7. Una domanda... Quanto ne sapete di HTML, CSS & Javascript? Poco Abbastanza Tanto
  8. 8. I nostri confini
  9. 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. 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. 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. 12. Box Model
  13. 13. Box Model
  14. 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. 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. 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. 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. 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. 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. 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. 21. Modifica dei nodi Proprietà degli elementi .id .className .nodeValue .innerHTML setAttribute(…) getAttribute() removeAttribute(…)
  22. 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. 23. Un mondo (quasi) perfetto l’implementazione in Javascript dei metodi di accesso al DOM non è standard fra i browser DOM Frameworks
  24. 24. Il nostro client il browser... (si, ma quale??)
  25. 25. Il nostro client (si, ma quale??)
  26. 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. 27. Javascript engines Motori Javascript presenti nei browser più diffusi JScript Nitro V8 SpiderMonkey SquirrelFish Futhark
  28. 28. Framework & Librerie Javascript Alcuni dei framework Javascript più noti
  29. 29. Framework & Librerie CSS Alcuni dei framework CSS disponibili
  30. 30. Il nostro server <whatever you=”like”/> L’importante è che ci permetta di fare quello che ci occorre...
  31. 31. I nostri strumenti di sviluppo DEVELOPMENT TEST & DEBUG
  32. 32. I linguaggi
  33. 33. HTML
  34. 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. 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. 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. 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. 38. CSS
  39. 39. Un po’ di storia
  40. 40. Utilizzo dei CSS PRESENTAZIONE LAYOUT color position font sizing text formatting margin/padding list style/type display border float/clear
  41. 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. 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. 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. 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. 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. 46. Javascript
  47. 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. 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. 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. 50. HTML+CSS+JS
  51. 51. Separazione, ora e sempre! È fondamentale la separazione fra i diversi ambiti o layer “logici” di una pagina web: Comportamento Presentazione Contenuti
  52. 52. Ad ognuno il suo! Lasciamo che ogni linguaggio faccia ciò per cui è stato pensato e progettato: HTML semantica CSS visualizzazione JS interazione
  53. 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. 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. 55. DO’s / DONT’s
  56. 56. table-less layout (lasciamo le tabelle libere di fare le tabelle)
  57. 57. avoid inline stile (spostiamo la presentazione nei CSS)
  58. 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. 59. avoid inline code (teniamo ordinato il nostro codice)
  60. 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. 61. don’t browser-detec (i browser cambiano più spesso di quanto pensiamo)
  62. 62. DEMO “Presentazione” Come utilizzare i CSS
  63. 63. Esempi “presentazione”
  64. 64. DEMO “Interazione” Come essere dinamici
  65. 65. Esempi “interazione”
  66. 66. DEMO “Manipolazione” Come intervenire sul DOM
  67. 67. Esempi “manipolazione”
  68. 68. In conclusione SEPARAZIONE LAYER STATI LOGICI = STATI VISUALI OGGETTI DELLA PAGINA = LEGO EVENTI <=> INTERAZIONE I CLIENT SONO EVOLUTI
  69. 69. Grazie a tutti! CRISTIANO RASTELLI www.didoo.net
  70. 70. Risorse utili
  71. 71. Referenze
  72. 72. Piccola biblioteca del web-developer
  73. 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. 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/
  75. 75. Ferri del mestiere
  76. 76. Firebug http://getfirebug.com
  77. 77. Firebug http://getfirebug.com
  78. 78. Firebug http://getfirebug.com
  79. 79. Firebug http://getfirebug.com
  80. 80. Firebug http://getfirebug.com
  81. 81. Firebug http://getfirebug.com
  82. 82. IE Developer Toolbar http://www.microsoft.com/downloads/
  83. 83. Web Developer Toolbar http://chrispederick.com/work/web-developer/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×