SlideShare a Scribd company logo
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 presentation
Fresh_Egg
 
From Shabby to Chic
From Shabby to ChicFrom Shabby to Chic
From Shabby to Chic
Richard 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 Sites
Jean-Baptiste Guerraz
 
Css3
Css3Css3
Html5
Html5Html5
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
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
Cedric Spillebeen
 
Aleact
AleactAleact
Aleact
Hyun Je Moon
 
Html5
Html5Html5
PhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development ConceptsPhDigital Bootcamp: Web Development Concepts
PhDigital Bootcamp: Web Development Concepts
Cindy Royal
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
Anthony Montalbano
 
Css intro
Css introCss intro
Css intro
Julia Vi
 
Php Online Training
Php Online TrainingPhp Online Training
Php Online Training
Nagendra Kumar
 
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
Chris Love
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
Mike Bradshaw
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean 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 2014
James Strang
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
Zoltan Iszlai
 
The web context
The web contextThe web context
The web context
Dan Phiffer
 

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 Show
Simon Skelton
 
سبيلك الى الثروة و النجاح
سبيلك الى الثروة و النجاحسبيلك الى الثروة و النجاح
سبيلك الى الثروة و النجاحMorad Kheloufi Kheloufi
 
Kmeans
KmeansKmeans
Kmeans
guestf0009ea
 
Experimental design
Experimental designExperimental design
Experimental design
Dan Toma
 
Historia insp aurora silva
Historia insp   aurora silvaHistoria insp   aurora silva
Historia insp aurora silva
antonio 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. Kristof
Dongheartwell 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, 2015
Delivering Happiness
 
Netiquette
NetiquetteNetiquette
Netiquette
oscargn10
 
Trulia Metro Movers Report - Winter 2012
Trulia Metro Movers Report - Winter 2012Trulia Metro Movers Report - Winter 2012
Trulia Metro Movers Report - Winter 2012
Trulia
 
Zaragoza turismo 243
Zaragoza turismo 243Zaragoza turismo 243
Zaragoza turismo 243
Saucepolis blog & Hotel Sauce
 
Comprension de lectura de los mexicanos
Comprension de lectura de los mexicanosComprension de lectura de los mexicanos
Comprension de lectura de los mexicanos
Ismael Plascencia Nuñez
 
Application of Number
Application of NumberApplication of Number
Application of Number
iteclearners
 
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
Jonathan 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 Change
Delivering Happiness
 
The Public Opinion Landscape: Election 2016
The Public Opinion Landscape: Election 2016The Public Opinion Landscape: Election 2016
The Public Opinion Landscape: Election 2016
GloverParkGroup
 
#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока
#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока
#СтанемБлиже: спецкурс по межкультурной коммуникации с туристами с Востока
School of Efficient Language Studying Lingvocat.com/ Школа результативных языков Lingvocat.com
 
The secret of light Itziar
The secret of light ItziarThe secret of light Itziar
The secret of light Itziar
isamadero79
 
Meosq2 2011 Us Report Final
Meosq2 2011 Us Report FinalMeosq2 2011 Us Report Final
Meosq2 2011 Us Report Final
ktarca
 

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_elementos nuevos integrados ahora
HTML5_elementos  nuevos integrados ahoraHTML5_elementos  nuevos integrados ahora
HTML5_elementos nuevos integrados ahora
mano21161
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
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
lekhacce
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
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
Lohith Goudagere Nagaraj
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
Ivano Malavolta
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris 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
 
025444215.pptx
025444215.pptx025444215.pptx
025444215.pptx
RiyaJenner1
 
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
Naga Harish M
 
web development
web developmentweb development
web development
RamanDeep876641
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
silvers5
 
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
Erin M. Kidwell
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
25444215.pptx
25444215.pptx25444215.pptx
25444215.pptx
YashMittal302244
 
web development
web developmentweb development
web development
ABHISHEKJHA176786
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 

Similar to HTML5 for ASP.NET Developers (20)

HTML5_elementos nuevos integrados ahora
HTML5_elementos  nuevos integrados ahoraHTML5_elementos  nuevos integrados ahora
HTML5_elementos nuevos integrados ahora
 
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
 

Recently uploaded

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 

Recently uploaded (20)

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 

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