Successfully reported this slideshow.

HTML5 for the Flash Developer


Published on

An indepth overview of HTML5 and CSS3 features from a Flash developers perspective. Examining both the power and challenges facing the current implementations of the W3C specs.

Published in: Technology
  • Njce! Thanks for sharing.
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi s9tpepper, thanks for the feedback. I am sorry that you feel this deck, specifically this slide is, an attack on Flash. It was never the intention of this content and I am actually surprised at the way you interpreted the slide. This deck was used to help break down what HTML5 is to the San Diego Flash User Group. It’s purpose was to show what HTML5 is doing and why it has some really interesting potential for all developers. It is not meant, nor does it claim to be, an ’abandon Flash and use HTML5’ piece. Let me try and explain why I put up each point and the info behind them.

    1. Of course all technologies have limitations. If you read the back half of this deck its clear that HTML5 has massive issues as a development platform, such as fragmentation, backwards compatibility, codec issues, etc. The point was Flash is great for some things, not all. Too many developers love a specific technology and try to shoehorn it into everything. Misuse of technology is an issue for any platform. Understanding that Flash will not solve everything is just as important as understanding that Flash can solve issues that other technologies can not.

    2. The mobile Flash player is different then mobile AIR. You are talking about applications that must be installed on the device vs. a browser driven experience. This is the same with browser-based web-applications vs. native-based applications. No where in this deck do I get into building mobile native applications nor do I talk about HTML5 based native application. This is about web-site development using HTML5 as a potential technology. iOS does not currently support the Flash Player so if you are a developer creating a browser-based website you have to take this into consideration. On top of that, mobile devices that do support the Flash player still have significant performance issues, such as memory, GPU and processor limitations. There are ways to work around this by intelligently developing a Flash application for the mobile web, but developers need to consider this when looking to create content for the web.

    3. The level of browser support is important because if you are taking the ’mobile first’ approach that is being recommended by many of the web-application development leaders you need to understand your target audience. For example, we have a current client that wants to create a mobile version of their site. The reason, over 25% of their traffic comes from mobile browsers. And over 50% of the total mobile browsers are coming from an iPhone or iPad. Understanding this is helping us guide the client to the technology that makes the most sense for their users. Because mobile browsers are some of the most advanced browsers, this means that the features described in this deck are often available to you. Understanding this is important because it ties directly into the project’s understanding the target audience; knowing the goals of the content being created; understanding limitations of the different technologies in their current incarnation and many other factors that guide us into choosing the right technologies for a project.

    4. The final quote was about how as developers we need to look and understand more then one technology. We are software developers no matter which technology we use. Too many people box themselves in and say they are only a [insert technology] developer. I knew a lot of people that were once Authorware developers, Pascal Developers, VB Developers or Director Developers. The reality is that to survive in this industry we need to adapt and evolve. I did not start out as a Flash developer, I was developing for many years before Flash came into existence. I evolved into ActionScript and then Flex because the technology solved the needs of the projects I worked on. I also code in Scala, JavaScript, PHP, Ruby, Java and have played with many other languages and technologies. The point is, we are really software developers and understanding what other technologies are available to us and what they can offer us is massively important not only to us, but also to our clients. This is not to say that we should automatically change our focus to what is ’hot’ but instead we need to take time to understand what is happening in the industry and why. You may find that after digging into a new technology it will strengthen your resolve to use the technology that you currently love.
    Are you sure you want to  Yes  No
    Your message goes here
  • There are several mistakes on your I love Flash But... screen.

    1. Flash is great, and it does give us lots of power, and yes it does have limitations. What technology doesn't have limitations? HTML5 has limitations. That's why these exists: Having limitations is not unique to Flash.

    2. Let's be honest, Flash is on iOS. Its not on Safari Mobile, but Flash applications are in the App Store. Politifact ( is one of the top apps, as have other Flash apps made it that far.

    3. All Android phones, and BlackBerry's upcoming QNX phones all have Flash in their mobile browsers. The only player that doesn't is iOS. So while most mobile browsers are often pretty advanced, iOS's browser is obviously lacking in that department, whatever the reason may be that iOS doesn't have Flash on its platform, the truth of the matter is that they don't and iOS's competitors do. But again, the level of advancement of the mobile browser, what does that have to do with Flash again?

    4. If Seb Lee-Delisle said '... we are really software programmers', then why are you talking specifically about Flash in a way as to try and position HTML5 as superior for whatever reasons and instead not just talking about software programming, nevermind what Flash is or isn't doing.
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 for the Flash Developer

  1. WHAT IS HTML 5?“HTML 5” IS A MISCONSEPTION... (sorta) For most people, HTML5 is really a branding buzz-word gone wildHTML 5 IS A COLLECTION OF FEATURES... What people are calling HTML5 is really a collection of W3C specifications and CSS3 standards that enable a more expressive experienceWE CAN DROP THE 5... The 5 can be confusing, let’s just consider it HTML, because that is what it really is
  2. WHAT MAKES UP “NEW” HTMLW3C SPECS AND PROPOSALS... The W3C standards board are drafting new specifications for HTML tags and features. These new features are what makes up part of “HTML5”CSS3 SPECS AND PROPOSALS... CSS3 has (and is) adding new features and functionality to browser-based applications
  3. WHY ALL THE HYPE?EMPOWERING A LARGE SET OF DEVELOPERS... The new features of HTML are providing more control, expressiveness and capabilities that browser-based developers have asked (and) needed for a long timeLOOK MA, NO PLUGINS!!! Flash is great, but it’s causing a lot of turmoil in the development community (right or wrong). The new HTML features has the ability to provide Flash-like (and more) features for any device that supports a modern browserMOBILE, MOBILE EVERYWHERE... Mobile devices are driving the market, and they (mostly) have modern browsers, enabling a lot of this cool new stuff
  4. WHY SHOULD I CARE?I <3 FLASH BUT... Flash is great, it gives us a lot of power but there are limitations Let’s be honest... Flash mobile is cool but really not there yet and in some cases *cough* iOS *cough* it’s not even supported Mobile browser are often the most advanced browsers in the market As Seb Lee-Delisle said: “... we are really software programmers.”
  6. HTML SIDE OF THINGS...NEW DOCTYPE... <!DOCTYPE html>!LOOSER STRUCTRE... XHTML required valid XML data, not so with HTML5 Types are dropped for <script> and <style> tags Quotes are optionalEDITABILITY... Throw a new attribute (contentEditable) on text items and users can now change the values in real-time
  7. HTML SIDE OF THINGS...BETTER FORMS... Placeholder Text Autofocus on fields Email field Type (helpful for mobile) Web address field type (similar to email) Number Field (min, max, step & sliders) Date Pickers, Search Fields, Color Pickers Form Validation Required Fields Regex Support
  8. HTML SIDE OF THINGS...VIDEO & AUDIO... We now have <video> and <audio> tags Codec’s are important: Video: H.264, Theora, VP8 Audio: MPEG-1 Audio Layer 3, AAC, OGG Real full-screen video is now available (in Safari 5.1 on Lion)
  9. HTML SIDE OF THINGS...CANVAS... Bitmap drawing area (low level) Software rendered (except in Safari 5.1) Performance can be lacking No display list, you are just drawing to a bitmap Growing set of libraries EaselJS ( ProcessingJS ( Many, many more coming...
  10. CSS SIDE OF THINGS...CSS IS NOT HTML...Cascading Style Sheets (CSS) are not considered HTML. HTML is the markup, CSS is a separate syntax and system that modifies (styles) HTMLCSS3 IS ADDING A LOT OF COOL STUFF The new HTML features are more about structure and content, CSS3 is more about expression
  11. CSS SIDE OF THINGS...BORDERS... border-color: finer controls over color and color sets border-image: use images to create borders border-radius: adds the ability to round corners box-shadow: create drop shadows and glowsBACKGROUNDS... background-origin: defines the background position structure background-clip: defines how & where the background extends background-size: defines the size of the background image multiple-backgrounds: allows multiple images to be defined and placed
  12. CSS SIDE OF THINGS...COLOR... Support for new color definitions using HSL (Hue, Saturation & Light), HSLA (HSLA + Alpha), Opacity Controls and RGBATEXT EFFECTS... text-shadow: define shadows and glows on text text-overflow: defines how text should be clipped (...) word-wrap: defines when words should be broken and wrapped in a constrained box
  13. CSS SIDE OF THINGS...USER INTERFACE... box-sizing: define how box size is calculated resize: allow boxes to be resized by the user outline: think nested bordersNEW SELECTORS... Three new selector types have been added [att^=val]: attribute beings with value [att$=val]: attribute ends with value [att*=val]: attribute contains value
  14. CSS SIDE OF THINGS...MEDIA QUERIES... Define CSS properties based on the type of media, such as all, screen, mobile (size), print, etc.MULTI-COLUMN... Define columns and let text flow into them automaticallyWEB FONTS... Link to web-enabled fonts (@font-face) and apply them into your site
  15. MILAGE MAY VERYEVERY BROWSER DOES IT DIFFERENT IE, Firefox, Opera, Chrome, Safari all determine when, what and most importantly how each feature gets implementedEVERY VERSION DOES IT DIFFERENT Not only does each browser-maker do it differently, each version of the browser adds (or even changes) functionality version to version
  16. SPECIAL CASE CSS3BROWSER WILL PREFIX CSS FEATURES Firefox use the –moz- prefix -moz-box-shadow Webkit browsers use –webkit- prefix -webkit-box-shadow The standards do not use a prefix box-shadowPREFIXS HELP BACKWARDS COMPATABILITY By using a prefix, this allows for opt-in features and browser specific implementations to be separated in your CSS docs
  17. FORK YOUR CODEAS DEVELOPERS WE HAVE TO TEST AND FORK OUR CODE When leveraging new features we have to consider what browsers support which feature, then properly apply or remove content accordingly
  18. GRACEFULLY FALLBACKUNDERSTAND YOUR USER Who are you creating content for and what browsers do they use? This is true for ANY technology!UNDERSTAND WHAT IS SUPPORTED Define what you are doing, determine what you can leverage and make sure to handle a graceful fallbackIT DOESN’T HAVE TO BE PRETTY Having a fallback doesn’t mean that your low end- browsers have to look the same, just make it usable for them
  19. LEARN MORE...HERE ARE SOME AWESOME RESOURCES The standards... HTML: CSS3: Drawing stuff... Examples...