Chrysa Papazoglou IT Services. Part I: Intro & Terminology Chrysa Papazoglou

Size: px

Start display at page:

Download "Chrysa Papazoglou IT Services. Part I: Intro & Terminology Chrysa Papazoglou"

Jeffery Hill
7 years ago
Views:

1 Chrysa Papazoglou IT Services Part I: Intro & Terminology Chrysa Papazoglou

2 Part I - Outline 1. Basic concepts & Terminology 2. Developer tools 3. Guidelines for mobile websites 4. Developing a mobile web application

3 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/ Firefox/12.0 Mozilla/5.0 (ipad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/ (KHTML, like Gecko) Mobile/7B405 Sniffing and spoofing

4 Browser sniffing 1/2 It s back! Feature detection vs. user agent sniffing (capabilities instead of name) Format: product name and version + Layout engine and version Try it from your desktop and mobile

5 Browser sniffing 2/2 Example: mobile browser Mozilla/5.0 (Linux; U; Android 2.1-update1; elgr; SonyEricssonU20i Build/2.1.1.A.0.6) AppleWebKit/ (KHTML, like Gecko) Version/4.0 Mobile Safari/ Sites should be developed according to uniform standards but if browsers do not support them, the developer s hands are tied

6 Browser spoofing Download managers, web scrapers Spam bots Statistics of web browser usage

7 Document object model Hierarchical representation of all objects in an (X)(H)(T)ML document Element 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

8 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

9 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

10 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

11 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

12 Ways of including CSS (1/2) In order of priority 1. 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>

13 Ways of including CSS (2/2) In order of priority (cont) 3. External style sheets <link rel="stylesheet href=" type="text/css" /> Conditional inclusion

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

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

16 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

17 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") norepeat scroll right center transparent; padding: 5px 20px 5px 0; }

18 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)

19 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)

20 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

21 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

22 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

23 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

24 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

25 The value of validation Plethora of tools for HTML, CSS validation Validation for mobile devices Validation merely shows that your files have correct syntax, NOT that they will look/ behave like you planned

26 Never forget accessibility Visually impaired people use screen readers to access pages #online Fangs: Firefox add on that renders the text version of a web page, i.e., what the screen reader will read

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,