Panel des technologies Web pierre.jean@mines-ales.fr version 0.14
Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation
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
Avant propos Le vocabulaire La base Le train Beaucoup de technologies
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
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.
Le train Base de données Langages Serveur Web NAVIGATEUR
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
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
Le principe du Web Serveur Web Requête NAVIGATEUR URL http://www.test.com/index.html 3 2 1 4 Réponse 5 6
Le serveur Web Apache Apache: +50% des serveurs web URL Unified Ressource Locator Domaine, racine, dossiers, ressource http://www.test.com/dossiers/page.html http://146.19.252.215:8080/ https://drive.google.com:443/ DocumentRoot: le dossier racine du site web Le fichier Httpd.conf
Adresse IP aaa.bbb.ccc.ddd forme de l adresse IP IP v4 passage à IP v6 Serveur ctn 146.19.252.215 IP du FAI 158.12.1.5 192.168.1.1 192.168.1.5 IP du site 146.19.2.1 Internet Réseau local 192.168.1.4
Domain Name Server Adresse Ip Nom de domaine 127.0.0.1 localhost 146.19.2.1 laporte.site-eerie.ema.fr 146.19.252.215 www.master-ctn.ema.fr 146.19.252.212 svn.mines-ales.fr DNS google 8.8.8.8 DNS EMA 146.19.1.117
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 % 2013 01.NET
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
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
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
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
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
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
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
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
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)
WEB Statique HTML: HyperText Markup Language Un "hello World!" en HTML Le <tag> </tag> URL relatives ou absolues Les liens hypertexte ( ici )
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
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>
URL Relatives ou absolues Afficher une image par adresse absolue <img src="htp://www.ema.fr/images/logo.gif" 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" />
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>
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 é
Principe de la programmation Variables Tableaux Objets Fonctions Ajouter sa fonction
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;
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 );
$status->text Objets SimpleXMLElement Object( [created_at] => Wed Sep 19 11:06:47 +0000 2012 [id] => 248377593307463680 [text] => Soutenances #TIC&Santé
Fonctions echo("joueur:"); echo( $score ); $arrondi = round( 1.95583, 2 ); $arrondi = 1.95; $xmlvalide = $simplexmlelement->valid(); echo ( $simplexmlelement->valid() );
Ajouter sa fonction function affichescore( $nom, $score ){ echo( "score du joueur " ); echo( $nom ); echo( $score ); } affichescore( "jean", 100 ); affichescore( "dray", 50 );
Web Dynamique Fabrication du HTML Le formulaire HTML Envoyer des données avec GET Formulaire en POST Extraire l information de l URL $#% %&! Ω
Fabrication du HTML Apache-Php http://localhost/index.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>
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>
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>
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"
Extraire l information de l URL Apache http://localhost/log.php log.php page html virtuelle
$#% %&! Ω 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
Javascript HTML+XML=XHTML Javascript un nouveau language Le DOM : Document Object Model La recherche par DOM Ajax Jquery
HTML+XML=XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN«"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>
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>
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>
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"/>
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
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;" />
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
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>
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;}
La mise en boîte des DIVs <html> Div vue par Web developer Css Zen Garden 1 fichier Html fixe # Css différents
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>
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>
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
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>
Administration d un CMS Structure d un CMS Stockage de d information Gestion de la sécurité Droits: chmod
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
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
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
Droits: chmod Utilisateur exécute apache.exe - 421 421 421 index.php drwx rwx rwx user grp other chmod 755 Upload de fichiers sur le serveur
Enfin Résumé Bon sens Il faut La suite
$#% %&! Ω 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
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
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
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
Panel des technologies Web Dessin: Wings3D render Toxic pierre.jean@mines-ales.fr version 0.14