Atelier « Créations de sites » : Les techniques de réalisation de

sites

EPN : ...EPN : ...

Objectif de formation

• A l’issue de cet objectif de formation, A l’issue de cet objectif de formation, l’apprenant saura différencier un site l’apprenant saura différencier un site statique d’un site dynamique.statique d’un site dynamique.

Objectif pédagogique 1

• Comprendre la relation Client / ServeurComprendre la relation Client / Serveur

La relation Client / Serveur

•Qu’est-ce Qu’est-ce c’est ?c’est ?

La relation Client / Serveur

La relation Client / Serveur

• A quels services du réseau Internet A quels services du réseau Internet s’applique-t-elle ?s’applique-t-elle ?

• Pour quel(s) service(s), la relation Client Pour quel(s) service(s), la relation Client / Serveur est-elle particulière ?/ Serveur est-elle particulière ?

Objectif pédagogique 2

• Comprendre ce qu’est un site statiqueComprendre ce qu’est un site statique

Les sites statiques

• AvantagesAvantages– Mise en œuvre facile et rapideMise en œuvre facile et rapide

– Peu de connaissances techniquesPeu de connaissances techniques

– Logistique allégée (humain, matériel, logiciel)Logistique allégée (humain, matériel, logiciel)

• InconvénientsInconvénients– Maintenance et MAJ difficiles et laborieusesMaintenance et MAJ difficiles et laborieuses

– Pas de personnalisationPas de personnalisation

– Pas de liaison avec les BDDPas de liaison avec les BDD

– Pas d’interactivité avec l’internautePas d’interactivité avec l’internaute

> Approche opérationnelle > Approche opérationnelle

Les sites statiques

• Publication de contenus sur un site Publication de contenus sur un site statique :statique :1.Rédaction du contenu (rédacteur)1.Rédaction du contenu (rédacteur)

2.Validation du contenu (responsable)2.Validation du contenu (responsable)

3.Mises aux normes Internet du contenu de 3.Mises aux normes Internet du contenu de manière manuelle (technicien HTML)manière manuelle (technicien HTML)

4.Vérification de la mise en forme 4.Vérification de la mise en forme (responsable)(responsable)

5.Mise en ligne (technicien HTML)5.Mise en ligne (technicien HTML)

> Une évolution nécessaire > Une évolution nécessaire

La relation Client / Serveur d’un site statique

Les solutions techniquespour sites statiques

• HTMLHTML

• JavascriptJavascript

• DHTMLDHTML

• XMLXML

• XHTMLXHTML

• Applets JavaApplets Java

HTML - Généralités• HTML :HTML :

– Langage à balises ou tags, issu du SGML.Langage à balises ou tags, issu du SGML.

– Mise en forme des pages Web par encapsulationMise en forme des pages Web par encapsulation

– Balises d’ouverture et de fermeture avec ou non Balises d’ouverture et de fermeture avec ou non des attributsdes attributs

• Extension : .htm ou .htmlExtension : .htm ou .html

• Avantages : Avantages : – portabilité, rapidité de transmission.portabilité, rapidité de transmission.

• Inconvénients du HTML : Inconvénients du HTML : – nbre de balises limité, différence nbre de balises limité, différence

d’interprétation, MAJ difficiles (contenu lié au d’interprétation, MAJ difficiles (contenu lié au contenant)contenant)

Objectif pédagogique 3

• Comprendre ce qu’est un site Comprendre ce qu’est un site dynamiquedynamique

Les sites dynamiques

• AvantagesAvantages– MAJ rapides, faciles, réalisables par un non-MAJ rapides, faciles, réalisables par un non-

informaticien, sans risque pour le siteinformaticien, sans risque pour le site

– MAJ effectuées par plusieurs contributeursMAJ effectuées par plusieurs contributeurs

– Réutilisation et Personnalisation des données (BDD)Réutilisation et Personnalisation des données (BDD)

• InconvénientsInconvénients– Solides connaissances techniquesSolides connaissances techniques

– Logistique lourdeLogistique lourde

– Temps de conception et de réalisation importantTemps de conception et de réalisation important

– Site en évolutionSite en évolution

> Approche fonctionnelle> Approche fonctionnelle

Les sites dynamiques

• Publication de contenus sur un site Publication de contenus sur un site dynamique :dynamique :1.Rédaction du contenu dans l’outil de publication (rédacteur)1.Rédaction du contenu dans l’outil de publication (rédacteur)

2.Validation du contenu (responsable)2.Validation du contenu (responsable)

3.Mise en ligne (responsable/rédacteur)3.Mise en ligne (responsable/rédacteur)

Implication des rédacteurs Implication des rédacteurs Libération par rapport à la technique.Libération par rapport à la technique. Environnement contraint pour les rédacteurs.Environnement contraint pour les rédacteurs.

La relation Client / Serveur d’un site dynamique

Les solutions techniques pour sites dynamiques

• CGI, première interfaceCGI, première interface

• ASP, de chez MicrosoftASP, de chez Microsoft

• JSP, issu du monde JavaJSP, issu du monde Java

• Coldfusion, de chez MacromédiaColdfusion, de chez Macromédia

• PHP, issu du monde librePHP, issu du monde libre

PHP(HyperText PreProcesor)

• Langage de script côté serveurLangage de script côté serveur

• Dédié à la production de pages Web Dédié à la production de pages Web dynamiquesdynamiques

• Proche de C, Perl et JavaProche de C, Perl et Java

• Multi-serveur, multi-plate-forme.Multi-serveur, multi-plate-forme.

• Extensions : .php3, .php4, .phpExtensions : .php3, .php4, .php

• Futur standard du WebFutur standard du Web

PHP

• Avantages :Avantages :– Code source disponible gratuitement (à la Code source disponible gratuitement (à la

différence des ASP)différence des ASP)

– Scripts simplesScripts simples

– inclus dans les pages HTMLinclus dans les pages HTML

– Interfaçage facile avec MySQLInterfaçage facile avec MySQL

– Très répandu, tout comme ApacheTrès répandu, tout comme Apache

PHP

• Insertion dans le HTML : Insertion dans le HTML : – <? … ?><? … ?>

– <?php … ?><?php … ?>

– <% … %><% … %>

– <script language=PHP> …</script><script language=PHP> …</script>

• Exemple : Exemple :

Objectif pédagogique 4

• Savoir choisir une technique de Savoir choisir une technique de réalisation de sitesréalisation de sites

Choix d’une technologie

• Quels sont les critères à prendre en Quels sont les critères à prendre en compte ?compte ?

Choix d’une technologie

• Indépendant souhaitant promouvoir son Indépendant souhaitant promouvoir son activitéactivité

• Une collectivité locale souhaitant créer un Une collectivité locale souhaitant créer un IntranetIntranet

• Une agence de communication souhaitant Une agence de communication souhaitant mettre en avant ces réalisationsmettre en avant ces réalisations

• Le site d’une entreprise multinationale Le site d’une entreprise multinationale souhaitant faire du commerce électroniquesouhaitant faire du commerce électronique

Choix d’une technologie

• Aller sur le site Aller sur le site www.freshmeat.netwww.freshmeat.net

(site de veille technologique dans le (site de veille technologique dans le monde du libre)monde du libre)

• Faire une recherche sur des projets :Faire une recherche sur des projets :– de gestion de BDD de DVDde gestion de BDD de DVD

– de gestion de contenu Webde gestion de contenu Web