Pierre.Jean@ema.fr

pierrejean.wp.imt.fr

pierre.jean@mines-ales.fr

version 0.17

Panel des technologies Web

Pierre.Jean@ema.fr

Objectif

Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations

Des questions ?

Evaluation QCM ±1 point pierre.jean@mines-ales.fr

Pierre.Jean@ema.fr

Sommaire

Avant propos

Les principes d’Internet

Les types de projets Web

Web statique

Principes de la programmation

Web dynamiqueJavaScriptCSSAdministration CMSEnfin

Pierre.Jean@ema.fr

Avant propos

Le vocabulaire

La base

Le train

Beaucoup de technologies

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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.

Pierre.Jean@ema.fr

Le train

NAVIGATEUR

Serveur

Web

Base de données Langages

Ceci est un hyperlien

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

Le principe du Web

NAVIGATEURURL

Requête

http://www.test.com/index.html

Réponse

Serveur Web

12

3

4 5

6

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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)

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

WEB Statique

HTML: HyperText Markup LanguageUn "hello World!" en HTML

Le <tag> </tag> URL relatives ou absoluesLes liens hypertexte ( ici )

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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&ugrave; il n’y a pas d’hyperlien. </p>

<br />Merci Wikipedia</body></html>

Pierre.Jean@ema.fr

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" />

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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> &nbsp; <br />

<!-- ceci n’est pas afficher à l’écran -->Caractères spéciaux &euro; &eacute;

Pierre.Jean@ema.fr

Principe de la programmation

Variables TableauxObjets

FonctionsAjouter sa fonction

Pierre.Jean@ema.fr

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;

Pierre.Jean@ema.fr

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 );

Pierre.Jean@ema.fr

Objets

$status->text

SimpleXMLElement Object( [created_at] => Wed Sep 19 11:06:47 +0000

2012

[id] => 248377593307463680

[text] => Soutenances #TIC&Santé

Pierre.Jean@ema.fr

Fonctions

echo("Joueur:"); echo( $score );

$arrondi = round( 1.95583 , 2 );

$arrondi = 1.95;

$xmlValide = $simpleXMLElement->valid();

echo ( $simpleXMLElement->valid() );

Pierre.Jean@ema.fr

Ajouter sa fonction

function afficheScore( $nom , $score )echo( "score du joueur " );

echo( $nom );

echo( $score );

afficheScore( "jean" , 100 );

afficheScore( "dray" , 50 );

Pierre.Jean@ema.fr

Web Dynamique

Fabrication du HTMLLe formulaire HTML

Envoyer des données avec GETFormulaire en POST

Extraire l’information de l’URL$#%£¤§%&!◊Ω≈

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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" …

Pierre.Jean@ema.fr

Apache http://localhost/log.php

log.phppage html virtuelle

Extraire l’information de l’URL

Pierre.Jean@ema.fr

$#%£¤§%&!◊Ω≈

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

Pierre.Jean@ema.fr

Javascript

HTML+XML=XHTML -> HTML5Javascript un nouveau language

Le DOM : Document Object ModelLa recherche par DOM

AjaxJquery

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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&eacute; de la conception</span>

</h2>

Pierre.Jean@ema.fr

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"/>

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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;" />

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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;

Pierre.Jean@ema.fr

La mise en boîte des DIVs

<html>

Div vue par Web developer

Css Zen Garden1 fichier Html fixe

# Css différents

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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>

Pierre.Jean@ema.fr

Administration d’un CMS

Structure d’un CMSStockage de d’information

Gestion de la sécuritéDroits: chmod

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

Enfin

RésuméBon sensIl fautLa suite

Pierre.Jean@ema.fr

$#%£¤§%&!◊Ω≈

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

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

Pierre.Jean@ema.fr

Dessin: Wings3D render Toxicpierre.jean@mines-ales.fr

version 0.17

Panel des technologies Web