développement web introduction générale
Post on 02-Jan-2017
223 Views
Preview:
TRANSCRIPT
Developpement WebIntroduction generale
Developpement WebIntroduction generale
Jean-Michel Richerjean-michel.richer@univ-angers.fr
http://www.info.univ-angers.fr/pub/richer
Juillet 2008
1 / 58
Developpement WebIntroduction generale
Plan
Plan
1 Introduction
2 Historique et evolution du Web
3 Difficulte du developpement Web
4 Le Web dans le monde actuel
2 / 58
Developpement WebIntroduction generale
Introduction
Introduction
Introduction
3 / 58
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
Introduction
Mise en application
Construction d’un site web
Client / Commande / Produit
mise en place de la base de donnees mysql
6 / 58
Developpement WebIntroduction generale
Introduction
Mise en application
Construction d’un site web
Client / Commande / Produit
mise en place de la base de donnees mysql
conception objet en PHP
7 / 58
Developpement WebIntroduction generale
Introduction
Mise en application
Construction d’un site web
Client / Commande / Produit
mise en place de la base de donnees mysql
conception objet en PHP
feuilles de style CSS
8 / 58
Developpement WebIntroduction generale
Introduction
Mise en application
Construction d’un site web
Client / Commande / Produit
mise en place de la base de donnees mysql
conception objet en PHP
feuilles de style CSS
automatisation des traitements (ex : formulaires, acces BD)
9 / 58
Developpement WebIntroduction generale
Introduction
Mise en application
Construction d’un site web
Client / Commande / Produit
mise en place de la base de donnees mysql
conception objet en PHP
feuilles de style CSS
automatisation des traitements (ex : formulaires, acces BD)
un mot-cle
reutilisabilite ! (framework)
10 / 58
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
Introduction
Historique et evolution du web
Du web statiqueau web dynamique...
15 / 58
Developpement WebIntroduction generale
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
on a alors parle de Web dynamique
21 / 58
Developpement WebIntroduction generale
Historique et evolution du Web
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
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
l’apparition des applets Java a permis d’introduire desapplications au sein des pages web
24 / 58
Developpement WebIntroduction generale
Historique et evolution du Web
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
l’apparition des applets Java a permis d’introduire desapplications au sein des pages web
l’applet est chargee depuis le serveur mais s’execute sur leclient
25 / 58
Developpement WebIntroduction generale
Historique et evolution du Web
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
l’apparition des applets Java a permis d’introduire desapplications au sein des pages web
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Historique et evolution du Web
Rich User Interface
Deveveloppement web d’applications
en dehors de Java, aucune autre technologie ne permettaitd’interaction evoluee par le biais du navigateur
le developpement des CSS et de Javascript permettent apresent de concevoir la page web comme une application(AJAX)
28 / 58
Developpement WebIntroduction generale
Historique et evolution du Web
Rich User Interface
Deveveloppement web d’applications
en dehors de Java, aucune autre technologie ne permettaitd’interaction evoluee par le biais du navigateur
le developpement des CSS et de Javascript permettent apresent de concevoir la page web comme une application(AJAX)
le but recherche est de disposer d’une plus grandeergonomie : Rich User Interface
29 / 58
Developpement WebIntroduction generale
Historique et evolution du Web
Rich User Interface
Deveveloppement web d’applications
en dehors de Java, aucune autre technologie ne permettaitd’interaction evoluee par le biais du navigateur
le developpement des CSS et de Javascript permettent apresent de concevoir la page web comme une application(AJAX)
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
Developpement WebIntroduction generale
Historique et evolution du Web
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
Developpement WebIntroduction generale
Difficulte du developpement Web
Developper pour le Web, est-ce difficile ?
Difficulte du developpementWeb
32 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Developper pour le Web, est-ce difficile ?
Competences
Il faut maıtriser de nombreuses technologies :
structure du document : XML, XHTML, DOM
33 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Developper pour le Web, est-ce difficile ?
Competences
Il faut maıtriser de nombreuses technologies :
structure du document : XML, XHTML, DOM
rendu : CSS (feuilles de style)
34 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Developper pour le Web, est-ce difficile ?
Competences
Il faut maıtriser de nombreuses technologies :
structure du document : XML, XHTML, DOM
rendu : CSS (feuilles de style)
interaction : langage cote client (Javascript)
35 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Developper pour le Web, est-ce difficile ?
Competences
Il faut maıtriser de nombreuses technologies :
structure du document : XML, XHTML, DOM
rendu : CSS (feuilles de style)
interaction : langage cote client (Javascript)
interaction : langage cote serveur (PHP, Perl, Python, ...)
36 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Developper pour le Web, est-ce difficile ?
Competences
Il faut maıtriser de nombreuses technologies :
structure du document : XML, XHTML, DOM
rendu : CSS (feuilles de style)
interaction : langage cote client (Javascript)
interaction : langage cote serveur (PHP, Perl, Python, ...)
Difficultes supplementaires
ces technologies sont en constante evolution
de nouvelles technologies apparaissent tous les ans
37 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’information
38 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’informationles frameworks :
39 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’informationles frameworks :
PHP : Pear, Zend
40 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’informationles frameworks :
PHP : Pear, ZendJavascript : prototype, JQuery, Rico, Scriptaculous
41 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’informationles frameworks :
PHP : Pear, ZendJavascript : prototype, JQuery, Rico, ScriptaculousXML : JaSON, YML
42 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’informationles frameworks :
PHP : Pear, ZendJavascript : prototype, JQuery, Rico, ScriptaculousXML : JaSON, YML
les CMS (Content Management Systems) : Joomla, SPIP,...
43 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
Autres technologies
Autres competences
XSLT pour l’echange d’informationles frameworks :
PHP : Pear, ZendJavascript : prototype, JQuery, Rico, ScriptaculousXML : JaSON, YML
les CMS (Content Management Systems) : Joomla, SPIP,...
les Servlets de Java, JSP, JSP-EL, JSF
44 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
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
Developpement WebIntroduction generale
Difficulte du developpement Web
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
Linux avec Firefox, Apache, PHP, MySQL
46 / 58
Developpement WebIntroduction generale
Difficulte du developpement Web
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
Linux avec Firefox, Apache, PHP, MySQL
Balkanisation du web
L’utilisation de differents standard et normes conduit a labalkanisation du web : ecriture specifique en fonction desincompatibilites
47 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
Aspects economiques et psychologiques
Aspects economiqueset psychologiques...
48 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
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
Developpement WebIntroduction generale
Le Web dans le monde actuel
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).
aujourd’hui, le site web represente la vitrine d’uneentreprise
50 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
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).
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
Developpement WebIntroduction generale
Le Web dans le monde actuel
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
Developpement WebIntroduction generale
Le Web dans le monde actuel
Web et page personnelle
Criteres
organisation de la page (clarete, esprit de synthese)
53 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
Web et page personnelle
Criteres
organisation de la page (clarete, esprit de synthese)
esthetisme (perfectionnisme, aller au bout des choses)
54 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
Web et page personnelle
Criteres
organisation de la page (clarete, esprit de synthese)
esthetisme (perfectionnisme, aller au bout des choses)
type d’information diffusee (ex. blog, denigrer et/ouconstruire)
55 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
Web et page personnelle
Criteres
organisation de la page (clarete, esprit de synthese)
esthetisme (perfectionnisme, aller au bout des choses)
type d’information diffusee (ex. blog, denigrer et/ouconstruire)
technologies utilisees et leur maıtrise (plus difficile a juger)
56 / 58
Developpement WebIntroduction generale
Le Web dans le monde actuel
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
Developpement WebIntroduction generale
Le Web dans le monde actuel
Mise en application
Mise en application
Approfondissement :
difficulte du developpement
vitrine, personnalite
grace a l’etude de quelques pages web
58 / 58
top related