1. Intro To Modern Web Technology
Chris Love
@ChrisLove
Professionalaspnet.com
Copyright © 2010 – V1
consulting training design debugging wintellect.com

2. what we do
consulting training design debugging
who we are
Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins –
we pull out all the stops to help our customers achieve their goals through advanced
software-based consulting and training solutions.
how we do it Training
Consulting & Debugging • On-site instructor-led training
• Architecture, analysis, and design services • Virtual instructor-led training
• Full lifecycle custom software development • Devscovery conferences
• Content creation Design
• Project management • User Experience Design
• Debugging & performance tuning • Visual & Content Design
• Video & Animation Production
consulting training design debugging wintellect.com

3. Modern Web Technology
• Start Mobile/Touch First
• HTML5
• CSS3
• AJAX/JavaScript
• And We Only have 75 Minutes!
consulting training design debugging wintellect.com

4. HTML5
• Semantic Markup
• Forms
• Geolocation
• WebStorage
• Canvas
• Offline
consulting training design debugging wintellect.com

5. Semantic Markup
• New Tags to Better Represent Content
Organization
• SECTION
• ARTICLE
• MENU – NAV
• ASIDE
• FOOTER
• More…
consulting training design debugging wintellect.com

6. Semantic Markup
<SECTION/>
<HEADER/>
<NAV/>
<
<ARTICLE/>
<FOOTER/>
consulting training design debugging wintellect.com

7. HTML5 Form Improvements
• Input Types
– Number, Phone, Email,
– Date, Color, …
• Validation
• Required
• AutoFocus
• PlaceHolder
• AutoCorrect
• More
consulting training design debugging wintellect.com

8. Geo-Location
• Retrieve User’s Location
• getCurrentPosition
• watchPosition
• clearWatch
• PositionOptions
– enableHighAccuracy
– Timeout
– maximumAge
consulting training design debugging wintellect.com

9. Web Storage
• Allows You to Keep Data Locally in a Hash Table
– localStorage
– sessionStorage
• Approximately 5MB
• Replace Cookies
• Great For Caching
consulting training design debugging wintellect.com

10. Canvas
• Draw Graphics on the Fly
via Scripting
• Provides a 2D Drawing
Surface
• Controllable By JavaScript
• Extremely Fast
• Great For Games!
consulting training design debugging wintellect.com

11. CSS3
• Shapes
• Transforms
• Transitions
• Animations
• Gradients
consulting training design debugging wintellect.com

12. AJAX/JavaScript
• AJAX
– JavaScript Engines Vastly Improved
– Many New Hardware APIs
• File Access
• Page Visibility
• Web Sockets
• Full Screen
• Web Workers
• Many Others
consulting training design debugging wintellect.com

13. AJAX/JavaScript
• Single Page Application
– Brings HTML5, CSS3 & AJAX Together
– Provides Rich User Experience
– Improves Performance
– Relies on Application API (REST, Web API)
consulting training design debugging wintellect.com

14. Single Page Applications
Home
Categories Post
Events Bio Contact
consulting training design debugging wintellect.com

15. Single Page Applications
Category
Home
consulting training design debugging wintellect.com

16. Offline
• Allows The App To Run When Disconnected
– Application Manifest
– Provides Event Model
• Do Not Confuse With Browser Cache
• Only Updates Files When Manifest Changes
consulting training design debugging wintellect.com

17. Offline
First Time No Manifest Update Manifest Updated
Checking Checking Bio
Download No Update Download
Progress Progress
Cached Cached
consulting training design debugging wintellect.com

18. Offline
CACHE MANIFEST
# version 0.0.0.1
# urls go Here
Js/myapp.js
NETWORK:
http:example.com/api
FALLBACK:
http:example.com/img /img/offline.png
consulting training design debugging wintellect.com

19. Conclusion
• Modern Web Offers Many New Features
• New Opportunities for Rich User Experiences
• Can Implement Today
consulting training design debugging wintellect.com

20. Questions?
Chris Love
@ChrisLove
Professionalaspnet.com
consulting training design debugging wintellect.com