SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi.

Présentation au sujet: "SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi."— Transcription de la présentation:

1 SEG3520 Conception et Analyse des Interfaces Usagers DHTML Tutorial Hani Jabbour University of Ottawa Slides adopted from Naim R. El-Far Ronald Pringadi W3 schools

2 Ronald Pringadi (http://www.site.uottawa.ca/~pringadi/)http://www.site.uottawa.ca/~pringadi/ Naim El-Far (http://www.site.uottawa.ca/~nelfar/)http://www.site.uottawa.ca/~nelfar/

3 Lacronyme Dynamic Hyper-Text Markup Language Cest un Language donc un développeur et une platforme. Markup: Markup historiquement marking up un manuscript ( preciser la police, la taille pour limprimerie) Hyper-Text: Hypertext mi1960s by Ted Nelson et Douglas Engelbart (Linventeur de la sourie). Dynamic: interactive, non static.

4 Lacronyme HES @ Brown University 1969

5 Ce qui constitue le DHTML 1. HTML: Hypertext Markup Language Cest 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) DHTMLHTMLCSSJavaScript = ++

6 DHTML Components (cont.) 2. CSS: Cascading Style Sheets Cest quoi A quoi ça sere? W3C CSS v 2.1 (2004) Componant de presentation (Structure seulement) DHTMLHTMLCSSJavaScript = ++

7 DHTML Components (cont.) 2. JavaScript: Scripting en Java Cest quoi scripting? Brendan Eich: LiveScript (Netscape Navigator 2.0) Renomé JavaScript en 1995 A quoi ça sere? JavaScript 1.5 JavaScript 2.0 Component dinteractivité DHTMLHTMLCSSJavaScript = ++

8

9 HTML Un fichier HTML est un fichier text contenant desmarkup 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.

10 Title of page This is my first homepage. This text is bold La plupart des tagues on une tague douverture et une autre tague de fermeture:, Mais pas toutes:,, HTML (cont.)

11 Certaines tagues prennent des attribus: HTML Tags Des characteres speciaux on des representation speciale. Pourquoi? Non-breaking space "quotation double &&

12 SEG3120 - TUTORIAL Example for the students of SEG3120 [1] Hyperlink Ronald Website http://www.geocities.com/ronaldpringadi [2] Email Give Ronald e-mail HTML (cont.)

13

14 HTML Tables Example for the students of SEG3120 Student Marks Student_# Student Name Project Description Mark Grade 001 Jack Online teaching E-learning 86 A 002 Jill Cybernatic Intelegence 65 C++

15 HTML (cont.)

16 Example for the students of SEG3120 Eggnog Recipe eggs 1 cup + 1 tablespoon sugar 1/2 teaspoon vanilla extract 1/4 teaspoon ground nutmeg 3/4 cup brandy 1/3 cup dark rum (Captain Morgan for best flavor) 2 cups whipping cream 2 cups milk

17 HTML (cont.)

18

19 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

20 CSS (cont.)

21 Peut être mis dans le fichier HTML ou dehors. (dans ce cas le fichier doit avoir lextension.css) Dans les deux cas peut definir les tagues et les classes. (tag modifier, class modifier).

22 h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #3366FF; background-color: #CCCCCC; text-transform: capitalize;}.cool_P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0099CC; font-style: oblique;} tag modifier Toutes les tagues Seront modifiées Class modifier class=cool_p Toutes les tagues avec lattribu class=cool_p seront modifiées CSS (cont.)

23 HTML file the ugly duckling It was a golden afternoon in late summer.… "These eggs are taking a long time to hatch!" she sighed…. "Oh, the world's much bigger than this," quacked the…. CSS (cont.)

24 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.)

25 SEG3120 - CSS TUTORIAL the ugly duckling It was a golden afternoon in late summer.… "These eggs are taking a long time to hatch!" she sighed…. "Oh, the world's much bigger than this," quacked the…. CSS (cont.)

26

27 index.htm story1.htm story2.htm catalog.htm MyStyle.css CSS (cont.)

28

29 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 lHTML peuvent alors accomplir des manoeuvre dynamique ne pouvant pas etre appliquées avec lHTML static. Certains logiciel autre que les navigateurs peuvent aussi interpreter le JavaScript. Ex: Adobe acrobat et acrobat reader.

30 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 derreurs

31 JavaScript – Les espaces Utilisez des point-virgules explicitement. Un system de semicolon insertion peut causer des problemes. Commentaire /*... */ ou "//".

32 JavaScript – Variables Les variables sont dynamique: Definis automatiquement a lattribution dune valeur, ou par lutilisation du mot reservé var Les variables qui sont declaré a lexterieur dune fonction ou sans lutilisation 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 dune page a une autre on peut se servire dune cookie ou dun hidden frame.

33 JavaScript – Events http://www.elated.com/tutorials/programmi ng/javascript/events/ http://www.elated.com/tutorials/programmi ng/javascript/events/

34 JavaScript – Dans lHTML SEG3120 - JavaScript TUTORIAL function Welcome() function Welcome() { var TotalStudent =33; var Greet="Hallo SEG3120"; window.alert(Greet); document.writeln("Welcome SEG3120! " ); document.writeln("We have: "+ TotalStudent + " participants today " ); } Welcome(); :

35 JavaScript – Dehors lHTML SEG3120 - JavaScript TUTORIAL src=MyJS.js Welcome(); :

36 JavaScript

37 Conclusion DHTML = HTML + CSS + JavaScript Un contrat de dynamism et dusabilité. Il faut le savoir!