Teaching Web Development on Shifting Sands

Presenter: Sasha Vodnik, Cengage Learning Author 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.

1.0x

Teaching Web Development on Shifting Sands

Created 2 years ago

Duration 0:00:00
lesson view count 66
Presenter: Sasha Vodnik, Cengage Learning Author 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.
Select the file type you wish to download
Slide Content
  1. Teaching Web Development on Shifting Sands

    Slide 1 - Teaching Web Development on Shifting Sands

    • Sasha Vodnik, Cengage Learning Author
  2. Agenda

    Slide 2 - Agenda

    • Dig into the issues
    • Explore tools
    • Share approaches
    • 2015 Cengage Learning Computing Conference
    • 2
  3. The biggest challenge I face in teaching evolving web standards is _____________.

    Slide 3 - The biggest challenge I face in teaching evolving web standards is _____________.

    • 2015 Cengage Learning Computing Conference
    • 3
    • 1. Issues
  4. Evolution of the Web

    Slide 4 - Evolution of the Web

    • 2015 Cengage Learning Computing Conference
    • 4
    • Source: evolutionoftheweb.com
    • 1. Issues
  5. Web 2.0

    Slide 5 - Web 2.0

    • 2015 Cengage Learning Computing Conference
    • 5
    • Source: en.wikipedia.org/wiki/File:Web_2.0_Map.svg
    • 1. Issues
  6. HTML5

    Slide 6 - HTML5

    • 2015 Cengage Learning Computing Conference
    • 6
    • Source: kaazing.com
    • 1. Issues
  7. Browser usage

    Slide 7 - Browser usage

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

    Slide 8 - Browser versions

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

    Slide 9 - Browser versions

    • 2015 Cengage Learning Computing Conference
    • 9
    • 1. Issues
    • Source: visualwebz.com/website-resources/browser-history.jpg
  10. Devices

    Slide 10 - Devices

    • 2015 Cengage Learning Computing Conference
    • 10
    • 1. Issues
  11. Devices + Browsers

    Slide 11 - Devices + Browsers

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

    Slide 12 - 2015 Cengage Learning Computing Conference

    • 12
    • 2. Tools
    • Source: psdgraphics.com
  13. 2015 Cengage Learning Computing Conference

    Slide 13 - 2015 Cengage Learning Computing Conference

    • 13
    • 2. Tools
    • Source: seda.sk.ca
  14. Cutting Edge Code

    Slide 14 - Cutting Edge Code

    • 2015 Cengage Learning Computing Conference
    • 14
    • 2. Tools
    • +
    • /
    • media queries
    • +
    • respond.js
    • +
    • or
    • babeljs.io
    • Traceur
    • ECMAScript 6
  15. Lowest Common Denominator

    Slide 15 - Lowest Common Denominator

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

    Slide 16 - Responsive Design

    • 2015 Cengage Learning Computing Conference
    • 16
    • 2. Tools
  17. Mobile First Design

    Slide 17 - Mobile First Design

    • 2015 Cengage Learning Computing Conference
    • 17
    • 2. Tools
  18. Understand Your Audience

    Slide 18 - Understand Your Audience

    • 2015 Cengage Learning Computing Conference
    • 18
    • 2. Tools
    • Source: en.wikipedia.org/wiki/File:Countries_by_most_used_web_browser_in_July_2014.svg
    • Countries by most used web browser, July 2014
  19. Understand Your Audience

    Slide 19 - Understand Your Audience

    • 2015 Cengage Learning Computing Conference
    • 19
    • 2. Tools
    • Source: geography.oii.ox.ac.uk/2013/09/age-of-internet-empires/
  20. 2015 Cengage Learning Computing Conference

    Slide 20 - 2015 Cengage Learning Computing Conference

    • 20
    • 3. Approaches
    • I teach only HTML
    • I teach only XHTML
    • I teach them both
  21. 2015 Cengage Learning Computing Conference

    Slide 21 - 2015 Cengage Learning Computing Conference

    • 21
    • caniuse.com
    • developer.mozilla.org (Mozilla Developer Network)
    • quirksmode.org
    • The Mobile Web Handbook by Peter-Paul Koch
    • Resources
    • Questions/comments: @sashavodnik