SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of...
-
Upload
amadour-lepine -
Category
Documents
-
view
104 -
download
2
Transcript of SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of...
![Page 1: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/1.jpg)
SEG3520 Conception et Analyse des Interfaces Usagers
DHTML TutorialHani JabbourUniversity of Ottawa Slides adopted fromNaim R. El-FarRonald PringadiW3 schools
![Page 2: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/2.jpg)
Ronald Pringadi
(http://www.site.uottawa.ca/~pringadi/)
Naim El-Far
(http://www.site.uottawa.ca/~nelfar/)
![Page 3: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/3.jpg)
L’acronyme
Dynamic Hyper-Text Markup Language C’est un Language donc un développeur et une
platforme. Markup: “Markup” historiquement “marking up” un
manuscript ( preciser la police, la taille pour l’imprimerie)
Hyper-Text: “Hypertext” mi1960s by Ted Nelson et Douglas Engelbart (L’inventeur de la sourie).
Dynamic: interactive, non static.
![Page 4: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/4.jpg)
L’acronyme
HES @ Brown University 1969
![Page 5: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/5.jpg)
Ce qui constitue le DHTML
1. HTML: Hypertext Markup Language C’est quoi? Les W3C ISO/IEC 15445:2000 aka “HTML 4.01 Strict” Le development actuel -> vers le XHTML Le componant de base du DHTML Un componant de presentation (structure et contenu)
DHTML HTML CSS JavaScript= + +
![Page 6: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/6.jpg)
DHTML Components (cont.)
2. CSS: Cascading Style Sheets C’est quoi A quoi ça sere? W3C CSS v 2.1 (2004) Componant de presentation (Structure seulement)
DHTML HTML CSS JavaScript= + +
![Page 7: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/7.jpg)
DHTML Components (cont.)
2. JavaScript: “Scripting” en Java C’est quoi “scripting”? Brendan Eich: LiveScript (Netscape Navigator 2.0) Renomé JavaScript en 1995 A quoi ça sere? JavaScript 1.5 JavaScript 2.0 Component d’interactivité
DHTML HTML CSS JavaScript= + +
![Page 8: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/8.jpg)
![Page 9: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/9.jpg)
HTML Un fichier HTML est un fichier text contenant des
”markup tags” ou tagues de marquage. Utilisez surtout pour le Web, mais pas
necessairement. (calendriers, year book etc…) les “markup tags” vont indiquer pour le
navigateur Comment presenter la page. Un fichier HTML doit avoir une extension htm or
html. Peut être facilement créé en utilisant un simple
editeur text.
![Page 10: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/10.jpg)
<html><head>
<title>Title of page</title></head><body>
This is my first homepage.<b>This text is bold</b>
</body>
</html> La plupart des tagues on une tague d’ouverture et une
autre tague de fermeture:<html> </html>, <head> </head>
Mais pas toutes: <br>, <hr>, <img>
HTML (cont.)
![Page 11: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/11.jpg)
HTML (cont.)
Certaines tagues prennent des attribus:<body bgcolor = “green">
HTML Tags Des characteres speciaux on des representation speciale.
Pourquoi?
Non-breaking space
" quotation double “
& &
![Page 12: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/12.jpg)
<html><head><title>SEG3120 - TUTORIAL</title></head><body>
<p><strong>Example for the students of SEG3120</strong></p><hr><p>[1] Hyperlink<br>Ronald Website<a href="http://www.geocities.com/ronaldpringadi">
http://www.geocities.com/ronaldpringadi</a></p>
<p>[2] Email<br>Give Ronald<a href="mailto:[email protected]"><img src="img/mail.jpg" border="0"> e-mail</a></p>
</body></html>
HTML (cont.)
![Page 13: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/13.jpg)
HTML (cont.)
![Page 14: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/14.jpg)
HTMLTables
<body><p><strong>Example for the students of SEG3120<br>Student Marks</strong></p><table width="100%" border="1"> <tr bgcolor="#99CCFF"> <td>Student_#</td> <td>Student Name </td> <td>Project Description </td> <td>Mark</td> <td>Grade</td> </tr> <tr> <td>001</td> <td>Jack</td> <td>Online teaching E-learning </td> <td>86</td> <td>A</td> </tr> <tr> <td>002</td> <td>Jill</td> <td>Cybernatic Intelegence</td> <td>65</td> <td>C++</td> </tr></table>
</body>
![Page 15: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/15.jpg)
HTML (cont.)
![Page 16: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/16.jpg)
HTML (cont.)<body>
<p><strong>Example for the students of SEG3120<br>Eggnog Recipe</strong></p><ul type="square">
<li>eggs</li> <li>1 cup + 1 tablespoon sugar</li> <li>1/2 teaspoon vanilla extract</li> <li>1/4 teaspoon ground nutmeg</li> <li>3/4 cup brandy</li> <li>1/3 cup dark rum (Captain Morgan for best flavor)</li> <li>2 cups whipping cream</li> <li>2 cups milk</li>
</ul></body>
![Page 17: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/17.jpg)
HTML (cont.)
![Page 18: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/18.jpg)
![Page 19: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/19.jpg)
CSS Cascading Style Sheets Defini le Styles de la plupart des
document basé sur XML. Avantages: Modularité Plus simple,
plus facile a utiliser et a réutiliser
![Page 20: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/20.jpg)
CSS (cont.)
![Page 21: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/21.jpg)
CSS (cont.) Peut être mis dans le fichier HTML ou
dehors. (dans ce cas le fichier doit avoir l’extension .css)
Dans les deux cas peut definir les tagues et les classes.(tag modifier, class modifier).
![Page 22: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/22.jpg)
h1 {h1 {font-family: Arial, Helvetica, sans-serif;font-size: 16px;color: #3366FF;background-color: #CCCCCC;text-transform: capitalize;
}}.cool_P {.cool_P {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #0099CC;font-style: oblique;
}}
“tag modifier”Toutes les tagues <h1>Seront modifiées
“Class modifier”Toutes les taguesavec l’attribuclass=“cool_p” class=“cool_p” seront modifiées
CSS (cont.)
![Page 23: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/23.jpg)
HTML file
<body><H1>the ugly duckling</H1><p class="cool_P">It was a golden afternoon in late summer.…</p><p>"These eggs are taking a long time to hatch!" she sighed….</p><p>"Oh, the world's much bigger than this," quacked the….</p></body>
CSS (cont.)
![Page 24: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/24.jpg)
CSS file
.cool_P {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #333399;
}h1 {
font-family: Arial, Helvetica, sans-serif;text-transform: capitalize;color: #FFFFFF;background-color: #666666;font-size: 16px;
}.hot_P {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #990000;
}
CSS (cont.)
![Page 25: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/25.jpg)
<head><title>SEG3120 - CSS TUTORIAL</title><link href<link href="SEG3120.css" rel="stylesheet" type="text/css"></head><body>
<H1>the ugly duckling</H1><p class="cool_P">It was a golden afternoon in late summer.…</p><p class=“hot_P">"These eggs are taking a long time to hatch!" she sighed….</p><p class="cool_P"> "Oh, the world's much bigger than this," quacked the….</p></body>
CSS (cont.)
![Page 26: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/26.jpg)
CSS (cont.)
![Page 27: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/27.jpg)
index.htm
story1.htm
story2.htm
catalog.htm
MyStyle.css
CSS (cont.)
![Page 28: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/28.jpg)
![Page 29: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/29.jpg)
JavaScript –Description
JavaScript fait parti du navigateur, il utilise les interfaces DOM ou Document Object Models pour interagir avec le client et le serveur web. Ceci permet une dynamique et une interactivité.
Des fonctions introduite dans l’HTML peuvent alors accomplir des manoeuvre dynamique ne pouvant pas etre appliquées avec l’HTML static.
Certains logiciel autre que les navigateurs peuvent aussi interpreter le JavaScript. Ex: Adobe acrobat et acrobat reader.
![Page 30: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/30.jpg)
JavaScript –Description
Syntax similair au Java Capitalisation compte. Les fonctions JavaScript peuvent etre definis
dans le fichier HTML ou dans un fichier externe .js
Dependant des platformes. Peux contenir beaucoup d’erreurs
![Page 31: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/31.jpg)
JavaScript – Les espaces
Utilisez des point-virgules explicitement. Un system de “semicolon insertion” peut causer des problemes.
Commentaire /* ... */ ou "//" .
![Page 32: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/32.jpg)
JavaScript – Variables
Les variables sont dynamique: Definis automatiquement a l’attribution d’une valeur, ou par l’utilisation du mot reservé “var”
Les variables qui sont declaré a l’exterieur d’une fonction ou sans l’utilisation du mot var sont considerés comme etant globales. Les variables declarées dans une fonction en utilisant “var” sont locales a cette fonction.
Pour utiliser les variables d’une page a une autre on peut se servire d’une “cookie” ou d’un “hidden frame”.
![Page 33: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/33.jpg)
JavaScript – “Events”
http://www.elated.com/tutorials/programming/javascript/events/
![Page 34: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/34.jpg)
JavaScript – Dans l’HTML<head><title>SEG3120 - JavaScript TUTORIAL</title>
<script language="JavaScript">function Welcome()function Welcome() {
var TotalStudent =33;var Greet="Hallo SEG3120";window.alert(Greet);document.writeln("Welcome SEG3120! <br>" );document.writeln("We have: "+ TotalStudent + " participants today <br>" );
}</script>
</head><body>
<script language="JavaScript">Welcome();Welcome();
</script>::
</body>
![Page 35: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/35.jpg)
JavaScript – Dehors l’HTML<head><title>SEG3120 - JavaScript TUTORIAL</title>
<script language="JavaScript“ src=“MyJS.js”src=“MyJS.js”></script>
</head><body>
<script language="JavaScript">Welcome();Welcome();
</script>:::
</body>
![Page 36: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/36.jpg)
JavaScript
![Page 37: SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.](https://reader036.fdocuments.us/reader036/viewer/2022070309/551d9da1497959293b8cfd11/html5/thumbnails/37.jpg)
Conclusion
DHTML = HTML + CSS + JavaScript Un contrat de dynamism et d’usabilité. Il faut le savoir!