SlideShare a Scribd company logo
1 of 57
Download to read offline
요즘 Adobe랑
  사이가
 안 좋다며?
HTML5
 때문에
그거
       먹는거야?
나도몰라
 ㅋㅋㅋ
Web Hypertext Application Technology Working Group
DOCTYPE

 HTML 4.01 Strict
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">



       <!DOCTYPE html>
구조적 마크업
         div id=“header”
           div id=“nav”



    div id=“content”


                               div id=“menu”




                           div id=“footer”
                               id=“footer”
<header>
        <nav>
<article>




                 <aside>



                 <footer>
Video
Canvas
WebGL
Web Workers
웹서비스 시대 (1990년대 중반)

                                 CGI
                       <html>
                       <title> <?=$title?> </title>
            Internet   <body>
                                                          DB
                       <font size=2>Hello! World</font>
                       <?=mysql_query(“SELECT name…)?>
                                                          DB
                       </body>
                       </html>
  Plug-in
웹 표준 시대 (2000년대 중반)
                                                                 ET             ing      uts
                                                           M S .N           S pr      Str


                                                           Model
            Internet                                                                           DB
                                                                                               DB
                                                            View
  Plug-in
                                                    <! DOCTYPE XHTML…>
                                                    <title>$title</title>

                       XHT
                          ML         Structure      <body>
                                                    <h1>Hello, Wolrd</h1>
                                                    </body>
                                                    </html>


                      ay o
                             ut      Presentation   body { font-size: 9pt;}
                    SL                              h1 {color:blue;}
                 CS
                                                    Function popup(url) {

                          cr   ipt    Behavior      }
                                                      window.open(url);
                       MS
                  DO


                                                      Controller
웹2.0의 시대 (2000년대 후반)

                          Internet
                                                           Model             DB
                                                                             DB

 Plug-in
                                                            View
           Structure
                                                        {"Name": "Cheeso",
                          Ajax       OpenAPI            "Rank": 7}


           Presentation                          ails
                                             O nR
                              ery       by
                          jQu        Ru                 Controller
            Behavior
HTML5의 시대 (2010년대 초반)

                                                             a ge
                                                        S tor
                                                    b
                                                  We
          as
  C   anv
                                     Local
                                      Local
Plug-in                             Storage                                                                  nd
                                                                                                                  ra
                                     Storage                                                             asa                ase
            L                  e                                                                     C                   Hb
  We
    bG                  a ch
                   pC
                 Ap                                                                                 NoSQL
                                                                Internet
    ML
      5         Structure
  HT
                                        Ajax                               RESTful
                                                                                             {"Name": "Cheeso",                   disk
                                                                                                                                   disk
                                                                  t                          "Rank": 7}
                                                         o   ck e
                                                    bS
                                                  We
  CS
       S3       Presentation
                                                 I                                               Cloud
                                             rAP
                                       e cto                                                   Computing
                                   Se l            n
                                               tio
                 Behavior           Ge
                                        ol oca
                                                                                                    WS                 z ur
                                                                                                                           e
                                                 rop                                           nA           MS
                                                                                                               A
                                           g &D                                          m azo
                                      Dra                                            A
HTML5인 것과 아닌 것
 HTML5 W/G       Web Apps W/G
 –   HTML5       –   Server-Sent Events
 –   Canvas 2D   –   WebSocket
 –   Microdata   –   Web Storage
 –   RDFa        –   Web SQL Database
 –   AppCache    –   IndexedDB
                 –   Geolocation
kr.html5doctor.com
html5gallery.com
html5test.com
Modernizr
html5demos.com
html5rocks.com
hacks.mozilla.or.kr
webstandards.or.kr/html5
Books
Community
Canvas     √
                √   √
                    √   √
                        √        √
                                 √
       Video    √
                √   √
                    √   √
                        √        √
                                 √
(Geolocation)   √
                √   √
                    √   √
                        √
                        iPhone    √
                                  √
 App Cache      √
                √   √
                    √   √
                        √         √
                                  √
                                 mobile



   Database     √
                √   √
                    √   √
                        √         √
                                  √
                                 mobile



    Workers     √
                √   √
                    √   √
                        √         √
                                  √
                                 mobile
Speaking from personal experience, I've
had a lot more fun writing an HTML5
application based on CSS3, the
database API, and jQuery that runs out
of the box on all of the hot mobile
platforms than I ever would have had
writing some silly Objective C app for
a locked down App Store (or Java for an
open one).
HTML 5 + CSS 3 +
Apps Cache + Database API
HTML5 소개 및 배우기- HTML5 Open Conference
HTML5 소개 및 배우기- HTML5 Open Conference
HTML5 소개 및 배우기- HTML5 Open Conference

More Related Content

What's hot

Gregor Hohpe Track Intro The Cloud As Middle Ware
Gregor Hohpe Track Intro The Cloud As Middle WareGregor Hohpe Track Intro The Cloud As Middle Ware
Gregor Hohpe Track Intro The Cloud As Middle Ware
deimos
 
How browser engines work?
How browser engines work?How browser engines work?
How browser engines work?
haricot
 
Tripit Ajaxworld V5
Tripit Ajaxworld V5Tripit Ajaxworld V5
Tripit Ajaxworld V5
rajivmordani
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
George Kanellopoulos
 
Sharded By Business Line: Migrating to a Core Database using MongoDB and Solr
Sharded By Business Line: Migrating to a Core Database using MongoDB and SolrSharded By Business Line: Migrating to a Core Database using MongoDB and Solr
Sharded By Business Line: Migrating to a Core Database using MongoDB and Solr
MongoDB
 
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
Carles Farré
 

What's hot (18)

Gregor Hohpe Track Intro The Cloud As Middle Ware
Gregor Hohpe Track Intro The Cloud As Middle WareGregor Hohpe Track Intro The Cloud As Middle Ware
Gregor Hohpe Track Intro The Cloud As Middle Ware
 
Html 5 Revolution
Html 5 RevolutionHtml 5 Revolution
Html 5 Revolution
 
How browser engines work?
How browser engines work?How browser engines work?
How browser engines work?
 
Nuxeo Corporate Presentation - April 2007
Nuxeo Corporate Presentation - April 2007Nuxeo Corporate Presentation - April 2007
Nuxeo Corporate Presentation - April 2007
 
Presenter manual RIA technology (specially for summer interns)
Presenter manual RIA technology (specially for summer interns)Presenter manual RIA technology (specially for summer interns)
Presenter manual RIA technology (specially for summer interns)
 
Practical Functional Javascript
Practical Functional JavascriptPractical Functional Javascript
Practical Functional Javascript
 
Tripit Ajaxworld V5
Tripit Ajaxworld V5Tripit Ajaxworld V5
Tripit Ajaxworld V5
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
Desingning reusable web components
Desingning reusable web componentsDesingning reusable web components
Desingning reusable web components
 
Sharded By Business Line: Migrating to a Core Database using MongoDB and Solr
Sharded By Business Line: Migrating to a Core Database using MongoDB and SolrSharded By Business Line: Migrating to a Core Database using MongoDB and Solr
Sharded By Business Line: Migrating to a Core Database using MongoDB and Solr
 
Desingning reusable web components
Desingning reusable web componentsDesingning reusable web components
Desingning reusable web components
 
YUI
YUIYUI
YUI
 
Web Standards Infographics
Web Standards InfographicsWeb Standards Infographics
Web Standards Infographics
 
Offline Html5 3days
Offline Html5 3daysOffline Html5 3days
Offline Html5 3days
 
Rendering engine
Rendering engineRendering engine
Rendering engine
 
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
[DSBW Spring 2009] Unit 02: Web Technologies (2/2)
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Bite: Workflow Composition for the Web. Presented at the ICSOC Conference 2007
Bite: Workflow Composition for the Web. Presented at the ICSOC Conference 2007Bite: Workflow Composition for the Web. Presented at the ICSOC Conference 2007
Bite: Workflow Composition for the Web. Presented at the ICSOC Conference 2007
 

Viewers also liked

태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
Channy Yun
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)
Channy Yun
 
리눅스와 웹표준(2004)
리눅스와 웹표준(2004)리눅스와 웹표준(2004)
리눅스와 웹표준(2004)
Channy Yun
 
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 웹표준을 기반한 크로스 브라우징 표준화 (2005) 웹표준을 기반한 크로스 브라우징 표준화 (2005)
웹표준을 기반한 크로스 브라우징 표준화 (2005)
Channy Yun
 
The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)
Channy Yun
 
웹 애플리케이션 기술 소개 - NGWeb (2006)
웹 애플리케이션 기술 소개 - NGWeb (2006)웹 애플리케이션 기술 소개 - NGWeb (2006)
웹 애플리케이션 기술 소개 - NGWeb (2006)
Channy Yun
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
Oren Shatken
 
Five stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page applicationFive stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page application
Charles Knight
 

Viewers also liked (20)

태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
태블릿과 HTML5 기술 (조경 인사이트 포럼, 2011)
 
Top 10 Questions about HTML5
Top 10 Questions about HTML5Top 10 Questions about HTML5
Top 10 Questions about HTML5
 
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5
 
HTML5 in Korea (2010)
HTML5 in Korea (2010)HTML5 in Korea (2010)
HTML5 in Korea (2010)
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)
 
리눅스와 웹표준(2004)
리눅스와 웹표준(2004)리눅스와 웹표준(2004)
리눅스와 웹표준(2004)
 
The Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And KoreaThe Status Of Web Interoperability And Activities In China, Japan And Korea
The Status Of Web Interoperability And Activities In China, Japan And Korea
 
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 웹표준을 기반한 크로스 브라우징 표준화 (2005) 웹표준을 기반한 크로스 브라우징 표준화 (2005)
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 
The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)The History and Status of Web Crypto API (2012)
The History and Status of Web Crypto API (2012)
 
HTML5 Open Reference (20111125/Korean)
HTML5 Open Reference (20111125/Korean)HTML5 Open Reference (20111125/Korean)
HTML5 Open Reference (20111125/Korean)
 
웹 애플리케이션 기술 소개 - NGWeb (2006)
웹 애플리케이션 기술 소개 - NGWeb (2006)웹 애플리케이션 기술 소개 - NGWeb (2006)
웹 애플리케이션 기술 소개 - NGWeb (2006)
 
Introducing to node.js
Introducing to node.jsIntroducing to node.js
Introducing to node.js
 
Learning Single page Application chapter 1
Learning Single page Application chapter 1Learning Single page Application chapter 1
Learning Single page Application chapter 1
 
클라우드와 마이크로 서비스를 위한 새로운 시대의 경량화 WAS - IBM WAS Liberty 서버
클라우드와 마이크로 서비스를 위한 새로운 시대의 경량화 WAS - IBM WAS Liberty 서버클라우드와 마이크로 서비스를 위한 새로운 시대의 경량화 WAS - IBM WAS Liberty 서버
클라우드와 마이크로 서비스를 위한 새로운 시대의 경량화 WAS - IBM WAS Liberty 서버
 
JSConf US 2014: Building Isomorphic Apps
JSConf US 2014: Building Isomorphic AppsJSConf US 2014: Building Isomorphic Apps
JSConf US 2014: Building Isomorphic Apps
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
 
가치투자의 신기원 최주용공식
가치투자의 신기원 최주용공식가치투자의 신기원 최주용공식
가치투자의 신기원 최주용공식
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
Five stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page applicationFive stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page application
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
 

Similar to HTML5 소개 및 배우기- HTML5 Open Conference

High Performance Front-End Development
High Performance Front-End DevelopmentHigh Performance Front-End Development
High Performance Front-End Development
drywallbmb
 
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar TechnologiesRob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
george.james
 
SQL Data Service Overview
SQL Data Service OverviewSQL Data Service Overview
SQL Data Service Overview
Eric Nelson
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
Mirza Asif
 

Similar to HTML5 소개 및 배우기- HTML5 Open Conference (20)

人人网技术架构的演进
人人网技术架构的演进人人网技术架构的演进
人人网技术架构的演进
 
JS App Architecture
JS App ArchitectureJS App Architecture
JS App Architecture
 
Building performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgBuilding performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference Hamburg
 
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
 
Not only SQL
Not only SQL Not only SQL
Not only SQL
 
CQ5 and Sling overview
CQ5 and Sling overviewCQ5 and Sling overview
CQ5 and Sling overview
 
Mach-O Internals
Mach-O InternalsMach-O Internals
Mach-O Internals
 
RESTful Services
RESTful ServicesRESTful Services
RESTful Services
 
High Performance Front-End Development
High Performance Front-End DevelopmentHigh Performance Front-End Development
High Performance Front-End Development
 
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar TechnologiesRob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
 
Jsp and jstl
Jsp and jstlJsp and jstl
Jsp and jstl
 
RESTful web service with JBoss Fuse
RESTful web service with JBoss FuseRESTful web service with JBoss Fuse
RESTful web service with JBoss Fuse
 
Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2
 
PPT
PPTPPT
PPT
 
Integrating Rich Media with DITA
Integrating Rich Media with DITAIntegrating Rich Media with DITA
Integrating Rich Media with DITA
 
Hummingbird - Open Source for Small Satellites - GSAW 2012
Hummingbird - Open Source for Small Satellites - GSAW 2012Hummingbird - Open Source for Small Satellites - GSAW 2012
Hummingbird - Open Source for Small Satellites - GSAW 2012
 
Javazone 2010-lift-framework-public
Javazone 2010-lift-framework-publicJavazone 2010-lift-framework-public
Javazone 2010-lift-framework-public
 
SQL Data Service Overview
SQL Data Service OverviewSQL Data Service Overview
SQL Data Service Overview
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
 
Document Databases & RavenDB
Document Databases & RavenDBDocument Databases & RavenDB
Document Databases & RavenDB
 

More from Channy Yun

ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...
ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...
ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...
Channy Yun
 
글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)
글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)
글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)
Channy Yun
 
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
Channy Yun
 
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
 
Daum APIs: A to Z - API Meetup 2014
Daum APIs: A to Z  - API Meetup 2014Daum APIs: A to Z  - API Meetup 2014
Daum APIs: A to Z - API Meetup 2014
Channy Yun
 

More from Channy Yun (20)

Chaos Engineering을 위한 최신 도구 업데이트 - 윤석찬 (AWS 테크에반젤리스트)
Chaos Engineering을 위한 최신 도구 업데이트 - 윤석찬 (AWS 테크에반젤리스트)Chaos Engineering을 위한 최신 도구 업데이트 - 윤석찬 (AWS 테크에반젤리스트)
Chaos Engineering을 위한 최신 도구 업데이트 - 윤석찬 (AWS 테크에반젤리스트)
 
인공지능이 이끌어가는 아마존의 리테일 혁신 - 윤석찬 (AWS) :: 메조미디어 옥토콘(OCTOCON) 2019
인공지능이 이끌어가는 아마존의 리테일 혁신 - 윤석찬 (AWS) :: 메조미디어 옥토콘(OCTOCON) 2019인공지능이 이끌어가는 아마존의 리테일 혁신 - 윤석찬 (AWS) :: 메조미디어 옥토콘(OCTOCON) 2019
인공지능이 이끌어가는 아마존의 리테일 혁신 - 윤석찬 (AWS) :: 메조미디어 옥토콘(OCTOCON) 2019
 
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트 Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
Chaos Engineering on Microservices - 윤석찬, AWS 테크에반젤리스트
 
Kubernates를 위한 Chaos Engineering in Action :: 윤석찬 (AWS 테크에반젤리스트)
Kubernates를 위한 Chaos Engineering in Action :: 윤석찬 (AWS 테크에반젤리스트) Kubernates를 위한 Chaos Engineering in Action :: 윤석찬 (AWS 테크에반젤리스트)
Kubernates를 위한 Chaos Engineering in Action :: 윤석찬 (AWS 테크에반젤리스트)
 
ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...
ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...
ICGIS 2018 - Cloud-powered Machine Learnings on Geospactial Services (Channy ...
 
How to Measure DevRel's Perfomances: From Community to Business - Channy Yun ...
How to Measure DevRel's Perfomances: From Community to Business - Channy Yun ...How to Measure DevRel's Perfomances: From Community to Business - Channy Yun ...
How to Measure DevRel's Perfomances: From Community to Business - Channy Yun ...
 
KubeMonkey를 통한 Chaos Engineering 실전 운영하기 - 윤석찬 (AWS 테크에반젤리스트)
KubeMonkey를 통한 Chaos Engineering 실전 운영하기 - 윤석찬 (AWS 테크에반젤리스트)KubeMonkey를 통한 Chaos Engineering 실전 운영하기 - 윤석찬 (AWS 테크에반젤리스트)
KubeMonkey를 통한 Chaos Engineering 실전 운영하기 - 윤석찬 (AWS 테크에반젤리스트)
 
Game Day in Action for Chaos Engineering - 윤석찬 (AWS 테크에반젤리스트) :: 한국 카오스엔지니어링 밋업
Game Day in Action for Chaos Engineering - 윤석찬 (AWS 테크에반젤리스트) ::  한국 카오스엔지니어링 밋업Game Day in Action for Chaos Engineering - 윤석찬 (AWS 테크에반젤리스트) ::  한국 카오스엔지니어링 밋업
Game Day in Action for Chaos Engineering - 윤석찬 (AWS 테크에반젤리스트) :: 한국 카오스엔지니어링 밋업
 
Chaos Engineering 시작하기 - 윤석찬 (AWS 테크에반젤리스트) :: 한국 카오스엔지니어링 밋업
Chaos Engineering 시작하기 - 윤석찬 (AWS 테크에반젤리스트) ::  한국 카오스엔지니어링 밋업Chaos Engineering 시작하기 - 윤석찬 (AWS 테크에반젤리스트) ::  한국 카오스엔지니어링 밋업
Chaos Engineering 시작하기 - 윤석찬 (AWS 테크에반젤리스트) :: 한국 카오스엔지니어링 밋업
 
한국 웹20주년 기념 소책자
한국 웹20주년 기념 소책자한국 웹20주년 기념 소책자
한국 웹20주년 기념 소책자
 
차니의 IT 이야기 #2- 개발자 경력 관리 조언 (윤석찬)
차니의 IT 이야기 #2- 개발자 경력 관리 조언 (윤석찬)차니의 IT 이야기 #2- 개발자 경력 관리 조언 (윤석찬)
차니의 IT 이야기 #2- 개발자 경력 관리 조언 (윤석찬)
 
클라우드 컴퓨팅과 Daum의 사례- 윤석찬 (KREN 연구 협력 포럼, 2013)
클라우드 컴퓨팅과 Daum의 사례- 윤석찬 (KREN 연구 협력 포럼, 2013) 클라우드 컴퓨팅과 Daum의 사례- 윤석찬 (KREN 연구 협력 포럼, 2013)
클라우드 컴퓨팅과 Daum의 사례- 윤석찬 (KREN 연구 협력 포럼, 2013)
 
Channy의 좌충우돌 스타트업 경험기 - 나인포유
Channy의 좌충우돌 스타트업 경험기 - 나인포유Channy의 좌충우돌 스타트업 경험기 - 나인포유
Channy의 좌충우돌 스타트업 경험기 - 나인포유
 
Microservices architecture examples
Microservices architecture examplesMicroservices architecture examples
Microservices architecture examples
 
글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)
글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)
글로벌 지도 API 서비스 현황과 미래 - 한국지리정보학회 (2014)
 
빅데이터 기술 현황과 시장 전망(2014)
빅데이터 기술 현황과 시장 전망(2014)빅데이터 기술 현황과 시장 전망(2014)
빅데이터 기술 현황과 시장 전망(2014)
 
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
 
Mozilla Firefox OS, its Technical Platform and Future - ISET 2014
Mozilla Firefox OS, its Technical Platform and Future - ISET 2014Mozilla Firefox OS, its Technical Platform and Future - ISET 2014
Mozilla Firefox OS, its Technical Platform and Future - ISET 2014
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
Daum APIs: A to Z - API Meetup 2014
Daum APIs: A to Z  - API Meetup 2014Daum APIs: A to Z  - API Meetup 2014
Daum APIs: A to Z - API Meetup 2014
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
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 - 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 ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
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
 
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
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 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...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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)
 
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
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
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...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

HTML5 소개 및 배우기- HTML5 Open Conference

  • 1.
  • 2. 요즘 Adobe랑 사이가 안 좋다며?
  • 4. 그거 먹는거야? 나도몰라 ㅋㅋㅋ
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Web Hypertext Application Technology Working Group
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. DOCTYPE HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>
  • 17. 구조적 마크업 div id=“header” div id=“nav” div id=“content” div id=“menu” div id=“footer” id=“footer”
  • 18.
  • 19. <header> <nav> <article> <aside> <footer>
  • 20.
  • 21.
  • 22. Video
  • 24. WebGL
  • 26.
  • 27. 웹서비스 시대 (1990년대 중반) CGI <html> <title> <?=$title?> </title> Internet <body> DB <font size=2>Hello! World</font> <?=mysql_query(“SELECT name…)?> DB </body> </html> Plug-in
  • 28. 웹 표준 시대 (2000년대 중반) ET ing uts M S .N S pr Str Model Internet DB DB View Plug-in <! DOCTYPE XHTML…> <title>$title</title> XHT ML Structure <body> <h1>Hello, Wolrd</h1> </body> </html> ay o ut Presentation body { font-size: 9pt;} SL h1 {color:blue;} CS Function popup(url) { cr ipt Behavior } window.open(url); MS DO Controller
  • 29. 웹2.0의 시대 (2000년대 후반) Internet Model DB DB Plug-in View Structure {"Name": "Cheeso", Ajax OpenAPI "Rank": 7} Presentation ails O nR ery by jQu Ru Controller Behavior
  • 30. HTML5의 시대 (2010년대 초반) a ge S tor b We as C anv Local Local Plug-in Storage nd ra Storage asa ase L e C Hb We bG a ch pC Ap NoSQL Internet ML 5 Structure HT Ajax RESTful {"Name": "Cheeso", disk disk t "Rank": 7} o ck e bS We CS S3 Presentation I Cloud rAP e cto Computing Se l n tio Behavior Ge ol oca WS z ur e rop nA MS A g &D m azo Dra A
  • 31.
  • 32. HTML5인 것과 아닌 것 HTML5 W/G Web Apps W/G – HTML5 – Server-Sent Events – Canvas 2D – WebSocket – Microdata – Web Storage – RDFa – Web SQL Database – AppCache – IndexedDB – Geolocation
  • 33.
  • 34.
  • 35.
  • 44. Books
  • 45.
  • 47.
  • 48.
  • 49.
  • 50. Canvas √ √ √ √ √ √ √ √ Video √ √ √ √ √ √ √ √ (Geolocation) √ √ √ √ √ √ iPhone √ √ App Cache √ √ √ √ √ √ √ √ mobile Database √ √ √ √ √ √ √ √ mobile Workers √ √ √ √ √ √ √ √ mobile
  • 51.
  • 52. Speaking from personal experience, I've had a lot more fun writing an HTML5 application based on CSS3, the database API, and jQuery that runs out of the box on all of the hot mobile platforms than I ever would have had writing some silly Objective C app for a locked down App Store (or Java for an open one).
  • 53.
  • 54. HTML 5 + CSS 3 + Apps Cache + Database API