Deel II Introductie Webdesign Hoorcollege IUW Thema Webdesign 10 november 2014 Christof van Nimwegen
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
Web is een heel groot onderwerp!
ontwerpen user centred design, creativiteit, vormgeving technologieën client (browsers), server markup, programmeertalen, frameworks, services standaardisering, innovatie, duurzaamheid content tekst, multimedia, databases, tweets structuur, navigatie, genres gebruiken interactie, usability, experience zoeken internetcultuur, social web, e-business, services
3
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
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
WWW ≠ internet
Geen WWW:
Email P2P Skype Usenet FTP Smartphone Apps ……
6
Het web (niet internet) is 25 jaar oud!
7
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
Voorlopers WWW: Memex machine
9
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
Voorlopers: Hypertext (1969)
Gebruik van de “Hypertext Editing System (HES)” console op Brown University, 1969.
11
Voorlopers: Hypercard (1987)
12
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
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 email werd normaal Chat services Browser wars E-commerce begon serieuze vormen aan te nemen ….
14
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
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
ARPANET
ARPA = Advanced Research Projects Agency Kwam op gang in 1960’s Research contracten voor defensie Allerlei experimentele vormen van computing. Werd ARPANET
17
Een stap..….naar het Internet!
18
Een stap..….naar het Internet!
19
Infrastructuur: verdere ontwikkelingen
ARPANET: proof of concept packetswitched network over geleaste telefoonlijnen software moest nog worden ontwikkeld ALOHAnet (1970-71) 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
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 http://ece.ut.ac.ir/Classpages/F84/PrincipleofNetworkDesign/Pap ers/CK74.pdf Belangrijke eigenschappen: verbindt heterogene netwerken robuustheid
21
De laatste stap: TCP/IP
Oorspronkelijke TCP opgesplitst in 2 delen TCP (Transmission Control Protocol) IP (Internet Protocol) TCP 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
De eerste grote test voor TCP
22 november 1977 3 netwerken: packet radio, satellite, ARPANET geen dataverlies
SRI Packet Radio Van
http://en.wikipedia.org/wiki/ Packet_Radio_Van http://www.computerhistory. org/core/media/pdf/core2002-02.pdf
23
Resources
In IP protocol hebben nodes een numeriek adres als 192.168.5.115 We gebruiken in de praktijk URLs hierarchische domeinnamen als www.cs.uu.nl DNS (Domain Name System) in principe tabel van URLs en IP adressen
24
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
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
HTML: Geen digitaal papier maar boom
27
HTML document
IUW Dit is het eerste hoorcollege IUW 2014
Tot slot: De browser
1e browser die grafische elementen in HTML ondersteunde (later NS)
29
Toen en nu…..
30
Browser wars….
31
The winner for laptop/desktop
32
Evolutie van web design, mode, trends
Animated gif’s Flash websites Muziek die automatisch speelt Bewegende banners Frames Comic Sans Font Tellers ….. 33
Dit zien we nooit meer…
34
Dit zien we (bijna) nooit meer…
35
Of dit (niet dramatisch, wel gedateerd)
36
Tegenwoordig eerder:
37
Tegenwoordig eerder:
38
Tegenwoordig eerder:
39
Of….;-)
40
Vragen?
41
