Presentation on how to chat with PDF using ChatGPT code interpreter
10 things to make you a Great Mobile Web Developer
1. 10 Things to Make You A Great Mobile Web Developer Chris Love Tellago Inc. http://ProfessionalASPNET.com http://Twitter.com/ChrisLove Now With More Code!
3. References Mobile Web Books Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd
4. 1. Know The Landscape Mobile Devices Are Prevalent Around the World SmartPhones/Devices Becoming Common Mobile Data Plans (3/4G) HTML 5 Is Here, Embrace It ;)
7. Understand the Landscape Lots of Phones Out There! Several Browsers Opera, Safari, IE, FireFox, many others you never heard of Proxy Browsers Opera Mini
8. Opera “Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web
9. Windows Phone 7 IE 9 Like Desktop Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff GPU Speed Does Not Support Touch Does Not Support Input Types http://bit.ly/ij3RAj http://bit.ly/kYOZ5W
10. 2. Determine Content Define Use Cases Order Cases by Most Frequent for Mobile Make Cases Successful within 3 clicks Always Offer Link to Desktop Site Determine if User Location Matters
11. 2. Determine Content Reduce Form Pages Avoid Welcome Screens/Splash Predict User Actions Based On History Think Local Storage/Tombstoning
12. 2. Context Where Is The User Why are They on Your Site What are they looking for What can you offer for mobile user to solve problem Where will the user be accessing the site
13. 3. UnderStand The ViewPort Viewable Area on Device May actually be very wide iPhone is actually 980pixels wide Internet Explorer Assumes 1024 pixels wide http://bit.ly/e18svU
21. 4. Progressive Enhancement Basic content is accessible to all browsers. Basic functionality is accessible to all browsers. Semantic markup contains all content. Enhanced layout is provided by externally linked CSS. Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
24. 4.b Single Page SItes Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin http://bit.ly/abippr Allows Transition Effects jQuery Mobile, jqTouch & Sencha Leverage
25. 5. Understand HTML Leverage HTML5 Semantics Realize HTML5 is much broader than Markup
30. 7. AJAX jQuery & Other Frameworks jQuery Mobile http://jQueryMobile.com Sencha Touch Drive Your Rich UI
31. 7. jQuery Mobile Provide Common Framework Across Devices Browser Capability Rating
32. 7. JS Mobile Frameworks SenchaTouch http://bit.ly/boAFA7 jQTouch Really Nice Transitions Is a Commercial Product
33. 8. Touch Gestures Fingers Are Fat 20px Spacing Primary Items Min 40px W &H Provide Quick Feedback of Touched Item Include Auto-Clear Feature for Text Inputs
35. 8. Touch Gestures TAP === Click Double Tap !== Double Click Implement a DoubleTap Detection Pattern <imgsrc="bigbutton.png" onclick="tap(tapOnce, tapTwice)" />
36. 9. Images Limit to Logo, Product or Map Do NOT use for Backgrounds Buttons Icons Compress The mandatory attributes for an img tag are src, width, height, and alt
37. 9. Inline Images IE 8+, Other newer browsers Convert to BASE64 Encoded Text Use gZip Compression This is a Data Url Can be used in CSS files