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 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
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 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
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/core- 2002-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 <!doctype html> <html> <head> <title>iuw</title> </head> <body> <p>dit is het eerste hoorcollege IUW 2014</p> </body> </html>
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