Identification of major technologies and protocols involved in the client-side of a web application
a) the protocol used to request a web page from a web server;
We will simply the working of the web to answer this question (a).
Client computer needs an application layer software packet called web browser (client software) and the web server also needs an application layer software packet called a web server(server software). uniform resource locator URL is used for the page the end user wants, either by typing or clicking the URL for the page needed.
The URL specifies the internet address of the web server and the directory and name of the specific page wanted. If no directory or page are specified the web server will provide whatever page has been defined as the site's home page. A URL contains the protocol used, the host name of the Web server, the network name and the path & filename of the requested file. The Web Server will provide the site's home page If no directory or page are specified
For the requests from the web browser to be understood by the web server, they must use the same standard protocol or language. If there were no standard and each web browser used a different protocol to request pages, then it would be impossible for the Microsoft web browser to communicate with a web server. e.g.
The hyper text transfer protocol HTTP is a standard protocol is used by browsers and Web servers for communication. To get a page from a web server, the web browser issues a special packet called an http request that contains the URL and other information about the web page requested (fig 2.9). once the server receives the http request, it processes it and sends back the http response, which will be the requested page or an error message
Client generates HTTP request
Server processes request
%Pages are static files, stored on web server
%Web server reads file from file system
_ HTML page returned to client
Access web pages over secure connection
_ URI begins with https not http
_ HTTP connections carried out over port 80 by default
_ HTTPS uses port 443 by default over an encrypted transmission channel
_ HTTPS messages are still HTTP, but encrypted
_ During connection client receives server's certificate, authenticates it, and then uses it to encrypt and decrypt requests and response
HTTP is insecure and vulnerable to eavesdropping
+Transmissions are sent unencrypted
+Requests/responses are plaintext and human-readable
_ HTTPS = HTTP + encryption
_ Requires 'signed' certificate issued by authoritative source
+Costs vary £9 - £900 / yr
_ Why is it necessary?
+Sensitive website areas
+Customer trust
HTTP is the foundation protocol of the World Wide Web. It is simple, which is both a limitation and a source of strength. Many people in the industry criticized HTTP for its lack of state support and limited functionality, but HTTP took the world by storm while more advanced and sophisticated protocols never realized their potential.
HTTP is an application level protocol in the TCP/IP protocol suite, using TCP as the underlying Transport Layer protocol for transmitting messages. The fundamental things worth knowing about the HTTP protocol and the structure of HTTP messages are:
The HTTP protocol uses the request/response paradigm, meaning that an HTTP client program sends an HTTP request message to an HTTP server, which returns an HTTP response message.
2. The structure of request and response messages is similar to that of e-mail messages; they consist of a group of lines containing message headers, followed by a blank line, followed by a message body.
3. HTTP is a stateless protocol, meaning that it has no explicit support for the notion of state. An HTTP transaction consists of a single request from a client to a server, followed by a single response from the server back to the client.
HOW A URL IS STRUCTUREDPorts are used to address particular software or services running on a computer. Common port assignments are port 80 for HTTP (Web browser requests), Earlier in the chapter you saw that a Web browser requests a Web page by sending an IP address followed by an optional port number. This works well on an intranet, but on the Internet, a more user-friendly address is preferred. That user-friendly address is a URL (Uniform Resource Locator), which is an address for a Web page or other resource on the Internet. Figure 18-49 shows the structure of a URL.
The first part of the URL shown in Figure 18-49 indicates the protocol, which in this case is HTTP. The protocol part of the URL specifies the rules, or protocol, the Web server should use when transmitting the page to the browser. A Web server is sometimes called an HTTP server.
HTTP REQUEST methodsHTTP response methodsMore book information
Title |
Business Data Communications and Networking |
Authors |
Jerry FitzGerald, Alan Dennis |
Edition |
10 |
Publisher |
John Wiley and Sons, 2008 965 |
Title |
A+ Guide to Managing And Maintaining Your PC |
Author |
Jean Andrews |
Edition |
6, illustrated |
Publisher |
Cengage Learning, 2006 page 49 |
The HTML language is used to build and interpret Web pages.
Minimum required hardware A+ BOOK 535
HTML is a language for describing web pages.
* HTML stands for Hyper Text Markup Language
* HTML is not a programming language, it is a markup language
* A markup language is a set of markup tags
* HTML uses markup tags to describe web pages
HTML, which stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content. It can include or can load scripts in languages such as javascript which affect the behavior of HTML processors like Web browsers; and Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit
HTML markup tags are usually called HTML tags
* HTML tags are keywords surrounded by angle brackets like
* HTML tags normally come in pairs like and
* The first tag in a pair is the start tag, the second tag is the end tag
* Start and end tags are also called opening tags and closing tags
http://www.w3schools.com/html/html_intro.asp
HTML documents basically contain the following three elements:✦ Text that you're working with
✦ Tags that determine document elements, such as headings, lists, and paragraphs
✦ Tags that insert effects, such as bold or italics, or that insert other objects, such as images, style sheets, sounds, little programs called applets, and movies
✦ The first tag (the opening tag) indicates the beginning of a tag that you're applying to some of the text in your document.
✦ The second tag (the closing tag) indicates the end of a tag that you're applying to some text in your document.
INTERNET FOR DUMMIESc) the principal language used to control the presentation styles of a web page;What is CSS?* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save a lot of work
* External Style Sheets are stored in CSS files
http://www.w3schools.com/css/css_intro.asp
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
http://en.wikipedia.org/wiki/CSS
CSS SyntaxA CSS rule has two main parts: a selector, and one or more declarations:
Why style sheets?* separate style from content
* quicker downloads
* device-independent document formats
* accessibility
http://www.w3c.rl.ac.uk/pastevents/RSA98/Hakon/19981208-rsa/slide2-1.htmlAdopting styles
_Separates structure/content and presentation
• Improves readability
• Easier to maintain
• Easier to change appearance
_Consistency across multiple pages
• The same style sheet can be applied to the whole web site
_Adaptive presentation
• The same web page can have different styles for different mediums
• Screen
• Printer
• Handheld
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
The id SelectorThe id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
Example |
#para1 { text-align:center; color:red } |
Try it yourself »
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class SelectorThe class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
Example |
.center {text-align:center} |
Try it yourself »
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
Example |
p.center {text-align:center} |
Try it yourself »
Do NOT start a class name with a number! This is only supported in Internet Explorer.
Three Ways to Insert CSSThere are three ways of inserting a style sheet:
* External style sheet
* Internal style sheet
* Inline style
External Style SheetAn external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} |
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera
d) the model used by web browsers as an abstract representation of a web page, and how this can be manipulated in a web browser.Provide a brief description for each technology.
HTML Documents = Web Pages* HTML documents describe web pages
* HTML documents contain HTML tags and plain text
* HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
My test page
This is my first page.
- Line one
- Line two
- Line three
.................
. . .all the stuff about making water balloons
will go here eventually. . .
HTML Tag Purpose Use in Pairs?
"-//W3C//DTD HTML4.01 document and specifies the HTML
Frameset//EN" "http:// version; mandatory in all HTML
www.w3.org/TR/html4/ documents
frameset.dtd">
. . . Defines a document as an HTML document
. . . Includes introductory information about the documentdocument
description of a document
. . . Encloses all elements within Document Manipulationn HTML, CSS and the Document Object Model (DOM), with program scripts, can control the appearance of a web page
n DOM is a specification of how the HTML page is structured
â-º Used by the web browser to dictate the presentation of elements on the screen
n DOM can be manipulated by a client-side script
â-º Modifications are reflected by the page's display in the browser
n Combined with user-generated events (keyboard and mouse events) web pages can be updated dynamically to provide a more interactive experience
HTML DOM Tree ExampleMarkup to Trees
n Browsers build a DOM tree from the HTML code
â-º Scripting code never works on the HTML code directly, it works on the tree
n DOM tree specifies additional attributes, such as styles
n DOM trees are an abstraction of the HTML code
â-º Trees provide convenient navigation facilities
â-º Abstractions provide an insulation from irrelevant markup details
n DOM is available in a large number of programming languages
â-º javascript is the language supported by web browsers
â-º Other languages (but not for web browsers) are Java, C/C++, Python, Perl, Ruby, ...
Example DOM
n HTML is based on a tree model
â-º There is one root element
â-º Elements may contain other elements:
orâ-º Element structures can be nested as deep as required
â-º Elements may contain text
â-º Elements may contain text mixed with elements
â-º Elements may have attributes
n Web pages many not necessarily be syntactically correct
â-º Basic markup errors: no tree
n Browsers do their best to interpret everything correctly
â-º Fixing errors is based on assumptions and thus risky
n Browsers build a DOM tree from the HTML code
â-º Scripting code never works on the HTML code directly, it works on the tree
n DOM tree specifies additional attributes, such as styles
n DOM trees are an abstraction of the HTML code
â-º Trees provide convenient navigation facilities
â-º Abstractions provide an insulation from irrelevant markup details
n DOM is available in a large number of programming languages
â-º javascript is the language supported by web browsers
â-º Other languages (but not for web browsers) are Java, C/C++, Python, Perl, Ruby, ...
n A web page can be controlled and updated dynamically
n DOM is the abstract data model for scripting code
n javascript interacts with users through DOM events
2. Describe how web application frameworks can be used to create interactive web applications. Mention two frameworks and provide a short description of each.web application framework is a software framework that is designed to support the developmentof dynamic websites, Web applications and Web services. The framework aims to alleviate the overhead associated with common activities performed in Web development. For example, many frameworks provide libraries for databaseaccess, templatingframeworks and sessionmanagement, and often promote code reuse.
Web application frameworks
Mediate between web application and web server, typically via web server APIs
_ Provide framework for developing web applications
_ Typically, applications use 'scripts' which are interpreted by the framework, before being processed
%Scripts are typically embedded within HTML code
_ Examples%ASP(.NET) , ColdFusion, JavaServer Pages, PHP, Ruby on Rails
_ Most common approach for building dynamic web sites /applications
Ruby on RailsAn open source web application framework that is frequently used in Web 2.0 website development.
AJAX(Asynchronous javascript and XML) A combination of technologies that enables highly interactive web applications.
wki further goes on to list some key features that may be found in Web Application Frameworks:
* Security - Providing user logins and access levels
* Database access and mapping - Easy access methods that abstract out database access to higher level functions
* URL mapping - Allows replacing complex URLs with query strings with cleaner looking URLs that are parsed in the framework
* Web template system - Allows for different data sets to reuse templates
* Caching - Can speed up generation or loading times by caching frequently requested data
* AJAX - Frameworks to make working with AJAX easier can be packaged as part of the Web Application Framework
* Automatic configuration - Can store/retrieve data objects to/from the database
* Web services - Offers an externally-usable API for machine to machine communication
3. A UK based theatre company is looking to create a web site to provide information about their shows and have a ticket booking system.- Why is it important that they consider the needs of users with disabilities?
- Discuss two strategies, which could be employed by the theatre company, to ensure their web site is accessible.
Accessibility is designing a web page to be easily understood, navigated, and interacted with by all users
_ In general, accessibility relates to how the design of the website takes into account users with disabilities
_ The Disability Discrimination Act (UK)
+"Unlawful for a service provide to discriminate against a disabled person by refusing to provide any service which it provides to members of the public."
+A service provider has to take reasonable steps to make it reasonably easy for disabled people to make use of its services.
+Example: An airline company that provides a flight reservation and booking service to the public on its website is a provision of a service and is subject to the act.
Accessibility StrategiesProvide style-sheets to allow user to disable them
_ Provide multiple style-sheets and allow user to pick/choose a style which suits them
_ Alt tags on images to give description of important visual aspects
_ Ensuring tables have strictly defined column and row headers
_ Provide accessibility keys on strategic HTML elements (accessKey) attribute
+Pressing the defined key gives the element focus; if the element is a link, the link will be followed; if the element is a form field, it will be selected.
Article name: Identification of major technologies and protocols involved in the client-side of a web application essay, research paper, dissertation