Web 1.0 HTMLAfbeeldingen FlashHyperlinks

CSS Participation AJAX Usability Design Ruby on Rails

Inhoud  Inleiding  Participation & Usability (Ruud)  Design & CSS (Sander)  AJAX & Ruby on Rails (Herman) Web 2.0

Participation & Usability Web 2.0  Web 1.0 gewoon tekst en plaatjes, eventueel flash  Web 2.0 gebruiksvriendelijker en interactiever dan Web 1.0

Tweakers.net Voorbeelden participation Web 2.0 Web 2.0

Wikipedia Voorbeelden participation Web 2.0 Web 2.0 [bewerk]

igoogle Voorbeelden usability Web 2.0 Web 2.0

maps.google Voorbeelden usability Web 2.0 Web 2.0

Design & CSS Geschiedenis Web 2.0

Design & CSS Informatie Web 2.0

Design & CSS Werking  Stylesheet in bestand:  Verwijzing naar los bestand:  Lettertypes, locaties, etc. centraal Web 2.0

Design & CSS Voorbeeld CSS bestand body { font-family:verdana; font-size:12pt; text-align:center; color:red; background-color:#c0c0c0; } Web 2.0

Design & CSS Resultaat CSS bestand Dit is een voorbeeld Web 2.0

Design & CSS Voorbeelden van voordelen TabelBron Cel 1 Cel 2 Cel 3 Web 2.0 Cel 1 Cel 3

Design & CSS Voorbeelden van voordelen TabelBron (zonder CSS) Cel 1 Cel 2 Cel 3 Web 2.0 Cel 1 Cel 3

Design & CSS Voorbeelden van voordelen TabelBron (met CSS) Cel 1 Cel 2 Stylesheet.cel12{ font-family:times; Cel 3 color:blue; }.cel3{ font-family:times; font-size:11px; } Web 2.0 Cel 1 Cel 3

Design & CSS Voorbeelden van voordelen DivBron (zelfde als tabel, met Div’s) Div 1 Div 2 Div 3 Stylesheet.div1{ font-family:times; Color:blue; top:0px; left:0px; width:100px; height:30px; }.div2{ font-family:times; Color:blue; top:0px; left:100px; width:100px; height:30px; }.div3{ font-family:times; font-size:1; top:px; left:0px; width:200px; height:30px; } Web 2.0 Div 1Div 2 Div 3

Design & CSS Voorbeelden van voordelen DivBron (locatie van Div 3 gewijzigd) Div 1 Div 2 Div 3 Stylesheet.div1{ font-family:times; Color:blue; top:0px; left:0px; width:100px; height:30px; }.div2{ font-family:times; Color:blue; top:0px; left:100px; width:100px; height:30px; }.div3{ font-family:times; font-size:1; top:px; left:500px; width:200px; height:30px; } Web 2.0 Div 1Div 2 Div 3

Design & CSS Voorbeelden van voordelen Web 2.0

Design & CSS Voorbeelden van voordelen Web 2.0

Design & CSS Voorbeelden van voordelen Web 2.0

AJAX  Wat is AJAX?  Hoe werkt het?  Voorbeelden Web 2.0

AJAX: Wat is AJAX?  Asynchronous Javascript and XML  “Fancy” woord voor XMLHTTP requests  Wijzigingen zonder te refreshen! Usability (gebruiksvriendelijk en duidelijk) Bandbreedte  Maar hoe werkt dat dan? Web 2.0

AJAX: Hoe werkt het?  Gebaseerd op 2 talen: JavaScript & XML  JavaScript: doet meeste werk  XML: optioneel! Communicatie formaat  XML alternatieven: Tekst HTML Speciale JavaScript Objecten  Verwerking van de data (dynamisch & database) PHP ASP JSP etc Web 2.0

AJAX: Voorbeeld Google Reader Web 2.0

AJAX: Voorbeeld Hyves Web 2.0

Ruby on Rails  Wat is Ruby  Wat is Rails  Vervanger van PHP, ASP etc? Web 2.0

Ruby on Rails: Wat is Ruby?  Geïnterpreteerde script taal  Volledig object geörienteerd  Simpele leesbare syntax  Platform onafhankelijk  Open Source Web 2.0

Ruby on Rails: Wat is Ruby? Web 2.0

Ruby on Rails: Wat is Rails?  Gratis webapplicatie framework  Doel: ontwikkeling van met database draaiende webapplicaties versnellen  Gebruikt altijd het Model View Controller ontwerp.  “Convention over Configuration” (CoC)  “Don’t repeat yourself” (DRY) Web 2.0

Ruby on Rails: Vervanger van PHP, ASP etc?  Technieken zijn veelbelovend  Toekomst zal het leren  Blijf het vooral zelf volgen  Bekijk eens de screencasts op rubyonrails.org/screencasts en “Get Excited”. Zien is geloven! Web 2.0

Vragen? Web 2.0