Programmation Web et jeux vidéo - 420-W11-SF

Cours 02 -

Introduction aux notions web

Par Jimmy Gilbert

21 août 2019

  • Internet est le réseau  mondial accessible au public.

  • C'est un réseau de réseaux, sans centre névralgique:

    • publics que privés

    • universitaires

    • commerciaux

    • gouvernementaux

Selon vous, quelle est la différence entre l'internet et le Web?

Notions Web

Internet vs Web 1

Carte mondiale des câbles sous-marins

Notions Web

Internet vs Web 2

Web

  • C'est une des applications de Internet.

  • Le World Wide Web (WWW), appelée la « toile (d’araignée) mondiale » => le Web, la toile, etc.

  • C'est un système hypertexte (HTML) public fonctionnant sur Internet.

  • Le Web permet de consulter, avec un navigateur,  des pages accessibles sur des sites.

  • Courrier électronique

  • Messagerie instantanée

  • Partage de fichiers

  • SSH

  • FTP / SFTP / FTPS

  • HTTP / HTTPS => Votre cours :)

Quelle est la différence entre HTTP et HTTPS?

Notions Web

Applications Web

Notions Web

HTML et CSS 1

HTML5 :   HyperText Markup Language

  • Langage de balises afin de structurer une page Web

  • C'est les os de votre corps!

CSS :  Cascading Style Sheet

  • Langage qui décrit la présentation des documents HTML et XML

  • C'est la peau sur vos os!

Notions Web

HTML et CSS 2

HTML

CSS 

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

  • JavaScript est un langage de programmation coté client rendant les pages web interactives

  • Permet d’ajouter des fonctionnalités et de l'interactivité à la page Web.

  • C'est les muscles de votre corps! (actions)

À quoi sert JavaScript?

Notions Web

JavaScript 1

var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");

if(rows == "" || rows == null){
    rows = 10;
}
if(cols== "" || cols== null){
    cols = 10;
}

createTable(rows, cols);

function createTable(rows, cols)
{
    var j=1;
    var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>";
    for(i=1;i<=rows;i++)
    {
        output = output + "<tr>";
        while(j<=cols)
        {
            output = output + "<td>" + i*j + "</td>";
           j = j+1;
   	}
   	output = output + "</tr>";
   	j = 1;
    }
    output = output + "</table>";
    document.write(output);
}

Notions Web

JavaScript 2

Notions Web

Page statique vs dynamique 1

Page statique

  • Page Web affichée sur le fureteur et n’a pas d’autre communication avec le serveur. (JavaScript)
  • Une page statique est toujours la même
  • Elle n'est pas générée par un script côté serveur
  • Elle n'est pas reliée à un base de données.

C'est quoi une base de données?

Notions Web

Page statique vs dynamique 2

Page dynamique

  • Une page Web qui permet de communiquer avec le serveur

    • Exemple: pour un site d’achat, accès au panier

  • Utilise un langage coté serveur.
    (PHP, Ruby, Python, ASP.net)

  • Elle peut dépendre d'une base de données (MySQL)

  • Exemple: http://www.amazon.ca/

  • Uniform Resource Locator

  • http://www.example.com/2019/index.html

    • http:// => protocole utilisé

    • www.example.com/ => nom du domaine

    • 2019/ => répertoire absolu

    • index.html => page web

      • Rappel: index.html c'est la page par défaut! (facultative)

Que se passe-t-il si le navigateur ne trouve pas la page web?

Notions Web

Anatomie d'un URL

  • Une adresse IP (Internet Protocol) est un numéro d'identification

    • Exemple: 173.177.217.244

  • Attribuée à chaque branchement d'appareil à un réseau informatique

  • Unique sur chaque sous-réseau (sinon conflit!)

  • L'adresse locale de votre machine sera toujours 127.0.0.1

  • Outil pour connaître votre IP: http://whatismyipaddress.com/ip-tools

Notions Web

Adresse IP

  • HyperText Transfer Protocol
    • En français: Protocole de transfert hypertexte
  • Protocole de communication client-serveur
  • Développé pour le World Wide Web.
  • HTTPS (avec S pour secured, soit « sécurisé »)

Comment identifier si un site est sécurisé ou non? (autre que le S dans HTTPS)

Notions Web

Protocole HTTP

  • Il identifie l'adresse IP de votre site.

  • Le choix d'un nom de domaine est capital, il vous représentera sur la toile.

  • Le nom de domaine a la particularité d'être unique au monde !

  • La réglementation est simple " Premier arrivé, premier servi ".

  • Vous pouvez disposer de votre nom de domaine sans avoir d'hébergement, il suffit de le mettre en "parking".

  • Outil pour vérifier la disponibilité: https://whc.ca/noms-de-domaine/recherche

Notions Web

Nom de domaine 1

Un nom de domaine, est constitué de plusieurs éléments :

  • La racine: (par ex: steam)

    • nom de votre entreprise ou de votre activité

    • composé d’un ou plusieurs mots séparés par un tiret (-).

  • Une extension ou suffixe séparée de la racine par un point, ex : .com, .quebec, .org, .ca, ...

Pourquoi posséder son propre nom de domaine?

Notions Web

Nom de domaine 2

Notions Web

Accessibilité

  • Rendre accessible un site c'est de faire en sorte qu'un maximum de gens puisse s'en servir:

    • peut importe leur condition personnelle!

      • handicap physique, mental, etc.

  • Technologies visées: CSS et HTML

  • Site ressource

Notions Web

Utilisabilité

  • Rendre utilisable un site c'est de faire en sorte qu'un maximum de gens puisse s'en servir:

  • Technologies visées: JavaScript et CSS

  • Termes connexes:

    • User Experience (UX), ergonomie, principe "KISS"

Pensez-vous que la rampe de l'image précédente est utilisable?

Notions Web

Portabilité

  • Rendre portable un site c'est de faire en sorte qu'un maximum de gens puisse s'en servir:

    • peut importe l'environnement ou le matériel

      • Réseau mobile lent, Wi-Fi,  en autobus, etc.

      • téléphone mobile, télévision, moniteur, etc.

  • Technologies visées: CSS et HTML

  • Termes connexes:

    • Sites "responsives"

    • Approche "mobile first"

Notions Web

En résumé...

  • Internet vs Web

    • Application Web

  • Page statique vs dynamique

  • HTML, CSS et JavaScript

  • Adresse IP vs Nom de domaine

  • Protocole HTTP et URL

  • Accessibilité, Utilisabilité et Portabilité

Durant le cours, vous devrez bien comprendre

et faire les différences entre:

Notions Web

Conclusion

Cours 02 - Introduction aux notions web

By Jimmy Gilbert

Made with Slides.com

Cours 02 - Introduction aux notions web

  • 418

More from Jimmy Gilbert