Développement Web Introduction générale

Developpement WebIntroduction generale

Jean-Michel Richerjean-michel.richer@univ-angers.fr

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

Juillet 2008

1 / 58

1 Introduction

2 Historique et evolution du Web

3 Difficulte du developpement Web

4 Le Web dans le monde actuel

2 / 58

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

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

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

Approfondissement :

difficulte du developpement

vitrine, personnalite

grace a l’etude de quelques pages web

58 / 58

Développement Web Introduction générale

Documents

B1B -Introduction à l'Economie Générale

INTRODUCTION GÉNÉRALE - 193.194.86.113

Préhistoire - Introduction générale

Introduction générale :

1 PROGRAMME TERMINALE CGRH Introduction générale

Le développement durable de quoi parle t on · PDF file2 Le développement durable : de quoi parle‐t‐on ? ‐Sylvie FAUCHEUX INTRODUCTION GÉNÉRALE Depuis une vingtaine d’années,

1 - Introduction Générale

Introduction générale au thème II Objectif:

Module 3 Développement - UNIL...3.3.3. La biologie du développement - introduction à l'embryologie animale 8 3.3.4. L'embryologie humaine 8 3.3.5. La physiologie générale 9 4

Introduction générale Cours de Macroéconomie ENSAE

Introduction générale – Immunité innéelomn/Data/2017/Basic/introimmunoimm... · Introduction générale – Immunité innée ... organes lymphoïdes primaires et réagissent

Introduction générale - d1n7iqsz6ob2ad.cloudfront.netd1n7iqsz6ob2ad.cloudfront.net/document/pdf/53e0a4d25545b.pdf · Rapport de stage d’application E.N.C.G.T Introduction générale

Volet Développement Durable - cme.aphp.frcme.aphp.fr/sites/default/files/CMEDoc/voletdeveloppementdurable... · Introduction générale 3 ... d’électricité sont en cours d’optimisation

Introduction générale · Introduction générale . Présentation — Le droit des obligations est parfois aussi appelé théorie générale des obligations (sur cette question et

INTRODUCTION GÉNÉRALE - droit.parisdescartes.fr

Introduction à l'Anatomie Générale

Data mining - Introduction générale

Introduction Générale - univ-tlemcen.dz

Introduction générale 2019-2020

Introduction générale origine 01