Web Deel I - Introductie - HTML5. Hoorcollege IUW 16 november 2017 Christof van Nimwegen

Transcriptie

1 Web Deel I - Introductie - HTML5 Hoorcollege IUW 16 november 2017 Christof van Nimwegen

2 Plaats Web in cursus Week College dinsdag Werkgroep dinsdag College donderdag Werkgroep donderdag 3 hoofdlijnen: Mens - Mens Mens machine (Web) Machine Machine Gastsprekers (verplicht) Algemeen en opdracht skills needed 2

3 Waarom Web in IUW? Het Web (WWW) is een schitterend voorbeeld van een platform voor informatie uitwisseling Het is het grootste informatie netwerk ooit gebouwd Tot 3 jaar geleden was er een dedicated vak Webdesign. IUW neemt een iets andere, bredere hoek Hands-on web bouwen iets naar de achtergrond Begrip van de principes van WWW, technieken Grote kans dat je late werkzaam zult zijn in WWWgerelateerde of WWW-powered omgeving 3

4 Web: invulling Heeft gedeeltelijk een relatie met OIS (blok 3), delen ervan komen terug in Usability Engineering 5 colleges (waarvan 1 halve) Meteen na hoorcollege werkcolleges met bijbehorende opdracht: Basic Web Skills Voor de liefhebber is er verdere technische verdieping in vak Webtechnologie (INFOB2WT). Praktisch werkcolleges: veel zelf doen, er zijn student-assistenten en tutorials. Niet verplicht. 4

5 Webopdracht > Trust Opdracht (Webwinkel) Onderzoek Dataverzameling Demonstratiemodel Edit PHP/HTML 5

6 Web Winkel > Natuurlijk great services out there 6

7 Web Opdracht > Trust Opdracht (Webwinkel) Ook niet zelf van scratch coderen Wel zelf configureren, bouwen prefab webwinkel, inrichten, tweaken, html en php vol functioneel (behalve echt betalen) Speficiek t.b.v. Trust Opdracht: College 7 december: 1 e helft: gastspreker Bol.com 2 helft: ecommerce sites 7

8 Web Opdracht t.b.v. Trust (Webwinkel) 8

9 Websites: Natuurlijk, great services out there 9

10 Natuurlijk! Maar.. De rol die WWW speelt in ons vakgebied is enorm, maar als informatiekundige ben je waarschijnlijk niet degene die hands-on websites gaat bouwen. Toch het is begrip basis principes essentieel. Websites bouwen kan op vele manieren, begrip komt het snelst door het ZELF handmatig te doen. Dit doen we in Basic Web Skills opdracht (week 1-4) De keuze is PHP/HTML5/CSS, de UU biedt studenten een stuk server ruimte aan waar dit op werkt. 10

11 Web Opdracht in zijn geheel Zeer compact, sneltreinvaart, basis technieken Basale website Site op eigen webspace plaatsen Opdrachten in drietallen inleveren Indien nog geen team: Zo snel mogelijk (zie website > opdrachten) Indien zoekende, meld je bij mij of student assistent Weging voor eindcijfer (opdrachten 40%, toetsen 60%) Web Opdracht: 25% Opdracht Trust: 75% 11

12 Web Opdracht per week Week 1 (donderdag): server inrichten, maak html bestand online en oefenen syllabus/online tutorials, virtual server installeren Week 2 (donderdag): css, styles, navigatiemenu, enkele html pagina s, tabellen, forms, validatie Week 3 (donderdag): Video plaatsten, icon-font gebruiken, php-forms werkend + data schrijven Week 4 (donderdag): gebruik webfont, responsiveness handmatig aanbrengen, oefening bootstrap, facultatief: javascript Deadline: me , 23:59 Punten uit de opdracht zelf, HTML, CSS : online (vindbaar) Procesbeschrijving: ingeleverd per mail 12

13 Web Opdracht vandaag Consolideer teams indien nog niet gedaan Kies (installeer?) code & FTP tool Serverruimte in orde maken Maak WWW directory (wordt niet zichtbaar) Zorg dat daarin een index.html, index.htm (of index.php) in staat op de root Installeer XAMP virtual server, maak werkend Oefenen met online tutorials en/of syllabus 13

14 Web Opdracht vandaag XAMPP server emulatie Index.html 14

15 Web is een heel groot onderwerp! ontwerpen content user centred design, creativiteit, vormgeving tekst, multimedia, databases structuur, navigatie, genres technologieën client (browsers), server markup, programmeertalen, frameworks, services gebruiken, nieuwe toepassingen interactie, usability, experience, zoeken internetcultuur, social web, e-business, services, e-government, e-health, big data 15

16 WWW internet Geen WWW: P2P Skype Usenet FTP Smartphone Apps 16

17 Hoe oud is het web (niet internet)? Dus jaar!!! 17

18 Het web (niet internet) is jaar oud! 18

19 Voorlopers WWW: Bookwheel (1588) 19

20 Voorlopers WWW: Memex machine Vannevar Bush: As We May Think (1945). Memex machine is gekoppeld aan een bibliotheek en kan boeken en films uit de collectie direct weer geven. Gebruikers zouden verwijzingen tussen deze werken direct kunnen volgen en ook toevoegen. Het onmiddellijk volgen van verwijzingen in zo'n apparaat de menselijke omgang met kennis fundamenteel veranderen. Conceptuele voorloper van WWW. 20

21 Voorlopers WWW: Memex machine 21

22 Voorlopers: Hypertext (1963) Hypertekst (Ted Nelson): tekst met direct activeerbare hyperlinks. De lezer hoeft voor het volgen van een verwijzing geen bladzijden, hoofdstukken of andere teksten op te zoeken en open te slaan, maar kan direct naar een specifieke tekst of een specifieke plek in de tekst doorspringen. Hypermedia: als ook andere middelen, zoals geluid en bewegend beeld, integraal in het geheel zijn opgenomen 22

23 Voorlopers: Hypertext (1967) Gebruik van de Hypertext Editing System (HES) console op Brown University,

24 Voorlopers: Hypercard (1987) 24

25 Geboorte WWW WWW uitgevonden in 1989 door (Sir) Tim Berners-Lee oorspronkelijk doel: wetenschappelijke papers van het CERN publiceren verbindingen tussen papers modelleren WWW bracht drie ideeën bij elkaar elektronische documenten (SGML, markup) hypertext (documenten verbonden door links) computernetwerken (Internet bestaat al veel langer) Nieuwe technologieën HyperText Markup Language (HTML): documenten HyperText Transfer Protocol (HTTP): communicatie 25

26 Consolidatie: WWW Dot coms (AOL, Yahoo, Netscape, Real Networks, Google, Verisign etc) Exploderende aandeel prijzen, enorme IPOs (initial public offerings) Instant billionaires Internet Boom, Dot Com Tijdperk Bijna elk bedrijf wilde en kreeg website met eigen domein Gebruik werd normaal, Chat services Browser wars E-commerce begon serieuze vormen aan te nemen. 26

27 Even terug Internet, Koude oorlog? Wapenwedloop en dreiging van massavernietiging Scenario s voor na de grote klap Maar is er nog communicatie mogelijk? Waarschijnlijk niet 27

28 Gedistribueerde netwerken Hoe dan ook: Men realiseerde zich: Telefoonlijnen zijn kwetsbaar want ze zijn gecentraliseerd is er een andere manier van communiceren mogelijk? zijn gedistribueerde netwerken minder kwetsbaar? 28

29 ARPANET ARPA = Advanced Research Projects Agency Kwam op gang in 1960 s Research contracten voor defensie Allerlei experimentele vormen van computing. Werd ARPANET 29

30 Een stap...naar het Internet! 30

31 Infrastructuur: verdere ontwikkelingen ARPANET: proof of concept packetswitched network over geleaste telefoonlijnen software moest nog worden ontwikkeld ALOHAnet ( ) Verbinding campuses U. of Hawaii Telefoon te duur/onbetrouwbaar Nieuw idee: ontvangst bevestigen anders opnieuw zenden Na random tijdsinterval 1e extensie buiten USA: NORSAR (1970) NORSAR (1970) seismische data voor opsporen atoombomexplosies Hoe deze netwerken te verbinden? 32

32 Architectuur World Wide Web Client-server architectuur HTTP protocol (HyperText Transfer Protocol) pagina-gebaseerd: verzendt complete documenten stateless: connectie houdt op te bestaan als request is afgehandeld server kent geen relatie tussen opeenvolgende requests 33

33 De laatste stap: TCP/IP TCP: Transmission Control Program Verbinden netwerken door internet network protocol Belangrijke eigenschappen: verbindt heterogene netwerken robuust leggen van verbinding tussen client en server opdeling files in verzendbare brokjes opnieuw verzenden als niet bevestigd alle data komt aan, maar niet in volgorde binnen, dus niet geschikt voor time-based media 34

34 De laatste stap: TCP/IP IP: Internet Protocol In IP protocol hebben nodes een numeriek adres als IP: verzending pakketjes tussen numerieke IP adressen We gebruiken in de praktijk URLs hierarchische domeinnamen als DNS (Domain Name System) in principe tabel van URLs en IP adressen 35

35 De laatste stap: TCP/IP 36

36 Tot slot: De browser 1e browser die grafische elementen in HTML ondersteunde (later NS) 37

37 Toen en nu.. 38

38 En toen: Browser wars. 39

39 The winner (2016): Chrome 40

40 Evolutie van web design, mode, trends Animated gif s Flash websites Muziek die automatisch speelt Bewegende banners Frames Comic Sans Font Tellers.. 41

41 Dit zien we nooit meer 42

42 Dit zien we (bijna) nooit meer 43

43 Of dit (niet dramatisch, wel gedateerd) 44

44 Tegenwoordig eerder: 45

45 Tegenwoordig eerder: 46

46 Tegenwoordig eerder: 47

47 Of zelfs. ve/2013/may/26/firestorm-bushfiredunalley-holmes-family 48

48 Of.;-) 49

49 Dus Webpagina s hoe? Metafoor: webpagina is als papieren bladzijde Metafoor gaat niet altijd op geen fysiek object collectie data waarvoor in real time een presentatie wordt gegenereerd HTML, CSS, JavaScript dynamisch andere media mogelijk: video, muziek interactie pagina s te raadplegen met verschillende middelen browsers, besturingssystemen, apparaten toch zelfde functionaliteit vereist niet-lineaire navigatie 50

50 HTML: Geen digitaal papier maar boom 51

51 HTML document <!doctype html> <html> <head> <title>iuw</title> </head> <body> <p>dit is het eerste hoorcollege IUW</p> </body> </html>

52 HTML: tags!!! Informatiekunde = <a href=" 53

53 HTML5

54 HTML5 55

55 HTML5 56

56 HTML5 waarom waren eerdere HTML versies niet goed genoeg meer? documentgericht weinig interactie gebrekkige ondersteuning multimedia een paar highlights minder scripting, minder code minder overhead, meer vrijheid living standard, klaar in 2022? Cross-platform (tablet,smartphone, a netbook, notebook or a Smart TV). Webapplicaties die ook werken als je niet online bent.

57 Audio en video in HTML5 geen externe plugins meer nodig <audio controls="controls"> <source src="song.mp3" type="audio/mpeg"/> </audio> <video controls="controls" autoplay="autoplay"> <source src="movie.mp4" type="video/mp4"/> <source src="movie.ogg" type="video/ogg"/> Your browser does not support the video tag. </video> <video controls> <source src="movie.mp4"> </video>

58 Nieuwe elementen, zoals <header>, <nav>, <article>, <section>, <aside>, <footer>, <canvas> <progress>, <mark>, <summary>, <detail>

59 Dus.div? HTML5 Semantically richer!! 60

60 HTML5: het einde van Flash? <canvas>: Tekenen en animatie (wel met JS) Interactief, flexibel, browser/platform, is een web standaard (part of HTML5), develop once, run everywhere, gratis, toegankelijke tools 61

61 Vragen? 62