1 / 67

SD1230

SD1230. Unit 7 Websites. Course Objectives. During this unit, we will cover the following course objectives: Identify the characteristics of website applications. Describe the differences and similarities of desktop, website, and mobile technology. Learning Outcomes.

eunice
Download Presentation

SD1230

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SD1230 Unit 7 Websites

  2. Course Objectives • During this unit, we will cover the following course objectives: • Identify the characteristics of website applications. • Describe the differences and similarities of desktop, website, and mobile technology.

  3. Learning Outcomes • Completing this unit should help enable you to: • Identify the characteristics of websites. • Explain the infrastructure of the World Wide Web in simple terms (e.g., Web server, client, DNS, etc.). • Create a simple Web page.

  4. Web Browsers • A technological tool that allows access to networked Web pages • Sir Tim Berners-Lee created the first graphical Web browser in 1990. It was called WorldWideWeb. • GUI interface is graphic driven • Font manipulation

  5. WorldWideWeb Screenshots are from legacy browsers that are no longer available

  6. violaWWW

  7. Mosaic

  8. Mosaic Improvements • User-focused • Cross-platform compatible with Unix and Macintosh • Inline images • Support for multiple graphics formats • Could render video and audio formats • Add-ons • History • Bookmarks

  9. Standard Core of Browser Features • Fetching • Decoding • Faithfully rendering Web pages, history, and bookmarks • Cross-platform compatibilities • Scripts • Embedded objects • Interactive forms

  10. Mozilla

  11. What Is a Web Page? • Document written in HTML • Accessible to Web browsers • Online Web pages are found at a URL • Protocol • Domain • Web page http://www.mysite.com/default.html

  12. IP Addresses and Domain Names • IP addresses • Are assigned by ICANN • Assigned for varying lengths of time • Sample IP address: 209.191.93.52 • Domain name • Registered by a domain registrar • Belongs to its owner as long as fees are paid • Associated with one or more IP addresses by a Domain Name Server (DNS)

  13. Domain Name Resolution

  14. HTTP vs. FTP HTTP FTP File Transfer Protocol Used to upload and download files • Hypertext Transport Protocol • Used to download Web pages

  15. Web Pages • Written in HTML or XHTML • Consist of the following sections • Head • Body

  16. HTML Elements • Opening and closing tag: <html></html> <p></p> <ul></ul> <li></li> • Empty tags <br /> <hr />

  17. Simple Web Page <HTML> <Head> <title> A simple Web page</title> </head> <body> <p>This is paragraph one.</p> <p>This is paragraph two.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <br> <hr> <address>street.city.state</address> <body> </html>

  18. HTML and XHTML characteristics HTML XHTML Tags must all be lowercase. Not sensitive to whitespace Some elements have additional required attributes. Some tags are no longer supported. Web pages appear differently on different computers. • Not case-sensitive • Not sensitive to whitespace • Web pages appear differently on different computers.

  19. Website • A set of associated Web pages for an entity that share a common theme • Requires a linking structure • Linear • Hierarchical • Combination of the two • Point of entry to the site is the home page

  20. Sample Home Page

  21. Website Types • Personal • Informational • Organizational • Political • Commercial

  22. Determining Your Approach • Focus on goals. • Decide on the complexity levels. • Live on the edge or stay intentionally obsolete. • Establish a budget.

  23. Tips for Good Websites • Take a minimalist approach. • Make navigation easy to use and understand. • Make the website fast loading. • Skip the sticky advertisements. • Skip the counters. • Keep the information on your site current. • Be grammatically correct.

  24. Tips for Good Websites • Do not assume your Web designers can spell or write a grammatically correct sentence. • Be very sparing of sound effects or music. • Use thumbnails as a good aid to site content and navigation. • Make contact info obvious. • Make fonts readable. • Be conscious of backgrounds. • Be conscious of screen resolution. • Field test the site using real people.

  25. Top Ways to Have a Bad Site • Have links that don’t work. • Have Flash ads that do not have a Skip button. • Have a form completely clear if a customer makes a mistake. • Don’t display shipping charges until the very last screen. • Don’t specify the formats for formatted data. • Use lots of rapid repetitive animation or video shorts.

  26. Top Ways to Have a Bad Site • Use lots of different colors, themes, unrelated images, and motifs. • Use font colors that are practically indistinguishable from the background. • Have your home page cluttered with links using different fonts and backgrounds. • Have links unrelated to the main purpose of the site. • Don’t use a spellchecker.

  27. Internet DemographicsResearch Firms

  28. Popular Web Design Tools • Adobe Creative Suite • Photoshop • Dreamweaver • Illustrator • Flash • Fireworks • Acrobat • Contribute

  29. Types of Images Bitmap images Vector graphics Object-based graphics Curves Outlines Shapes More adjustable and scalable • Do not scale well • Provide wide range of colors and textures • Examples • Bmp • Jpeg • Png • Tiff • Gif • Pict

  30. Bitmap Image

  31. Magnified Bitmap Image

  32. Vector Graphic

  33. Vector Graphic Tool Palette

  34. Web 2.0General Principles • The Web as a platform • Harnessing collective intelligence • Data is the next Intel inside • End of the software release cycle • Lightweight programming models • Software above the level of a single device • Rich user experiences

  35. Mobile 2.0 • Mobile is primary context for accessing the Web • Mobile Web browser is the next killer app • Mobile Web applications are the future. • JavaScript is the next frontier. • Does not rely on carrier control • The Web and mobile community need to work together. • The personal relevance of content matches how personal the device is and how personally it applies to our context.

  36. Web Standards

  37. Progressive Enhancement

  38. Progressive Enhancement Techniques • Always code your markup semantically. • Have a device plan. • Have both your lowest common denominator and your high-end device plan before you start to code. • Test on multiple mobile devices from beginning to end. • If you plan a desktop layer, create the mobile version first.

  39. Mobile 2.0 Site Using Progressive Enhancement

  40. DIAL • W3C was developing a specification for device-independent authoring • Discontinued in 2010 • Content adaptation • Requires a DIAL processor

  41. DIAL Example <!-- query the requesting device's browser resolution in dpi and store in a convenience variable--> <sel:variable name="res" value="di-cssmq-resolution('dpi')"/> <sel:select> <sel:when expr="$res &gt; 500>" <object sel:selid="Cornish Yarg" src="yarg_hi.jpg"/> </sel:when> <sel:when expr="$res &gt; 200>" <object sel:selid="Cornish Yarg-id001" src="yarg_mid.jpg"/> </sel:when> <sel:otherwise> <object sel:selid="Cornish Yarg-id001" src="yarg_low.gif"/> </sel:otherwise> </sel:select>

  42. Designing for Multiple Displays Fixed vs. fluid designs Single-column vs. multiple-column layouts Single-column Better positioning on low-end devices Better on a smaller screen Multiple-column layouts Awkward with a D-pad Okay for larger-screen touch devices • Fixed • Slightly more reliable rendering • Fluid • Better support for larger screens • Better support for orientation switching

  43. Device Matrix

  44. Class A Mobile Browser Characteristics • Excellent XHTML 1.0 support • Good HTML5 support; specifically, the canvas element and offline storage • Excellent CSS support, including most of CSS Level 2.1 (scores 90% or higher on the ACID2 test) and the majority of CSS Level 3 (scores 75% or higher on the ACID3 test) • Support for Web standards layouts, including absolute positioning, floats, and complex CSS-based layouts

  45. Class A Mobile BrowserCharacteristics (cont.) • Support for image replacement techniques • Excellent JavaScript support • Ability to toggle the display property • Support for DOM events, including Ajax • Considered comparable to a “desktop-grade” browser

  46. Class B Mobile Browser Characteristics • Excellent XHTML 1.0 support • Good CSS Level 2.1 support (scores 75% or higher on the ACID2 test) • Padding, border, and margin properties are correctly applied • Can reliably apply colors to links, text, and background • Supports image replacement techniques

  47. Class B Mobile BrowserCharacteristics (cont.) • Minimum screen width: 164 pixels • Can support complex tables—not necessarily nested tables—up to four cells in a row • Setting a font size of 10 pixels or more produces readable text • Has limited JavaScript support, being at least able to toggle the display property

  48. Class C Mobile Browser Characteristics • Good XHTML 1.0 support • Limited CSS Level 2.1 support (scores 50% or higher on the ACID2 test) • Limited or no JavaScript support

  49. Class D Mobile Browser Characteristics • Basic XHTML • Limited CSS support (CSS Level 1, or does not recognize cascading) • Minimum screen width: 120 pixels • Hyperlinks may not be colorable by CSS • Basic table support: 2×2 or more • colspan and rowspan may not be supported • “Width” expressed as a percentage may be unreliable • No JavaScript support

  50. Class F Mobile Browser Characteristics • No (or very unreliable) CSS support • Poor table support or none at all • Basic forms: text field, select option, submit button • May not be able to support input mask on fields • No JavaScript support

More Related