SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
HTML5 for the Flash Developer
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
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
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
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.”
LET’S BREAK IT DOWN




     = HTML + CSS3 + JS
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
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
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)
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...
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
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
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
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
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
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
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
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
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
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/

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3Jamshid Hashimi
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsLukas Oppermann
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014vzaccaria
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5Suresh Kumar
 
Tackling Umbraco: Case Study on NFL Ops Site Design
Tackling Umbraco: Case Study on NFL Ops Site DesignTackling Umbraco: Case Study on NFL Ops Site Design
Tackling Umbraco: Case Study on NFL Ops Site Designmcampolongo
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesMan Math
 

Was ist angesagt? (20)

Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Css3 Presetation
Css3 PresetationCss3 Presetation
Css3 Presetation
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Css3
Css3Css3
Css3
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Introduction to Umbraco
Introduction to UmbracoIntroduction to Umbraco
Introduction to Umbraco
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
BEM it!
BEM it!BEM it!
BEM it!
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
Tackling Umbraco: Case Study on NFL Ops Site Design
Tackling Umbraco: Case Study on NFL Ops Site DesignTackling Umbraco: Case Study on NFL Ops Site Design
Tackling Umbraco: Case Study on NFL Ops Site Design
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 

Andere mochten auch

Andere mochten auch (6)

Basics of android
Basics of androidBasics of android
Basics of android
 
Html5 n css3
Html5 n css3Html5 n css3
Html5 n css3
 
Introduction to Android development - CEC ISQIP 2014
Introduction to Android development -  CEC ISQIP 2014Introduction to Android development -  CEC ISQIP 2014
Introduction to Android development - CEC ISQIP 2014
 
Android Basics Tutorial 1
Android Basics Tutorial 1Android Basics Tutorial 1
Android Basics Tutorial 1
 
HTML 5 - en introduksjon
HTML 5 - en introduksjonHTML 5 - en introduksjon
HTML 5 - en introduksjon
 
Android Basics
Android BasicsAndroid Basics
Android Basics
 

Ähnlich wie HTML5 for the Flash Developer

Ähnlich wie HTML5 for the Flash Developer (20)

CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Introduction to whats new in css3
Introduction to whats new in css3Introduction to whats new in css3
Introduction to whats new in css3
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
HTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentHTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web Development
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 
Html5
Html5Html5
Html5
 
html5_css3
html5_css3html5_css3
html5_css3
 
Html5
Html5Html5
Html5
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdf
 
Css3
Css3Css3
Css3
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Mix 2010 twilight
Mix 2010 twilightMix 2010 twilight
Mix 2010 twilight
 

Kürzlich hochgeladen

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Kürzlich hochgeladen (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

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/