intro to modern web technology
TRANSCRIPT
wintellect.comconsulting training design debugging
Intro To Modern Web Technology
Chris [email protected]
Copyright © 2010 – V1
wintellect.comconsulting training design debugging
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.
Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning
Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences
Design• User Experience Design• Visual & Content Design• Video & Animation Production
what we do
who we are
how we do it
consulting training debuggingdesign
wintellect.comconsulting training design debugging
• Start Mobile/Touch First• HTML5• CSS3• AJAX/JavaScript
• And We Only have 75 Minutes!
Modern Web Technology
wintellect.comconsulting training design debugging
• Semantic Markup• Forms• Geolocation• WebStorage• Canvas• Offline
HTML5
wintellect.comconsulting training design debugging
• New Tags to Better Represent Content Organization
• SECTION• ARTICLE• MENU – NAV• ASIDE• FOOTER• More…
Semantic Markup
wintellect.comconsulting training design debugging
Semantic Markup
<
<HEADER/>
<ARTICLE/>
<NAV/>
<FOOTER/>
<SECTION/>
wintellect.comconsulting training design debugging
• Input Types– Number, Phone, Email, – Date, Color, …
• Validation• Required• AutoFocus• PlaceHolder• AutoCorrect• More
HTML5 Form Improvements
wintellect.comconsulting training design debugging
• Retrieve User’s Location• getCurrentPosition• watchPosition• clearWatch• PositionOptions
– enableHighAccuracy– Timeout– maximumAge
Geo-Location
wintellect.comconsulting training design debugging
• Allows You to Keep Data Locally in a Hash Table– localStorage– sessionStorage
• Approximately 5MB• Replace Cookies• Great For Caching
Web Storage
wintellect.comconsulting training design debugging
• Draw Graphics on the Fly via Scripting
• Provides a 2D Drawing Surface
• Controllable By JavaScript
• Extremely Fast• Great For Games!
Canvas
wintellect.comconsulting training design debugging
• Shapes• Transforms• Transitions• Animations• Gradients
CSS3
wintellect.comconsulting training design debugging
• AJAX– JavaScript Engines Vastly Improved– Many New Hardware APIs
• File Access• Page Visibility• Web Sockets• Full Screen• Web Workers• Many Others
AJAX/JavaScript
wintellect.comconsulting training design debugging
• Single Page Application– Brings HTML5, CSS3 & AJAX Together– Provides Rich User Experience– Improves Performance– Relies on Application API (REST, Web API)
AJAX/JavaScript
wintellect.comconsulting training design debugging
Single Page Applications
Home
Categories Post
Events ContactBio
wintellect.comconsulting training design debugging
Single Page Applications
HomeCategory
wintellect.comconsulting training design debugging
• Allows The App To Run When Disconnected– Application Manifest– Provides Event Model
• Do Not Confuse With Browser Cache• Only Updates Files When Manifest Changes
Offline
wintellect.comconsulting training design debugging
Offline
Checking
Download
Checking
Progress
Bio
Cached
No Update Download
Progress
Cached
First Time No Manifest Update Manifest Updated
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
• Modern Web Offers Many New Features• New Opportunities for Rich User
Experiences• Can Implement Today
Conclusion
