Downloaded 36 times
Uploaded byDipesh Mukerji
HTML5: Next Generation Web Development
HTML5 is the latest version of HTML that provides native support for multimedia and graphics. It enhances HTML with new elements and APIs to build more robust web applications. While HTML5 offers advantages like cross-platform support and lower development costs, it also faces challenges from browser fragmentation and lack of access to device capabilities. Kony's platform aims to address these challenges by allowing developers to build HTML5 applications that can be optimized for all browsers and integrated with native device features.
More Related Content
Similar to HTML5: Next Generation Web Development
HTML5: Next Generation Web Development
- 1.
- 2. What is HTML? •HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser. • HTML is written in the form of elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. • The purpose of a web browser is to read the HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
- 3. What is HTML5? Enhances HTML with native support for latest multimedia and graphics Leverages standards-based tools Consumes HTML4, XHTML and DOM Compatible with JavaScript & CSS3 Contains JS APIs for complex web applications Runs on smartphones and tablet browsers Compatible Produces cross-channel web apps
- 4. FEATURES Canvas Screen controls andanimation Graphics/Medi a Native media types (Including audio/video) Offline Storage Store data locally File/Hardware Access OS Integration
- 5. HTML5 Flavors • BasicHTML Application is all HTML, server side apps • Hybrid (Wrapper) Run inside a native container, and leverage the device browser engine (but not the browser) to render the HTML and process the JS locally • Mixed-Mode Version of native application where some forms are rendered in the web view while others are rendered using the native SDK • SPA – Single Page Application Native app experience in a browser (Kony method)
- 6. Road to HTML5 JavaScript HTML CSS1 1991 CSS2 1996 1998 Tableless WebDesign 2002 2009 1994 HTML2 1997 HTML4 2000 XHTML1 2005 AJAX
- 7.
- 8. The Hype &The Promise • Development Advantages No specialized skillset Single code base Backwards compatibility Easy to update / upgrade Cross channel and OS Faster time to market • Business Advantages No commercial app stores Connect and reach more users Designed with mobile in mind Cost effective 8
- 9. HTML5 Has It’sOwn Challenges “The biggest strategic mistake we made as a company was betting too much on HTML5 as opposed to native.” Mark Zuckerberg “We have definitely shifted from HTML5 to native. The primary reason for that is, we’re seeing that more and more people are spending more time in the app, and the app is running out of memory. The second reason we’ve gone native is trying to get some of the animations, that smoothness, we felt like we needed native to really do that well.” Kiran Prasad, Senior Director for Mobile Engineering - Linkedin
- 10. Browser Fragmentation Allmajor browsers don’t equally support HTML5 across all platforms Compatibility testing must be done on all potential target browsers Not a uniform standard Varies from browser-tobrowser and browser version Must continuously optimize web app for multiple devices, browsers and platforms.
- 11. HTML5 Development Approach Challenges •Less stable than native • Pulls in data much more slowly than native • Browser fragmentation • No app store discoverability • May take longer to generate revenue • Scarcity of mobile web developers • Less offline capabilities • Poor gaming capabilities • Not as UI rich as native • Less device access capabilities Advantages • Leverage effective web search technology for discoverability • Native mobile developers are getting more expensive • More capable than HTML4 • Multimedia support • Cost efficient • Cross-platform • Less maintenance • Multivariate testing • Faster time-to-market • Smaller device footprint • Easy to update / upgrade • Can be wrapped in hybrid format
- 12. Kony Development Platform NextGeneration HTML5 Develop web apps with HTML5, JS and CSS3 Reuse UI/UX and business logic with HTML5/4 SPA method Tools / Frameworks Outcomes API HTML 5/4 Hybrid Device Specific Mixed-Mode Channel Specific Incorporate native device capabilities into hybrid apps Same app definition used for web and native applications Deliver device specific browseroptimized HTML5/4 markup Integration Kony mBaaS Import and reuse 3rd-party frameworks
- 13. Kony & HTML5 •SPA utilized to separate UI/UX from • • • • • • • • business logic HTML5/4 browser variation handling Responsive and adaptive design Native device capabilities, including HTML5/4 with device detection for 10,000 device types Audio and video elements to support multimedia rendering without plugins Touch events and gestures CSS3 for 2D & 3D transformations, targeted media queries, gradients, rounded corners, shadows, and more Input elements to support a variety of types: number, email, URL, range, datapicker, et c. Semantic elements for sections, headers, footers, etc…
- 14. Eliminating HTML5 Challengewith Kony Kony Browser Kony handles the variances to Fragmentation support HTML5 across “All” browsers Cost Testing Performance HTML5 Developer codes the variances to support HTML5 across browsers Single platform for development and integration Additional code required to handle current variances and development required for server side components Integrate test environment to test applications on “ALL” target devices Apps must be tested on a range of popular devices. Developers must standup test suite for each target device Highly optimized code to maintain HTML5 may be designed to run on performance across varying hardware various devices, but no reliable way specifications to maintain performance across varying hardware specifications
- 15. Where HTML5 isa Good Fit • Viable Solutions Content driven industries without large user bases Publishing, magazines, newsletters, etc… Information/content-driven, forms-based and mapping apps • Low Storage Requirement Local storage limits for mobile web apps is 50 MB • Simple Graphics Does not require highest quality UI/UX • Extensive Device Interaction IS NOT Required HTML5 has limited support for device API’s
- 16. Debunking the Myths ? ? ? ? HTML5is all I need to go mobile. I only need one skillset to build HTML5 Applications. Browsers will eventually standardize HTML5. Cost of developing an mobile app with HTML5 is less. ✓ HTML5 is a fantastic technology that provides significant browsing improvements. However, it will not reduce the need for companies to provide native applications as a part of their mobile channel mix. ✓ HTML5 development requires HTML, CSS3 and JavaScript expertise. If creating hybrid mobile apps without Kony, expertise with targeted device APIs is required. ✓ Non–standard browsers implementations are caused by competitive forces, competition won’t go away. Browsers wars will produce continued fragmentation. ✓ Many technologists hope HTML5 will be the silver bullet to tame the mobile chaos. HTML5 simply adds another development outcome organizations must support. FACT FACT FACT FACT
- 17. Summary • Determine ifHTML5 satisfies your business and user needs. It may be the right answer for your development efforts. • Companies wanting to compete effectively in the mobile marketplace can’t rely on browser technology alone. • With Kony, supporting new technologies like HTML5 becomes a business decision because we handle the mobile chaos for you. • No need to gamble on the future of the mobile industry.
Editor's Notes
- #4 Kony HTML5/4, Legacy, Adaptive or REsponsive
- #5 Kony HTML5/4, Legacy, Adaptive or REsponsive
- #6 Kony HTML5/4, Legacy, Adaptive or REsponsive
- #7 CSS stands for Cascading Style Sheets Styles - define how to display HTML elementsXHTML is HTML defined as an XML applicationAjax (sometimes called Asynchronous JavaScript and XML) is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole.
- #8 Kony HTML5/4, Legacy, Adaptive or REsponsive
- #10 Problems with Facebook – Tooling (Testing) debugging tools in mobile browsers don't provide enough visibility into what is happening with memory in particular. The nature of Facebook's app contributes to the difficulties it encounters with scrolling performance across mobile devices. Facebook's newsfeed and Timeline in particular experience slow and inconsistent performance because they implement an "infinite scrolling" model in which content is pre-fetched and appended as the user reaches its location. The number of objects in memory, including graphics, can grow quite large. Different browsers make different tradeoffs in these extreme situations, resulting in inconsistent frame-rates, exhaustion of GPU buffers, lagging of UI threads, etc.GPUs tend to be black boxes to the app developer (and that the GPU makers, for their own reasons, like it that way). In an app like Facebook, with the size of the data being handled so far outstripping the size of GPU buffers.
- #11 Kony HTML5/4, Legacy, Adaptive or REsponsive