Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web 2.0

633 views

Published on

A gentle introduction to Web 2.0.
This presentation was performed on 26 April 2007 at Alexandria University.
http://www.badrit.com

Published in: Technology
  • Be the first to comment

Web 2.0

  1. 1. Web 2.0, The way to go <ul><ul><li>Ajax loading image. </li></ul></ul><ul><ul><li>Muhammad Hassan </li></ul></ul><ul><ul><li>BadrIT logo </li></ul></ul>
  2. 2. Agenda <ul><li>Building a Web application </li></ul><ul><li>Separation of Concerns </li></ul><ul><li>Web 2.0 tour </li></ul><ul><li>Ajax </li></ul><ul><li>Conclusion </li></ul>
  3. 3. What is the Web <ul><li>Large network of computers (non-similar) </li></ul><ul><li>Clients and servers </li></ul><ul><li>Client send request for www.google.com </li></ul><ul><li>Server send response back </li></ul>
  4. 5. Request & Response <ul><li>Request: text sent to server contains request URL and some other data </li></ul><ul><li>Response: simply text or HTML </li></ul><ul><li>Can be a zip, flash, pdf, ... </li></ul>
  5. 6. HTML <ul><li>Hyper text markup language </li></ul><ul><li>Consists of tags </li></ul><ul><li><b>Bold Text </b> </li></ul><ul><li>Lets see a HTML example </li></ul><ul><li>HTML is easy to learn </li></ul>
  6. 7. Adding Style <ul><li>Current HTML looks ugly </li></ul><ul><li>Lets add some colors and style to it. </li></ul><ul><li>We need CSS. </li></ul>
  7. 8. CSS (Cascaded Style Sheets) <ul><li>A formatting language </li></ul><ul><li>Used to customize web pages </li></ul><ul><li>You can edit </li></ul><ul><ul><li>Colors </li></ul></ul><ul><ul><li>Backgrounds </li></ul></ul><ul><ul><li>borders, margins, alignment </li></ul></ul><ul><ul><li>fonts, sizes and lots of other things </li></ul></ul><ul><li>Simple to learn </li></ul>
  8. 9. CSS example <ul><li><p style='color:red;'> Red text </p> </li></ul><ul><li><p style='font-weight:bold;'> Bold text </p> </li></ul><ul><li><style type=&quot;text/css&quot;> a {color: red;} </li></ul><ul><li>a:hover {color: blue;} </li></ul><ul><li></style> </li></ul>
  9. 10. CSS Box Model
  10. 11. Lets apply CSS!
  11. 12. Dynamic HTML <ul><li>Current HTML page is static </li></ul><ul><li>To make it we need to use a programming language (not just markup language) </li></ul><ul><li>What else can the browser interpret </li></ul><ul><li>Javascript </li></ul>
  12. 13. Java script <ul><li>Client side </li></ul><ul><li>Interpreted </li></ul><ul><li>Dynamic </li></ul><ul><li>Object oriented </li></ul><ul><li>Scripting language. </li></ul><ul><li>Easy to learn </li></ul>
  13. 14. Simple example <ul><li><script type=&quot;text/javascript&quot;> window.alert('Welcome to Web 2.0!'); </script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> document.write(“<p>Hello world!</p>”); </script> </li></ul>
  14. 15. Functions <ul><li>function displayMessage(name){ var message = ”Welcome” + name; </li></ul><ul><li>alert( message ); </li></ul><ul><li>return message; } </li></ul><ul><li>Note: we do not declare variables and parameter types </li></ul>
  15. 16. Control statements <ul><li>if (x>y) </li></ul><ul><li>{your code here} </li></ul><ul><li>else </li></ul><ul><li>{other code here}; </li></ul><ul><li>while (x>y) </li></ul><ul><li>{your code here}; </li></ul><ul><li>do </li></ul><ul><li>{your code here} </li></ul><ul><li>while (x>y); </li></ul>
  16. 17. Control statements cont. <ul><li>for (i=0; i<10; i++) </li></ul><ul><li>{ </li></ul><ul><li>your code here </li></ul><ul><li>} </li></ul><ul><li>for (image in images) </li></ul><ul><li>{ </li></ul><ul><li>image.border = 2; </li></ul><ul><li>} </li></ul>
  17. 18. Interacting with HTML <ul><li>DOM, document object model </li></ul><ul><li>document is a predefined object </li></ul><ul><li>document contains all document elements tree </li></ul><ul><li>You can access and edit any element </li></ul>
  18. 19. DOM tree <ul><li>this example from www.w3schools.com </li></ul>
  19. 20. Accessing DOM tree <ul><li>getElementById(), getElementsByTagName() methods </li></ul><ul><li>parentNode, firstChild, lastChild, ... properties of an element node </li></ul>
  20. 21. DOM example 1 <ul><li>var searchBox = document.getElementById(&quot;search_box&quot;); alert(&quot;now searching for:&quot;+searchBox.value); </li></ul>
  21. 22. DOM examples 2 <ul><li>var images = document.images; for (i=0;i<images.length;++i) { </li></ul><ul><li>images[i].border=2; </li></ul><ul><li>images[i].style.borderColor=&quot;red&quot;; </li></ul><ul><li>} </li></ul>
  22. 23. DOM examples 3 <ul><li>var userArea = document.getElementById(&quot;user_area&quot;); </li></ul><ul><li>userArea.innerHTML =&quot;<img src='surprise.png'>&quot;; </li></ul>
  23. 24. Event handling <ul><li><input type=&quot;text&quot; id=&quot;email&quot; onChange=&quot;checkEmail()&quot;> </li></ul><ul><li>onClick </li></ul><ul><li>onMouseOver </li></ul><ul><li>onMouseOut </li></ul>
  24. 25. Lets see live example
  25. 26. Client vs Server side <ul><li>All what we done now – html, css, javascript </li></ul><ul><li>Interpreted by the client side </li></ul><ul><li>Note: not all browsers render html, css, js the same </li></ul>
  26. 28. Server Side <ul><li>We need a Server side programming language </li></ul><ul><li>Choices available: </li></ul><ul><ul><li>ASP.Net with C# or VisualBasic.Net </li></ul></ul><ul><ul><li>JSP with Java </li></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>Ruby on Rails </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Lets see what server side can do </li></ul>
  27. 29. Simple JSP example <ul><li><HTML> </li></ul><ul><li><BODY> </li></ul><ul><li><H1>Welcom to JSP</H1> Today is: </li></ul><ul><li><% </li></ul><ul><li>String time=new java.util.Date().toString() ; </li></ul><ul><li>out.println(time); </li></ul><ul><li>%> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul><ul><li>Lets see live </li></ul>
  28. 30. A more complex JSP <ul><li>Gets data from database </li></ul><ul><li>Note that server runs code </li></ul><ul><li>Response is sent to the browser to display </li></ul><ul><li>Lets see it live </li></ul>
  29. 31. 5 languages <ul><li>Looks complex, isn't it? </li></ul><ul><li>The page talks 5 languages </li></ul><ul><ul><li>Java </li></ul></ul><ul><ul><li>SQL </li></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Javascript </li></ul></ul>
  30. 32. Separation of Concerns <ul><li>If we can separate the business logic from presentation logic it would be great </li></ul><ul><li>Business logic = loading courses from db </li></ul><ul><li>Presentation logic = viewing course in the browser </li></ul>
  31. 33. Separation of Concerns, cont. <ul><li>Separation of Concerns, is a general computer science concept </li></ul><ul><ul><li>OOP: object oriented programming (very common) </li></ul></ul><ul><ul><li>MVC: Model View Controller </li></ul></ul><ul><ul><li>AOP: aspect oriented programming </li></ul></ul>
  32. 34. Model View Controller - MVC <ul><li>We want to separate the business logic from the presentation logic </li></ul><ul><li>We call business logic the “Model” </li></ul><ul><li>We call presentation logic the “View” </li></ul><ul><li>We need to add a new layer between them&quot; </li></ul><ul><li>Which is called the “Controller” </li></ul><ul><li>M odel V iew C ontroller MVC </li></ul>
  33. 35. Model View Controller - MVC <ul><li>The goal is to separate data (model) and user interface (view) 1979 </li></ul><ul><li>Model: domain-specific representation of the information (which is persisted some where) </li></ul><ul><li>View: UI which renders the model </li></ul><ul><li>Controller: </li></ul><ul><ul><li>Processes events, </li></ul></ul><ul><ul><li>Send data (2 way) between Model and View </li></ul></ul>
  34. 36. An MVC Cycle <ul><li>The user interacts with the user interface (e.g., user presses a button) </li></ul><ul><li>Controller handles the event </li></ul><ul><li>Controller accesses the model, possibly update/retrieve data </li></ul><ul><li>Controller notify the view with the new data from the model and the view render it. </li></ul><ul><li>User interface waits for further events, a new cycle begin </li></ul>
  35. 37. s
  36. 38. MVC example <ul><li>Lets see our jsp example converted to Ruby On Rails </li></ul><ul><li>But why Ruby on Rails not Java/JSP </li></ul><ul><ul><li>A very clean MVC framework </li></ul></ul><ul><ul><li>It is Web 2.0 ready! </li></ul></ul><ul><li>Ok, lets see What Ruby on Rails code will look like </li></ul><ul><li>Put first lets take a look at Ruby language </li></ul>
  37. 39. Ruby <ul><li>A Programmer's best friend! </li></ul><ul><li>Interpreted </li></ul><ul><li>Dynamically typed </li></ul><ul><li>Pure object-oriented </li></ul><ul><li>Simple, straightforward, extensible,(from Japan) </li></ul><ul><li>Classes, functions, for, while,.. like any language but with more power </li></ul>
  38. 40. Ruby on Rails <ul><li>Lets see our code rewritten in Rails! </li></ul>
  39. 41. Other MVC frameworks <ul><li>If I cannot use Rails what can I do? </li></ul><ul><li>You can write your own MVC framework, or ... </li></ul><ul><li>Use ready made frame works </li></ul>
  40. 42. Other MVC Frameworks <ul><li>Java </li></ul><ul><ul><li>Trails (rails clone) </li></ul></ul><ul><ul><li>Grails (rails clone) </li></ul></ul><ul><ul><li>Spring+JSF+Hibernate (technology stack) </li></ul></ul><ul><li>.Net </li></ul><ul><ul><li>Castle project (mono rail & NHibernate) </li></ul></ul><ul><li>PHP </li></ul><ul><ul><li>Cakephp </li></ul></ul><ul><ul><li>Symfony </li></ul></ul>
  41. 43. Can we separate more? <ul><li>Lets compare MVC to the none-MVC JSP example </li></ul><ul><li>The view still have HTML, CSS and Javascript </li></ul><ul><li>We need to apply Separation to the View </li></ul>
  42. 44. Separating View content <ul><li>View consist of </li></ul><ul><ul><li>Content (html) </li></ul></ul><ul><ul><li>Layout (css) </li></ul></ul><ul><ul><li>Behavior (javascript) </li></ul></ul>
  43. 45. Separate Content and Style <ul><li>Very simple </li></ul><ul><li>Define css in a separate css file </li></ul><ul><li>Do not write inline css, just use class=”mystyle” </li></ul><ul><li>Do not use html formatting tags <b>, <font> </li></ul><ul><li>Lets see apply it to our example </li></ul><ul><li>For more power see www.csszengarden.com </li></ul><ul><li>We can add style for printer, mobile </li></ul>
  44. 46. Separate Content and behavior <ul><li>We still have inline javascript </li></ul><ul><ul><li>onclick=&quot;new Effect.toggle($('course1'),'blind',{duration:1})...&quot; </li></ul></ul><ul><li>We can put it in a function like this </li></ul><ul><ul><li>onclick=”doEffect(this);” </li></ul></ul><ul><li>But still we have inline javascript </li></ul>
  45. 47. Separate Content and behavior <ul><li>Solution is to add the event handlers externally </li></ul><ul><li>It is called unobtrusive Java Script </li></ul><ul><li>Simply instead of onclick, we will use a css class </li></ul><ul><li>class=&quot;effect&quot; </li></ul><ul><li>Then we use Java Script to search for links with class effect and append the event handler to it </li></ul><ul><li>Lets see how. </li></ul>
  46. 48. Are we Web 2.0 <ul><li>Actually not yet. </li></ul><ul><li>We have to know What Web 2.0 is, to be Web 2.0 </li></ul>
  47. 49. What is Web 2.0 <ul><li>Is there a definition? </li></ul><ul><li>Key features </li></ul><ul><ul><li>Web-as-participation-platform vs Web-as-information-source </li></ul></ul><ul><ul><li>Wiki, blogs, tags, rss feeds, mashup (APIs) </li></ul></ul><ul><ul><li>Rich Internet applications replace desktop ones </li></ul></ul>
  48. 50. Web 2.0 mind map
  49. 51. Web 2.0 examples <ul><li>Live examples </li></ul><ul><ul><li>mail.google.com </li></ul></ul><ul><ul><li>netvibes.com, del.icio.us, digg.com </li></ul></ul><ul><ul><li>RememberTheMilk.com </li></ul></ul><ul><ul><li>desktoptwo.com, eyeos.org </li></ul></ul><ul><ul><li>meebo.com </li></ul></ul><ul><ul><li>zoho.com, writely.com </li></ul></ul><ul><ul><li>RSS www.cnn.com/ </li></ul></ul><ul><ul><li>http://weblogs.asp.net/wkriebel/ </li></ul></ul><ul><ul><li>ww.wikipedia.com </li></ul></ul>
  50. 52. How to be Web 2.0 <ul><li>Add collaboration, engage the user, use blogs, wikis, rss, tags, ... </li></ul><ul><li>Make the UI rich,use </li></ul><ul><ul><li>CSS, </li></ul></ul><ul><ul><li>Java script </li></ul></ul><ul><ul><li>DHTML </li></ul></ul><ul><ul><li>AJAX </li></ul></ul>
  51. 53. What is AJAX <ul><li>AJAX: Asynchronous Java Script and XML </li></ul><ul><li>What difference do AJAX add? </li></ul><ul><li>Lets compare it to normal(synchronous) request </li></ul><ul><li>More complex use cases can be done </li></ul><ul><li>You put the limit on what you can do... </li></ul><ul><li>Lets see delete example </li></ul>
  52. 54. What is next? <ul><li>Learn CSS, Javascript, DHTML </li></ul><ul><li>Learn XML, AJAX </li></ul><ul><li>Study MVC, learn RubyonRails (with Ruby) </li></ul><ul><li>Work Agile </li></ul><ul><ul><li>Deliver early, deliver often </li></ul></ul><ul><ul><li>Engage end-users </li></ul></ul><ul><li>Look for Web 3.0 (semantic web) </li></ul>
  53. 55. References & Articles <ul><li>www.wikipedia.com </li></ul><ul><li>www.3schools.com </li></ul><ul><li>Google.com (google for what you need) </li></ul><ul><li>More references will be sent </li></ul>
  54. 56. Thanks <ul><li>For you attendance </li></ul><ul><li>ACM chapter Stuff </li></ul><ul><li>Muhammad Ali (eSpace) </li></ul>
  55. 57. Questions & Feed Back

×