Week 10 Technical Stack I I 03

25 %
75 %
Information about Week 10 Technical Stack I I 03

Published on March 13, 2008

Author: matthewjetthall

Source: slideshare.net

Description

Part II of Dan's lecturer about the technical stack of Web 2.0 applications for CS-292 class at Vanderbilt.

CS 292: Beyond the One Way Web Dan Nanto, Spring 2008 http://beyondtheonewayweb.wordpress.com

Separating Content from Presentation XML XSL Example: RSS Dynamic Browser Presentation JavaScript DHTML & DOM AJAX APIs – Services Example: Google Maps CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Separating Content from Presentation

XML

XSL

Example: RSS

Dynamic Browser Presentation

JavaScript

DHTML & DOM

AJAX

APIs – Services

Example: Google Maps

Static content. Limited formatting options Single “Frame” Animated Gifs were “really cool!” “ Request Response” Loop CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Static content.

Limited formatting options

Single “Frame”

Animated Gifs were “really cool!”

“ Request Response” Loop

Can react to events Read and change HTML elements Validates data Detects browser types Creates cookies CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Can react to events

Read and change HTML elements

Validates data

Detects browser types

Creates cookies

Not Java based! Real name is ECMA Script European Computer Manufacturers Association CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Not Java based!

Real name is ECMA Script

European Computer Manufacturers Association

javaScript support in both Netscape and Microsoft Browsers since 1996 First standard approved in 1998 CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

javaScript support in both Netscape and Microsoft Browsers since 1996

First standard approved in 1998

<html> <body> <script type=&quot;text/javascript&quot;> document.write(“I love Brittney!&quot;); </script> </body> </html> CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

<html>

<body>

<script type=&quot;text/javascript&quot;> document.write(“I love Brittney!&quot;);

</script>

</body>

</html>

<script></script> tags Type=“text/javascript” Document.write(“I love Brittney!”); CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

<script></script> tags

Type=“text/javascript”

Document.write(“I love Brittney!”);

Written in body – executed upon rendering Written in head – can be called and executed Can be imported as well from an external file <script src=“someFile.js”/> CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Written in body – executed upon rendering

Written in head – can be called and executed

Can be imported as well from an external file

<script src=“someFile.js”/>

javaScript DHTML & DOM – Document Object Model AJAX CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

javaScript

DHTML & DOM – Document Object Model

AJAX

DHTML first attempt at dynamic web pages Access element by name/ID Can change value/State Can respond to some events Not a standard! CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

DHTML first attempt at dynamic web pages

Access element by name/ID

Can change value/State

Can respond to some events

Not a standard!

Some DHTML Events: onblur - a user leaves an object onchange - a user changes the value of an object onclick - a user clicks on an object ondblclick - a user double-clicks on an object onfocus - a user makes an object active onkeydown - a keyboard key is on its way down onkeypress - a keyboard key is pressed onkeyup - a keyboard key is released CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Some DHTML Events:

onblur - a user leaves an object

onchange - a user changes the value of an object

onclick - a user clicks on an object

ondblclick - a user double-clicks on an object

onfocus - a user makes an object active

onkeydown - a keyboard key is on its way down

onkeypress - a keyboard key is pressed

onkeyup - a keyboard key is released

Demo CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Demo

Not a standard Browser implementations varied. Difficult to debug due to multiple testing platforms required Element access only by name or ID CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Not a standard

Browser implementations varied.

Difficult to debug due to multiple testing platforms required

Element access only by name or ID

Document Object Model 1998 W3C published first DOM specification More generic than DHTML Represented the entire document as a tree CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Document Object Model

1998 W3C published first DOM specification

More generic than DHTML

Represented the entire document as a tree

Traverse the tree up, down, and side to side Create new nodes in the tree Remove nodes from the tree CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com) Image courtesy of www.w3schools.com

Traverse the tree up, down, and side to side

Create new nodes in the tree

Remove nodes from the tree

Inserting a Row Into a table Removing Options from a drop down Capturing Events and traversing nodes CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Inserting a Row Into a table

Removing Options from a drop down

Capturing Events and traversing nodes

<table id=&quot;myTable&quot; border=&quot;1&quot;> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <input type=&quot;button&quot; onclick=&quot;insRow()&quot; value=&quot;Insert row&quot;> CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

<table id=&quot;myTable&quot; border=&quot;1&quot;>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type=&quot;button&quot; onclick=&quot;insRow()&quot; value=&quot;Insert row&quot;>

<script type=&quot;text/javascript&quot;> function insRow() { var newRow=document.getElementById('myTable').insertRow(0); var y=newRow.insertCell(0); var z=newRow.insertCell(1); y.innerHTML=&quot;NEW CELL1&quot;; z.innerHTML=&quot;NEW CELL2&quot;; } </script> CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

<script type=&quot;text/javascript&quot;>

function insRow()

{

var newRow=document.getElementById('myTable').insertRow(0);

var y=newRow.insertCell(0);

var z=newRow.insertCell(1);

y.innerHTML=&quot;NEW CELL1&quot;;

z.innerHTML=&quot;NEW CELL2&quot;;

}

</script>

<select id=&quot;mySelect&quot;> <option> Apple </option> <option> Orange </option> </select> <input type=&quot;button&quot; onclick=&quot;removeOption()&quot; value=&quot;Remove selected option&quot;> CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

<select id=&quot;mySelect&quot;>

<option>

Apple

</option>

<option>

Orange

</option>

</select>

<input type=&quot;button&quot; onclick=&quot;removeOption()&quot;

value=&quot;Remove selected option&quot;>

<script type=&quot;text/javascript&quot;> function removeOption() { var x=document.getElementById(&quot;mySelect&quot;); x.remove(x.selectedIndex); } </script> CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

<script type=&quot;text/javascript&quot;>

function removeOption()

{

var x=document.getElementById(&quot;mySelect&quot;);

x.remove(x.selectedIndex);

}

</script>

DEMO CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

DEMO

Required all data/information to be loaded with browser. Introduced security challenges. Does not support Events Still Need DHTML! CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Required all data/information to be loaded with browser.

Introduced security challenges.

Does not support Events

Still Need DHTML!

Asynchronous JavaScript And XML Not a new technology A technique for retrieving data from a server Does not require a browser refresh CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Asynchronous JavaScript And XML

Not a new technology

A technique for retrieving data from a server

Does not require a browser refresh

Relies on XML object that can asynchronously communicate with the originating server: Internet Explorer ActiveXObject Other Browsers XMLHttpRequest object CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Relies on XML object that can asynchronously communicate with the originating server:

Internet Explorer

ActiveXObject

Other Browsers

XMLHttpRequest object

Requires HTML page Event Listener Asynchronous call to the server Server side process Callback method declaration CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Requires

HTML page

Event Listener

Asynchronous call to the server

Server side process

Callback method declaration

CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Dynamic Experience uses all these technologies: HTML: XML Event Listener: DHTML Asynchronous Call to server: AJAX Server Side Processing: Java or other Callback Method: DOM or DHTML CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Dynamic Experience uses all these technologies:

HTML: XML

Event Listener: DHTML

Asynchronous Call to server: AJAX

Server Side Processing: Java or other

Callback Method: DOM or DHTML

Google Suggest: http://www.google.com/webhp?complete=1&hl=en CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

Embedding services/sources Free APIs Examples: Google Maps YouTube CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Embedding services/sources

Free APIs

Examples:

Google Maps

YouTube

Google Maps: Allows you to integrate dynamic map content into your web site. YouTube: Allows you to integrate video from their site CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Google Maps:

Allows you to integrate dynamic map content into your web site.

YouTube:

Allows you to integrate video from their site

Web based technologies http://www.w3schools.com/default.asp APIs http://www.programmableweb.com CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Web based technologies

http://www.w3schools.com/default.asp

APIs

http://www.programmableweb.com

CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Add a comment

Related presentations

Related pages

Forex Technical Analysis for Week 10/03—10/07

Forex Technical Analysis for Week 10/03—10/07. October 1, 2011. Floor Pivot Points; Pair: 3rd Sup: 2nd Sup: 1st Sup: ... Forex Technical Analysis for ...
Read more

EUR/USD Technical Analysis Forecast for the week of 03.10 ...

EUR/USD Technical Analysis Forecast for the week of 03.10.2014 Capitol Academy. Subscribe Subscribed Unsubscribe ... Technical Analysis Course ...
Read more

Format date in java - Stack Overflow

Format date in java. ... in year Number 189 d Day in month Number 10 F Day of week in month Number 2 E Day ... 03 ...
Read more

Forex Technical Analysis for Week 03/10–03/14

Forex Technical Analysis for Week 03/10–03/14. March 8, 2014. Floor Pivot Points; Pair: 3rd Sup: 2nd Sup: 1st Sup: ... Forex Technical Analysis for Week ...
Read more

Stock of the Week

ONCE A WEEK Sign Up for our 100% ... Penny Stocks may be driven by hype, news, technical setups, ... Copyright © 2014-2015 Stock of The Week, ...
Read more

Microsoft Brings the Next Generation of Hybrid Cloud ...

TechNet Blogs » Microsoft Server and Cloud Platform Blog » Microsoft Brings the Next Generation of Hybrid ... Microsoft Azure Stack, ... New Technical ...
Read more

php weeks between 2 dates - Stack Overflow

... ['post']; } Output 1 - $weekArr = getNoOfWeek('2014-01-01', '2014-02-10'); Array ( [Week ... $endDate = '2015-03 ... site design / logo © 2015 Stack ...
Read more

Dezember | 2008 | Full Stack Universal Windows Platform

Full Stack Universal Windows Platform ... Live Mesh mal anders und die Vorträge der Xtopia und Technical Summit sind Live verfügbar ... Dezember 10, 2008 ...
Read more