CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 1 Introduction & CSSJan 20, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Thursday, January 20, 2011References2http://meiert.com/en/indices/css-properties/List of CSS Propertieshttp://www.csszengarden.com/Zen garden - exampleshttp://www.w3.org/TR/css3-selectors/CSS 3 SelectorsCS 683 Lecture notes, http://www.eli.sdsu.edu/courses/fall04/cs683/notes/index.htmlThursday, January 20, 20113Course IntroThursday, January 20, 2011HTML 5 Demos4http://www.youtube.com/watch?v=S5aJAaGZIvkhttp://bodybrowser.googlelabs.com/ (WebGL)Thursday, January 20, 2011Course Issues5http://www.eli.sdsu.edu/courses/index.htmlCrashingCourse Web SiteWikiScreen CastsPrerequisitesGradingThursday, January 20, 2011Topics6CSSJavascripthtml5Exam5 weeksjQuery mobilePhonegapExam5 weeksAndroidExam5 weeksThursday, January 20, 2011What do you need to know7Java - for Android developmentHTML basicsThere will lots of material and not much timeThursday, January 20, 2011Grading8Assignments55%CSS, JavaScript, HTML5 Exam Feb 2215%jQuery Mobile, Phonegap Exam Apr 515%Android Exam May 1915%Thursday, January 20, 2011Twitterrific9Estimated development cost - $250,000Thursday, January 20, 2011Mobile Market World Wide106.9 Billion people - world population5.2 Billion active mobile phone subscriptions3.7 Billion unique phone users4 Billion people have access to mobile phones4.2 Billion mobile phones in use96% of phones have web browser (html or WAP)72% of phones have web broswer16% of phones are smartThursday, January 20, 2011Reference: The Insider's Guide to Mobile, Tomi Ahonen, January 2011, Lulu.com, http://www.lulu.com/product/ebook/insiders-guide-to-mobile-free-edition/14591083Handset sales world 2010 - Estimate11CompanyMarket ShareNokia32%Samsung21%LG9%Apple4%RIM4%ZTE4%Thursday, January 20, 2011Source:Lets Understand the Mobile Phone Market, installed base and smartphones vs dumbphones, Tomi Ahonen, http://communities-dominate.blogs.com/brands/2010/12/lets-understand-the-mobile-phone-market-installed-base-and-smartphones-vs-dumbphones.htmlSmartPhone OS market share 2010 - Estimate12OSMarket ShareNokia Symbian39%Google Android21%Apple iOS15%RIM Blackberry15%Microsoft Widows MobilePhone 74%Samsung Bada2%Thursday, January 20, 2011Source:Lets Understand the Mobile Phone Market, installed base and smartphones vs dumbphones, Tomi Ahonen, http://communities-dominate.blogs.com/brands/2010/12/lets-understand-the-mobile-phone-market-installed-base-and-smartphones-vs-dumbphones.htmlIt is hard to get a good estimate of iOS market share. Some estimates only include iPhone, others include iPhone and iPod touch and still others include iPhone, iPod touch and iPad. I believe the above estimate only includes iPhones, but am not sure. Other estimates have put iOS slightly ahead of Android for the year.Development Language13Symbian - C++iOS - Objective CAndroid - JavaBlackberry - JavaMicrosoft Widows MobilePhone 7 C# (.Net languages)Samsung Bada - C++Thursday, January 20, 2011Goals14Web Apps for mobile devicesCross-platform native mobile appsThursday, January 20, 2011Web Pages on iPhone15Normal Optimized for Mobile Thursday, January 20, 2011Web Pages on iPhone16Using iPhone UI componentsThursday, January 20, 2011Optimized Website for iPad17Thursday, January 20, 2011Web Apps for mobile devices18HTML5 Local storageOff-line appsNew tags for cleaner pagesCanvas - 2D graphicsaudio & video without pluginsWebsockets - cleaner ajaxCSSMobile look & feelJavascriptBehavior jQuery MobileJavascript libraryMobile widgets & behaviorThursday, January 20, 2011Cross-platform native mobile apps19Mobile SDK supports web view in native appiPhone, Android, Blackberry, Symbian, PalmMake entire app in web views Wrap in native appSame code base for all platformsThursday, January 20, 2011Cross-platform Development Systems20Titanium Appcelertor (HTML5, CSS3 and Javascript)http://www.appcelerator.com/PhoneGap (HTML5, CSS3 and Javascript) http://www.phonegap.com/RhoMobile (Ruby)http://rhomobile.com/WidgetPad (HTML5, CSS3 and Javascript)http://widgetpad.com/MoSync (C/C++)http://www.mosync.com/Thursday, January 20, 2011Cross-platform Development Systems21Whoop (WYSIWYG web editor)http://www.whoop.com/Vaayoo (drag & drop, wizards)http://www.vaayoo.com/appMobi (develop in Chrome web browser)http://www.appmobi.com/Number of game oriented platforms existThursday, January 20, 2011Plan22CSS basicsJavascript basicsHTML 5 featuresMobile web pages with jQueryCross platform apps with PhoneGapAndroidThursday, January 20, 201123HTML OverviewThursday, January 20, 2011HTML Apps24Content PresentationBehaviorHTML CSSJavascriptThursday, January 20, 2011Content25<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>SamplePage</title> </head> <body> <header>About Cats</header> <article>Cats have fur!</article> <footer>The End</footer> </body></html>Thursday, January 20, 2011Presentation26header{ text-align: center; color: blue; font-size: large;}footer{ color: red; font-size: x-small; position: relative; top: 8pt; border-top: 1pt solid;}<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>SamplePage</title> <link rel="Stylesheet" href="Sample.css" type="text/css" media="screen" /> </head> <body> <header>About Cats</header> <article>Cats have fur!</article> <footer>The End</footer> </body></html>Sample.cssThursday, January 20, 2011Behavior27<html><head><script type="text/javascript">function show_alert(){alert("I am an alert box!");}</script></head><body><input type="button" onclick="show_alert()" value="Show alert box" /></body></html>Thursday, January 20, 2011Example from http://www.w3schools.com/js/js_popup.asp28CSS BasicsThursday, January 20, 201129Cascading Style Sheets - CSShttp://meiert.com/en/indices/css-properties/List of CSS Propertieshttp://www.csszengarden.com/Zen garden - exampleshttp://www.w3.org/TR/css3-selectors/CSS 3 SelectorsThursday, January 20, 2011Zen Garden - Walk in the Garden30Thursday, January 20, 2011Zen Garden - CSS Co., Ltd.31Thursday, January 20, 2011Embedding a Style Sheet32<!DOCTYPE html <html xml:lang="en"><head> <title>Sample</title> <style type="text/css" media="all"> <!-- p.code { margin: 0 .5in 0