seg3520 conception et analyse des interfaces usagers dhtml tutorial hani jabbour university of...
Post on 03-Apr-2015
104 Views
Preview:
TRANSCRIPT
SEG3520 Conception et Analyse des Interfaces Usagers
DHTML TutorialHani JabbourUniversity of Ottawa Slides adopted fromNaim R. El-FarRonald PringadiW3 schools
Ronald Pringadi
(http://www.site.uottawa.ca/~pringadi/)
Naim El-Far
(http://www.site.uottawa.ca/~nelfar/)
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.
L’acronyme
HES @ Brown University 1969
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= + +
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= + +
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= + +
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.
<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.)
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 “
& &
<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:ronaldpringadi@hotmail.com"><img src="img/mail.jpg" border="0"> e-mail</a></p>
</body></html>
HTML (cont.)
HTML (cont.)
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>
HTML (cont.)
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>
HTML (cont.)
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
CSS (cont.)
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).
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.)
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.)
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.)
<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.)
CSS (cont.)
index.htm
story1.htm
story2.htm
catalog.htm
MyStyle.css
CSS (cont.)
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.
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
JavaScript – Les espaces
Utilisez des point-virgules explicitement. Un system de “semicolon insertion” peut causer des problemes.
Commentaire /* ... */ ou "//" .
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”.
JavaScript – “Events”
http://www.elated.com/tutorials/programming/javascript/events/
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>
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>
JavaScript
Conclusion
DHTML = HTML + CSS + JavaScript Un contrat de dynamism et d’usabilité. Il faut le savoir!
top related