SlideShare une entreprise Scribd logo
Introduction au développement Web
Introduction au
développement Web
IBM Academic | Romain Willmann
Introduction au développement Web
Au programme
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web
Introduction au développement Web
Aujourd’hui
Internet Web
HTTP HTML
Introduction au développement Web
Internet est un réseau de réseaux
Créé durant
les années 60
Compte
aujourd’hui
50K réseaux
Introduction au développement Web
Un réseau
N >= 2
Un protocole
De
l’information
Le Web
Un serveur, au
moins un client
Hyper Text
Transfer Protocol
Des pages HTML
Le Web est un réseau ordinaire
Introduction au développement Web
Ecrire des pages Web avec l’HyperText Markup Langage
Un langage de
programmation
Structure des
pages Web
Fonctionne
avec des paires
de balises
Standard et
incontournable
Introduction au développement Web
Six premières balises HTML pour bien débuter
Un éditeur en ligne pour s’entraîner
Rôle Paramètres Obligatoire?
<html>…</html>
Définit une page
HTML ∅ ✔
<body>…</body>
Définit le contenu
visible de la page ∅ ✔
<p>…</p>
Délimite un
paragraphe ∅ ✘
<button>…</button> Crée un bouton ∅ ✘
<img>…</img> Insère une image src ✘
<a>…</a>
Crée un lien
hypertexte href ✘
Introduction au développement Web
Première réalisation: un CV en HTML
Utiliser nos
six balises
En découvrir
de nouvelles
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web
Introduction au développement Web
Aujourd’hui
Architecture
client-serveur
Requête &
réponse HTTP
Node.js Javascript
Introduction au développement Web
Découvrir l’architecture client-serveur
Les clients et
serveurs sont
des logiciels
Ils désignent
aussi la machine
qui l’exécute
Introduction au développement Web
Cinq bonnes raisons de choisir Node.js comme serveur
Open
Source
Moderne Puissant
Modulaire Accessible
Télécharger Node.js!
Introduction au développement Web
Echanger des données en HTTP: requêtes et réponses
Requête HTTP
Réponse, page
HTML
Introduction au développement Web
Définition
 Objets qui portent un nom
et qui contiennent des
données
 Créées par nous
(« déclarées ») ou par le
programme
Subtilité
 Une variable peut contenir
d’autres variables
(« propriétés ») et des
fonctions (« méthodes »)
Javascript pour Node.js: les variables
Introduction au développement Web
Définition
 Ensemble d'instructions
effectuant une tâche
 Créées par nous
(« déclarées ») ou par le
programme
 Peut prendre des
paramètres et retourner un
résultat
Subtilités
 Anonymat: une fonction ne
porte pas nécessairement
de nom
 Callback: un paramètre
d’une fonction peut être
une fonction (dont les
paramètres peuvent être
une fonction :p)
Javascript pour Node.js: les fonctions
Introduction au développement Web
Gérer des requêtes avec Node.js
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.send('<h1>Notre première application Web</h1>');
res.end();
});
app.listen(80);
Réception Routage Réponse
Introduction au développement Web
Seconde réalisation: une CVthèque avec Node.js
Comprendre la
gestion des
requêtes
Gérer la
position des
fichiers
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web
Introduction au développement Web
Aujourd’hui
Cloud PaaS
Bluemix
Cloud
Foundry
Introduction au développement Web
Pâte à pizza Pâte à pizza Pâte à pizza Pâte à pizza
Tomates Tomates Tomates Tomates
Fromage Fromage Fromage Fromage
Garniture Garniture Garniture Garniture
Ustensiles Ustensiles Ustensiles Ustensiles
Four Four Four Four
Electricité Electricité Electricité Electricité
Vaisselle Vaisselle Vaisselle Vaisselle
Table Table Table Table
Faite maison Surgelée Domino's Pizzeria
Moi Fournisseur
Introduction au développement Web
Réseau Réseau Réseau Réseau
Stockage Stockage Stockage Stockage
Serveur Serveur Serveur Serveur
Virtualisation Virtualisation Virtualisation Virtualisation
O/S O/S O/S O/S
Middleware Middleware Middleware Middleware
Runtime Runtime Runtime Runtime
Données Données Données Données
Application Application Application Application
Informatique
traditionnelle
Infrastructure
as a Service
Platform as a
Service
Software as a
Service
Client Fournisseur
Les quatre modèles de service informatique
Introduction au développement Web
Quelques caractéristiques du Cloud Computing
ElasticitéLibre-service
Ubiquité
Haute
disponibilité
Aucun
coût de
propriété
Evolutivité
Introduction au développement Web
Bluemix est la PaaS d’IBM
100+ services
intégrables
instantanément
Déploiement
d’applications en
quelques minutes
Bluemix s’intègre
avec tout outil ou
langage
Repose sur de
l’Open Source
Une application
est toujours
améliorable
Aller vite pour
répondre aux
opportunités
Libre choix des
outils de
développement
La qualité est
centrale
Bluemix est utilisable gratuitement dans un cadre pédagogique
Introduction au développement Web
Déployer une application en 60 secondes avec Cloud Foundry
Rôle
cf api https://api.ng.bluemix.net
Connecte Cloud Foundry sur
Bluemix
cf login
Lance l’authentification pour
accéder à votre espace
cf push
Lit le manifest de votre
application et ordonne son
déploiement
Découvrir le projet Cloud Foundry
Introduction au développement Web
Troisième réalisation: déployer notre application dans le Cloud
Découvrir
Cloud Foundry
et Bluemix
Préparer une
application
pour le Cloud
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web
Introduction au développement Web
Aujourd’hui
Base de
données
SQL
NoSQL MongoDB
Introduction au développement Web
Une application avec une base de données
Une base de
données est un
fichier contenant
des informations
Une application la
manipule à l’aide
d’un SGBD
Introduction au développement Web
La première génération de base de données: SQL
Début des
années 70
Organisation
relationnelle
(tableau)
Structuration
forte
Evolutivité
verticale
Introduction au développement Web
Le NoSQL pour une information plus complexe
Début des
années 2000
Organisation
par document
(post-it)
Pas de
structure
prédéfinie
Evolutivité
horizontale
Introduction au développement Web
Open Source Simple
Bon couple
avec Node.js
Insert, Find,
Update,
Remove
Un document MongoDB
{
"_id": {
"$oid": "55d58c4be0cdcf1d0099cb6b"
},
"Prénom": "Romain",
"Nom": "Willmann",
“Twitter": “@rwillmann",
“Compagnie": “IBM",
"Alumni": "EMLYON",
}
Pourquoi MongoDB comme SGBD?
Une base de données de 500 Mo offerte avec Bluemix
Introduction au développement Web
Créer un document MongoDB avec Node.js
var mongodb = require('mongodb');
var url = 'mongodb://…';
mongodb.MongoClient.connect(url, function(err, db) {
var collection = db.collection('nom-collection');
collection.insert({"Champ 1":"Valeur 1","Champ 2":"Valeur 2"}, function(err, result) {
...
});
db.close();
});
Connexion Ecriture Fermeture
Introduction au développement Web
Quatrième réalisation: ajouter une base de données à la CVthèque
Configurer une
Database as a
Service
Intégrer
MongoDB dans
une application
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web
Introduction au développement Web
Aujourd’hui
SOA API
Watson
Introduction au développement Web
La SOA rend les structures évolutives et adaptables
Architecture orientée service
Centrer le fonctionnement et l’offre de l’entreprise autour de l’orientation service
Orientation service
Penser l’entreprise comme étant et fournissant un ensemble de services
Service
Une tâche répétable
Introduction au développement Web
Implémenter la SOA en créant des APIs
Introduction au développement Web
Simplifier l’accès à des ressources complexes: le cas Watson
text_to_speech.synthesize()
Introduction au développement Web
Des questions?
@rwillmann
Romain Willmann
romain.willmann@fr.ibm.com

Contenu connexe

Tendances

Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
PFE BI - INPT
PFE BI - INPTPFE BI - INPT
PFE BI - INPT
riyadadva
 
Implémentation de l’algorithme du Simplexe En Java
Implémentation de l’algorithme du Simplexe En JavaImplémentation de l’algorithme du Simplexe En Java
Implémentation de l’algorithme du Simplexe En Java
Rached Krim
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRIT
Lina Meddeb
 
Présentation finale
Présentation finalePrésentation finale
Présentation finale
heniBa
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Sofien Benrhouma
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
Youness Boukouchi
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
Khadim Mbacké
 
présentation de soutenance PFE
présentation de soutenance PFEprésentation de soutenance PFE
présentation de soutenance PFE
Karim Labidi
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye Dieng
 
Presentation de gestionnaire de bibliothèque
Presentation de gestionnaire de bibliothèquePresentation de gestionnaire de bibliothèque
Presentation de gestionnaire de bibliothèque
Daoues Amine
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
Donia Hammami
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
pfe book 2023 2024.pdf
pfe book 2023 2024.pdfpfe book 2023 2024.pdf
pfe book 2023 2024.pdf
khalil lakhdhar
 
Modele-elearning
Modele-elearningModele-elearning
Modele-elearning
Boughanmi Sobhi IHBOS
 
Presentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxPresentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicaux
Fehmi Arbi
 
alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)
alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)
alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)
Alphorm
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
PFE BI - INPT
PFE BI - INPTPFE BI - INPT
PFE BI - INPT
 
Implémentation de l’algorithme du Simplexe En Java
Implémentation de l’algorithme du Simplexe En JavaImplémentation de l’algorithme du Simplexe En Java
Implémentation de l’algorithme du Simplexe En Java
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRIT
 
Présentation finale
Présentation finalePrésentation finale
Présentation finale
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 
présentation de soutenance PFE
présentation de soutenance PFEprésentation de soutenance PFE
présentation de soutenance PFE
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Presentation de gestionnaire de bibliothèque
Presentation de gestionnaire de bibliothèquePresentation de gestionnaire de bibliothèque
Presentation de gestionnaire de bibliothèque
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
pfe book 2023 2024.pdf
pfe book 2023 2024.pdfpfe book 2023 2024.pdf
pfe book 2023 2024.pdf
 
Modele-elearning
Modele-elearningModele-elearning
Modele-elearning
 
Presentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxPresentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicaux
 
alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)
alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)
alphorm.com - Formation Oracle Database 11g DBA 1 (1Z0-052)
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 

En vedette

Altitude - Processus de conception de site web
Altitude - Processus de conception de site webAltitude - Processus de conception de site web
Altitude - Processus de conception de site web
Antoine Bonicalzi
 
Chp1 - Introduction aux méthodologies de Conception
Chp1 - Introduction aux méthodologies de ConceptionChp1 - Introduction aux méthodologies de Conception
Chp1 - Introduction aux méthodologies de Conception
Lilia Sfaxi
 
Powerpoint veille2
Powerpoint veille2Powerpoint veille2
Powerpoint veille2
Francois Ravier
 
soft-shake.ch - Développement d'une application iPhone pilotée par les tests
soft-shake.ch - Développement d'une application iPhone pilotée par les testssoft-shake.ch - Développement d'une application iPhone pilotée par les tests
soft-shake.ch - Développement d'une application iPhone pilotée par les tests
soft-shake.ch
 
rapport_de_stage_M2_Hugues_Odegaard
rapport_de_stage_M2_Hugues_Odegaardrapport_de_stage_M2_Hugues_Odegaard
rapport_de_stage_M2_Hugues_Odegaard
Hugues Odegaard
 
Danone Univer Sell 2010 Cest Quoi
Danone Univer Sell 2010 Cest QuoiDanone Univer Sell 2010 Cest Quoi
Danone Univer Sell 2010 Cest Quoi
Danone Jobs
 
concours innovation cnfpt
concours innovation cnfptconcours innovation cnfpt
concours innovation cnfpt
Ministry for Europe and Foreign Affairs
 
Développement informatique : Programmation réseau
Développement informatique : Programmation réseauDéveloppement informatique : Programmation réseau
Développement informatique : Programmation réseau
ECAM Brussels Engineering School
 
OpenAge
OpenAgeOpenAge
OpenAge
guestda60ee
 
Présentation-LF-SI16-002
Présentation-LF-SI16-002Présentation-LF-SI16-002
Présentation-LF-SI16-002
Waçym M'nasri
 
Le Développement d’une Application Web
Le Développement d’une Application WebLe Développement d’une Application Web
Le Développement d’une Application Web
Malick Mbaye
 
Projet Domurpic
Projet DomurpicProjet Domurpic
Projet Domurpic
Sébastien Letélié
 
Soutenance de fin d’étude promotion srs 2012
Soutenance de fin d’étude promotion srs 2012Soutenance de fin d’étude promotion srs 2012
Soutenance de fin d’étude promotion srs 2012
jedjenderedjian
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
Nazih Heni
 
Centrale litiére important
Centrale litiére importantCentrale litiére important
Centrale litiére important
Maryam Mimita
 
Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis
abouaalexis
 
Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...
ECAM Brussels Engineering School
 
Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi
Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi
Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi
Smart Taxi - Gruppo Biesse
 
Conception et développement d’un Système de réservation en ligne
Conception et développement d’un Système de réservation en ligneConception et développement d’un Système de réservation en ligne
Conception et développement d’un Système de réservation en ligne
Aydi Nébil
 

En vedette (20)

Altitude - Processus de conception de site web
Altitude - Processus de conception de site webAltitude - Processus de conception de site web
Altitude - Processus de conception de site web
 
Chp1 - Introduction aux méthodologies de Conception
Chp1 - Introduction aux méthodologies de ConceptionChp1 - Introduction aux méthodologies de Conception
Chp1 - Introduction aux méthodologies de Conception
 
Powerpoint veille2
Powerpoint veille2Powerpoint veille2
Powerpoint veille2
 
soft-shake.ch - Développement d'une application iPhone pilotée par les tests
soft-shake.ch - Développement d'une application iPhone pilotée par les testssoft-shake.ch - Développement d'une application iPhone pilotée par les tests
soft-shake.ch - Développement d'une application iPhone pilotée par les tests
 
rapport_de_stage_M2_Hugues_Odegaard
rapport_de_stage_M2_Hugues_Odegaardrapport_de_stage_M2_Hugues_Odegaard
rapport_de_stage_M2_Hugues_Odegaard
 
Danone Univer Sell 2010 Cest Quoi
Danone Univer Sell 2010 Cest QuoiDanone Univer Sell 2010 Cest Quoi
Danone Univer Sell 2010 Cest Quoi
 
concours innovation cnfpt
concours innovation cnfptconcours innovation cnfpt
concours innovation cnfpt
 
Développement informatique : Programmation réseau
Développement informatique : Programmation réseauDéveloppement informatique : Programmation réseau
Développement informatique : Programmation réseau
 
OpenAge
OpenAgeOpenAge
OpenAge
 
PHP5 et Zend Framework
PHP5 et Zend FrameworkPHP5 et Zend Framework
PHP5 et Zend Framework
 
Présentation-LF-SI16-002
Présentation-LF-SI16-002Présentation-LF-SI16-002
Présentation-LF-SI16-002
 
Le Développement d’une Application Web
Le Développement d’une Application WebLe Développement d’une Application Web
Le Développement d’une Application Web
 
Projet Domurpic
Projet DomurpicProjet Domurpic
Projet Domurpic
 
Soutenance de fin d’étude promotion srs 2012
Soutenance de fin d’étude promotion srs 2012Soutenance de fin d’étude promotion srs 2012
Soutenance de fin d’étude promotion srs 2012
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 
Centrale litiére important
Centrale litiére importantCentrale litiére important
Centrale litiére important
 
Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis
 
Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...
 
Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi
Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi
Smart Taxi Présentation - Entrez dans l’avenir de la gestion taxi
 
Conception et développement d’un Système de réservation en ligne
Conception et développement d’un Système de réservation en ligneConception et développement d’un Système de réservation en ligne
Conception et développement d’un Système de réservation en ligne
 

Similaire à Introduction au développement Web

Azure Services Platform
Azure Services PlatformAzure Services Platform
Azure Services Platform
Gregory Renard
 
Journée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligneJournée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligne
Christophe Lauer
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
Christophe Lauer
 
LabVIEW™ internet and network applications
LabVIEW™ internet and network applicationsLabVIEW™ internet and network applications
LabVIEW™ internet and network applications
Alexandre STANURSKI
 
S51 vos projets web services ibm i a l aide de php
S51   vos projets web services ibm i a l aide de phpS51   vos projets web services ibm i a l aide de php
S51 vos projets web services ibm i a l aide de php
Gautier DUMAS
 
Chap1 p1-introduction
Chap1 p1-introductionChap1 p1-introduction
Chap1 p1-introduction
Moez Re
 
Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?
Quentin Adam
 
Eclipse day paris
Eclipse day parisEclipse day paris
Eclipse day paris
LeTesteur
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
Gregory Renard
 
Partie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxPartie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptx
HamzaElgari
 
Développement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EEDéveloppement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EE
Sabri Bouchlema
 
Portails Etat De L'art
Portails  Etat De L'artPortails  Etat De L'art
Portails Etat De L'art
Tugdual Grall
 
Web services SOAP et REST
Web services  SOAP et RESTWeb services  SOAP et REST
Web services SOAP et REST
RadhoueneRouached
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Frédéric Harper
 
M20487 formation-developper-windows-azure-et-les-services-web
M20487 formation-developper-windows-azure-et-les-services-webM20487 formation-developper-windows-azure-et-les-services-web
M20487 formation-developper-windows-azure-et-les-services-web
CERTyou Formation
 

Similaire à Introduction au développement Web (20)

Azure Services Platform
Azure Services PlatformAzure Services Platform
Azure Services Platform
 
Journée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligneJournée Agences Web - Scénario Présence en ligne
Journée Agences Web - Scénario Présence en ligne
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
LabVIEW™ internet and network applications
LabVIEW™ internet and network applicationsLabVIEW™ internet and network applications
LabVIEW™ internet and network applications
 
S51 vos projets web services ibm i a l aide de php
S51   vos projets web services ibm i a l aide de phpS51   vos projets web services ibm i a l aide de php
S51 vos projets web services ibm i a l aide de php
 
Chap1 p1-introduction
Chap1 p1-introductionChap1 p1-introduction
Chap1 p1-introduction
 
Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?Parisweb - javascript server side - par où commencer ?
Parisweb - javascript server side - par où commencer ?
 
Eclipse day paris
Eclipse day parisEclipse day paris
Eclipse day paris
 
Azure Mesh Et Surface
Azure Mesh Et SurfaceAzure Mesh Et Surface
Azure Mesh Et Surface
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Partie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxPartie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptx
 
Starter Kits
Starter KitsStarter Kits
Starter Kits
 
Développement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EEDéveloppement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EE
 
Portails Etat De L'art
Portails  Etat De L'artPortails  Etat De L'art
Portails Etat De L'art
 
Web services SOAP et REST
Web services  SOAP et RESTWeb services  SOAP et REST
Web services SOAP et REST
 
Axis2 services fr
Axis2 services frAxis2 services fr
Axis2 services fr
 
.NET DotNet CF - 3
.NET DotNet CF - 3.NET DotNet CF - 3
.NET DotNet CF - 3
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
M20487 formation-developper-windows-azure-et-les-services-web
M20487 formation-developper-windows-azure-et-les-services-webM20487 formation-developper-windows-azure-et-les-services-web
M20487 formation-developper-windows-azure-et-les-services-web
 
Web Services
Web ServicesWeb Services
Web Services
 

Dernier

Présentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Présentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaPrésentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Présentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
siemaillard
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
dokposeverin
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
mcevapi3
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
kamouzou878
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
M2i Formation
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
lebaobabbleu
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
OlivierLumeau1
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
MahouwetinJacquesGBO
 
Cours Gestion d’actifs BNP -- CAMGESTION
Cours Gestion d’actifs BNP -- CAMGESTIONCours Gestion d’actifs BNP -- CAMGESTION
Cours Gestion d’actifs BNP -- CAMGESTION
Sékou Oumar SYLLA
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
Martin M Flynn
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
lebaobabbleu
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 

Dernier (14)

Présentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Présentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaPrésentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Présentation3.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
 
Cours Gestion d’actifs BNP -- CAMGESTION
Cours Gestion d’actifs BNP -- CAMGESTIONCours Gestion d’actifs BNP -- CAMGESTION
Cours Gestion d’actifs BNP -- CAMGESTION
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 

Introduction au développement Web

  • 1. Introduction au développement Web Introduction au développement Web IBM Academic | Romain Willmann
  • 2. Introduction au développement Web Au programme 1. Découvrir le HTML 2. Programmation d’applications Web 3. Introduction au Cloud 4. Comprendre les bases de données 5. APIs & Services Web
  • 3. Introduction au développement Web Agenda 1. Découvrir le HTML 2. Programmation d’applications Web 3. Introduction au Cloud 4. Comprendre les bases de données 5. APIs & Services Web
  • 4. Introduction au développement Web Aujourd’hui Internet Web HTTP HTML
  • 5. Introduction au développement Web Internet est un réseau de réseaux Créé durant les années 60 Compte aujourd’hui 50K réseaux
  • 6. Introduction au développement Web Un réseau N >= 2 Un protocole De l’information Le Web Un serveur, au moins un client Hyper Text Transfer Protocol Des pages HTML Le Web est un réseau ordinaire
  • 7. Introduction au développement Web Ecrire des pages Web avec l’HyperText Markup Langage Un langage de programmation Structure des pages Web Fonctionne avec des paires de balises Standard et incontournable
  • 8. Introduction au développement Web Six premières balises HTML pour bien débuter Un éditeur en ligne pour s’entraîner Rôle Paramètres Obligatoire? <html>…</html> Définit une page HTML ∅ ✔ <body>…</body> Définit le contenu visible de la page ∅ ✔ <p>…</p> Délimite un paragraphe ∅ ✘ <button>…</button> Crée un bouton ∅ ✘ <img>…</img> Insère une image src ✘ <a>…</a> Crée un lien hypertexte href ✘
  • 9. Introduction au développement Web Première réalisation: un CV en HTML Utiliser nos six balises En découvrir de nouvelles
  • 10. Introduction au développement Web Agenda 1. Découvrir le HTML 2. Programmation d’applications Web 3. Introduction au Cloud 4. Comprendre les bases de données 5. APIs & Services Web
  • 11. Introduction au développement Web Aujourd’hui Architecture client-serveur Requête & réponse HTTP Node.js Javascript
  • 12. Introduction au développement Web Découvrir l’architecture client-serveur Les clients et serveurs sont des logiciels Ils désignent aussi la machine qui l’exécute
  • 13. Introduction au développement Web Cinq bonnes raisons de choisir Node.js comme serveur Open Source Moderne Puissant Modulaire Accessible Télécharger Node.js!
  • 14. Introduction au développement Web Echanger des données en HTTP: requêtes et réponses Requête HTTP Réponse, page HTML
  • 15. Introduction au développement Web Définition  Objets qui portent un nom et qui contiennent des données  Créées par nous (« déclarées ») ou par le programme Subtilité  Une variable peut contenir d’autres variables (« propriétés ») et des fonctions (« méthodes ») Javascript pour Node.js: les variables
  • 16. Introduction au développement Web Définition  Ensemble d'instructions effectuant une tâche  Créées par nous (« déclarées ») ou par le programme  Peut prendre des paramètres et retourner un résultat Subtilités  Anonymat: une fonction ne porte pas nécessairement de nom  Callback: un paramètre d’une fonction peut être une fonction (dont les paramètres peuvent être une fonction :p) Javascript pour Node.js: les fonctions
  • 17. Introduction au développement Web Gérer des requêtes avec Node.js var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('<h1>Notre première application Web</h1>'); res.end(); }); app.listen(80); Réception Routage Réponse
  • 18. Introduction au développement Web Seconde réalisation: une CVthèque avec Node.js Comprendre la gestion des requêtes Gérer la position des fichiers
  • 19. Introduction au développement Web Agenda 1. Découvrir le HTML 2. Programmation d’applications Web 3. Introduction au Cloud 4. Comprendre les bases de données 5. APIs & Services Web
  • 20. Introduction au développement Web Aujourd’hui Cloud PaaS Bluemix Cloud Foundry
  • 21. Introduction au développement Web Pâte à pizza Pâte à pizza Pâte à pizza Pâte à pizza Tomates Tomates Tomates Tomates Fromage Fromage Fromage Fromage Garniture Garniture Garniture Garniture Ustensiles Ustensiles Ustensiles Ustensiles Four Four Four Four Electricité Electricité Electricité Electricité Vaisselle Vaisselle Vaisselle Vaisselle Table Table Table Table Faite maison Surgelée Domino's Pizzeria Moi Fournisseur
  • 22. Introduction au développement Web Réseau Réseau Réseau Réseau Stockage Stockage Stockage Stockage Serveur Serveur Serveur Serveur Virtualisation Virtualisation Virtualisation Virtualisation O/S O/S O/S O/S Middleware Middleware Middleware Middleware Runtime Runtime Runtime Runtime Données Données Données Données Application Application Application Application Informatique traditionnelle Infrastructure as a Service Platform as a Service Software as a Service Client Fournisseur Les quatre modèles de service informatique
  • 23. Introduction au développement Web Quelques caractéristiques du Cloud Computing ElasticitéLibre-service Ubiquité Haute disponibilité Aucun coût de propriété Evolutivité
  • 24. Introduction au développement Web Bluemix est la PaaS d’IBM 100+ services intégrables instantanément Déploiement d’applications en quelques minutes Bluemix s’intègre avec tout outil ou langage Repose sur de l’Open Source Une application est toujours améliorable Aller vite pour répondre aux opportunités Libre choix des outils de développement La qualité est centrale Bluemix est utilisable gratuitement dans un cadre pédagogique
  • 25. Introduction au développement Web Déployer une application en 60 secondes avec Cloud Foundry Rôle cf api https://api.ng.bluemix.net Connecte Cloud Foundry sur Bluemix cf login Lance l’authentification pour accéder à votre espace cf push Lit le manifest de votre application et ordonne son déploiement Découvrir le projet Cloud Foundry
  • 26. Introduction au développement Web Troisième réalisation: déployer notre application dans le Cloud Découvrir Cloud Foundry et Bluemix Préparer une application pour le Cloud
  • 27. Introduction au développement Web Agenda 1. Découvrir le HTML 2. Programmation d’applications Web 3. Introduction au Cloud 4. Comprendre les bases de données 5. APIs & Services Web
  • 28. Introduction au développement Web Aujourd’hui Base de données SQL NoSQL MongoDB
  • 29. Introduction au développement Web Une application avec une base de données Une base de données est un fichier contenant des informations Une application la manipule à l’aide d’un SGBD
  • 30. Introduction au développement Web La première génération de base de données: SQL Début des années 70 Organisation relationnelle (tableau) Structuration forte Evolutivité verticale
  • 31. Introduction au développement Web Le NoSQL pour une information plus complexe Début des années 2000 Organisation par document (post-it) Pas de structure prédéfinie Evolutivité horizontale
  • 32. Introduction au développement Web Open Source Simple Bon couple avec Node.js Insert, Find, Update, Remove Un document MongoDB { "_id": { "$oid": "55d58c4be0cdcf1d0099cb6b" }, "Prénom": "Romain", "Nom": "Willmann", “Twitter": “@rwillmann", “Compagnie": “IBM", "Alumni": "EMLYON", } Pourquoi MongoDB comme SGBD? Une base de données de 500 Mo offerte avec Bluemix
  • 33. Introduction au développement Web Créer un document MongoDB avec Node.js var mongodb = require('mongodb'); var url = 'mongodb://…'; mongodb.MongoClient.connect(url, function(err, db) { var collection = db.collection('nom-collection'); collection.insert({"Champ 1":"Valeur 1","Champ 2":"Valeur 2"}, function(err, result) { ... }); db.close(); }); Connexion Ecriture Fermeture
  • 34. Introduction au développement Web Quatrième réalisation: ajouter une base de données à la CVthèque Configurer une Database as a Service Intégrer MongoDB dans une application
  • 35. Introduction au développement Web Agenda 1. Découvrir le HTML 2. Programmation d’applications Web 3. Introduction au Cloud 4. Comprendre les bases de données 5. APIs & Services Web
  • 36. Introduction au développement Web Aujourd’hui SOA API Watson
  • 37. Introduction au développement Web La SOA rend les structures évolutives et adaptables Architecture orientée service Centrer le fonctionnement et l’offre de l’entreprise autour de l’orientation service Orientation service Penser l’entreprise comme étant et fournissant un ensemble de services Service Une tâche répétable
  • 38. Introduction au développement Web Implémenter la SOA en créant des APIs
  • 39. Introduction au développement Web Simplifier l’accès à des ressources complexes: le cas Watson text_to_speech.synthesize()
  • 40. Introduction au développement Web Des questions? @rwillmann Romain Willmann romain.willmann@fr.ibm.com