Scribd
Upload
17 views

Lecture-4 Internet and Web Programming Architecture – Part 1

Uploaded by

bebohassan3200
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Lecture-4 Internet and Web Programming Architecture – Part 1

Uploaded by

bebohassan3200
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

CS 4126 : Internet Technology

Lecture-4
Internet and Web Programming
& Architecture – Part 1
Programming the Web
 Client-Side Programming
 Static document formats for the web
 Document forms: HTML and CSS
 Data forms: XML, DTDs and Schemas, XSL
 High-end graphics forms: VRML, SVG
 Client-side interactive web pages
 Client-Side Scripting languages: JavaScript, VBScript
 Client-Side embedded applications: Java applets, ActiveX,
Flash
 Server-Side Programming
 Server-side web page creation
 Scripting languages: CGI and Perl, PHP, ColdFusion
 High-level frameworks: Servlets and JSP, ASP, ASP.NET
Web Programming – Language Model
Client Side
Server Side

Cascading
ActiveX HTML
JavaScript Style
Controls Controls
C# Sheets

ASP generates HTML XML

WebForms JavaScript
VBScript
XHTML
Static document
formats for the web
HTML
 HyperText Markup Language
 Primary document type for the web
 Transmitted using the HTTP protocol

 Describes document content and structure


 HTML is good for developing static pages
 can specify text/image layout, presentation, links, …
 web page looks the same each time it is accessed
 in order to develop interactive/reactive pages, must integrate
programming in some form or another
Advantages of HTML
 Browser Compatibility
 Web browsers like Chrome, Firefox, Safari, and Internet Explorer
obey HTML standards so that their web pages look the same on
all different platforms.
 Cost-Efficient
 Developers don’t need to purchase licenses or additional
software to create HTML content.
 Easy to Learn
 HTML is easy to use and understand.
 Flexibility
 HTML’s loose syntax grants developers flexibility.
 Speed and Efficiency
 Data Storage
 HTML extends its capabilities to data storage with technologies
like XML.
Disadvantages of HTML
 Static Nature
 HTML is a static language. It defines the structure and
presentation of web content but cannot produce dynamic
interactions by itself.
 Complexity in Structure
 Creating and maintaining the structure of HTML documents is
complex, mainly for large-scale projects.
 Limited Security
 HTML alone does not provide strong security features. It can’t
protect against various web weaknesses, like cross-site scripting
(XSS) or SQL injection. These security weaknesses can lead to
data hacking.
 Code Length
 Creating a simple webpage using pure HTML can result in many
lines of code.
Wireless Markup Language
(WML)
 Markup language for WAP browsers
 WAP = Wireless Application Protocol
 Based on limited HTML, uses XML notation
 Uses WMLScript scripting language, based on
JavaScript
 WML is applied for wireless devices i.e. cellular
phones, PDAs.
 A page is called a “deck”, displayed in individual
sections called “cards”
 Tasks are used to perform events
 Variables used to maintain state between cards
Advantages and Disadvantages
of WML
 WML is very easy to use and understand.
 Requires less bandwidth for transmission of
WML documents.
 Displaying WML documents requires less
processing power.
 It supports limited graphics with limited gray
scale.
Client-side: Cascading
Style Sheets
Why CSS?
 HTML was not meant to support styling
information
 But browsers started supporting inline style
changes to make web look better
 Inline styling information is problematic
 Difficult to change
 Lack of consistency
 No support for different display formats
 No support for some styling features
Connecting HTML to CSS
 HTML document typically refers to external
style sheet
<HEAD>
<LINK rel="stylesheet" type="text/css“
href="fluorescent.css">
</HEAD>
 Style sheets can be embedded:
<HEAD><STYLE type="text/css">
<!-- …CSS DEFINITIONS.. -->
</STYLE></HEAD>
 Styles can be embedded inline with the style attribute
 Style sheets can be chosen by media type
 HTML document can provide several stylesheet options
Cascading
 Most properties are inherited
 From enclosing element to internal element
 Sort order for conflict resolution:
 Origin (page>user>browser)
How is CSS applied?
1. Source document is parsed into a
Document Object Model (DOM) tree
2. Media type is identified
3. Relevant stylesheets obtained
4. DOM tree annotated with values to every
property
5. Formatting structure generated
6. Formatting structure presented (rendered)
CSS2
 Extends CSS1
 Many new properties and built-in classes
 Better support for media types
 Stylesheet can specify type in selector
 Better support for accessibility
 Better support for internationalization
Document Formats:
XML
XML, DOM, DTD,
XML-SCHEMA, XSL, XMLFO
XML
 Extensible Markup Language
 Based on Standard Generalized Markup Language
(SGML) format
 Intended to facilitate data exchange
 Documents consist of tags and data
 Data is usually untyped characters
 Tags have names and attributes
 Document has tree structure
 Tags are nested <?xml version="1.0"?>
<person>
 Data areas are <name type=“full”>John Doe</name>
considered leafs <tel type=“home”>412-555-4444</tel>
<tel type=“work”>412-268-5555</tel>
 One root <email>[email protected]</email>
</person>
XML Structure
 XML documents have no semantics
 It is up to the programs using them
 XML does not enforce structure
 No restriction on possible tags
 No restriction on order, repeats, etc.
 Mixed content allowed
 Text followed by tags followed by text
 Allows HTML compatibility (XHTML)

 “Well-Formed Document”
 Tree structure with proper nesting
 Attributes are not repeated in same tag
Document Object Model (DOM)
 When a web page is loaded, the browser creates
a Document Object Model of the page.
 DOM is a programming interface for web (Web APIs)
documents.
 It represents the page so that programs can change the
document structure, style, and content.
 The DOM represents the document as nodes and
objects; that way, programming languages can interact
with the page.
HTML DOM Node Tree
XML Programming with DOM
 XML DOM is a standard object model for XML.
 XML documents have a hierarchy of informational
units called nodes;
 DOM is a standard programming interface of
describing those nodes and the relationships between
them.
 XML DOM also provides an API that allows a
developer to add, edit, move or remove nodes at
any point on the tree in order to create an
application.
Advantages of XML DOM
 XML DOM is language and platform
independent.
 XML DOM is traversable
 Information in XML DOM is organized in a hierarchy
which allows developer to navigate around the
hierarchy looking for specific information.
 XML DOM is modifiable
 It is dynamic in nature providing the developer a
scope to add, edit, move or remove nodes at any
point on the tree.
DTD
 A document type definition (DTD) provides you with the
means to validate XML files against a set of rules.
 When you create a DTD file, you can specify rules that control
the structure of any XML files that reference the DTD file.
 A DTD can contain declarations that define elements,
attributes, notations, and entities for any XML files that
reference the DTD file.
 Usually placed in separate file
 XML refers to HTML file using following header:
 <!DOCTYPE root-element SYSTEM
"filename">
 DTD can be placed inline
 An XML document is Valid if it conforms to the DTD
Limitations of DTD
 DTD is weaker than database schemas
 DTD does not have XML syntax and offers only
limited support for types or name spaces
 No abstractions such as sets
 DTD provides very limited support for modularity,
reuse, and evolution of schemas.
 No constraints
 XML-Schema provides these capabilities
 Important for e-commerce
XML-Schema
 Replacement for DTDs
 Written in XML
 More extensible to future additions
 Support built-in and user-defined data types
 Including typed references and complex data
types
 Support constraints
XML-Schema
 <xs:schema> header has following attributes:
 Namespace for XML Schema built-in tags
 xmlns:xs="http://www.w3.org/2001/XMLSchema"
 Namespace for elements defined by schema
 targetNamespace=“http://www.uridekel.com”
 Default namespace
 xmlns=“http://www.uridekel.com”
 Whether documents must use qualified names
 elementFormDefault="qualified"
 XML file refers to schema :
 <note xmlns="http://www.uridekel.com"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=http://www.uridekel.com/pers.xsd>
Advantages of XML-Schema
 It is easier to describe allowable document
content.
 It is easier to validate the correctness of data.
 It is easier to define data facets (restrictions on
data)
 It is easier to define data patterns (data formats)
 It is easier to convert data between different data
types.
XSL
 Extensible Stylesheet Language
 Intended to assist in presenting XML data
 CSS is not enough because it refers to HTML tags that
have some display semantics
 Responsible for transforming an XML document into an
XHTML document
 Consists of three languages:
 XSLT for transforming XML documents
 XPath for defining parts of XML documents
 XSL-FO for formatting the elements
XSLT
 XSL (eXtensible Stylesheet Language) is a
styling language for XML.

 XSLT stands for XSL Transformations.

 XSLT is most often used to convert data


between different XML schemas or to convert
XML data into web pages or PDF documents.
Activating XSL
 Include <?xml-stylesheet directive in XML
 XML can be displayed in browser
 Couples data and presentation
 Use offline XSLT transformator
 Typically useful for data processing
 Programmatically perform transformation in HTML
file using scripting <html><body>
<script type="text/javascript">
xml = new ActiveXObject("Microsoft.XMLDOM")
xml.load("cdcatalog.xml")
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.load("cdcatalog.xsl")
document.write(xml.transformNode(xsl))
</script> </body> </html>
XPath
 A system for referring to XML tree elements
 Used in XSLT for matching templates
 Similar to directory structure
 Absolute paths start with /
 Relative paths starts start with child name
 Parent is selected with ..
 Ignore ancestors with //
 e.g., //cd selects all cd elements
 Variety of special functions
XML-FO
 Extensible Stylesheet Language Formatting
Objects
 A W3C language for formatting XML data
 XSL-FO (XSL Formatting Objects) is a markup
language for XML document formatting that is
most often used to generate PDF files.
 XSL-FO is part of XSL (Extensible Stylesheet
Language), a set of W3C technologies designed
for the transformation and formatting of XML
data.
XQuery
 A standard for SQL-like queries on XML data
 Still at the W3C draft stage
 Relies on XPath and uses its data model
 Supports simple queries:
 e.g., doc("books.xml")/bib/book[price<50]
 Supports complex queries with FLWOR:
 e.g., for $x in doc("books.xml")/bib/book
where $x/price>50 order by $x/title return
$x/title
XForms
 A new infrastructure for web forms
 XForms is an XML format used for collecting inputs from
web forms
 XForms was designed to be the next generation of
HTML/XHTML forms, but is generic
 In contrast to the original web forms (originally defined in
HTML), the creators of XForms have used a model-view-
controller (MVC) approach.
 Separates form functionality from presentation
Document Format:
Vector and 3D Graphics
VRML, X3D, SVG
Virtual Reality Modeling
Language (VRML)
 Is an open-standard programming language used to
create 3D interactive scenes and objects for the web.
 It was created in the 1990s as a way to represent virtual
reality environments in a standard format that could be
easily shared and viewed over the internet.
 It is very similar to Hypertext Markup Language (HTML).
 VRML files contain information about the geometry,
appearance, and behavior of 3D objects and can include
textures, colors, animations, and interactivity.
 VRML scenes can be viewed using a VRML browser
plug-in or a standalone VRML viewer.
X3D
 X3D (Extensible 3D) is a set of royalty-free ISO/IEC
standards for declaratively representing 3D
computer graphics.
 Successor of VRML
 Developed by Web3D consortium
 XML based
 X3D includes multiple graphics file formats,
programming-language API definitions, and run-time
specifications for both delivery and integration of
interactive network-capable 3D data.
Scalable Vector Graphics
(SVG)
 Scalable Vector Graphics (SVG) is an image format
based on XML, a language used to store and transport
data.
 Allow for the creation of two-dimensional graphics that
can be interactively animated.
 Standard for 2D graphics and applications
 W3C XML based standard
 Requires browser plug-in to view
Client Side:
Scripting Languages
JavaScript, JSON, VBScript,
DHTML
Client-Side Scripting

 Programs are written in a separate programming (or


scripting) language
e.g., JavaScript, JScript, VBScript
 Programs are embedded in the HTML of a Web page,
with (HTML) tags to identify the program component
e.g., <script type="text/javascript"> … </script>
 The browser executes the program as it loads the
page, integrating the dynamic output of the program
with the static content of HTML
 Could also allow the user (client) to input information
and process it, might be used to validate input before
it’s submitted to a remote server
Client-Side Scripting
 A scripting language is a simple, interpreted programming
language:
 scripts are embedded as plain text, interpreted by
application
 simpler execution model: don't need compiler or
development environment
 saves bandwidth: source code is downloaded, not
compiled executable
 platform-independence: code interpreted by any script-
enabled browser
 but: slower than compiled code, not as powerful/full-
featured
Limitations of Client-Side
Scripting
 Since script code is embedded in the page, it is
viewable to the world

 For security reasons, scripts are limited in what they


can do
e.g., can't access the client's hard drive

 Since they are designed to run on any machine


platform, scripts do not contain platform specific
commands

 Script languages are not full-featured


e.g., JavaScript objects are very crude, not good for
large project development
JavaScript
 The most common scripting language
 Originally supported by Netscape, eventually by IE
 Typically embedded in HTML page
 Executable computer code within the HTML content
 Interpreted at runtime on the client side
 Can be used to dynamically manipulate an HTML
document
 Has access to the document’s object model
 Can react to events
 Can be used to dynamically place data
 Often used to validate form data
 Weak typing
JavaScript Syntax
 Code written within <script> element
 e.g., <script type="text/javascript">
document.write("Hello World!")
</script>
 Use src attribute for scripts in external files
 Placement determines execution time
 Scripts in header must be invoked explicitly
 e.g., during events
 Scripts in body executed when that part is being
processed.
JavaScript Syntax
 User can declare variables
 e.g., var name = “user”;
 Variables can be global to the page
 User can declare functions
 function func(argument1,argument2,…)
{ some statements }
 Function can return values with return
 Standard conditionals
 if..then..else, switch, ?: operator
 Standard loops
 while, do..while, for
JavaScript Syntax
 JavaScript has built-in “Object” types
 Variety of operators and built-in functions
 Arrays, Booleans, Dates, Math, Strings
 Direct access to the HTML DOM model
JavaScript Object Notation
(JSON)
 A common use of JSON is to read data from a web
server, and display the data in a web page.
 JSON stands for JavaScript Object Notation.
 JSON is lightweight data-interchange format.
 JSON is easy to read and write than XML.
 JSON is language independent.
 JSON supports array, object, string, number and
values.
VBScript
 Microsoft’s answer to JavaScript
 Never been supported by Netscape
 Less in use now
 Use <script type="text/vbscript">
 Similar to JavaScript
 Follows Visual Basic look and feel
 Possible to declare variables
 Separates procedures and functions
Dynamic HTML (DHTML)
 is a web-development technique combining HTML, CSS,
and JavaScript to create dynamic, interactive web pages
and complex web applications.
 It uses the Document Object Model (DOM) to manipulate
content spontaneously and respond to user interactions
in real time without reloading the entire page
 DHTML is a marketing buzzword
 It is not a W3C standard
Client Side: Embedding
Interactive Content
Java Applets, ActiveX controls,
ASP.NET controls
Java Applets
 Precompiled Java programs which can run
independently within a browser
 Main applet class inherits from
java.applet.Applet
 Can be included in an HTML page, much in the same
way an image is included in a page.
 Run by the browser's Java virtual machine.
 The HTML document contains tags, which specify the
name of the Java applet and its Uniform Resource
Locator (URL).
 These Java applets are what enable Web pages to
contain animated graphics or interactive content.
Java Applets
 Applet API facilitates browser-related tasks
 Obtain parameters from the <APPLET> tag
 Load files relative to the applet or page URL
 Setting status messages on the browser
 Interact with other applets on the page
 Make the browser display a document.
 Play sounds.
ActiveX Controls
 An ActiveX control is a small program that other
applications can reuse to enable the applications to
perform specific functions, such as displaying a calendar
or playing a video., without the extra development work.
 ActiveX adds web-related features
 Security
 Digital signatures and licensing
 Many limitations
 Works only in Microsoft browsers
 Numerous security holes
 Very difficult to develop in C++
 Simple in visual basic, but not as powerful
 More component and UI oriented than Java applets
ASP.NET Controls
 The equivalents of ActiveX controls in the Microsoft .NET
Framework
 ASP.NET provides web forms controls that are used to
create HTML components.
 Categories as server and client based.
 ASP.NET uses five types of web controls, which are:
 HTML controls
 HTML Server controls
 ASP.NET Server controls
 ASP.NET Ajax Server controls
 User controls and custom controls

You might also like