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

Ajax loading image.

Muhammad Hassan

BadrIT logo

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

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

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

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

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.

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

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=&quot;text/css&quot;> a {color: red;} a:hover {color: blue;} </style>

<p style='color:red;'> Red text </p>

<p style='font-weight:bold;'> Bold text </p>

<style type=&quot;text/css&quot;> a {color: red;}

a:hover {color: blue;}

</style>

CSS Box Model

Lets apply CSS!

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

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

Client side

Interpreted

Dynamic

Object oriented

Scripting language.

Easy to learn

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

<script type=&quot;text/javascript&quot;> window.alert('Welcome to Web 2.0!'); </script>

<script type=&quot;text/javascript&quot;> 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

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);

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; }

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, 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

this example from www.w3schools.com

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

getElementById(), getElementsByTagName() methods

parentNode, firstChild, lastChild, ... properties of an element node

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

var searchBox = document.getElementById(&quot;search_box&quot;); alert(&quot;now searching for:&quot;+searchBox.value);

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

var images = document.images; for (i=0;i<images.length;++i) {

images[i].border=2;

images[i].style.borderColor=&quot;red&quot;;

}

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

var userArea = document.getElementById(&quot;user_area&quot;);

userArea.innerHTML =&quot;<img src='surprise.png'>&quot;;

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

<input type=&quot;text&quot; id=&quot;email&quot; onChange=&quot;checkEmail()&quot;>

onClick

onMouseOver

onMouseOut

Lets see live example

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

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

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

<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

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

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

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

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&quot; Which is called the “Controller” M odel V iew C ontroller 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&quot;

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

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

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

s

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

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

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!

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

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

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

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)

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

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=&quot;new Effect.toggle($('course1'),'blind',{duration:1})...&quot; We can put it in a function like this onclick=”doEffect(this);” But still we have inline javascript

We still have inline javascript

onclick=&quot;new Effect.toggle($('course1'),'blind',{duration:1})...&quot;

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=&quot;effect&quot; Then we use Java Script to search for links with class effect and append the event handler to it Lets see how.

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=&quot;effect&quot;

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

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

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 mind map

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

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

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

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)

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

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)

For you attendance

ACM chapter Stuff

Muhammad Ali (eSpace)

Questions & Feed Back