The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.
(0) 
(0)Posted by 홍반장
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
So
you have a killer idea for an iPhone app, but when you describe it to
people they just don’t get it. Maybe you have a client that is a visual
thinker and needs you to draw it out for him. That’s when wireframes,
mockups and stencils can be your saving grace.
There are many different types of tools available to developers, from low-tech stencil kits to high-tech collaborative software. So I’ve rounded up a few of the more popular ones people are using specifically for iPhone development. It’s far from being the definitive list, but it’s definitely a good place to start.
Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages
of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space
(the iPhone screen), the back is a 6mm grid.
The iPhone ui stencil kit is a stainless steel, laser cut stencil kit
for drawing quick mock-ups and wireframes for iPhone apps. It also comes
with a Zebra mechanical pencil.
The iPhone Sketchpad works precisely with the iPhone Stencil Kit, with
one phone silhouette on the front side and three on the back.
The App Sketchbook has 50 Double-sided, perforated pages each with 3
actual sized iPhone templates. Each page also has has 20px ruler
markings and a ruled section for notes.
A collection of vector iPhone UI elements for Fireworks CS3 and CS4.
Most iPhone screen elements, sensible layer sets all contained within one PSD file.
Graffletopia’s stencil kit for Omnigraffle.
It is for quick sketching of iPhone ideas. Use the outline for
printouts so you can hand sketch as well. The symbols are meant as a
check list for included features in your app development.
MockApp is a set of iPhone ui templates and library files put together for use in Powerpoint or Keynote.
This is a plug-in to browser Mozilla FireFox for prototyping interface
of iPhone applications for creating an iPhone mock-up. Currently Alpha –
not compatible with FF 3.55.
Pencil is a free and opensource tool for making diagrams and GUI
prototyping. Pencil runs on the Mozilla Gecko engine, turning the
Firefox browser into a sketching tool with just a 400-kilobyte
installation package.
This plug-in combines Fireworks with some jQuery and PHP to give you a
prototype you can not only view, but interact with, directly on your
iPhone, just as if it’s a live app.
Liveview is an iPhone app that consists of two parts: the ScreenCaster
and the Application itself. ScreenCaster launches a simple iPhone skin
on your Mac. From the same network, launch the LiveView app in your
iPhone. Whatever the ScreenCaster is highlighting is now seen in the
LiveView App. It also interprets touches as mouse clicks, turning it
into a two way interactive prototype.
Mockingbird is a web based mockup/wireframe tool built using the
Cappucino framework, so there’s no flash to wrestle with. While you
can’t actually design your mockups from an iPhone (who’d want to?), the
tool does have some very handy features. You can drag elements onto the
screen, create multiple pages, link to other pages and share directly
from the web.
Pidoco is a web-based tool that lets you create clickable wireframes
via drag & drop ui and then collaborate with remote users on each
project. The tool also includes iPhone stencils.
iPhone mockup is a web based tool that is currently in Alpha release
only. You can design your mockup as a hand sketch or illustration, and
mockups can contain user-uploaded images and user-entered text. Your
mockups will be accessible via url so they are unsecured.
The developer makes this perfectly clear and warns that he could discontinue hosting mockups at anytime, thereby deleting any work. That makes this a handy tool for quick and dirty mockups you want to print or share with someone on the fly, but not for much more.
Protoshare is a collaborative, web-based prototyping tool that helps
teams visualize requirements for interactive projects and work together
in real-time. It has an iPhone component that can be seen here.
With iPlotz you can create clickable, navigable wireframes to create
the experience of a real website or software application. You can also
invite others to comment on the designs, and once ready, you can then
manage the tasks for developers and designers to build the project.
CogTool is a general purpose UI prototyping tool simply using a
storyboard of your design idea with sketches, images or on a canvas.
Demonstrate tasks on that storyboard, then press a button to produce a
valid cognitive model predicting how long it will take a skilled user to
complete those tasks.
Balsamiq mockups is desktop software that is designed to help teams or
clients collaborate on wireframes and mockups. There are iPhone specific
controls included.
OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.
Justinmind prototyper allows you to create fully functional wireframes
for mobile applications and generate your HTML high-fidelity wireframes.
iRise for iPhones gives developers a way to quickly prototype the look,
feel and behavior of Apple iPhone applications through pre-defined
visualization widgets and templates that can be quickly assembled into a
high definition mobile applications.
(0) (0)Posted by 홍반장
//새 Person 클래스를 만든다.
var Person = Base.extend({
// Person 클래스 생성자
constructor: function( name ) {
this.name = name;
},
//Person 클래스의 간단한 메서드
getName: function() {
return this.name;
}
});
// Person 클래스를 상속하는 새 User 클래스를 만든다.
var User = Person.extend({
// User 클래스의 생성자를 만든다.
constructor: function( name, password ) {
// 부모 클래스의 생성자 메서드를 호출한다.
this.base( name );
this.password = password;
},
// User 클래스에 간단한 메서드를 추가한다.
getPassword: function() {
return this.password;
}
});
(0) (0)Posted by 홍반장
//프로토타입에 새 함수를 연결하는 간단한 헬퍼 Function.prototype.method = function(name,func){ this.prototype[name] = func; return this; } //다른 객체로부터 우아한 방식으로 함수를 상속받으면서 여전히 부모 객체의 함수를 //호출할 수 있게 해 주는 (약간 복잡한) 함수 Function.method('inherits', function(parent){ //상속 계층 안에서 얼마나 깊이 들어왔는지 추척한다. var depth = 0; //부모의 메서드를 상속 받는다. var proto = this.prototype = new parent(); //'uber'라는 privileged 함수를 만든다. //이 함수는 상속 과정에서 덮어쓴 함수를 실행할 수 있게 해 준다. this.method('uber', function(name){ var func; //실행할 함수 var ret; //함수의 반환값 var v = parent.prototype; //부모의 프로토타입 //이미 다른 'uber'함수 안이라면 if(depth){ //근원 프로토타입을 찾아 필요한 만큼 깊이 들어간다. for( var i = depth; i > o; i -= 1){ v = v.constructor.protptype; } //그리고 그 프로토타입에서 함수를 가져온다. func = v[name]; //아니면 'uber'를 처음 호출하는 상황이다. }else{ //실행할 함수를 프로토타입에서 가져온다. func = proto[name]; //함수가 이 프로토타입의 일부였다면 if(func == this[name]){ //대신 부모 프로토타입에 간다. func = v[name]; } } //상속 스택에서 얼마나 깊이 들어왔는지를 추척한다. depth += 1; //첫 번째 전달인자를 제외한 모든 전달인자를 넘기면서 함수를 호출한다. //(첫 번째 전달인자는 우리가 호출하려는 함수 이름을 담고 있다.) ret = func.apply(this, Array.prototype.slice.apply(arguments, [1])); //스택의 깊이를 변경한다. depth -= 1; //함수 호출의 결과값을 되돌려준다. return ret; }); return this; }); //parent 객체에서 new parent()를 사용해 모든 함수를 // 상속받지 않고, 오직 함수 몇개만을 상속받는 함수 Function.method('swiss', function(parent){ for(var i = 1; i < arguments.length; i+= 1){ //상속받을 메서드들을 모두 방문한다. var name = arguments[i]; //메서드를 이 객체의 프로토타입으로 가져온다. this.prototype[name] = parent.prototype[name]; } return this; });
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
| Variable | typeof Variable | Variable.constructor |
| {an:"object"} | object | Object |
| ["an","array"] | object | Array |
| function() {} | function | Function |
| "a string" | string | String |
| 55 | number | Number |
| true | boolean | Boolean |
| new User() | object | User |
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
Firefox는 언제나 HTML5를 훌륭히 지원해왔으며 기록상 마지막 버전 빌드는 보다 진보된 기능을 가지고 있습니다.
Firefox는 HTML5 형식을 충족하며 새로운 입력 형식, 데이터 목록 지원, autofucus나 placeholder와 같은 새 입력 속성, 분리된 형식, 형식 옵션, 유효성 기법, 강제 유효성, 그리고 이를 한데 묶을 새 CSS 선택기를 지원합니다. 보다 자세한 정보를 원하시면, 저희의 Hacks site를 방문하십시오.
닫기 자세히 보기Firefox는 인라인 SVG와 같은 새로운 가능성을 가져다주는 HTML5 파서를 지원하며파싱 알고리즘을 프로세서에서 실행하는 성능도 개선되었습니다. 이는 Firefox의 파싱 알고리즘을 표준에 가깝게 해주고 일관성있는 파싱 브라우저의 토대를 낳습니다.
닫기 자세히 보기Firefox는 사용료를 지불할 필요가 없는 새로운 웹용 비디오 포맷인 WebM을 지원합니다. 유튜브의 HTML5 베타에 참여하시면 작동하며 새로운 iframe 엠베딩 API를 사용할 경우 엠베딩된 유튜브 비디오에서도 작동합니다. 베타에 참여하시고 이 글의 아래에 있는 예제가 작동하는 것을 보십시오.
닫기 자세히 보기HTML5의 동영상을 위한 버퍼 속성 지원으로 동영상이 포함된 웹 페이지는 다운로드 비율과 스트림의 현재 위치를 통한 근사적인 수치 대신 정확한 버퍼링 정도를 제공할 수 있습니다.
자세히 보기동영상의 “autobuffer" 속성이 새로운 “preload” 속성으로 바뀝니다. 이 속성은 개발자들이 Firefox 3.5에 포함된 binary on/off system과 달리 페이지에 포함된 동영상의 pre-buffered를 조절하게 해줍니다.
자세히 보기Firefox는 HTML5 pushState와 replaceState history modification calls를 지원하여 개발자들이 브라우저의 탐색 기록을 새로 만들거나 고칠 수 있게 합니다. 이는 # 뒤 URL의 기록을 새로 만드는 어플리케이션에 유용합니다 (예를 들면 HTML 기반 슬라이드에 유용).
Firefox는 새로운 CSS 속성을 구현하고 private CSS namespace에서 최종적인 namespace으로 바꾸었습니다.
Firefox는 CSS 변환에 대한 지원을 포함하고 있습니다. 세부 사항이 여전히 초기이므로 -moz로 시작하는 확장 또한 아직 존재합니다.
닫기 자세히 보기Firefox는 초기 버전의 calc를 -moz-calc와 같은 특별한 형태로 지원합니다. 이는 개발자들이 CSS 페이지 배치를 훨씬 간단하게 만들 수 있는 length를 어디에서나 사용해(더이상 빈칸을 위해 divs를 사용하지 않아도 됩니다!) 간단한 표현을 사용할 수 있게 해줍니다.
자세히 보기Firefox는 -moz-any() 선택 묶기라는 극단적으로 유용한 새 CSS 확장을 추가했습니다. 이는 한 부분에 대한 전체 선택자를 반복하는 것에서 연결자를 사용하는 대안을 제공합니다.
자세히 보기–moz-element는 배경-그림 속성에 대한 확장으로 아무 요소나 배경에 대한 다른 요소로 사용하게 해줍니다.
자세히 보기-moz-placeholder는 HTML5 형식의 placeholder인 배경 글자의 속성을 바꿉니다. 웹 개발자는 placeholder 글자의 색깔이나 다른 속성을 바꿀 수 있습니다.
자세히 보기border-radius 속성이 이전의 -moz-border-radius를 대체하여 이제 지원합니다.
자세히 보기box-shadow는 -moz-box-shadow에서 대체되었습니다.
자세히 보기| Beau Grand & Fort |
| klmnABRACADABRANTESQUEopqr |
| EXTRAORDINAIRE |
| tprestigieuxu |
| FULGURANT |
| Phénoménal |
| «COLOSSAL!» |
| incroyable |
| & modeste avec ça |
Firefox는 -moz-font-feature-settings속성의 트루타입 글꼴에 대한 기능을 훨씬 많은 확대에 대한 지원을 포함합니다. 이는 모든 종류의 글꼴 기능 - kerning, ligatures, alternates, real small caps, 그리고stylistic sets - 사용이 가능함을 뜻합니다.
닫기 자세히 보기우리는 픽셀 크기의 핸들링을 Internet Explorer, Safari 그리고 Chrome에 맞춰 1 인치는 언제가 95픽셀과 같습니다.
자세히 보기Firefox는 물리적 크기를 사용하기를 원할 경우를 위해 mozmm이라 불리는 새 CS5 규격을 소개합니다.
자세히 보기-moz-device-pixel-ratio 미디어 쿼리는 CSS 픽셀당 장치 픽셀의 수를 제공합니다.
자세히 보기-moz-tab-size 속성은 글자를 렌더링할 시 탭 문자 (U+0009)의 렌더링 중 빈칸 문자의 너비를 지정하게 해줍니다.
자세히 보기Firefox의 CSS 가상-선택자인 -moz-focusring은 한 요소가 focus되었을 경우 그리고 focus ring이 주위에 그려질 시 어떻게 보일지를 지정하게 해 줍니다. focus ring이 그려지거나 그렇지 않을 경우에 대한 규칙은 운영체제마다 다르나 이것은 기반 규칙을 유지 보수하는 동안 form control의 모양새를 제어하게 해 줍니다.
자세히 보기새 -moz-image-rect는 배경이나 배경-그림의 부분으로 보조-정사각형을 사용하게 해줍니다.
자세히 보기글자 영역은 기본적으로 크기 조절이 가능합니다. 새 CS5 크기 조절 속성을 통해 이를 해제할 수 있습니다.
Firefox는 새 표준 API를 충족함으로서 여러분의 브라우저 안에서 일어나는 일을 알아내고 (온라인과 오프라인) 웹 페이지에 대화식을 추가하는 여러 방법을 제공합니다.
ECMAScript 5는 JavaScript 언어의 새 버전으로 새 기능과 Strict Mode나 JSON API와 같은 새 API를 포함합니다.
자세히 보기Canvas 3D. WebGL은 OpenGL ES 2.0을 거의 따르는 API를 소개함으로서 3D 그래픽을 웹에 제공하고 HTML canvas 요소에 쓰이게 합니다.
닫기 자세히 보기Firefox는 숨겨진 파일 제어의 .click()을 호출해서 파일 업로드 위젯 기반을 가져올 수 있으며 이는 (볼품 없는) 파일 업로드 제어를 여러분만의 것으로 확장할 수 있다는 뜻입니다. 만약 여기에 새 File API와 progress event를 조합시키면 매우 훌륭한 파일 업로드 경험 기법이 될 것입니다.
자세히 보기Firefox 는 Blob API와 딸려오는 .slice API를 지원합니다. 이는 전체 파일을 메모리로 올리지 않고 JavaScript를 사용해 큰 파일 객체의 부분만 처리하고 싶은 경우 도움이 됩니다. 신뢰할 수 있는 대용량 파일 업로드를 원하는 경우에는 서버와 JavaScript 코드를 사용해 큰 파일을 여러 부분으로 나누어 전체 덩어리를 업로드하며 이 과정에서 재-재시도 실패 부분이나 심지어는 동시에 여러 부분을 전송하는 것이 포함됩니다.
자세히 보기Firefox는 File API의 .url 속성을 지원하며 이는 File API의 객체가 그림, 동영상, HTML 또는 다른 URL 제공 객체에 사용될 수 있음을 뜻합니다.
자세히 보기Firefox는 DOM에 의해 확대된 터치와 멀티-터치 event를 모두 지원합니다. 이 기능에 대한 지원은 Windows 7 시스템에서 가능합니다.
자세히 보기Firefox는 마우스나 손가락이 event를 생성할 경우 mozInputSource 속성을 통해 알려줍니다. 이는 터치와 멀티터치 event에서 유용하며 터치와 마우스 입력을 다르게 다루는 어플리케이션의 제작을 가능하게 해줍니다.
자세히 보기Firefox는 초기 버전의 IndexedDB를 지원합니다. 로컬 저장소에 대한 이 새로운 표준은 아직 변화를 겪고 있으며 안정될 때까지 private-prefix를 사용할 것입니다. IndexedDB 입문은 IndexedDB API 사용에 대한 개요를 제공합니다.
자세히 보기Firefox는 새 FormData 객체를 지원하며 이는 HTML form에 영향을 쉽게 미칠 수 있도록 해줍니다. 또한 이는 File API를 통해 파일을 form accessed와 같이 쉽게 업로드하는 식의 일부 새로운 기능을 가능하게 해줍니다.
자세히 보기Firefox는 Canvas를 업로드와 같은 목적으로 파일 객체로 접근하게 해줄 수 있습니다. mozGetAsFile() 메소드를 canvas에 사용하면 그림 파일을 반환하게 됩니다.
자세히 보기Firefox Audio Data API는 개발자가 음성과 동영상 요소에서 데이터를 읽고, 편집하고, 쓰는 것을 가능하게 합니다.
우리는 여러분이 이미 알고 좋아하는 Firebug 기능을 확장해 최고의 브라우저 내장 디버깅과 분석 경험을 제공합니다.
웹 콘솔은 새 도구로 돌아가는 웹 페이지를 조사하고 네트워크 활동을 보며 console.log로 저장된 메세지 로그를 확인하고 페이지의 CSS를 비롯한 여러 경고를 보여줍니다.
자세히 보기모든 웹 개발자들이 의존하는 Firebug 부가기능은 최신 버전의 Firefox와 호환됩니다.
Firefox 4는 SVG 지원을 확대하여 선 그래픽을 보다 창의적인 방법으로 사용할 수 있게 해줍니다.
이제 Firefox에서도 SVG를 SMIL을 사용하여 애니메이션할 수 있습니다.
자세히 보기이제 SVG를 <img> 태그 안에서도 CSS의 배경 그림과 같이 사용 가능합니다. SMIL 애니메이션 또한 지원됩니다.
Firefox는 수많은 새 보안 강화를 지원하여 웹 개발자를 돕고 사용자를 보호합니다.
컨텐츠 보안 정책(CSP: Content Security Policy)은 개발자가 여러 다른 종류의 공격을 방지에는 데 도움을 주는 도구의 모음입니다. 구체적으로, 이는 cross-site scripting 공격과 click-jacking, 그리고 패킷 스니핑 공격을 누그러뜨리는 도구를 제공합니다. 만일 규칙을 위반하게 되면 Firefox는 웹 사이트에 위반사항에 대한 정보를 보내 다른 브라우저의 보안도 향상되도록 돕습니다.
자세히 보기Firefox는 X-Frame-Options 헤더를 지원하여 clickjacking으로부터 보호합니다. 이 응답 헤더는 다른 브라우저에서도 잘 지원됩니다.
자세히 보기Firefox는 HTTP Strict Transport Security (HSTS) 헤더를 지원합니다. 이 헤더는 반드시, 절대로 사이트를 암호화되지 않은 HTTP로 연결하지 않도록 브라우저에게 알리는데 사용됩니다. Firefox 사용자는 또한 HSTS 목록의 사이트를 추가하거나 지우는 STS UI 부가기능을 심지어는 사이트가 HSTS에 대한 직접적인 지원을 하지 않아도 사용할 수 있습니다.
자세히 보기Firefox에서 CORS 수행의 버그를 고쳤습니다.
자세히 보기Firefox는 아무 웹사이트나 브라우징 기록을 캐낼 수 있는 CSS 규칙의 decade-old hole을 닫음으로서온라인 사생활의 보호를 향상시키는 변화가 포함되었습니다. 이 변화는 Webkit 기반 브라우저에도 도입되었습니다.
(0) (0)Posted by 홍반장
- 홍반장
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
