Brenton Strine

Brenton Strine

Web Development Principles

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (2)

0 answers

Post by Brenton Strine on September 22, 2011

Hi Sowsan, many elements of HTML5 have been incorporated into browsers even five years ago. I would say that all current versions of all the major browsers support the most important parts of HTML5. Even going back a few versions to IE7, there is still significant support. You will have to evaluate the support on a per-functionality basis, but usually it doesn't hurt to put HTML5, because it's backwards compatible if you code with good semantics.

0 answers

Post by Sowsan Sibai on June 20, 2011

I am developing a website using visual studio 2008 and I want to use HTML5 how can I do that, and if I use HTML5 which browsers support it ?

Web Development Principles

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Interoperability 0:36
    • Interoperability of Web Development
  • Interoperable Websites Should Work 3:05
    • Qualities of Interoperable Websites
  • Backward Compatibility 5:52
    • Compatibility With Older Technology
    • Example: Meta Tag
  • Forward Compatibility 9:33
    • Advancement in Technology
  • Accessibility 10:11
    • Accessibility of Content
    • Semantic Code
    • Example: Where Will This Link Take You?
  • Graceful Degradation 14:59
    • Graceful Degradation or Fault Tolerance
    • Types of Degradation
  • Progressive Enhancement 18:36
    • Progressive Enhancement
  • Future Detection and Browser Sniffing 21:05
    • Future Detection Versus Browser Sniffing
    • Example: Email Input Type
  • Tim Berners-Lee's Quote 26:20

Transcription: Web Development Principles

Welcome to Educator.com.0000

This lesson is going to be on some principles of web development--sort of high-level things0002

that you need to keep in mind for when you are developing and planning a website--0008

and when you are in the individual coding, how you are going to encode so that the site0013

is going to come across to all your users in a way that really works well,0019

no matter what sort of browser they are using, or who they are, or even if they are not necessarily users,0025

but spiders or web crawlers or some other sort of an application.0031

The cardinal goal of web development is interoperability.0038

You want your website to work in every context that it possibly can.0047

The principle is that your website should operate across lots of different user agents, platforms, devices--everything.0053

That is kind of the point of the Internet.0060

When Tim Berners-Lee thought of it, back in the early 90's, this was one of the things that he had in mind:0062

just having a document that would open in any computer.0068

You wouldn't need a particular computer; you wouldn't need a particular program.0073

There can be multiple web browsers; there can be multiple user agents.0077

So, this is sort of the guiding thing that everything else is based on.0081

And if you do design your websites to be interoperable, then what this does is:0086

it will prevent the Internet from fragmenting into different, incompatible browsers and devices.0090

And eventually, what will happen if this fragmentation occurs is: you don't have one Web anymore.0096

You have to have multiple Webs, depending on which application you are coding for and things like that.0104

That is exactly what happened in the 90's.0109

You may have, if you have been on the Internet in the 90's, seen things like this,0113

that say, "This website is best viewed in Internet Explorer" or "Netscape, and please download" Netscape or Internet Explorer,0116

because if you don't have Netscape, and I am coding for Netscape, then it is going to look wrong; or it is not going to work at all.0124

And some web developers even put in code that blocked content from the browser that they didn't code for.0131

And it sort of fragmented the Web, and it caused a lot of pain for Web developers and users.0140

The idea is that the same code should work for all devices.0148

One Internet, one code, one website--you don't have to duplicate things: that is the goal; that is interoperability.0152

And this is possible now, since 2000: all major browsers will support the standards that the w3c recommendations have put forward-- especially HTML 4.01.0161

And now, HTML5 is rolling along, as well.0173

So, this is possible now; and it means that you need to code according to the standards, and with all these other design principles in mind.0176

If you have a website, it is clear, of course, that it is going to work on your computer and in the browser that you use.0188

That is just obvious, because you are going to be developing it, and that is going to be what comes naturally.0194

You are going to get it to look right in the browser you are using on your computer.0199

But you need to also check a lot of these other things.0202

It needs to also work in all the other browsers that you can install on your computer.0205

This is just the basic, easiest thing: if you have a PC, you can install Safari, Firefox,0210

Internet Explorer, Chrome--as many browsers as possible--Opera...and check it in all of them, and older versions, as well.0216

You also want to make sure that your website looks good and works in other screen resolutions.0226

Older users may have smaller screen resolutions, 800x600 or even smaller.0232

Some users have very, very large screen resolutions; websites can look funny like that.0237

And you also have to keep in mind that mobile devices may have very tiny screen resolutions.0242

It needs to work in other operating systems; so you will want to check that if you can;0248

and of course, in other browsers in other operating systems; and in different Internet speeds.0251

You don't want people who have very slow computers to be completely unable to access your website,0259

because it is so graphics-intensive, so you need to keep in mind bandwidth.0263

And then, you have to keep in mind other types of devices.0268

You may be thinking of the basic desktop computer, PC, or Mac, or Linux.0271

But then, if you are not keeping in mind smartphones, ebook readers, things like webTV (which isn't really around anymore,0276

but there is a chance that there may be new devices that are similar to it)...there are tablet devices; there are old things0282

that aren't around anymore like webTV; and then future devices that haven't even come around yet;0292

if you code your website according to a standard, it should be future-compatible, and it should work with future devices.0298

The point is that you need to be thinking in terms of interoperability--not just what looks good on what you can test;0305

but you need to make it look good on everything that you could possibly imagine.0312

And you don't want to be coding hacks and things like this that are going to cause it to break0315

in future devices that you don't know about, old devices you don't know about, or even current devices that you don't know about.0320

And then, of course, there are different types of user agents.0326

There is not just browsers that are going to be using your website.0328

There are screen readers for the blind (for example), web crawlers and other robots (like Google crawlers, spiders...),0331

special mobile device browsers for Android, or even older phones that aren't quite as fancy, and then text-only browsers.0339

Lynx is a famous example of that.0347

You have to keep all of this stuff in mind.0349

The next major principle is backwards compatibility; and there are a couple of different aspects of this.0354

Your website, of course, should be backwards compatible with older browsers.0360

Your code, in terms of code, should be compatible with older technology.0366

And of course, the importance of the technology decreases as it gets older, and as its user base decreases.0372

Something like Internet Explorer 2 probably doesn't matter if your website works in it,0379

because nobody is going to be using that--very, very few people are going to be using that.0384

And if they did, they probably are used to it having broken websites.0388

But you can't think about it just in terms of your user base, because it may be that you may say,0394

"Oh, none of my users use Internet Explorer"; well, maybe it is because your website breaks in Internet Explorer.0401

It is sort of like if none of your customers use wheelchairs, that doesn't mean that you don't have to install a ramp.0407

It might mean that you do need to install a ramp, so that some of your customers...0412

You may have been losing customers who haven't been able to access your store without the ramp.0417

The same sort of thing: if you are just looking at statistics, and saying, "Oh, my users don't need this;0422

I am not going to support it," that is sort of a fallacy.0428

You need to try and support as many things as possible.0432

The other aspect of backwards compatibility is in terms of increasing the technology.0434

New versions of languages, new user agents, and things like this are designed to not break old stuff.0440

So, when Internet Explorer 8 came out, it was a big thing that people worried it was going to break the Web,0447

because it was going from the buggy implementation and a broken box model0452

to correcting it and being more standards-compliant, which was really great.0458

But all of the people that had been coding for the old broken ways in Internet Explorer--0461

suddenly, their websites wouldn't work in Internet Explorer 8, and it was called "breaking the Web."0466

And it sort of is a conflict, because on the one hand, it is increasing its adherence to standards and making the Web more interoperable.0471

But on the other hand, it was making poorly-coded websites not able to continue working in Internet Explorer without additional hacks.0479

So, that is why you will see in I.E. 8: there is a little button that you can press to toggle to I.E. 7 mode and I.E. 8 mode,0489

because they don't want to break the Web; they wanted it to still work.0498

And it is kind of a terrible solution, but hopefully we will not have to deal with that for much longer.0502

That is just to illustrate that, if you are coding according to a standard, then browser vendors0509

and new versions of languages are going to have in mind the way that you have been coding.0515

And they will try, as best they can, to keep your code (that was coded correctly) working, even with the advances in technology.0519

It is good not to do tricky things or broken things; don't write tag soup, etc.0528

XHTML 2 was not backwards compliant, and because of that, nobody wanted to use it.0534

And it failed, and they had to stop developing it.0540

And XHTML 2 never took off, for that reason.0543

This right here is the tag that you can put in your website if it breaks in Internet Explorer 8, but worked in Internet Explorer 7.0547

They had to kind of create this meta tag; and this makes your website work as if it is in I.E. 7.0557

So, it wasn't completely backwards compatible; so they had to go to great lengths to make it work.0566

Forward compatibility is just as important: your code needs to be done in a way that it will continue to work, as technologies advance.0575

In that last example, with people who coded specifically for Internet Explorer 7--they weren't coding with the future in mind.0583

And so, when Internet Explorer 8 advanced things and really improved things, their code broke.0589

It was not future compatible; that is the other side of it, and that is where coding to standards really helps (even though they will try and be backwards compatible).0594

But if you can conform to a standard, that will really help your future compatibility.0605

Accessibility is related to these; and the idea is that your content should be accessible, not only to people, but to programs, as well.0613

All of the programs that I listed that you want to be interoperable with need to also be accessible,0627

meaning, for example: if you are sniffing the browser (using JavaScript to detect what the browser is maybe using--the user agent),0632

and then denying content to that browser, based on it saying,0640

"This browser can't handle my code; I am just going to not send it to it," that is not accessible.0645

Or if you are creating code that works in the browsers that support it;0650

but when it comes to a browser that doesn't support it, it breaks in a way that the browser can't even handle the information...0654

An example would be if you are sending XHTML to the Internet Explorer, and it is served as XHTML,0660

with this XHTML MIME tag (which is the correct way to do it),0667

Internet Explorer does not know what to do with XHTML when served as XHTML.0670

And it will just fail to render the web page completely.0677

It will give you a little download box, or just an error message, and it won't get the content at all.0680

But more common of a consideration is making your website accessible to people, especially people with disabilities.0685

And blind people is the typical example, because it kind of simplifies things and makes it very easy.0696

But it has to do with everything.0701

And just in general, writing your code semantically will make it more accessible,0704

because again, HTML will define the meaning; and then, the various user agents can understand that meaning0708

and give it to the user in a way that makes sense, if it is semantic, instead of trying to go through0715

and figure out what it means, and present content.0723

If it doesn't know what the content is, it doesn't know how to present it; and that can cause problems.0726

A couple of examples for making your website accessible are: both the content and the navigation0732

shouldn't depend purely on visual information or styles, when possible.0738

So, if you have a blind user, and they want to navigate through your website,0742

if that doesn't come across textually--if their screen reader can't find the navigation--0750

if it is all very visual--they are not going to be able to see to click, and it is not going to be accessible.0755

So, you need to have a list of links (that would be a good thing); and the same thing with content.0761

You can't have too much visual content, unless it is the sort of website that is designed...0766

say it is a gallery of photos; obviously, a blind person is not going to be able to see your gallery of photos.0772

But what you can do is give your photos alternate text that will describe what the photograph is.0779

And then, if they are going through a screen reader, they can listen to it, saying,0785

"Photograph of a lake," or whatever it is, and they will have an idea of what your website is about; and that is more accessible.0789

Lastly, pages should be navigable without a mouse, which means that if you hit Tab and go through,0799

it will tab from one link to the next, and to buttons and other form elements.0806

And you should be able to go all the way through your entire website without using a mouse at all--just using Tab and the keyboard.0811

And that will make it more accessible.0817

The same thing with, for example, if you have Lynx, which is a text-only browser: you have to navigate this way.0819

And so, if you want to install Lynx and test your website with Lynx, that will help you make sure that it is more accessible to a wider variety of things.0825

Lastly, your links should make sense out of context.0836

If you are on a screen reader or something, and you come across just a link0841

(or you tab to a link, if you are using just a keyboard), and the link just says Click Here,0845

you have no idea where this is going to go.0850

It doesn't indicate what clicking here will do; it doesn't indicate what it is sending to you.0853

A better link would say something like "Download the application," or whatever it is; it actually describes it.0861

And then, another point with accessibility is that, if you don't have your website up to standards,0870

depending on where you are, there may be different laws (and also depending on your organization)0876

that require you to have an accessible website.0883

There are a couple of different standards; and there are a lot of different laws--local and international and things like this.0886

So, it is important to make sure that your website is accessible, because you may be violating the law if it is not.0891

Graceful degradation is a strategy (also known as fault tolerance) where you begin with your website coded the way that you want it.0901

So, you are probably thinking of browsers; you may be thinking of Internet Explorer 8 and Firefox 3.0912

And you code your website to work great, and it has Flash and all of this stuff.0920

And then, you are thinking about your users that won't have these technologies.0925

And you take steps to make sure that they still get the content.0929

So, where you have Flash, you have backup content that provides the same sort of thing,0933

but not in the Flash format, for people who don't have Flash installed.0939

Or you make use of things that Internet Explorer 8 can use, but Internet Explorer 6 can't; you have backup content0942

that is not quite as nice, but still works, for the older ones.0949

A good way of doing this is actually providing the content.0955

A bad way would be...this is the noscript element: if somebody has JavaScript disabled, you can put little messages to them.0958

This is not the way to do it: you don't just inform them that their browser doesn't support it, or make fun of them.0965

It is not about notifying them that they aren't able to access the content; it is about actually providing the content0972

in an alternate way that may not be the ideal way, but it is still available.0978

So, just sending a message that says, "Your browser is bad" is not as helpful0984

as giving maybe just the text-only version of whatever the script is going to do, or something like that.0988

So, there are a lot of different types of degradation, too.0995

Your website may be degrading because you are encountering out-of-date or obsolete technology.0999

If your website is being viewed on a computer that was built in 1990, chances are that it is going to have some trouble,1006

even just if you have a background that has a lot of little images repeated.1013

It may just take a lot of processing power to render all of those images, one at a time.1018

So, there are things like that that you have to keep in mind.1023

Or if you are using an old browser, that is degradation.1028

Another way is if you run into a bug; say the server over HTTP sends it the wrong way,1031

there is a glitch as it is downloading, and it misses some code or something, and your website breaks.1038

If it degrades gracefully, then even with that breakage, the content will still be accessible.1044

This is actually a consideration in XHTML and XML, which enforces correct syntax.1049

If there is a bug, it can actually break the whole thing, even if it is just a little bug.1057

But most browsers will try and present it in a way that still works, even if there is a little bit of breakage; and that is the principle of graceful degradation.1062

And then, if the code isn't rendered properly by user agents...1070

Internet Explorer had very famous problems with its box model.1074

And you couldn't just code your website the right way, and then expect Internet Explorer users to deal with a completely broken website.1077

You had to make it so that even the user agent doing it incorrectly--1086

users of that user agent would still see the code in a way that made sense.1091

And then, lastly, intentionally disabling functionality, or if you just never installed it in the first place--1096

Flash or JavaScript often gets disabled, so you need to have alternate ways of doing things.1101

If JavaScript is, for example, form validating or anything like that, if you have JavaScript pop-ups,1106

you need to have the HTML backup while you are doing that.1113

The other end, or the opposite, of graceful degradation is progressive enhancement.1117

The approach doesn't start from coding it the way that you like, and then providing fallback material.1125

What you do is: you start with just the very basic content.1131

This is actually a better approach than graceful degradation.1136

You start with just the content that you want; you mark it up semantically, the way that you should.1140

And that gives you sort of a baseline that is accessible to everybody and anything, and it is completely interoperable, as much as possible.1145

But then, what you do to that is: you add layers of different things to make it nicer and enhance it.1154

So, you will add CSS to make it look pretty, and you will add Flash where you want, and you will add JavaScript technology.1161

And all these things will be fed specifically to the user agents that have the support for it.1170

And you will use browser detection, and you will only feed it to the ones that actually can use it.1178

And that way, your content is going to look good everywhere, because you have built the basic foundation.1183

And then, you are adding to it, so that people using the newest technology can still get all the new, fancy toys.1192

So, this is great in HTML5, because you can code your website great for every browser.1198

And you can already be implementing things that...1204

For example, Opera has a lot of things implemented that only work in Opera, because nobody else has done it yet:1206

the forms, for example, where you can have the little date dropdowns and things like that.1212

You can implement that for Opera and just send it to Opera; that is progressive enhancement.1218

And it doesn't matter that no other browsers support it, because you are just sending it to Opera; and Opera is making use of it.1223

And then, the ones that can't handle them--they just get the basic content.1231

And they get as much as they can handle.1235

It is the best way of doing things, and it really works well, especially in a context (which is what HTML is now)1237

where things get rolled in as the developers of browser software can find time to put them in.1243

And there are still things from HTML 3.2 that haven't been fully implemented in all browsers yet.1252

And so, it will take some time; but you can make use of what is there, and you can also provide the baseline content for everybody.1257

Feature detection and browser sniffing are two sides of a coin.1267

But one of them is bad, and one of them is good.1274

Browser sniffing is bad--bad, bad, bad.1276

It kind of comes from a good motivation, because you are coming from the principles1280

of graceful degradation and progressive enhancement (sort of), because you have to look at the distinctions1284

between user agents and send content intelligently, and make sure1290

that a website is not just going to break if it runs into something it can't handle.1294

But if you are using browser sniffing to do that, it is actually very problematic and unreliable.1300

Most browser sniffing is done based on the user agent string, which is incredibly complicated,1306

and just confusing, and also changes for every single version of every browser--1312

so, every alpha version, every update, every security update...1318

And then, some browsers pretend to be other browsers.1322

For example, in Opera, you can set whatever user agent string you want.1326

So, you can be browsing with Opera, and websites would be denying Opera access, because it was a site coded for Internet Explorer.1332

And so, you would go into a little dropdown in Opera and select Display Internet Explorer User Agent.1340

And then, you would get fed the Internet Explorer code, because you are pretending to be Internet Explorer.1345

So, it is completely unreliable--not to mention that users can create their own user agent strings.1350

And there is just an endless number of browsers; it would be impossible to reliably keep track of all of them.1357

There are literally thousands, probably hundreds of thousands, of them.1364

Feature detection is much, much better.1369

What that does is: you have a particular feature that you are going to implement (say Flash or JavaScript):1373

you can very easily check to see if the browser supports that.1379

Some of them are built in, like in JavaScript; you can use the noscript tag.1383

And if your browser doesn't have JavaScript enabled, or it doesn't support JavaScript, then the noscript content will be displayed; otherwise, it won't.1387

There are more complicated things: for example, if you are dealing with a particular type of JavaScript method that is new,1398

you can do tests to see if the browser supports that particular method before using it.1405

And if it doesn't, then you can give fallback content.1409

And you can even use JavaScript to test to see if your browser supports new HTML elements.1413

So, for example, the HTML5 specification has introduced the email input type.1419

Input is an existing HTML element; it has been around forever.1427

But this email type of input is new, and not all browsers support it.1431

So, you could use this code; what you do is give the input an ID, and you grab it here, so that you can define a variable for it.1435

This is just JavaScript getting hold of the input element.1448

And then, what you do is: you take that element right here, and you go to Set Attribute.1455

And you set the attribute as email; that makes it the email type, which is what we want to check.1461

And then, this just sets the input one again.1467

So, you are setting the attribute of this to email, and setting it here again.1471

What that does is: it is creating this input element in the DOM.1478

And it is sort of a fake creation of it; but then, the browser actually will try and create it in the DOM, as well--not just JavaScript, but using the browser.1484

And if it doesn't support the email type, then the behavior for adding a type that isn't there is to just go back to text.1494

Then, you can check right here, very simply, if the type of that element is text.1507

That means that it has defaulted back, because it doesn't understand email.1515

And between here and here, whatever code you put right here--you can send particular information to a browser, and you'll know that they won't support email.1518

And then, you can put else conditions in and give code that actually makes use of the email tag.1529

And so, you can do this with not just this, but with lots of different things.1537

You can look up how to do it.1540

And it is a good idea to test for support of features, instead of just making assumptions based on the browser type, name, user agent, or things like that.1542

Another great thing you can do is use Modernizr: note, the spelling here is -zr, not -zer.1552

And they have created a big JavaScript library that detects browser support for most of the major browser features:1560

a lot of this sort of thing, and a lot of JavaScript stuff.1569

And so, you can just use their code ahead of time, prepared.1572

And it will automatically do a lot of this for you.1575

I am going to leave you with a little quote by Tim Berners-Lee, who invented the Internet.1582

He said, "Anyone who slaps a 'This page is best viewed with Browser X' label on a web page1586

appears to be yearning for the 'bad old days' before the Web,1592

when you had very little chance of reading a document written1595

on another computer, another word processor, or another network."1598

And that is the whole idea of interoperability.1602

Thanks for watching Educator.com.1606

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.