HTML5 Doctor : helping you implement HTML5 today.

About

HTML5 Doctor is a collaboration among Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

The idea for the site came about following an HTML5 meetup after 2009′s Future of Web Design conference in London. We realized there wasn’t a resource for people who wanted to learn more about the hows and whys of implementing HTML5, so we decided to build one!

Originally, there were five of us (Rich, Bruce, Jack, Mike, and Tom). Shortly before launch, Remy came on board too. Then in early 2010, Oli made us an offer we couldn’t refuse, and we became seven.

We’d also like to offer a massive thank you to Brandan Lennox, who has been copy editing our posts for some time now. Brandan does a superb job of editing our articles and making them easy to read.

Our Aims

We will publish articles relating to HTML5, its semantics, and how to use it right now. We also invite questions via Ask the Doctor. We’ll post answers in future articles so that everyone can benefit.

We acknowledge that we may sometimes get things wrong and that people may disagree with our interpretation of the HTML5 specification. But that’s another of the reasons that this site exists: the spec has yet to be formalised, and we can all do our bit to make it what we want. A “specification for the people” if you will.

Get involved

We invite you to freely comment, question, congratulate, argue, and suggest in the articles’ comments sections, and we’ll do our best to answer in a considered and reasoned manner. As we said above, the HTML5 specification has yet to be finalised, so we can all have a say, and we invite you to do so here on our site.

We hope you find HTML5 Doctor a useful resource. If you have any questions relating to HTML5 and how to implement it, just ask the doctor!

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

JoJavaScript Framework for HTML5
http://joapp.com/
Document : http://joapp.com/docs/index.html
Download : https://github.com/davebalmer/jo/downloads

Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.

Jo는  HTML5를 지원하는 브라우저와 장치를 위한
자바 스크립트 프레임 워크입니다.
그것은 원래의 GUI와 PhoneGap 위에 가벼운 데이터 레이어로
모바일 플랫폼에서 작동하도록 설계되었습니다.
그것의 창조부터 조는 또한 모바일 브라우저를위한
경량 프레임 워크,
새로운 데스크톱 브라우저,
그리고 심지어는 대시보드 위젯으로
성공적으로 테스트되었습니다.

Contents

Developer Guide

• About
• Philosophy
• Summary
• Building
• Directory Map
• Quick Start
• Class Hierarchy
• Class Patterns
• Data Driven Controls
• Observer Pattern
• Supported Platforms
• Release Notes
• License

API Reference

• Core
• Data Layer
• UI Widgets

Index

• Keywords

Jo JavaScript Framework: Cross Platform Demo

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Appspresso 를  설치하려고 몇 번의 노력끝에 도저히 안되서 KTH 에 문의 메일을 보냈다.
그랬더니, 답변은 [Open Perspective] - [Other]를 찾아보라는 답변.

혹시나해서 다른 PC에서 동일 파일로 테스트 하니 Perspective에 Appspresso 가 나오는것이 아닌가?
그래서, 혹시나 다시 문의 메일을 보냈다 .
64bit 컴퓨터를 쓰고 있는데, 그것때문인가 하고.
답변 메일이 왔다.

"안녕하세요?

앱스프레소에 관심 가져 주셔서 감사합니다.
앱스프레소 1.0 beta는 아직 64bit Windows를 지원하지 않습니다.
4월 8일 64bit를 지원하는 앱스프레소 1.0 beta2 all-in-one과 앱스프레소 plug-in URL이 공개될 예정입니다.
멋진 앱 만드시기를 응원합니다.
감사합니다. "

앞으로도 무언가 안된다면 가차없이 문의 해보시기 바란다. 삽질은 금물~ ㅋㅋㅋ

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

 Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

Docs & Download : https://github.com/madrobby/zepto

Zepto.js: a minimalist framework for mobile WebKit browsers

Zepto.js is a minimalist framework for mobile WebKit browsers, with a jQuery-compatible chaining syntax.

100% jQuery coverage is not a design goal, however all APIs provided match their jQuery counterparts.

The ultimate goal is to have a ~5k library that handles most basic dredge work for you in a nice API so you can concentrate on getting stuff done.

Primary target platforms are:

• iOS 4+
• Android 2.2+
• webOS 1.4.5+

Secondary platforms (for plugin/extension development) are:

• Safari 5+ (desktop)
• Chrome 5+ (desktop)
• Other WebKit-based browsers/runtimes

Syntax & features:

Basic call with CSS selector:

  $('p>span').html('yoho').css('color:red');

Instead of a selector, a DOM Element, or a list of nodes can be passed in.

The $ function takes an optional context argument, which can be a DOM Element or a Zepto object:

  $('span', $('p'))  // -> find all <span> elements in <p> elements

  $('p').bind('click', function(){
    $('span', this).css('color:red'); // affects "span" children/grandchildren
  });

Context and .find calls are equivalent:

  $('span', $('p'))    // same
  $('p').find('span')  // same

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Learn to Build iPhone Apps with HTML, CSS, and JavaScript

http://oreilly.com/catalog/0636920001515/

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

웹상에서 Jquery를 테스트 해볼수 있다. - http://jsbin.com/

JS Bin Help

JS Bin is an open source collaborative JavaScript debugging tool.

If you want to get involved to help make JS Bin better (or perhaps fix a bug you've found), please fork JS Bin on github and send me a pull request.

Video tutorials will be coming shortly one day.

• FAQ
• Tips & Keyboard shortcuts
• Hacking tips (custom urls, etc)
• Who built this?
• Bugs, Feedback & Contribute

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Html5Demos : http://html5demos.com/
Html5를 응용하는 데모들을 보여준다.
Geolocation, CrossDomain, Canvas, Video, Drag&Drop 등이 있다.

HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

Introducing HTML5 by Bruce Lawson & Remy Sharp is the first full length book dedicated to HTML5.

Get it now and kick some HTML5 ass!

Filter demos: canvas contenteditable dataset dnd events file-api geolocation history manifest offline postMessage sql-database storage video websocket workers

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

코드를 테스트하고 코드에 대한 테스트 케이스를 만드는 과정을 개인적으로는
코드를 "미리검증(future-proofing)"하는 일이라고 본다. 작성된 코드와 라이브러리에 대한
테스트 케이스를 만들어놓으면 이상한 버그를 잡으면서, 게다가 자기도 모르는 사이에
코드에 새로운 버그를 집어넣으면서 디버깅하느라 보낼 지도 모르는
수많은 시간을 절약할 수 있다.

JSUnit : http://www.jsunit.net/
 자바스크립트 단위 테스트 라이브러리이다.  JSUnit에는 세 가지 기본 컴포넌트가 존재한다.
테스트 러너(test runner) : 테스트 묶음에서 테스트 러너 부분은 현재 테스트 과정이 얼마나 진행되었는지 알기 쉬운 그림으로 보여준다. 테스트 묶음을 로드하고 그 내용을 실행하고 결과를 기록하는 기능을 제공한다.
테스트 묶음(test suite) : 테스트 케이스들의 묶음을 말한다.(가끔 여러 웹 페이지에 나뉘어 있기도 하다.)
테스트 케이스(test case) : 참/거짓을 나타내는 간단한 표현식이다. 코드가 제대로 작동하고 있는지 확인할 수 있는 수치화한 결과를 돌려준다. 테스트 케이스만으로는 완벽하지 않으며, 테스트 러너와 함께 사용하면 인터렉티브한 테스트 환경을 제공한다.

ex) test suite
ex) test case

J3Unit : http://j3unit.sourceforge.net/
              http://sourceforge.net/projects/j3unit/files/

ex) J3Unit을 사용해 실행한 간단한 테스트

Test.Simple : http://openjsan.org/doc/t/th/theory/te ··· ple.html
Test.Simple은 JSAN을 만들면서 JSAN에 제출되는 모든 자바스크립트 모듈을 테스트하는
방법을 표준화 하기 위해 도입된 단위 테스트 도구다.

ex) 테스트를 위해 Test.Simple과 Test.More을 사용하는 예
// Test 모듈을 로드한다.(테스트 자체도 함께!)
new JSAN('../lib').use('Test.More');

// 여섯 가지 테스트를 실행한다고 알린다. (언제, 무엇이 잘못되었는지 알기 위해)
plan({tests: 6});

// 세 가지 간단한 경우를 테스트 한다.
ok( 2 == 2,             'two is two is two is two' );
is( "foo", "foo",       'foo is foo' );
isnt( "foo", "bar",     'foo isnt bar');

// 정규 표현식을 사용해 테스트한다.
like("fooble", /^foo/,   'foo is like fooble');
like("FooBle", /foo/i,   'foo is like FooBle');
like("/usr/local/", '^\/usr\/local', 'regexes with slashes in like' );

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Ext Core Cross - Browser Javascript Library
Ext Core is a JavaScript Library for enhancing websites.
Ext Core has great documentation and will always be free to use under the MIT Open Source License.

Browser Compatibility

Ext Core supports all major web browsers including:

• Internet Explorer 6+
• FireFox 1.5+ (PC, Mac)
• Safari 3+
• Chrome 3+
• Opera 9+ (PC, Mac)

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

네트워크 사용량을 줄이기 위해 코드압축기를 사용해 코드를 압축하는 일은
자바스크립트 라이브러리를 배포할때 중요하다. 압축은 코드를 알아볼수 없기 때문에
배포번에 사용해야 한다.
압축기는 세 종류가 있는데,
1. 코드와 관련없는 공백이나 주석을 모두 제거해 핵심코드만 남기는 압축기
2. 공백과 주석을 제거하고 모든 변수의 이름을 짧게 만드는 압축기
3. 위의 두가지를 만족하고, 변수이름뿐만 아니라 코드안에 있는 모든 단어의 길이를
최소화하는 압축기.

아래는 압축기 라이브러리 사이트이다.
JSMin 은 코드를 제외한 공백이나 주석제거(1번)
Packer는 모든 단어를 완전히 압축.(3번)

JSMin : http://www.crockford.com/javascript/jsmin.html
Packer : http://dean.edwards.name/packer/

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장