IFT3220 – Technologies Internet

(1)

IFT3220 – Technologies Internet

Guy Lapalme

lapalme@iro.umontreal.ca

http://www.iro.umontreal.ca/~lapalme/ift3220 Bureau: 2223

Cours 1, mardi 5 septembre 2006 Plan du cours:

 Applications Web

 HTML / CSS / JavaScript

 DOM / XHTML dynamique

 CGI

 XML – Schéma

 Intra (20 octobre)

 XSLT

 Servlet + JSP

 Flash Évaluation:

4 TPs (10% - 15% - 15% - 10%) Intra 20%

Final 30%

À installer:

Oxygen (XML) Flash

Livre:

Programming the World Wide Web -=-=-=-=-=-

Origines:

60-70: Time Sharing

- Plusieurs personnes connectées à un même ordinateur.

- Connexions directes ou par modem (~110 cps)

Début des miniordinateurs (Frigo) (Invention de Unix sur PDP11 pour permettre TimeSharing) - Connexion entre ordinateurs

o

LAN (Local Area Network) [avec technologies propres à chaque type d'ordinateur.]

o WAN (Wide Area Network)

DOD (Department Of Defense): Advanced Research Project Agency (ARPA)

 ArpaNet: Protocole de communication entre réseaux  Inter-net

Réseaux robustes (permettre la reconfiguration dynamique (pannes/qualité)) IP: Internet Protocol \ Ouvert (spécifications publiques) TCP: Transmission Control Program /

Les «protocoles» étaient à l'époque des RFC (Request For Comment).

DECNet, CDCNet, SNA (IBM), CSNet (Canada début '80 similaire à ARPAnet)

 Alternatives en concurrence avec ArpaNet

DataPac, UUCP (Unix to Unix Communication Protocol), BitNet (IBM)  Par coup de téléphones!

(2)

(3)

Cours 2, vendredi 8 septembre 2006 Protocoles de communications:

Niveaux: Application HTTP, FTP, Telnet, SMTP  nous

Transport TCP / UDP Fiabilité

Entre réseaux IP Routage

Réseau Thernet, PPP, TokenRing Physique ~voltage [0/1]

Physique: ...

Réseau: Connexion physique entre deux appareils via des adresses ethernet (MAC)  6 octets [hexadécimal]

- Créer des paquets (0m5k à 1,5k) retransmis si nécessaire Routage: IP (Internet Protocol) 4 octets (décimal) |  DNS ! | Transport: Niveau client-serveur (on y arrive)

TCP: - Contrôle le transfert d'un «fichier» entre deux ordinateurs

- S'assure de la remise de tous les paquets et leur remise en ordre.

UDP: - Plus efficace, mais peut perdre des paquets.

Applications:- Session (Dialogue entre deux ordinateurs) \

- Présentation | Client/Serveur

- Application /

ex.: Telnet SMTP

pop/IMAP (Internet Mail Access Protocol) HTTP

-=-=-=-=-=-

URL: Uniform Ressource Locator

protocole://emplacement:port/répertoire/fichier.ext#ancre?paramètre (ext  type de fichier) Historique: HTTP: Tim Berners Lee, au CERN en 1990

Premier navigateur (texte) en 1991

Premier navigateur (graphique) en 1993 [Mosaic]  Netscape Internet Explorer ~ 1996

W3C: World Wide Web Consortium [Tim Berners Lee]

Clients: I.E., Netscape, Mozilla (1996) Serveurs: Apache ~70%

IIS (Internet Information Server)

Serveurs web:

- Reçoit une requête HTTP

(en fonction du nom du fichier, détermine le traitement et le content-type de la réponse.

- Retourne une réponse en indiquant le content-type (avec MIME (Multipurpose Internet Mail Extension))

 Type/sous-type:

text/plain text/html

image/gif image/jpg image/png video/mpeg video/quicktime - Ferme la connexion

(4)

Cours 3, mardi 12 septembre 2006 Protocole HTTP: (rfc2616)

méthode HTTP (requêtes) header

ligne vide

contenu du message Principales requêtes:

GET: retourne le contenu d'un URL (sans effet de bord)

POST: "exécute" le contenu spécifié par l'URL en utilisant le contenu du message. (Formulaire?) HEAD: retourne le «header» du document. (Tester l'existence?)

DELETE: demande la destruction du document.

nota: Il existe http 1.0 et 1.1 1.0: Une seule connexion

1.1: On garde la connexion «un certain temps». HOST:  Header obligatoire.

Réponses: Commencent par un nombre de 3 chiffres. A B C Donne la classe du message. 1: Information

2: Succès 3: Redirection

4: Erreur chez le client. ex.: 404 – Page inexistante

401 – Nécessite authentification.

5: Erreur sur le serveur. ex.: 500 – Erreur du serveur 503 – Serveur surchargé HTTP de base: (schéma)

Client  GET

Serveur  fichier correspondant [ Peut être une application ] Client  Affiche le contenu

Application web:

 Programme qui s'exécute sur le serveur et qui donne une réponse (en HTML ou autre).

 Le contenu retourné peut contenir un programme qui va être évalué à l'affichage (Client).

ex.: - JavaScript - Flash - Applet

(5)

Cours 4, vendredi 15 septembre 2006 Développement web:

Outils

 Publication personnelle d'une page web Éditeur texte simple

 Conception avancée d'un site Outil de gestion de liens.

 Définition d'un plan du site ex.: GoLive!, DreamWeaver

 Création d'images et de styles CMS (Constant Manag. Syst.)

 Création de modèle de page SAIP (orienté sur B.D.)

 Programmation web simple

 Doit connaître les détails de HTML / Flash / JavaScript

 Programmation web avancée

 Utilisation de XML + transformations

 Création dynamique de BD.

HTML: (HyperText Markup Language) [SGML ~ 1970]

- Permet de séparer le formattage du texte. <b></b>

- Séparer les balisages logiques du formattage. <emph></emph>

 Définir des styles de mise en page systématique.

version 1 ~ 1993 2/3  Netscape

3.2\ ~ 1997 (Standard International) 4.0/

XML ~ 1998  XHTML (2000) strict  force CSS (pas de <font>) nota: www.selfhtml.org

CSS: <style type="tex/css" media="screen">

balise {caractéristique:valeur; …}

…

.uneclasse {…}

</style>

…

<… class="uneclasse">etc.</…>

CSS: Cascading Style Sheet CSS1 ~ 1996 CSS2 ~ 1998 Niveau de style sheets:

- Inline: Dans le tag lui-même (style="...") - Document: Dans le <head> (<style>...</style>) - Externe: <link rel="stylesheet" type="text/css" href="…"/>

Spécifications: Sous forme de propriété:valeur

 Dans inline: Attribut dans le tag "p1:v1; p2:v2; ..."

 Document: Voir exemple ci-haut [sélecteur {p:v}]

 Externe: Liste de couples p/v (simplement) Sélecteur:

Simple:

- nom de balise ex.: h1 {...}

- nom d'une suite de balises ex.: body b i {...} s'applique à ce qui est <i> dans un <b> dans <body>

Classe:

tag.classe p.normal {p:v}

et plus loin: <p class="normal">

id:

Pseudoclasses:

tag: événement ex.: hover, focus, active, ...

(6)

Propriétés:

Police: font, bold 14pt "TimesNewRoman"

Décorations:

Couleurs:

Alignements:

Bordures et Remplissage:

Valeurs:

- Identificateurs - Nombres

- Longueur (entiers suivi de px ou cm ou in ou em) - Pourcentages

- URL

<span> et <div>: Deux tags spéciaux. (Div créer nouveau paragraphe, Span non)

(7)

Démo 2, lundi 18 septembre 2006 Dispo: mardi 13h30@15h30 AA2261 http://www-etud.iro.umontreal.ca/~dift3220 XHTML: Langage balisé (ouvrir et fermer)

raccourcis: <bla .../> ex.: img Entêtes: <!DOCTYPE html Public ...>

<head>

<title>Mon titre</title>

...

</head>

Corps: <body>

<h1>Titre niveau 1</h1>

... (jusqu'à <h6>)

<br/>

<a href="...">texte</a>

<a href="url|#nom_ancre">texte</a>

...

<li>texte1</li>

<li>texte2</li>

</ul>

...

<table>

<tr>

<th>Colonne1</th>

<th>Colonne2</th>

</tr>

<tr>

</tr>

</table>

...

</form>

...

</body>

</html>

Validation: Sur GoLine! ou sur W3C (Ajouter tag) Étapes:

1- GoLive 2- Nouveau site

3- Menu -> convertir XHTML -> Type de document --> strict 4- Source (double-clique)

5- Éclair (vérif) - tout décocher au bas -- enlever le background color ...

11- Créer dossier

12- Nouvelle feuille de style en cascade

(8)

Cours 5, mardi 19 septembre 2006



Tooltip.html (CSS...) JavaScript:

- Typage dynamique

- Langage de programmation complet - Syntaxe à la Java

- Langage interprété

- Pas de déclaration obligatoire

- Modèle à objet "particulier" à Prototype.

 Donne accès à tous les éléments du navigateur ex.: Fenêtre, Document, Navigateur lui-même - L'exécution se fait en chargement de la page.

<!-- <script link="....js"></script>

...

//-->

</script>

Modèle d'objets:

Objet == Liste de couples attributs – valeur.

ex.: var nomChar = new Object();

monChar.marque = "Honda";

monChar = {marque="Toyota", annee="2002", modele="echo"};

monChar = {};

for (var i in monChar) { document.write (i + ":" + monChar[i]

};

voir Objects.html

(9)

Cours 6, vendredi 22 septembre 2006

Objet == Dictionnaire couple (clé:valeur) ex.: var o = {clé1:Valeur, clé2:valeur, ...};

o.cle1 o[cle1]

intéressant: var f = function(x,y) {return x+y}; \_ équivalent

function f(x,y) {return x+y;}; /

Donc: var o = {f:function(x,y) {return x+y};  o.f(x,y) ...

Objets prédéfinis: (standard provient de ECMAScript) Object

Array Note: Penser à utiliser this !!!

Date

Math Bon outil: Firefox ! (Console JS)

String Regexp

 date.html



Objets.html Quand on utilise Char.prototype on évite la copie du code lors de l'instanciation.

Pour une variable «en prototype», c'est un peu comme une var statique.

 FormulaireFibonacci.html

 Calculette.html

 formulaireSimple.html

note: window.alert("...") plutôt que alert("...")

Tant pis, notes manuscrites !

Le prof voulait pas de protable dans son cours 

(10)

PHP:

1. Extension .php 2. <?php ... ?>

3 Commentaires: Fin de ligne: # ou //

Délimités: /* ... */

ex.: <!DOCTYPE ...>

<head>

<title>Exemple php</title>

</head>

<body>

<p>

<?php

$infos_temps = getdate();

$heure = $info_temps["hours"];

if ($heure > 23 || $heure < 6) { print "<b>Bonne nuit</b>";

}

elseif ($heure < 18) {

?>

<b>Bonne journée</b>

<?php }else {

print "<b>Bonne soirée</b>";

?> }

</p>

</body>

</html>

Variables:

statiques (locales au bloc)

typage dynamique (pas de contrainteS)

Booléen: true, false n.b.: false = 0 = "0" = ""

Entiers:

Chaînes: "..." ou '...' n.b.: print "\n" change de ligne alors que '\n' sort \n...

Tableau: tableau ou table associative.

Objet: ...

NULL: variable snon-assignées.

Ressource: lien vers DB, ...

conversion automatique: if ("0" == 0) retourne true...

=== force d'abord une vérification de type.

instructions:

- se terminent par ;

- if (condition) {} n.b.: elseif est un mot clé - for (init; cond; update)

- while (cond) {...}

- do {...} while (cond);

- foreach ($tableau as $valeur) {...}

foreach ($tableau as $cle=>$valeur) {...}

tableau:

$t = array("pomme","bleuet","fruitprefere"=>"canneberge");

0: pomme / 1: bleuet / fruitprefere: canneberge

$t[42] = false;

array_unshift($t, "premierelement");

array_shift($t); // retire premier élément array_push($t, "bla");

array_pop($t);

count($t); //...

fonctions:

- avec le mot clé function - insensible à la casse - pas surchargeable - return

- par défaut le passage se fait par valeur ex.: function add_biz($x, $y, &$z) {

$z = $x + $y;

(11)

$x = $x + 1;

return $z;

}

$i = 1;

$j = 1;

add_biz($i, $j, $k);

print "$i, $j, $k"; // 1,1,2 add_biz(&$i,$j,$k);

print "$i, $j, $k"; // 2,1,2 Bibliothèques:

--> fichier.inc

n.b.: <?php ... ?> au début+fin

include("fichier.php"); // copie verbatim http://www.php.net [case de recherche]

Formulaire:

</form>

page.php: <!DOCTYPE ...

<?php

$from = $_POST["from"];

$sujet = $_POST["sujet"];

$message = "_POST["message"];

if (mail("bla@ici.la", $sujet, $message,

"From: $form\r\n")) {

print "<p>Courriel envoyé!</p>";

} else {

print "<p>Erreur</p>";

} Sessions:

- Cookie sur le client (ID) - Fichier sur le serveur

session_start(); // (avant le doctype!)

$_SESSION // Modification simple et automatique session_destroy(); $_SESSION = array();

ex.: <?php

session_start();

?>

<!DOCTYPE ...

<?php

if (!isset($_SESSION["visites"])) {

$visites = 1;

} else {

$visites = $_SESSION["visites"] + 1;

}

print "<p>$visites</p>";

$_SESSION["visites"] = $visites;

?>

(12)

IFT3220 – Démo 11, lundi 4 décembre 2006

Note : Terminer, quand il n’y a plus de branche de sa couleur on perd.

Définir série d’états du jeu Définir un même calque Définir un fond commun (?)

Définir un nouveau calque Sol? Scène…

Calque où on va mettre nos boutons

Créer texte ‘jouer’, tirer ds la bibliothèque des symboles, le convertir en bouton Double-cliquer ensuite pour l’éditer

Aura 4 états avec lesquels je peux jouer

Ajouter une image clé dans la premier frame et éditer son code pour y ajouter «stop();» tout de suite après avoir mis : btnJouer.onPress = function() {gotoAndStop(“construction"); };

Pour utiliser le segment offert par le prof:

Ouvrir les fichiers

Fichier / importer / ouvrir biblio externe (quand fichiers fermés) Drag dans notre bibli des deux symboles fournis

Segment.newInstance(100,100,250,400,0xFF0000);

Fonctions dans Segment : Événements :

onNodePress ( sommet :MovieClip ) onNodeRelease ( sommet :MovieClip )

onLinkPress ( servira pour hacher…)

onLinkRelease Fonctions:

clicSurOrig retourne vrai si on est au dessus de ce bout clicSurDest

[ donc ds le onNodeRelease, on regarde si est au dessus de deux trucs ] Propiétés :

orig [ ce sont les MovieClip des bouts, si on a besoin d’y accéder directement ] dest couleur

Héritage (sur le wiki) :

Fichier nouveau / Fichier AS (même nom que la classe) Class MonArc extends Segment

{

public function init( /*parametres d’initialisation ici */) :MonArc {

Super.init( /*param */); //  seule différence entre hériter de qque chsoe vs de qque chose qui hérite de MovieClip // Initialisation de la classe …

return this;

}

public static fucntion newInstance( /*params*/) : MonArc {

var depth:Number = _root.getNextHighestDepth();

var inst:MonArc = _root.attachMovie( “MonArcSymbol”, “MAS” + depth, depth).init( /*param*/ );

return inst;

}

Dans bidule, Insertion Symbole

Créer, Clip, MonArcSymbole avec AS= MonArc

Ce qui permettra de : var a :MonArc = MonArc.newInstance();

a.removeMovieClip();

Note : F1 sur le nom de la function pour de l’aide.

Compilation :

Fichier / Exporter / Exporter l’animation

Remise : Page simple, lien vers fichier compilé + lien vers fichier .fla On se fout du html strict