It's ok, you can create kick ass web
-
Upload
chris-love -
Category
Technology
-
view
4.029 -
download
1
description
Transcript of It's ok, you can create kick ass web
![Page 1: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/1.jpg)
It's OK, You Can Create Kick-Ass Web AppsCHRIS LOVE
@CHRISLOVE
PROFESSIONALASPNET.COM
![Page 2: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/2.jpg)
Slide Deck & Source Code
Slide Deck – http://slideshare.com/docluv
Source Code – http://GitHub.com/docluv
![Page 3: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/3.jpg)
What’s Wrong With The Web?
Clinging to Yesterday’s Architecture
![Page 4: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/4.jpg)
Not Embracing Customer Trends
![Page 5: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/5.jpg)
Not Embracing Customer Trends
![Page 6: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/6.jpg)
Not Developing Mobile/Touch First
“designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.”
Luke Wroblewski
![Page 7: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/7.jpg)
Not Developing Mobile/Touch First
Legacy UI will not work anymore. Users now expect to touch their data, not click an application. Applications should encourage direct, personal interaction with data to end users in a more intimate way than previously imagined. The abstraction needed in the past that was the personal computer can now be considered almost transparent and no longer an awkward barrier between a consumer and their information.
![Page 8: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/8.jpg)
Not Developing Mobile/Touch First
http://bit.ly/aD1dr3
![Page 9: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/9.jpg)
Also Consider the CloudApplication Clients are Almost Always ConnectedThe Cloud Enables Optimized Data InteractionEnterprise Can Virtualize Authentication
![Page 10: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/10.jpg)
Not Architecting For Use Context
http://bit.ly/aD1dr3
![Page 11: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/11.jpg)
Not Leveraging Modern Web Technologies
“Facebook uses an XML-based abstract component framework to encapsulate the details of presentation layer rendering. They shared an example of a button, which they suggested would be written as this in their markup”
http://bit.ly/UGREM7
“Our biggest shock: much of the application was still raw HTML pages.”
http://bit.ly/XaKht5
![Page 12: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/12.jpg)
The World Is An API – Use JSON Build Data APIs Retrieve JSON – its more efficient Leverage Client-Side Templates to Build Markup as needed Leverage Client-Side Storage
![Page 13: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/13.jpg)
HTML5
Forms Geolocation WebStorage Offline
![Page 14: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/14.jpg)
HTML5 Form Improvements Input Types◦Number, Phone, Email,
◦Date, Color, … Validation Required
AutoFocus PlaceHolder AutoCorrect More
![Page 15: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/15.jpg)
Geo-Location Retrieve User’s Location getCurrentPosition watchPosition clearWatch PositionOptions
◦ enableHighAccuracy◦ Timeout◦ maximumAge
![Page 16: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/16.jpg)
Web Storage Allows You to Keep Data Locally in a Hash Table◦ localStorage◦ sessionStorage
Approximately 5MB Replace Cookies Great For Caching
![Page 17: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/17.jpg)
Web Storage - IndexDB A Client-Side Document Database Similar to MongoDB, RavenDB, CouchDB, etc. Typically 50 MB Client-Side Storage Good for Offline Applications
![Page 18: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/18.jpg)
CSS3 Shapes Transforms Transitions Animations Gradients
![Page 19: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/19.jpg)
JavaScript Engines Vastly Improved
![Page 20: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/20.jpg)
New APIs◦ File Access◦ Page Visibility◦ Web Sockets◦ Full Screen◦ Web Workers◦ Many Others
![Page 21: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/21.jpg)
AJAX/JavaScript Single Page Application
◦Brings HTML5, CSS3 & AJAX Together◦Provides Rich User Experience◦Improves Performance◦Relies on Application API (REST, Web API)
![Page 22: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/22.jpg)
Single Page Apps
Home
Categories Post
Events ContactBio
![Page 23: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/23.jpg)
Single Page Apps
HomeCategory
![Page 24: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/24.jpg)
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
![Page 25: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/25.jpg)
Offline
Checking
Download
Checking
Progress
Bio
Cached
No Update Download
Progress
Cached
First Time No Manifest Update Manifest Updated
![Page 26: It's ok, you can create kick ass web](https://reader035.fdocuments.in/reader035/viewer/2022062703/5555c7a8d8b42aaf158b48bf/html5/thumbnails/26.jpg)
OfflineCACHE 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