seg3520 conception et analyse des interfaces usagers dhtml tutorial hani jabbour university of...

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


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:[email protected]"><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!

seg3520 conception et analyse des interfaces usagers dhtml tutorial hani jabbour university of...

Documents