Panel des technologies Web

Transcription

1 Panel des technologies Web version 0.14

2 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation

3 Sommaire Avant propos Les principes d Internet Les types de projets Web Web statique Principes de la programmation Web dynamique JavaScript CSS Administration CMS Enfin

4 Avant propos Le vocabulaire La base Le train Beaucoup de technologies

5 Le vocabulaire Serveur Web Navigateur Registrar xhtml Linux Base de données Html Css JavaScript Apache DNS Php SQL Web2.0 Client Formulaire Jquery phpmyadmin Eclipse-Pdt Plugin Opensource Mysql xml Flux rss Hyperlien Mysql Debugger Adresse IP firewall MVC XP Flash FTP Firefox

6 La base Le navigateur de l internaute va émettre une demande auprès d un serveur web qui va répondre en transmettant du contenu Html, Css, Xml, Images, contenu flash et/ou JavaScript. Ce contenu peut être en partie extrait depuis une base de données stockant les informations.

7 Le train Base de données Langages Serveur Web NAVIGATEUR

8 Beaucoup de technologies Partie présentation des informations: Html5, Xhtml, Css, Images, Flash/Flex, Silverlight Partie Serveur Langage: Php, Asp, Java, Python, Ruby, Perl Serveur d application.net, JbossAS, Symfony2 CMS: Drupal, Wordpress, Joomla Partie base de données SGBD: Mysql, MS Sql Server, Oracle, Sqlite Nosql: BigTable, Hbase, couchdb Autre: XML, Json, Lucene

9 Les principes d Internet Le principe du Web Le serveur Web Apache Adresses IP Domain Name Server Le navigateur est le client du serveur web Développement Le logiciel de base de données

10 Le principe du Web Serveur Web Requête NAVIGATEUR URL Réponse 5 6

11 Le serveur Web Apache Apache: +50% des serveurs web URL Unified Ressource Locator Domaine, racine, dossiers, ressource DocumentRoot: le dossier racine du site web Le fichier Httpd.conf

12 Adresse IP aaa.bbb.ccc.ddd forme de l adresse IP IP v4 passage à IP v6 Serveur ctn IP du FAI IP du site Internet Réseau local

13 Domain Name Server Adresse Ip Nom de domaine localhost laporte.site-eerie.ema.fr svn.mines-ales.fr DNS google DNS EMA

14 Le navigateur est le client du serveur web Internet Explorer, Mozilla Firefox, Safari, Chrome, version mobile des navigateurs L interprétation du HTML est à la libre discrétion des navigateurs Attention à la mise en cache! Test ACID3 Navigateur en % NET

15 Hébergement et développement Conception sur votre PC EasyPhp, Xampp, Wampp Apache, Php, Mysql, phpmyadmin Mise à jours automatique, interface d administration Dreamweaver, Zend Studio, Eclipse PDT, Notepad++, Netbeans Php Gestion des différents fichiers htmls, images, javascripts, organisation des dossiers Déploiement en production, debugger

16 Le logiciel de base de données Un outil fonctionnant de manière autonome pour conserver des données structurées Extraction et manipulation des données via une syntaxe le SQL Un outil pour la gestion des bases de données et des tables: phpmyadmin

17 Les types de projets Projet : site web statique Projet avec du contenu dynamique Projet : site Web manipulant des données Projet : vitrine Web avec des animations Projet : type application Web Projet : Service Web

18 Projet : site web statique Html + Css pour simplifier la mise en page Dreamweaver pour produire le contenu La charte graphique est à penser sous forme de Div (Css Zen Garden pour des exemples) Pas de stockage d information possible en base de données Pas fonctionnalités type contributions, intranet ou wiki

19 Projet avec du contenu dynamique L utilisation d un CMS est recommandée Le stockage des informations dans une base de données est nécessaire Présentation des informations avec une technologie de type template La structure du CMS est complexe

20 Projet : site web manipulant des données Une application spécifique en Php avec une base de données Mysql, affichage Html+Css+javascript ou/et flash Type d application qui peut être intégré dans un CMS comme module Une version responsive pour tablette et téléphone

21 Projet : vitrine web avec des animations Utilisation massive de flash/silverlight/javascript pour la présentation des informations Nouvelles technologies Html5, application embarqué sur mobile ou dans le navigateur Développement en Php ou en Java avec stockage de données, communication en XML

22 Projet : type application Web Développement spécifique avec un framework Zend framework,.net, Jboss, Spring, Ruby on rails, Symfony2 Utilisation de Html/Css/Javascript Stockage des informations dans une base de données Interface proche d une application cliente

23 Projet : Service Web Utilisation de framework dédié:.net, Jboss, Php Zend Framework, Ruby on rails Communication par Xml avec une application cliente tierce Projet très spécialisé consultant des données aussi bien depuis un navigateur qu une application autonome (smartphone)

24 WEB Statique HTML: HyperText Markup Language Un "hello World!" en HTML Le <tag> </tag> URL relatives ou absolues Les liens hypertexte ( ici )

25 HTML:Hyper-Text markup Language Objectif premier: publication scientifique Langage à balises, normé par W3C Actuellement HTML4.2 début de l HTML5 Outils de vérification de la conformité Forme du tag: <mot réservé> </mot réservé> La structure de la page classique Afficher le source d une page

26 Un "hello World!" en HTML <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title> Exemple de HTML: Hello World! </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content=«exemple, Hello World, Master CTE" /> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <h1> <center>hello World! (centré en gros ) </center></h1> Ceci est une phrase avec un <a href="cible.html">hyperlien</a>. <p> Ceci est un paragraphe où il n y a pas d hyperlien. </p> <br /> Merci Wikipedia </body> </html>

27 URL Relatives ou absolues Afficher une image par adresse absolue <img src="htp:// title="logo EMA" /> Afficher par rapport à la page Html l incluant <img src="images/logo.gif" /> Supposons que la page est dans /accueil/ <img src="../images/logo.gif" />

28 Les liens hypertextes <a href="cv.html">ici mon cv</a> <a href="cv.pdf">ici mon cv en pdf</a> <a href="fr.html"><img src="fr.png" /></a> <a href="fr.html#haut_page"><img src="fr.png" /></a> <a name="haut_page">ici le haut de la page</a>

29 Le <tag> </tag> <tag attribut1="valeur1" attribut2="valeur2" > </tag> Tags imbriqués <ul><li>h</li><li>f</li></ul> De <h1> à <h6> Retour à la ligne et espace ne comptent pas <p> </p> <br /> <!-- ceci n est pas afficher à l écran --> Caractères spéciaux é

30 Principe de la programmation Variables Tableaux Objets Fonctions Ajouter sa fonction

31 Variables Ceci est un nombre: 464 Ceci est du texte "Hello World!«Valeur booléenne : true/false $tentative = 0; $message = "Entrez de nouveau votre code"; $message2 = 'code "PIN" '; $tentative = $tentative + 1;

32 Tableaux $notes[0]=10; $notes[1]=12; $notes[2]=14; $excel[0][0]="hg"; $excel[0][1]="hd"; $excel[1][0]="bg"; $excel[1][1]="bd"; $bac["svt"]= 6; $bac["math"]= 11; $nbrnotes = count( $notes ); $clefs = array_keys( $notes );

33 $status->text Objets SimpleXMLElement Object( [created_at] => Wed Sep 19 11:06: [id] => [text] => Soutenances #TIC&Santé

34 Fonctions echo("joueur:"); echo( $score ); $arrondi = round( , 2 ); $arrondi = 1.95; $xmlvalide = $simplexmlelement->valid(); echo ( $simplexmlelement->valid() );

35 Ajouter sa fonction function affichescore( $nom, $score ){ echo( "score du joueur " ); echo( $nom ); echo( $score ); } affichescore( "jean", 100 ); affichescore( "dray", 50 );

36 Web Dynamique Fabrication du HTML Le formulaire HTML Envoyer des données avec GET Formulaire en POST Extraire l information de l URL $#% %&! Ω

37 Fabrication du HTML Apache-Php <html> <head><title>premiere page Php</title></head> <body> <h1>ceci est ma premiere page php</h1> Voici la date générée en Php : 08 Sep 2006 </body> </html>

38 Le formulaire HTML Formulaire HTML soumettant des données vers un programme du serveur web en changeant de page <form action="programme.php" method="get"> <input type="submit"> </form> Méthode Get via un lien hypertexte :<a href="log.php?image=1">ici</a>

39 Envoyer des données avec GET <html> <title>formulaire</title> <body> <form method="get" action="log.php"> Indiquez votre nom:<input type="text" name="le_nom" value="ici SVP"> Indiquez la civilité a utiliser:<input type="radio" name="civilite" value="mr">monsieur <input type="radio" name="civilite" value="mme">madame <input type="submit" name="bouton" value="ok"> </form> </body></html>

40 Formulaire en POST POST selon la quantité des données (upload), masque les informations de l URL, en test mettre GET, puis POST en production Autres types de champs de formulaire <input type="hidden" <input type="checkbox" <input type="radio"

41 Extraire l information de l URL Apache log.php page html virtuelle

42 $#% %&! Ω HTML: langage de présentation de l information Navigateur Internet est un client lisant du HTML et exécutant du Javascript Javascript: est un langage de programmation pour rendre plus facile l utilisation de sites Internet par exemple avec de l Ajax Ajax: sous-ensemble de Javascript pour changer de l information dans la page HTML sans changer de page HTML Apache: Serveur Web distribuant du contenu HTML aux navigateurs Internet et comprenant aussi le langage Php Php: langage de programme installé dans Apache et fabriquant de l HTML et du javascript pour le Navigateur sous les ordres d Apache Formulaire Html: permet de demander de l information à l internaute et l information est soumise à Apache qui appelle un programme écrit en Php qui fabrique des pages Html contenant du javascript

43 Javascript HTML+XML=XHTML Javascript un nouveau language Le DOM : Document Object Model La recherche par DOM Ajax Jquery

44 HTML+XML=XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN«" <html xmlns=" <head> <title>exemple XHTML 1.0 depuis WIKIPEDIA</title> </head> <body> <ul> <li>tous les éléments doivent être explicitement balisés.</li> <li>les balises fermantes ne sont pas optionnelles.</li> <li>les noms d'éléments et d'attributs <em class="important">doivent</em> être en minuscules.</li> <li>tous les attributs doivent avoir une valeur explicite <input type="checkbox" checked="checked" value="..." />.</li> <li>les guillemets sont <em class="important">toujours</em> obligatoires autour des valeurs d'attribut.</li> <li>les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li> </ul> </body> </html>

45 Javascript, un nouveau langage Langage embarqué dans l HTML Evènement déclenchant les programmes onclick, onload, onchange Des nouvelles bibliothèques puissantes JQuery, Dojo, Prototype, Rico, Json, Google toolkit <script type="text/javascript"> document.write('hello World!'); </script>

46 Le DOM DOM=Document Object Model Un tag peut avoir un id unique dans la page Un tag peut avoir une ou plusieurs classes partagées <body id="css-zen-garden"> <h1 id="principal" class="titres"> Css<span class="acronyme gras">zen Garden</span></h1> <h2 id="titre_rubrique"><span class="gras">la beauté de la conception</span> </h2>

47 La recherche par DOM div#titre <div id="titre"> </div>.gras <span class="gras"> </span> <h2 class="gras"> </h2> div#titre > h1 <div id="titre"><h1> #sp.gr <h3 id="sp"><ul><li class="gr"> ul.firstchild <ul><li>un</li><li>deux</li> input[type=radio] <input type="radio"/>

48 Ajax Asynchronous Javascript And Xml permet de modifier dynamiquement une page sans changer d URL document.gettagbyid( principal ).innerhtml= Nouveau titre ; ajax = new XMLHttpRequest(); ajax.open( POST, heure.php, true); ajax.onreadystatechange = function(){ if (ajax.readystate == 4) getelementbyid( heure').innerhtml = ajax.responsetext; } Afficher la source, Afficher la source générée

49 Jquery <script type="text/javascript" src="js/jquery.js" /> <script type="text/javascript"> $(document).ready(function(){ $('img#wait').show('slow'); }); </script> <img src="images/wait.gif" id="wait" style="display: none;" />

50 CSS CSS: Cascading Style Sheet DIV et Span La mise en boite des DIVs CSS fluide Séparer pour mieux s organiser Programmation orientée internaute Bootstrap, Boilerplate, Foudation

51 CSS: Cascading Style Sheet <h1 style="color:red;font-style:italic;"> <style type="text/css"> body{color:red;font-style:italic;} h1.gras{font-style:bold; font-size:12pt;} h1# principal{ display:none; background-image:url( rubrique2.png );} </style>

52 DIV-ision des infos, SPAN un morceau d info Les tags DIV (élément de type bloc) et SPAN (inline) avec le CSS pour réaliser une mise en page div#container{ position:absolute; left:5px; top:5px; width600px; height:400px; } h2 span{ border: 2px 1px 3px 4px dotted black;} h2>span#premier{font-size:2em;}

53 La mise en boîte des DIVs <html> Div vue par Web developer Css Zen Garden 1 fichier Html fixe # Css différents

54 CSS fluide & Responsive <html><head><title>glish.com</title> <style type="text/css"> #main { border:1px solid #000; background-color:#fff; } #main #menu {border:1px solid #000; float:right; width:230px; background-color:#eee; margin:3px 3px 3px 3px;} </style></head><body> <div id="main"> <div id="menu"> <h1>menu</h1> <p>...</p> </div> <h1>main</h1> <p>...</p> </div> </body></html>

55 Séparer pour mieux s organiser <title>hypertext Markup Language - Wikipédia</title> <!-- Feuille de styles --> <link rel="stylesheet" href="/skins.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/print.css" type="text/css" media="print" /> <link rel="stylesheet" href="/skins-main.css" type="text/css" media="screen" /> <!-- Javascript --> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript" src="get.js"></script>

56 Programmation orientée internaute Fonctionnalités pour les internautes 3 clics au maximum pour les informations Mode dégradé sans image Mode impression sans fond de couleur Prévoir un design fluide ou responsive selon le terminal mobile, tablette, pc, tv grand écran URL Explicite

57 Bootstrap, Boilerplate, Framework CSS Foundation <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input name="inputremenberme" type="checkbox"> Remember me </label> </div> </div> </div>

58 Administration d un CMS Structure d un CMS Stockage de d information Gestion de la sécurité Droits: chmod

59 Structure d un CMS Des fichiers php qui s appellent en cascade La fonction include La modularité du code Des objets qui stockent une information var_dump(); print_r(); les fichiers de logs Il faut lire la documentation pour comprendre la philosophie de l outil

60 Stockage de l information Réaliser des sauvegardes, de tout? Ce qui est dans la base de données Ce qui est dans un dossier particulier Les modules, leur version, leur configuration

61 Gestion de la sécurité Mot de passe pas trop simple Gestion fine des droits d utilisateurs Suivi des messages des logs Mise à jours de sécurité Version de test, version de production Reprise après incident

62 Droits: chmod Utilisateur exécute apache.exe index.php drwx rwx rwx user grp other chmod 755 Upload de fichiers sur le serveur

63 Enfin Résumé Bon sens Il faut La suite

64 $#% %&! Ω Navigateur Internet est un client lisant HTML et exécutant du Javascript qui peut être de l Ajax Page Php est un programme qui est installé dans le serveur Apache, recevant des données par des formulaires Html, interrogeant le SGBD pour produire du contenu pour le navigateur; contenu en Html et avec du Javascript SGBD est un logiciel pour stocker les informations dans des tables de bases de données et permettant de répondre rapidement aux questions en SQL

65 Bon sens Compte de base de données: droits limités Complexité des mots de passes Politique de sauvegarde BD et Fichiers essayez de faire une reprise après incident Lister les modifications importantes agir de manière réversible Tester en local avant de déployer Organisation rigoureuse des données

66 Il faut Savoir utiliser le Firebug et debugger Eclipse Pdt Indenter le code et écrire des commentaires Lire de la documentation en quantité Php.net, Mysql.com, alsacréation,site du zéro Clic droit: afficher la source

67 La suite TP PHP, Twitter, base de données Installation sur le serveur web du master ctn Présentation d autres CMS et outils web Conception et Manipulation de SGBD

68 Panel des technologies Web Dessin: Wings3D render Toxic version 0.14