HTML5 for the Flash Developer
•
7 j'aime•2,553 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à HTML5 for the Flash Developer
Similaire à HTML5 for the Flash Developer (20)
Dernier
Dernier (20)
HTML5 for the Flash Developer
- 2. WHAT IS HTML 5? “HTML 5” IS A MISCONSEPTION... (sorta) For most people, HTML5 is really a branding buzz-word gone wild HTML 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 experience WE CAN DROP THE 5... The 5 can be confusing, let’s just consider it HTML, because that is what it really is
- 3. WHAT MAKES UP “NEW” HTML W3C 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
- 4. 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 time LOOK 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 browser MOBILE, MOBILE EVERYWHERE... Mobile devices are driving the market, and they (mostly) have modern browsers, enabling a lot of this cool new stuff
- 5. 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. LET’S BREAK IT DOWN = HTML + CSS3 + JS
- 7. 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 optional EDITABILITY... Throw a new attribute (contentEditable) on text items and users can now change the values in real-time
- 8. 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
- 9. 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)
- 10. 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 (http://easeljs.com/) ProcessingJS (http://processingjs.org/) Many, many more coming...
- 11. 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) HTML CSS3 IS ADDING A LOT OF COOL STUFF The new HTML features are more about structure and content, CSS3 is more about expression
- 12. 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 glows BACKGROUNDS... 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
- 13. CSS SIDE OF THINGS... COLOR... Support for new color definitions using HSL (Hue, Saturation & Light), HSLA (HSLA + Alpha), Opacity Controls and RGBA TEXT 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
- 14. 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 borders NEW 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
- 15. 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 automatically WEB FONTS... Link to web-enabled fonts (@font-face) and apply them into your site
- 16. MILAGE MAY VERY EVERY BROWSER DOES IT DIFFERENT IE, Firefox, Opera, Chrome, Safari all determine when, what and most importantly how each feature gets implemented EVERY 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
- 17. SPECIAL CASE CSS3 BROWSER 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-shadow PREFIXS HELP BACKWARDS COMPATABILITY By using a prefix, this allows for opt-in features and browser specific implementations to be separated in your CSS docs
- 18. FORK YOUR CODE AS 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
- 19. GRACEFULLY FALLBACK UNDERSTAND 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 fallback IT 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
- 20. LEARN MORE... HERE ARE SOME AWESOME RESOURCES The standards... HTML: http://diveintohtml5.org/ CSS3: http://www.css3.info/ Drawing stuff... http://easeljs.com/ http://processingjs.org/ Examples... http://beta.theexpressiveweb.com/