Embed Size (px)
Citation preview
Web Designs & Languages
The World Wide Web
• Affectionately called “The Web”
• It is a collection of information stored on the networked computers over the world.
• The WWW was proposed in 1991 by Tim Berners-Lee at CERN.
2
Web or Internet?
• They are not the same things.• The Internet is a collection of computers or
networking devices connected together.– They have communication between each other.– Decentralized design that there is no centralized body
controls how the Internet functions.• The Web is a collection of documents that are
interconnected by hyper-links.– These documents are accessed by web browsers and
provided by web servers.
3
Internet Terminology
• Client– Any computer on the network that requests services from
another computer on the network.• Server
– Any computer that receives requests from client computers, processes and sends the output.
• Web Page– Any page that is hosted on the Internet.
• Web Development– The process of creating, modifying web pages.
4
Web Browser (Web Client)
• It is a program that retrieves information from the Web.– Microsoft Internet Explorer– Netscape, Mosaic– Opera– Lynx– Mozila Firefox– Google Chrome
5
Some Statistics
• Until July 02– Internet Explorer 6.x 39%– Internet Explorer 5.x 51%– Internet Explorer 4.x 2%– Netscape 3%– Others 1%
– Win98/ME 64% , Win 95 4%– WinNT 5% , Win2000 20%– MAC 1% , www.thecounter.com
6
Internet Explorer
• Version 1.0 - August 1995• Version 2.0 - November 1995• Version 3.0 - August 1996• Version 4.0 - October 1997
– Support CSS & DOM, but no XML• Version 5.0 - March 1999• Version 5.5 - July 2000• Version 6.0 - August 2001
– The latest version
7
Netscape Navigator
• Netscape 1.0 - December 1994• Netscape 2.0 - March 1996• Netscape 3.0 - August 1996• Netscape 4.0
– The latest one is 4.79• Mozilla• Netscape 5.0 - Skipped• Netscape 6.0 - November 2000• Netscape 6.1 - August 2001• Netscape 6.2 - November 2001• Netscape 7.0
8
Web Server
• It is a program that waits for requests from the web browser.
• It provides four major functions– Serving web pages– Running gateway programs (CGI) and returning output– Controlling access to the server– Monitoring and logging all access
• E.g. Apache, IIS, Netscape Web server, …
9
Web connection
10
How does the Web work?
• The web information is stored in the Web pages.– In HTML format.
• The web pages are stored in the computers called Web servers.– In the Web server file system.
• The computer reading the pages is called web clients with specific web browser.– Most commonly Internet Explorer or Netscape.
• The web server waits for the request from the web clients over the Internet.– Internet Information Server (IIS) or Apache.
11
The HTTP Request/Response Model
12
Client Server
Request
Response
HTML Codes<html>
…</html>
Program / Scripts
HTTP
• HTTP (Hypertext Transfer Protocol)– protocol used to access data on the WWW.– uses one TCP connection on well-known port 80.– two types of http messages: Request, Response– transfer data in the form of plain text, hypertext,
audio, video, and so on.
13
HTTP
14
Who defines the Web standards?
• The Web standards are not defined or setup by the browser companies or Microsoft, but the World Wide Web Consortium (W3C).
• The specifications form the Web standards.– HTML, CSS, XML, XHTML, …
15
W3C
• Quoted from W3C– W3C's long term goals for the Web are:1. Universal Access: To make the Web accessible to all by promoting
technologies that take into account the vast differences in culture, languages, education, ability, material resources, and physical limitations of users on all continents;
2. Semantic Web : To develop a software environment that permits each user to make the best use of the resources available on the Web;
3. Web of Trust : To guide the Web's development with careful consideration for the novel legal, commercial, and social issues raised by this technology.
16
Web Programming Languages
• The Web is no longer just presenting information on a computer screen.– Many commercial sites include some methods of
getting information from a browser to web servers.• How do you program your web site such that it can interact
with people?
– With XML, data from spreadsheets, reports or other applications can be easily displayed on the Web.
• Can we learn XML without the understanding of HTML and other Web language?
17
The History of Markup
• In the early 1970s– GML (the Generalized Markup Language)– “:h1.The Content is placed here”
• Since the 1980s– SGML (the Standard GML)– HTML
• Currently– XML
• Not intended to replace HTML!• XHTML does by providing better data description, …
18
SGML, HTML and XML
19
MetaLanguage
Language
Usage of theLanguage
SGML XML
HTML
Web pages
XHTML
simplifies
defines
XMLDefinitions
XMLDocuments
MetaData
Data
HTML
• HyperText Markup Language• It is not a programming language.
– Cannot be used to describe computations.– Use to describe the general form and layout of
documents to be displayed by the browser.
• Compose of “Content” and “Controls”
20
HTML Element / Tag
• <p align=“right”> </p>
21
Element Attribute Name Attribute Value
You have to understand the You have to understand the important terms related to HTML.important terms related to HTML.
Not case-sensitive.Not case-sensitive.
WML
• Wireless Markup Language– Formerly called HDML (Handheld
Devices Markup Languages)– Allows the text portions of web pages
to be displayed on cell phones or PDAs via wireless media.
– It is part of the Wireless Application Protocol (WAP).
22
XML
• eXtensible Markup Language (XML)• It provides a standard way to represent information
so as to allow information to be stored and interchanged among any Internet-connected devices.– It is not a markup language.– It is a meta-markup language that specifies rules for
creating markup languages.– Browsers use XML parsers to isolate and extract the
information from XML documents.
23
Examples of XML-based languages
24
AcronyAcronymm
NameName DescriptionDescription
CDFCDF Channel Definition FormatChannel Definition Format One of the first real-world applications of XML, One of the first real-world applications of XML, permits automatic delivery of updated web permits automatic delivery of updated web information (Microsoft)information (Microsoft)
CMLCML Chemical Markup LanguageChemical Markup Language Conversion of current files into structured Conversion of current files into structured documents (chemical publications)documents (chemical publications)
ETD-ETD-MLML
Electronic Thesis & Electronic Thesis & Dissertation MLDissertation ML
Converts theses from MS-Word into XMLConverts theses from MS-Word into XML
FlowMFlowMLL
A format for storing audio synthesis diagrams for A format for storing audio synthesis diagrams for synthesizerssynthesizers
ITMLITML Information Technology MLInformation Technology ML A set of specifications for protocols, message A set of specifications for protocols, message formatsformats
MathMMathMLL
Mathematical MLMathematical ML Describes mathematical notationsDescribes mathematical notations
VXMLVXML Voice XMLVoice XML Allows interaction with the Internet thru voice-Allows interaction with the Internet thru voice-recognition technologyrecognition technology
XHTMLXHTML Extensible HTMLExtensible HTML HTML 4.0.1 is written as an XML applicationHTML 4.0.1 is written as an XML application
XSLXSL Extensible Stylesheet Extensible Stylesheet LanguageLanguage
The style standard for XML, specifies the The style standard for XML, specifies the presentation and appearance of an XML documentpresentation and appearance of an XML document
XSLTXSLT XSL Transformation LanguageXSL Transformation Language Uses to transform XML documents into another Uses to transform XML documents into another XML filesXML files
XML TransformationSame XML Document
25
XML Document
StyleSheet 1 (XSL) StyleSheet 2 (XSL)XSLTransformation
HTML WML
MathML Example
• E = mc2
26
MathML Presentation Markup Example
<mrow>
<mi>E</mi><mo>=</mo><mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
XHTML
• The eXtensible HyperText Markup Language– A Reformulation of HTML 4 in XML 1.0– Consists all HTML 4.0.1 predefined components
combined with XML standards• A way of making XML documents that look
and act like HTML documents.• Using XHTML helps you strengthen the
structure and syntax of your markup.
27
HTML – OK, XHTML - !OK
<HTML><HEAD><TITLE>My Title</TITLE><body></HEAD><td>It is an acceptable HTML, but an unacceptable XHTML
</BODY>…<table WIDTH=80%> Incorrect<table width=“80%”> Correct
28
Evolution of the XHTML family
29
SGML (1986)
HTML 2.0 – 4.0.1(1990 – 1999)
XML Others
XHTML Basic(Dec 19, 2000)
Modularizationof XHTML
XHTML 1.0(Jan 26, 2000)
Others
XHTML 1.1(May 31, 2001)
Cascading Style Sheets (CSS)
• Provides a powerful and flexible way to control the details of web documents.
• HTML is more concerned about the content, CSS is used to impose a particular style on the document.
• Named cascading style sheets because they can be defined at three different levels to specify the style of a document.– Inline, document level, external.
30
Using Stylesheets to add presentation
31
HTML Page
CSS stylesheet
Web browser Displayed page
Client-Side and Server-side Programming
• Client-side code– ECMAScript
• JavaScript, JScript – Microsoft– VBScript – Microsoft– Embedded in <script> elements and execute in the browser, provides
immediate feedback to the user.– Reduces the load on a server, reduces network traffic.
• Server-side code– Execute on the server– CGI/Perl, ASP, PHP, ColdFusion, JSP– The code remains hidden from users, and browser independent.
• Can be combined with good results.
32
Client-side & Server-sideTechnologies
33
Client-SideClient-Side Server-SideServer-Side
HTML, XMLHTML, XML
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Scripting languagesScripting languages
- JavaScript, VBScript- JavaScript, VBScript
Java AppletsJava Applets
ActiveX controlsActiveX controls
Plug-ins and Helpers Plug-ins and Helpers applicationapplication
CGI/PerlCGI/Perl
PHPPHP
ColdFusionColdFusion
Scripting LanguagesScripting Languages
- Server-side JavaScript- Server-side JavaScript
- ASP, JSP, Java Servlets- ASP, JSP, Java Servlets
ISAPI/NSAPI programsISAPI/NSAPI programs
JavaScript
• There is no relationship between Java and JavaScript – misleading!
• It provides a computational capability in web documents.
• It is used in creating, accessing, modifying a document.
34
What can JavaScript do?
• Control document appearance and content• Control the browser• Interact with the user• Read and Write Client State with Cookies
– my.yahoo.com
• Interact with Applets• What it cannot do?
– Read/write files
35
DHTML
• It is used to describe a set of animated web documents that built from HTML, style sheets and scripts.
• There are three main parts of DHTML– Positioning– Style modifications– Event handing
• It relies on the browser for the display and manipulation of the web pages.
36
VRML
• Virtual Reality Modeling Language (VRML) is a language for the animation and 3D modeling on the Internet.
• The user can connect the online VRML website and move around the “3D world”.
38
CGI / Perl
• When the page is loaded by a browser, the tag of the webpage call the script and then execute by the server.
• It is different from the Java applets or JavaScript which are executed by the client’s system.
40
CGI / Perl
• Common Gateway Interface (CGI) is a standard way in which a browser communicate to run a program on the server and return the output to the browser.– It can be written in any programming language
(most common is Perl).– It is a powerful string pattern-matching language.
41
Using Scripts
42
HTML Page
CSS stylesheet
Web browser Displayed page
Database
File stored
scripts
VBScript
• VBScript is the short form for Visual Basic Scripting from Microsoft.
• Try to edit a file “hello.vbs”– Msgbox “Hello world”
43
ASP
• Active Server Page was developed by Microsoft and it is a popular technology for developing dynamic web sites.– It allows the author includes scripting code
(VBScript or JScript) in regular web pages.– In complex code, COM (ActiveX) components
are used.– Must run on an active server pages server
• IIS, Personal Web Server, …
– The latest version is ASP.NET
44
How to load an ASP page?
45
Client Server
Request
Reply withHTML page
ASPServer
Component
Hands request to
Hands HTML page
TranslatesScriptInto
HTML
PHP
• It is not an acronym for anything.– An open source web scripting language.– A PHP page is always interpreted by the server
when it is requested.– The latest version is PHP 4.– Have to learn an entirely new language.– Reference: http://www.php.net/
46
PHP Popularity
• http://php.weblogs.com/popularity
47
ColdFusion
• It is a Web application development environment produced by the Macromedia Corporation.
48
Client Web Server
Request *.cfm
Reply Web Page
CF Page
Cold FusionApplication
Server
Web Page
JAVA / Java applet
• It is used to solve the problem that HTML is not a programming language.– Instead of running a program on the web
server, a special kind of Java program (applet) is downloaded to the browser.
– JavaScript is less powerful than Java.– JavaScript code is physically part of an HTML
document, but applets are stored separately from the HTML files.
49
Java 2 Platforms
50
What are Java Servlets?
• An extremely popular Java substitute for CGI scripts.
• They are programs to be run on a web server.• The web page is based on the data submitted
by the user.• More efficient, easier to use, Powerful and
Portable.
51
Java Servlets
• They are Java application programs that are resident on the server and are alternatives to CGI programs.
• Java Servlets allow you to build– Web page based on the user’s input data– Web page that changes frequently
• More efficient, easier to use, more powerful and portable.
52
Servlets Advantages• Platform and vendor independence
– Supported by all the major web servers• Integration
– Take advantages of all the Java technologies, JDBC, Enterprise JavaBeans (EJB).
• Efficiency– A single process that runs until the servlet-based
application is shut down.• Scalability – extremely scalable.• Robustness and security
– A strongly typed programming language.
53
What is JSP?
• It is JavaServer Pages that built on top of Java servlets in late 1999.
• In the early days of the Web, the only tool for developing dynamic web content was CGI. For every request, the web server creates a process (not efficient).
• The Java Servlet API has introduced in 1997, however, HTML code has to be embedded inside programs. (lot of “out.println()”)
• JSP provides a development model for the web authors to experience all the server-side technologies.
54
JSP page translation and processing phases
55Processing phase
Translation phase
Client Server
Request
Response
Hello.jsp
helloServlet.class
helloServlet.java
Read
Generate
Execute
A simple exampleJava Servlet & JSP
56
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HelloWorld extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
out.println("<HTML>");
out.println("<HEAD><TITLE>Hello World</TITLE></HEAD>");
out.println("<BODY>");
out.println("<BIG>Hello World</BIG>");
out.println("</BODY></HTML>");
}
}
<HTML><HEAD><TITLE>Hello</TITLE></HEAD>
<BODY><H1><% if (request.getParameter("name") == null){ out.println("Hello World");} else { out.println("Hello, " + request.getParameter("name"));}%></H1></BODY></HTML>
Template Pages
CSC1720 – Introduction to Internet
57
Server Page TemplateServer Page Template
<html><html>
<title><title>
A simple exampleA simple example
</title></title>
<body <body color=“#FFFFFF”>color=“#FFFFFF”>
The time now isThe time now is
<%= new java.util.Date() <%= new java.util.Date() %>%>
</body></body>
</html></html>
Resulting HTMLResulting HTML
<html><html>
<title><title>
A simple exampleA simple example
</title></title>
<body color=“#FFFFFF”><body color=“#FFFFFF”>
The time now isThe time now is
Tue Nov 5 16:15:11 PST Tue Nov 5 16:15:11 PST 20022002
</body></body>
</html></html>
translation
What you need to get started?
• A Personal Computer with an Internet connection, that allows you to download the software you need.
• A Java 2-compatible Java Software Development Kit (Java 2 SDK)
• A JSP 1.1-enabled web server, such as Apache Tomcat
58
JSP vs. ASP
• JSP is platform and server independent.• ASP relies on Microsoft Platforms and Servers.
59
ASP TechnologyASP Technology JSP TechnologyJSP Technology
Web ServerWeb Server IIS or Personal Web IIS or Personal Web ServerServer
Any Web ServerAny Web Server
PlatformsPlatforms Microsoft WindowsMicrosoft Windows Most popular Most popular platformsplatforms
Reusable Reusable componentscomponents
NoNo JavaBeans, JSP tagsJavaBeans, JSP tags
Security Security against System against System
crashescrashes
NoNo YesYes
Scripting Scripting LanguageLanguage
VBScript, JscriptVBScript, Jscript JavaJava
ASP & JSP
60
<html><head><title>Hello World by ASP</title></head><body><font size=12><%response.write “Hello World!"%></font></body>
<html><head><title>Hello World by JSP</title></head><body><font size=12><%out.println("Hello World!");%></font></body>
Web Services
• What are Web services?– They are a distributed computing architecture.
• Who is using Web services now?– Industry technologies
• Which approach should we use - .NET or J2EE?• Requestor, Registry, Provider
61
Critical Elements of a Basic Web Services Architecture
62
Format
Services
Network
XML (Format)
UDDI (Publish)
The Internet
WSDL (Find) SOAP (Bind)
For presenting data and information
A directory service
A protocol for applications to find a service
A protocol that enables applications to agree the communication
The Internet, using TCP/IP protocols…
Service-Oriented Architecture
63
Requestor Registry
Provider
Find - UDDI
Publish - UDDIBind –WSDL, SOAP
References
• Internet and World Wide Web How to Program – Deitel, Deitel and Nieto
64
