SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Rubyist
 HTML5
 - content models -
(@Sixeight)

               Vim, Ruby,   and so on

Self-Reference ENGINE (         ,       JA)

               Unite.vim

Love Ujihisa
http://future-nyanco.blogspot.com
HTML5
canvas?
audio? video?
websockets?
Semantics!
W3C          XHTML2.0
            VS
      Browser venders
                        JK
0 4
20
     WHATWG
 Web Hypertext Application
 Technology Working Group

        http://www.whatwg.org/
0 7
 20


W3C
Key Points HTML5
http://www.slideshare.net/dynamis/keypoints-html5-4920336
dynamis++
?
…
… !
Hoge
(          )
Hoge
(          )
Hoge
(                 )




    Piyo
Hoge
(                  )




    Piyo
                  OK!
Hoge
(                 )




           Fuga
Hoge
(                 )




    NG!    Fuga
8
meta, style
div, video
section, article
h2, hgroup
b, span
canvas, img
button, input (if type is hidden)
blockquote, figure
5
hgroup   h{1,2,3,4,5,6}   !
<DEMO>   </DEMO>
Unite.vim
Unite.vim:
 http://github.com/Shougo/unite.vim
HTML5                             (           ,             )


W3C HTML5            http://www.w3.org/TR/html5


Key Points HTML5     http://www.slideshare.net/dynamis/keypoints-html5-4920336


Haml    http://haml-lang.com/d


:help unite
Rubyist のための HTML5 入門 -Content Models-

Weitere ähnliche Inhalte

Ähnlich wie Rubyist のための HTML5 入門 -Content Models-

Rapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKitRapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKit
Pete Nicholls
 
Module6 htmlcss helpfulcodeandwebsites
Module6 htmlcss helpfulcodeandwebsitesModule6 htmlcss helpfulcodeandwebsites
Module6 htmlcss helpfulcodeandwebsites
Daniel Downs
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 

Ähnlich wie Rubyist のための HTML5 入門 -Content Models- (20)

Rapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKitRapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKit
 
HTML5 어디까지 왔나?
HTML5 어디까지 왔나?HTML5 어디까지 왔나?
HTML5 어디까지 왔나?
 
HTML5 Video
HTML5 VideoHTML5 Video
HTML5 Video
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)
 
Module6 htmlcss helpfulcodeandwebsites
Module6 htmlcss helpfulcodeandwebsitesModule6 htmlcss helpfulcodeandwebsites
Module6 htmlcss helpfulcodeandwebsites
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
HTML5
HTML5HTML5
HTML5
 
Html5 Flyover
Html5 FlyoverHtml5 Flyover
Html5 Flyover
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
HTML 5
HTML 5HTML 5
HTML 5
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Html5
Html5Html5
Html5
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 

Mehr von Tomohiro Nishimura

DSLについて語るときに僕の語ること
DSLについて語るときに僕の語ることDSLについて語るときに僕の語ること
DSLについて語るときに僕の語ること
Tomohiro Nishimura
 
NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法
Tomohiro Nishimura
 
It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.
Tomohiro Nishimura
 

Mehr von Tomohiro Nishimura (20)

逃げ道をなくすということについて、僕の持っている知見を話します。
逃げ道をなくすということについて、僕の持っている知見を話します。逃げ道をなくすということについて、僕の持っている知見を話します。
逃げ道をなくすということについて、僕の持っている知見を話します。
 
シュッとふりかえる Ruby 2.0 以降
シュッとふりかえる Ruby 2.0 以降シュッとふりかえる Ruby 2.0 以降
シュッとふりかえる Ruby 2.0 以降
 
DSLについて語るときに僕の語ること
DSLについて語るときに僕の語ることDSLについて語るときに僕の語ること
DSLについて語るときに僕の語ること
 
Atom ことはじめ
Atom ことはじめAtom ことはじめ
Atom ことはじめ
 
The way to the Kyoto.rb
The way to the Kyoto.rbThe way to the Kyoto.rb
The way to the Kyoto.rb
 
Kyotorb#4
Kyotorb#4Kyotorb#4
Kyotorb#4
 
Kyotorb#3
Kyotorb#3Kyotorb#3
Kyotorb#3
 
Kyotorb Meetup #2
Kyotorb Meetup #2Kyotorb Meetup #2
Kyotorb Meetup #2
 
Kyoto.rb
Kyoto.rbKyoto.rb
Kyoto.rb
 
KPTのすすめ
KPTのすすめKPTのすすめ
KPTのすすめ
 
2010年ふりかえる
2010年ふりかえる2010年ふりかえる
2010年ふりかえる
 
NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法
 
Boys, do LiveCoding
Boys, do LiveCodingBoys, do LiveCoding
Boys, do LiveCoding
 
Vim Text Object
Vim Text ObjectVim Text Object
Vim Text Object
 
Introduce the LiveCoding
Introduce the LiveCodingIntroduce the LiveCoding
Introduce the LiveCoding
 
2009年ふりかえり
2009年ふりかえり2009年ふりかえり
2009年ふりかえり
 
It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.
 
Lazyselect
LazyselectLazyselect
Lazyselect
 
Introduce the Hacobu
Introduce the HacobuIntroduce the Hacobu
Introduce the Hacobu
 
Rubyで始めるGTD
Rubyで始めるGTDRubyで始めるGTD
Rubyで始めるGTD
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Kürzlich hochgeladen (20)

Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
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...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

Rubyist のための HTML5 入門 -Content Models-

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n