• Save
HTML5 & Dojo Futures- April 2011
 

HTML5 & Dojo Futures- April 2011

on

  • 4,476 views

HTML5 & Dojo Futures, IBM Impact 2011

HTML5 & Dojo Futures, IBM Impact 2011

Statistics

Views

Total Views
4,476
Views on SlideShare
4,475
Embed Views
1

Actions

Likes
5
Downloads
0
Comments
0

1 Embed 1

http://localhost 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • File Name Here.ppt
  • File Name Here.ppt
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • Taking a quick peek - HTML5 offers access to local storage on the device, offers the ability to obtain location-based information through triangulation and GPS, as well as an off-line capability. Mobile phone vendors are the first vendors to implement early standards targetting HTML5 HTML5 and CSS are building in native capabilities to optimize audio, video, vector graphics, and animations on the device (thereby improving battery life and consumability on mobile devices). Technologies are emerging to help accelerate device access (such as PhoneGap) to help bridge the gap amongst device vendors and standards development as these specifications work towards standardization. This technologies are rapidly emerging since HTML5 was taken over by another effort called WHATWG - Web Hypertext Application Technology Workgroup – an unofficial collaboration of web browser manufacturers and interested parties. These parties are actively working on the specification – but implementing the specification as it ’s being developed.
  • Whether or not the technology is ready for prime time is a good question. However, you can look for yourself on whether what you are looking for is there, and supported on the devices…
  • Open technologies are evolving and maturing – and become a viable alternative. In fact, by 2015, Gartner predicts that web technologies will have advanced sufficiently by 2015 that ½ the apps would be written as web apps (vs. native apps). You ’ll soon see that I believe it will arrive faster than that. The specifications - HTML5, Javascript, CSS3 are evolving at a rapid rate.
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37 src and type are important for performance, so that browser doesn’ t download and play unsupported types
  • File Name Here.ppt 02/10/10 03:37 src and type are important for performance, so that browser doesn’ t download and play unsupported types
  • File Name Here.ppt 02/10/10 03:37 src and type are important for performance, so that browser doesn’ t download and play unsupported types
  • File Name Here.ppt 02/10/10 03:37 src and type are important for performance, so that browser doesn’ t download and play unsupported types
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt
  • File Name Here.ppt
  • File Name Here.ppt 02/10/10 03:37
  • IMPACT09_FP-for-Web2.0.ppt Page of 53
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • File Name Here.ppt 02/10/10 03:37
  • This is (to put it simply) a server-side version of topic-based events.
  • IMPACT09_FP-for-Web2.0.ppt Page of 53
  • File Name Here.ppt 02/10/10 03:37 Talk about AMD, Asynch Loaders, Less.js … if time remains
  • File Name Here.ppt
  • File Name Here.ppt

HTML5 & Dojo Futures- April 2011 HTML5 & Dojo Futures- April 2011 Presentation Transcript

  • HTML5 & Dojo Futures Dylan Schiemann CEO, SitePen Inc. Co-Founder, Dojo Session Number: TDW-1313 Christopher C. Mitchell STSM, IBM UI Technologies
  • IBM's statements regarding its plans, directions, and intent are subject to change or withdrawal at IBM's sole discretion. Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.
  • Agenda
    • State of the Art Standards-Based RIA Technologies
    • HTML5 & CSS
    • Dojo & HTML5
  • Current State of Web Technologies HTML, CSS
  • Ubiquitous Web Programming Emerges Java Objective-C .Net CF Java HTML Javascript CSS HTML5 Javascript CSS3 Desktop OS Mobile OS 9 9
  • Trends
  • HTML5 and the Open Web are enabling new capabilities http://caniuse.com http://html5test.com/ http://html5demos.com/ Offline Applications GeoLocation Support Local Storage
  • HTML5 Impact on Desktop and Mobile
    • “ By 2015, mobile Web technologies will have advanced sufficiently such that half of the applications that today would be written as native apps will be, instead, delivered as Web apps.”
      • Gartner Predications 2010: Web Technologies Will Evolve in Multiple Directions
    • Browser use as a Web platform extends from traditional desktop OS into mobile
    • JavaScript toolkits & mobile scenarios are driving innovation in the Web
  • HTML5 Graphics
    • Canvas & SVG
  • Canvas API
    • Provides Web applications with API ’ s to draw graphics primitives on a resolution-dependent bitmap canvas
    • Useful for games, visual images, charts, editing images
    • Gives direct access to pixel data (import/export images)
    • Simple to create canvas surface in markup
    • Once created, draw on the canvas using JavaScript
    < canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;150&quot;> Sorry, browser does not support Canvas. </ canvas > var elem = document.getElementById('myCanvas'); if (elem && elem.getContext) { var context = elem.getContext('2d'); if (context) { context. drawGraphicsPrimitives(); } }
  • Canvas API
    • HTML5 allows Canvas API to be used in conjunction with other media elements (eg. Video and Images)
    • Canvas has inherent limitations
      • No object model or scene graph for programs to manipulate
        • Redraw all commands performed on canvas
      • No event support
      • No serialization format
      • Limited browser support of text and fonts
      • Not accessible
      • No true bitmap-based support on older browsers (IE6,7,8)
  • Canvas & SVG Example: http:// glow.mozilla.org
  • SVG – Scalable Vector Graphics
    • A markup language for 2d vector graphics and a set of related script interfaces
      • A standard interchange format for describing 2d scene
    • Has an object model and events, useful for interactive graphics applications that can be manipulated via user actions
      • Manipulated via JavaScript and DOM API ’ s
    • SVG1.1 adds Filter effects (eg. Gaussian blurs, shadows)
    • HTML5:
    • Browser support:
      • Firefox, Webkit (Safari/Chrome), Opera, IE9 support SVG
      • Firefox 4 and IE9 support inline SVG
        • Allows targeting video element, for example to apply filter effects
  • SVG
    • Limitations
      • Requires more memory than Canvas (due to retained scene)
      • No direct access to pixel data of the surface (use HTML5 Canvas)
      • Scripting API is DOM-based—unlike Canvas
  • SVG Example: IBM Diagrams on iPad Highly interactive diagram
  • HTML5 MultiMedia
    • Video & Audio
  • Video element
    • Embeds video playback into a page
      • Can specify multiple <source> tags for fallback formats
    • Server-side must be configured to serve video files with correct MIME types
      • video/ogg .ogv
      • video/mp4 .mp4
      • video/webm .webm
    • Video formats include encoded audio and video streams
      • .mp4 = H.264 + AAC
      • .ogg/.ogv = Theora + Vorbis
      • .webm = VP8 + Vorbis
    < video >   < source src=&quot;movie.mp4&quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;' />   < source src=&quot;movie.webm&quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;' /> </ video >
  • Video element
    • Limitations
      • Safari does not support WebM
      • Internet Explorer < 9 requires alternative plugins
        • Chrome frame: http://code.google.com/chrome/chromeframe /
        • Flash (.flv)
      • Emerging api ’ s for video/audio capture expected to be implemented soon in browsers
    • API ’ s allow scripted control over video playback
    • With HTML5, video content can be manipulated by CSS, Canvas and SVG api ’ s
      • Including CSS3 advanced effects (reflections, masks, gradients, transforms, transitions, animations)
      • Draw on a video with Canvas or SVG, capture frames as images
      • Apply SVG filter effects
  • Audio element
    • Embeds audio playback into a page
      • Can specify multiple <source> tags for fallback formats
    • Server-side must be configured to serve audio files with correct MIME types
    • Audio formats vary by browser
    < audio controls preload =“auto” autobuffer > < source src =” foo.wav ” / > < source src =“ foo.ogg ” /> This browser does not support audio. </ audio > Browser MP3 Ogg (Vorbis) WAV FF3.6+ ✓ ✓ Safari 5 ✓ ✓ Chrome 6+ ✓ ✓ Opera 10.5+ ✓ ✓ IE9 ✓ ✓
  • Audio element
    • Older browers need fallback option, and HTML5 audio features support may vary
      • Check for HTML5 audio, fallback on Flash
      • Check level of HTML5 audio support, adapt app accordingly
      • Check supported file types, link to appropriate formats
    • Script can control Audio content options & playback
      • play()
      • pause()
      • canPlayType()
      • buffered()
  • HTML5 WebSocket
    • Defined in the W3C HTML5 specification
    • Allows full-duplex communication
    • Allows binary data transfer
    • Achieves goals of Comet http transport without the “hacks”
      • (We’ll talk about this later in the presentation)
    • Incomplete spec and browser support , still lots of specification adjustments being made for security, proxies, performance…will improve in 2011/2012 timeframe
  • HTML5 Drag and Drop
    • An API for supporting drag and drop in web applications
      • <div id=&quot;columns&quot;>
      •   <div class=&quot;column&quot; draggable=&quot;true&quot;><header>A</header></div>
      •   <div class=&quot;column&quot; draggable=&quot;true&quot;><header>B</header></div>
      •   <div class=&quot;column&quot; draggable=&quot;true&quot;><header>C</header></div>
      • </div>
    • Events
      • dragstart, drag, dragenter, dragleave, dragover, drop, dragend
    • Can specify styling for drop targets and avatars via CSS
    • Also supports dragging files from the desktop to the browser!
  • HTML5 Offline Web Applications
    • Contains several features that help with building web apps that work while offline or disconnected from a network.
    • App Cache
      • Your html:
        • <!DOCTYPE HTML>
        • <html manifest=&quot;cache-manifest&quot; >
        • ...
      • cache-manifest (text file):
        • CACHE MANIFEST
        • index.html
        • src.js
        • style/default.css
        • NETWORK:
        • server.cgi
  • HTML5 Offline Web Applications
    • online/offline Window events & status
      • var online = navigator.onLine;
    • Web Storage API
    • localStorage, sessionStorage {objects}
      • length – number of k/v pairs in the storage
      • key(n) – name of the nth key in the list
      • getItem(key) – clone of the current value at key, or null
      • setItem(key,val) – clone value and set value at given key
      • removeItem(key) – removes item at given key or noop
      • clear() – empty all key value pairs
    • Good browser support:
      • IE8+, FF3.5+, Safari 4+, Chrome 4+, iOS 2.0+, Android 2.0+, Opera 10.5+
  • HTML5 Indexed DB & older SQL DB
    • Two separate proposals for local database access
      • Indexed DB
        • Indexed DB current spec frontrunner
        • Implemented by
          • FF, IE
      • Web SQL DB
        • Spec at an impasse due to inconsistent specification of SQL grammar, and reliance on single vendor implementation (SQLLite)
        • Implemented by
          • Safari 4+, Chrome 4+, Opera 10.5+, iOS3.0+, Android 2.0+
  • CSS3
    • C ascading S tyle s heets v3
  • What is CSS3?
    • CSS3 – “ Cascading Style Sheets ”
      • A style sheet language allowing content authors to attach styles (colors, fonts, layout, etc.) to elements of structured documents such as HTML
      • Separates the presentation style from the content of documents.
    This is the content Uses default browser style if none specified CSS CSS CSS3 Styles content, allowing different appearances for the same content CSS3 Styles content, allowing different appearances for the same content
  • CSS3 Overview
    • CSS3 is not a single specification
      • Collection of specification modules (sub-specifications)
        • Effort began in 2001, work toward CSS3 continues to date
        • Each in varying degrees of completeness
    • Like HTML5, CSS3 is not final and may not be for a long time
      • Each of the sub-specifications are in varying degrees of completeness
    • Much of CSS3 is implemented consistently in modern browsers
      • But still have to design for graceful degradation
      • Often need to use browser-qualified variations of “ standard ” features
        • Because the browsers are innovating
  • CSS3 Modules (Candidates & Working Drafts)
    • Basic User Interface
    • Backgrounds & Borders
    • Cascading & inheritance
    • Media Queries
    • Font
    • Box Model
    • Marquee
    • Text
    • Column
    • Color
    • Flexible Box Layout
    • Transitions
    • Grid Positioning
    • Outline
    • 3d/2d Transform
    • Generated Content
    • Line Box
    • Hyperlink
    • Positioning
    • Ruby
    • Paged Media
    • Selectors
    • Table
    • Speech
    • List & Markers
    • Animations
  • Getting the Broadest Reach
    • Working with incomplete standards and older browsers
  • Working Around Limitations of CSS LESS – Dynamic Stylesheet Language Variables Mixins http://lesscss.org/ Developed by Alexis Sellier
  • LESS - Examples
    • Dojo is currently refactoring it's themes to leverage LESS
    • Starting with dijit and then onto dojox.mobile themes
    • Makes it easy to create custom themes based on an existing theme
  • Dojo & HTML5
  • Dojo Toolkit
    • Dojo is an Open Source JavaScript toolkit written in JavaScript. It consists of many libraries which are commonly needed in RIA and Mobile Web application development
      • HTML/CSS Query and Manipulation
      • Animation & Effects
      • Widget Framework
      • Rich Set of Desktop Widgets
      • Rich event handling system
      • General purpose libraries
      • Several other utilities
      • Math, XML to JS parsing, etc…
    • Helps smooth cross-browser inconsistencies (desktop and mobile)
    • IBM supported via Web2.0 & Mobile Feature Pack for WebSphere
  •  
  •  
  • What is Dojo GFX?
    • JavaScript API for cross-browser graphics
      • Write graphics application once, run on many renderers
    • Supports for HTML5 Graphics: SVG, Canvas
      • Also works on older non-HTML5 desktop browsers
        • VML, Silverlight, and SVGWeb(Flash)
    • Based on SVG concepts, but JavaScript—not XML
      • Geometry, shapes, transformation matrices
      • Stroke, fill, fonts, other visuals
      • Surfaces and groups
      • Interactive (events)
    • Optional SVG to JSON import/export conversions
      • Can send user-created drawings to the server
  • HTML5 Data Attributes – Declarative Markup
    • In Dojo 1.6, parser support for HTML5 ’ s Data-Attributes has been added
      • Compatible with older Dojo parser (dojoType attributes)
      • Validates with HTML5 validators
      • This will be the preferred declarative style in Dojo 2.0
    • data-dojo-config
      • <script src=&quot;dojo.js&quot; data-dojo-config=&quot;parseOnLoad: true, isDebug: true&quot;></script>
    • data-dojo-* for widgets
      • < div data-dojo-type=&quot;dijit.Dialog&quot; data-dojo-props='title:&quot;My Dialog&quot;,
      •      onFocus:function(){ /* a focus event handler */ }'
      •      data-dojo-id=&quot;myDialog&quot;>
      • </ div >
    • data-dojo-event replaces <script type= “ dojo/method ” > scripts
  • Dojo Object Store API
    • Added in Dojo1.6
    • Based on HTML5 IndexedDB object store API
    • Greatly simplifies the construction and use of data stores
    • Follows HTTP/REST naming conventions
    • Key philosophies
      • Separate UI from data
      • Keep it simple
      • Plain JavaScript Objects
      • Promise based
      • Simple feature discovery
      • Layered functionality
  • Dojo Object Store API – Simple Example
    • Added in Dojo1.6
    • var product = myStore.get( “ fruit ” );
    • var name = product.name;
    • product.name = “ New name ” ;
    • myStore.put(product);
  • Comet
    • Develop event-driven web applications
    • Deliver data from server to the client at any time “Push”
    • High frequency (seconds, not minutes)
    • Runs over existing HTTP network/ports and on older browsers
    • Requires server backend that makes efficient use of threads
    • Improve speed and scaling over traditional Ajax polling
    • Various “implementation techniques” have been used to achieve the push event effect, because html/http not designed for this
      • Forever Frame
      • Long-polling
      • Callback-polling or JSONP-Polling
  • Comet Use
    • Google Talk
    • Meebo
    • Facebook Chat
    • Many more...
  • XHR Streaming
    • Continuous connection
    • Messages can come at any time
    • Streaming supported on non-IE browsers
  • Rational Application Developer 8.0.2 Web2.0 Feature Pack Integration
  • Web 2.0 & Rich Internet Application Tools
    • HTML5, CSS3, JavaScript tools
      • JS syntax highlighting, content assist, validation, outline, refactoring
    • Dojo tools
      • JS+HTML source content-assist, validation for Dojo widgets, APIs
      • WYSIWYG design view
      • Palette items, property views, events view, class wizard
      • Custom widgets – wizard, content-assist, validation
      • Preview server
      • Custom Build Tools
      • Project management
    • Multi-browser support
      • IE, Firefox previews
    • CSS style creation, validation
    • JSON editing
    • JavaScript debugging
      • Firebug integration
    • iWidget tools
    • JAX-RS tools
      • Project setup support for any JAX-RS implementation
      • Editor support for JAX-RS annotations, to guide developers usage
        • Also includes validation with the JSR-311 specification
      • JAX-RS Quick Fixes for java code, and the web.xml file
  • Project Explorer Browse project resources, including JavaScript libraries Page Designer HTML page editing, syntax highlighting, content-assist validation. Split view with browser preview. Widget palette HTML controls and Dojo widgets for easy drag-n-drop to page. Properties view Easily set HTML and Dojo widget properties Services view Explore existing services and bind to Dojo widgets Project Setup Configure your project for how you wish to access Dojo HTML5 and CSS3 support
  • New Dojo Widget Wizard Makes it easy to create custom widgets Custom widgets automatically appear in palette Dojo Build Tools Create a custom Dojo build for improved performance Browser Preview Preview pages with either Internet Explorer or Firefox to identify cross-browser issues Ajax Test Server Built-in fast, lightweight server for testing during development JSON editor
  • Line stepping is synchronized JavaScript call stack Variables
  • Maqetta Open Source Visual Tools for HTML5 http://maqetta.org IBM Confidential
  • Visual authoring of HTML5 user interfaces IBM Confidential Drag/drop widgets from widget palette onto design canvas A key Maqetta feature is bidirectionality between visual editing and source editing. Users can edit in either WYSIWYG view, source view or split view shown above) and changes instantaneously reflect in the other view. Adjust visual styling (“pixel tweaking”) in the Properties palette. Designers can organize their UI prototype into distinct panels (referred to as “states” in Maqetta) where certain elements appear and disappear depending on the current state. Runs in browser (zero install)
  • Toughest Problems
    • Scaling apps to enterprise level
      • Modularity, dependencies & organization
        • HTML
        • CSS on large scale apps “OOCSS, LESS”
      • Supporting the web browsers (not just the latest)
        • API stability, ability to fill gaps on older browsers
          • HTML5, CSS3 great, but what about IE7/8?
        • Test matrix – expands with mobile
      • Loading minimal code, targeted to specific client agent (browser)
      • Keeping instant access
      • Scaling organization & skills
        • Standards help
        • Tools are mandatory
  • We love your Feedback!
    • Don’t forget to submit your Impact session and speaker feedback! Your feedback is very important to us, we use it to improve our conference for you next year.
    • Go to impactsmartsite.com from your mobile device
    • From the Impact 2011 Online Conference Guide;
      • Select Agenda
      • Navigate to the session you want to give feedback on
      • Select the session or speaker feedback links
      • Submit your feedback
  • Copyright and Trademarks © IBM Corporation 2011. All Rights Reserved. IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml.