Développement Web Introduction générale

Developpement WebIntroduction generale


Jean-Michel [email protected]

http://www.info.univ-angers.fr/pub/richer

Juillet 2008

1 / 58


Plan

Plan

1 Introduction

2 Historique et evolution du Web

3 Difficulte du developpement Web

4 Le Web dans le monde actuel

2 / 58


Introduction

Introduction

Introduction

3 / 58


Introduction

Objectif

Objectif du cours

Organiser et rationaliser le developpement web comme dans lecadre du genie logiciel :

utilisation de la conception orientee objet

architecture MVC (Model View Controller ) + Persistence

reutilisabilite et ”genericite” du code

utilisation d’outils (Eclipse, ant, phpdoc, phpunit, ...)

4 / 58


Introduction

Objectif

Utilisation de principes et outils issus du Genie Logiciel :

Definition (Genie logiciel)

Le Genie Logiciel represente l’ensemble des paradigmes,methodes, techniques et outils destines a mener a bien ledeveloppement d’un logiciel en respectant les contraintesCQFD (couts, qualite, fonctionnalites, delais) imposees par leclient.

5 / 58


Introduction

Mise en application

Construction d’un site web

Client / Commande / Produit

mise en place de la base de donnees mysql

6 / 58


Introduction

Mise en application




conception objet en PHP

7 / 58


Introduction

Mise en application





feuilles de style CSS

8 / 58


Introduction

Mise en application






automatisation des traitements (ex : formulaires, acces BD)

9 / 58


Introduction

Mise en application






automatisation des traitements (ex : formulaires, acces BD)

un mot-cle

reutilisabilite ! (framework)

10 / 58


Introduction

Constat

Constat

Aujourd’hui n’importe qui est susceptible de creer une ou despages web :

logiciels de creation, modeles de conception

fournisseurs d’acces

Content Management System (CMS)

11 / 58


Introduction

Constat

Constat

Aujourd’hui n’importe qui est susceptible de creer une ou despages web :

logiciels de creation, modeles de conception

fournisseurs d’acces

Content Management System (CMS)

constat

mais peu nombreux sont ceux capables de creer un veritablesite web fonctionnel, facile a maintenir et utilisant destechnologies de pointe.

12 / 58


Introduction

Technologies abordees

Durant le cours nous aborderons les sujets suivants :

Technologies

XHTML, XML, CSS

PHP Objet

Javascript

AJAX (Asynchronous JAvascript + XML)

DOM (Document Object Model)

le modele MVC (Model, View, Controller )

conception d’un site web, outils, librairies

13 / 58


Introduction

Outils utilises

Nous travaillerons sous Linux avec :

Technologies

Apache2 (serveur web)

MySQL (base de donnees)

PHP 5 (langage cote serveur)

Javascript (langage cote client)

Eclipse (IDE)

Ant (automatisation)

Firefox (Firebug, DOM Inspector)

14 / 58


Introduction

Historique et evolution du web

Du web statiqueau web dynamique...

15 / 58


Historique et evolution du Web

Fondations du web

Bref historique

1962 Debut des recherches sur ARPANET

1969 Connexion des 4 premiers ordinateurs d’ARPANET

1991 World Wide Web (Tim Berners-Lee)

1993 premier navigateur : Mosaic

1994 Yahoo ! et W3C

16 / 58



Le W3C

Definition (Wolrd Wide Web Consortium - Wikipedia)

Le W3C est un organisme de normalisation fonde en octobre1994 comme un consortium charge de promouvoir lacompatibilite des technologies du World Wide Web.

Le W3C n’emet pas des normes au sens europeen, mais desrecommandations a valeur de standards industriels.

lien : http://www.webstandards.org/learn/faq/

17 / 58



Web statique

Vers le web dynamique

Au tout debut du World Wide Web (1991), les pagesetaient statiques : leur contenu etait fixe une fois pour touteet ne variait pas

18 / 58



Web statique

Vers le web dynamique

Au tout debut du World Wide Web (1991), les pagesetaient statiques : leur contenu etait fixe une fois pour touteet ne variait pas

on se contentait de diffuser de l’information mais c’etaitune veritable revolution pour l’epoque (hypertexte)

19 / 58



Web dynamique et scripts

Les debuts du web dynamique

L’introduction des CGI (Common Gateway Interface) puispar la suite la generalisation des scripts executables surle serveur dans differents langages (Perl, PHP, Python,Ruby) ont permis de faire varier le contenu des pages

20 / 58






on a alors parle de Web dynamique

21 / 58






on a alors parle de Web dynamique

le contenu de la page varie en fonction de l’utilisateur, deses preferences ou du sujet aborde

22 / 58



Applets Java

Le cas Java

au niveau du navigateur, l’interaction avec utilisateur estlimitee : on se contente de cliquer sur une image, unbouton ou un lien hypertexte

23 / 58



Applets Java

Le cas Java


l’apparition des applets Java a permis d’introduire desapplications au sein des pages web

24 / 58



Applets Java

Le cas Java



l’applet est chargee depuis le serveur mais s’execute sur leclient

25 / 58



Applets Java

Le cas Java



l’applet est chargee depuis le serveur mais s’execute sur leclient

cependant elle apparaıt comme externe a la page(technologie, manque d’interaction avec le navigateur)

26 / 58



Rich User Interface

Deveveloppement web d’applications

en dehors de Java, aucune autre technologie ne permettaitd’interaction evoluee par le biais du navigateur

27 / 58



Rich User Interface



le developpement des CSS et de Javascript permettent apresent de concevoir la page web comme une application(AJAX)

28 / 58



Rich User Interface




le but recherche est de disposer d’une plus grandeergonomie : Rich User Interface

29 / 58



Rich User Interface




le but recherche est de disposer d’une plus grandeergonomie : Rich User Interface

tout en dechargeant le serveur d’un certain nombre detaches qui sont realisees sur le client

30 / 58



Que sera le futur du developpement web ?

Reutilisabilite

la tendance generale consiste a utiliser des frameworks(Ensemble coherent de librairies ou sous-programmes)

ces frameworks sont parfois parametrables/adaptablesgrace a des fichiers XML

separation fond / forme

on s’oriente vers la creation d’applications Web

l’integration de composants reutilisables

31 / 58


Difficulte du developpement Web

Developper pour le Web, est-ce difficile ?

Difficulte du developpementWeb

32 / 58




Competences

Il faut maıtriser de nombreuses technologies :

structure du document : XML, XHTML, DOM

33 / 58




Competences



rendu : CSS (feuilles de style)

34 / 58




Competences




interaction : langage cote client (Javascript)

35 / 58




Competences





interaction : langage cote serveur (PHP, Perl, Python, ...)

36 / 58




Competences





interaction : langage cote serveur (PHP, Perl, Python, ...)

Difficultes supplementaires

ces technologies sont en constante evolution

de nouvelles technologies apparaissent tous les ans

37 / 58



Autres technologies

Autres competences

XSLT pour l’echange d’information

38 / 58



Autres technologies

Autres competences

XSLT pour l’echange d’informationles frameworks :

39 / 58



Autres technologies

Autres competences


PHP : Pear, Zend

40 / 58



Autres technologies

Autres competences


PHP : Pear, ZendJavascript : prototype, JQuery, Rico, Scriptaculous

41 / 58



Autres technologies

Autres competences


PHP : Pear, ZendJavascript : prototype, JQuery, Rico, ScriptaculousXML : JaSON, YML

42 / 58



Autres technologies

Autres competences



les CMS (Content Management Systems) : Joomla, SPIP,...

43 / 58



Autres technologies

Autres competences



les CMS (Content Management Systems) : Joomla, SPIP,...

les Servlets de Java, JSP, JSP-EL, JSF

44 / 58



Balkanisation du web

Les concepteurs de logiciels se livrent une guerre commercialeafin de faire triompher leurs produits et leurs standard :

Windows avec Internet Explorer, Microsoft Server, ActiveX,.NET, ASP, VBScript, C#, Access

45 / 58






Linux avec Firefox, Apache, PHP, MySQL

46 / 58






Linux avec Firefox, Apache, PHP, MySQL


L’utilisation de differents standard et normes conduit a labalkanisation du web : ecriture specifique en fonction desincompatibilites

47 / 58


Le Web dans le monde actuel

Aspects economiques et psychologiques

Aspects economiqueset psychologiques...

48 / 58



Web, dis moi qui je suis !

Le web et la reflection

Internet et le World Wide Web sont devenus un formidablevecteur d’information. Tant au niveau de la diffusion(broadcasting) que du partage d’information et de lacooperation (ex. wikipedia).

49 / 58






aujourd’hui, le site web represente la vitrine d’uneentreprise

50 / 58






aujourd’hui, le site web represente la vitrine d’uneentreprise

un site bien concu represente donc un avantage certainpour l’entreprise et est le gage de son serieux et de saqualite

51 / 58



Web et page personnelle

la page web personnelle

De la meme maniere, la page web personnelle est le reflet dela personnalite d’un individu et peut etre :

un atout

ou se reveler un inconvenient

lors du recrutement d’une personne (perception).

52 / 58




Criteres

organisation de la page (clarete, esprit de synthese)

53 / 58




Criteres


esthetisme (perfectionnisme, aller au bout des choses)

54 / 58




Criteres



type d’information diffusee (ex. blog, denigrer et/ouconstruire)

55 / 58




Criteres



type d’information diffusee (ex. blog, denigrer et/ouconstruire)

technologies utilisees et leur maıtrise (plus difficile a juger)

56 / 58



Dessine moi un site web

Competences

Sites web developpes :

departement : www.info.univ-angers.fr

laboratoire LERIA : www.info.univ-angers.fr/leria

site personnel

sites DBDB, WebSEN, BIL, CFBP

Connaissances

XHTML, XML, CSS, PHP, Javascript, Apache2, Tomcat,Servlet, Java

57 / 58



Mise en application

Mise en application

Approfondissement :

difficulte du developpement

vitrine, personnalite

grace a l’etude de quelques pages web

58 / 58

Documents

Développement Web Introduction générale