a really fairly simple guide to: mobile browser-based application development (part 1)

Chris Greenhalgh ([email protected]) 1

A really fairly simple guide to:mobile browser-based application development

(part 1)

Chris GreenhalghG54UBI / 2011-02-21


Content

• What is a mobile browser?• What’s in a web page?• HTML– Common file structure– What is an element?– From elements to view– Common elements and attributes

• Browser input files• View size on mobile devices


See also

• Separate slides on setting up an Android emulator, using the browser and serving static web pages


What is a mobile browser?

Browser application

5: Creates view

& 6: Handles

userinput

HTML, images,

…

4 & 6: Runs “client-side”

scripts(e.g. Javascript)

2: or clientreads file on

phone

Mobile phone

Web Server

3: Server handles HTTP request

e.g. handling formsubmission

and 3c: returns response

e.g. documentHTML,

images, …

3b: Runs “Server-side”

scripts(e.g. PHP)

3a: Readsfiles on server

2: Client makesHTTP requeste.g. get URL

1: Enter URL…

network


What’s in a web page…?

DocumentStructure and

content(HTML)

Styling(CSS)

Behaviour(Javascript)

On-loading behaviour

Event-triggered behaviour

Images and other media

(JPG, PNG, …)

Embedded pages and

objects

Not considered

here


HTML…


A simple HTML page<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Hello</title> </head> <body> <h1>Hello</h1> </body></html>

http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Hello.html



A simple HTML page<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Hello</title>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

Document Type

Document

HTML Header

Metadata (title)

HTML page content

Element (heading)

Character data


html*

body*head*

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

A simple HTML page seen as tree

title* h1

Hello Hello

Document Type

Document element

Header (head)

element

Metadata (title)

element

Content (body)

element

Element (heading)

Character data

Character data

* Required elements


A slightly more complicated page<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Hello</title> </head> <body> <h1>Hello</h1> <p style="font-size: 10"> Some 10-point text, <b>Bold</b> </p> </body></html>

http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Element.html



An example element

Begin tag

Child Character

data

<p style="font-size: 10">

Some 10-point text,

<b> Bold </b>

</p>

Child element

End tag

Element name

Attribute name

Element value

Note: end tags are only used for some elements in HTML (but for all elements in XHTML and XML)


Example element as tree

p style “font-size: 10”

Attributes:

Has attribute

Has child

“Some 10-point text,”

b

“Bold”

“Paragraph”

“Bold”


HTML generic structure

• Text document describing a “tree” of data– Comprising “elements” with “attributes” and

“children”, including other elements and “character data”

– like XML, based on SGML– Several versions including HTML4, XHTML, and

HTML5


HTML, structure, content and style

• The tags describe:– the logical structure of the document• E.g. “heading”, “paragraph”, “link”

– Some elements of style, but this is NOT recommended in general• E.g. “<b>bold text</b>”

• The attributes describe:– More about each element, e.g. font style, link URL

• The character data is the visible content


From elements to views…p style

“font-size: 10”

“Some 10-point text,”

b

“Bold”


HTML specifications

• Each version of HTML specifies– What the elements are– What attributes each element can (or must) have– Which elements can have children, and if so which

child elements they can have• Each browser may also support slightly

different elements and/or attributes, or support them in slightly different ways

• Details are out of scope for this course


Some common HTML elements• <h1>…</h1>, <h2>…</h2>, … - Headings• <p>…</p> - Paragraph• <div>…</div> - an arbitrary section (“division”)• <br> - line-break• <hr> - horizontal rule (line)• <ul><li>…</li>…</ul> - Un-numbered list and one list item• <a href=“URL”>LABEL</a> - hyperlink (“Anchor”)• <img src=“URL” alt=“TEXT”/> - image• <input type=“button” value=“Go!”/> - a button


Special HTML Attributes

• Every content element can have the following special attributes:– id – specifies a unique identity (name) for the

element, that can be referred to elsewhere• No two elements can have the same ID

– class – specifies a “class” name for the element, generally used to identify a particular visual appearance to be specified elsewhere• Any number of elements can have the same class


Browser input filesImage file(s)

.png, .jpg, …

Script file(s)

.js

Style file(s).css

External…

<img src=“…”>

<script src=“…“></script>

<link rel="stylesheet" href=“…”>

Inline…

<script>…</script>

<… style=“…”>

<H1>Hello…</H1>

HTML file .html, .htm

<frame src=“…”>

So there could just be an HTML file, or there could be several other linked files as well


View size on mobile devices

• By default most mobile browsers pretend to have screen width of about 900 pixels– Which is why the example pages look small when viewed

on the emulator• A meta tag in the HTML page header can tell the

mobile browser to use its “real” width, which is 320 (CSS) pixels on most mobiles:– <meta name="viewport" content="width=device-width">

– See http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloMobile.html

http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloMobile.html


Conclusions

• HTML is used to specify the (tree) structure and content of a web page– There is a standard document structure– There are standard elements and attributes

• You should now be able to – Read and roughly understand an HTML file– Create and edit simple static HTML files


Other resources

• The WWW Consortium, http://www.w3.org/• HTML 4.01 specification,

http://www.w3.org/TR/html401/• Online tutorials, e.g.– http://www.w3schools.com/

http://www.w3.org/

http://www.w3.org/TR/html401/

http://www.w3schools.com/

a really fairly simple guide to: mobile browser-based application development (part 1)

Documents