SlideShare una empresa de Scribd logo

HTML 5 Drupalcamp Ireland Dublin 2010

•Descargar como ODP, PDF•
•
A
alanburke
Tecnología
1 de 33
DrupalCamp Dublin 20th November 2010
Are You Ready? HTML 5
When will HTML5 be ready?
When will HTML5 be ready? [Too Late - its already here]
Does it Work?
Backwards compatibility AND Forwards compatibility Does it Work?
Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths. Design principles of HTML5
users authors implementors specifiers theoretical purity “Priority of Constituencies”
Old Browser - New Website
New Browser - Old Website
Must work both ways.
<!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" /> Simplified Document Head
New Structural Elements <section> <header> <hgroup> <footer> <aside> <article> <nav> + outlining
Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress> <small> <ruby> + more!
DRUPAL + HTML5
groups.drupal.org/html5
HTML5 BASE drupal.org/project/html5_base
HTML5 TOOLS drupal.org/project/html5_tools
Drupal 6.19 + Basic <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content- module.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?T" /> <link type="text/css" rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?T" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style><![<!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
Drupal 6.19 + Basic + Tools <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?z" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?z" /> <link rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?z" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style><![<!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
Drupal 6.19 + Base + Tools <!DOCTYPE html> <html lang="en" dir="ltr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?G" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/default.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/html5.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/layout.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/style.css?G" /> <link rel="stylesheet" media="print" href="/sites/all/themes/html5_base/css/print.css?G" /> <!-- www.phpied.com/conditional-comments-block-downloads/ --> <!--[if IE]><![endif]--> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head>
HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
<label for="email">Email address</label> <input id="email" name="email" type="email" /> <label for="website">Website </label> <input id="website" name="website" type="url" /> <label for="phone">Phone number</label> <input id="phone" name="phone" type="tel" /> <label for="number">How many?</label> <input id="number" name="number" type="number" min="0" max="11" step="1" value="5"/> More Elements
How do we get those in Drupal?
HTML5 TOOLS + ELEMENTS
Other APIs Geolocation Websockets Web Workers Web Storage
jen.cm/h2 Resources
Resources http://html5doctor.com/ http://diveintohtml5.org/ http://drupalradar.com/ video-jeremy-keithkeynote- session
Thank You! <label for="questions">Any Questions?</label> <input id="questions" name="questions" type="text" placeholder=”Your Question here" />

Recomendados

Html5
Html5Html5
Html5Satoshi Kikuchi
 
Pubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingPubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingTodd Keup
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Suzanne Dergacheva
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginnersJulio Bitencourt
 
10 New Things You Can Do with Drupal 8 Out-of-the-Box
10 New Things You Can Do with Drupal 8 Out-of-the-Box10 New Things You Can Do with Drupal 8 Out-of-the-Box
10 New Things You Can Do with Drupal 8 Out-of-the-BoxSuzanne Dergacheva
 

Recomendados

Html5
Html5Html5
Html5Satoshi Kikuchi
 
Pubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingPubcon Las Vegas 2012 CSS and HTML coding
Pubcon Las Vegas 2012 CSS and HTML codingTodd Keup
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Suzanne Dergacheva
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginnersJulio Bitencourt
 
10 New Things You Can Do with Drupal 8 Out-of-the-Box
10 New Things You Can Do with Drupal 8 Out-of-the-Box10 New Things You Can Do with Drupal 8 Out-of-the-Box
10 New Things You Can Do with Drupal 8 Out-of-the-BoxSuzanne Dergacheva
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsRich Bradshaw
 
MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsVforce Infotech
 
Jackie's porfolio edited
Jackie's porfolio editedJackie's porfolio edited
Jackie's porfolio editedJacquiline Tabelin
 
Drupal8 + AngularJS
Drupal8 + AngularJSDrupal8 + AngularJS
Drupal8 + AngularJSDaniel Kanchev
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerErik Isaksen
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Chris Tankersley
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
Web Components
Web ComponentsWeb Components
Web ComponentsNikolaus Graf
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksGerald Krishnan
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisPablo Garrido
 
Twig
TwigTwig
TwigSir-Arturio
 
Drupal 7 Search Engine Optimisation
Drupal 7 Search Engine OptimisationDrupal 7 Search Engine Optimisation
Drupal 7 Search Engine OptimisationPeter Macinkovic
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheetValeriaCastillo71
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular jsMaurice De Beijer [MVP]
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designersPai-Cheng Tao
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate PackageSimon Collison
 

Más contenido relacionado

La actualidad más candente

Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsRich Bradshaw
 
MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsVforce Infotech
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerErik Isaksen
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Chris Tankersley
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksGerald Krishnan
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisPablo Garrido
 
Drupal 7 Search Engine Optimisation
Drupal 7 Search Engine OptimisationDrupal 7 Search Engine Optimisation
Drupal 7 Search Engine OptimisationPeter Macinkovic
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designersPai-Cheng Tao
 

La actualidad más candente (20)

Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web Applications
 
Jackie's porfolio edited
Jackie's porfolio editedJackie's porfolio edited
Jackie's porfolio edited
 
Drupal8 + AngularJS
Drupal8 + AngularJSDrupal8 + AngularJS
Drupal8 + AngularJS
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Single Page Apps with Drupal 8
Single Page Apps with Drupal 8Single Page Apps with Drupal 8
Single Page Apps with Drupal 8
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
Web Components
Web ComponentsWeb Components
Web Components
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC Frameworks
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
Twig
TwigTwig
Twig
 
Drupal 7 Search Engine Optimisation
Drupal 7 Search Engine OptimisationDrupal 7 Search Engine Optimisation
Drupal 7 Search Engine Optimisation
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 

Similar a HTML 5 Drupalcamp Ireland Dublin 2010

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate PackageSimon Collison
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential TrainingKaloyan Kosev
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello worldhemi46h
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11Emily Lewis
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptxMaruthiPrasad96
 
5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 todayDaniel Ryan
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
 
A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionAlexey Gravanov
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 
HTML5 - An Introduction
HTML5 - An IntroductionHTML5 - An Introduction
HTML5 - An IntroductionTimmy Kokke
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateInventis Web Architects
 
crtical points for customizing Joomla templates
crtical points for customizing Joomla templatescrtical points for customizing Joomla templates
crtical points for customizing Joomla templatesamit das
 

Similar a HTML 5 Drupalcamp Ireland Dublin 2010 (20)

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Atomic design
Atomic designAtomic design
Atomic design
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
 
5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
HTML5 - An Introduction
HTML5 - An IntroductionHTML5 - An Introduction
HTML5 - An Introduction
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
 
crtical points for customizing Joomla templates
crtical points for customizing Joomla templatescrtical points for customizing Joomla templates
crtical points for customizing Joomla templates
 

Último

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 

Último (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

HTML 5 Drupalcamp Ireland Dublin 2010

  • 3. When will HTML5 be ready?
  • 4. When will HTML5 be ready? [Too Late - its already here]
  • 7. Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths. Design principles of HTML5
  • 9. Old Browser - New Website
  • 10. New Browser - Old Website
  • 11. Must work both ways.
  • 12. <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" /> Simplified Document Head
  • 14. Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress> <small> <ruby> + more!
  • 19. Drupal 6.19 + Basic <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content- module.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?T" /> <link type="text/css" rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?T" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style><![<!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
  • 20. Drupal 6.19 + Basic + Tools <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?z" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?z" /> <link rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?z" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style><![<!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
  • 21. Drupal 6.19 + Base + Tools <!DOCTYPE html> <html lang="en" dir="ltr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?G" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/default.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/html5.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/layout.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/style.css?G" /> <link rel="stylesheet" media="print" href="/sites/all/themes/html5_base/css/print.css?G" /> <!-- www.phpied.com/conditional-comments-block-downloads/ --> <!--[if IE]><![endif]--> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head>
  • 22. HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
  • 23. HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
  • 24. <label for="email">Email address</label> <input id="email" name="email" type="email" /> <label for="website">Website </label> <input id="website" name="website" type="url" /> <label for="phone">Phone number</label> <input id="phone" name="phone" type="tel" /> <label for="number">How many?</label> <input id="number" name="number" type="number" min="0" max="11" step="1" value="5"/> More Elements
  • 25.
  • 26. How do we get those in Drupal?
  • 29.
  • 30.
  • 33. Thank You! <label for="questions">Any Questions?</label> <input id="questions" name="questions" type="text" placeholder=”Your Question here" />