a really fairly simple guide to: mobile browser-based application development (part 1)
Post on 17-Feb-2016
38 Views
Preview:
DESCRIPTION
TRANSCRIPT
Chris Greenhalgh (cmg@cs.nott.ac.uk) 1
A really fairly simple guide to:mobile browser-based application development
(part 1)
Chris GreenhalghG54UBI / 2011-02-21
Chris Greenhalgh (cmg@cs.nott.ac.uk) 2
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 3
See also
• Separate slides on setting up an Android emulator, using the browser and serving static web pages
Chris Greenhalgh (cmg@cs.nott.ac.uk) 4
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 5
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 6
HTML…
Chris Greenhalgh (cmg@cs.nott.ac.uk) 7
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 8
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 9
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 10
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 11
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)
Chris Greenhalgh (cmg@cs.nott.ac.uk) 12
Example element as tree
p style “font-size: 10”
Attributes:
Has attribute
Has child
“Some 10-point text,”
b
“Bold”
“Paragraph”
“Bold”
Chris Greenhalgh (cmg@cs.nott.ac.uk) 13
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 14
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 15
From elements to views…p style
“font-size: 10”
“Some 10-point text,”
b
“Bold”
Chris Greenhalgh (cmg@cs.nott.ac.uk) 16
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 17
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 18
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 19
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 20
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 21
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
Chris Greenhalgh (cmg@cs.nott.ac.uk) 22
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/
top related