Web B2

Appearance

Javascript et Canvas

Natura Morta by Jon Rafman

The Nine eyes of Google Street View

Caroline Delieutraz, Deux visons

Aujourd'hui ​

  • Retour sur le dernier travail
  • Questions éventuelles sur Geonetart
  • Intégration d'un script Javascript à notre page HTML
  • La balise CANVAS
  • noCanvas()

Javascript ​

Ce que Javascrit peut faire : https://www.w3schools.com/js/js_examples.asp

Les bibliothèques (jQuery, p5js etc..)

P5.js ​

https://p5js.org/get-started/

html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

window.location ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Olia summer 2022</title>
    <script>
        window.onload = window.location.replace("http://todayandtomorrow.net/olia/summer/");
    </script>
</head>
<body>
</body>
</html>

olia summer 2022

Custom fonts ​

css
@font-face {
    font-family: "Swing";
    src: url('/fonts/swing.ttf') format('truetype');
}

Plus d'infos par ici.

Media Queries ​

css
img {
    max-width:100%;
}

@media (width <= 767px) { ... }

@media (767px <= width <= 960px ) { ... }

Positionnements CSS ​

Fixer des éléments dans la page, ou les positionner par rapport à d'autres éléments.

En savoir plus

Quelques sites.. ​

Quelques travaux précédents ​

Peut-être... ​