wen-nung tsai //w3c.org/ ( ) html and web programming twitter gmail gtalk facebook bing some more
TRANSCRIPT
Wen-Nung Tsaihttp://w3c.org/ ( http://www.w3.org )
HTML and Web Programming
2
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
AgendaAgenda Review: HTML. DHTML
– Web pages (網頁 ) is simply an HTML file. Web Application Dynamic Web Programming CGI – Common Gateway Interface XUL ? XML-based User-interface Language Programming in FaceBook References
3
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
TerminologiesTerminologies
WWW – World Wide Web HTML – Hyper Text Markup Language HTTP – Hyper Text Transfer Protocol URL – Uniform Resource Locator Hyperlinks and Links Web Browser Web Server, Application Server http://w3c.org
4
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
5
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
The Internet versus the WebThe Internet versus the Web
THE INTERNET
The Internet is a collection of interconnected networks.
THE WEB
The Web is a system that provides access to documents formatted in hypertext that uses languages such as HTML or XML.
Slide 5 of 30
6
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Web ApplicationWeb Application
Web Applications are developed to use a Web browser as the interface to the application to allow users to input, retrieve and process data of certain types. They create dynamic Web pages to dynamically respond to user inputs.
7
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Web Application Architecture
Browser
DBMS
8
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Layered Web InteroperabilityLayered Web Interoperability
Network Hardware
HTTP
TCP/IP
Google API
SOAP XMLRPC
…
REST
RSS
…
……… OAI-PMH
…
9
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is HTTP?What is HTTP? Protocol for transfer of data between Web server
s and Web clients (browsers). Popular Web servers:
– Apache HTTPD– JBoss– Tomcat
Popular Web clients:– Mozilla , Firefox, Netscape, MSIE– Chrome, HotJava, Hotdog, Opera– wget
Defined formally by IETF as RFC2616.
10
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
URLs, URNs and URIsURLs, URNs and URIs Every resource accessible through HTTP is identified by a Uniform
Resource Location (URL), which is a location-specific identifier.– For example,
http://www.cs.uct.ac.za:80/ ftp://ftp.cs.uct.ac.za/
A Uniform Resource Identifier (URI) is a standard format (<scheme>:<identifier>) generic identifier.– For example,
mailto:[email protected] oai:www.ndltd.org:123456-789
A Uniform Resource Name (URN) is one example of a location-independent URI.– For example,
urn:isbn:123-456-789
Note: Every URL and URN is also a URI!Note: Every URL and URN is also a URI!
11
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is HTML ?What is HTML ?
HTML – HyperText Markup Language– HTML file is Essentially a text file, containing small
markup tags. ( 排版語言 )
– Markup tags tell the Web Browser how to read and display the page. I.e., how to lay out the information (text, images, etc) in the browser window.
– an opening tag <html> and a closing tag </html> with the content that the tag is applied to, in between them.
12
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
<html>
<head>
<title> 名稱 </title>
</head>
<body>
內容 <tag attribute=val … > …
</tag> </body>
</html>
Titile 讓首頁製作者以簡短的文字表達此一首頁之內容。Title 的內容會出現在瀏覽器的頂端。若將某個首頁加入書籤,則 Title 內容變成該書籤名稱。
HTML Page (Web Page) 外觀
13
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
HTML ElementsHTML Elements Headings, Font Sizes, Color Comments Backgrounds Links and hyperlinks E-mail Pictures Lists Tables, Frames, …
14
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
進階語法-進階語法- CSSCSS 介紹介紹 (1/2)(1/2)
超連結去底線 【語法】 1. 在 <head>…</head> 加入下列語法 <style> a{text-decoration:none} </style>
2. 在 <body>…</body> 加入下列語法 <a style="text-decoration: none" href=" 網址 "> 連結名稱 </a>
15
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
<html>
<head>
<title>CSS 應用 </title>
<style>
a{text-decoration:none}
</style>
</head>
<body>
<a style="text-decoration: none"
href="http://www.sinica.edu.tw"> 中央研究院 </a>
</body>
</html>
進階語法-進階語法- CSSCSS 介紹 介紹 (2/(2/2)2)
16
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Tools to build a Web PageTools to build a Web Page You can just use NOTE PAD
– Write some bunch of code in a HTML file
Or you can use WYSIWYG (pronounced "wiz-ee-wig", means “What You See Is What You Get) editors.– Netscape Composer
– Microsoft Front Page– Dreamweaver MX
– Hundreds of other Editors available on the Internet – the Cyber spaces
17
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Dynamic Web ProgrammingDynamic Web Programming HTML + CGI + … Client side: Java script, VB script Server side:
– CGI : Using PERL, TCL, Python, Ruby, …– ASP, PHP, JSP
DBMS– Oracle, MSSQL, MySQL, …
J2EE, ASP.Net PHP + MySQL [ + Tomcat ]
( 注意 JavaScript 不是 Java)
18
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Dynamic web pagesDynamic web pages Client-side
– Examples: java applets, javascript/VBScript, Macromedia Flash
Server-side– Common Gateway Interface (CGI)– Servlets– ASP, PHP, JSP
19
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is DHTML? (1/2)What is DHTML? (1/2) DHTML is the combination of several built-in brows
er features in fourth generation browsers that enable a web page to be more dynamic.
DHTML is NOT a scripting language (like JavaScript), but a browser feature- or enhancement- that makes the browser dynamic
It uses a host of different technologies - JavaScript, VBScript, the Document Object Model (DOM), layers, cascading stylesheets - to create HTML that can change even after a page has been loaded into a browser
20
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is DHTML? (2/2)What is DHTML? (2/2) It is considered to be made up of
– HTML
– Cascading Style Sheets (CSS)
– Scripting Language All three of these components are linked via
Document Object Model (DOM) DOM is the interface that allows scripting
languages to access the content, style, and structure of the web documents and change them dynamically
21
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Tools of DHTMLTools of DHTML HTML and XML
– Partitions and Organizes the content CSS, XSL - CSS1, CSSP, CSS2
– Defines the Presentation of the content Scripting - JavaScript, JScript, VBScript
– Adds interactivity to the page DOM- Document Object Model
– Defines what and how elements are exposed for script access
22
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
CGI – Common Gateway InterfaceCGI – Common Gateway Interface CGI = 共通閘道介面
– Standard interface through which users interact with applications on Web servers
– Provides way for clients to interact with applications on Web server
– CGI script Can be written in many different languages, including Perl
Practical Extraction and Report Language (Perl)– One of the most widely used language for Web programming
Python -- http://en.wikipedia.org/wiki/Python_(programming_language)
Ruby -- http://en.wikipedia.org/wiki/Ruby_(programming_language)
23
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Active Server Pages Active Server Pages (ASP)(ASP) ASP code enclosed in: <% VBScript code %> When a browser calls an ASP document, the
ASP Server reads the .asp document and1. Substitutes appropriate files for the (server-side)
include statements
2. Runs the ASP code (Visual Basic Script – see the Tutorial and Language Reference, …)
3. Returns the resulting HTML code to the browser
JSPJSP -- Java Server Page (sun micro)
24
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
PPHP: HP: HHypertext ypertext PPreprocessorreprocessor.. PHP stands for PHP: Hypertext Preprocessor. HTML embedding scripting language PHP code enclosed in <?php PHP code ?> or <? PHP cod
e ?> When a browser calls a PHP document, the Serve
r reads the PHP document and– Runs the PHP code
– Returns the resulting HTML code to the browser
JSPJSP -- Java Server Page (sun micro)
25
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is XUL ?What is XUL ? XML-based User interface Language (“zool”) An XML grammar to add/modify UI widgets of the browser Makes UI building easier and faster Uses W3C standards: HTML, XML, CSS, DOM XPToolkit is the finite set of interface-specific elements created in XUL XPFE (cross Platform Front End) is the front end created from XPToolk
it
XUL provides flexibility and ease of use– Cross-platform UI easily – Power enough to build application UI– Ready-made widgets
26
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL Widget & SyntaxXUL Widget & Syntax Widget:
– Window, box, menu, button, tabbox, checkbox, …
Syntax & Rules:– XUL is case sensitive: all events and attribute must be
written in lower case
– All strings must be double quoted
– All attributes must have a value
– XUL file extension: .xul
27
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Inside XUL packageInside XUL package
Main components– Content:
XUL files describes XML description of UI
– Appearance: CSS, images, and others control presentation
– Behavior: JavaScript defines event handling within widgets
– Locale: All localizable strings in external DTD
28
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL and JavaScriptXUL and JavaScript XUL interface is a collection of disconnected wi
dgets until programmed Using JavaScript and/or C++ JavaScript included in XUL or a separate file
<html:script>function InitWindow( ) {
var checkbox = document.getElementByID("remember"); if (checkbox) checkbox.checked = true; }
</html:script>
<html:script language="javascript" src="myscript.js"/>
29
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Adding Event HandlersAdding Event Handlers JavaScript
DOM Event Listener
30
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Chrome URI’sChrome URI’s
XUL files are loaded via chrome URI’s chrome://<package name>/<part>/<file.xul> The chrome URI has three parts:
Package name : Given by userType of data : Content or Skin or Locale
Content : xul and js filesSkin : images and css filesLocale : DTD and .properties files
File name : Path of the file to load
31
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL OverlaysXUL Overlays
Overlays attach other UI widgets to XUL documents at run time.
XUL fragments are inserted at specific merge points in the master document.
For example:<statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, World"/> </statusbar>
“status-bar” is the merge point and “my-panel” is the new XUL fragment
32
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
XUL fileXUL file<?xml version="1.0"?><overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekee
per/there.is.only.xul">
<script type="application/x-javascript" src="chrome://sample/content/test.js"/>
<?xml-stylesheet href="chrome://sample/skin/test.css" type="text/css"?>
<statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello World"/> </statusbar>
Programming in FacebookProgramming in Facebook
Hussein Sulemanuct cs honours 2007
34
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What is Facebook?What is Facebook?
35
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
How Facebook Apps workHow Facebook Apps work Every profile page is made up of many independent portl
ets or profile boxes.
Each portlet is generated statically by a possibly external application and stored by Facebook.
It could be an iframe, but in most cases is not.
Portlets are not actually changed in the profile page – they are changed elsewhere!
Facebook has mechanisms to link in applications, and APIs for applications to communicate with Facebook.
36
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Facebook CommunicationFacebook Communication
application (UCT)
user facebook.com
request for profile
profile
request for canvas
canvas
Facebook API use
update profile box, etc.
request for canvas content
canvas
37
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What can the API do ?What can the API do ?
Get a list of friend ids or friends who are running the same app
Get and set notifications of events Set content of profile box Get specific information on a user Add to the Newsfeed for a user etc.
See: http://developers.facebook.com/documentation.php?v=1.0&doc=
38
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
FBMLFBML Language used by Facebook to specify any frag
ment of Web pages. Mostly just like HTML! Forms get additional fields added to pass Facebo
ok parameters silently. Images are redirected to local copies. Links must be absolute (parameters do not work
as expected in all toolkits). Lots of additional Facebook-specific items
– <fb:name uid=…> for a user’s name– <fb:profile-pic …> for a user’s profile picture
39
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
FQLFQL Facebook Query Language allows access t
o user database with language that is similar to SQL.
Example:– SELECT first_name FROM user WHERE uid
=$params->{user}– To get the first name of a user based on the us
er-id
40
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Creating an ApplicationCreating an Application What you need:
– Web Server
– API toolkit or roll-your-own
Add the Developer application to your profile.
Switch to the Developer application.
Apply for a key.
41
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
42
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
43
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
44
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
45
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
What does a typical What does a typical application do?application do?
Check CGI parameters. Authenticate using Facebook API. Draw configuration Web page on canvas. Allow user to update options … Write FBML to profile box. Save per-user state in database or in filesys
tem.
46
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Example: Profile BoxExample: Profile Box
47
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
Example: Application CanvasExample: Application Canvas
48
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
The Code – index.plThe Code – index.pl #!/usr/bin/perl # # sample adapted from Facebook Perl API example # hussein suleman # 31 july 2007
use strict; use CGI; use WWW::Facebook::API; use Data::Dumper; use LWP::UserAgent; use XML::DOM;
# create FB object with keys included my $facebook = WWW::Facebook::API->new( api_key => "8a3b63fde6e900f853c51903e6689e5b", secret => "f1818d69d7140fa0192b623b55e7da59", app_path => "hussein_testb", parse => 1, );
# remember to add proxy for UCT! $facebook->ua->proxy ('http', 'http://cache.uct.ac.za:8080/');
sub main { # handler CGI parameters my $q = new CGI; print $q->header;
redirect("Must be called in facebook canvas") unless $facebook->canvas->in_fb_canvas($q);
my $params = $facebook->canvas->validate_sig($q); if ( $params->{user} ) { # Canvas takes care of setting up a session for us, no need to call the
49
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
# auth methods. $facebook->session_key( $params->{session_key} ); } else { # User hasn't added app (could reject/display info/whatever) # (Or handle later when a user is needed). }
my ( $action, $param ) = ( $q->path_info =~ m!^/(\w+)/?(.*)! );
# trigger action depending on parameters passed to app if ($action eq '') { handle_index($param, $params); } else { print_error ("cannot understand request"); } }
# canvas drawing routine sub handle_index { my ( $param, $params ) = @_;
print "<fb:header/>"; print "<h1>Watch My Students</h1>"; print "<fb:profile-pic uid=\"$params->{user}\"/> ";
# list data from disk file with links to delete entries print "<h2><fb:name uid=\"$params->{user}\" useyou=\"false\"/>\'s Current Wat ched Entries</h2>"; my $fbml = "<b>Watch My Students</b><hr/><p>Sneak peek at what the 1016 stude nts are chatting about in the class forum ...</p><ul>"; print "<ul>";
50
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
open (my $ofile, "data.txt"); my $po = 0; while (my $aline = <$ofile>) { $po++; chomp $aline; print "<li><a href=\"http://banzai.cs.uct.ac.za/~hussein/cgi-bin/2007/face book/perl/delete.pl?position=$po\">Delete</a> $aline</li>"; $fbml .= "<li>$aline</li>"; } close ($ofile); print "</ul>"; $fbml .= "</ul>";
print "<hr/>";
# list data from RSS feed with links to add entries print "<h2><fb:name uid=\"$params->{user}\" useyou=\"false\"/>\'s Latest RSS Entries</h2>"; print "<ul>"; my $results = get_RSS(); $po = 0; foreach my $aresult (@$results) { $po++; $aresult->[2] =~ s/\<[^\>]+\>//go; print "<li><a href=\"http://banzai.cs.uct.ac.za/~hussein/cgi-bin/2007/face book/perl/add.pl?position=$po\">$aresult->[0] (by $aresult->[1])</a><br/>$aresul t->[2]</li>"; } print "</ul>";
# add application if it has not been added if ( !$params ) { print "<a href='", $facebook->get_add_url,
51
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
"'>Add this application</a>."; }
# update profile box $facebook->profile->set_fbml (markup => $fbml); }
# deal with users trying to use app without logging into FB sub redirect { div_error("Please go <a href='" . $facebook->get_app_url . "'>to facebook</a>" ); exit; }
# general error handler sub print_error { print "<div style='padding: 20px'>", join( "", @_ ), "</div>"; }
# retrieve and parse an RSS feed sub get_RSS { my $ua = new LWP::UserAgent(); $ua->timeout(10); $ua->proxy ('http://cache.uct.ac.za:8080/');
my $response = $ua->get('http://banzai.cs.uct.ac.za/phpBB2-1016/rss.php'); my @results = ();
if ($response->is_success) { my $parser = new XML::DOM::Parser; my $doc = $parser->parse ($response->content);
foreach my $anitem ($doc->getElementsByTagName ('item'))
52
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
{ my $title = ''; foreach my $anode ($anitem->getElementsByTagName ('title')) { if ($anode->hasChildNodes == 1) { $title = $anode->getFirstChild->toString; } } my $author = ''; foreach my $anode ($anitem->getElementsByTagName ('author')) { if ($anode->hasChildNodes == 1) { $author = $anode->getFirstChild->toString; } } my $description = ''; foreach my $anode ($anitem->getElementsByTagName ('description')) { if ($anode->hasChildNodes == 1) { $description = $anode->getFirstChild->toString; } } $description =~ s/</\</go; $description =~ s/>/\>/go; $description =~ s/[\n\r]//go; push (@results, [$title, $author, $description]); } }
\@results; }
main();
53
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
The Code - add.plThe Code - add.pl #!/usr/bin/perl # # sample adapted from Facebook Perl API example # hussein suleman # 31 july 2007
use strict; use CGI; use LWP::UserAgent; use XML::DOM;
sub main { my $q = new CGI;
handle_add ($q->param('position'));
print "Location: http://apps.facebook.com/hussein_testb/\n\n"; }
54
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
sub handle_add { my ( $position ) = @_;
$position--; my $results = get_RSS(); my $aresult = $$results[$position]; if (defined $aresult) { $aresult->[2] =~ s/\<[^\>]+\>//go; open (my $ofile, ">>data.txt"); print $ofile "<a href=\"$aresult->[1]\"><b>$aresult->[0]</b></a> $aresult- >[2]\n"; close ($ofile); } }
sub get_RSS { my $ua = new LWP::UserAgent(); $ua->timeout(10); $ua->proxy ('http://cache.uct.ac.za:8080/');
my $response = $ua->get('http://banzai.cs.uct.ac.za/phpBB2-1016/rss.php'); my @results = ();
if ($response->is_success) { my $parser = new XML::DOM::Parser; my $doc = $parser->parse ($response->content);
foreach my $anitem ($doc->getElementsByTagName ('item')) { my $title = ''; foreach my $anode ($anitem->getElementsByTagName ('title')) { if ($anode->hasChildNodes == 1)
55
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
foreach my $anode ($anitem->getElementsByTagName ('title')) { if ($anode->hasChildNodes == 1) { $title = $anode->getFirstChild->toString; } } my $guid = ''; foreach my $anode ($anitem->getElementsByTagName ('guid')) { if ($anode->hasChildNodes == 1) { $guid = $anode->getFirstChild->toString; } } my $description = ''; foreach my $anode ($anitem->getElementsByTagName ('description')) { if ($anode->hasChildNodes == 1) { $description = $anode->getFirstChild->toString; } } $description =~ s/</\</go; $description =~ s/>/\>/go; $description =~ s/[\n\r]//go; push (@results, [$title, $guid, $description]); } }
\@results; }
56
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
The Code – delete.plThe Code – delete.pl #!/usr/bin/perl # # sample adapted from Facebook Perl API example # hussein suleman # 31 july 2007
use strict; use CGI;
sub main { my $q = new CGI;
handle_delete ($q->param('position'));
print "Location: http://apps.facebook.com/hussein_testb/\n\n"; }
sub handle_delete { my ( $position ) = @_;
open (my $ofile, "data.txt"); my @lines = <$ofile>; close ($ofile);
splice (@lines, $position-1, 1);
open (my $ofile, ">data.txt"); foreach my $aline (@lines) { print $ofile $aline; } close ($ofile); }
main();
57
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
ReferencesReferences W3C's homepage for CGI. http://www.w3c.org/CGI/ Introduction to Common Gateway Interface specifications.
NCSA Software Development Group. http://hoohoo.ncsa.uiuc.edu/CGI/overview.html
The WWW Common Gateway Interface Version 1.1 (Internet Draft), David Robinson, October 1995.
ISAPI (Internet Server API). Progress Software and Microsoft. http://www.process.com/news/spec.htp
NSAPI (Netscape Server API). Netscape. http://www.netscape.com/newsref/std/server_api.html
Vaughn Bullard, Smith, Daconta. Essential XUL Programming. New York: John Wiley & Sons, Inc. 2001.
58
http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
謝謝捧場http://www.csie.nctu.edu.tw/~tsaiwn/introcs/
http://gogle.com/
HTML and Web Programming