Panel des technologies Web - IMT · technologie de type template La structure du CMS est complexe...
34
[email protected] pierrejean.wp.imt.fr [email protected] version 0.17 Panel des technologies Web [email protected] Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Des questions ? Evaluation QCM ±1 point [email protected]
Transcript of Panel des technologies Web - IMT · technologie de type template La structure du CMS est complexe...
pierrejean.wp.imt.fr
version 0.17
Panel des technologies Web
Objectif
Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations
Des questions ?
Evaluation QCM ±1 point [email protected]
Sommaire
Avant propos
Les principes d’Internet
Les types de projets Web
Web statique
Principes de la programmation
Web dynamiqueJavaScriptCSSAdministration CMSEnfin
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, Images, vidéo, javaScript.
Ce contenu peut être en partie extrait depuis une base de données stockant les informations.
Le train
NAVIGATEUR
Serveur
Web
Base de données Langages
Ceci est un hyperlien
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 WebLe serveur Web Apache
Adresses IPDomain Name Server
Le navigateur est le client du serveur webDéveloppement
Le logiciel de base de données
Le principe du Web
NAVIGATEURURL
Requête
http://www.test.com/index.html
Réponse
Serveur Web
12
3
4 5
6
Le serveur Web Apache
Apache: +50% des serveurs web
URL Unified Ressource Locator Domaine, racine, dossiers, ressource, certificats
http://www.test.com/dossiers/page.html
http://159.31.200.21:80/
https://www.master-ctn.mines-ales.fr/
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
159.31.200.21
IP du FAI
158.12.1.5
192.168.1.1
192.168.1.5
192.168.1.4Réseau localInternet
IP du site
159.31.200.1
Domain Name Server
Adresse Ip | Nom de domaine
127.0.0.1 localhost
159.31.10.2 laporte.site-eerie.ema.fr
159.31.200.21 www.master-ctn.ema.fr
159.31.200.5 svn.mines-ales.fr
DNS google 8.8.8.8
DNS EMA 159.31.10.2 159.31.10.4
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 % 2016 – ZDNet
Hébergement et développement
Conception sur votre PC EasyPhp, Xamp, Wamp
Apache, Php, Mysql, phpMyAdmin
Mise à jours automatique, interface d’administration
Eclipse PDT, Dreamweaver, Notepad++, UltraEdit, Atom, Zend Studio, etc.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 statiqueProjet avec du contenu dynamique
Projet : site Web manipulant des donnéesProjet : vitrine Web avec des animations
Projet : type application WebProjet : Service Web
Projet : site web statique
Html + Css pour simplifier la mise en pageDreamweaver pour produire le contenuLa charte graphique est à penser sous forme
de Div (Css Zen Garden pour des exemples)Pas de stockage d’information possible en
base de donnéesPas 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
Type d’application qui peut être intégré dans un CMS comme module
Une version responsive pour tablette et téléphone
Framework de présentation CSS (bootstrap)
Projet : vitrine web avec des animations
Utilisation massive de 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 ou en Json
Projet : type application Web
Développement spécifique avec un frameworkZend 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 Json/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)
Avenir via des micro-services
WEB Statique
HTML: HyperText Markup LanguageUn "hello World!" en HTML
Le <tag> </tag> URL relatives ou absoluesLes liens hypertexte ( ici )
HTML:Hyper-Text markup Language
Objectif premier: publication scientifique
Langage à balises, normé par W3C
Actuellement HTML5
Forme du tag: <mot réservé> </mot réservé>
Outils de vérification de la conformité
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 TableauxObjets
FonctionsAjouter 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 );
Objets
$status->text
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 HTMLLe formulaire HTML
Envoyer des données avec GETFormulaire 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" …
Apache http://localhost/log.php
log.phppage html virtuelle
Extraire l’information de l’URL
$#%£¤§%&!◊Ω≈
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 -> HTML5Javascript un nouveau language
Le DOM : Document Object ModelLa recherche par DOM
AjaxJquery
HTML+XML=XHTML HTML5
<!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’HTMLEvènement déclenchant les programmes
onclick, onload, onchangeDes 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 ModelUn tag peut avoir un id unique dans la pageUn 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 SheetDIV et Span
La mise en boite des DIVsCSS fluide
Séparer pour mieux s’organiserProgrammation orientée internauteBootstrap, Boilerplate, Foudation
CSS: Cascading Style Sheet
<h1 style="color:red;font-style:italic;">
<style type="text/css">
bodycolor:red;font-style:italic;
h1.grasfont-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#containerposition:absolute; left:5px; top:5px; width600px; height:400px; h2 span border: 2px 1px 3px 4px dotted black;
h2>span#premierfont-size:2em;
La mise en boîte des DIVs
<html>
Div vue par Web developer
Css Zen Garden1 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, Foundation
Framework CSS
<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 CMSStockage 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 sensIl fautLa 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ésComplexité des mots de passesPolitique 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éployerOrganisation rigoureuse des données
Il faut
Savoir utiliser les outils de développement du Navigateur et d’Eclipse PDT
Comprendre les formulaires et le code PHP
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
Dessin: Wings3D render [email protected]
version 0.17
Panel des technologies Web
