Chrome HTML5 Demo
Posted on | September 18, 2010 | 1 Comment
왜 이런 멋질것 놓치고 있었는지 모르겠군요.
Safari에 HTML5 Demo 페이지가 있다면, Chrome에겐 아래 사이트가 있습니다.
Enjoy HTML5^^
http://www.chromeexperiments.com/arcadefire/
‘section’ Element의 이해
Posted on | September 14, 2010 | No Comments
HTML5에 신규로 추가된 Element 가운데 ‘section’의 용도가 안 와닿아 궁금해 하던차에 인터넷에서 관련 글을 발견하여 정리해 봅니다.
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
즉, 의미적으로 하나의 문서 혹은 어플리케이션, 또는 DB로 치면 완전한 의미를 갖는 하나의 레코드로 이해하면 좋을 듯 합니다.
아래는 ‘section’ 영역을 결정하기 위한 참조할만한 규칙입니다.
- 스타일링이나 스크립팅을 위한 도구로 사용하지 마라.
- article, aside, nav가 더 적절한 곳에 사용하지 마라.
- 내용을 나타내는 제목이 없는 곳엔 사용하지 마라.
원문 : http://html5doctor.com/the-section-element/
Browsing Flickr images by 3D
Posted on | August 25, 2010 | 2 Comments
지금까지 본 HTML5 Demo 중 가장 멋있고 실용적인 것같아 공유합니다.
Flick에서 받아온 실시간 데이터로 화면을 구성하고 있으며,
가장 오른쪽 사진으로 가면 추가 데이터를 받아옵니다.
좌우키과 Space키로 브라우징 하시면 됩니다.
Link : Snow Stack
Google Code Project 개설
Posted on | August 25, 2010 | No Comments
앞으로 공동개발, 예제 공유 등을 위하여 Google Code에 Project 개설 하였습니다.
사이트 : http://code.google.com/p/app5/
SVN Address : https://app5.googlecode.com/svn/trunk
JavaScript로 ClassName 변경하기
Posted on | August 24, 2010 | No Comments
이번에는 JavaScript를 통하여 Class를 변경하여 적용될 CSS를 바꾸는 예제를 살펴보도록 하겠습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>app5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<script type="text/javascript" language="javascript" src="app5.js"></script>
<link rel="stylesheet" href="app5.css" media="screen"/>
</head>
<body>
<div id = "Container">
<img class = "normal" src = "app5logo.png" onclick = "imgClick(event)">
</div>
</body>
</html>
이미지를 클릭하면 JavaScript의 imgClick() 함수를 실행하게 됩니다.
app5.js
function imgClick(event) {
var element = event.currentTarget;
element.className = (element.className == 'normal') ? 'rotate' : 'normal';
}
imgClick()함수는 event가 발생한 DOM Element의 Class를 변경합니다.
app5.css
img {
opacity: 0;
-webkit-transition: 2s ease-in-out;
}
img:hover {
opacity: 1;
}
body {
margin:0px;
}
#Container {
position:absolute; width:320px;height:480px;
background: url(background.png);
}
.normal {
-webkit-transform: rotate(0deg);
}
.rotate {
-webkit-transform: rotate(360deg);
}
Class에 따른 CSS Property를 설정합니다.
예제에 사용된 이미지를 포함한 소스는 Github에서 소스 관리하기 전까지는 메일로 보내도록 하겠습니다.
-webkit-transition 사용해보기
Posted on | August 24, 2010 | No Comments
-webkit-transition 예제 입니다. -webkit-transition을 적용할 수 있는 property를 따로 정리해보려고 했었는데, 대부분의 CSS Property가 적용 되더군요. 아래 예제에서 사용된 Property는 다음과 같습니다.
position, color, font-size, width, top, background-color, border, -webkit-border-radius
우선 예제 한번 살펴보시고 아래 링크 참고하여 추가로 더 많은 속성 시도해 보시면 도움이 될 것 같습니다.
Reference Site : Safari CSS Reference
index.html
<!DOCTYPE html> <html> <head> <title>app5</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width"> <link rel="stylesheet" href="-webkit-transition.css" media="screen"/> </head> <body> <div> Hello World </div> </body> </html>
-webkit-transition.css
body {
text-align : center;
}
div {
-webkit-transition: 2s ease;
position: absolute;
color: #000000;
font-size: 10pt;
width: 100px;
top: 10px;
background-color:#FFFFFF;
border: 1px solid #000000;
-webkit-border-radius: 10px;
}
div:hover {
position: absolute;
font-size: 12pt;
color: #FFFFFF;
width: 200px;
top: 20px;
background-color:#000000;
border: 10px solid #FF0000;
-webkit-border-radius: 0px;
}
사라진 “Hello World” without Script
Posted on | August 22, 2010 | 1 Comment
index.html의 body 안에 사라질 Hello World를 삽입합니다.
<body> <div> Hello World </div> </body>
app5.css 안에 아래와 같이 div의 속성을 정의합니다.
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
위 코드를 Safari 브라우저를 통해 확인하면 마우스가 글자위에 위치하였을때 글자가 사라지는 것을 확인할 수 있습니다.
이 예제와 같이 한 DOM Object에 대하여 그 속성이 바뀌는 경우, 기존 속성에서 새로운 속성으로 자연스럽게 Animation 됩니다.
app5 시작하기
Posted on | August 22, 2010 | 1 Comment
안녕하세요. app5 서창교입니다.
이 포스팅을 시작으로 app5 제작을 위한 스터디를 해보려 합니다. 우선 app5가 그려질 index.html 화일을 준비해 볼까요.
<!DOCTYPE html> <html> <head> <title>app5</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width"> <script type="text/javascript" language="javascript" src="app5.js"></script> <link rel="stylesheet" href="app5.css" media="screen"/> </head> <body> </body> </html>
우선 1 Line에서 현재 문서가 HTML5로 해석되어야 한다는 것을 알려줍니다.
6 Line은 모바일 브라우저에서 화면의 확대,축소를 제한합니다.
8,9 Line에서 app5의 동작 및 화면을 제어할 app5.js, app5.css를 External 방식으로 연결합니다.
이로써 app5 구현을 위한 뼈대가 완성되었습니다.
Google Prepares for Chrome Web Store’s Launch with Developer Preview
Posted on | August 20, 2010 | No Comments
Google’s
attempt to create a marketplace for web apps, dubbed the Chrome Web Store, is one step closer to reality with the launch of the first developer preview.
First revealed at Google’s I/O conference in May, the Chrome Web Store is designed to be a central location for buying and selling HTML5-based web apps. According to information that leaked yesterday, Google’s web-based marketplace will take a similar approach to Apple’s iPhone App Store
, except that Google will only take a 5% processing fee from app transactions, rather than the 30% cut Apple demands for apps on iOS.
While the Chrome Web Store won’t be released to the wider public until October, Google wants to make sure that its marketplace is filled with quality apps on launch day. Thus starting today, developers now have access to the developer preview of the Chrome Web Store through Google Code Labs.
“Developers can now start uploading apps and experiment with packaging them, installing them in Chrome(using the latest Chrome dev channel) and integrating our payments and user authentication infrastructure,” Google said in its blog post.
The preview isn’t a fully-functional app store; instead, it’s a central location for learning how to create, upload, test and sell web apps. These apps can come in one of two forms: hosted apps and packaged apps. Hosted apps are run on a webpage, while packaged apps are downloaded by the user.
Today’s announcement is essentially an open call for developers to build their web apps on top of Google’s platform. The search giant is betting that its massive distribution channels, app store interface and small transaction fees (no 30% cut) will attract programmers and application creators to its platform.
There’s a lot at stake for Google, so it needs developers if the Chrome Web Store is to succeed.