Web 2.0

Web 2.0, The way to go Ajax loading image. Muhammad Hassan BadrIT logo

Agenda Building a Web application Separation of Concerns Web 2.0 tour Ajax Conclusion

What is the Web Large network of computers (non-similar) Clients and servers Client send request for www.google.com Server send response back

Request & Response Request: text sent to server contains request URL and some other data Response: simply text or HTML Can be a zip, flash, pdf, ...

HTML Hyper text markup language Consists of tags <b>Bold Text </b> Lets see a HTML example HTML is easy to learn

Adding Style Current HTML looks ugly Lets add some colors and style to it. We need CSS.

CSS (Cascaded Style Sheets) A formatting language Used to customize web pages You can edit Colors Backgrounds borders, margins, alignment fonts, sizes and lots of other things Simple to learn

CSS example <p style='color:red;'> Red text </p> <p style='font-weight:bold;'> Bold text </p> <style type="text/css"> a {color: red;} a:hover {color: blue;} </style>

Dynamic HTML Current HTML page is static To make it we need to use a programming language (not just markup language) What else can the browser interpret Javascript

Java script Client side Interpreted Dynamic Object oriented Scripting language. Easy to learn

Simple example <script type="text/javascript"> window.alert('Welcome to Web 2.0!'); </script> <script type="text/javascript"> document.write(“<p>Hello world!</p>”); </script>

Functions function displayMessage(name){ var message = ”Welcome” + name; alert( message ); return message; } Note: we do not declare variables and parameter types

Control statements if (x>y) {your code here} else {other code here}; while (x>y) {your code here}; do {your code here} while (x>y);

Control statements cont. for (i=0; i<10; i++) { your code here } for (image in images) { image.border = 2; }

Interacting with HTML DOM, document object model document is a predefined object document contains all document elements tree You can access and edit any element

DOM tree this example from www.w3schools.com

Accessing DOM tree getElementById(), getElementsByTagName() methods parentNode, firstChild, lastChild, ... properties of an element node

DOM example 1 var searchBox = document.getElementById("search_box"); alert("now searching for:"+searchBox.value);

DOM examples 2 var images = document.images; for (i=0;i<images.length;++i) { images[i].border=2; images[i].style.borderColor="red"; }

DOM examples 3 var userArea = document.getElementById("user_area"); userArea.innerHTML ="<img src='surprise.png'>";

Event handling <input type="text" id="email" onChange="checkEmail()"> onClick onMouseOver onMouseOut

Client vs Server side All what we done now – html, css, javascript Interpreted by the client side Note: not all browsers render html, css, js the same

Server Side We need a Server side programming language Choices available: ASP.Net with C# or VisualBasic.Net JSP with Java PHP Ruby on Rails ... Lets see what server side can do

Simple JSP example <HTML> <BODY> <H1>Welcom to JSP</H1> Today is: <% String time=new java.util.Date().toString() ; out.println(time); %> </BODY> </HTML> Lets see live

A more complex JSP Gets data from database Note that server runs code Response is sent to the browser to display Lets see it live

5 languages Looks complex, isn't it? The page talks 5 languages Java SQL HTML CSS Javascript

Separation of Concerns If we can separate the business logic from presentation logic it would be great Business logic = loading courses from db Presentation logic = viewing course in the browser

Separation of Concerns, cont. Separation of Concerns, is a general computer science concept OOP: object oriented programming (very common) MVC: Model View Controller AOP: aspect oriented programming

Model View Controller - MVC We want to separate the business logic from the presentation logic We call business logic the “Model” We call presentation logic the “View” We need to add a new layer between them" Which is called the “Controller” M odel V iew C ontroller MVC

Model View Controller - MVC The goal is to separate data (model) and user interface (view) 1979 Model: domain-specific representation of the information (which is persisted some where) View: UI which renders the model Controller: Processes events, Send data (2 way) between Model and View

An MVC Cycle The user interacts with the user interface (e.g., user presses a button) Controller handles the event Controller accesses the model, possibly update/retrieve data Controller notify the view with the new data from the model and the view render it. User interface waits for further events, a new cycle begin

MVC example Lets see our jsp example converted to Ruby On Rails But why Ruby on Rails not Java/JSP A very clean MVC framework It is Web 2.0 ready! Ok, lets see What Ruby on Rails code will look like Put first lets take a look at Ruby language

Ruby A Programmer's best friend! Interpreted Dynamically typed Pure object-oriented Simple, straightforward, extensible,(from Japan) Classes, functions, for, while,.. like any language but with more power

Ruby on Rails Lets see our code rewritten in Rails!

Other MVC frameworks If I cannot use Rails what can I do? You can write your own MVC framework, or ... Use ready made frame works

Other MVC Frameworks Java Trails (rails clone) Grails (rails clone) Spring+JSF+Hibernate (technology stack) .Net Castle project (mono rail & NHibernate) PHP Cakephp Symfony

Can we separate more? Lets compare MVC to the none-MVC JSP example The view still have HTML, CSS and Javascript We need to apply Separation to the View

Separating View content View consist of Content (html) Layout (css) Behavior (javascript)

Separate Content and Style Very simple Define css in a separate css file Do not write inline css, just use class=”mystyle” Do not use html formatting tags <b>, <font> Lets see apply it to our example For more power see www.csszengarden.com We can add style for printer, mobile

Separate Content and behavior We still have inline javascript onclick="new Effect.toggle($('course1'),'blind',{duration:1})..." We can put it in a function like this onclick=”doEffect(this);” But still we have inline javascript

Separate Content and behavior Solution is to add the event handlers externally It is called unobtrusive Java Script Simply instead of onclick, we will use a css class class="effect" Then we use Java Script to search for links with class effect and append the event handler to it Lets see how.

Are we Web 2.0 Actually not yet. We have to know What Web 2.0 is, to be Web 2.0

What is Web 2.0 Is there a definition? Key features Web-as-participation-platform vs Web-as-information-source Wiki, blogs, tags, rss feeds, mashup (APIs) Rich Internet applications replace desktop ones

Web 2.0 examples Live examples mail.google.com netvibes.com, del.icio.us, digg.com RememberTheMilk.com desktoptwo.com, eyeos.org meebo.com zoho.com, writely.com RSS www.cnn.com/ http://weblogs.asp.net/wkriebel/ ww.wikipedia.com

How to be Web 2.0 Add collaboration, engage the user, use blogs, wikis, rss, tags, ... Make the UI rich,use CSS, Java script DHTML AJAX

What is AJAX AJAX: Asynchronous Java Script and XML What difference do AJAX add? Lets compare it to normal(synchronous) request More complex use cases can be done You put the limit on what you can do... Lets see delete example

What is next? Learn CSS, Javascript, DHTML Learn XML, AJAX Study MVC, learn RubyonRails (with Ruby) Work Agile Deliver early, deliver often Engage end-users Look for Web 3.0 (semantic web)

References & Articles www.wikipedia.com www.3schools.com Google.com (google for what you need) More references will be sent

Thanks For you attendance ACM chapter Stuff Muhammad Ali (eSpace)

Web 2.0

More Related Content

What's hot

Similar to Web 2.0

Recently uploaded

Web 2.0

Editor's Notes