Edge로 만든 웹앱의 소스를 보면, CSS 기반이다. SVG이나 Canvas를 쓰지 않았이다.  좋은 기능 많은데, 왜 안썼을까 하는 의구심이 있었는데, 다행히 저의 궁금증을 풀어주는 글을 발견했다.

http://forums.adobe.com/thread/884525

 

왜 Edge는 SVG이나 Canvas를 쓰지 않았나? 하는 질문이다. Adobe 직원이 말하기를 가장 쉬운 지점부터 시작했다. CSS3를 먼저 하고, 추후 SVG와 Canvas 모두를 지원할 예정이며,  지금 나온 Free beta가 마지막 버전은 아니고 계속 바뀔 것 같다. file->import 하면 svg 파일을 가져올 수도 있다.

 

해당 싸이트의 리플을 보면서 추측컨데, 현재 Canvas나 SVG보다 훨씬 DOM/CSS 렌러링이 빠르며, compatible 이슈가 없다. 따라서 이 지점에서 시작한 것 같다. 결국 SVG와 Canvas를 지원할 생각으로 제품을 내놓은 것으로 생각된다. 이렇게 계속된 피드백은 어도브사에게 자극과 좋은 기대(?)를 줄 수도 있겠구나 하는 생각이 든다.

 

'HTML5' 카테고리의 다른 글

Adobe, HTML5 저작 도구 Edge 공개  (0) 2011.08.01
HTML5 게임 관련 레퍼런스  (0) 2011.07.22
GothamJS 팀이 발표한 HTML5 소개  (0) 2011.07.21
scribd  (0) 2011.07.20
'html5와 css3로 만든 개발된 17개의 추천 웹싸이트'  (0) 2011.07.20
Posted by '김용환'
,
Adeboe 사에서 야심차게 HTML5 저작 도구 Edge를 공개했다. (2011.8.1)
http://www.tuaw.com/2011/08/01/adobe-introduces-edge-1-0-the-html-5-tool-with-an-eye-towards-o/

webkit 기반이며 플래쉬와 포토샵의 장점을 상당히 포함하여 완성도 높은 툴과 HTML5 페이지 소스를 제공한다. 현재는 Free beta이다.



애니메이션 효과가 상당히 인상적이다. 어도브의 역장인 플래쉬에서 많은 개념을 차용한 흔적이들이 보인다.

preview 기능을 쓰면, html5 로 만든 웹앱을 볼 수 있다. 로컬 서버의 54321포트로 동작되는지 확인해볼 수 있다.

 



샘플파일 중의 하나를 받아서 확인해보았다. 플래쉬 느낌이 난다.



소스 보기 하니, jquery 와 자체적으로 만든 edge js 가 보인다. (역쉬 jquery)


소스를 살펴보면, 굉장히 깔끔하다...

 


이번에는 가장 감명깊게 본 html5 앱이다.


훌륭하다.



소스를 보면 상당히 깔끔하게 만든것이 눈에 띄인다.




* 다운로드 - http://labs.adobe.com/technologies/edge/
* 샘플파일 -  http://labs.adobe.com/technologies/edge/resources/
Posted by '김용환'
,



문명 게임을 클론으로 하는 HTML5 게임
http://www.freeciv.net/




HTML5로 만든 1인칭 간단한 게임
http://rawkets.com/


impactJS javascript Game Engine  (유료)
http://impactjs.com/




Craftyjs javscript Game Engine
http://craftyjs.com/




웹기반 MMO 게임 엔진 - 심시티처럼 만들 수 있음
http://www.isogenicengine.com/


box2dweb - 유명한 물리엔진을 html5로 포팅. Angry Bird가 사용했던 Box2d 물리엔진의 하나.
http://code.google.com/p/box2dweb/


Enchantjs
http://enchantjs.com/en/


motionjs - 멀티 유저 게임을 하면서 client-server간의 예측 이슈(prection)을 해결하기 위한 라이브러리.
아직은 초기 단계이지만, 상당히 주목받고 있음
https://github.com/tmpvar/motionjs/

 
cross platform game abstraction library
http://code.google.com/p/forplay/

Posted by '김용환'
,

2011년 7월 9일 미국 뉴욕에서 발표한 자료.

'HTML5' 카테고리의 다른 글

Adobe, HTML5 저작 도구 Edge 공개  (0) 2011.08.01
HTML5 게임 관련 레퍼런스  (0) 2011.07.22
scribd  (0) 2011.07.20
'html5와 css3로 만든 개발된 17개의 추천 웹싸이트'  (0) 2011.07.20
webkit  (0) 2011.07.19
Posted by '김용환'
,

scribd

HTML5 2011. 7. 20. 10:52

'HTML5' 카테고리의 다른 글

HTML5 게임 관련 레퍼런스  (0) 2011.07.22
GothamJS 팀이 발표한 HTML5 소개  (0) 2011.07.21
'html5와 css3로 만든 개발된 17개의 추천 웹싸이트'  (0) 2011.07.20
webkit  (0) 2011.07.19
HTML5 관련 레퍼런스들  (0) 2011.07.18
Posted by '김용환'
,

under world magazine에서 발표한 'html5와 css3로 만든 개발된 17개의 추천 웹싸이트' 입니다.

 

http://www.underworldmagazines.com/weekly-inspiration-17-websites-developed-with-html5-and-css3-n-27/

  

17개의 웹 싸이트를 다 봤는데.   이렇게 메뉴구성을 할 수 있겠구나 하는 생각이 들면서 많은 도전이 되네요!!!

참신하고 눈이 즐거운 메뉴 구성이 앞으로의 비전을 보여주고 있는 것 같네요~^^

 

크롬이나 파이어폭스, 사파리, IE9에서 함 보세요..~~!!!!

 

보시 때, 메뉴를 눌러보시거나, 아래로 스크롤 해보시면 어떤 변화가 일어나는지 보세요~

 

http://firefoxtweetmachine.com/#facebook

개인적으로 이것이 제일 예뻤습니다!! facebook이라고 검색한 결과가 공장에서 나옵니다.
다른 검색어도 함 눌러보세요~

 



 http://1minus1.com

 

http://www.vertaaverkkoja.fi/

http://www.birrificioirpino.it/

 

http://www.touchtech.co.nz

 

http://worryfreelabs.com/

 

http://u.volunteerlouisiana.gov/#media

 

http://www.rays-lab.com

 

'HTML5' 카테고리의 다른 글

GothamJS 팀이 발표한 HTML5 소개  (0) 2011.07.21
scribd  (0) 2011.07.20
webkit  (0) 2011.07.19
HTML5 관련 레퍼런스들  (0) 2011.07.18
HTML 관련 소식  (0) 2011.07.15
Posted by '김용환'
,

webkit

HTML5 2011. 7. 19. 17:57

'HTML5' 카테고리의 다른 글

scribd  (0) 2011.07.20
'html5와 css3로 만든 개발된 17개의 추천 웹싸이트'  (0) 2011.07.20
HTML5 관련 레퍼런스들  (0) 2011.07.18
HTML 관련 소식  (0) 2011.07.15
HTML5 게임 저작도구 (SCIRRA의 construct2) 사용기  (2) 2011.07.13
Posted by '김용환'
,

HTML5 관련 레퍼런스들

HTML5 2011. 7. 18. 14:04

1. processing.js (http://processingjs.org/)

Processing language 를 사용한, 자바스크립트 Visualization 라이브러리입니다. 데이터 visialization, digital ar, interactive animation, education animation, video game을 플러그인 없이 웹표준으로 사용할 수 있도록 만들어졌습니다. 


두개의 데모는 모두 processing.js를 사용해서 만들었습니다. 이걸 만든 사람이 jquery를 만든 사람이기도 하네요. http://ko.wikipedia.org/wiki/%EC%A1%B4_%EB%A0%88%EC%8B%9D


아래 데모는 정치인들의 당파, 스폰서쉽등을 visualization으로 볼 수 있습니다. (http://www.clearcongressproject.com/)




 


아래 싸이트는 간단하게 직접 코딩하고 preview를 볼 수 있는 있습니다.

 




2. 크롬 실험실
http://www.chromeexperiments.com/






3. 3D 엔진 라이브러리 three.js

https://github.com/mrdoob/three.js

http://mrdoob.com/projects/google/rome/redirect/

opengl 또는 canvas 기반으로 사용할 수있는 라이브러리입니다.






4. Collaboration UI, sketchpad

sketch pad를 이용해서 pair programming이 가능하게 합니다.




5. Apple HTML5 데모

 http://www.apple.com/html5/

 

 
6.  Rpgjs
rpg 게임을 위한 js lib
http://rpgjs.com/examples/demo.php 

'HTML5' 카테고리의 다른 글

'html5와 css3로 만든 개발된 17개의 추천 웹싸이트'  (0) 2011.07.20
webkit  (0) 2011.07.19
HTML 관련 소식  (0) 2011.07.15
HTML5 게임 저작도구 (SCIRRA의 construct2) 사용기  (2) 2011.07.13
WebSocket이 빠르긴 하구나..  (0) 2011.07.12
Posted by '김용환'
,

HTML 관련 소식

HTML5 2011. 7. 15. 11:09

2011년 7월 7일자로 구글에서 발표한 최근 "HTML5 현황"을 볼 수 있습니다. 역시 데모도 동시에 된다는..

HTML5 지원되는 브라우져(크롬 등등)으로 보세요. 

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html



 

HTML5 크로스 브라우징하는 lib 또는 툴 소개 (잘 정리해주니까 좋군요..따로 검색 안해도 되구. 나중에 HTML5 어플 구축할 때 편리할 듯.)

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

 

 
 

현재 HTML5 를 잘 적용했는지에 대해서 점수를 매겨놨네요.  IE9에서 진짜 많이 지원하면서 IE쪽은 점수가 좋네요. 

http://www.html5accessibility.com/

 

 

  

모바일 웹 브라우져중 가장 많이 사용하고 있는 것은?

모바일 OS의 점유율은 안드로이드가 39.5%, iOS가 15.7%, 심비안 20.9%, 블랙베리 14.9% 를 달리고 있는데요.

모바일 웹 브라우져에서는 안드로이드>> Nokia = Opera > iPhone > Blackberry >> iPodtouch  순서로 달리고 있습니다.

http://www.conceivablytech.com/8401/business/take-a-guess-the-three-most-popular-mobile-web-browsers

http://gs.statcounter.com/#mobile_browser-ww-daily-20110312-20110711

 

  

PPT가 아닌 웹 브라우져상으로 에서 교육/실습을 하는군요.

Standford 대학에서 Introduction to Computing Principles 라는 교육을 web과 javascript만을 이용해서 교육을 한다고 합니다. 실제 소프트웨어 돌아가는 거 보면, 그냥 javascript를 이용했네요. 자바 스크립트를 천시했던 한국 대학 문화에 큰 영향을 줄 것으로 생각됩니다.

http://www.stanford.edu/class/cs101/





pdfkit 라는 pdf로 변환해주는 javascript lib이 있습니다. 그리고, MIT license입니다. API로 봤을 때는 쓰기 힘든 점이 있긴 하지만, 추후 계속 보완한다고 하니. 기대할만한 녀석이긴 합니다.

http://devongovett.github.com/pdfkit/index.html




 

'HTML5' 카테고리의 다른 글

webkit  (0) 2011.07.19
HTML5 관련 레퍼런스들  (0) 2011.07.18
HTML5 게임 저작도구 (SCIRRA의 construct2) 사용기  (2) 2011.07.13
WebSocket이 빠르긴 하구나..  (0) 2011.07.12
HTML5 스펙 중 retired 된 스펙들  (0) 2011.07.12
Posted by '김용환'
,

HTML5 게임 저작도구가 있다고 해서 함 다운도 받고 직접 실행해봤다.

 


다운은 여기서 받고..
http://www.scirra.com/construct2/releases/r47.2

tutorial을 보고
http://www.scirra.com/tutorials/37/beginners-guide-to-construct-2/comments

테스트해보았다.
그냥 데모 프로젝트 다운받아서 적용해봐도 된다.


동영상은 다음과 같다.




전작 construct 저작도구는 directX 기반이며, construct이나 construct2 의 결과포맷은 비슷하다. ^^;;
1인칭 FPS이면 좋았을 수도 있었다.


construct2의 화면이다. 저작도구는 기본적으로 Layer , Sprite (개체), behaviour, property 개념이 필요한데..Scene의 개념은 tab으로 표현되었다.

개념은 다 있고, UI가 MS 필이라서 좀 편했다.



그리고, 시스템 또는 Sprite 에 대한 Event 처리에 로직을 잘 정의할 수 있었다.



마지막 화면에 대해서도 잘 그려낼 수 있었다.



실제 크롬 브라우져에서 동작하는 화면이다. 저작도구에서 테스트 버튼을 누르니 preview.html 화면으로 연동하게 했다.



실제로 테스트해보니.. 예전 게임생각이 났다.



profile 기능이나 디버깅 기능, 오디오 기능은 없다.
게임의 한계도 굉장히 협소한 느낌이 있다. event 자체를 보면 약간 한계성이 있는 게임정도로만 개발될 것으로 보인다..

하지만, 창의성이 샘솟는다..

'HTML5' 카테고리의 다른 글

HTML5 관련 레퍼런스들  (0) 2011.07.18
HTML 관련 소식  (0) 2011.07.15
WebSocket이 빠르긴 하구나..  (0) 2011.07.12
HTML5 스펙 중 retired 된 스펙들  (0) 2011.07.12
HTML5 관련 좋은 레퍼런스 공유  (0) 2011.07.12
Posted by '김용환'
,