Deel II Introductie Webdesign. Hoorcollege IUW Thema Webdesign 10 november 2014 Christof van Nimwegen

Transcriptie

1 Deel II Introductie Webdesign Hoorcollege IUW Thema Webdesign 10 november 2014 Christof van Nimwegen

2 Waarom Webdesign in IUW Het WWW is een schitterend voorbeeld van een platform voor informatie uitwisseling Het is het grootste informatie netwerk ooit gebouwd Tot vorig jaar was er een dedicated vak Webdesign. IUW neemt een iets andere, bredere angle Hands-on webbouwen iets naar de achtergrond 2

3 Web is een heel groot onderwerp! ontwerpen user centred design, creativiteit, vormgeving technologieën content client (browsers), server markup, programmeertalen, frameworks, services standaardisering, innovatie, duurzaamheid tekst, multimedia, databases, tweets structuur, navigatie, genres gebruiken interactie, usability, experience zoeken internetcultuur, social web, e-business, services 3

4 Het onderdeel Web Heeft gedeeltelijk een relatie met OIS, enkele delen ervan komen ook terug in usability engineering De 1e opdracht gaat over web. Deze begint NU, dit wordt de container voor de opdracht 2: online trust Theorie: de hoorcolleges, en: 2 artikelen Praktisch Werkcolleges: veel zelf doen, er zijn student assistenten en tutorials 4

5 Webdesign opdracht Zeer compact, sneltreinvaart, basis technieken Basale website, opdracht 2 komt hier later in Site op eigen webspace plaatsen 1 deadline mag gemist worden Opdrachten in tweetallen inleveren Meld je team vandaag aan via webformulier (zie website > opdrachten Weging voor eindcijfer (opdrachten 40%, toetsen 60%) opdracht 1: 30% opdracht 2: 70% 5

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

7 Het web (niet internet) is 25 jaar oud! 7

8 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. 8

9 Voorlopers WWW: Memex machine 9

10 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 10

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

12 Voorlopers: Hypercard (1987) 12

13 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 13

14 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. 14

15 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 15

16 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? 16

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

18 Een stap...naar het Internet! 18

19 Een stap...naar het Internet! 19

20 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? 20

21 De laatste stap: TCP/IP? Verbinden netwerken door internetwork protocol term Internet sinds 1974 in gebruik, sommigen zeggen dat het eigenlijk onstond in 1969 TCP: Transmission Control Program ers/ck74.pdf Belangrijke eigenschappen: verbindt heterogene netwerken robuustheid 21

22 De laatste stap: TCP/IP Oorspronkelijke TCP opgesplitst in 2 delen TCP TCP (Transmission Control Protocol) IP (Internet Protocol) 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 Bv.: VoIP: wel IP, geen TCP IP: verzending pakketjes (datagrammen) tussen numerieke IP adressen Boven de TCP laag komt de applicatielaag, w.o. HTTP, SMTP, FTP, etc 22

23 De eerste grote test voor TCP 22 november netwerken: packet radio, satellite, ARPANET geen dataverlies SRI Packet Radio Van Packet_Radio_Van org/core/media/pdf/core pdf 23

24 Resources In IP protocol hebben nodes een numeriek adres als We gebruiken in de praktijk URLs hierarchische domeinnamen als DNS (Domain Name System) in principe tabel van URLs en IP adressen 24

25 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 25

26 Webpagina s Metafoor: webpagina is als papieren bladzijde Metafoor gaat niet altijd op geen fysiek object collectie data waarvoor in real time een presentatie wordt gegenereerd 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 26

27 HTML: Geen digitaal papier maar boom 27

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

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

30 Toen en nu.. 30

31 Browser wars. 31

32 The winner for laptop/desktop 32

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

34 Dit zien we nooit meer 34

35 Dit zien we (bijna) nooit meer 35

36 Of dit (niet dramatisch, wel gedateerd) 36

37 Tegenwoordig eerder: 37

38 Tegenwoordig eerder: 38

39 Tegenwoordig eerder: 39

40 Of.;-) 40

41 Vragen? 41