Beruflich Dokumente
Kultur Dokumente
LAB CONFIGURATION
This course should be taught in a lab containing networked computers where
students can develop their skills through hands-on experience with an HTML
editor and/or a development tool such as Microsoft Visual Studio Express and a
variety of Web browsers.
The lab configuration consists of:
A single Web server with student access to individual folders
A single instructor computer running Microsoft Windows 7
Professional or Ultimate, and Windows 8 in a dual-boot configuration
or Windows 8 in a virtual machine
Note: At the time this guide was written, the latest version of Internet
Explorer 10 ran only in Windows 8 Release Preview; Windows 8
wasnt yet available. The preview version of Internet Explorer 10 for
Windows 7 did not include updates and therefore lacked support for
several elements, properties, and attributes covered in the textbook.
Student lab computers running Windows 7 Professional or Ultimate
It is essential that both the instructor and student computers have access to the
Internet. Many of the hands-on samples and exercises require access to the
Internet. In addition, besides allowing http/https, students and the instructor will
also need FTP connections to a Web server for a few exercises.
The following are suggested naming conventions for the lab computers:
Page 2 of 11
Hardware Requirements
Minimum: 1 gigahertz (GHz) or faster 32-bit (x86) or 64-bit (x64)
processor
Minimum: 1 gigabyte (GB) RAM (32-bit) or 2 GB RAM (64-bit)
Recommended: 160 GB available hard disk space
DVD drive
USB port
Microsoft DirectX 9 graphics device with WDDM 1.0 or higher driver
Touch screen that supports multitouch; must be able to display
1024x768 at a minimum
Keyboard
Mouse
Network interface adapter
Internet access
Software Requirements
All of the software listed below is required for this course:
Microsoft Windows 7 Professional or Ultimate
Microsoft Windows 8 in a dual-boot configuration with Windows 7, or
Windows 8 running in a virtual machine
Note: All tools run in Windows 7; however, some lab exercises require
Internet Explorer 10, which is available only in Windows 8 as of this
writing.
The latest editions or versions of the following Web browsers:
o Microsoft Internet Explorer 9
o Microsoft Internet Explorer 10 (installs with Windows 8; will
be available for Windows 7 in 2013)
o Mozilla Firefox
o Opera
o Google Chrome
o Apple Safari
Page 3 of 11
Hardware Requirements
Minimum: 1 gigahertz (GHz) or faster 32-bit (x86) or 64-bit (x64)
processor
Minimum: 1 gigabyte (GB) RAM (32-bit) or 2 GB RAM (64-bit)
Recommended: 160 GB available hard disk space
DVD drive
USB port
Microsoft DirectX 9 graphics device with WDDM 1.0 or higher driver
Monitor/display:
o Recommended: Touch screen that supports multitouch; must
be able to display 1024x768 at a minimum
o Minimum: Super VGA (1024x768) display
Keyboard
Mouse
Network interface adapter
Internet access
Software Requirements
All of the software listed below is required for the course:
Microsoft Windows 7 Professional or Ultimate in a dual-boot
configuration with Windows 8, or Windows 8 running in a virtual
machine
Note: All tools run in Windows 7; however, some lab exercises require
the Internet Explorer 10, which is available only in Windows 8 as of
this writing. When this guide was written, the latest version of Internet
Explorer 10 ran only in Windows 8 Release Preview; Windows 8
wasnt yet available. The preview version of Internet Explorer 10 for
Windows 7 did not include updates and therefore lacked support for
several elements, properties, and attributes covered in the textbook.
The latest editions or versions of the following Web browsers:
o Microsoft Internet Explorer 9
o Microsoft Internet Explorer 10 (installs with Windows 8; you
may install in Windows 7 when a download for Windows 7
becomes available)
o Mozilla Firefox
o Opera
o Google Chrome
o Apple Safari
Page 4 of 11
General
Bing: http://www.bing.com
Microsoft: http://www.microsoft.com
Lesson 1
Downloads for Metro style app development:
http://msdn.microsoft.com/en-US/windows/apps/br229516
Beginner Developer Learning Center: http://msdn.microsoft.com/en-
us/beginner/default.aspx
HTML/CSS for Metro style apps: http://msdn.microsoft.com/en-
US/library/windows/apps/br229576
Microsoft Developer Network: http://msdn.microsoft.com/en-
us/default.aspx
W3C HTML5 standard: http://www.w3.org/TR/html5/
W3Schools.com HTML5 tutorials:
http://www.w3schools.com/html5/default.asp
Microsoft Visual Studio:
http://www.microsoft.com/visualstudio/eng/products/visual-studio-
overview
HTML, CSS, and JavaScript features and differences:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx
Developer Code Samples:
http://code.msdn.microsoft.com/site/search?f[0].Type=Technology&f[0
].Value=HTML5
App packages and deployment: http://msdn.microsoft.com/en-
us/library/windows/apps/hh464929.aspx
Storing and retrieving state efficiently: http://msdn.microsoft.com/en-
us/library/windows/apps/Hh781225.aspx
Touch interaction design: http://msdn.microsoft.com/en-
us/library/windows/apps/hh465415
W3C Touch Events version 2 specification:
http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
Responding to user interaction: http://msdn.microsoft.com/en-
us/library/windows/apps/hh700412.aspx
W3C Markup Validation Service: http://validator.w3.org/
W3C link checker: http://validator.w3.org/checklink
W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/
Page 5 of 11
Lesson 2
A list of entities supported in HTML5: http://dev.w3.org/html5/html-
author/charref
W3C Markup Validation Service: http://validator.w3.org
Learn HTML5 in 5 Minutes!: http://msdn.microsoft.com/en-
us/hh549253
W3C HTML elements:
http://dev.w3.org/html5/markup/elements.html#elements
W3C HTML5, displaying images on Web pages:
http://www.w3.org/TR/2011/WD-html5-20110525/embedded-content-
1.html#the-img-element
W3C image maps:
http://www.w3.org/TR/html401/struct/objects.html#h-13.6
Microsoft HTML5 Graphics: http://msdn.microsoft.com/en-
us/library/gg589511(v=VS.85).aspx
HTMLCenter: http://www.htmlcenter.com/blog/rgb-color-chart/
W3C SVG attribute index: http://www.w3.org/TR/SVG/attindex.html
SVG (Microsoft): http://msdn.microsoft.com/en-
us/library/gg589525(v=vs.85).aspx
How To Choose Between SVG and Canvas:
http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
HTML5 Video: http://www.w3schools.com/html5/html5_video.asp
FlashKit: http://flashkit.com
Public Domain Sherpa: http://www.publicdomainsherpa.com/public-
domain-recordings.html
Add audio and video to your webpage: http://msdn.microsoft.com/en-
us/library/ie/hh771805(v=vs.85).aspx
Lesson 3
HTML global attributes: http://dev.w3.org/html5/markup/global-
attributes.html
When can I use: http://caniuse.com
The HTML5 Test: http://html5test.com
W3C Markup Validation Service: http://validator.w3.org
Learn HTML5 in 5 Minutes!: http://msdn.microsoft.com/en-
us/hh549253
W3C HTML elements:
http://dev.w3.org/html5/markup/elements.html#elements
HTML Color Names:
http://www.w3schools.com/html/html_colornames.asp
W3C HTML5 input element: http://www.w3.org/TR/2011/WD-html5-
20110525/the-input-element.html#the-input-element
Page 6 of 11
Lesson 4
CSS Color Names:
http://www.w3schools.com/cssref/css_colornames.asp
Cascading Style Sheets: http://msdn.microsoft.com/en-
us/library/ms531205(v=vs.85).aspx
CSS Tutorial: http://www.w3schools.com/css/default.asp
W3schools.com CSS display Property:
http://www.w3schools.com/cssref/pr_class_display.asp
CSS float: http://www.w3schools.com/css/css_float.asp
CSS Positioning: http://www.w3schools.com/css/css_positioning.asp
CSS position property:
http://www.w3schools.com/cssref/pr_class_position.asp
CSS overflow property:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Lesson 5
New York Times Web site: www.nytimes.com
W3C CSS Flexible Box Layout Module: http://www.w3.org/TR/css3-
flexbox/
Flexin: http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html
[no longer valid]
CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/
Lesson 6
CSS3 regions: Rich page layout with HTML and CSS3:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
CSS: http://msdn.microsoft.com/en-
us/library/hh673536(v=VS.85).aspx
CSS Regions Module Level 3: http://dev.w3.org/csswg/css6-regions/
CSS Regions test drive:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-
on_regions.htm (Note: This page may require Internet Explorer 10 for
proper rendering.)
CSS Regions Module Level 3, Multi-column regions section:
http://dev.w3.org/csswg/css3-regions/#multi-column-regions
CSS3 multi-column Properties:
http://www.w3schools.com/cssref/default.asp#multicol
HTML Language Code Reference:
http://www.w3schools.com/tags/ref_language_codes.asp
W3C CSS Text Level 3, Hyphenation section:
http://dev.w3.org/csswg/css3-text/#hyphenation
Hyphenation: http://msdn.microsoft.com/en-
us/library/ie/hh673547(v=vs.85).aspx
CSS Exclusions and Shapes Module Level 3:
http://dev.w3.org/csswg/css3-exclusions/
Exclusions: http://msdn.microsoft.com/en-
us/library/ie/hh673558(v=vs.85).aspx
Page 7 of 11
Lesson 7
Hands-on: border-radius:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-
on_border-radius.htm
CSS Image Values and Replaced Content Module Level 3, repeating
gradients section: http://dev.w3.org/csswg/css3-images/#repeating-
gradients
Explore new ideas in website design and layout:
http://msdn.microsoft.com/en-us/library/ie/hh771815(v=vs.85).aspx
CSS Color Module Level 3: http://www.w3.org/TR/css3-color/
WOFF specification: http://www.w3.org/TR/WOFF/
Fonts on the Web: http://www.w3.org/Fonts/
WOFF Frequently Asked Questions: http://www.w3.org/Fonts/WOFF-
FAQ.html
Lesson 8
JavaScript Tutorial: http://www.w3schools.com/js/default.asp
Lesson 9
Animations and Transitions: http://msdn.microsoft.com/en-
us/library/windows/desktop/aa511285.aspx
Animating your UI (Windows Store apps using JavaScript and HTML):
http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx
A Beginners Guide to Using the Application Cache:
http://www.html5rocks.com/en/tutorials/appcache/beginner/
Lesson 10
Touch Events version 2 specification:
https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
WHATWG: http://developers.whatwg.org/
Geolocation: http://bit.ly/IZ7Lut
12 Cool HTML5 Geolocation Ideas: http://msdn.microsoft.com/en-
us/magazine/hh563893.aspx
WebSockets: http://msdn.microsoft.com/en-
us/library/ie/hh673567(v=vs.85).aspx
Windows API Reference for Windows Store apps:
http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx
HTML5 Web Storage: http://msdn.microsoft.com/en-
us/library/windows/apps/hh779848.aspx
Quickstart: detecting location using HTML5:
http://msdn.microsoft.com/en-us/library/windows/apps/hh452746.aspx
Quickstart: Responding to user movement with the accelerometer:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465265.aspx
Quickstart: capturing a photo or video using the camera dialog:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465152.aspx
Creating Windows Runtime Components:
http://msdn.microsoft.com/en-us/library/windows/apps/hh441572.aspx
Page 8 of 11
Lesson 1
Microsoft Internet Explorer 9 was used to show examples in Lesson 1. The
authors used Visual Studio 11 Express Beta for Web to create most samples in
the textbook. Microsoft Visual Studio 12 and Visual Studio 12 Express were not
available when the book was being written.
Page 10 of 11
Lesson 2
Internet Explorer 9 was used to test and show all of the examples in Lesson 2.
Its suggested that you provide examples of the audio and video elements at
the end of this lesson, so you should find suitable audio and video files prior to
class.
Lesson 3
Internet Explorer 9 was used for most examples in Lesson 3. Mozilla Firefox
was used to show placeholders in the Create a Simple Web Form exercise and
validation error messages in the Understanding Validation section. Internet
Explorer 9 does not support the placeholder or required attributes of the
input element; you could use Internet Explorer 10 to demonstrate these
attributes. If an element or attribute doesnt display in Internet Explorer 9, you
can use the When Can I Use Web page at caniuse.com, which lists many
HTML5 elements and attributes and indicates which Web browsers support
them.
Lesson 4
There are no specific notes for Chapter 4.
Lesson 5
When the textbook was written, Internet Explorer 9 supported some flexbox
properties and attributes but did not display grid layouts. Google Chrome
displayed flexboxes most reliably, and was used to display the flex-wrap,
flex-flow, and flex-order examples in the book. Internet Explorer 10
provided some support for grid layouts. You can use the When Can I Use Web
page at caniuse.com, which lists many CSS3 properties and indicates which
Web browsers support them.
The CSS Flexible Box Layout Module and the CSS3 Grid Layout specifications
have been undergoing significant changes. You should browse the CSS Flexible
Box Layout Module Web page at http://www.w3.org/TR/css3-flexbox/ and the
CSS3 Grid Layout Web page at http://www.w3.org/TR/css3-grid-layout/ before
teaching this lesson.
Lesson 6
The CSS Regions specification is a work in progress and has not been widely
adopted by browser vendors. As of this writing, Internet Explorer 9 does not
support CSS Regions; Internet Explorer 10 provides some support for CSS
Regions using the -ms-flow-from construct. Chrome partially supports CSS
Regions with the -webkit- prefix, but you must first enable the feature in the
browsers Properties dialog box per the CSS Regions exercise in the textbook.
Consult the When Can I Use Web page at caniuse.com to check the status of
Web browser support.
Because of support issues for hyphenation in Internet Explorer 9 and 10, the
examples in the book were tested using the Firefox Web browser.
The CSS Exclusions specification is preliminary as of this writing. The authors
were not able to reliably display a CSS Exclusion in any of the major Web
browsers. The Microsoft Exclusions Web site states that the properties and
Page 11 of 11
syntax defined in the CSS Exclusions specification might not correspond exactly
to those described in this topic. As development on the specification continues,
this might change.
Lesson 7
Internet Explorer 9 was used to show about half of the examples in Lesson 7. A
Webkit browser was used to show perspective, transition, animation, and SVG
examples, which didnt render properly in Internet Explorer 9 or 10.
Lesson 8
There are no specific notes for Chapter 4.
Lesson 9
Internet Explorer 9 was used to show most of the examples in Lesson 9. The
authors used the Mozilla Firefox browser to show the local file access example;
you can also use Internet Explorer 10 to display the feature.
To enable students to send and receive data using XMLHttpRequest requires
a dynamic Web server and server-side programming. The Access Data exercise
in the Sending and Receiving Data section of the textbook does not require
Web server access.
For the AppCache exercise, you must first configure the Web server with the
correct MIME type, which is text/cache-manifest. In addition, the preferred file
extension for manifest files is .appcache.
Cookies can only be enabled for Web pages accessed through the network, not
locally. You must first set up the Web server with folders unique to each user.
Students should have read and write access to their folder. They will use a file
transfer program to upload an HTML file to the Web server to test cookies.
Lesson 10
Internet Explorer 9 was used to show most of the examples in Lesson 10. The
authors used the Mozilla Firefox browser to show Web Worker and WebSocket
examples; Internet Explorer browsers do not support these APIs as of this
writing.