slide 1 ee417: web application development lecturer: david molloy time: mondays 10am-1pm notes:...

EE417: Web Application Development

Lecturer: David Molloy

Time: Mondays 10am-1pm

Notes: http://ee417.eeng.dcu.ie

Mailing List: [email protected]

List URL: http://list.dcu.ie/mailman/listinfo.cgi/ee417

http://ee417.eeng.dcu.ie/

mailto:[email protected]

Background Technologies

• What happens when we view a webpage?

•Apache Demonstration – Note re firewalls and demo

• Hypertext Transfer Protocol (HTTP) – protocol between web browsers and servers

• Simple, information passed as plain text via TCP

• Telnet HTTP Demonstration - Connect and send a HTTP Request

- GET /index.html HTTP/1.0- Web Server returns requested page- If Browser used, page interpreted graphically- Can use HEAD instead of GET for response headers

• HTTP 1.0 is simple and stateless protocol

• Client makes a request, server responds -> quick simple transaction

• Connection made for every object to be downloaded

• Wasteful of resources – packet overhead involved in getting pages with many separate parts

-> HTTP Version 1.1

HTTP Version 1.0

• HTTP/1.1 defined by W3C to address a number of issues with HTTP/1.0

• Basic operation remains the same and clients/servers are backwards compatible

• HTTP/1.1 defines persistent connections

• Numerous documents downloaded over one connection

• HTTP/1.1 persistent connections default unless otherwise specified

HEAD /index.html HTTP/1.1 Host: www.eeng.dcu.ie

• New features on proxies and caching

HTTP Version 1.1

Method Types• Clients send requests as one of a number of different types

• GET Method – used for retriveing information from the server. Can include additional information, describing what it wishes to obtain

http://www.server.com/scripts/phonesearch

http://www.server.com/scripts/phonesearch?name=Molloy

Example: DCU phone search

• POST Method – uses different technique for transferring data. Used for sending large quantities of information, for which GET is unsuitable URL remains the same always, not bookmarkable/emailed/reloaded

http://www.server.com/scripts/dologin

Example: demonstrate divvy login

• HEAD Method – acts like a GET with a blank page, sends response headers

http://www.server.com/scripts/phonesearch

http://www.server.com/scripts/phonesearch?name=Molloy

http://www.server.com/scripts/dologin

Method Types

• Remaining method types not commonly used

• PUT Method – used for placing documents on the server

• DELETE Method – used for deleting documents from the server

• TRACE Method – used for debugging (returns request contents)

• OPTIONS Method – used to ask server which methods it supports etc.

Hypertext Markup Language

• Time to get Practical!

• What are HTML documents?

• URLs (Universal Resource Locator): http://www.server.com/path/file.html

• Development using WYSIWYG (What you see is what you get) tools

• Uploading to the Web Server (FTP, Samba, Local etc.)

• Basic Example

• Writing HTML manually – the proper way!

• <HTML>, <HEAD>, <TITLE>, <BODY>, <BR>, <P>, <H1>, <FONT>, <B>, <I>, <A>, <UL>, <LI>, <PRE>, <IMG>, <TABLE>, <TR>, <TD>

• Attributes

• World Wide Web Consortium (W3C)

• XHTML is a reformulation of HTML into an XML format

• Features

- Much stricter and less forgiving format- Case sensitive on all tags and attributes- XHTML must be well formed

• Examples of well-formed and invalid XHTML in notes

• Number of advantages for us when working with JavaScript, Ajax, DOM, JQuery etc.

• We will use XHTML type tags in module

HTML vs XHTML

XHTML

• XHTML longer example with many elements

• Addition of XML tags to make validatable XML

• W3C XHTML Validator

• Mostly when we will write XHTML we will ignore first lines for simplicity

• W3Schools TryIT HTML Editor

• Practice, practice, practice!

Slide 10

XHTML/HTML Accessibility

• Designing web pages so as to make websites users to individuals of all abilities and disabilities

• “alt” attribute in <img> elements for example

• WCAG (Web Content Accessibility Guidelines) 1.0 Published in 1999 by the W3C. Version 2.0 in 2008

• Ethical & Moral Responsibility .... Legal responsibility?

• Disability Act 2005 in Ireland

• "Where a public body communicates in electronic form with one or more persons, the head of the body shall ensure, that as far as practicable, the contents of the communication are accessible to persons with a visual impairment to whom adaptive technology is available.“

• Web Accessibility Checkers – common sense also needed!

Slide 11

HTML5

• Under development, not yet standardized by the W3C

• HTML4.01 current release – not updated since 2000

• Original estimates for HTML5 was 2010. Candidate recommendation status not yet even reached.

• For the web you would expect faster specification standardisation

• Many big players in the web game – ALOT of money!

• Many browser companies already implementing features of HTML5 likely to make it into final specifications... Eg. Canvas element usable in Chrome, Safari, Opera and Firefox for a number of years

• Markup – range of new elements: <video>, <audio>, <footer>, <nav> <canvas> etc. Others removed such as <font>, <center>

• Drawing on the page: <canvas> - See examples

• Video and Audio: HTML5 browsers to come with built in media player (possible to style using CSS) to play agreed formats

• Application Front-end: Any number of front ends possible through <canvas> element. However, new standard form controls added too

• Offline Storage Database: similar to cookies but with far more data. Enables offline web applications

• <datagrid> for tabular data but allowing sorting, row selection etc.

• Drag and drop – elements on pages or files from desktop/harddrive

• Inline document editing... these notes!

• ... Many other features

HTML5 Features/Additions

Cascading StyleSheets (CSS)

• Introduced in late 1996, W3C Recommendation

• More sophisticated page design

• Improves web page accessibility

• Separation of content from appearance (to a point)

• W3C Recommendations: Cascading Style Sheets 1 (CSS1) and CSS2 CSS3 under development

• CSS2 incorporates and extends CSS1

• Why was CSS technology not more popular on release: - Traditional Browser Incompatibility (Netscape 4.0+, IE3+, slow initial uptake)

- Varying support currently- Designer knowledge


• Content from Appearance – important basic principle

• Style Benefits – larger array of layout and presentation options, not in HTML

• Single Style File – one file describing layout for entire site


• <link rel=“stylesheet” type=“text/css” href=“filename.css” /> between <HEAD> tags

• B { font-family: Verdana, Geneva, Helvetica; font-weight: normal; font-style: normal; font-size: 14pt; color: blue; background: red; text-decoration: none; }

• a:LINK, a:VISITED

• @media screen { /* hide from non supported browsers */ a:hover }

CSS Structures• CSS file handles style and layout, HTML file handles content

• CSS files are made up of rules

• Rules are made up of two parts: selector (e.g. ‘H1’) and declaration (e.g. font-family etc.)

• Declaration split up into a number of name-value pairs (properties)

• Inheritance: <H1>A Really <B>Ugly Web</B> Page</H1>

• If we define two style entries in the CSS file, Ugly Web inherits all of the properties of H1, but will override with its own definitions

• To increase granularity of control over elements, we introduce the class attribute. Example. B.BLUE inherits properties from B

• Not only can we make style changes, but we can layout entire sites

• Two main elements to help us with layout in CSS

• <div> - can apply styles to whole sections of HTML elements

attributes are style, class and id

<h2>Div Example</h2><p>Some text before the div we are demonstrating...<div id="news_section" style="font-size:8pt" class="news">

Today in the news were a number of startling revelations...</div>Some text after the div we are demonstrating....</p>

• In a corresponding CSS file: div.news { font-family: Arial, Verdana; color: black; background: #eeeeee; margin:20px; padding:10px; }

CSS for Layout

• <span> - works very similarly to <div> but does not apply any formatting of it’s own. <div> effectively adds new lines before and after itself

• This means that <span> can be used inline inside elements like paragraphs without affecting the flow of the paragraph.

• See div_span_example.html

CSS for Layout

• block – these are elements such as <div> or <p>. They start their content on a new line and end on a new line. They can contain other block or inline elements. Eg. <p>Some of <b>this is bold</b></p>

• inline – these are elements such as <span>,<i> or <b>. They define style but do not cause any extra formatting or new lines.They typically only ever contain other inline elements or text.

One can set widths and heights for block elements, but not for inline.

Two types of element

• Traditionally pages were used to create layouts such as columns

• Bad practice as tables were originally intended for tabular data

• We can use <div> tag for layout. Defaults to 100% width.

• We are able to set widths and heights

- in units- as a percentage of available space

• columns_example.html in notes - this is a fixed width example

• What should a fixed width be in a webpage? 800, 1000, 1200?

• float property tells the browser to position a block element to the left or right of an existing element (if there is space)

• What happens if we make a column wider, introduce padding, borders?

Creating Page Structures

http://elm.eeng.dcu.ie/~davidm/courses/ee417/examples/client-side/columns_example.html

• Look at the next example: columns_2_example.html

• We made a new div class ‘paddedcontent’ to stop content from being on top of itself. Note: We did not pad the columns – why not?

Creating Page Structures

• All HTML ‘block’ elements follow the box model with 5 spacing props:

• width• height• margin• border• padding

The Box Model

http://elm.eeng.dcu.ie/~davidm/courses/ee417/examples/client-side/columns_2_example.html

The Box Model

• Default margins, borders and padding for block-level elements are all set to 0.

• Default widths for block-level elements are 100%.

• Default heights rely entirely on the contents of that element, although specific heights may be set

• See box_model_example.html

The Box Model

http://elm.eeng.dcu.ie/~davidm/courses/ee417/examples/client-side/box_model_example.html

HTML Forms

• Client front-end to our server-side applications

• Exist on the client side, interpreted within the browser

• Typically require a server-side application to make them useful

• HTML forms contain normal content, markup and special elements called controls and their labels

• Control’s “control name” is given by its name attribute

• <FORM METHOD=“POST” ACTION=“http://…../formhandler” NAME= “myform”>

• <INPUT TYPE=“submit” VALUE=“Submit Query”>

• Work through the form_example.html

http://elm.eeng.dcu.ie/~davidm/courses/ee417/examples/client-side/form_example.html

Document Object Model (DOM)

• Allows us to programmatically access and manipulate a web page or XML page

• Provides an object-oriented representation of the elements and content of a page combined with methods for setting and retrieving elements and data

• DOM provides us with an API (Application Programming Interface) we can use to do this

• Standardised by the W3C • DOM1 Recommendation 1998• DOM2 Recommendation 2000• DOM3 Recommendation 2004• Supported in all modern browsers

DOM Document Tree

• Forms a hierarchical representation of the contents of that page

• All content and elements represented as nodes

DOM Document Tree

Node Type Description Typical Children*

Document(NodeA)

Represents the entire document. The root-node of the DOM tree structure.

Element (max one), DocumentType, Comment, Others*

DocumentType(NodeA1)

Provides access to the attributes of the Document Type Definition (DTD). More on this later in course.

None

Element(e.g NodeA2)

Represents an element

Element, Attributes, Text, Comment, others*

Attribute(e.g NodeA2c)

Represents an attribute Text

Text(e.g NodeA2d)

Typically the textual content of an attribute or element

None

Node Properties

• Node.firstChild • Node.lastChild• Node.childNodes : 0-indexed array of child nodes

• e.g. Node.childNodes[0]

• Node.parentNode• Node.nextSibling• Node.prevSibling

• Discuss navigating around the structure using these properties

• Other methods for modifying the DOM structure• Node.removeChild()• Node.appendChild()• Node.replaceChild()• Node.closeNode()• Node.insertBefore()

Whitespace Issue

• Consider the following example and let us call the <div> NodeA:

<div> <p>A paragraph <b>with bold </b> and normal text</p></div>

• Appears to have one child node: NodeA.childNodes.length value of 1

• Actually has three childNodes

• Whitespace sections are considered to be Nodes also

<div> NodeA1 <p>A paragraph <b>with bold </b> and normal text</p> NodeA3 </div>

Sample Tree Structure Question

• Consider <html> as Node1 in the following document:

<html><head><title>My Page</title></head><body>

<h1>My First Heading</h1>

<p>My first paragraph which containssome <b>bold</b> and some <i>italics</i></p>.....

• What is Node1.firstChild?• How would we reference the <body> element?• How would we reference the text ‘ and some ‘ ?

WARNING: Don’t forget whitespace!

HTML, XHTML and DOM

• Previously mentioned how XHTML needs to be well-formed• Even though HTML is forgiving in the browser it often breaks DOM• Well-formed XHTML can always have a proper DOM representation

<P>This is a paragraph with some <b>bolded and <i>italicised text</b></i><p>This is the next paragraph.

Vs

<p>This is a paragraph with some <b>bolded and <i>italicised text</i></b></p><p>This is the next paragraph.</p>

• Paste both of these into W3CSchools TryIt editor

• Why is there a problem? Calling <P> Node1, what is Node1.childNodes[1] and Node1.childNodes[1].firstChild?

Document.getElementById()• For working later with XHTML and JavaScript and DOM we need practical referencing within our code

• document.firstChild.childNodes[3].firstChild.childNodes[4].lastSibling...

• Not practical to use, particular where a document is regularly changing or being modified by Ajax (later!)

• document.getElementById(“ident”) provides us with an easy means of obtaining a reference to any Node with an id attribute

• document.getElementById(“firstparagraph”)

<html><head><title>Sample Page</title></head><body> <h1>This is the title</h1> <div id="firstparagraph"><p>This is the contents of the first paragraph</p></div></body></html>

JavaScript

• 1995 Netscape began a new scripting project – LiveScript

• Could enhance web pages and perform limited form validation

• December 1995, Netscape and Sun jointly announced JavaScript

• Relatively easy to use

• Complementary to and integrated with Java

• Complementary and integrated with HTML

• Open, cross-platform and freely licensed standard

JavaScript

• JavaScript is an ‘object-based interpreted scripting language’

• JavaScript is *NOT* Java

• Smaller vocabulary, with borrowed syntax from Java

• JavaScript is object-based in that while it uses objects, it does not contain the complete functionality of OOP languages like C++ & Java

• JavaScript support in browsers predated Java support in browsers

• Java Applications run in the Java Virtual Machine

• JavaScript code is interpreted and displayed on a browser that is JavaScript-enabled -> not compiled

• Browser Wars!

Browser Wars“As a person who likes making websites, do the browser wars bug me? Oh no, I just love having to chase up weird, esoteric redirection scripts, making multiple versions of pages, and watching my latest “brilliant” idea look like garbage thanks to the greed, selfishness and sheer, bloody-minded testosterone-fuelled competitiveness of the various companies that make web browsers”

• Major problem with JavaScript, even today with legacy browsers

• Microsoft/Netscape fighting through the late 90s

• Microsoft JScript! “An open implementation of JavaScript”

• Situation improved, but still many older browsers out there

• JavaScript and Accessibility – improving but still problematic

ACID Test

• Web Standards Project – a group of professional web developer wanting to encourage use of standards, improvement of accessibility etc.

• Developed a number of tests for browser standards compliance:-ACID1 : testing HTML4 and CSS1-ACID2 : HTML4.01 and CSS2.1-ACID3 : HTML, CSS, JavaScript and DOM

• Returns an effective percentage compliance with Standards

• http://acid3.acidtests.org/

• Results of tests February 2011 recent browsers in notes

http://acid3.acidtests.org/

JavaScript Re-emergence

• Traditionally many developers avoided overreliance on JavaScript due to varying browser implementations

• Number of factors causing a recent remergence:

- HTML5: whole new JavaScript API for dealing with HTML5- HTML5 Canvas: for interacting with canvas UI elements- AJAX: in page replacement of elements vs full page loads- Advanced libraries like JQuery improving front-end Uis- Faster client machines

• Work through JavaScript coding and examples in the notes

jQuery

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

• Provides a common browser API which will work across all modern browsers and also degrade gracefully for non-JavaScript enabled clients

• Growing in popularity in recent years.

• Designed to read and manipulate the DOM for webpages

• Widgets and events can be added as soon as the DOM is ready (i.e. The webpage is fully loaded by the browser)

• $(document).ready(function() { ......... });

• jquery_example.html

• jQuery has 100s of available plugins

http://elm.eeng.dcu.ie/~davidm/courses/ee417/examples/client-side/jquery_example.html

jQuery-ui• Core plugin for rich UI design

• Select a theme from the themeroller and download CSS and JS

• Write your jQuery-ui widgets. Example: jquery_ui_example.html

• jquery_ui_example2.html

• jQuery and jQuery-ui have available animation events for all widgets and elements on webpages

- showing- hiding- fading- sliding etc.

$("#tabs").tabs({ fx: { height: 'toggle', duration: 'slow' }

});

• jquery_ui_example_anim.html

• More advanced: moving_div_example.html

slide 1 ee417: web application development lecturer: david molloy time: mondays 10am-1pm notes:...

Documents