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

Ronald Pringadi ( Naim El-Far (

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.

Lacronyme Brown University 1969

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 = ++

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 = ++

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 = ++

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.

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

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

SEG TUTORIAL Example for the students of SEG3120 [1] Hyperlink Ronald Website [2] Give Ronald HTML (cont.)

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

HTML (cont.)

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

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

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

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

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

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

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

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

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

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

JavaScript – Events ng/javascript/events/ ng/javascript/events/

JavaScript – Dans lHTML SEG 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(); :

JavaScript – Dehors lHTML SEG JavaScript TUTORIAL src=MyJS.js Welcome(); :

JavaScript

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