Deel I Introductie Web HTML5 Hoorcollege IUW Thema Web 12 november 2015 Christof van Nimwegen
Huishoudelijk: Eén college vervalt!
Hoorcollege donderdag 10 december vervalt
Deel “informatie theorie” wordt leesstof (inleiding voor v. Leeuwen) Deel “Web” naar hoorcollege dinsdag ervoor
2
Opdracht Basic Web Skills: Server klaarmaken
https://www.students.science.uu.nl/~1234567/ Maak WWW directory (wordt niet zichtbaar) Zorg dat daarin een index.html, index.htm, of index.php in staat
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 docent/student assistent Weging voor eindcijfer (opdrachten 40%, toetsen 60%) Opdracht Basic Web Skills: 25% Opdracht Trust: 75%
5
Opdracht Basic Web Skills 4 onderdelen, 1 mini (dummy) website, procesbeschrijving Deadline voor alles samen, online: do 03-12-2015, 19:00
Opdrachten per onderdeel: 1. Teamvorming, server, editor, basale oefeningen, één benaderbare pagina 2. 4 pagina’s, menu, layout, iets van CSS, foto, form, valideren 3. Video, iconfonts, basis PHP (Forms, write), email 4. Webfonts, responsiveness (Bootstrap) Facultatief: Extra oefening Javascript 6
T.b.v. Opdracht Trust: Webwinkel
Niet zelf “coderen”
http://localhost/test/ page1.php
Wel zelf bouwen met online CMS of lokale variant, info volgt
8 december: 1/2 college eCommerce sites 7
T.b.v. Opdracht Trust: Webwinkel
http://www.mijnwebwinkel.nl/winkel/ nimwegen/
8
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 2 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
9
Het onderdeel Web
Heeft gedeeltelijk een relatie met OIS (blok 3), enkele delen ervan komen ook terug in Usability Engineering
5 colleges (waarvan 1 halve)
Meteen na hoorcollege werkcolleges met bijbehorende opdracht. In deze opdrachten worden de basis beginselen van webtechnologie globaal behandeld
Praktisch werkcolleges: veel zelf doen, er zijn studentassistenten en tutorials. Niet verplicht. 10
Hoe oud is het web (niet internet)? http://info.cern.ch/hypertext/WWW/TheProject.html
Dus 25 26 jaar !!!
13
Het web (niet internet) is 25 26 jaar oud!
14
Voorlopers WWW: Bookwheel (1588)
15
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.
16
Voorlopers WWW: Memex machine
17
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 18
Voorlopers: Hypertext (1967)
Gebruik van de “Hypertext Editing System (HES)” console op Brown University, 1967.
19
Voorlopers: Hypercard (1987)
20
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
21
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 ….
22
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…
23
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?
24
ARPANET
ARPA = Advanced Research Projects Agency Kwam op gang in 1960’s Research contracten voor defensie Allerlei experimentele vormen van computing. Werd ARPANET
25
Een stap..….naar het Internet!
26
Een stap..….naar het Internet!
27
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? 28
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
29
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
30
De laatste stap: TCP/IP
In IP protocol hebben “nodes” een numeriek adres als 192.168.5.115 IP: verzending pakketjes tussen numerieke IP adressen 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
31
De laatste stap: TCP/IP
32
PAUZE
33
Tot slot: De browser 1e browser die grafische elementen in HTML ondersteunde (later NS)
34
Toen en nu…..
35
En toen: Browser wars….
36
The winner (2015): Chrome
37
The winner (2015): Chrome
38
Evolutie van web design, mode, trends
Animated gif’s Flash websites Muziek die automatisch speelt Bewegende banners Frames Comic Sans Font Tellers ….. 39
Dit zien we nooit meer…
40
Dit zien we (bijna) nooit meer…
41
Of dit (niet dramatisch, wel gedateerd)
42
Tegenwoordig eerder:
43
Tegenwoordig eerder:
44
Tegenwoordig eerder:
45
Of zelfs…. http://www.theguardian.com/world/interacti ve/2013/may/26/firestorm-bushfiredunalley-holmes-family
http://porschevolution.com/
46
Of….;-)
47
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 48
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.
