SlideShare une entreprise Scribd logo
1  sur  36
HTML5 & CSS3
The Future of Web Technologies
        by Dang Minh Tuan
HTML5 & CSS3
The TODAY of Web Technologies
        by Dang Minh Tuan
About me
                  Fullname: Đặng Minh Tuấn
                  http://www.facebook.com/dangminhtuan

                  Nickname: ohisee
                  http://twitter.com/ohisee

                  Website: hoctudau.com

                            Topics in Hà Nội PHP Day
2008: HTML & CSS Best Practices
http://www.hoctudau.com/slides/html-css-best-practices
2009: HTML & CSS Trends
http://www.hoctudau.com/slides/html-css-trends
What?      Why?

        Who?
When?      How?
What?
What is HTML5 & CSS3?
HTML5 is (just a version of) HTML
CSS3 is (just a version of) CSS
HTML5 is (just a version of) HTML
CSS3 is (just a version of) CSS
HTML5 is (just a version of) HTML
CSS3 is (just a version of) CSS
HTML5 is (just a version of) HTML
CSS3 is (just a version of) CSS
New Version - remove some, add many
HTML5 references
http://www.w3schools.com/html5/html5_reference.asp

HTML4                     HTML5
<div id="header">         <header>
<input type="text">       <input type="email">


CSS3 references
http://www.veign.com/downloads/guides/qrg0008.pdf

CSS2                       CSS3
border                     border-radius
Who?
Who relates to HTML5 & CSS3?
       •   Who develops them?
       •   Who supports them?
       •   Who uses them?
       •   Who talks about them?
Who develops them?
Who develops them?
Who develops them?
HTML5 Specifications
• WHATWG
   o http://www.whatwg.org/specs/web-apps/current-work/
• W3C
   o http://dev.w3.org/html5/spec/Overview.html
• IETF (WebSocket specification)
   o http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol


CSS 3 Specifications
• W3C
  o http://www.w3.org/Style/CSS/current-work
Who supports them?
http://www.findmebyip.com/litmus/#target-selector
Who uses them?




             Apple
Who talks about them?
     My personal bookmarks about HTML5 & CSS3

HTML5 ~ 80 links         CSS3 ~ 70 links
• sitepoint: 4           • smashingmagazine: 4
• smashingmagazine: 4    • tutsplus: 3
• tutsplus: 3            • marcofolio.net: 2
• html5rocks: 2          • impressivewebs: 2
• sixrevisions: 2        • mikeplate: 2
• VN: 4                  • css-tricks: 2
• other: 65              • dev.opera: 2
                         • VN: 1
                         • other: 44
Who talks about them?
           My personal bookmarks about HTML5 & CSS3

HTML5 Link Collection                                     CSS3 Link Collection
http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw   http://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4
Who talks about them?
       Ebooks




          most of them published in 2010
Who talks about them?
Slides:
• http://www.slideshare.net/search/slideshow?q=HTML5
• http://www.slideshare.net/search/slideshow?q=CSS3
How?
HOW TO?
  • How HTML5 & CSS3 can do?
  • How can you learn HTML5, CSS3?
Live Demo
                               http://slides.html5rocks.com/

http://www.youtube.com/user/hoctudau#p/u/6/1sD4mf5JDS4   http://www.youtube.com/user/hoctudau#p/u/8/GGX5SfYSNHw
HTML5 for some Devices
    • Do you have an iPhone?
How to learn HTML5, CSS3?

1. Step 1: Learn some basic HTML, CSS.
2. Step 2: Learn how to use HTML4, CSS2 in your daily
   works.
3. Step 3: Learn how to apply HTML, CSS best
   practices.
4. Step 4: "Playing make fun" with HTML5, CSS3
5. Step 5: "Practices make perfect" with HTML5, CSS3
Why?




When?
Why & When?
   Why We Should Start Using CSS3 and
   HTML5 Today?
For Our Clients


 • Conceding to the idea that the project will not be able to
   look the same across various browsers,
 • This means more developed and unfettered imaginative
   designs for our clients,
 • This could lead to increased costs for clients as well, but
   with higher levels of innovation and
 • Client’s visions for what they want will be less hindered
   by these limitations.
For the Users


 • Potentially less disruptions of experience from one device
   to another and
 • An overall improved user experience.
For Designers/Developers

  • Conceding to the idea that the project will not be able
    to look the same across various browsers,
  • A more open playing field for designers and
    developers all around; less restricted by this holding
    pattern,
  • More exciting and innovative landscape to attract new
    clientele,
  • Division of project audience into separate
    presentational approaches and
  • Probably less work involved because we don’t need
    the many hacks and workarounds we’ve used before.
So What Are We Waiting For?

    •   Fear Factor
    •   Comfortable Factor
    •   Doubt Factor
    •   Faith Factor
    •   “It’s Too Early” Factor
    •   Validation Factor
Who hires HTML5, CSS3 Ninja?
HTML5 vs Flash
  o   http://flashsucks.org/
  o   http://html5vsflash.tumblr.com/



               Note: HTML5 doesn't do anything. It's
               a spec; one that isn't finished yet. Sure, many
               of its proposed features will allow developers
               to produce similar features as Flash, but it's
               up to the browser developers to implement
               said specification.
Q&A
              Start your own HTML5, CSS3 Project!
                              Now!!!

            http://hoctudau.com/slides/reg
                  Topics in Hà Nội PHP Day
• 2008: HTML & CSS Best Practices
   o http://www.hoctudau.com/slides/html-css-best-practices
• 2009: HTML & CSS Trends
   o http://www.hoctudau.com/slides/html-css-trends
• 2010: HTML5 & CSS3 The Future of Web Technologies
   o   http://www.hoctudau.com/slides/html5-css3

Contenu connexe

Tendances

WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013Stanko Metodiev
 
Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Morten Rand-Hendriksen
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Bwhtmlpdx0809
Bwhtmlpdx0809Bwhtmlpdx0809
Bwhtmlpdx0809Thinkful
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Justin Ezor
 
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ将一 深見
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Thinkful
 
面向测试的前端知识
面向测试的前端知识面向测试的前端知识
面向测试的前端知识chencheng 云谦
 
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15Andy McIlwain
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Building a Moodle theme with bootstrap
Building a Moodle theme with bootstrapBuilding a Moodle theme with bootstrap
Building a Moodle theme with bootstrapBas Brands
 
Tools for HTML5
Tools for HTML5Tools for HTML5
Tools for HTML5lillianabe
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
Views Mini-Course, Part I: An Introduction to Views
Views Mini-Course, Part I: An Introduction to ViewsViews Mini-Course, Part I: An Introduction to Views
Views Mini-Course, Part I: An Introduction to ViewsAcquia
 

Tendances (19)

Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013
 
Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Bwhtmlpdx0809
Bwhtmlpdx0809Bwhtmlpdx0809
Bwhtmlpdx0809
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
 
How to Build Custom WordPress Blocks
How to Build Custom WordPress BlocksHow to Build Custom WordPress Blocks
How to Build Custom WordPress Blocks
 
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-13-66-123-168
 
面向测试的前端知识
面向测试的前端知识面向测试的前端知识
面向测试的前端知识
 
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Building a Moodle theme with bootstrap
Building a Moodle theme with bootstrapBuilding a Moodle theme with bootstrap
Building a Moodle theme with bootstrap
 
Tools for HTML5
Tools for HTML5Tools for HTML5
Tools for HTML5
 
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Views Mini-Course, Part I: An Introduction to Views
Views Mini-Course, Part I: An Introduction to ViewsViews Mini-Course, Part I: An Introduction to Views
Views Mini-Course, Part I: An Introduction to Views
 

En vedette

Sentidos-clase Dolores Alvarado
Sentidos-clase Dolores AlvaradoSentidos-clase Dolores Alvarado
Sentidos-clase Dolores AlvaradoLola Alvarado
 
Keek foto filter
Keek foto filterKeek foto filter
Keek foto filterpeter963
 
Keek get more followers free
Keek get more followers freeKeek get more followers free
Keek get more followers freepeter963
 
Assemblée citoyenne du Font de Gauche Munich
Assemblée citoyenne du Font de Gauche MunichAssemblée citoyenne du Font de Gauche Munich
Assemblée citoyenne du Font de Gauche MunichPierrick Nussbaum
 
Keek free app
Keek free appKeek free app
Keek free apppeter963
 
Las redes sociales
Las redes sociales Las redes sociales
Las redes sociales AndresPCom
 
Artritis reumatoidea dr. sandy cadena
Artritis reumatoidea dr. sandy cadenaArtritis reumatoidea dr. sandy cadena
Artritis reumatoidea dr. sandy cadenaSANDY cadena
 
Website Series 5 - MySQL
Website Series 5 - MySQLWebsite Series 5 - MySQL
Website Series 5 - MySQLEugene Yang
 
Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...
Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...
Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...Novayanti Simamora
 
Espasmo via aerea ped
Espasmo via aerea pedEspasmo via aerea ped
Espasmo via aerea pedClau
 
Lectura de caso: Aneurisma arteria ileal.
Lectura de caso: Aneurisma arteria ileal.Lectura de caso: Aneurisma arteria ileal.
Lectura de caso: Aneurisma arteria ileal.Heidy Saenz
 
BMW Group QSC Testertag 2013: Die Psychologie des Testens
BMW Group QSC Testertag 2013: Die Psychologie des TestensBMW Group QSC Testertag 2013: Die Psychologie des Testens
BMW Group QSC Testertag 2013: Die Psychologie des TestensRalf Bongard
 

En vedette (18)

Angelhack
AngelhackAngelhack
Angelhack
 
Sentidos-clase Dolores Alvarado
Sentidos-clase Dolores AlvaradoSentidos-clase Dolores Alvarado
Sentidos-clase Dolores Alvarado
 
Lec 1 2014
Lec 1 2014Lec 1 2014
Lec 1 2014
 
Keek foto filter
Keek foto filterKeek foto filter
Keek foto filter
 
For Sidney Bechet
For Sidney BechetFor Sidney Bechet
For Sidney Bechet
 
Keek get more followers free
Keek get more followers freeKeek get more followers free
Keek get more followers free
 
Assemblée citoyenne du Font de Gauche Munich
Assemblée citoyenne du Font de Gauche MunichAssemblée citoyenne du Font de Gauche Munich
Assemblée citoyenne du Font de Gauche Munich
 
Happy to be with you
Happy to be with youHappy to be with you
Happy to be with you
 
Networking Tips
Networking TipsNetworking Tips
Networking Tips
 
Keek free app
Keek free appKeek free app
Keek free app
 
Las redes sociales
Las redes sociales Las redes sociales
Las redes sociales
 
Artritis reumatoidea dr. sandy cadena
Artritis reumatoidea dr. sandy cadenaArtritis reumatoidea dr. sandy cadena
Artritis reumatoidea dr. sandy cadena
 
Website Series 5 - MySQL
Website Series 5 - MySQLWebsite Series 5 - MySQL
Website Series 5 - MySQL
 
Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...
Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...
Studi Penyakit Busuk Hitam Bakteri Xanthomonas campestris (Xcc) pada Tanaman ...
 
Espasmo via aerea ped
Espasmo via aerea pedEspasmo via aerea ped
Espasmo via aerea ped
 
CV Mouloud MOUSSAOUI 2015
CV Mouloud MOUSSAOUI 2015CV Mouloud MOUSSAOUI 2015
CV Mouloud MOUSSAOUI 2015
 
Lectura de caso: Aneurisma arteria ileal.
Lectura de caso: Aneurisma arteria ileal.Lectura de caso: Aneurisma arteria ileal.
Lectura de caso: Aneurisma arteria ileal.
 
BMW Group QSC Testertag 2013: Die Psychologie des Testens
BMW Group QSC Testertag 2013: Die Psychologie des TestensBMW Group QSC Testertag 2013: Die Psychologie des Testens
BMW Group QSC Testertag 2013: Die Psychologie des Testens
 

Similaire à HTML5 & CSS3 The Future of Web Technologies

09. html5 & css3 furture of web
09. html5 & css3 furture of web09. html5 & css3 furture of web
09. html5 & css3 furture of webQuang Anh Le
 
09 html5 css3-the_future_of_web_technology
09 html5 css3-the_future_of_web_technology09 html5 css3-the_future_of_web_technology
09 html5 css3-the_future_of_web_technologyNguyen Duc Phu
 
Html5, css3 and the future of web technologies
Html5, css3 and the future of web technologiesHtml5, css3 and the future of web technologies
Html5, css3 and the future of web technologiesVõ Duy Tuấn
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopmentdamonras
 
New Web Revolution - html5 and css3
New Web Revolution - html5 and css3New Web Revolution - html5 and css3
New Web Revolution - html5 and css3Nitish Surelia
 
full stqack guktgktktykytkyyyjrneyrynye5n
full stqack guktgktktykytkyyyjrneyrynye5nfull stqack guktgktktykytkyyyjrneyrynye5n
full stqack guktgktktykytkyyyjrneyrynye5nGoogleDSCDibrugarhUn
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)Chris Mills
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101FITC
 
FITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedFITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedRami Sayar
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5nobel mujuji
 
HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebBerg Brandt
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesMaximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesPlatypus
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなことMasakazu Muraoka
 

Similaire à HTML5 & CSS3 The Future of Web Technologies (20)

09. html5 & css3 furture of web
09. html5 & css3 furture of web09. html5 & css3 furture of web
09. html5 & css3 furture of web
 
09 html5 css3-the_future_of_web_technology
09 html5 css3-the_future_of_web_technology09 html5 css3-the_future_of_web_technology
09 html5 css3-the_future_of_web_technology
 
Html5, css3 and the future of web technologies
Html5, css3 and the future of web technologiesHtml5, css3 and the future of web technologies
Html5, css3 and the future of web technologies
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopment
 
New Web Revolution - html5 and css3
New Web Revolution - html5 and css3New Web Revolution - html5 and css3
New Web Revolution - html5 and css3
 
Html5
Html5Html5
Html5
 
full stqack guktgktktykytkyyyjrneyrynye5n
full stqack guktgktktykytkyyyjrneyrynye5nfull stqack guktgktktykytkyyyjrneyrynye5n
full stqack guktgktktykytkyyyjrneyrynye5n
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
HTML 5
HTML 5HTML 5
HTML 5
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
 
FITC - Bootstrap Unleashed
FITC - Bootstrap UnleashedFITC - Bootstrap Unleashed
FITC - Bootstrap Unleashed
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesMaximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
 

Plus de hazzaz

Coffee1
Coffee1Coffee1
Coffee1hazzaz
 
Suy ngam
Suy ngamSuy ngam
Suy ngamhazzaz
 
Tu dong dat hang tu he thong ban le lon nhat trung quoc
Tu dong dat hang tu he thong ban le lon nhat trung quocTu dong dat hang tu he thong ban le lon nhat trung quoc
Tu dong dat hang tu he thong ban le lon nhat trung quochazzaz
 
how startups can benefit from launch community
how startups can benefit from launch communityhow startups can benefit from launch community
how startups can benefit from launch communityhazzaz
 
social network game
social network gamesocial network game
social network gamehazzaz
 
trung oss magento overview
trung oss magento overviewtrung oss magento overview
trung oss magento overviewhazzaz
 
su dung drupal xay dung mang xa hoi
su dung drupal xay dung mang xa hoisu dung drupal xay dung mang xa hoi
su dung drupal xay dung mang xa hoihazzaz
 
java script unit testing framework
java script unit testing frameworkjava script unit testing framework
java script unit testing frameworkhazzaz
 
build your own php extension
build your own php extensionbuild your own php extension
build your own php extensionhazzaz
 
kiem tien online
kiem tien onlinekiem tien online
kiem tien onlinehazzaz
 
web optimization
web optimizationweb optimization
web optimizationhazzaz
 
speed up ntvv2 by php ext module
speed up ntvv2 by php ext modulespeed up ntvv2 by php ext module
speed up ntvv2 by php ext modulehazzaz
 
zingmepracticeforbuildingscalablewebsitewithphp
zingmepracticeforbuildingscalablewebsitewithphpzingmepracticeforbuildingscalablewebsitewithphp
zingmepracticeforbuildingscalablewebsitewithphphazzaz
 
mysql optimization
mysql optimizationmysql optimization
mysql optimizationhazzaz
 
EAV in Magento
EAV in MagentoEAV in Magento
EAV in Magentohazzaz
 
css_trends
css_trendscss_trends
css_trendshazzaz
 
Phan mem tu do nguon mo
Phan mem tu do nguon moPhan mem tu do nguon mo
Phan mem tu do nguon mohazzaz
 

Plus de hazzaz (20)

Coffee1
Coffee1Coffee1
Coffee1
 
Suy ngam
Suy ngamSuy ngam
Suy ngam
 
Tu dong dat hang tu he thong ban le lon nhat trung quoc
Tu dong dat hang tu he thong ban le lon nhat trung quocTu dong dat hang tu he thong ban le lon nhat trung quoc
Tu dong dat hang tu he thong ban le lon nhat trung quoc
 
how startups can benefit from launch community
how startups can benefit from launch communityhow startups can benefit from launch community
how startups can benefit from launch community
 
social network game
social network gamesocial network game
social network game
 
trung oss magento overview
trung oss magento overviewtrung oss magento overview
trung oss magento overview
 
su dung drupal xay dung mang xa hoi
su dung drupal xay dung mang xa hoisu dung drupal xay dung mang xa hoi
su dung drupal xay dung mang xa hoi
 
java script unit testing framework
java script unit testing frameworkjava script unit testing framework
java script unit testing framework
 
build your own php extension
build your own php extensionbuild your own php extension
build your own php extension
 
kiem tien online
kiem tien onlinekiem tien online
kiem tien online
 
web optimization
web optimizationweb optimization
web optimization
 
speed up ntvv2 by php ext module
speed up ntvv2 by php ext modulespeed up ntvv2 by php ext module
speed up ntvv2 by php ext module
 
zingmepracticeforbuildingscalablewebsitewithphp
zingmepracticeforbuildingscalablewebsitewithphpzingmepracticeforbuildingscalablewebsitewithphp
zingmepracticeforbuildingscalablewebsitewithphp
 
mysql optimization
mysql optimizationmysql optimization
mysql optimization
 
EAV in Magento
EAV in MagentoEAV in Magento
EAV in Magento
 
Albus
AlbusAlbus
Albus
 
css_trends
css_trendscss_trends
css_trends
 
Cloud
CloudCloud
Cloud
 
Phan mem tu do nguon mo
Phan mem tu do nguon moPhan mem tu do nguon mo
Phan mem tu do nguon mo
 
Zing
ZingZing
Zing
 

Dernier

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
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
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
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
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
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
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
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
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 

Dernier (20)

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
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
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
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
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
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
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 

HTML5 & CSS3 The Future of Web Technologies

  • 1. HTML5 & CSS3 The Future of Web Technologies by Dang Minh Tuan
  • 2. HTML5 & CSS3 The TODAY of Web Technologies by Dang Minh Tuan
  • 3. About me Fullname: Đặng Minh Tuấn http://www.facebook.com/dangminhtuan Nickname: ohisee http://twitter.com/ohisee Website: hoctudau.com Topics in Hà Nội PHP Day 2008: HTML & CSS Best Practices http://www.hoctudau.com/slides/html-css-best-practices 2009: HTML & CSS Trends http://www.hoctudau.com/slides/html-css-trends
  • 4. What? Why? Who? When? How?
  • 6. What is HTML5 & CSS3?
  • 7. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 8. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 9. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 10. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 11. New Version - remove some, add many HTML5 references http://www.w3schools.com/html5/html5_reference.asp HTML4 HTML5 <div id="header"> <header> <input type="text"> <input type="email"> CSS3 references http://www.veign.com/downloads/guides/qrg0008.pdf CSS2 CSS3 border border-radius
  • 12. Who?
  • 13. Who relates to HTML5 & CSS3? • Who develops them? • Who supports them? • Who uses them? • Who talks about them?
  • 16. Who develops them? HTML5 Specifications • WHATWG o http://www.whatwg.org/specs/web-apps/current-work/ • W3C o http://dev.w3.org/html5/spec/Overview.html • IETF (WebSocket specification) o http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol CSS 3 Specifications • W3C o http://www.w3.org/Style/CSS/current-work
  • 18. Who uses them? Apple
  • 19. Who talks about them? My personal bookmarks about HTML5 & CSS3 HTML5 ~ 80 links CSS3 ~ 70 links • sitepoint: 4 • smashingmagazine: 4 • smashingmagazine: 4 • tutsplus: 3 • tutsplus: 3 • marcofolio.net: 2 • html5rocks: 2 • impressivewebs: 2 • sixrevisions: 2 • mikeplate: 2 • VN: 4 • css-tricks: 2 • other: 65 • dev.opera: 2 • VN: 1 • other: 44
  • 20. Who talks about them? My personal bookmarks about HTML5 & CSS3 HTML5 Link Collection CSS3 Link Collection http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw http://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4
  • 21. Who talks about them? Ebooks most of them published in 2010
  • 22. Who talks about them? Slides: • http://www.slideshare.net/search/slideshow?q=HTML5 • http://www.slideshare.net/search/slideshow?q=CSS3
  • 23. How?
  • 24. HOW TO? • How HTML5 & CSS3 can do? • How can you learn HTML5, CSS3?
  • 25. Live Demo http://slides.html5rocks.com/ http://www.youtube.com/user/hoctudau#p/u/6/1sD4mf5JDS4 http://www.youtube.com/user/hoctudau#p/u/8/GGX5SfYSNHw
  • 26. HTML5 for some Devices • Do you have an iPhone?
  • 27. How to learn HTML5, CSS3? 1. Step 1: Learn some basic HTML, CSS. 2. Step 2: Learn how to use HTML4, CSS2 in your daily works. 3. Step 3: Learn how to apply HTML, CSS best practices. 4. Step 4: "Playing make fun" with HTML5, CSS3 5. Step 5: "Practices make perfect" with HTML5, CSS3
  • 29. Why & When? Why We Should Start Using CSS3 and HTML5 Today?
  • 30. For Our Clients • Conceding to the idea that the project will not be able to look the same across various browsers, • This means more developed and unfettered imaginative designs for our clients, • This could lead to increased costs for clients as well, but with higher levels of innovation and • Client’s visions for what they want will be less hindered by these limitations.
  • 31. For the Users • Potentially less disruptions of experience from one device to another and • An overall improved user experience.
  • 32. For Designers/Developers • Conceding to the idea that the project will not be able to look the same across various browsers, • A more open playing field for designers and developers all around; less restricted by this holding pattern, • More exciting and innovative landscape to attract new clientele, • Division of project audience into separate presentational approaches and • Probably less work involved because we don’t need the many hacks and workarounds we’ve used before.
  • 33. So What Are We Waiting For? • Fear Factor • Comfortable Factor • Doubt Factor • Faith Factor • “It’s Too Early” Factor • Validation Factor
  • 34. Who hires HTML5, CSS3 Ninja?
  • 35. HTML5 vs Flash o http://flashsucks.org/ o http://html5vsflash.tumblr.com/ Note: HTML5 doesn't do anything. It's a spec; one that isn't finished yet. Sure, many of its proposed features will allow developers to produce similar features as Flash, but it's up to the browser developers to implement said specification.
  • 36. Q&A Start your own HTML5, CSS3 Project! Now!!! http://hoctudau.com/slides/reg Topics in Hà Nội PHP Day • 2008: HTML & CSS Best Practices o http://www.hoctudau.com/slides/html-css-best-practices • 2009: HTML & CSS Trends o http://www.hoctudau.com/slides/html-css-trends • 2010: HTML5 & CSS3 The Future of Web Technologies o http://www.hoctudau.com/slides/html5-css3