Chrysa Papazoglou IT Services - ihu.edu.gr file19/7/12 Part I: Intro & Terminology | Chrysa...

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


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


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


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


Browser spoofing

Download managers, web scrapersSpam botsStatistics of web browser usage…


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


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


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


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


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>

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


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;

}


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%;}


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


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; }


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


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)


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


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


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


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


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


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


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

Chrysa Papazoglou IT Services - ihu.edu.gr file19/7/12 Part I: Intro & Terminology | Chrysa...

Documents

Transcript of Chrysa Papazoglou IT Services - ihu.edu.gr file19/7/12 Part I: Intro & Terminology | Chrysa...