Intro to modern web technology

  • 571 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
571
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Intro To Modern Web Technology Chris Love @ChrisLove Professionalaspnet.com Copyright © 2010 – V1consulting 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 Productionconsulting 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 • Offlineconsulting 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 • Moreconsulting training design debugging wintellect.com
  • 8. Geo-Location • Retrieve User’s Location • getCurrentPosition • watchPosition • clearWatch • PositionOptions – enableHighAccuracy – Timeout – maximumAgeconsulting 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 Cachingconsulting 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 • Gradientsconsulting 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 Othersconsulting 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 Contactconsulting training design debugging wintellect.com
  • 15. Single Page Applications Category Homeconsulting 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 Changesconsulting training design debugging wintellect.com
  • 17. Offline First Time No Manifest Update Manifest Updated Checking Checking Bio Download No Update Download Progress Progress Cached Cachedconsulting training design debugging wintellect.com
  • 18. OfflineCACHE MANIFEST# version 0.0.0.1# urls go HereJs/myapp.jsNETWORK:http:example.com/apiFALLBACK:http:example.com/img /img/offline.pngconsulting training design debugging wintellect.com
  • 19. Conclusion • Modern Web Offers Many New Features • New Opportunities for Rich User Experiences • Can Implement Todayconsulting training design debugging wintellect.com
  • 20. Questions? Chris Love @ChrisLove Professionalaspnet.comconsulting training design debugging wintellect.com