Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.

Presentatie over: "Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails."— Transcript van de presentatie:

1

2 Web 1.0 HTMLAfbeeldingen FlashHyperlinks

3 CSS Participation AJAX Usability Design Ruby on Rails

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

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

6 Tweakers.net Voorbeelden participation Web 2.0 Web 2.0

7 Wikipedia Voorbeelden participation Web 2.0 Web 2.0 [bewerk]

8 igoogle Voorbeelden usability Web 2.0 Web 2.0

9 maps.google Voorbeelden usability Web 2.0 Web 2.0

10 Design & CSS Geschiedenis Web 2.0

11 Design & CSS Informatie Web 2.0

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

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

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

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

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

17 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

18 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

19 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

20 Design & CSS Voorbeelden van voordelen Web 2.0

21 Design & CSS Voorbeelden van voordelen Web 2.0

22 Design & CSS Voorbeelden van voordelen Web 2.0

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

24 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

25 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

26 AJAX: Voorbeeld Google Reader Web 2.0

27 AJAX: Voorbeeld Hyves Web 2.0

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

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

30 Ruby on Rails: Wat is Ruby? Web 2.0

31 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

32 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

33 Vragen? Web 2.0