SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
HTML5 + CSS3
    (   )




            ONE-UP Inc.


                @hi_takaki
HTML5

 HTML5   JavaScript API    CSS3

HTML       Web Storage    CSS3          SVG

 DOM      Web Workers     Transition   MathML

           Web Socket     Animation    WebGL

           IndexedDB      Transform
HTML5
2011   5   W3C
HTML5 Working Draft)
  (Last Call                ←
 2011   5     W3C
                ↓
        (Candidate Recommendation)
                  ↓
        (Proposed Recommendation)
                  ↓
   W3C        (Recommendation)


            W3C     2014
<!DOCTYPE html>
        <html lang="ja">
        <head>
         <meta charset="utf-8" />
         <title>       </title>
         <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
            </script>
         <![endif]-->
         <link rel="stylesheet" href="style.css" />
        </head>
        <body>
         <div id="wrapper">
          <header>
           <hgroup>
            <h1>       </h1>
            <h2>          </h2>
           </hgroup>
          </header>
          <nav>
           <h2>           </h2>


HTML5       <ul>
             <li><a href="#">
             <li><a href="#">
                                    1 </a></li>
                                    2 </a></li>
            </ul>
          </nav>
          <article>
           <h2>          </h2>
            <section>
             <h3>     </h3>
             <p>       </p>
            </section>
           <aside>
            <time datetime="2009 09-09 00:00 AM">2009 09-09 00:00 AM</time>
           </aside>
          </article>
          <footer>
           <p></p>
          </footer>
         </div>
        </body>
        </html>
BOLERPLATE
http://html5boilerplate.com/
HTML5
    http://www.html5.jp/
HTML5               NHK
http://www.nhk.or.jp/studiopark/
HTML5
        http://ji-sedai.jp/
HTML5
                                                                    +!

             Progressive Enhancement
                                         ↓
                Graceful Degradation


HTML5&CSS3    with HTML5           6   Graceful Degradation   Polyfill |
    http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html
WEB
http://hellofisher.com/
CSS
Sass     Less




Ruby   JavaScript
Polyfill (                         )

jQuery
Modernizr - HTML5,CSS3          /html5shiv

Raphael.js - IE6,7,8

THREE.JS - WebGL

Sencha/jQuery Mobile -           UI Framework

jQuery UI/Kendo UI - Web           UI Framework

Underscor.js -         Object

Backbone.js - MVC               (Twitter,Facebook   )
HTML5 Advent Calendar 2011 : ATND
http://atnd.org/events/21987

  CSS3                                    CSS3


http://matome.naver.jp/odai/2132750704946539001

Less & Sass Advent calendar 2011 : ATND
http://atnd.org/events/21919

Weitere ähnliche Inhalte

Was ist angesagt?

LESS is More (ChiHTML5 Meetup June 2016)
LESS is More (ChiHTML5 Meetup June 2016)LESS is More (ChiHTML5 Meetup June 2016)
LESS is More (ChiHTML5 Meetup June 2016)Sara Laupp
 
Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupGraeme Foster
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Aslam Najeebdeen
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers Jessica C. Gardner
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web componentsJarrod Overson
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012impulsedev
 
快速开发Css
快速开发Css快速开发Css
快速开发Csstbmallf2e
 
Trends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailTrends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailSparkPost
 
Deepika Mittal , BCA Third Year
Deepika Mittal , BCA Third YearDeepika Mittal , BCA Third Year
Deepika Mittal , BCA Third Yeardezyneecole
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System Channy Yun
 
Html tags
Html tagsHtml tags
Html tagsKumar
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013dmethvin
 
Razor into the Razor'verse
Razor into the Razor'verseRazor into the Razor'verse
Razor into the Razor'verseEd Charbeneau
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap IntroductionAndrea Tarr
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to JqueryGurpreet singh
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesopenchamp
 

Was ist angesagt? (20)

Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
LESS is More (ChiHTML5 Meetup June 2016)
LESS is More (ChiHTML5 Meetup June 2016)LESS is More (ChiHTML5 Meetup June 2016)
LESS is More (ChiHTML5 Meetup June 2016)
 
Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript Soup
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012
 
The Onion
The OnionThe Onion
The Onion
 
快速开发Css
快速开发Css快速开发Css
快速开发Css
 
Trends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for EmailTrends and Insights for Interactive Email & Google AMP for Email
Trends and Insights for Interactive Email & Google AMP for Email
 
Deepika Mittal , BCA Third Year
Deepika Mittal , BCA Third YearDeepika Mittal , BCA Third Year
Deepika Mittal , BCA Third Year
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
Html tags
Html tagsHtml tags
Html tags
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Razor into the Razor'verse
Razor into the Razor'verseRazor into the Razor'verse
Razor into the Razor'verse
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 

Andere mochten auch

Cedec2015 ゲームサーバー基盤の新しい選択肢
Cedec2015 ゲームサーバー基盤の新しい選択肢Cedec2015 ゲームサーバー基盤の新しい選択肢
Cedec2015 ゲームサーバー基盤の新しい選択肢Maho Takara
 
スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話
スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話
スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話Akihiro Sugeno
 
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方Daisaku Mochizuki
 
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザインCEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザインKouji Ohno
 
大規模負荷試験時にやったこと
大規模負荷試験時にやったこと大規模負荷試験時にやったこと
大規模負荷試験時にやったことまべ☆てっく運営
 
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移まべ☆てっく運営
 

Andere mochten auch (6)

Cedec2015 ゲームサーバー基盤の新しい選択肢
Cedec2015 ゲームサーバー基盤の新しい選択肢Cedec2015 ゲームサーバー基盤の新しい選択肢
Cedec2015 ゲームサーバー基盤の新しい選択肢
 
スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話
スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話
スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話
 
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
 
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザインCEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
 
大規模負荷試験時にやったこと
大規模負荷試験時にやったこと大規模負荷試験時にやったこと
大規模負荷試験時にやったこと
 
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
 

Ähnlich wie HTML5+CSS3 (入門編)

5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 todayDaniel Ryan
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
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を考えるSadaaki HIRAI
 
Beginning Html 5 Presentation
Beginning Html 5 PresentationBeginning Html 5 Presentation
Beginning Html 5 PresentationUsman Saleem
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 

Ähnlich wie HTML5+CSS3 (入門編) (20)

5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
 
HTML5
HTML5HTML5
HTML5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
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を考える
 
Beginning Html 5 Presentation
Beginning Html 5 PresentationBeginning Html 5 Presentation
Beginning Html 5 Presentation
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 

Kürzlich hochgeladen

Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Kürzlich hochgeladen (20)

Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

HTML5+CSS3 (入門編)

  • 1. HTML5 + CSS3 ( ) ONE-UP Inc. @hi_takaki
  • 2. HTML5 HTML5 JavaScript API CSS3 HTML Web Storage CSS3 SVG DOM Web Workers Transition MathML Web Socket Animation WebGL IndexedDB Transform
  • 3. HTML5 2011 5 W3C
  • 4. HTML5 Working Draft) (Last Call ← 2011 5 W3C ↓ (Candidate Recommendation) ↓ (Proposed Recommendation) ↓ W3C (Recommendation) W3C 2014
  • 5. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title> </title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="wrapper"> <header> <hgroup> <h1> </h1> <h2> </h2> </hgroup> </header> <nav> <h2> </h2> HTML5 <ul> <li><a href="#"> <li><a href="#"> 1 </a></li> 2 </a></li> </ul> </nav> <article> <h2> </h2> <section> <h3> </h3> <p> </p> </section> <aside> <time datetime="2009 09-09 00:00 AM">2009 09-09 00:00 AM</time> </aside> </article> <footer> <p></p> </footer> </div> </body> </html>
  • 7. HTML5 http://www.html5.jp/
  • 8. HTML5 NHK http://www.nhk.or.jp/studiopark/
  • 9. HTML5 http://ji-sedai.jp/
  • 10. HTML5 +! Progressive Enhancement ↓ Graceful Degradation HTML5&CSS3 with HTML5 6 Graceful Degradation Polyfill | http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html
  • 12. CSS Sass Less Ruby JavaScript
  • 13. Polyfill ( ) jQuery Modernizr - HTML5,CSS3 /html5shiv Raphael.js - IE6,7,8 THREE.JS - WebGL Sencha/jQuery Mobile - UI Framework jQuery UI/Kendo UI - Web UI Framework Underscor.js - Object Backbone.js - MVC (Twitter,Facebook )
  • 14. HTML5 Advent Calendar 2011 : ATND http://atnd.org/events/21987 CSS3 CSS3 http://matome.naver.jp/odai/2132750704946539001 Less & Sass Advent calendar 2011 : ATND http://atnd.org/events/21919