SlideShare a Scribd company logo
1 of 24
HTML5 and ASP.NET

            Justin Lee
Software Development Consultant
      triplez@justinlee.sg
       http://justinlee.sg
HTML5
• HTML5 + Browser API +
  CSS3 + JavaScript
• New Elements and
  Attributes Markup
• New APIs for DOM
• Video, Audio, 2D, 3D,
  Animations, File, Drag-
  and-Drop, etc. support
Getting things set up
• Microsoft Visual Studio 2010 SP1
• Web Standards Update for Microsoft Visual
  Studio 2010 SP1
• ASP.NET MVC3
• NuGet
Look! HTML5!
NuGet Packages
•   JQuery
•   Modernizr
•   HTML5.Setup
•   MvcHtml5Templates
•   MVCHtml5Toolkit
•   Html5Boilerplate.Mvc3.Razor
Can I Use…
HTML5 New Markups
• <!DOCTYPE html>
• <header></header>, <section></section>,
  <footer></footer>
• <nav></nav>
• New <input></input> attributes
• <audio></audio>, <video></video>
• <progress></progress>
• <meter></meter>
• Etc. etc. etc. etc. etc.
HTML5 New Markups
HTML5 New APIs
•   Web Storage
•   Web Workers
•   Web Sockets
•   Notifications
•   Drag-and-Drop, Drag-in
•   Geolocation
•   Canvas
•   Etc. etc. etc. etc.
HTML5 + CSS3
•   CSS Selectors
•   Webfonts
•   Text wrapping
•   Columns
•   Text Stroke
•   Opacity
•   HSL support
•   Rounded Corners
•   Gradients
•   Shadows
•   Border Image
•   Flexible Box Model
•   Transitions, Transforms, Animations
•   Etc. etc. etc. etc.
CSS Selectors
Selectors                         Negation
.row:nth-child(even) {            :not(.box) {
  background: #dde;                 color: #00c;
}                                 }
.row:nth-child(odd) {             :not(span) {
  background: white;                display: block;
}                                 }

Image-like display                More specific targetting
div {                             h2:first-child { ... }
  display: inline-block;
}                                 div.text > div { ... }
                                  h2 + header { ... }
Specific attributes
input[type="text"] {
  background: #eee;
}
Web Fonts
@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}
HTML5 + JS
• document.getElementsByClassName,
  document.querySelectorAll
• Custom data-* attributes
• Element.classList
• History API
• Etc. etc. etc. etc.
Demos

HTML5 DEMOS
Futures for Visual Studio vNext
• Web Form will be HTML5 compatible
• MVC and Razor will also support HTML5
• Visual Studio Intellisense will have better JS
  and CSS detection
Tips
• Use ASP.NET MVC 3, not ASP.NET Web Forms
  (until ASP.NET 4.5)

• Use Modernizr to maintain backward
  compatibility

• Use Web Workers to maintain responsiveness
Tips
• Consider carefully what should be processed
  Server-Side and Client-Side

• Not all browsers support all features
  (Especially IE)

• Learn the new markups, what you need might
  just be there.
Useful Links
•   Html5rocks.com
•   htmlfivewow.com
•   Caniuse.com
•   Supersocket.codeplex.com
•   Web Standards Update
Q&A
              Justin Lee
Software Development Consultant
        triplez@justinlee.sg
         http://justinlee.sg
Exploring new career opportunities

More Related Content

What's hot

Web development basics (Part-1)
Web development basics (Part-1)Web development basics (Part-1)
Web development basics (Part-1)Rajat Pratap Singh
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentationFresh_Egg
 
From Shabby to Chic
From Shabby to ChicFrom Shabby to Chic
From Shabby to ChicRichard Bair
 
Drupal Camp Kiev 2012 - High Performance Drupal Web Sites
Drupal Camp Kiev 2012 - High Performance Drupal Web SitesDrupal Camp Kiev 2012 - High Performance Drupal Web Sites
Drupal Camp Kiev 2012 - High Performance Drupal Web SitesJean-Baptiste Guerraz
 
New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)Luc Perkins
 
PhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsPhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsCindy Royal
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPressAnthony Montalbano
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentalsMike Bradshaw
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sassSean Wolfe
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014James Strang
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship CourseZoltan Iszlai
 

What's hot (20)

Web development basics (Part-1)
Web development basics (Part-1)Web development basics (Part-1)
Web development basics (Part-1)
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
 
From Shabby to Chic
From Shabby to ChicFrom Shabby to Chic
From Shabby to Chic
 
Drupal Camp Kiev 2012 - High Performance Drupal Web Sites
Drupal Camp Kiev 2012 - High Performance Drupal Web SitesDrupal Camp Kiev 2012 - High Performance Drupal Web Sites
Drupal Camp Kiev 2012 - High Performance Drupal Web Sites
 
Css3
Css3Css3
Css3
 
Html5
Html5Html5
Html5
 
New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Aleact
AleactAleact
Aleact
 
Html5
Html5Html5
Html5
 
PhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsPhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development Concepts
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
 
Css intro
Css introCss intro
Css intro
 
Php Online Training
Php Online TrainingPhp Online Training
Php Online Training
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
 
The web context
The web contextThe web context
The web context
 

Viewers also liked

ITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support Show
ITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support ShowITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support Show
ITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support ShowSimon Skelton
 
سبيلك الى الثروة و النجاح
سبيلك الى الثروة و النجاحسبيلك الى الثروة و النجاح
سبيلك الى الثروة و النجاحMorad Kheloufi Kheloufi
 
Experimental design
Experimental designExperimental design
Experimental designDan Toma
 
Historia insp aurora silva
Historia insp   aurora silvaHistoria insp   aurora silva
Historia insp aurora silvaantonio leal
 
Who Needs Love! In Japan, Many Couples Don't- by Nicholas D. Kristof
Who Needs Love! In Japan, Many Couples Don't- by Nicholas D. KristofWho Needs Love! In Japan, Many Couples Don't- by Nicholas D. Kristof
Who Needs Love! In Japan, Many Couples Don't- by Nicholas D. KristofDongheartwell Dargantes
 
Mumbai - Zappos - Downtown Project - Dec 10, 2015
Mumbai - Zappos - Downtown Project - Dec 10, 2015Mumbai - Zappos - Downtown Project - Dec 10, 2015
Mumbai - Zappos - Downtown Project - Dec 10, 2015Delivering Happiness
 
Trulia Metro Movers Report - Winter 2012
Trulia Metro Movers Report - Winter 2012Trulia Metro Movers Report - Winter 2012
Trulia Metro Movers Report - Winter 2012Trulia
 
Application of Number
Application of NumberApplication of Number
Application of Numberiteclearners
 
Le lean startup concret autour d'une petite mousse
Le lean startup concret autour d'une petite mousseLe lean startup concret autour d'une petite mousse
Le lean startup concret autour d'une petite mousseJonathan Bonzy
 
DH Menu of Solutions for Sustainable Culture Change
DH Menu of Solutions for Sustainable Culture ChangeDH Menu of Solutions for Sustainable Culture Change
DH Menu of Solutions for Sustainable Culture ChangeDelivering Happiness
 
The Public Opinion Landscape: Election 2016
The Public Opinion Landscape: Election 2016The Public Opinion Landscape: Election 2016
The Public Opinion Landscape: Election 2016GloverParkGroup
 
The secret of light Itziar
The secret of light ItziarThe secret of light Itziar
The secret of light Itziarisamadero79
 
Meosq2 2011 Us Report Final
Meosq2 2011 Us Report FinalMeosq2 2011 Us Report Final
Meosq2 2011 Us Report Finalktarca
 

Viewers also liked (19)

ITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support Show
ITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support ShowITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support Show
ITSM the John Lewis Way, by Simon Skelton - Service Desk &amp; IT Support Show
 
سبيلك الى الثروة و النجاح
سبيلك الى الثروة و النجاحسبيلك الى الثروة و النجاح
سبيلك الى الثروة و النجاح
 
 
Kmeans
KmeansKmeans
Kmeans
 
Experimental design
Experimental designExperimental design
Experimental design
 
Historia insp aurora silva
Historia insp   aurora silvaHistoria insp   aurora silva
Historia insp aurora silva
 
Who Needs Love! In Japan, Many Couples Don't- by Nicholas D. Kristof
Who Needs Love! In Japan, Many Couples Don't- by Nicholas D. KristofWho Needs Love! In Japan, Many Couples Don't- by Nicholas D. Kristof
Who Needs Love! In Japan, Many Couples Don't- by Nicholas D. Kristof
 
Mumbai - Zappos - Downtown Project - Dec 10, 2015
Mumbai - Zappos - Downtown Project - Dec 10, 2015Mumbai - Zappos - Downtown Project - Dec 10, 2015
Mumbai - Zappos - Downtown Project - Dec 10, 2015
 
Netiquette
NetiquetteNetiquette
Netiquette
 
Trulia Metro Movers Report - Winter 2012
Trulia Metro Movers Report - Winter 2012Trulia Metro Movers Report - Winter 2012
Trulia Metro Movers Report - Winter 2012
 
Zaragoza turismo 243
Zaragoza turismo 243Zaragoza turismo 243
Zaragoza turismo 243
 
Comprension de lectura de los mexicanos
Comprension de lectura de los mexicanosComprension de lectura de los mexicanos
Comprension de lectura de los mexicanos
 
Application of Number
Application of NumberApplication of Number
Application of Number
 
Le lean startup concret autour d'une petite mousse
Le lean startup concret autour d'une petite mousseLe lean startup concret autour d'une petite mousse
Le lean startup concret autour d'une petite mousse
 
DH Menu of Solutions for Sustainable Culture Change
DH Menu of Solutions for Sustainable Culture ChangeDH Menu of Solutions for Sustainable Culture Change
DH Menu of Solutions for Sustainable Culture Change
 
The Public Opinion Landscape: Election 2016
The Public Opinion Landscape: Election 2016The Public Opinion Landscape: Election 2016
The Public Opinion Landscape: Election 2016
 
#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока
#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока
#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока
 
The secret of light Itziar
The secret of light ItziarThe secret of light Itziar
The secret of light Itziar
 
Meosq2 2011 Us Report Final
Meosq2 2011 Us Report FinalMeosq2 2011 Us Report Final
Meosq2 2011 Us Report Final
 

Similar to HTML5 for ASP.NET Developers

HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
Introduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxIntroduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxlekhacce
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDoris Chen
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5Doris Chen
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxsilvers5
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 

Similar to HTML5 for ASP.NET Developers (20)

HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Introduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxIntroduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptx
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
025444215.pptx
025444215.pptx025444215.pptx
025444215.pptx
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
web development
web developmentweb development
web development
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
25444215.pptx
25444215.pptx25444215.pptx
25444215.pptx
 
web development
web developmentweb development
web development
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 

Recently uploaded

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
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
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 

Recently uploaded (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

HTML5 for ASP.NET Developers

  • 1. HTML5 and ASP.NET Justin Lee Software Development Consultant triplez@justinlee.sg http://justinlee.sg
  • 2. HTML5 • HTML5 + Browser API + CSS3 + JavaScript • New Elements and Attributes Markup • New APIs for DOM • Video, Audio, 2D, 3D, Animations, File, Drag- and-Drop, etc. support
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. Getting things set up • Microsoft Visual Studio 2010 SP1 • Web Standards Update for Microsoft Visual Studio 2010 SP1 • ASP.NET MVC3 • NuGet
  • 10. NuGet Packages • JQuery • Modernizr • HTML5.Setup • MvcHtml5Templates • MVCHtml5Toolkit • Html5Boilerplate.Mvc3.Razor
  • 12. HTML5 New Markups • <!DOCTYPE html> • <header></header>, <section></section>, <footer></footer> • <nav></nav> • New <input></input> attributes • <audio></audio>, <video></video> • <progress></progress> • <meter></meter> • Etc. etc. etc. etc. etc.
  • 14. HTML5 New APIs • Web Storage • Web Workers • Web Sockets • Notifications • Drag-and-Drop, Drag-in • Geolocation • Canvas • Etc. etc. etc. etc.
  • 15. HTML5 + CSS3 • CSS Selectors • Webfonts • Text wrapping • Columns • Text Stroke • Opacity • HSL support • Rounded Corners • Gradients • Shadows • Border Image • Flexible Box Model • Transitions, Transforms, Animations • Etc. etc. etc. etc.
  • 16. CSS Selectors Selectors Negation .row:nth-child(even) { :not(.box) { background: #dde; color: #00c; } } .row:nth-child(odd) { :not(span) { background: white; display: block; } } Image-like display More specific targetting div { h2:first-child { ... } display: inline-block; } div.text > div { ... } h2 + header { ... } Specific attributes input[type="text"] { background: #eee; }
  • 17. Web Fonts @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); } @font-face { font-family: 'Droid Sans'; src: url(Droid_Sans.ttf); } header { font-family: 'LeagueGothic'; }
  • 18. HTML5 + JS • document.getElementsByClassName, document.querySelectorAll • Custom data-* attributes • Element.classList • History API • Etc. etc. etc. etc.
  • 20. Futures for Visual Studio vNext • Web Form will be HTML5 compatible • MVC and Razor will also support HTML5 • Visual Studio Intellisense will have better JS and CSS detection
  • 21. Tips • Use ASP.NET MVC 3, not ASP.NET Web Forms (until ASP.NET 4.5) • Use Modernizr to maintain backward compatibility • Use Web Workers to maintain responsiveness
  • 22. Tips • Consider carefully what should be processed Server-Side and Client-Side • Not all browsers support all features (Especially IE) • Learn the new markups, what you need might just be there.
  • 23. Useful Links • Html5rocks.com • htmlfivewow.com • Caniuse.com • Supersocket.codeplex.com • Web Standards Update
  • 24. Q&A Justin Lee Software Development Consultant triplez@justinlee.sg http://justinlee.sg Exploring new career opportunities