Part I: Intro & Terminology | Chrysa Papazoglou
Chrysa PapazoglouIT Services
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Part I - Outline
1. Basic concepts & Terminology2. Developer tools3. Guidelines for mobile websites4. Developing a “mobile” web
application
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Request – Response – User agent
In HTTP a client (browser) submits a REQUEST to a web server who returns a RESPONSE (=status information + content)User-agent string: info about the client
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0
Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405
Sniffing and spoofing
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Browser sniffing 1/2
It’s back!Feature detection vs. user agent sniffing (capabilities instead of name)http://whatsmyuseragent.com/Format: product name and version + Layout engine and versionTry it from your desktop and mobile
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Browser sniffing 2/2
Example: mobile browserMozilla/5.0 (Linux; U; Android 2.1-update1; el-
gr; SonyEricssonU20i Build/2.1.1.A.0.6) AppleWebKit/530.17 (KHTML, like Gecko)
Version/4.0 Mobile Safari/530.17Sites should be developed according to uniform standards but if browsers do not support them, the developer’s hands are tied
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Browser spoofing
Download managers, web scrapersSpam botsStatistics of web browser usage…
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Document object model
Hierarchical representation of all objects in an (X)(H)(T)ML documentElement properties and the DOM can be manipulated programmatically
|-> Document|-> Element (<html>)|-> Element (<body>)|-> Element (<div>)|-> text node|-> Anchor|-> text node
|-> Form|-> Text-box|-> Text Area|-> Radio Button|-> Check Box|-> Select|-> Button
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
HTML (<5)
The markup language of the webStandardized by WWW Consortium (W3C)Allows text, images, embedded objects and hyperlinks to be included in documentsParsed by the web browserPairs of tags + name/ value attribute setsStructural semantics (e.g. headings)Separation of presentation and content
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
HTML 5 (1/2)
Attempt for a single markup languageDeveloped by W3C and WHATWG (Web Hypertext Application Technology Working Group) Many new syntactical features– New content types– Enhanced semantics
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
HTML 5 (2/2)
New APIs– Canvas element: draw in browser window– Timed media playback– Drag and drop– Web storage (cookies ++)– ….
Not yet a W3C recommendation but supported by browsers
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
CSS Intro
Cascading style sheets: the language of presentationDefines Layout – Colors – Fonts Same content for different rendering media (screen – print – handheld)“Cascade”: priority rules if more than one rule matches an element
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Ways of including CSS (1/2)
In order of priority1. Inline styles: using the style attribute (e.g. <div
style=“text-align:center;”>)2. Embedded: <style> blocks inside the html
document<style type="text/css"> h1 {border-width: 1; border: solid; text-align:
center}#img_rotator {border:1px dotted #9D4D44;
padding:3px;}</style>
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Ways of including CSS (2/2)
In order of priority (cont)3. External style sheets<link rel="stylesheet“
href="http://me.com/style.css" type="text/css" />
Conditional inclusion<!--[if IE 7]> <link rel="stylesheet"
href=“fixie7.css" type="text/css" /> <![endif]-->
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
CSS general syntax
selector [, selector2, ...] [:pseudo-class] {
property: value;[property2: value2;...]}/* comment */
#header ul li.active a:link,
#header ul li.active a:visited
{text-transform:uppercase;padding:10px 10px;
}
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Types of selectors
Predefined element (tag)body { line-height: 1.5; background: white; } Predefined element with classp.maintext { color: #004190;}Element with ID qualifierdiv#header {width: 90%;}
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Specialized CSS
CSS Reset: “deletes” styles for all elements resets browser default CSS
exampleCSS Frameworks: pre-prepared CSS libraries e.g., Blueprint– Easier / Compliant to standards– Maybe an overkill for simple scenarios
CSS compression http://www.csscompressor.com
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
You can go a really long way…
…using ONLY cssRounded corners – transparencies -gradientsAdvanced matching rules (operators to match elements with attributes with specific values, e.g. rel)
a[href$=".pdf"] {background: url("../images/icon-link-pdf.png") no-repeat scroll right center transparent;padding: 5px 20px 5px 0; }
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
How much of this do I need to remember?
You will probably not create your CSS from scratchWhat’s important is that you are able to comprehend CSS content/ applicability and modify it according to your needsTry to keep external CSS file size to a minimumTons of great references (e.g. W3Schools)
http://www.w3schools.com/css/css_quiz.asp
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
JavaScript
General purpose programming language, but used mainly for client side programming in websitesCan be used to manipulate the DOMFacilitates interaction with user without interaction with serverCommon uses: form validation, visual effects (slideshows, lightboxes, etc)
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
JavaScript Libraries/ Frameworks
Implementations of classes for common functions (e.g. DOM manipulation, visual effects)Facilitate code modularity and resusabilityMooTools and JQuery are two popular examples
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
AJAX
Asynchronous JavaScript and XMLAvoids full page reloadsData is sent to/ received from the server but processing occurs in the background and is largely transparent to the userXMLHttpRequest API
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Assorted terminology
Viewport: the visible portion of the canvasLayout engine: the part of the browser that renders the html page (separate from the UI) – e.g., Trident, GeckoNative application: an app specifically designed to run on a device’s operating system and machine firmware
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Cross browser / Cross platform
Cross browser: the ability of a website to appear and function correctly on all (~impossible) or most (~feasible) web browsersCross platform: software that can run on different platforms– Recompilation– Portable bytecode
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Do I need to know all this?
Yes and noYou definitely need a superficial grasp of all of theseThe depth of study/ familiarity required is determined by the particular task at handYou will *probably* not be required to build a website from scratch but you must be able to do so
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
The value of validation
Plethora of tools for HTML, CSS validation– http://jigsaw.w3.org/css-validator/– http://validator.w3.org/
Validation for mobile devicesValidation merely shows that your files have correct syntax, NOT that they will look/ behave like you planned
19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou
Never forget accessibility
Visually impaired people use screen readers to access pages
http://wac.osu.edu/resources/tools.html#onlineFangs: Firefox add on that renders the text version of a web page, i.e., what the screen reader will read