HTML5

웹소켓(WebSocket) 시작하기(강의,번역)

웹소켓(WebSocket) 시작하기(강의,번역)

원문 : Start Using HTML5 WebSockets Today 번역 : Mattew, Chang(www.izect.kr)   (역자주) 웹 소켓에 대해 간단히 따라할 수 있는 튜토리얼입니다. 간단히 채팅을 구현해 봄으로써, 웹 소켓과 서버의 송수신에 대해 가볍게 이해하는 데 많은 도움이 될 것입니다. 약 1년 전에 작성된 튜토리얼이니 감안하시고 보세요 ^^   HTML5 의 새로운 멋진 기능 중 하나가 바로 서버랑(…)

여기 38개의 HTML5로 디자인된 사이트들이 여러분의 영감을 돋구어줄 것입니다.(번역)

여기 38개의 HTML5로 디자인된 사이트들이 여러분의 영감을 돋구어줄 것입니다.(번역)

HTML의발전에서 HTML5는여태개발되었던사이트들의신선한공기처럼다가왔습니다. “플래시킬러” “새로운거대한것” “미래의웹디자인” 등의수식어가붙은 HTML5가우리들에게다가오고있습니다. 심지어웹디자이너에게도 HTML5는다시한번우리들을즐겁게만드는데놀라운툴로다가왔습니다. 여기작은웹의수집이 HTML5로써의구조화가말해주는즐거움을알려줄것입니다. (역자주 : 솔직히아래사이트들전부다추천입니다.. 제겐솔직히신선한디자인적충격을안겨주었습니다.) 트론웹사이트 HTML5 캔버스의요소들을정말놀라우리만큼잘사용했습니다. 즐겨보세요. 자라미디어디자인 디자인에이전시회사의홈페이지로컨텐츠를매끄러운가로스크롤로보여줍니다. Karlsruhe의블로그 비주얼라이즈( visualise) 캐나다의마이크로블로깅플렛폼입니다. 버튜티디자인스튜디오 퓨마웹사이트 토오타프리우스프로젝트     와이어드마인드 와이어드마인드는 Wored.co.uk의컨텐츠를다른방식으로탐험해볼수있는시각효과를제공해줍니다. MS의 IE 9브라우저와파트너쉽을맺고매우빠른표준브라우저에서여러분이할수있는것이무엇인지를보여줍니다. (역자주 : 상당히시각적이면서도놀라운디자인과브라우징방법을보여줍니다. 꼭꼭방문해보시기를추천합니다.) 황야의시내(the wilderness downtown) 불릿에이전시(The Bullit Agency) 미칠듯한효과로아티스트들을보여줍니다. 슬라이드바없이부드럽게컨텐츠를이동하고, 메뉴들이위치를이동합니다. (역자주 : 정말멋진사이트입니다. 꼭방문하셔서멋진디자인효과를살펴보시길..) S5 스타일포트폴리오(…)

Adobe Edge 를 아시나요? : HTML5 애니메이션 개발 툴(번역)

Adobe Edge 를 아시나요? : HTML5 애니메이션 개발 툴(번역)

어도비 에찌는 새롭게 다가오는 어도비의 제품 중 하나로, HTML5 애니메이션을 만들 수 있는 도구입니다. 아직까지 정확한 언급은 없지만 만약 여러분이 FutureSplash 애니메이터와 어도비의 놀라운 멀티미디어 작품 제작에 대해 어떤 일이 있었는지 기억한다면, 어도비 에찌가 가져올 것에 대해 상상해 볼 수 있을 것입니다. 어도비 에찌의 데모 버전은 6월 말쯤에 릴리즈 되었는데, 어도비 라이트룸이라는 포토 스튜디오 어플리케이션과(…)

amChart : HTML5 차트 라이브러리(무료!)

amChart : HTML5 차트 라이브러리(무료!)

amCharts 는 차트 프레임워크 전문 회사로, 플래시, 플렉스, WPF&Silverlight 등의 다양한 RIA 기반의 차트를 만들어 제공하고 있습니다. 그리고 이번에 HTML5와 자바스크립트 기반의 차트를 공개하였는데, 3D 도넛, 3D 세로막대, 바&라인 등 차트 19종을 무료로 제공하고 있습니다.     생각보다 차트들이 위의 차트처럼 귀엽습니다. 또한 html5&javascript 로 만들어져 있기 때문에 아이폰 등의 브라우저에서도 잘 돌아갑니다.   (실제 아이폰에서(…)

Sinuous – 빨간공 피하기. <canvas>를 사용한 게임(간단리뷰)

Sinuous – 빨간공 피하기. 를 사용한 게임(간단리뷰)

Sinuous는 아주 간단하고 단순한 공피하기 게임입니다. 마우스 조작으로 떨어지는 빨간 공을 피하는 게임인데, 예전의 “뷃뛟” 이라는 게임이 생각나는군요. ㅎㅎ(아마 이 게임이 곰플레이어 안에 있었죠?)   게임은 단순하지만, 마우스로 조작해서 생각보다 미세 컨트롤이 되지 않기 떄문에 어렵습니다. 구글 계정을 통해 리더보드에 점수를 기록할 수도 있습니다.     위와 같이 빨간공 이외에도 실드, 타임 등의 아이템이 떨어집니다.(…)

Google Swiffy

Google Swiffy

구글의 연구실 중에 플래시를 html5로 바꿔주는 “웹상의” 사이트 입니다. 이게 전에 어도비에서 보여준 것과는 사뭇 다른데, 웹으로 나오다니.. 신기하네요. 플래시를 간편하게 컨버팅 할 떄 좋겠습니다.

HTML5와 CSS3을 사용한 신선한 무료 템플릿 20선(번역)

HTML5와 CSS3을 사용한 신선한 무료 템플릿 20선(번역)

HTML5 는 HTML의 확장 버전입니다. 새로운 언어와 이미 여러분은 이 기술을 사용한 웹 디자인을 많이 볼 수 있습니다. 만약 여러분의 사이트를 HTML5로 전환하고 싶다면 이 글이 도움이 될 것입니다. 싱싱한 HTML5와 CSS3 templates 을 사용한 사이트들이 여러분의 사이트를 스타일리시 하게 만들어 드릴 겁니다. CSS3 Theme   Two Column HTML5 Template   One Page HTML5 Template   HTML5(…)

HTML5 Canvas를 활용하는 유용한 사이트 세가지(번역)

HTML5 Canvas를 활용하는 유용한 사이트 세가지(번역)

HTML5의 캔버스 요소를 사용해서 게임을 반드는 데 관계된 괜찮은 3개의 사이트를 소개합니다.   Auto-Resizing HTML5 Games (HTML5 Rocks) Derek Detweiler 라는 Gopherwood 스튜디오의 게임 디자이너로써, 그들은 HTML5 를 통해 모바일 폰에서 호환 가능한 게임을 만들었다가 대부분의 스마트폰이 그들의 게임 일부분만 보여주는 것을 보고 어떠한 해상도에서도 게임을 원활하게 보여줄 수 있는 방법에 대해 생각하였습니다. 그러면서 그들이 생각한(…)

GUIMark 3 을 통한 <Canvas> 객체의 각종 모바일 플렛폼에서의 벤치마킹 결과

GUIMark 3 을 통한 객체의 각종 모바일 플렛폼에서의 벤치마킹 결과

  GUI Mark3는 그래픽 랜더의 기본이 되는 요소에 대한 벤치마킹 툴입니다. 최근 그들은 그들의 툴을 HTML5 까지 확대하였고, 어도비 QA팀으로부터 각종 모바일 장비에서 테스트를 의뢰받아 이에 따른 테스트 결과를 홈페이지에 공개하였습니다.     그중에 최종적으로 정리된 표를 함께 공유합니다.   Device Droid X Nexus One Desire HD Motorola Atrix iPhone 4 평균 Firmware Version 02.2.1(…)

Free HTML5 Template

Free HTML5 Template

HTML5 와 CSS3 로 이뤄진 템플릿을 무료로 약 200여개를 제공해 주는 사이트 입니다. 정확히 퀄리티가 어느정도인지는 모르겠지만, 가볍게 HTML5 사이트를 만들거나 구조를 참조할 때 좋을 것 같네요. ^^ 회원 가입 안해도 다운로드 가능하고, 데모를 보는 것도 쉽습니다!   URL : http://freehtml5templates.com/