Käyttöliittymät
Web-käyttöliittymät
  1. Web-kehityksen lyhyt historia
    1. Modernit web-tekniikat
  2. HTML
    1. HTML 5
    2. HTML-elementtejä
      1. Esimerkki: HTML-elementtejä
      2. Esimerkki: HTML (perinteinen kotisivu)
      3. Esimerkki: Generoitu HTML
    3. Yhteensopivuudesta
  3. Document Object Model (DOM)
    1. Virtuaalinen ja varjo-DOM
      1. Esimerkki: DOM
      2. Esimerkki: DOM-validointi JS:llä
      3. Esimerkki: DOM-tapahtumankäsittely
  4. Cascading Style Sheets (CSS)
    1. Julistukset
    2. Valitsimet
    3. Rajoituksia
      1. Esimerkki: CSS
  5. JavaScript
    1. Ongelmia
      1. Esimerkki: JavaScript
  6. Soketit ja säikeet
    1. WebSocket
      1. Esimerkki: WebSocket
    2. Web Worker
      1. Esimerkki: Web Worker
  7. Piirtopinnat
    1. Canvas
      1. Esimerkki: Canvas
    2. WebGL
  8. Verkkotekniikat
    1. Web-sovelluksen kolmikerrosarkkitehtuuri
    2. Verkkotekniikoista
    3. HTTP
      1. Esimerkki: HTTP-pyyntö (asiakas → palvelin)
      2. Esimerkki: HTTP-vastaus (palvelin → asiakas)
    4. Datan välitys (HTTP)
    5. Datan välitys (HTTP, ennen Ajaxia)
      1. Esimerkki: HTTP, ennen Ajaxia
    6. Datan välitys (XMLHttpRequest)
      1. Esimerkki: XMLHttpRequest
    7. RPC
  9. Historiaa
    1. Selaimen liitännäiset
  10. Kurssikirja
  11. Linkkejä

Web-kehityksen lyhyt historia

  • 1965 Xanadu
  • 1969 ARPANET
  • 1973 TCP/IP
  • 1991 Gopher
  • 1991 HTTP → 1.0 (1996) → 1.1 (1997) → 2 (2015) → 3 (draft 10/2018)
  • 1993 HTML → 2 (1995) → 3.2 (1997) → 4.0 (1997) → 5 (2014)
  • 1993 CGI (1993–1997), FastCGI (1996)
  • 1994 Keksit (cookies) → Web storage (2008–)
  • 1995 JavaScript → ES5 (2009) → ES6 (2015) → ... → ES9 (2018)
  • 1996 CSS → 2 (1998) → 2.1 (2004–2011) → 3 (1999–)
  • 1996 XML (1996–2008), XML 1.1 (2004–), XHTML 1.0 (2000), JSON (2001)
  • 1996 iframe, XMLHTTP (1998), XMLHttpRequest (2004-2005), Fetch (2012?)
  • 2014 HTML5: WebRTC, Canvas, Video, API: Geolocation, File, Web Audio, Database, Microdata, Offline apps, drag’n’drop, ...

Web 2.0 tag cloud, Wikipedia:

Modernit web-tekniikat

Nykyään web-käyttöliittymä nojautuu seuraaviin pääkieliin:

  • HTML: sivun sisällön rakenteen kuvaus (vrt. näkymäverkko)
  • CSS: sivun sisällön ulkoasun kuvaus
  • JavaScript: sivuston ohjelmakoodi
  • WebAssembly: matalan tason ajoympäristö ohjelmakoodille

Erilaisiin käyttötarkoituksiin saatavilla HTML-komponentteja ja ohjelmoitavia JavaScript-rajapintoja. Lisäksi erilaisiin käyttökohteisiin on omia erikoisformaatteja, esim. Web Open Font Format (WOFF).

HTML

  • Hypertekstidokumentin tiedostomuoto
    • kuvaus-, ei ohjelmointikieli
  • Sisältää web-sivun (koko) rakenteen ja metadataa
    • Myös skriptit ja CSS omissa osioissaan tai erillisinä tiedostoina
    • (osa metadatasta myös HTTP-otsakkeissa)
  • Dokumentin rakenne puumainen
  • Määritetty kielioppi
    • koottu tageihin
    • kaksi syntaksia: <tagi></tagi> tai <tagi />
    • käytännössä selainten siedettävä bugisia sivumäärittelyjä.

HTML 5

  • Uusin versio HTML:stä.
    • 5.0 (2014), 5.1 (2016), 5.2 (2017), 5.3 (draft 2017)
  • Päätelaitteiden selaimissa yhä vaihteleva tuki
    • nykyään silti valtaosin tuettu hyvin
  • Tarjoaa uusia elementtejä ja attribuutteja
    • semanttisesti tarpeellisia peruselementtejä
    • lomakemuotoinen syöte, dialogit
    • video, piirtopinta yms. multimedia
  • HTML5 puhekielessä voi viitata koko tekniikoiden kirjoon, joka tullut saataville HTML5:n ohessa

HTML5:n tuomia uusia -elementtejä ja attribuutteja:

article aside audio canvas command datagrid datatemplate 
datalist details dialog embed event-source figure footer
nav header meter m nest output progress rule section time
video datetime datetime-local date month week time number
range email url

HTML-elementtejä

Tarkastellaan muutamia yleisiä elementtejä:

  • Päätasot ja metadata

    • <html>: koko dokumentti
    • <head>: otsakeosio
    • <link>: ulkoinen resurssi
    • <meta>: metatietokenttä (esim. dokumentin merkistö)
    • <style>: CSS-tyylimäärittely
    • <script>: JavaScript-ohjelmakoodia
    • <title>: sivuston otsikko
    • <body>: sivuston pääsisältö

  • Sivuston osiot

    • <h1>, ..., <h6>: otsikkotasot 1–6
    • <header>, <footer>, <main>: ylä-, ala- ja keskiosa
    • <aside>, <nav>, <section>, <article>: lisäjaottelua

  • Yleiset muotoiluelementit

    • <p>: Leipätekstin kappale
    • <div>: Lohkomuotoinen osa
    • <span>: Inline-osa (esim. sana tekstissä)
    • <br>: Pakotettu rivinvaihto (varo väärinkäyttöä)

  • Upotettava sisältö

    • <img>, <audio>, <video>: Kuva-, ääni- ja videoresurssit
    • <canvas>: Piirtopinta
    • <table>: Taulukkomuotoinen data
    • <form>: Lomake datan syöttöön (koodiesim. myöh.)
    • <map>, <area>: Alue kuvassa

  • Hyperlinkki ankkuriin tai ulkop. resurssiin: <a>

  • Tekstimuotoilu: idea kuvata tekstin luonne (esim. korostettu), tyylimäärityksellä ulkoasu (esim. lihavointi / alleviivaus / väri)

Esimerkki: HTML-elementtejä

<table>
  <tr>
    <th>Op.num</th><th>Arvosana</th>
  </tr><tr>
    <td>12345</td><td>5</td>
  </tr>
</table>

<p>Eläinlajeja</p>
<ul>
  <li>Kissa</li>
  <li>Koira</li>
</ul>

<p>Parhaat artistit</p>
<ol>
  <li>Frederik</li>
  <li>Arttu Wiskari</li>
  <li>Dr. Bombay</li>
</ol>

Esimerkki: HTML (perinteinen kotisivu)

<html>
<meta charset="UTF-8">
<head>
  <title>Kotskabortaali</title>
</head>
<body>
  <h1>Tervetuloa webbisivulleni!</h1>

  <h2>Sisältö</h2>
  <em>Maailman</em> parhaat sivut.
  <img src="under_construction.webp">

  <h2>Contact</h2>
  pelulamu (at) roskaposti (dot) fi
</body>
</html>

Esimerkki: Generoitu HTML

Tyypillinen html-sivu nykyään konegeneroitu ja “minifioitu”.

Gatsby-työkalun generoima sivu:

Yhteensopivuudesta

Web-tekniikoissa alusta asti epäyhteensopivuusongelmia:

  • standardit keskeneräisiä
  • puutteellisia toteutuksia
  • päätelaitteiden ohjelmistopäivitykset (kaikki eivät päivitä heti)

Document Object Model (DOM)

  • Alusta- ja kieliriippumaton esitystapa HTML-dokumentin entiteeteille.

    • Puurakenne (vrt. JavaFX:n näkymäverkko)
    • Luodaan selaimessa sivulatauksen yhteydessä HTML-dokumentista (mm. syntaksivirheet karsitaan)
    • Muokattavissa
    • Ohjelmointiin JavaScript API

  • DOM-tasot:

    1. (legacy, HTML 4) hyvin suppea, puutteellisesti kuvattu API
    2. virallinen tuki dokumentin tarkastelulle ja manipuloinnille
    3. getElementById, valmistajakoht. tapahtumia
      syötetapahtumat (hiiri, näppäimistö, kosketus ja eleet)
      muut tapahtumat (sivulataus, lomake, DOM-rakenne, …)
    4. (2004): XPath-tuki (XML-kyselykieli), sarjallistaminen, …
    5. (2015–): nykyään ”elävä” määrittely

Virtuaalinen ja varjo-DOM

  • DOM-manipulointi päivittää muutokset näkymään välittömästi

    • selaimen määrittämä oletustoiminnallisuus
    • sovelluksella ehkä parempi näkemys, miten päivitys tulisi tehdä.
      esim. korvataan kerralla koko DOM-alipuu

  • Kehyksellä oma ”virtuaalinen” DOM-rakenne JavaScriptin muistissa.

    • Käytössä esim. React.js-kehyksessä (ReactDOM).
    • Huom.: eri kuin varjo-DOM (shadow DOM), joka on tavallaan alinimiavaruus DOM-avaruuden sisällä (selain tarjoaa)

Esimerkki: DOM

<html>
  <head>
    <link href="tyylit.css" rel="stylesheet">
    <title>Esimerkkisivu</title>
  </head>
  <body>
    <p>Hei <span>hieno</span> maailma!</p>
    <div><img src="kuva.webp"></div>
  </body>
</html>

Esimerkki: DOM-validointi JS:llä

HTML-dokumentti:

<form name="myForm" action="demo.asp"
      onsubmit="return validate()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Lähetä">
</form>

JavaScript-validointikoodi:

function validate() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == null || x == "") {
    alert("Ei voi lähettää, nimeä ei annettu!");
    return false;
  }
}

Esimerkki: DOM-tapahtumankäsittely

HTML-dokumentti:

<html>
  <meta charset="utf-8">
  <head>
    <title>Testisivu</title>
  </head>
  <body>
    <h1>Mitäs tässä</h1>
    <p>Eipä kummia!</p>
  </body>
</html>

JavaScript-tapahtumakoodi:

var showAlert = function() {
  window.alert("No heippa!");
};

// sivua napsautettaessa
document.onclick = showAlert;

// dokumenttia ladatessa
window.onload = showAlert;

// kumotaan edellinen käsky
window.onload = null;

Cascading Style Sheets (CSS)

  • Historiaa:

  • Ongelma: alussa selaimet sotkivat HTML/XML-dokumentin
    rakenteen (DOM) ja graafisen esitystyylin.

    • esim. <FONT>, <BLINK>, <MARQUEE>,
    • tilan luominen taulukoilla

  • Ratkaisu: Sisällön eriyttäminen esitystavasta

    • HTML/XML: dokumentin rakenne
    • CSS: visuaalisen esityksen säännöt (periytyvät DOM-puussa)

Seuraavassa joitakin CSS:n yleisiä ominaisuuksia:

  • värit ja läpinäkyvyys

  • tausta, reunat

  • fontit ja tekstitehosteet

  • gradientit, varjot

  • 2d/3d-muunnokset

  • elementtikoht. tyylit: listat, napit

  • väli ja asemointi

  • tasaus, koko ja järjestys

  • ruudukko (n x m), palstat

  • joustava / mukautuva tila

  • mediakysely (responsiivisuus)

  • siirtymät ja animaatiot

Julistukset

  • Julistukset (declaration)
    • Sääntöjä ja julistuksia voi lukea eri lähteistä:
      selaimen oletukset, css-tiedostot, html-elementti jne.
    • Lähteillä on prioriteetti ja ne voi sarjoittaa
    • Spesifisyys määrittää myös sovellusjärjestystä
Prioriteetti Lähteen tyyppi
1 Importance
2 Inline
3 Media Type
4 User defined
5 Selector specificity
6 Rule order
7 Parent inheritance
8 CSS property definition in HTML document
9 Browser default

Valitsimet

  • Valitsin (selector)
    • rajaa tyylimäärittelyn tiettyihin elementteihin
    • joka elementillä id ja tyyppi (esim. div), voi toteuttaa useita luokkia
    • erilaisia valitsinsääntöjä, ~40 nykyään
Valitsin Spesifisyys
H1 { color: white; } 1
P EM { color: green; } 2
.grape { color: yellow; } 1,0
P.odd { color: blue; } 1,1
P.odd EM.dim { color: red; } 2,2
#id218 { color: brown; } 1,0,0
style=" " 1,0,0,0

Rajoituksia

CSS:llä kuitenkin joitain rajoituksia:

  • Valitsimien tarkennus toimii vain ”sisäänpäin”
  • Tekstin valinta rajoittunutta

Nykyään ratkaisuja pitkään haitanneisiin ongelmiin:

  • Ei voida nimetä sääntöjä / sisällyttää sääntöjä sääntöihin (nyk. muuttujat)
  • Pystysuuntaan asettelu (nyk. Flexible Box Module)
  • Lausekkeiden puute (nyk. calc() )
    • esim. calc(100% - 80px)
  • Palstat (nyk. column-* -ominaisuudet)
  • CSS-koodikehykset poistavat myös rajoituksia

Esimerkki: CSS

<html>
  <head>
    <style>
      body { background: green; }
      h1 { color: red; }
      #a { background: blue; }
      .b { border: 5px solid yellow; }
    </style>
  </head>
  <body>
    <h1>
      Tämän tekstin palat<br>
      <em id="a" class="b">perivät</em>
      värinsä.
    </h1>
  </body>
</html>

JavaScript

(Brendan) Eich was instead commissioned to create a new language that resembled Java, JavaScript for the Netscape Navigator Web browser. The first version was completed in ten days in order to accommodate the Navigator 2.0 Beta release schedule, and was called Mocha, which was later renamed LiveScript in September 1995 and later JavaScript in the same month.

  • Kielenä

    • dynaamisesti tyypitetty
    • funktionaalinen ja prototyyppipohj. olio-ohjelmointi
    • nyk. kääntämisen kohde: TypeScript, PureScript, Scala, Kotlin, …

  • Nykyään

    • aktiivisen kehityksen kohde
    • JIT-käännetty kuten Java
    • WebAssembly

  • Selaimessa

    • alunperin kevyeen skriptaamiseen
    • täydensi Java-appletteja
    • DOM-operaatiot ja tapahtumienkäsittely
    • nyk. yleinen selainpuolen ohjelmointi

  • Palvelimilla

    • Node.js yms.

Ongelmia

  • Kieli haastavaa kääntää nopeaksi ja muistitehokkaaksi

    • The Computer Language Benchmarks Game:
      2,8 – 17,3x natiivia hitaampi, 3 – 27,3x isompi muistitarve ?

  • Tietotyypit

    • rajoittuneita, liiankin joustava
    • ei tarkisteta ennakkoon

  • Globaalin tilan käyttö

  • Vanhentuneet oppaat ja esimerkkikoodit

  • Prototyyppipohj. oliomalli isoissa ohjelmissa

  • Asynkroninen ohjelmointi haastavaa, mutta yleistynyt:
    async/await, Promise

  • Tietoturva (XSS jne.) - ohj.kehykset auttavat?

  • Vaihteleva tuki päätelaitteilla

Esimerkki: JavaScript

var summa = function(...args) {
  var i, x = 0;
  for (i = 0; i < args.length; ++i) {
    x += args[i];
  }
  return x;
}

function kertoma(n) {
  if (n == 0) {
    return 1;
  }
  return n*kertoma(n - 1);
}

var s = summa(11, 22, 33); // = 66
kertoma(s);

Soketit ja säikeet

WebSocket

  • Kaksisuuntainen protokolla asiakkaan ja palvelimen välillä
  • Neuvottelu aluksi HTTP:llä, vaihto WS:ään
  • Myös HTTPS ja WSS (WS over TLS)
  • Pienempi latenssi ja liikennemäärä
  • Palvelin voi aloittaa viestinnän

Esimerkki: WebSocket

const so = new WebSocket(
  "ws://www.utu.fi/testi",
  "protocol"
);

so.onopen = (event) => {
  so.send("Moro palvelin!"); 
  so.close();
};

Web Worker

  • JavaScript on perusmuodossaan yksisäikeinen.

  • Toiminnallisuutta jaetaan ajan suhteen tapahtumapohjaisella suoritusmallilla.

  • Web Worker: taustasäie, jolle voidaan delegoi työ

    • Viestintä edustasäikeen kanssa callback-rutiineilla.
    • Merkittävä parannus selainpohjaisten ohjelmien tekoon

Esimerkki: Web Worker

HTML-dokumentti (etsijä.html):

<html><meta charset="utf-8">
  <body>
    <p>Suurin löydetty alkuluku:
    <span id="a"></span></p>
    <script>
      new Worker('etsijä.js').onmessage = e =>
        document.getElementById('a').textContent = e.data;
    </script>
  </body>
</html>

Web worker -taustaohjelma (etsijä.js):

var n = 1;
search: while (n++) {
  for (var i=2; i <= Math.sqrt(n); i++)
    if (n % i == 0) continue search;
  postMessage(n);
}

Piirtopinnat

Canvas

  • Graafinen piirtopintakomponentti HTML5:ssä

    • immediate mode
    • ohjataan JavaScriptillä
    • tukee 2D- ja 3D-grafiikkaa

  • Vertaa: SVG

    • SVG:llä näkymäverkko, esitetään XML:llä
    • tukee myös tapahtumankäsittelyä

  • Vertaa: JavaFX Canvas

  • Ei tarvetta selainlaajennuksille

    • toimii käytännössä kaikissa selaimissa
    • “offscreen canvas” vielä vaihtelevasti tuettu

Esimerkki: Canvas

HTML-dokumentti:

<canvas id="C" width=500 height=500>
  Selaimesi ei tue canvas-elementtiä.
</canvas>

JavaScript-piirtokoodi:

var canvas = document.getElementById("C");
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

WebGL

  • JavaScript-rajapinta, 3D/2D-grafiikan

    • käyttää hyväkseen Canvas-piirtopintaa

  • Toimii GPU-kiihdytetysti

    • WebGL 1.0 (2011): OpenGL ES 2.0, GLSL-varjostimet
    • WebGL 2.0 (2017): OpenGL ES 3.0

  • Ei tarvetta selainlaajennuksille

    • toimii käytännössä kaikissa selaimissa

  • WebGL-kehyksiä ja -ohjelmia, esim. https://threejs.org/

  • Nykyään: WebGPU

Verkkotekniikat

Web-sovelluksen kolmikerrosarkkitehtuuri

Verkkotekniikoista

  • TCP/IP: matalan tason verkkoprotokolla asiakkaan ja palvelimen väliseen viestintään

    • OSI-mallin 7 kerrosta

  • DNS: nimetyt osoitteet

    • nykyään myös DNSSec

  • TLS/SSL: salattu viestikerros HTTP-viestintään

  • HTTP: protokolla hypertekstisivujen välittämiseen

HTTP

HTTP-komentoja (versio 1.1)

GET - resurssin haku        
POST - lomakkeen lähetys    
HEAD - vain sivun otsakkeet
PUT - webdav               
DELETE - webdav
OPTIONS
TRACE
CONNECT

HTTP-paluuarvoja (versio 1.1)

3xx - sivu siirretty
4xx - asiakkaan virhe (esim. 404 = ei löydy)
5xx - palvelimen virhe (esim. 500 = palvelin kaatui)

Esimerkki: HTTP-pyyntö (asiakas → palvelin)

GET /wiki/HTTP HTTP/1.1
Host: fi.wikipedia.org
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1;
fi-FI; rv:1.6) Gecko/20040206 Firefox/0.8
Accept: text/xml,application/xml,application/xhtml+xml,
text/html;q=0.9,text/plain;q=0.8,video/x-mng,image/png,
image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Language: fi,en;q=0.7,en-us;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Proxy-Connection: keep-alive
Referer: http://fi.wikipedia.org/w/wiki.phtml?title=HTTP
Cache-Control: max-age=0

Esimerkki: HTTP-vastaus (palvelin → asiakas)

HTTP/1.1 200 OK
Date: Tue, 06 Jul 2004 17:59:22 GMT
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Cache-Control: private, must-revalidate
Via: 1.0 cthulhu
Server: Apache/1.3.29 (Unix) PHP/4.3.4
X-Powered-By: PHP/4.3.4
Set-Cookie:
fiwikiSession=a8015bd32eee4e5bd46fd83aea40f159;
path=/
Vary: Accept-Encoding,Cookie
Content-Language: fi
Content-Type: text/html; charset=utf-8
X-Cache: MISS from wikipedia.org
Transfer-Encoding: chunked
Connection: keep-alive

Datan välitys (HTTP)

  • Osana osoitetta
  • Evästeissä
  • Mukautetussa HTTP-otsakkeessa
  • HTTP-pyynnön rungossa

Datan välitys (HTTP, ennen Ajaxia)

Esimerkki: HTTP, ennen Ajaxia

Tiedosto: index.html

<html>
  <body>
    <form action="vastaus.php" method="get">
     Nimi:
     <input type="text" name="name">
     <br>
     
     Elämän tarkoitus:
     <input type="text" name="me">
     <br>
     
     <input type="submit">
    </form>
  </body>
</html>

Tiedosto: vastaus.php

<html>
  <body>
    Terve <?php echo $_GET["name"]; ?><br>
    Tarkoituksesi on:
    <?php echo $_GET["me"]; ?>
  </body>
</html>

Datan välitys (XMLHttpRequest)

  • Asynkroniseen viestintään käyttöliittymän ja palvelimen välillä.
    • usein saatavilla sovelluskehyksen / kirjaston kautta
  • Käyttö:
    • käsittele asiakaspuolen tapahtuma
    • lähetä Ajax-pyyntö palvelimelle
    • lataa data palvelimelta (XML, JSON, HTML)
    • päivitä DOM
  • Ongelmia: palvelin ei voi aloittaa viestintää
    • pollauspohjaiset keinot / WebSocket

Esimerkki: XMLHttpRequest

Tiedosto: ajax.html

<html>
    <meta charset="utf-8">
    <head>
      <script type="text/javascript" src="ajax.js " />
    </head>
    <body>
        <p>Kirjoita alle jotain</p>
        <form>
          Elämän tarkoitus:
          <input type="text" onkeyup="ehdota(this.value)">
        </form>
        <p>Ehdotuksia: <span id="list"/></p>
    </body>
</html>

Tiedosto: ajax.js

function ehdota(str) {
  if (str.length == 0) {
    document.getElementById("list").innerHTML = "";
    return;
  } else {
    var req = new XMLHttpRequest();
    req.onreadystatechange = () => {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("list").innerHTML =
          this.responseText;
      }
    };
    req.open("GET", "ajax.php?q=" + str, true);
    req.send();
  }
}

Tiedosto: ajax.php

<?php
$a = array("Osta Mersu", "Perusta firma", "Nosta tukia");
$q = $_REQUEST["q"]; $apu = "";
if ($q !== "") {
  $q = strtolower($q);
  $len=strlen($q);
  foreach($a as $name) {
    if (stristr($q, substr($name, 0, $len))) {
      if ($apu === "") $apu = $name;
      else $apu .= ", $name";
    }
  }
}
echo $apu === "" ? "enpä tiedä" : $apu;
?>

RPC

  • Web-sovellukset usein hajautettuja järjestelmiä.
  • Tekniikkoina esim. JSON-RPC, XML-RPC
 -> {"method": "echo", "params": ["Hello"], "id": 1}
 <- {"result": "Hello world", "error": null, "id": 1}

<?xml version="1.0"?>
<methodResponse>
<params>
  <param>
    <value>
      <string>Hello world.</string>
    </value>
  </param>
</params>
</methodResponse>

Historiaa

Selaimen liitännäiset

R.I.P.: "As of February 2018, fewer than 0.1% sites used Silverlight, 5.3% used Adobe Flash, and 2.4% used Java."

Firefox version 84 will be the final version to support Flash. On January 26, 2021 when we release Firefox version 85, it will ship without Flash support, improving our performance and security. For our users on Nightly and Beta release channels, Flash support will end on November 17, 2020 and December 14, 2020 respectively. There will be no setting to re-enable Flash support.

  • Microsoft ActiveX & Silverlight
  • Sun/Oracle Java Applets & Webstart
  • Adobe Flash
  • Quicktime, Real Player, Windows Media Player, gstreamer
  • Unity3D web player, Google Native Client, XPCOM

Nykyään paljolti HTML5-tekniikoiden korvaamia.

  • Canvas, WebGL, WebRTC, WebExtensions API, ...

Myös liitännäisten API-tuki ja valmistajien tuki loppunut 2010-luvulla.

Kurssikirja

  • Luvut 9 & 10

Linkkejä