sd1230
Download
Skip this Video
Download Presentation
SD1230

Loading in 2 Seconds...

play fullscreen
1 / 67

SD1230 - PowerPoint PPT Presentation


  • 106 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' SD1230' - eunice


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
sd1230

SD1230

Unit 7

Websites

course objectives
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
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
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
WorldWideWeb

Screenshots are from legacy browsers that are no longer available

mosaic improvements
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
Standard Core of Browser Features
  • Fetching
  • Decoding
  • Faithfully rendering Web pages, history, and bookmarks
  • Cross-platform compatibilities
  • Scripts
  • Embedded objects
  • Interactive forms
what is a web page
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 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)
http vs ftp
HTTP vs. FTP

HTTP

FTP

File Transfer Protocol

Used to upload and download files

  • Hypertext Transport Protocol
  • Used to download Web pages
web pages
Web Pages
  • Written in HTML or XHTML
  • Consist of the following sections
    • Head
    • Body
html elements
HTML Elements
  • Opening and closing tag:

<html></html>

<p></p>

<ul></ul>

<li></li>

  • Empty tags

<br />

<hr />

simple web page
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>

html and xhtml characteristics
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.
website
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
website types
Website Types
  • Personal
  • Informational
  • Organizational
  • Political
  • Commercial
determining your approach
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
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 websites1
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
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 site1
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.
popular web design tools
Popular Web Design Tools
  • Adobe Creative Suite
    • Photoshop
    • Dreamweaver
    • Illustrator
    • Flash
    • Fireworks
    • Acrobat
    • Contribute
types of images
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
web 2 0 general principles
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
mobile 2 0
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.
progressive enhancement techniques
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.
slide40
DIAL
  • W3C was developing a specification for device-independent authoring
  • Discontinued in 2010
  • Content adaptation
  • Requires a DIAL processor
dial example
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>

designing for multiple displays
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
class a mobile browser characteristics
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
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
class b mobile browser characteristics
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
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
class c mobile browser characteristics
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
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
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
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
doctypes
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/xhtml-mobile12.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

slide54
CSS
  • CSS 3
  • CSS
  • CSS 2.1
  • CSS-MP
selectors
Selectors
  • Universal

{font-family:serif;}

  • Type or element selectors

h1 {color: red;}

  • Class selectors

.error {background-color: yellow;}

  • ID selectors

#alert {background-color: yellow;}

selectors1
Selectors
  • Descendent selector

li a {color: black;}

  • Adjacent sibling selector

h1 + p {margin-bottom: 1em;}

  • Child selector

p > em {background_color: yellow;)

selectors2
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
Pseudoselectors

:link

:visited

:hover

:active

:before

:after

:firstchild

:lastchild

summary
Summary
  • In this unit, we covered the following topics:
    • Web browsers
    • Internet concepts
    • Websites
    • HTML and XHTML
    • Website design tools
    • Graphics
    • Mobile Web
    • CSS