Chrysa Papazoglou IT Services

Part I: Intro & Terminology | Chrysa Papazoglou Part I - Outline

1. Basic concepts & Terminology 2. Developer tools 3. Guidelines for mobile websites 4. 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 version ƒ Try it from your desktop and mobile

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou Browser sniffing 2/2

ƒ Example: mobile browser Mozilla/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.17 ƒ Sites 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 scrapers ƒ Spam bots ƒ Statistics of web browser usage…

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou Document object model

|-> Document ƒ Hierarchical |-> Element () representation of all |-> Element () objects in an |-> Element (

) |-> text node (X)(H)(T)ML |-> Anchor document |-> text node |-> Form ƒ Element properties |-> Text-box and the DOM can |-> Text Area |-> Radio Button be manipulated |-> Check Box programmatically |-> Select |-> Button

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou HTML (<5)

ƒ The markup language of the web ƒ Standardized by WWW Consortium (W3C) ƒ Allows text, images, embedded objects and hyperlinks to be included in documents ƒ Parsed by the web browser ƒ Pairs of tags + name/ value attribute sets ƒ Structural 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 language ƒ Developed 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 presentation ƒ Defines 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 priority 1. Inline styles: using the style attribute (e.g.

) 2. Embedded:

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou Ways of including CSS (2/2)

ƒ In order of priority (cont) 3. External style sheets Conditional inclusion

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou CSS general syntax selector [, selector2, #header ul li.active ...] [:pseudo-class] { a:link, property: value; #header ul li.active [property2: value2; a:visited ...] { } text-transform: /* comment */ 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 class p.maintext { color: #004190;} ƒ Element with ID qualifier div#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 example ƒ CSS 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 css ƒ Rounded corners – transparencies - gradients ƒ Advanced 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 scratch ƒ What’s important is that you are able to comprehend CSS content/ applicability and modify it according to your needs ƒ Try to keep external CSS file size to a minimum ƒ Tons 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 websites ƒ Can be used to manipulate the DOM ƒ Facilitates interaction with user without interaction with server ƒ Common 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 resusability ƒ MooTools and JQuery are two popular examples

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou AJAX

ƒ Asynchronous JavaScript and XML ƒ Avoids full page reloads ƒ Data is sent to/ received from the server but processing occurs in the background and is largely transparent to the user ƒ XMLHttpRequest API

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou Assorted terminology

ƒ Viewport: the visible portion of the canvas ƒ Layout engine: the part of the browser that renders the html page (separate from the UI) – e.g., Trident, Gecko ƒ Native 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 browsers ƒ Cross 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 no ƒ You definitely need a superficial grasp of all of these ƒ The depth of study/ familiarity required is determined by the particular task at hand ƒ You 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 devices ƒ Validation 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 #online ƒ Fangs: Firefox add on that renders the text version of a web page, i.e., what the screen reader will read

19/7/12 Part I: Intro & Terminology | Chrysa Papazoglou