Stateful web, developments, trends Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Inhoud Stateful web AJAX, JSON (HTML5) developments Trends Lennart Herlaar - UU

Cloud computing The cloud = PaaS + IaaS + SaaS Platform, Infrastructure en Software as a Service (Virtuele) servers in de cloud Zelf inrichten en beheren Bijschakelen, soms vanuit de applicatiecode (APIs) Soms ook alleen onderdelen (bijvoorbeeld storage) Platform in de cloud Alleen applicatie zelf beheren, platform schaalt mee Behoefte aan App Engines (bijvoorbeeld voor PHP) Alles in de cloud, als service Lennart Herlaar - UU

Cloud computing On-demand, self-service, shared, elastic "Separation of concerns" Met name PaaS lijkt interessant vanuit WebTech IaaS scalability is beperkt (sessions, files) IaaS scalability stelt eisen aan je webapplicatie Allerlei issues Reliability, security, ownership, vendor lock-in, ... Maar: "you'd better start paying attention" Over een paar jaar gemeengoed? Lennart Herlaar - UU

Assorted topics, webdesign Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Inhoud Transactions Encodings, MIME types Webdesign, usability Lennart Herlaar - UU

Assorted topics, webdesign Transactions Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Transactions Een transaction maakt van meerdere atomaire database operaties één logische eenheid In z'n geheel wel of in z'n geheel niet uitgevoerd Standaardfaciliteiten beschikbaar in RDBMS Begin transaction, commit, rollback Geïmplementeerd met behulp van locking Hoe zit het met transactions op het web? Multi-page transactions zijn zeer gebruikelijk Productselectie > invoer adresgegevens > betaling Zijn deze met standaardfaciliteiten af te schermen? Lennart Herlaar - UU

Transactions Oei, PDO werkt standaard in auto-commit mode Elke query heeft z'n eigen impliciete transaction! Maar gelukkig: beginTransaction, commit, rollBack Helpt het expliciet maken van transactions ons? Het probleem is (weer) de page based request en het ontbreken van state in HTTP! Stap 1 Stap 2 Stap 3 Default Haalbaar Gewenst Lennart Herlaar - UU

Transactions Helpt het expliciet maken van transactions ons? Script termineert na genereren van een pagina Einde database connectie en dus einde transaction Helpt file based locking van SQLite ons? Lock alleen gedurende een scriptrun Stap 1 Stap 2 Stap 3 Default Haalbaar Gewenst Lennart Herlaar - UU

Transactions Helpen zogenaamde persistent database connections ons? Bestaan alleen t.b.v. performance; minder overhead Vergelijkbaar met keepalive op TCP niveau Kunnen ons juist in de weg zitten! Dan maar zelf oplossen... Signaleren van conflicten is relatief eenvoudig Controleer of de gegevens niet gewijzigd zijn Eventueel met behulp van een timestamp Maar pas op: controle en vastleggen in 1 transaction! Lennart Herlaar - UU

Transactions Voorkomen van conflicten is lastiger Een eigen locking mechanisme Locks opslaan in de database Locks opslaan is ook een database operatie... Time-out van locks, garbage collection mechanisme Transactions op het web zijn complex Vaak wordt het gewoon genegeerd... "De kans is heel klein" "Het zal wel goed gaan" "Dit schip kan niet zinken" Lennart Herlaar - UU

Assorted topics, webdesign Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Inhoud Transactions Encodings, MIME types Webdesign, usability Lennart Herlaar - UU

Assorted topics, webdesign Encodings, MIME types Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Characters en encodings Abstract teken, gebruikt in een taal Glyph Fysieke representatie van een character Character set Verzameling characters die veel samen voorkomen Character code Nummering van characters in een character set Character encoding Representatie van een character code in bytes A A a α Lennart Herlaar - UU

Character codes Is ASCII 8-bit? Internationalization Nee, 7-bit + parity 8-bit ASCII in e-mail geëncodeerd als 7-bit ASCII Internationalization Geen bijzondere tekens, of niet-standaard Windows versus Unix versus Mac ISO character codes ISO-8859-1 (Latin-1): West Europees ISO-8859-15 (Latin-9): Latin-1 + € Lennart Herlaar - UU

Character codes ISO-8859-11: Thais, ISO-8859-7: Grieks, … Lennart Herlaar - UU

Unicode Character code voor tekens en symbolen uit alle talen 110.000 characters gedefinieerd 21-bit code, de levende talen passen in 16 bits Maximum is U+10FFFF; boven U+FFFF vooral voor oude talen / bijzondere characters Chinees, Japans en Koreaans "unified" Eerste 256 characters komen overeen met ISO-8859-1; € is U+20AC Lennart Herlaar - UU

Unicode encoding Unicode is alleen een nummering Verschillende manieren om deze in bytes te encoderen UTF-32: 32 bits per character UTF-16, UTF-8 UTF-8 is de defacto standaard Encoderen in 8-bit bytes Variabele lengte per character: 1 – 4 bytes Eerste 128 bytes zijn "zichzelf" Daarboven als sequence van bytes Lennart Herlaar - UU

Unicode encoding Eerste byte start met net zoveel "1" bits als de lengte van het character in bytes Gevolgd door 0 Alle volgende bytes starten met 10 Rest voor de bits van het character Padding in eerste byte, dan most significant bits € = U+20AC = 10 0000 1010 1100 11100010 10000010 10101100 UTF-8: E2 82 AC Lennart Herlaar - UU

Encodings, HTTP en HTML HTTP Content-Type (response) header HTML <meta> element HTML character references Accept-Charset: utf-8 Content-Type: text/html; charset=iso-8859-1 Content-Type: text/html; charset=utf-8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> A &#x20AC ë & < Lennart Herlaar - UU

Too hot to handle Server: header genereren uit meta element Browser: interpreteren meta element Servers willen zich liever niet branden ISO-8859-1 default voor "text/*" bij HTTP/1.1 Header formeel voorrang boven meta element! "Gokken" van charset valt nog niet mee Let op: charset is eigenlijk een char encoding! Maar niet verwarren met Content-Encoding header Lennart Herlaar - UU

Stüvel Lennart Herlaar - UU

Het probleem Bestandsformaat versus meta-informatie Browser / server versus meta-informatie Scripttaal versus browser versus meta-informatie Database versus scripttaal "Slimme" programmeurs, onkunde … Lennart Herlaar - UU

Internet Media Types (MIME) MIME, Multipurpose Internet Mail Exchange Oorspronkelijk: structuur van e-mail berichten Encoding, type attachment, multipart berichten Encoding betreft hier ook binary-to-text SMTP is een 7-bit protocol HTTP hergebruikt delen van MIME Maar HTTP is (gelukkig) 8-bit safe Accept: text/html, text/plain; q=0.6, text/*; q=0.1 Content-Type: text/html; charset=utf-8 Lennart Herlaar - UU

Internet Media Types (MIME) Type, subtype en soms parameters Bepalen gedrag browser (en server) Bepalen externe helper application / plugin Bepalen (mede) encoding application/* audio/*, image/* multipart/* text/* video/* application/x-* application/pdf, application/zip audio/mpeg, audio/ogg image/jpeg, image/png multipart/form-data text/html, text/plain, text/css video/mp4, video/x-matroska application/x-www-form-urlencoded <form method=post enctype="multipart/form-data" action="..."> file to upload: <input type=file name="upfile"/><br/> <input type=submit value="submit"/> </form> Content-Disposition: attachment; filename=somefile.html Lennart Herlaar - UU

Binary-to-text encoding Verpakken 8-bit data in 6- of 7-bit characters Zowel binary als 8-bit tekst (ASCII, UTF-8) Quoted printable Vooral voor tekst, inefficiënt voor binary data Printable ASCII als zichzelf, rest als = en hex waarde Soft line breaks Base64 Vooral voor binary data, niet human-readable Vertaling van volledige bitreeks naar 6-bit characters 64 characters gebruikt: A-Z, a-z, 0-9, +, / This file contains special characters such as an equal sign =3D, a = dollar sign $, or even extended characters such as the e-umlaut =EB. … e-umlaut =C3=AB. <img src="data:image/png;base64,iVBORw0...> Lennart Herlaar - UU

Assorted topics, webdesign Webdesign, usability Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Webdesign? Usability? Komt aan bod bij andere vakken Webdesign (INFOB1WD) Ontwerpen van interactieve systemen (INFOB1OIS) Wel goed om naar een paar aspecten te kijken Veel aspecten zijn gebaseerd op "common sense" De meeste mensen hebben een redelijk kwaliteitsgevoel Behalve Yvette… Lennart Herlaar - UU

Webdesign! Usability! Webdesign en usability zijn meer dan esthetiek en ergonomie Soms noodzaak in plaats van "luxe" Visuele en motorische beperkingen Rood-groen kleurenblindheid bij 5% van de mannen Lennart Herlaar - UU

Dus… Doordacht kleurgebruik, goede contrasten alt attribuut benutten voor visuele content Rekening houden met afwijkende devices Screenreaders, brailleleesregels, tablets Scheiding van semantiek en presentatie; validatie Alles te bekijken met alleen maar Lynx? Websites zonder JavaScript? drempelvrij.nl Lennart Herlaar - UU

Doelgroepen Usability is doelgroepafhankelijk Technology centered view Organization centered view User centered view Aannames gebaseerd op doelgroep Leeftijd, geslacht, inkomen, opleiding Locatie, geschiedenis Wie is je publiek? Wat verwacht het? Wat is je doel? Functionaliteiten website daarop gebaseerd Lennart Herlaar - UU

Webdesign, usability, doelgroep Lennart Herlaar - UU

Psychologie van de gebruiker Het web is niet-lineair Bied de gebruiker houvast Kruimelpaden? Home button? Sitemap? Visited links? Rust, consistentie, voldoen aan verwachtingen 10-12 woorden per regel? Flinke margins? Lettertypes? Serif, sans-serif? Menu's aan de zijkanten? Lijsten met maximaal 7 items? Kinderen als doelgroep? Senioren? Lennart Herlaar - UU

En verder… Scrollen? Navigatiemenu altijd in beeld? Verticaal, horizontaal? Navigatiemenu altijd in beeld? Schaalbare fonts, schaalbare sites Variabele breedte Dan in ieder geval geen horizontale scrolling Betekenisvolle titels, URIs, linkteksten Functionerende back button Lennart Herlaar - UU

Mediagebruik Pop-ups? Splash screens? Ads? Autostart? Flash intro's? Midi-files… Flash intro's? Die je uit moet zitten… Gimmicks zijn gebruikers na 1 keer zat Media dus weloverwogen inzetten Thumbnails, bestandsformaten Copyright issues… Lennart Herlaar - UU

Het F-patroon Mensen "lezen" een webpagina in een F-patroon Eerst de interessante plaatjes Dan de eerste alinea en een deel van de tweede Verder alleen de eerste woorden van een alinea Aangetoond met behulp van eye-tracking In 10 seconden is het gebeurd Google noemt de linkerbovenhoek de golden triangle Daar moet het hoofdpunt gemaakt worden Daar moet de interesse gewekt worden Lennart Herlaar - UU

Het F-patroon Het is geen drukwerk; gebruiker valt in de site Belangrijkste inhoud in de eerste paragraaf Eerst de clou, dan pas de grap… Eerste zin geeft het onderwerp van de paragraaf Lading aan het begin van de zin "In 1995 heeft Henk op een gure stormachtige winteravond langs de kant van de sloot met een elektrische motorzaag zijn vrouw vermoord; Henk geeft om het milieu." "Henk heeft zijn vrouw vermoord; Henk geeft om het milieu en gebruikte een elektrische motorzaag langs de kant van de sloot op een gure stormachtige winteravond in 1995." Lennart Herlaar - UU

Oorzaak of gevolg? Je kunt het F-patroon ook sturen… Lennart Herlaar - UU

Frames? Frames doorbreken het concept van het web "One resource at a time" Uniek adresseerbaar (URI) Verdere problemen met frames Bookmarken, printen, back button Toegankelijkheid Consistentie, syncing, complexiteit Inline frames? Minder complex, veel overige problemen blijven Lennart Herlaar - UU

Alternatieven? Tables voor layout? Deprecated; niet nodig Scheiding van semantiek en presentatie Onderhoudbaarheid, toegankelijkheid "Even" een kolom verplaatsen… Door de hele documentcollectie heen… Deprecated; niet nodig CSS! Lennart Herlaar - UU

Uiteindelijk... ...weet je zelf stiekem ook wel of iets werkt 10.000 uur regel De gulden middenweg is meestal veilig Maar wees niet te voorzichtig Je kunt ook gebruikers een stem geven Personalisering Veel webdesign resources online beschikbaar! "Users spend most of their time on other websites." – Jakob's Law of the Web User Experience Lennart Herlaar - UU

Lennart Herlaar - UU