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 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. Web Browsers A technological tool that allows access to networked Web pages Sir Tim Berners-Lee created the first graphical Web browser in It was called WorldWideWeb. GUI interface is graphic driven Font manipulation WorldWideWeb Screenshots are from legacy browsers that are no longer available violaWWW Mosaic 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 Standard Core of Browser Features Fetching Decoding Faithfully rendering Web pages, history, and bookmarks Cross-platform compatibilities Scripts Embedded objects Interactive forms Mozilla 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 IP Addresses and Domain Names IP addresses Are assigned by ICANN Assigned for varying lengths of time Sample IP address: 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) Domain Name Resolution HTTP vs. FTP HTTP Hypertext Transport Protocol Used to download Web pages FTP File Transfer Protocol Used to upload and download files Web Pages Written in HTML or XHTML Consist of the following sections Head Body HTML Elements Opening and closing tag: Empty tags Simple Web Page A simple Web page This is paragraph one. This is paragraph two. Item 1 Item 2 street.city.state HTML and XHTML characteristics HTML Not case-sensitive Not sensitive to whitespace Web pages appear differently on different computers. 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. 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 Sample Home Page Website Types Personal Informational Organizational Political Commercial Determining Your Approach Focus on goals. Decide on the complexity levels. Live on the edge or stay intentionally obsolete. Establish a budget. 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. 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. Top Ways to Have a Bad Site Have links that dont work. Have Flash ads that do not have a Skip button. Have a form completely clear if a customer makes a mistake. Dont display shipping charges until the very last screen. Dont specify the formats for formatted data. Use lots of rapid repetitive animation or video shorts. 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. Dont use a spellchecker. Internet Demographics Research Firms Popular Web Design Tools Adobe Creative Suite Photoshop Dreamweaver Illustrator Flash Fireworks Acrobat Contribute Types of Images Bitmap images Do not scale well Provide wide range of colors and textures Examples Bmp Jpeg Png Tiff Gif Pict Vector graphics Object-based graphics Curves Outlines Shapes More adjustable and scalable Bitmap Image Magnified Bitmap Image Vector Graphic Vector Graphic Tool Palette Web 2.0 General 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 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. Web Standards HTMLXMLXHTMLCSS Progressive Enhancement 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. Mobile 2.0 Site Using Progressive Enhancement DIAL W3C was developing a specification for device-independent authoring Discontinued in 2010 Content adaptation Requires a DIAL processor DIAL Example " " Designing for Multiple Displays Fixed vs. fluid designs Fixed Slightly more reliable rendering Fluid Better support for larger screens Better support for orientation switching 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 Device Matrix 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 Class A Mobile Browser Characteristics (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 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 Class B Mobile Browser Characteristics (cont.) Minimum screen width: 164 pixels Can support complex tablesnot necessarily nested tablesup 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 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 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: 22 or more colspan and rowspan may not be supported Width expressed as a percentage may be unreliable No JavaScript support 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 XHTML-MP Commonly used in mobile phones since 2002 Modularization of XHTML Basic Suggested for sites that need to support a lot of low-end devices XHTML-MP Document Structure Guidelines Recommendations, not mandatory Class A browsers Best practices, should reduce inconsistencies Class B browsers Strongly recommend, veering from will increase inconsistencies Class C browsers Required, should adhere closely Class D browsers Required, but may still produce inconsistencies Class F browsers Doctypes For Class B and lower devices, use the following doctype: Class A browser wsers, use an XHTML doctype CSS CSS-MP CSS 2.1 CSS 3 CSS Box Model Box Model Compatibility Selectors Universal {font-family:serif;} Type or element selectors h1 {color: red;} Class selectors.error {background-color: yellow;} ID selectors #alert {background-color: yellow;} Selectors Descendent selector li a {color: black;} Adjacent sibling selector h1 + p {margin-bottom: 1em;} Child selector p > em {background_color: yellow;) Selectors Simple attribute selector p[class] {color: blue;} Advanced attribute selector p[device^=iphone] {background: green;} p[device$=android] {background: blue;} p[device*=lcd] {background: red;} Pseudoselectors :link :visited :hover :active :before :after :firstchild :lastchild CSS Selector Compatibility Font and Text Compatibility Box Properties Compatibility Color and Background Compatibility Positioning and Page Flow JavaScript Compatibility Summary In this unit, we covered the following topics: Web browsers Internet concepts Websites HTML and XHTML Website design tools Graphics Mobile Web CSS