HTML5 in Plain English: What it means for SharePoint and Your Organization


Published on

HTML5 is the up and coming standard for web development. It can create rich user experiences with less effort, enhance search functionality, and ensure a more consistent experience across different platforms. But what does that have to do with SharePoint? This session will answer that questions and cover the new features that are only available in HTML5, SharePoint 2013 HTML5 mobile pages, new SharePoint branding options, and some limitations organizations face when it comes to HTML5. Demonstrations will include: a custom map SharePoint webpart, dynamic animations, a rich video experience without plugins, and more. No coding experience is needed for this presentation.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 in Plain English: What it means for SharePoint and Your Organization

  1. 1. SharePoint Saturday Chicago Suburbs - June 1st, 2013SPS EVENTSChicago-SuburbsIn Plain English: What it means for SharePointand Your OrganizationJonathan Littleton
  2. 2. SharePoint Saturday Chicago Suburbs2Agenda• Introduction• HTML5 Primer and Overview• New Functionality• New UI Features• HTML5 Limitations• Projects with HTML5• HTML5 in SharePoint• Next Steps
  3. 3. SharePoint Saturday Chicago Suburbs3SponsorsPlatinumGoldSilver
  4. 4. SharePoint Saturday Chicago Suburbs4AboutInspired thinking.Purposeful execution.Loyalty that lasts.We cultivate customerloyalty with ideas you cando, data you can use, andimpact you can see – all forthe customers you want tokeep.CustomerExperience“”CRMSalesforce.comTechnical IntegrationCustom DevelopmentAnalyticsSalesforce.comTechnical IntegrationCustom DevelopmentDigitalMobile platform development(iOS, Windows 8)SharePoint, Adobe CQHigh PerformanceContact CenterCustomer SatisfactionIVR IntegrationAs a Firm As a PracticeIt’s a fast-paced world. Fluctuatingmarket conditions, increasedregulation, industry consolidationand evolving technologies canmake “success” feel like a movingtarget. To keep up and move ahead,you must be prepared tocontinually rethink how yourorganization does business.We partner with our clients to helpthem thrive in today‘s economy: Seizing growth opportunities Understanding and focusingon the right customers Uncovering new operationalefficiencies Developing data-drivenactionable insights.The result: a clear course of actionthat confidently takes you from thegoals you want to achieve to thesuccess you’ve always imagined.
  5. 5. SharePoint Saturday Chicago Suburbs5About Me - CareerDeveloperC#CertificationsJavaScriptHTMLCSS SQLBI Solutions (SSRS + PerformancePoint)Custom Social FeaturesCustom BrandingCustom VisualStudioWorkflowsSharePoint ProjectsASP.NET2007 to 2010 UpgradesMicrosoft: Programming in HTML5with JavaScript and CSS3MCITP: Microsoft SharePoint 2010,AdministratorTS: Microsoft SharePoint 2010,ConfigurationIVR IntegrationsCustom BCS SolutionsCMS => SharePoint Migrations
  6. 6. SharePoint Saturday Chicago Suburbs6About Me - Personally
  7. 7. SharePoint Saturday Chicago Suburbs7OverviewHistory of HTML Primer, History of HTML, HTML5 Myths
  8. 8. SharePoint Saturday Chicago Suburbs8A Quick PrimerHTML CSS JavaScriptHyperTextMarkupLanguageBrowsers Readand RenderHTMLCascading StyleSheetsPrimarily StylesHTMLScriptingLanguageRuns on EndUser ComputerHyperTextMarkupLanguageBrowsers Readand RenderHTMLCascading StyleSheetsPrimarily StylesHTML
  9. 9. SharePoint Saturday Chicago Suburbs9A Little Bit of History: From HTML 1.0 to HTML51989HTML StandardProposed1991PublicallyAvailable1995First “Browser War”1996World Wide WebConsortium Founded1997First W3CRecommendation2008HTML5 Publishedas Draft
  10. 10. SharePoint Saturday Chicago Suburbs10What Exactly is HTML5?Myth RealityHTML5 Defines aToolsetHTML5 Defines aFeature/ToolHTML5 Only Appliesto HTMLCSSJavaScriptHTML HTML5 Applies toHTML, CSS, andJavaScriptCSSJavaScriptHTMLHTML5 is NewTechnologyHTML5 is a SetDefinitionsOfficial
  11. 11. SharePoint Saturday Chicago Suburbs11Why Do We Care About HTML5?HTML5 is the FutureHTML5 Can MakeDevelopment FasterHTML5 Can MakeWebsites FasterHTML5 is Relevant inWindows 8 andMobile Development
  12. 12. SharePoint Saturday Chicago Suburbs12New Features and FunctionalityDrag and Drop, Forms, Geolocation, Client Storage
  13. 13. SharePoint Saturday Chicago Suburbs13Drag and DropLibraryDesktopBrowserDrag and Drop AppList A List B List CUpload HereDocument.docx …TPSReport.docx …
  14. 14. SharePoint Saturday Chicago Suburbs14New Field Functionality
  15. 15. SharePoint Saturday Chicago Suburbs15Location Based FunctionalityOfficeAnnouncementsUser’s Latitudeand LongitudeYour HTML5 Site!JavaScript
  16. 16. SharePoint Saturday Chicago Suburbs16Client Side and Offline StorageClient SideStorageOffline AppCacheLocal StorageWeb SQLIndex DBFileSystemYour HTML5 Site! InternetYour HTML5 Site!
  17. 17. SharePoint Saturday Chicago Suburbs17Under the Hood EnhancementsCSS EffectsSearchEngineOptimizationWebWorkersGoogleBingYahoo
  18. 18. SharePoint Saturday Chicago Suburbs18UI and Design ChangesDrawing and Graphics, CSS Transforms, and Video Enhancements
  19. 19. SharePoint Saturday Chicago SuburbsS19Dynamic Pictures and GraphicsCanvas SVGScalableVectorGraphicsS
  20. 20. SharePoint Saturday Chicago Suburbs20CSS Transforms, Transitions, AnimationsRotationSkewTranslate3D TransformsScaleTransitionsTransform AnimationHow to ChangeStylesGradual StyleChangesA => BA => B => C =>etc.Demo Demo
  21. 21. SharePoint Saturday Chicago Suburbs21Media EnhancementsAdobe FlashPlayerJavaRealPlayerUnitySilverlightShockwaveQuickTimeWindowsMedia Player
  22. 22. SharePoint Saturday Chicago Suburbs22LimitationsBrowser Implementation and Current State of HTML5
  23. 23. SharePoint Saturday Chicago Suburbs23Inconsistent Browser ImplementationIE10 Safari Firefox Chrome320378394468Source: HTML Logo from W3C500 500 500 5000 0 0 0300 300 300 300
  24. 24. SharePoint Saturday Chicago Suburbs24Inconsistent Browser ImplementationWindows Phone iOS Android BlackBerry320386468 485Source: HTML Logo from W3C500 500 500 5000 0 0 0300 300 300 300
  25. 25. SharePoint Saturday Chicago Suburbs25Compatibility TrendsSource: www.HTML5test.comDesktop Compatibility Mobile Compatibility
  26. 26. SharePoint Saturday Chicago Suburbs26HTML5 is a Moving TargetHTML Logo from W3C2008: FirstWorking DraftApril 2013: ElementRemoved from HTML52011: Last Callfor SuggestionsDecember 2012:“Feature Complete”Present: 20 FeaturesStill at Risk of BeingRemoved
  27. 27. SharePoint Saturday Chicago Suburbs27Projects with HTML5Internal Applications and Public Sites
  28. 28. SharePoint Saturday Chicago Suburbs28Internal Web ApplicationsYour New Internal Site!Target AudienceI IFaster ApplicationsCoolest thing sincesliced breadMore FeaturesFormsIdentify HTML5Features Based onRequirementsCompare AvailableFeatures in TargetAudience BrowsersImplement and TestLike NormalManageExpectationsCanvasGeolocation
  29. 29. SharePoint Saturday Chicago Suburbs29Public WebsitesYour New Company Site!I I I I I6 ?Target AudienceSame as InternalSites But MorePlanning is requiredLarger AudienceMeans MoreComplexityPlan for Browserswith MissingFeaturesDiminishing Returnsare a FactorForms?Canvas?Geolocation?ROILevel of Effort
  30. 30. SharePoint Saturday Chicago Suburbs30Public Websites – Search Engine OptimizationYour New Company Site!Search EnginesIResultsCompany SiteSearch EngineYour New Company Site!Other Site?GoogleBingYahooAsk
  31. 31. SharePoint Saturday Chicago Suburbs31HTML5 in SharePoint SolutionsSolutions, Apps, and Device Targeting
  32. 32. SharePoint Saturday Chicago Suburbs32Enhanced Web Part and App FunctionalitySharePointAppsSitePagesSharePoint Solutionsand AppsMobile SolutionsMobile BrowsersImplement moreHTML5 FeaturesWeb AppsvsHybrid Apps
  33. 33. SharePoint Saturday Chicago Suburbs33Device Channels in 2013Home PageBB CSS iOS CSSIE CSS Chrome
  34. 34. SharePoint Saturday Chicago Suburbs34What Can I do?Next Steps and Tools for success
  35. 35. SharePoint Saturday Chicago Suburbs35What Can I do as Next Steps?Advocate & EducateInventory & AnalyzeCurrent Web AppsNever ForgetStay Current onHTML5 NewsCommunicatewith Your TeamUse HTML5 inProjectsWeb Analytics isYour FriendHappy Mediumfor ROIMay have to Startfrom ScratchPeople use YourWeb AppsTo Stay CuriousUsability andDesign Principles
  36. 36. SharePoint Saturday Chicago Suburbs36Tools For SuccessHTML5 RocksHTML5 DemosHTML5 GalleryW3.orgMS Virtual AcademyBrowser StackBrowser ShotsCan I Use...?HTML5 TestSharePoint ExperienceMS SharePoint Dev BlogApps for Office andSharePointAdvocate & EducateInventory & AnalyzeCurrent Web AppsNever Forget
  37. 37. SharePoint Saturday Chicago Suburbs37Thank You!Email:jlittleton@westmonroepartners.comTwitter: Monroe Website : Monroe Blog:
  38. 38. SharePoint Saturday Chicago Suburbs - June 1st, 2013SPS EVENTSChicago-Suburbs38
  39. 39. SharePoint Saturday Chicago Suburbs39Attribution Slide• HTML5 ShieldHTML5 Shielfd was created by the World Wide Web consortium.• SharePoint and Internet ExplorerSharePoint and Microsoft Internet Explorer Logo are either registered trademarks or trademarks of Microsoft Corporation in theUnited States and/or other countries.• Chrome IconGoogle Chrome™ is a Trademark of Google Inc. All other company and product names may be trademarks of the respectivecompanies with which they are associated.This speaker and West Monroe Partners is not affiliated with or sponsored by Google Inc.• Kinect Sensor ImageKinect_Sensor_at_E3_2010_(front).jpg: James Pfaff (litheon)derivative work: AlphathonTM (talk)Captions by Dancter (talk) (added to this version by AlphathonTM (talk))