File - McAvoy Tech Teaching

Transcript File - McAvoy Tech Teaching

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 1990. 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
http://www.mysite.com/default.html
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)
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:
<html></html>

<ul></ul>
<li></li>
• Empty tags
 
<hr />
Simple Web Page
<HTML>
<Head>
<title> A simple Web page</title>
</head>
<body>
This is paragraph one.
This is paragraph two.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
 
<hr>
<address>street.city.state</address>
<body>
</html>
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 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.
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.
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
HTML
XML
XHTML
CSS
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

<sel:variable name="res" value="di-cssmqresolution('dpi')"/>
<sel:select>
<sel:when expr="$res > 500>"
<object sel:selid="Cornish Yarg" src="yarg_hi.jpg"/>
</sel:when>
<sel:when expr="$res > 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>
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. multiplecolumn 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 CSSbased 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 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
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: 2×2 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
Class A browsers
• Recommendations, not mandatory
Class B browsers
• Best practices, should reduce inconsistencies
Class C browsers
• Strongly recommend, veering from will increase
inconsistencies
Class D browsers
• Required, should adhere closely
Class F browsers
• Required, but may still produce inconsistencies
Doctypes
• For Class B and lower devices, use the following
doctype:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD
XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtmlmobile12.dtd">
• Class A browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
wsers, use an XHTML doctype
CSS
CSS
CSS 2.1
CSS-MP
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

File - McAvoy Tech Teaching

Transcript File - McAvoy Tech Teaching

Directory