HTML5와 모바일

4,064 views

Published on

HTML5와 모바일웹에 대해서 정리한 내

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,064
On SlideShare
0
From Embeds
0
Number of Embeds
892
Actions
Shares
0
Downloads
100
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

  • 고요한 2007년 1월 9일, 세상에 획을 그을만할 일이 발생합니다. 바로, 아이폰이 출시된거죠.
    아이폰 광풍은 처음에는 조용했지만, 2008년 아이폰 3G, 2009년 3Gs, 그리고 바로오늘 새벽에 4가 발표됨
  • 고요한 2007년 1월 9일, 세상에 획을 그을만할 일이 발생합니다. 바로, 아이폰이 출시된거죠.
    아이폰 광풍은 처음에는 조용했지만, 2008년 아이폰 3G, 2009년 3Gs, 그리고 바로오늘 새벽에 4가 발표됨
  • 고요한 2007년 1월 9일, 세상에 획을 그을만할 일이 발생합니다. 바로, 아이폰이 출시된거죠.
    아이폰 광풍은 처음에는 조용했지만, 2008년 아이폰 3G, 2009년 3Gs, 그리고 바로오늘 새벽에 4가 발표됨
  • 고요한 2007년 1월 9일, 세상에 획을 그을만할 일이 발생합니다. 바로, 아이폰이 출시된거죠.
    아이폰 광풍은 처음에는 조용했지만, 2008년 아이폰 3G, 2009년 3Gs, 그리고 바로오늘 새벽에 4가 발표됨
  • 고요한 2007년 1월 9일, 세상에 획을 그을만할 일이 발생합니다. 바로, 아이폰이 출시된거죠.
    아이폰 광풍은 처음에는 조용했지만, 2008년 아이폰 3G, 2009년 3Gs, 그리고 바로오늘 새벽에 4가 발표됨
  • 고요한 2007년 1월 9일, 세상에 획을 그을만할 일이 발생합니다. 바로, 아이폰이 출시된거죠.
    아이폰 광풍은 처음에는 조용했지만, 2008년 아이폰 3G, 2009년 3Gs, 그리고 바로오늘 새벽에 4가 발표됨
  • 1년단위로 아이폰이 발표됨으로써, 그동안 스마트폰의 주류로 자리 잡았던 윈도우모바일은 급격히 쇠퇴하고, 스마트폰 = 아이폰이라는 공식을 이어나갑니다. 새로운 패러다임의 시작이였죠.
  • 현재 아이폰을 사용할수 있는 국가를 표시한 지도인데요. 몇몇 국가를 제외한 거의 모든 나라에서 사용이 가능합니다. 요즘 지하철이나 버스에서도 아이폰을 쉽지 않게 볼 수가 있죠.
  • 현재 아이폰을 사용할수 있는 국가를 표시한 지도인데요. 몇몇 국가를 제외한 거의 모든 나라에서 사용이 가능합니다. 요즘 지하철이나 버스에서도 아이폰을 쉽지 않게 볼 수가 있죠.
  • 하나의 제품이 유행하면 항상 대항마가 나오는게 법칙인데요.!!! 저 멀리 구글별에서 안드로이드 로봇을 파견합니다. 안드로이는 반 아이폰진영의 열열한 지지를 받고 급속히 확산되고 있습니다.
  • 그동안 택배, 가스검침, 대리운전자에게 널리 쓰였던 스마트폰이, UX를 기반으로한 편리한 UI로 일반 사용자에게도 다가온거죠. 2010년 오늘 우리는 선택의 폭이 넓어졌습니다. 앞으로는 더 넓어지겠죠.
    - 아이폰, 갤럭시, 블랙베리, 시리우스, 모토로이, 엑스페리아, 팜프리, 넥서스원등 등...
  • 그동안 택배, 가스검침, 대리운전자에게 널리 쓰였던 스마트폰이, UX를 기반으로한 편리한 UI로 일반 사용자에게도 다가온거죠. 2010년 오늘 우리는 선택의 폭이 넓어졌습니다. 앞으로는 더 넓어지겠죠.
    - 아이폰, 갤럭시, 블랙베리, 시리우스, 모토로이, 엑스페리아, 팜프리, 넥서스원등 등...
  • 이 자료는 Admob 에서 발표한 미국 웹 트래픽추이를 발표한 자료인데요.
    2009년초에 대부분이 아이폰단말이였던 반면, 안드로이드가 급격히 성장하면서 아이폰을 앞지르는 자료를 보여주고 있습니다.
    그만큼 모바일 생태계가 다양해지고 있다는 얘기 이겠죠.
  • 그러나, 안드로이드와 아이폰에는 유사하지만, 다른게 하나 있습니다. 무엇일까요? 그림의 차이점을 아시겠나요? 바로 플래시맨이죠. 스티브잡스는 플래시는 느리고 문제를 많이 일으킨다고 주장하고 있습니다.
  • 잡스교주왈, “플래시 나빠요. HTML5 좋아요” 를 외치면서, 다시한번 웹에 대한 패러다임을 변경하려고 하고 있습니다.
    잡스가 외치면 뭐든 있어보이나 봅니다. 갑자기 HTML5에 대한 붐이 시작됩니다. 이 가능성을 iAD 에서 잘 보여주었죠.
  • 잡스교주왈, “플래시 나빠요. HTML5 좋아요” 를 외치면서, 다시한번 웹에 대한 패러다임을 변경하려고 하고 있습니다.
    잡스가 외치면 뭐든 있어보이나 봅니다. 갑자기 HTML5에 대한 붐이 시작됩니다. 이 가능성을 iAD 에서 잘 보여주었죠.
  • 그렇다면, HTML5는 무엇일까요? 대체 이게 뭔데 “플래시의 대안” 이다. 차세대 웹이다 라고 얘기를 할까요.
    과연 플래시는 사라지고 HTML5 만이 자리에 우뚝 설까요?
    HTML5를 한마디로 표현하면....
  • HTML5는 이것입니다. 아주 간단하죠?
    마치 성경의 “태초에 하나님이 천지를 창조하시느니라” 처럼, “나는 HTML5 니라” 를 선언하고있습니다.
  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • HTML 에 어느정도 익숙하신 분들중 이 태그를 보신적이 있나요?
    영어단어를 잘 아시분들은 이것들이 의미한 바를 잘 아시겠네요.

  • 그동안, 왼쪽과 같은 div 태그에 사용자가 지정한 속성을 기반으로 HTML 문서들이 작성되어 왔던 반면,
    이를 의미있는 태그를 사용하자고 제안하고 하고 있습니다. 이게 “시멘틱 마이크업” 인데요. 이렇게 바꾸면 어떤점이 좋아질까요? 우선 가독성이 좋아집니다.
  • 먼저, 웹접근성이 좋아집니다. 수많은 HTML 태그중에 중요한 정보를 찾기란 쉽지가 않습니다. 그런데, 시멘틱 마크업같이 의미기반의 태그를 쓰게 되면 “자동읽기 로봇” 중요한 부분을 찾아 읽어주기 쉽겠죠.
    두번째는, 검색엔진에게 좋습니다. 의미있는 정보를 기반으로 정확도 높은 검색데이터를 제공해줄수가 있죠.
  • 먼저, 웹접근성이 좋아집니다. 수많은 HTML 태그중에 중요한 정보를 찾기란 쉽지가 않습니다. 그런데, 시멘틱 마크업같이 의미기반의 태그를 쓰게 되면 “자동읽기 로봇” 중요한 부분을 찾아 읽어주기 쉽겠죠.
    두번째는, 검색엔진에게 좋습니다. 의미있는 정보를 기반으로 정확도 높은 검색데이터를 제공해줄수가 있죠.
  • 이 소스는 모바일 아이라이크클릭의 홈화면에서 “머천트홍보마당” 의 소스인데요. 위 소스는 웹표준을 잘 지키고 있습니다. 위코드를 시멘틱 마크업으로 바꾸는 아래와 같습니다. 크게 달라지는 부분은 없죠?
    <UL>태그 대신에 <Section> 태그를 사용했고, <LI> 태그 대신에 <article> 태그를 사용했습니다.
  • 흔히들 HTML5라고 하면 시멘틱 메크업을 적용해야 한다고 알고 계시는데요. 현실은 그렇지 않습니다. 하나의 스펙일뿐 강제사항은 아니죠.
    실제로, HTML5 적용으로 유명한 유투브나 GMAIL도 시멘틱 마크업을 사용하진 않습니다. 익스플로러는 지원하지도 않습니다.
  • 흔히들 HTML5라고 하면 시멘틱 메크업을 적용해야 한다고 알고 계시는데요. 현실은 그렇지 않습니다. 하나의 스펙일뿐 강제사항은 아니죠.
    실제로, HTML5 적용으로 유명한 유투브나 GMAIL도 시멘틱 마크업을 사용하진 않습니다. 익스플로러는 지원하지도 않습니다.
  • 그다음으로는 웹폼인데요. RIA 시장을 겨냥하고 만든것같은데요. 따로 구현하거나 UI 프레임워크(JQuery, Flex) 등을 사용해야 했던 것을 기본기능으로 추가한것입니다.
    그런데, 이 웹폼은 지원하는 브라우저가 거의 전무합니다. 그나마 오페라가 잘 준수하고 있죠. 그야말로 아직은 시기상조 인것 같습니다.
  • HTML5의 히어로는 단연 VIDEO 입니다. 유투브등 외국의 많은 동영상 사이트들이 VEDIO 태그를 지원하기 시작했습니다.
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 비디오는 코덱을 빼놓고는 볼수가 없는데요. Video 태그는 ogg의 오픈진영과 저작권이 있는 h.264(MP4) 크게 두가지가 있습니다. ##클릭## 파이어폭스와 오페라가 지원하는 OGG, 사파리와 익스9가 지원하는 H.264, 둘다 지원하는 크롬이 있죠. 소스참조. 2가지 제공해야한다는 단점.
    OGG는 대중화가 되지 않았다는점, H.264는 저작권이 문제라는 점. 해결점은?
  • 지난주 구글 IO에서 구글이 On2를 인수하고, VP8 코덱을 오픈으로 풀겠다고 발표했습니다. 드디어 저작권에 프리한 놈이 탄생한거죠. 거기에 거의 모든 브라우저가 지원을 약속했습니다. 심지어 플래시까지...유투브도 지원하겠다고... 사파리만 빼고..
    동영상 코덱은 VP8을 공통으로 지원하게될것 같습니다.
  • 지난주 구글 IO에서 구글이 On2를 인수하고, VP8 코덱을 오픈으로 풀겠다고 발표했습니다. 드디어 저작권에 프리한 놈이 탄생한거죠. 거기에 거의 모든 브라우저가 지원을 약속했습니다. 심지어 플래시까지...유투브도 지원하겠다고... 사파리만 빼고..
    동영상 코덱은 VP8을 공통으로 지원하게될것 같습니다.
  • 지난주 구글 IO에서 구글이 On2를 인수하고, VP8 코덱을 오픈으로 풀겠다고 발표했습니다. 드디어 저작권에 프리한 놈이 탄생한거죠. 거기에 거의 모든 브라우저가 지원을 약속했습니다. 심지어 플래시까지...유투브도 지원하겠다고... 사파리만 빼고..
    동영상 코덱은 VP8을 공통으로 지원하게될것 같습니다.
  • 지난주 구글 IO에서 구글이 On2를 인수하고, VP8 코덱을 오픈으로 풀겠다고 발표했습니다. 드디어 저작권에 프리한 놈이 탄생한거죠. 거기에 거의 모든 브라우저가 지원을 약속했습니다. 심지어 플래시까지...유투브도 지원하겠다고... 사파리만 빼고..
    동영상 코덱은 VP8을 공통으로 지원하게될것 같습니다.
  • 지난주 구글 IO에서 구글이 On2를 인수하고, VP8 코덱을 오픈으로 풀겠다고 발표했습니다. 드디어 저작권에 프리한 놈이 탄생한거죠. 거기에 거의 모든 브라우저가 지원을 약속했습니다. 심지어 플래시까지...유투브도 지원하겠다고... 사파리만 빼고..
    동영상 코덱은 VP8을 공통으로 지원하게될것 같습니다.
  • HTML5의 두번째 히어로는 Canvas 입니다. Canvas 는 여러분이 잘 아시듯이 그림을 그릴수 있는 공간인데요. 2D는 물론, 3D까지 가능해서 그 활용이 무궁무진합니다. 현재 플래시로 만들어져 있는 배너가 이 캔버스를 통해 구현되어 질것이고, 이미 변경해주는 툴까지 나와있습니다. 실제로, 캔버스를 활용한 예제를 보겠습니다.
  • 간단한 그림판인데요. 조만간, 포토에디터 같은것들도 HTML5용으로 나오지 않을까 생각합니다.
    다음은 게임입니다. 아주 간단한 RPG 게임인데요. 화면전환 속도도 부드럽고 조작감도 뛰어납니다.
    단지 이 모든걸 스크립트로 해결해야 한다는게 문제겠죠.
    앞으로 HTML5가 대세가 되면, 프레임워크들이 봇물터지듯 나오리란 것을 쉽게 예측할 수 있습니다.
  • 간단한 그림판인데요. 조만간, 포토에디터 같은것들도 HTML5용으로 나오지 않을까 생각합니다.
    다음은 게임입니다. 아주 간단한 RPG 게임인데요. 화면전환 속도도 부드럽고 조작감도 뛰어납니다.
    단지 이 모든걸 스크립트로 해결해야 한다는게 문제겠죠.
    앞으로 HTML5가 대세가 되면, 프레임워크들이 봇물터지듯 나오리란 것을 쉽게 예측할 수 있습니다.
  • OFFLINE SUPPORT 는 네트워크망이 작동하지 않을때에도 웹페이지가 정상적으로 작동하는 여러가지 방법을 제공하고 있는데요. 이 기능을 잘 조합하면, 웹페이지로도 어플리케이션의 기능을 하도록 만들 수 있습니다.
    또, 잘변경되지 않는 이미지나 CSS등을 캐시해서 반복적인 트래픽을 제한해서 서버에 부담을 줄이는 방법으로도 사용이 가능합니다. 동영상을 보시죠.
  • 지메일의 오프라인모드를 설명하고 있는데요. 온라인모드일때 로컬에 데이터를 저장해놓았다가, 오프라인일때 이를 보여주고 메일쓰기도 가능하게 만들고, 온라인이 되었을때 이 메일을 발송하는 기능을 제공하고 있습니다. 이는 Offline Support 를 아주 잘 활용한 사례라고 볼수 있습니다.





  • 이 페이지는 아이라이크모바일을 오프라인캐시를 적용한 예제인데요. 에어플레인 모드일때 일반 웹페이지는 연결이 안되지만, 오프라인 캐시를 적용한 페이지에는 정상적으로 나오는것을 볼수가 있습니다.
    한번 캐싱된 데이터는 cache.manifest 파일(캐시명세서)가 바뀌기 전까지는 변경시키지 않습니다.









  • 마지막으로, 요즘 유행하는 위치기반 서비스에서 사용하는 Geolocation 대해 살펴보겠습니다.
    대표적인 사례로는 SKT의 오브제가 있습니다. 현재위치를 표시해주고 추천하는 장소를 보여주고, 검색또한 가능합니다.

  • 제공하고 있는 기능이 많고 화려하죠. 그중에서도 개인적으로 OFFLINE SUPPORT 는 바로 적용할수 있는 매력적인 기능입니다. 그러나..... 문제가 있죠.
  • 좀 오래된 그래프지만 HTML5를 지원하는 항목을 잘 표시해주고 있습니다. 애플로 시작해서, 구글이 잘 주도하고 있는 모습입니다.
    그러나, 우리나라에서 익숙한 익스플로러는 보이지 않죠. 익스플러가 욕먹는 이유가 바로 여기에 있습니다. 다음도표를 보시죠.
  • HTML5의 주요스펙 지원현황을 브라우저별로 표시한 표인데요.
    사파리, 크롬이 제일 준수하고, 파이어폭스, 오페라도 잘 따오고 있습니다.
    그러나, 익스플로러는 거의 전멸이죠. 익스플로러9에서 제대로 지원하겠다고 선언했습니다. 9은 언제 나올까요? 윈도우8? 답답하죠.
  • CSS3 지원 현황을 봐도 참 답답합니다. 익스플로러는 전멸이죠.
    이것을 한마디로 표현하면......
  • 익스플로러가 괜히 욕먹는게 아니죠. 게다가 속도, CPU 점유율 뭐하나 좋을게 없습니다.
    그러나 우리나라에서는 대세죠.

  • 인터넷트렌드라는 사이트에서 발췌한 최근한달 브라우저 현황입니다.
    익스플로러가 97%를 차지하고, 나머지는 고만고만합니다.
    익스플로러에서도 6.0 비율이 44.39%나 되죠.
    이것을 한마디로 표현하면.........
  • 인터넷트렌드라는 사이트에서 발췌한 최근한달 브라우저 현황입니다.
    익스플로러가 97%를 차지하고, 나머지는 고만고만합니다.
    익스플로러에서도 6.0 비율이 44.39%나 되죠.
    이것을 한마디로 표현하면.........
  • 인터넷트렌드라는 사이트에서 발췌한 최근한달 브라우저 현황입니다.
    익스플로러가 97%를 차지하고, 나머지는 고만고만합니다.
    익스플로러에서도 6.0 비율이 44.39%나 되죠.
    이것을 한마디로 표현하면.........
  • “절규” 라고 외치고 싶습니다.
  • “절규” 라고 외치고 싶습니다.
  • 그러나, 죽지 말란 법은 없죠. 익스플로러용 핵을 쓰면, 시멘틱 마크업은 지원이 가능합니다.
    그러나...... Video 나 Canvas 는 안되죠.. 나머지는 다 버려야죠.
    ## 익스클릭 ## 예제
  • 데스크탑에서는 OTL. 익스때문에.....
  • 하지만, 모바일에는 모범생때문에 GOOD.
  • 하지만, 모바일에는 모범생때문에 GOOD.
  • 하지만, 모바일에는 모범생때문에 GOOD.
  • 하지만, 모바일에는 모범생때문에 GOOD.
  • 여기서, 시작전에 가졌던 질문을 다시 해볼까 합니다.
    플래시 0 에 도전할수 있을까요? 저의 생각은 일부는 그렇고, 일부는 아니다 입니다.
  • 여기서, 시작전에 가졌던 질문을 다시 해볼까 합니다.
    플래시 0 에 도전할수 있을까요? 저의 생각은 일부는 그렇고, 일부는 아니다 입니다.
  • 여기서, 시작전에 가졌던 질문을 다시 해볼까 합니다.
    플래시 0 에 도전할수 있을까요? 저의 생각은 일부는 그렇고, 일부는 아니다 입니다.
  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.

  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.

  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.

  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.

  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.

  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.

  • 조심스레 HTML5 의 미래를 예측. HTML5는 플래시가 장악하고 있는 일부시장을 점유할것 같습니다.
    특히 광고배너, 메뉴, 동영상, 더불어 간단한 게임들은 HTML5 기반으로 돌아설것 같습니다.





























  • HTML5와 모바일

    1. 1. HTML5 + Mobile Web / @sokum / isokum@gmail.com
    2. 2. January 9, 2007
    3. 3. January 9, 2007
    4. 4. IPhone 3G Availability (Wikipedia)
    5. 5. IPhone 3G Availability (Wikipedia)
    6. 6. “2010 Smartphone List
    7. 7. “2010 Smartphone List
    8. 8. http://www.intomobile.com/2010/04/27/android-outpaces-iphone-in-us-web-traffic.html
    9. 9. No Flash!! Use HTML5 jobs 2:1
    10. 10. <!DOCTYPE html>
    11. 11. <audio> <aside> <nav> <article> <hgroup> <section> <time> <header> <video> <figure> <footer>
    12. 12. Semantic Markup
    13. 13. Semantic Markup
    14. 14. Semantic Markup
    15. 15. Semantic Markup
    16. 16. HTML5 = Semantic Markup
    17. 17. HTML5 = / Semantic Markup
    18. 18. http://diveintohtml5.org/forms.html Web Form
    19. 19. Vedio
    20. 20. ogg h.264 Video Tag - Codec
    21. 21. ogg h.264 Video Tag - Codec
    22. 22. ogg h.264 Video Tag - Codec
    23. 23. ogg h.264 Video Tag - Codec
    24. 24. VP8 Video Tag - Codec
    25. 25. VP8 Video Tag - Codec
    26. 26. Canvas
    27. 27. http://www.canvasdemos.com/ Sketch Pad Canvas
    28. 28. http://www.canvasdemos.com/ Sketch Pad Game Canvas
    29. 29. Offline Support
    30. 30. Offline Support
    31. 31. 1. Add Manifest Element 2. Write Manifest 3. Embeded Image in css Local Storage Session Storage Web DataBase (Client Side Databases) 4. Offline Storage Offline Cache
    32. 32. <IfModule mime_module> .. # HTML5 Application Cache AddType text/cache-manifest .manifest </IfModule> 1. Apahce Server
    33. 33. <!DOCTYPE html> <html> 2. HTML cache
    34. 34. <!DOCTYPE html> <html> <!DOCTYPE html> <html manifest="./cache.manifest"> 2. HTML cache
    35. 35. CACHE MANIFEST # HTML5 offline web cache # ILIKECLICK Mobile # # author : sokum # # Version 1.0 # 2010.06.01 ./step1.css ./images/logo.png ./images/btn_login.gif ./images/icon_service.png ./images/icon_report.png ./images/icon_contact.png ./images/icon_tweeter.png ./images/m_bg.gif ./images/m_icon.gif ./images/m_btn.png 3. cache.manifest
    36. 36. General Offline Support Offline Support - Offline Cache # Sample
    37. 37. General Offline Support Offline Support - Offline Cache # Sample
    38. 38. 4096 Bytes 5 MByte or etc 5 MByte or etc 20 cookie per domain Browser scope Tab scope Not tab scope Network Overhead Local Local ( HTTP Header ) Offline Support - Storage
    39. 39. Cookie LocalStorage SessionStorage 4096 Bytes 5 MByte or etc 5 MByte or etc 20 cookie per domain Browser scope Tab scope Not tab scope Network Overhead Local Local ( HTTP Header ) Offline Support - Storage
    40. 40. - Setting a value localStorage.setItem(‘age’, 34); - Accessing a stored value var age = localStorage.getItem(‘age’); - Delete a specific value localStorage.removeItem(‘age’); - Delete all localStorage.clear(); 1. LoacalStorage
    41. 41. 2. JSON
    42. 42. 2. JSON
    43. 43. 2. JSON
    44. 44. <?php function data_uri($file, $mime) { $contents = file_get_contents($file); $base64 = base64_encode($contents); return ('data:' . $mime . ';base64,' . $base64); } ?> .member .smsImg { background-image:url('<?=data_uri('./images/ sms.jpg', 'image/jpeg');?>'); width: 24px; height: 24px; } .member .phoneImg { background-image:url('<?=data_uri('./images/ phone.jpg', 'image/jpeg');?>'); width: 24px; height: 24px; } 3. Inline image css
    45. 45. GeoLocation
    46. 46. m.ovject.com Geolocation
    47. 47. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { lat = position.coords.latitude; lng = position.coords.longitude; showLocation(lat, lng); }); 1. Geo Location
    48. 48. Wow !!! Good !!!
    49. 49. Wow !!! Good !!! But, .............................
    50. 50. Looser
    51. 51. HACK
    52. 52. HACK <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
    53. 53. Desktop
    54. 54. Desktop
    55. 55. Mobile
    56. 56. Mobile
    57. 57. 0% YES ? or NO ?
    58. 58. HTML5
    59. 59. Flash ( , , , ) HTML5
    60. 60. Flash ( , , , ) HTML5
    61. 61. Flash ( , , , ) HTML5
    62. 62. HTML5
    63. 63. HTML 5
    64. 64. Case Study
    65. 65. CASE STUDY # Mobile Page
    66. 66. 1. viewprot Meta
    67. 67. 1. viewprot Meta
    68. 68. <meta name="viewport" content="user-scalable=no , initial-scale=1.0 , width=device-width" /> 1. viewprot Meta
    69. 69. <meta name="viewport" content="user-scalable=no , initial-scale=1.0 , width=device-width" /> <link rel="apple-touch-icon- precomposed" href="apple-touch-icon.png" /> 1. viewprot Meta
    70. 70. <meta name="viewport" content="user-scalable=no , initial-scale=1.0 , width=device-width" /> <link rel="apple-touch-icon- precomposed" href="apple-touch-icon.png" /> 1. viewprot Meta
    71. 71. <!--[if !IE]>--> <link rel="stylesheet" href="small-screen.css" type="text/css" media="only screen and (max-device-width: 480px)" /> <!--<![endif]--> @media only screen and (max-device-width: 480px) { #test-block { background: red; } } 2. CSS
    72. 72. window.onorientationchange = function() { alert(window.orientation); } * 0: * -90 : * 90 : * 180 : 180 3.
    73. 73. window.addEventListener('load', function(){ setTimeout(scrollTo, 0, 0, 1); }, false); 3.
    74. 74. window.addEventListener('load', function(){ setTimeout(scrollTo, 0, 0, 1); }, false); 3.
    75. 75. window.addEventListener('load', function(){ setTimeout(scrollTo, 0, 0, 1); }, false); 3.
    76. 76. -webkit-text-size-adjust: none; 4.
    77. 77. CASE STUDY # Semantic Makeup
    78. 78. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> 1. HTML Doctype
    79. 79. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <!DOCTYPE html> 1. HTML Doctype
    80. 80. 2. Sementic Markup
    81. 81. 2. Sementic Markup
    82. 82. 2. Sementic Markup
    83. 83. 2. Sementic Markup
    84. 84. 2. Sementic Markup
    85. 85. 2. Sementic Markup
    86. 86. 2. Sementic Markup
    87. 87. 1. HTML5 ( http://www.findmebyip.com/litmus )

    ×