Développement Web Introduction générale

Transcription

1 1 / 58 Développement Web Introduction générale Jean-Michel Richer jean-michel.richer@univ-angers.fr Juillet 2008

2 2 / 58 Plan Plan 1 Introduction 2 Historique et évolution du Web 3 Difficulté du développement Web 4 Le Web dans le monde actuel

3 3 / 58 Introduction Introduction Introduction

4 4 / 58 Introduction Objectif Objectif du cours Organiser et rationaliser le développement web comme dans le cadre du génie logiciel : utilisation de la conception orientée objet architecture MVC (Model View Controller) + Persistence réutilisabilité et généricité du code utilisation d outils (Eclipse, ant, phpdoc, phpunit,...)

5 5 / 58 Introduction Objectif Utilisation de principes et outils issus du Génie Logiciel : Definition (Génie logiciel) Le Génie Logiciel représente l ensemble des paradigmes, méthodes, techniques et outils destinés à mener à bien le développement d un logiciel en respectant les contraintes CQFD (coûts, qualité, fonctionnalités, délais) imposées par le client.

6 Introduction Mise en application Construction d un site web Client / Commande / Produit mise en place de la base de données mysql 6 / 58

7 Introduction Mise en application Construction d un site web Client / Commande / Produit mise en place de la base de données mysql conception objet en PHP 7 / 58

8 Introduction Mise en application Construction d un site web Client / Commande / Produit mise en place de la base de données mysql conception objet en PHP feuilles de style CSS 8 / 58

9 Introduction Mise en application Construction d un site web Client / Commande / Produit mise en place de la base de données mysql conception objet en PHP feuilles de style CSS automatisation des traitements (ex : formulaires, accès BD) 9 / 58

10 Introduction Mise en application Construction d un site web Client / Commande / Produit mise en place de la base de données mysql conception objet en PHP feuilles de style CSS automatisation des traitements (ex : formulaires, accès BD) un mot-clé réutilisabilité! (framework) 10 / 58

11 11 / 58 Introduction Constat Constat Aujourd hui n importe qui est susceptible de créer une ou des pages web : logiciels de création, modèles de conception fournisseurs d accès Content Management System (CMS)

12 12 / 58 Introduction Constat Constat Aujourd hui n importe qui est susceptible de créer une ou des pages web : logiciels de création, modèles de conception fournisseurs d accès Content Management System (CMS) constat mais peu nombreux sont ceux capables de créer un véritable site web fonctionnel, facile à maintenir et utilisant des technologies de pointe.

13 13 / 58 Introduction Technologies abordées Durant le cours nous aborderons les sujets suivants : Technologies XHTML, XML, CSS PHP Objet Javascript AJAX (Asynchronous JAvascript + XML) DOM (Document Object Model) le modèle MVC (Model, View, Controller) conception d un site web, outils, librairies

14 14 / 58 Introduction Outils utilisés Nous travaillerons sous Linux avec : Technologies Apache2 (serveur web) MySQL (base de données) PHP 5 (langage côté serveur) Javascript (langage côté client) Eclipse (IDE) Ant (automatisation) Firefox (Firebug, DOM Inspector)

15 15 / 58 Introduction Historique et évolution du web Du web statique au web dynamique...

16 16 / 58 Historique et évolution du Web Fondations du web Bref historique 1962 Début 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

17 17 / 58 Historique et évolution du Web Le W3C Definition (Wolrd Wide Web Consortium - Wikipédia) Le W3C est un organisme de normalisation fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web. Le W3C n émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. lien :

18 18 / 58 Historique et évolution du Web Web statique Vers le web dynamique Au tout début du World Wide Web (1991), les pages étaient statiques : leur contenu était fixé une fois pour toute et ne variait pas

19 19 / 58 Historique et évolution du Web Web statique Vers le web dynamique Au tout début du World Wide Web (1991), les pages étaient statiques : leur contenu était fixé une fois pour toute et ne variait pas on se contentait de diffuser de l information mais c était une véritable révolution pour l époque (hypertexte)

20 20 / 58 Historique et évolution du Web Web dynamique et scripts Les débuts du web dynamique L introduction des CGI (Common Gateway Interface) puis par la suite la généralisation des scripts exécutables sur le serveur dans différents langages (Perl, PHP, Python, Ruby) ont permis de faire varier le contenu des pages

21 21 / 58 Historique et évolution du Web Web dynamique et scripts Les débuts du web dynamique L introduction des CGI (Common Gateway Interface) puis par la suite la généralisation des scripts exécutables sur le serveur dans différents langages (Perl, PHP, Python, Ruby) ont permis de faire varier le contenu des pages on a alors parlé de Web dynamique

22 22 / 58 Historique et évolution du Web Web dynamique et scripts Les débuts du web dynamique L introduction des CGI (Common Gateway Interface) puis par la suite la généralisation des scripts exécutables sur le serveur dans différents langages (Perl, PHP, Python, Ruby) ont permis de faire varier le contenu des pages on a alors parlé de Web dynamique le contenu de la page varie en fonction de l utilisateur, de ses préférences ou du sujet abordé

23 Historique et évolution du Web Applets Java Le cas Java au niveau du navigateur, l interaction avec utilisateur est limitée : on se contente de cliquer sur une image, un bouton ou un lien hypertexte 23 / 58

24 Historique et évolution du Web Applets Java Le cas Java au niveau du navigateur, l interaction avec utilisateur est limitée : on se contente de cliquer sur une image, un bouton ou un lien hypertexte l apparition des applets Java a permis d introduire des applications au sein des pages web 24 / 58

25 Historique et évolution du Web Applets Java Le cas Java au niveau du navigateur, l interaction avec utilisateur est limitée : on se contente de cliquer sur une image, un bouton ou un lien hypertexte l apparition des applets Java a permis d introduire des applications au sein des pages web l applet est chargée depuis le serveur mais s exécute sur le client 25 / 58

26 Historique et évolution du Web Applets Java Le cas Java au niveau du navigateur, l interaction avec utilisateur est limitée : on se contente de cliquer sur une image, un bouton ou un lien hypertexte l apparition des applets Java a permis d introduire des applications au sein des pages web l applet est chargée depuis le serveur mais s exécute sur le client cependant elle apparaît comme externe à la page (technologie, manque d interaction avec le navigateur) 26 / 58

27 27 / 58 Historique et évolution du Web Rich User Interface Devéveloppement web d applications en dehors de Java, aucune autre technologie ne permettait d interaction évoluée par le biais du navigateur

28 28 / 58 Historique et évolution du Web Rich User Interface Devéveloppement web d applications en dehors de Java, aucune autre technologie ne permettait d interaction évoluée par le biais du navigateur le développement des CSS et de Javascript permettent à présent de concevoir la page web comme une application (AJAX)

29 29 / 58 Historique et évolution du Web Rich User Interface Devéveloppement web d applications en dehors de Java, aucune autre technologie ne permettait d interaction évoluée par le biais du navigateur le développement des CSS et de Javascript permettent à présent de concevoir la page web comme une application (AJAX) le but recherché est de disposer d une plus grande ergonomie : Rich User Interface

30 30 / 58 Historique et évolution du Web Rich User Interface Devéveloppement web d applications en dehors de Java, aucune autre technologie ne permettait d interaction évoluée par le biais du navigateur le développement des CSS et de Javascript permettent à présent de concevoir la page web comme une application (AJAX) le but recherché est de disposer d une plus grande ergonomie : Rich User Interface tout en déchargeant le serveur d un certain nombre de tâches qui sont réalisées sur le client

31 31 / 58 Historique et évolution du Web Que sera le futur du développement web? Réutilisabilité la tendance générale consiste à utiliser des frameworks (Ensemble cohérent de librairies ou sous-programmes) ces frameworks sont parfois paramétrables/adaptables grâce à des fichiers XML séparation fond / forme on s oriente vers la création d applications Web l intégration de composants réutilisables

32 32 / 58 Difficulté du développement Web Développer pour le Web, est-ce difficile? Difficulté du développement Web

33 33 / 58 Difficulté du développement Web Développer pour le Web, est-ce difficile? Compétences Il faut maîtriser de nombreuses technologies : structure du document : XML, XHTML, DOM

34 34 / 58 Difficulté du développement Web Développer pour le Web, est-ce difficile? Compétences Il faut maîtriser de nombreuses technologies : structure du document : XML, XHTML, DOM rendu : CSS (feuilles de style)

35 35 / 58 Difficulté du développement Web Développer pour le Web, est-ce difficile? Compétences Il faut maîtriser de nombreuses technologies : structure du document : XML, XHTML, DOM rendu : CSS (feuilles de style) interaction : langage côté client (Javascript)

36 36 / 58 Difficulté du développement Web Développer pour le Web, est-ce difficile? Compétences Il faut maîtriser de nombreuses technologies : structure du document : XML, XHTML, DOM rendu : CSS (feuilles de style) interaction : langage côté client (Javascript) interaction : langage côté serveur (PHP, Perl, Python,...)

37 37 / 58 Difficulté du développement Web Développer pour le Web, est-ce difficile? Compétences Il faut maîtriser de nombreuses technologies : structure du document : XML, XHTML, DOM rendu : CSS (feuilles de style) interaction : langage côté client (Javascript) interaction : langage côté serveur (PHP, Perl, Python,...) Difficultés supplémentaires ces technologies sont en constante évolution de nouvelles technologies apparaissent tous les ans

38 38 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information

39 39 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information les frameworks :

40 40 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information les frameworks : PHP : Pear, Zend

41 41 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information les frameworks : PHP : Pear, Zend Javascript : prototype, JQuery, Rico, Scriptaculous

42 42 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information les frameworks : PHP : Pear, Zend Javascript : prototype, JQuery, Rico, Scriptaculous XML : JaSON, YML

43 43 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information les frameworks : PHP : Pear, Zend Javascript : prototype, JQuery, Rico, Scriptaculous XML : JaSON, YML les CMS (Content Management Systems) : Joomla, SPIP,...

44 44 / 58 Difficulté du développement Web Autres technologies Autres compétences XSLT pour l échange d information les frameworks : PHP : Pear, Zend Javascript : prototype, JQuery, Rico, Scriptaculous XML : JaSON, YML les CMS (Content Management Systems) : Joomla, SPIP,... les Servlets de Java, JSP, JSP-EL, JSF

45 45 / 58 Difficulté du développement Web Balkanisation du web Les concepteurs de logiciels se livrent une guerre commerciale afin de faire triompher leurs produits et leurs standard : Windows avec Internet Explorer, Microsoft Server, ActiveX,.NET, ASP, VBScript, C#, Access

46 46 / 58 Difficulté du développement Web Balkanisation du web Les concepteurs de logiciels se livrent une guerre commerciale afin 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

47 47 / 58 Difficulté du développement Web Balkanisation du web Les concepteurs de logiciels se livrent une guerre commerciale afin 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 différents standard et normes conduit à la balkanisation du web : écriture spécifique en fonction des incompatibilités

48 48 / 58 Le Web dans le monde actuel Aspects économiques et psychologiques Aspects économiques et psychologiques...

49 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 formidable vecteur d information. Tant au niveau de la diffusion (broadcasting) que du partage d information et de la coopération (ex. wikipédia). 49 / 58

50 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 formidable vecteur d information. Tant au niveau de la diffusion (broadcasting) que du partage d information et de la coopération (ex. wikipédia). aujourd hui, le site web représente la vitrine d une entreprise 50 / 58

51 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 formidable vecteur d information. Tant au niveau de la diffusion (broadcasting) que du partage d information et de la coopération (ex. wikipédia). aujourd hui, le site web représente la vitrine d une entreprise un site bien conçu représente donc un avantage certain pour l entreprise et est le gage de son sérieux et de sa qualité 51 / 58

52 52 / 58 Le Web dans le monde actuel Web et page personnelle la page web personnelle De la même manière, la page web personnelle est le reflet de la personnalité d un individu et peut être : un atout ou se révéler un inconvénient lors du recrutement d une personne (perception).

53 Le Web dans le monde actuel Web et page personnelle Critères organisation de la page (clareté, esprit de synthèse) 53 / 58

54 Le Web dans le monde actuel Web et page personnelle Critères organisation de la page (clareté, esprit de synthèse) esthétisme (perfectionnisme, aller au bout des choses) 54 / 58

55 Le Web dans le monde actuel Web et page personnelle Critères organisation de la page (clareté, esprit de synthèse) esthétisme (perfectionnisme, aller au bout des choses) type d information diffusée (ex. blog, dénigrer et/ou construire) 55 / 58

56 Le Web dans le monde actuel Web et page personnelle Critères organisation de la page (clareté, esprit de synthèse) esthétisme (perfectionnisme, aller au bout des choses) type d information diffusée (ex. blog, dénigrer et/ou construire) technologies utilisées et leur maîtrise (plus difficile à juger) 56 / 58

57 Le Web dans le monde actuel Dessine moi un site web Compétences Sites web développés : département : laboratoire LERIA : site personnel sites DBDB, WebSEN, BIL, CFBP Connaissances XHTML, XML, CSS, PHP, Javascript, Apache2, Tomcat, Servlet, Java 57 / 58

58 58 / 58 Le Web dans le monde actuel Mise en application Mise en application Approfondissement : difficulté du développement vitrine, personnalité grâce à l étude de quelques pages web