1. Teaching Web Development On Shifting Sands
Modern browsers support new features with nearly every release, meaning that the web offers new possibilities to developers almost weekly. As students move into the workforce, they will need to be able to balance an employer's desire for them to implement shiny new features with maintaining support for the older browsers that may be used by some of that employer's potential customers or clients. In this session, we'll review the state of HTML and JavaScript standards and the state of browser support for them. We'll also explore common strategies for balancing use of the latest features with support for older browsers. Finally, you'll have the opportunity to share your approach to teaching your students about this aspect of web programming, and hear from other instructors about what's worked for them and what hasn't.

2. 2015 Cengage Learning Computing Conference
Agenda
Dig into the issues
Explore tools
Share approaches
2015 Cengage Learning Computing Conference

3. 2015 Cengage Learning Computing Conference
1. Issues
The biggest challenge I face in teaching evolving web standards is _____________.
Add URL to public Google Doc.
Pair and share – intro + answer to question. 90 sec each. At end, call on 2-3 volunteers to share their answer or their partner's answer to the question.
2015 Cengage Learning Computing Conference

4. 2015 Cengage Learning Computing Conference
1. Issues
Evolution of the Web
Source: evolutionoftheweb.com
2015 Cengage Learning Computing Conference

5. 2015 Cengage Learning Computing Conference
1. Issues
Web 2.0
Source: en.wikipedia.org/wiki/File:Web_2.0_Map.svg
mention DHTML as an earlier term
These terms are all attempts to point out that technologies and possibilities had moved forward at a particular point in time, but labels eventually were outpaced
2015 Cengage Learning Computing Conference

6. 2015 Cengage Learning Computing Conference
1. Issues
HTML5
Source: kaazing.com
This is from 2011, and all the lists have only grown since then. Yet it's still called HTML5! WHATWG has set aside numbering and just calls it HTML – a "living specification."
2015 Cengage Learning Computing Conference

7. 2015 Cengage Learning Computing Conference
1. Issues
Browser usage
Source: en.wikipedia.org/wiki/Usage_share_of_web_browsers
Is this right…
…or is this right?
2015 Cengage Learning Computing Conference

8. 2015 Cengage Learning Computing Conference
1. Issues
Browser versions
Source: visualwebz.com/website-resources/browser-history.jpg
2015 Cengage Learning Computing Conference

9. 2015 Cengage Learning Computing Conference
1. Issues
Browser versions
Source: visualwebz.com/website-resources/browser-history.jpg
1. Firefox and Chrome have moved to rapid release cycle – look at difference in version numbers from 2012 to 2014!
2. Chrome & Opera switched to a fork of WebKit called Blink in 2013, so instead of 3 main engines (MS, FF, and WebKit), we now have 4 (WebKit very relevant because of iOS Safari)
3. Microsoft replacing IE with a new browser in 2015! (But we'll still have to support older verions of IE!)
2015 Cengage Learning Computing Conference

10. 2015 Cengage Learning Computing Conference
1. Issues
Devices
2015 Cengage Learning Computing Conference

11. 2015 Cengage Learning Computing Conference
1. Issues
Devices + Browsers
Source: caniuse.com
Usage relative graph of support for CSS border-radius property
Usage relative graph of support for CSS border-radius property
2015 Cengage Learning Computing Conference

12. 2015 Cengage Learning Computing Conference
2. Tools
Source: psdgraphics.com
I'd love to be able to give you a magic wand to make teaching all of this easy
2015 Cengage Learning Computing Conference

13. 2015 Cengage Learning Computing Conference
2. Tools
Source: seda.sk.ca
Instead, we have a shared toolbox of techniques that are constantly being added to and improved upon
2015 Cengage Learning Computing Conference

14. 2015 Cengage Learning Computing Conference
2. Tools
Cutting Edge Code / + +
media queries
respond.js
Instead, we have a shared toolbox of techniques that are constantly being added to and improved upon + or
ECMAScript 6
babeljs.io
Traceur
2015 Cengage Learning Computing Conference

15. Lowest Common Denominator
2. Tools
Lowest Common Denominator
IE6/7
IE8
Android Browser 2.3
Opera Mini
Not supported:
HTML5 input types & attributes
border-radius (Android supports)
box-shadow …
2015 Cengage Learning Computing Conference

16. 2015 Cengage Learning Computing Conference
2. Tools
Responsive Design
Instead, we have a shared toolbox of techniques that are constantly being added to and improved upon
2015 Cengage Learning Computing Conference

17. 2015 Cengage Learning Computing Conference
2. Tools
Mobile First Design
Instead, we have a shared toolbox of techniques that are constantly being added to and improved upon
2015 Cengage Learning Computing Conference

18. Understand Your Audience
2. Tools
Understand Your Audience
Countries by most used web browser, July 2014
Instead, we have a shared toolbox of techniques that are constantly being added to and improved upon
Source: en.wikipedia.org/wiki/File:Countries_by_most_used_web_browser_in_July_2014.svg
2015 Cengage Learning Computing Conference

19. Understand Your Audience
2. Tools
Understand Your Audience
Yandex & Baidu = search engines
Source: geography.oii.ox.ac.uk/2013/09/age-of-internet-empires/
2015 Cengage Learning Computing Conference

20. 2015 Cengage Learning Computing Conference
3. Approaches
I teach only XHTML
I teach only HTML
I teach them both
Stand up and move around: spectrum exercises (center is both equally)
Have Google Doc open and on screen, with room after each question for instructors to add notes/thoughts
Is it more important to you that students leave your course with skills in ______ or ______?
Do you focus your instruction more on ____ or ____?
(Get 1 or 2 comments from diff. parts of spectrum after each question)
-legacy code <-> cutting edge features (both = in center; otherwise, which do you focus on more?)
-brochureware <-> web apps
-desktop <-> mobile
-IE6 <-> IE11!
-static design <-> responsive design
-require students to test on 1 browser <-> test on 5+ browsers
-require students to test on 1 device <-> test on 4+ devices
Then come back to seats and ask what thoughts or questions people have. Invite people to add thoughts or questions to google doc, and keep it up on screen.
2015 Cengage Learning Computing Conference

21. 2015 Cengage Learning Computing Conference
Resources
caniuse.com
developer.mozilla.org (Mozilla Developer Network)
quirksmode.org
The Mobile Web Handbook by Peter-Paul Koch
2015 Cengage Learning Computing Conference