We are connected » HTML5 http://blog.werconnected.info Season 3 Thu, 09 Feb 2012 13:10:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Sencha Touch 를 이용한 웹 사이트가 쏟아진다. http://blog.werconnected.info/sencha-touch-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ec%9b%b9-%ec%82%ac%ec%9d%b4%ed%8a%b8%ea%b0%80-%ec%8f%9f%ec%95%84%ec%a7%84%eb%8b%a4/ http://blog.werconnected.info/sencha-touch-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ec%9b%b9-%ec%82%ac%ec%9d%b4%ed%8a%b8%ea%b0%80-%ec%8f%9f%ec%95%84%ec%a7%84%eb%8b%a4/#comments Sat, 05 Feb 2011 02:43:59 +0000 입명이 http://blog.werconnected.info/?p=2394 간단한 소개

요즘 Sencha Touch 를 접하고 매력에 빠져 직장에서 두세번의 개발을 해보고, 포럼을 만들었습니다. 오늘 피드를 보는데 소개를 엄청 하네요. 얼마전의 리뉴얼도 색달랐는데, 홍보에 박차를 가하나 봅니다. 잠깐 소개를 하자면, jQuery 는 개발을 빠르게 해주는 라이브러리라 한다면 이 것은 모바일 사이트의 개발을 예쁘게 구현해주게 합니다. 프레임워크이며 폰갭을 씌우면 앱으로도 가능합니다.

쇼핑몰과 CCM

쇼핑몰 사이트가 새로 나올까 했더니 나왔네요. 아이팟 터치나 아이폰으로 보세요. 아직 아이패드로는 안되네요. 예전에 이 쇼핑몰을 보면서 연습했다죠? 기본으로 소개하는 데모입니다. 기본 데모는 Infinite Ajax Carousel 로 멋진 UI 를 만들어냈것이 특징입니다. 많은 악세사리 류가 끝도 없이 Carousel 에 표현됩니다. 이번 쇼핑몰은 저도 구현할 수 있는 정도인 듯 합니다.

그리고 Echo Conference 에 대한 정보라는 모바일 웹도 있습니다. 사이트를 가보니 CCM 인거 같기도 하고 아무튼 장르는 음악이네요. 가보니 스케줄 리스트가 있고 한데, 알아보질 못하겠습니다.

이번에는 중고차 시장 웹도 있습니다. 중고가 아닌가? 아무튼, 사이트를 아이폰으로 방문하거나 사파리의 에이전트를 바꿔서 해보세요. 위 사이트들도 에이전트만 바꿔도 됩니다. 검색을 시작으로 기본적인 Sencha Touch 의 폼을 잘 활용했네요. 상당히 심플하면서 갖출건 다 있네요. 이런 모바일 웹을 보면 기존의 한국 모바일 웹은 전부 거품 같아 보입니다. 멜론의 모바일 웹을 보셨나요? 아이패드로 보세요. 보면 Sencha Touch 인데, 너무 느리고 모바일 웹까지 덕지덕지 쓸대어베는 UI 를 많이 쓰고 있습니다. 이런거 보면 외국 모바일 웹이 더 심플하고 빨라 보입니다.

Sencha Touch 의 간단한 장점

Sencha Touch 는 안드로이드까지 가능해서 아이폰용으로 끝내도 안드로이드에서 바로 볼 수 있는 장점도 있습니다. 장점이 많죠. 웹킷을 쓰기 때문에 HTML5, CSS3 를 지원합니다. 사파리나 크롬만 있어도 개발이 쉽습니다. 

new Ext.data.Store({
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

Sencha Touch 의 경우 HTML5 의 로컬 스토리지를 API 를 통해 간단히 사용가능합니다. Store 를 사용하는데 여러가지가 있고 모든 Store 는 그저 간단합니다. AJAX 통신도 간단하고 ScriptTag 를 이용해 다른 도메인도 AJAX 통신을 사용할 수 있습니다. 많습니다. DOM 도 만질 수 있으며, 폼의 UI 가 모바일에 맞게 자동 생성이 가능하고, 아이폰의 액션이트나 픽커뷰도 쉽게 생성이 가능합니다. 테마역시 변경이 가능합니다. SASS & Compass 를 사용해서 간단히 변경 가능합니다. 비디오를 봤더니 변경이 쉽더군요.

포럼 홍보

만약 개발시나 공부시 포럼에 질문하시면 아는 한도에서 대답해 드리겠습니다. 잠깐 포럼 홍보를 하자면 아직 만든지 별로 되지 않아 영문으로 되있거나 허접합니다. 계속 변경 중입니다. OpenID 나 구글 아이디로 접속이 가능합니다. 페이스북이나 트위터도 곧 가능합니다. 개발 사이트에 앱 등록하기 귀찮아서 나두고 있긴 합니다. 양해해 주세요. :D

ExtJS

아직 소개가 더 있습니다. 이 것은 ExtJS 로 만들어 졌지만, 같은 Sencha 입니다. ExtJS 와 같은 회사이며 이미 ExtJS 를 할 줄 아신다면 익히기 간단합니다. CodeSmith Insight 는 소프트웨어 헬프 데스크 입니다. 하나 가입해서 써봤는데, 써본 경험이 없어 삽질 중입니다.

마치며

사실 더 소개해 드리고 싶지만, 한손으로는 힘드네요. 이 것으로 게임 개발도 가능합니다. 물론 자바스크립트를 아주 잘 하신다면야… 앱은 제가 굳이 소개를 하지 않아도 사이트에 널려있습니다. 데모를 보셔도 되고 Sencha Touch 의 컨테스트를 보셔도 됩니다. 컨테스트가 페이지가 별도였는데, 데모 하단에 있네요. 리뉴얼 되니 많이 변경됐네요. 포럼에 오시면 답변 잘 해드리겠습니다. 그리고 이 중에 바닐라 포럼을 많이 써보신분이 계시면 댓글 부탁 드려요. :D

관련 포스트:

]]> http://blog.werconnected.info/sencha-touch-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ec%9b%b9-%ec%82%ac%ec%9d%b4%ed%8a%b8%ea%b0%80-%ec%8f%9f%ec%95%84%ec%a7%84%eb%8b%a4/feed/ 11 구글 크롬이 IE9 에 당하는 모습… http://blog.werconnected.info/%ea%b5%ac%ea%b8%80-%ed%81%ac%eb%a1%ac%ec%9d%b4-ie9-%ec%97%90-%eb%8b%b9%ed%95%98%eb%8a%94-%eb%aa%a8%ec%8a%b5/ http://blog.werconnected.info/%ea%b5%ac%ea%b8%80-%ed%81%ac%eb%a1%ac%ec%9d%b4-ie9-%ec%97%90-%eb%8b%b9%ed%95%98%eb%8a%94-%eb%aa%a8%ec%8a%b5/#comments Fri, 25 Jun 2010 06:15:04 +0000 입명이 http://blog.werconnected.info/?p=1841

HTML5 비디오 영상이며 IE9 가 비디오 가속을 사용하는 장면입니다. 하드웨어 가속이 얼마나 좋은지 보여줍니다. 마치 3D Mark 에서 하나는 전체 성능을 사용하는 것과 하나는 CPU 만 사용하는 모습을 보여주는 듯 합니다.

사실 비디오만 따지면 하드웨어 가속이 더 좋을 수 있으나, 페이지 렌더링이나 다른 요소는 아직 안해봤으니 모르겠죠. 그러나 기대할 수 있는 점은 IE 가 HTML5 를 무장하고 나온다는 점과 이제 속도로 모던 브라우저의 요소들 보다 뛰어날 수 있다는 점입니다. 그래서 기대가 되기도 합니다. 이번에는 릴리즈 되면서 맥용으로도 공식으로 나왔으면 하네요.

Video Shows Off IE9 Speed With Hardware Acceleration

관련 포스트:

]]> http://blog.werconnected.info/%ea%b5%ac%ea%b8%80-%ed%81%ac%eb%a1%ac%ec%9d%b4-ie9-%ec%97%90-%eb%8b%b9%ed%95%98%eb%8a%94-%eb%aa%a8%ec%8a%b5/feed/ 0 말도 많고 탈도 있는 사파리 5 http://blog.werconnected.info/%eb%a7%90%eb%8f%84-%eb%a7%8e%ea%b3%a0-%ed%83%88%eb%8f%84-%ec%9e%88%eb%8a%94-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/ http://blog.werconnected.info/%eb%a7%90%eb%8f%84-%eb%a7%8e%ea%b3%a0-%ed%83%88%eb%8f%84-%ec%9e%88%eb%8a%94-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/#comments Tue, 08 Jun 2010 12:53:14 +0000 입명이 http://blog.werconnected.info/?p=1585 사파리 브라우저 5가 공개됐습니다. 겉 보기엔 변함이 없어 보이지만, 조금씩 세세한 부분을 손본 듯 합니다. HTML 5 지원에 초점이 있겠지만, 저는 몇가지 눈에 보이는 기능들이 맘에 드네요. 딱 2가지 입니다.

첫번째는 히스토리 검색입니다. 탑 부분에 새로 탭 메뉴가 생겼고 주소 표시줄에 “ㅎ” 이라는 단어만 검색해도 전에 썼던 내용 중 “ㅎ” 이 있던 글자 까지 검색 되네요.

또한 Instapaper 같은 글만 보는 기능입니다. 특히 뉴스 사이트에서 이 기능이 좋은데요. 광고를 싫어하시는 분이 계신다면 강추하는 기능입니다. 주소 표시줄의 Reader 버튼이 보이시죠? 말보다 다음 뉴스에서 한번 보시죠. :D

마지막으로 플래시 충돌이 잦고 버그나 좋지 않은 쪽으로 흘러가고 있다고 하지만, 저는 아직까지는 모르겠습니다. 참고로 아래 사이트를 방문해보세요. 올플래시입니다.

http://listen.grooveshark.com/

관련 포스트:

]]> http://blog.werconnected.info/%eb%a7%90%eb%8f%84-%eb%a7%8e%ea%b3%a0-%ed%83%88%eb%8f%84-%ec%9e%88%eb%8a%94-%ec%82%ac%ed%8c%8c%eb%a6%ac-5/feed/ 0 이젠 광고도 HTML5 http://blog.werconnected.info/%ec%9d%b4%ec%a0%a0-%ea%b4%91%eb%8f%84%eb%8f%84-html5/ http://blog.werconnected.info/%ec%9d%b4%ec%a0%a0-%ea%b4%91%eb%8f%84%eb%8f%84-html5/#comments Sat, 15 May 2010 16:16:08 +0000 입명이 http://blog.werconnected.info/?p=752 Brightcove 와 FreeWheel 이 파트너쉽으로 트랙킹을 위해 HTML5 비디오를 원한다고 합니다. 그냥 광고가 아니라 Canvas 를 사용할 듯 합니다. Brightcove 는 뉴옥 타임즈, 디스커버리 채널, A&E, 소니 픽쳐스의 비디오 플랫폼을 담당한다고 적혀있습니다.

제대로 해석한지는 모르지만 모바일 장치를 위한 광고인듯한데, FreeWheel 이 처음 들어봤지만, 꽤 큰 광고 매니지먼트 회사네요. 프리젠테이션도 회사도 HTML5 를 선택한듯 하고 여러 회사들이 비디오나 사진 같은 것을 HTML5 로 전환 중인데 이젠 광고 역시 힘을 실어주네요.

이렇게 되면 플래시가 어쩔 수 없이 큰 타격을 받을 수도 있겠네요. 애플에서 받아주려해도 만약 지금 추세면 그럴 필요없이 진행할 수 있겠네요. 이런 뉴스가 나올 때 마다 Adobe 와의 신경전이 재밌을 듯 합니다.

Brightcove and FreeWheel Team Up For HTML5 Ad Solution

관련 포스트:

]]> http://blog.werconnected.info/%ec%9d%b4%ec%a0%a0-%ea%b4%91%eb%8f%84%eb%8f%84-html5/feed/ 2 HTML5 는 국외 웹의 미래 http://blog.werconnected.info/html5-%eb%8a%94-%ea%b5%ad%ec%99%b8-%ec%9b%b9%ec%9d%98-%eb%af%b8%eb%9e%98/ http://blog.werconnected.info/html5-%eb%8a%94-%ea%b5%ad%ec%99%b8-%ec%9b%b9%ec%9d%98-%eb%af%b8%eb%9e%98/#comments Sat, 08 May 2010 16:26:36 +0000 입명이 http://blog.werconnected.info/?p=1480 뭐 다 아시는 내용이니 이유는 적지 않습니다. 웹의 판도를 보면 HTML5, CSS3 같은 기술이 많이 쏟아집니다. 그리고 갖가지 트윅과 응용법이 이미 외국 블로그에는 많이 소개되고 있습니다.

웹에는 솔직히 국경이 없습니다. 그런데 웹을 돌다가도 내가 살고 있는 곳이 한국이라 생각하니 힘이 저절로 빠집니다. 외국은 이미 5년 후의 미래를 다루고 있지만, 우리는 그저 5년 전을 뒤쫒고 있습니다.

참으로 아이러니한 나라죠. 국경도 없는 웹이 국내에선 후진국의 웹이 됐습니다. 게다가 IT 최강국이란 말은 제발 언론에서 이제 빠졌으면 합니다. 왠만한 블로고스피어에서는 벌써 말도 안되는 말이라 합니다.

상상을 해보세요. 차세대 AJAX 기술인 Web Socket 이 등장하고 웹의 OpenGL 이 진화하며 HTML5 의 캔버스와 CSS 트랜스폼 같은 여러 기술이 복합된 어느 웹 사이트를요. 그런데… 그런 기술을 신기술이라 들여놨다며 플래시로 비슷하게 꾸며논 국내의 웹들을… 근데 모던 브라우저에서도 버벅거리는 최적화가 않된 사이트를…

사실 국내 사이트는 전용선의 빠른 확장에 의해 피해를 많이 봤다고 생각합니다. 아무리 최적화를 하지 않아도 빠른 라인이 뒷 받침 해주니까요. 그런데 외국에 거주하시는 한국인이 접할려면 참담했죠. 외국은 느려도 캐시 같은 최적화 기술이 발전되는 반면 국내는 호화 찬란한 패킷 낭비만 진화했습니다. 이제 젊은 IT 인들이 좀 신경써서 만들려고 하면 또 외국에는 새로운 기술들이 생기고…

그렇게 외국은 5년 앞의 미래를 보지만, 국내는 5년 전의 꽁무니만 반복되고… 참… 한탄 스러워서 글을 남깁니다.

관련 포스트:

]]> http://blog.werconnected.info/html5-%eb%8a%94-%ea%b5%ad%ec%99%b8-%ec%9b%b9%ec%9d%98-%eb%af%b8%eb%9e%98/feed/ 0 HTML5 로 퀘이크 2 시연 영상 http://blog.werconnected.info/html5-%eb%a1%9c-%ed%80%98%ec%9d%b4%ed%81%ac-2-%ec%8b%9c%ec%97%b0-%ec%98%81%ec%83%81/ http://blog.werconnected.info/html5-%eb%a1%9c-%ed%80%98%ec%9d%b4%ed%81%ac-2-%ec%8b%9c%ec%97%b0-%ec%98%81%ec%83%81/#comments Fri, 02 Apr 2010 02:58:54 +0000 입명이 http://blog.werconnected.info/?p=1206

놀랍군요. HTML5 의 위력이 대단하겠다라고 생각은 했지만, 게임 시연 영상이 제 생각보다 빨리 나왔네요. Canvas 사용에 HTML5 Audio 기술을 사용했으며 멀티플레이어는 WebSocket 을 사용했다고 합니다.

그냥 게임도 게임이지만, 멀티 가능까지… 3D 효과는 WebGL 을 사용했다고 하네요. 브라우저에서 60 프레임이라니 시대가 정말 시대네요. 불과 10년 전에는 이런 상상을 했을까요?

Are browsers Quake-ing in their boots?

관련 포스트:

]]> http://blog.werconnected.info/html5-%eb%a1%9c-%ed%80%98%ec%9d%b4%ed%81%ac-2-%ec%8b%9c%ec%97%b0-%ec%98%81%ec%83%81/feed/ 1 Kyte.com 도 iPad 에 HTML5 사용 http://blog.werconnected.info/kyte-com-%eb%8f%84-ipad-%ec%97%90-html5-%ec%82%ac%ec%9a%a9/ http://blog.werconnected.info/kyte-com-%eb%8f%84-ipad-%ec%97%90-html5-%ec%82%ac%ec%9a%a9/#comments Thu, 01 Apr 2010 02:53:23 +0000 입명이 http://blog.werconnected.info/?p=1156 잘 모르는 회사지만 기업들이 HTML5 사용이 iPad 로 부터 이뤄지고 있습니다. 기사에는 유리한 HTML5 로 편승했다, 고 나오네요. 구글 크롬 브라우저는 반대로 자신의 브라우저에 플래시를 직접 쓴다고 했습니다. 그러니까 플러그인이 아닌 브라우저 내장이란 얘기죠. 제가 제대로 해석했는지는 모르지만, 그렇지 않더라도 구글은 자신의 타블렛에 플래시를 넣는다고 했습니다.

HTML5 로 인해 같은 배를 타고 있지만, 자사의 제품에는 플래시 사용을 하고 있죠. 결국엔 제 생각엔 애플의 승으로 될 듯 합니다. 처음에는 타블렛 사용자가 플래시 사용으로 구글을 택할지 모르지만, 디자인이나 속도를 나중에 따지면 애플이 좋을테니까요.

그런데 어짜피 둘 다 미국 기업입니다. 한 쪽은 플래시, 다른 한 쪽은 비-플래시. 결국에 두 플랫폼 모두 미국이 최고가 되는 겁니다. 뭐 아무튼 HTML5 탑제를 축하하는 Kyte.com 입니다. 아래를 보면 모바일이나 온라인에 비디오 영상을 제공하는 플랫폼 같네요.

Kyte Jumps On the iPad’s HTML5 Bandwagon And Prepares An App SDK

관련 포스트:

]]> http://blog.werconnected.info/kyte-com-%eb%8f%84-ipad-%ec%97%90-html5-%ec%82%ac%ec%9a%a9/feed/ 0 Brightcove, HTML5 비디오 사용 http://blog.werconnected.info/brightcove-html5-%eb%b9%84%eb%94%94%ec%98%a4-%ec%82%ac%ec%9a%a9/ http://blog.werconnected.info/brightcove-html5-%eb%b9%84%eb%94%94%ec%98%a4-%ec%82%ac%ec%9a%a9/#comments Mon, 29 Mar 2010 07:53:37 +0000 입명이 http://blog.werconnected.info/?p=1072 많은 동영상 서비스들이 HTML5 로 돌아서고 있습니다. 알기로는 Youtube 가 베타를 시작하며 Vimeo 가 역시 베타 서비스에 가담했죠. 이제는 Brightcove 차례인 듯 합니다. iPad 에서 플래시가 사용되지 않지만 Brightcove 는 HTML5 를 지원하게 했습니다.

No Flash On The iPad? No Problem. Brightcove Turns Videos Into HTML5.

Brightcove 는 인터넷 TV 서비스 회사입니다. 이런 경우라면 Adobe 는 정신을 바짝 차려야 할 듯 싶습니다. 국내 시장에는 무리가 없겠지만, 해외 왠만한 곳은 HTML5 를 지원하기 시작했으니까요. HTML5 는 아직 발표되지 않은 기술입니다.

발표되지 않은 기술을 이미 iPad 와 iPhone 같이 모바일 기기를 타겟으로 급속도로 발전되고 영향력을 펼치고 있습니다. 이런 브라우저는 흔히 우리가 아는 모던 브라우저를 바탕으로 보여지는 기술입니다.

데스크탑은 마이크로소프트가 장악했지만, 모바일은 애플이 강세입니다. 또한 랩탑은 넷북으로 인해 구글이 성장하고 있습니다. 이런게 다른 기기를 통하여 데스크탑으로 다가오면 마이크로소프트도 당황스럽겠죠.

또한 Adobe 도 HTML5 로 인해 긴장하게 됩니다. 2 회사는 이제 영향력 있는 곳이 아닌 긴장해야 하는 회사가 되고 있습니다.

관련 포스트:

]]> http://blog.werconnected.info/brightcove-html5-%eb%b9%84%eb%94%94%ec%98%a4-%ec%82%ac%ec%9a%a9/feed/ 1 Internet Explorer 에서의 Canvas 태그 http://blog.werconnected.info/internet-explorer-%ec%97%90%ec%84%9c%ec%9d%98-canvas-%ed%83%9c%ea%b7%b8/ http://blog.werconnected.info/internet-explorer-%ec%97%90%ec%84%9c%ec%9d%98-canvas-%ed%83%9c%ea%b7%b8/#comments Tue, 02 Mar 2010 01:57:35 +0000 입명이 http://blog.werconnected.info/?p=121 이 곳에서는 모던 브라우저(사파리, 오페라, 라폭, 크롬)라 말하네요. Canvas 태그의 2D 그리기가 지원되지만, IE 에서는 지원되지 않습니다. 많은 분들이 IE 에서는 HTML5 가 지원되지 않는다고 알고 계십니다. 맞습니다. 그러나 이 태그의 기능을 그대로 가져와 쓸 수 있게 해주는 ExplorerCanvas 를 소개합니다.

To use, web developers only need to include a single script tag in their existing web pages.

웹 개발자에게는 웹 페이지에서 하나의 스크립트만 첨가하면 된다고 합니다. 2009년 3월 달에 벌써 3번째 릴리즈를 했으니 정말 빠른 대처입니다. 우리나라에는 아직 HTML5 가 뭔지도 모르는 사람들이 많은데 부럽네요. 어떤 사람들은 늦게 확산될 것이다고 하지만, 본인 생각에는 신기술을 늦장 대응하기 위한 연막에 불과하다고 생각합니다. 사용자는 HTML4 도 모르는데 5를 알아야 될까요? 그러나 웹 개발자는 알아야 하고 그들이 아는한 빨리 도입되겠죠.

아무튼 Canvas 태그는 간단히 웹에 그림을 그리는 오브젝트라 생각하시면 됩니다. 물론 인터렉티브한 오브젝트와 연계되기도 하지만, 어디까지나 간단한 설명이니까요. 압축을 풀면 몇가지 예제가 눈에 띄고 IE 에서 구현이 됩니다. 튜토리얼은 모던 브라우저에서 사용하는 기능입니다. 프로젝트 페이지에 소개된 링크와 같습니다.

https://developer.mozilla.org/en/Canvas_tutorial

관련 포스트:

]]> http://blog.werconnected.info/internet-explorer-%ec%97%90%ec%84%9c%ec%9d%98-canvas-%ed%83%9c%ea%b7%b8/feed/ 0