De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar.

Verwante presentaties


Presentatie over: "Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar."— Transcript van de presentatie:

1 Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar

2 Inhoud Stateful web AJAX, JSON (HTML5) developments Trends

3 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

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

5 Assorted topics, webdesign 5 Webtechnologie Lennart Herlaar

6 Inhoud Transactions Encodings, MIME types Webdesign, usability

7 Assorted topics, webdesign 7 Webtechnologie Lennart Herlaar

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

9 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 2Stap 3 Gewenst Default Haalbaar

10 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 2Stap 3 Gewenst Default Haalbaar

11 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!

12 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"

13 Assorted topics, webdesign 13 Webtechnologie Lennart Herlaar

14 Inhoud Transactions Encodings, MIME types Webdesign, usability

15 Assorted topics, webdesign 15 Webtechnologie Lennart Herlaar

16 Characters en encodings Character 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

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

18 Character codes ISO : Thais, ISO : Grieks, …

19 Unicode Character code voor tekens en symbolen uit alle talen 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 ; € is U+20AC

20 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

21 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 = UTF-8: E2 82 AC

22 Encodings, HTTP en HTML HTTP Content-Type (response) header HTML element HTML character references Content-Type: text/html; charset=iso Content-Type: text/html; charset=utf-8 Accept-Charset: utf-8 ë & < A €

23 Too hot to handle Server: header genereren uit meta element Browser: interpreteren meta element Servers willen zich liever niet branden ISO 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

24

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

26 Internet Media Types (MIME) MIME, Multipurpose Internet Mail Exchange Oorspronkelijk: structuur van 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

27 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 file to upload: Content-Disposition: attachment; filename=somefile.html

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

29 Assorted topics, webdesign 29 Webtechnologie Lennart Herlaar

30 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…

31 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

32 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? Dus… drempelvrij.nl

33 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

34 Webdesign, usability, doelgroep

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

36 En verder… Scrollen? 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

37 Mediagebruik Pop-ups? Splash screens? Ads? Autostart? 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…

38 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

39 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."

40 Oorzaak of gevolg? Je kunt het F-patroon ook sturen…

41 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

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

43 Uiteindelijk......weet je zelf stiekem ook wel of iets werkt 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

44


Download ppt "Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar."

Verwante presentaties


Ads door Google