진우의 세상살이

jquery plugin site

(진우아범) — Tue, 15 May 2012 08:51:40 +0900

[event]

- 마우스 휠 이벤트 : Brandon Aaron

[UI]

- 각종 UI , 슬라이드쇼, 툴팁, 탭, 오버레이 등 : jquery tools

jQuery tools User's Guide - jQuery tools basics (III) - ING

(진우아범) — Sun, 08 Apr 2012 01:24:43 +0900

The role of CSS

Cascaded Style Sheets (CSS) are the industry standard for styling the presentation and positioning of your elements. It is a powerful language which can do many things that surprise even experienced web developers. Learning this skill is definitely encouraged for every web developer.
CSS는 엘리먼트의 표현이나 위치에 대한 산업 표준화된 스타일이다.
CSS는 경험이 많은 웹개발자들도 놀라게 할 만한 많은 것들을 할 수 있는 강력한 언어이다. 이 기술을 배우는 것을 모든 웹개발자들에게 분명히 권장합니다.

These tools are very strict about not mixing any style declarations in the JavaScript code. You would think that this is an obvious coding principle and should be taken for granted but it isn't. Taking a quick look at the list of jQuery plugins reveals many tools that mix CSS into their code and hard code their style. Even if those styling variables are given as configuration variables, be it borders, images, colors, size or positioning, this leads to poor application design.
이러한 도구는 JavaScript 코드내에서 스타일 선언을 혼합하는 것에 매우 엄격하다. 당신은 이것이 명확한 코딩 원칙이 있고, 당연히 그래야 한다고 생각할 것이다. 그러나 그것은 그렇지 않다. ?? jQuery 플러그인 리스트들을 빠르게 훝어봐라, 그것들은 그들의 코드안에 CSS를 썪어놓은 부분, 그들의 스타일을 하드코딩으로 작성한 것을 나타낸다. 비록 이들 스타일변수가 테두리,이미지, 색상, 크기, 위치에 대한 구성 변수로 주어진다고 할 지라도 말이다. 이것은 어플리케이션 디자인을 볼품없게 만들것이다.

A proper tool should only rely on CSS class names - because they offer a much more flexible styling environment. Let's take the tabs tool as an example. It offers a configuration variable called currentrepresenting a class name that is set to the currently active tab. Lets say you have set the value "active" as follows:
적절한 도구는 CSS 클래스 명에 의존해야만 한다. 그래야 그 도구들이 좀더 더 많이 유연한 스타일 환경을 제공하기 때문이다. 예로써 탭툴을 봅시다. 이 소스는 현재 활성화된 탭을 설정하기 위해 current라는 구성변수에 다른 클래스명을 제공한다. "active"라는 값을 다음과 같이 설정하자.

  $("ul.tabs").tabs("div.panes > div", {current: 'active'});

After that you can style the current tab with CSS as follows:
그런 후에 당신은 다음과 같이 CSS를 가지고 현재의 탭에 스타일을 선언할 수 있다.

  ul.tabs .active {
  color: '#fff';
  fontWeight: bold;
  background-position:0 -40px;
  }

CSS

This means that you can have a whole CSS arsenal at your disposal while designing what the currently selected tab should look like. This kind of design principle is used throughout these tools. There are no hidden surprises in the tools related to styling. The tools are responsible for setting and removing classes from elements and after that all style is the responsibility of CSS. You can also customize all class names that these tools use.
이러한 방법은 당신이 현재 선택된 탭의 보여지는 것에 대해 디자인 하는 것에 있어서 모든 CSS기능을 가질 수 있다는 것을 의미한다. 디자인 원리의 이런 방법은 이러한 Tools을 통하여 사용된다. 스타일링에 관련된 툴들에 있어서 숨겨진 놀라움은 없다(::이미 다 알고있는 것들이다.). 이 툴들은 엘리먼트에 클래스를 설정하거나 삭제하는 역활이고 그 후부터의 모든 스타일은 css의 책임이다. 당신은 이 툴들을 사용하는 모든 클래스명을 변경할 수 있다.

Default CSS files

For each tool we offer a default CSS file that you can use as the basis for your design. You can use the code, images and ideas from there for free. No obligations. They are fully documented and coded with good CSS practices. For example, you will never see this kind of statement:
각가의 툴들에 대해 우리는 기본적인 CSS파일을 제공한다. 그 파일은 디자인적인 부분에 있어서 기본적으로 사용할 수 있다. 당신은 코드나 이미지 그리고 아이디어를 자유롭게 그 파일에 사용할 수 있다. 어떠한 구속 이나 제한없이. 그 파일들은 좋은 CSS연습으로 모두 문서화 되고 코드화 되어 있다. 당신은 결코 이러한 종류의 문장을 보지 못할 것이다.

  /* define colors for body and p elements */
  body {
  color:#ccc;
  }
 
  p {
  color:#ccc;
  }

CSS

Instead it will always be shortened to:
대신에 위 코드는 항상 다음과 같이 간단히 표현될 것이다.

  body, p {
  color:#ccc;
  }

CSS

This was just a primitive example of good CSS practice, but it is used extensively in our CSS files.

jQuery tools User's Guide - jQuery tools basics (II) - ING

(진우아범) — Sun, 08 Apr 2012 01:24:00 +0900

The role of HTML HTML 규칙

jQuery Tools was primarily developed for "normal" HTML developers. You either have an existing website or are starting with a new one and these tools are used to enhance it. The goal here is to use "progressive enhancement" so that browsers that do not support JavaScript at all can still visualize your content.
jQuery Tools은 일반적인 HTML개발자들을 위해 개발되었다. 당신이 웹사이트를 가지고 있던, 또는 새로 만들기 위해 시작을 하던 이 툴들이 그 웹사이트를 더 강화하게 하기 위해 사용된다. 여기서의 목적은 "점진적인 향상"을 사용하기 위한 것이다. 그래서 JavaScript가 지원되지 않는 브라우져에서도 당신의 시각적인 효과는 그대로 볼 수 있어야 한다.

These tools are not bound to any specific HTML structure. For example, tabs can be constructed fromul, ol, dl, div or table elements. The same is true of our other jQuery Tools as well. The most important thing is to understand what you are doing and what HTML element is suitable for which specific situation.
이 툴들은 어떤 규정된 HTML구조에도 종속적으로 연결되지 않았다. 예를 들어
탭은 ul,ol,dl,div또는 테이블 엘리먼트로 구성할 수 있다. 동일한 형태를 jQuery Tools로 더 잘 구현할 수 있는 것은 사실이다. 그러나, 가장 중요한 것은 당신이 무엇을 나타낼것이고 html엘리먼트로 특정된 상황에 가장 적합한 것이 무엇인가를 이해하는 것이다.

All of the tools deal with a root element which is typically a div element, but it does not have to be. For example, a root element for an overlay is the one that contains all overlayed data. In every tool you can have any combination of HTML inside the root element such as images, forms, Flash objects and tables.
모든 tools는 일반적으로 div엘리먼트로 root엘리먼트를 구성한다. 그러나, 이것은
그렇게 할 필요가 없다. 예를 들어, 오버레이를 구성하기 위한 root엘리먼트는 모든 오버레이되는 데이터를 포함하는 하나의 엘리먼트일 뿐이다. 모든 tool을 가지고 이미지나, 폼, 플래쉬객체 또는 테이블과 같은 root엘리먼트 내에 html의 조합가질 수 있다.

The role of JavaScript and jQuery
JavaScript 와 jQuery의 역할

jQuery is a fast and concise JavaScript library that simplifies the development of cross-browser applications. All tools except flashembed are dependent on this library. jQuery skills are not requiredwhen using these tools. People have been using these tools without any prior knowledge about jQuery and even JavaScript itself. Of course, those skills would be a great help, but they are not required.

jQuery는 cross브라우징용 어플리케이션의 개발을 간단히 할 수 있게 해주는 빠른 javascript 라이브러리이다. 모든 Tools는 embed된 flash를 제외한 모든 것은 이 라이브러리에 의존한다. 사람들은 jQuery나 javascript자체에 대한 선우선되는 지식이 없이도 이툴들을 사용해 왔다. 물론, 그런 지식에 대한 skill은 대단히 도움이 되지만 꼭 필수적인 것은 아니다.

If you want to enhance your jQuery and JavaScript skills, the best things to learn about when using these tools would definitely be jQuery selectors and object literals. The first skill is used to select elements from the page to be enhanced with the tools and the latter is used for configuring the tools. Here is an example that introduces you to both of these skills:
만약 당신이 jQuery나 JavaScript의 스킬을 향상시키고자 한다면, 이 tools들을 사용하는데 있어서 배우면 가장 좋은 것은 jQuery 셀렉터나 객체 리터럴의 정의된 부분입니다. 첫번째 스킬(selecter)은 tools을 가지고 page를 강화할 경우에 page로 부터 엘리먼트를 선택할 때 사용된다. 그리고, 후자는 tools를 구성(속성 등)하는 데 사용된다.
여기에 이 두가지의 스킬에 대하여 설명하기 위한 예제가 있다.

  // two jquery selectors and a configuration given as an object literal
  $("#content ul.tabs").tabs("div.panes > div", {
 
  // configuration variables
  current: 'current',
  effect: 'fade'
 
  });

JavaScript

Here we have two jQuery selectors. The first one selects all ul elements whose class name is tabs which are all contained inside an element whose id is "content". This query is similar to CSS selectors and if you know CSS, you will feel at home here. The second selector selects all div elements that are directly nested inside a div whose class name is panes.

여기 예제에 2가지 형태의 jQuery 셀렉터가 있다. 첫번째는 "content"라는 id를 가진 엘리먼트 안에 있는 ul중 tabs라는 class이름을 가진 모든 ul엘리먼트를 선택한다.
이 문법은 CSS 셀렉터와 유사하다. 만약 당신이 CSS를 알고 있다면 당신은 이 부분을 친숙하게 느낄 것이다. 두번째는 class명이 panes인 div아래에(자식 엘리먼트) 위치한 모든 div엘리먼트를 선택한다.

Finally, we have a configuration object starting with { and ending with }. It contains a comma-separated list of name-value pairs. The name is followed by a colon which is followed by a value. The value can be a number, string, boolean, array, function or another object literal. Care must be taken to enclose string values in quotes. That is about it. You use this syntax to configure these tools.
마지막으로 {와 }로 구성되는 속성 객체가 있다. 이 구성값들은 ","콤마로 구성되고 name과 value로 쌍을 이루는 형태로 되어 있다. ?? name(속성명)은 콜론 다음에 오고 값 다음에 위치한다?? 값은 숫자나 문자, boolean값, 배열, 함수 또는 다른 객체 리터럴이 될 수 있다. 주의할 점은 값은 작은 따옴표(' ')로 묶은 내에 위치해야 한다. 이 내용들이 위의 예제이다. 당신이 이 Tools을 구성하려면 위의 문법을 이용해라.

Execute your scripts when the document is ready
document가 준비되었을 때 ( ready() ) 이 스크립트를 실행해라.

It is important that you execute all your scripts only after the document is ready and scriptable. This can be done by enclosing your JavaScript calls inside a $(document).ready() block as follows:
document가 ready되고 스크립트를 사용할 수 있는 상태가 된 후에 당신의 스크립트 구분을 실행 시켜야 한다는 것은 중요하다. ?? 당신의 스크립트는 다음의 $(document).ready() 사이에 사용될 수 있다.

  $(document).ready(function() {
 
  // put all your JavaScript wizardry here
 
  });

JavaScript

This might be the most important thing in jQuery. Everything inside the block will load as soon as the document is scriptable but before the whole page contents such as images and Flash are loaded. Everything that you stick inside the braces is ready to go at the earliest possible moment. And as opposed to the traditional old-school "onload" attribute in the body tag you can have multiple$(document).ready() blocks on your page.
이것은 jQuery에서 가장 중요한것일 수도 있다. ready블록안의 모든 것들은 문서가 스크립팅이 가능한 상태가 되자마자 로딩될 것이다. ??그러나 페이지 전체의 이미지나 플래쉬 같은 것이 로딩되기 전일 것이다. ?? ??당신이 안전한 버틴목(ready 블록)안에 넣는 모든것들은 최초의 가능한 순간에 사용할 준비가 된다. 그리고 전통적인 구식인 body태그안의 "onload" 속성과는 반대로 당신의 페이지내에 $(document).ready() 블록은 여러개 사용할 수 있다.

You can also use a shorter syntax:

  $(function() {
 
  // same thing here.
 
  });

JavaScript

Which does exactly the same thing but is not so intuitive for a newcomer.
이것은 정확히 동일하게 동작하지만 직관적이지 않다.

jQuery tools User's Guide - introduction to jQuery tools ( III )

(진우아범) — Thu, 05 Apr 2012 00:08:00 +0900

Browser Support 지원 브라우져

jQuery Tools have been proven to work with the following browsers:

If you encounter any problem with jQuery Tools and any of these browsers, please report it to thejQuery Tools forum.
만약 당신이 jQuery Tools와 이들 브라우져들을 가지고 어떤 문제에 직면한다면, jQuery Toos forum에 알려주세요.

jQuery Tools and Flowplayer
jQuery Tools 와 Flowplayer

You must have noticed that this project is hosted on the Flowplayer website. This is because some of the tools were initially developed for making widgets that work well with video sites. Scrollablewas made for building playlists and Overlay was made for showing videos over other elements on the page. Little by little those widgets matured to the point where they are now.
당신은 이 프로젝트가 Flowplayer웹사이트에 호스트되어 있는 것을 고지해야만 한다. 위젯을 만들기 위해 초기에 개발된 몇몇 툴들은 Flowplayer(동영상)사이트와 잘 작동되도록 되어 있기 때문이다. 플레이 리스트를 제작하기 위해 만들어진 Scrollable이나 페이지에서 다른 엘리먼트 위에 비디오를 표시하기 위해 만들어진 Overlay. 그들 위젯은 현재 시점까지 조금씩 발전되어 완성되어 왔다.

Today Flowplayer and jQuery Tools have nothing specific to do with each other. Flowplayer is a video player and jQuery Tools is a generic user-interface library for the web. Of course, they can be used together because both are well behaving pieces of software. Here is a quick example of how videos can be overlayed on a page:

오늘날 Flowplayer와 jQuery Tools는 각각 함께 동작되도록 명확히 규정된 어떤것도 없다. Flowplayer는 비디오 플레이어 이고, jQuery Tools는 웹에서 사용되는 일반적인 사용자 인터페이스 라이브러리이다. 물론, 그것들은 함께 사용될 수 있다, 두가지 모두 소프트웨어의 명확히 필수적인 부분이기 때문이다.
여기에 페이지 위에서 비디오가 어떻게 오버레이 되는지 간단한 예제가 있다.

  // install flowplayer into a container element whose id is "player"
  var player = $f("player", "/media/swf/flowplayer/flowplayer-3.2.9.swf");
 
  // setup button action. it will fire our overlay
  $("a.overlayLink").overlay({
 
  // when the overlay is opened, load our player
  onLoad: function() {
  player.load();
  },
 
  // when the overlay is closed, unload our player
  onClose: function() {
  player.unload();
  }
  });

JavaScript

Flowplayer is Open Source software licensed with the GPL 3 open source license. There are also commercial licenses that allow us to focus full time on the development of tools and the player itself. They also allow us to provide the free content delivery network for the users of jQuery Tools. There is currently no possibility of expressing your satisfaction through making a donation; however, if you are interested in showing videos on your site you could consider purchasing aFlowplayer commercial license.
Flowplayer는 GPL5 오픈소스 라이선스를 가지고 있는 오픈소스이다.
물론 우리로 하여금 TOOLS와 PLAYER의 개발에 집중할 수 있도록 돕기위한
상업용 라이선스도 있다. 이런 상업용 라이선스는 jQuery Tools의 사용자들에게 무료 CDN서비스를 제공할 수 있다. 현재 기부를 통해 당신의 만족을 표현(기부영수증?)할 수는 없다. 그러나, 만약 당신의 웹사이트에 보여지는 비디오에 관심이 있다면 상업용 라이선스인 Flowplayer를 고려해서 구매할 수 있다.

jQuery tools User's Guide - introduction to jQuery tools ( II )

(진우아범) — Thu, 05 Apr 2012 00:07:18 +0900

Understanding jQuery Tools의 이해

jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information andvisual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.
jQuery Tools은 웹사이트에서 제일 중요한 사용자 인터페이스의 컴포넌트들의 모음이다. 탭이나, 어코디언, 툴팁, 오버레이, 노출되는 효과, 스크롤링등이 있다.
이것들은 당신의 웹사이트의 사용성이나 반응성을 극적으로 향상시킬 수 있다.
그것들은 주로 정보와 시각적 매력을 제시하는데 중점을 둡니다. 결국, 이 관점이 대부분의 웹사이트가 원하는 정확한 관점입니다. 그것이 사이트의 정보를 보는 사용자에게 쉽고 시각적으로 기쁨을 주는 방법으로 컨텐츠를 제공하는 것입니다.

Other JavaScript UI libraries focus on desktop-like features such as drag-and-drop, ranges, sortable tables or draggable windows. They are meant to build "rich internet applications" (RIAs) such as email clients, task managers, CRM software, image organizers or feed viewers. These kinds of applications are very useful within a small group or when used in intranets; however, normal websites are very different in nature. Their purpose is to look good and present information. jQuery Tools are built exactly for that purpose.
다른 javascript UI라이브러리들은 드레그앤드롭이나 범위, 테이블정렬화, 드레그할 수 있는 창과 같이 데스트탑과 같은 기능에 중점을 둔다. 그것들은 이메일 클라이언트, 작업관리자, CRM 소프트웨어 , 이미지관리, 피드뷰어와 같은 RIA를 만드는 것을 의미한다. 이런 종류의 어플리케이션은 작은 그룹이나 인트라넷과 같은 곳에서 사용할 때는 매우 유용하다. 그러나 일반적인 사이트일경우는 본질적으로 다르다.
이런 일반적인 사이트들은 좋게 보이거나 정보를 제공하는데 목적이 있다.
jQuery Tools는 그 목적에 정확히 부합하도록 만들어 졌다.

It is recommended that you start designing your pages without using any JavaScript. There are many examples of highly functional, good looking and user friendly web sites that are not using JavaScript. The purpose of this library is to enhance an existing site with the great possibilities that modern JavaScript techniques have to offer. This is essentially the idea of "progressive enhancement" which is a common design pattern today. You should realize that highly professional sites don't overuse JavaScript just for the fun of it. Scripting is only used when it truly makes the pages more readable and user-friendly. This is where these jQuery Tools come into play.
당신이 javascript를 사용하지 않고 페이지를 디자인하기를 권장한다.
자바스크립트를 사용하지 않고 고가용성이나 좋아보이는 디자인, 사용자 친화적인 웹사이트들에 대한 예는 많이 있다. 이 라이브러리의 목적은 이미 제작되어진 사이트에 현대의 javascript 기술만을 제공해서 뛰어난 가능성을 향상시키는 데 목적이 있다. 오늘날의 일반적인 디자인 패턴에서는 "진보적인 향상"의 개념이 본질적이라고 생각한다. 매우 전문적인 사이트는 단지 재미를 위해서 javascript를 과용하지 않는다는 것을 깨달아야 합니다. 스크립팅은 단지 페이지를 더 읽기 쉽고, 더 사용자 친화적 만들려고 할 때만 사용합니다. 이 것이 jQuery Tools가 등장하게된 배경입니다.

This library is not a framework with a steep learning curve, lots of preliminary work and strict coding rules. You are not tied to any predefined HTML or CSS structures. You can include the library on your pages and start using it immediately. You can freely design the look and feel of your site or you can use any of the designs we present in our demos as a template.
이 라이브러리는 험한 학습 순서나 많은 예비 작업, 엄격한 코딩 규칙등이 있는 프레임웍이 아니다. 당신은 미리정의된 HTML이나 CSS 구조에 얼매이지 않는다. 당신의 페이지에 이 라이브러리를 포함해서 곧바로 시작할 수 있다. 당신의 사이트에 대한 느낌이나 보여지는 그래도 자유롭게 디자인 할 수 있다. 또는 우리의 데모에서 템플릿으로 제공하는 어떤 디자인도 사용할 수 있다.

These tools can be easily combined. Think of scrollables that trigger overlays or overlays that contain scrollables together with tooltips or whatever combination you can imagine. The possibilities are endless. And if that is not enough, you can harness the enormous power of the jQuery library. Many times you see complex JavaScript components implemented that could be done with just a few lines of jQuery code. For many websites, this may be the only JavaScript library necessary.
이 툴들은 쉽게 조합될 수 있다. ???### #####????
가능성은 무한합니다. 그리고 만약 그것으로도 만족스럽지 않다면, 당신은 jQuery라이브러리의 엄청난 파워를 활용할 수 있습니다.
당신이 자주 보았던 복잡한 javascript 컴포넌트는 jQuery code 단 몇줄 만으로 구현할 수 있다. 이 라이브러리는 많은 웹사이트들을 위해 필수적인 javascript 라이브러리가 될 수 있을 것이다.

The old UNIX design philosophy "tools, not policy" is very important in web design.
오래된 UNIX의 디자인 철학인 "정책이 아닌 도구다"는 웹디자인에서 메우 중요하다.

jQuery tools User's Guide - introduction to jQuery tools ( I )

(진우아범) — Wed, 04 Apr 2012 23:35:10 +0900

jQuery tools 에 대한 소개

Essential tools for modern websites
현재적인 웹사이트를 위한 필수 툴

Let's face it: do you really need drag-and-drop, resizable windows or sortable lists in your web applications?
현실을 직시해 볼때, 당신은 진정으로 당신의 웹어플리케이션내에서 드래그앤드롭, 윈도우 크기조정 또는 리스트의 정렬화가 필요하다고 생각합니까?

Websites are not desktop applications. They are different. What you really need is high usability, striking visual effects and all those "web 2.0" goodies that you have seen on your favourite websites.
웹사이트는 PC용 어플이 아니다. 그 둘은 다른 것이다. 당신이 진정으로 필요한 것은 높은 유용성과 눈에띠는 시각적인 효과, 그리고 (?) 당신이 관심을 갖는 웹사이트에서 볼여지는 "웹 2.0"이라는 근사한 것들이다.

This library is an answer to this need. All tools can be used together, extended, configured and styled. You'll find your personal way of using the library.
이 라이브러리는 이 요구에 대한 답변이다. 모든 툴은 함께 사용될 수 있고, 확장되고, 구성되고, 스타일화 될 수 있다.
당신은 이 라이브러리의 사용법에 대한 개인적인 방법을 발견할 것이다.

Small size. High performance. Free CDN.
작은 사이즈, 높은 향상성, 무료 CDN(Content Delivery Network)

The UI part of this library weighs 4.45 Kb. This is possible with good programming habits and compressed files
이 라이브러리에서 UI부분은 4.45Kb밖에 안된다.
이 것은 좋은 프로그램습관과 압축형 파일이라 가능하다.

You can pick your own selection of tools from the download page or you can load the most common combinations directly from a free Content Delivery Network (CDN). 당신은 다운로드 페이지에서 툴의 선택사항을 스스로 선택할 수 있고, 또는 무료CDN으로 부터 직접 최상의 조합으로 이루어진 라이브러리를 로드할 수 있다.

The CDN is configured with the proper expire headers and compression settings so that the file loads fast. This CDN can be used in production environments without any charge.
그 CDN은 적절할게 만료되는 헤더와 압축된 설정으로 구성되어 있다, 그래서 그 파일은 빠르게 로드 된다. 이 CDN은 어떠한 사용료도 없이 개발환경에 사용될 수 있다

For beginners 초보자를 위해

A large demo area lets you copy & paste working code directly into your pages.
방대한 데모들은 당신의 작성페이지에 동작되는 코드를 Copy & paste만으로 사용될 수 있다.

From each demo there is a minimal version without redundant HTML, CSS or JavaScript. You can use them as templates and fine tune them to your requirements. They provide a quick way to get started. You are also free to use and modify all the graphics you'll find.
각각의 데모에서는 많은 HTML,CSS,JavaScript 없이 최소한의 버전만 있다. 당신은 그 데모들을 템플릿으로 사용할 수 있고, 또는 개발 요구사항에 맞도록 커스터마이징 할 수 있는 것을 찾을 수 있다. 그 데모들은 시작하기에 빠른 방법을 제공한다. 당신은 또한 이 사이트에서 찾은 모든 그래픽자료를 사용하거나 수정하는데 무료로 이용할 수 있다.

For serious programmers
깊이있게 고민하는 개발자를 위해

Each tool does only what it is supposed to do and nothing else. Tools and not policy.
각각의 툴들은 (?) 제공한는 기능만 사용할 수 있지 그 밖의 기능은 할 수 없다. Tool일 뿐이지 정책이 아니다.

Understandable API design. Clean design patterns. Compact and human readable source code on Github. That's it. 이해할수 있는 API 디자인, 깔끔한 디자인 패턴.
Github상에서 적절하고 읽기 좋은 형태의 소스, 바로 이것이다.

Learn one tool and you also have learned the other tools. 하나의 툴을 배우면 다른 툴드 배운것이나 마찬가지다.

jQuery 자료 모음

(진우아범) — Wed, 04 Apr 2012 23:26:50 +0900

jMVC에 대한 슬라이드 자료 : (~ING)
http://addyosmani.com/toolsforjqueryapparchitecture/

jQuery용 UI 플러그 인 :
http://jquerytools.org/documentation/ (영문 원본)
http://webdev-nekodama.xii.jp/jquerytools/ (일본어)

jQuery 플러그인 모음 :
http://cafe.naver.com/eitfree.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=603&

아이폰 웹앱 개발시 주의점 [펌]

(진우아범) — Tue, 07 Feb 2012 15:08:07 +0900

아이폰용 웹앱 개발 시 주의점에 대하여 잘 정리된 사이트가 있어서
펌 : <a href="http://trend21c.tistory.com/824">http://trend21c.tistory.com/824</a>

1. 아이폰용 css 적용하기

<pre>

<!--[if !IE]>--> 
<link  
   rel="stylesheet"  
   href="small-screen.css"  
   type="text/css"  
   media="only screen and (max-device-width: 480px)"  
/> 
<!--<![endif]-->

@media only screen and (max-device-width: 480px) { 
/* iPhone only CSS here */
 #test-block { 
   background: red; 
 } 
}

</pre>

아이폰은 max-device-width가 480px로 정의되어 있습니다.

위 두개의 코드는 이러한 값을 이용하여 아이폰용 css를 추가하는 방법입니다.

범용적인 스타일시트로 모바일 웹어플리케이션을 개발후

아이폰에서는 더 나은 UI를 만들기 위해 위와 같이 아이폰용 CSS를 추가함으로써

아이폰의 사파리브라우저로 접속하는 사용자들에게 다른 UI를 제공해줄수 있습니다.

2. 아이폰용 서버측 코드 실행하기

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser !== false){
    $browser = 'iphone';
  }
?>

<?php if($browser == 'iphone'){ ?>
  <title>Short iPhone only title</title>
<?php }else{ ?>
  <title>Regular title</title>
<?php } ?>

php의 경우 user-agent 값을 이용해서 서버측에서 아이폰을 위한 코드를 별도로 실행이 가능합니다.

3. viewport meta 태그

아이폰은 meta태그의 viewport를 이용해서 더 나은 UX를 제공해줄수 있습니다.

예를 들면 기기의

최대 가로크기를 정한다거나, 줌레벨을 정한다거나, 사용자 확대축소 방지 여부 등을 설정할 수 있습니다.

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=780" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
maximum-scale=1.0

width=device-width

이 값은 페이지를 기기의 width에 맞도록 출력합니다. 아이폰은 320*480의 세로보기 모드와 480*320의 가로보기 모드를 가지고 있습니다. width=780 과 같이 특정 값을 정의할 수도 있지만, 가로, 세로보기 모드에 최적화 시키기 위해서 width=device-width로 설정하는 경우 기기의 width값에 맞춰서 페이지를 보여줍니다.

initial-scale=1.0

이것은 페이지가 로딩될때 확대비율을 정할수 있습니다. 값이 커질 수록 확대 비율된 모습으로 페이지가 나타납니다.

maximum-scale=1.0

허용가능한 확대비율의 최대치를 설정합니다.

user-scalable=0

사용자의 확대보기를 허용할지 여부를 설정합니다. 값은 0(허용하지 않음), 1(확대보기 허용함) 입니다.

위의 두개의 예시화면처럼

viewport를 width=device-width 로 설정한 경우에는

페이지의 가로길이를 기기에 맞춰서 페이지를 보여주지만

설정이 되어있지 않은 경우

사파리브라우저는 마치 자신이 데스크탑브라우저인양

페이지를 넓게 인식하여 보여줍니다.

4. 툴바 숨기기

window.addEventListener('load', function(){
  setTimeout(scrollTo, 0, 0, 1);
}, false);

위 스크립트를 사용하면 사파리브라우저의

주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.

툴바가 사라지는 것이 아니라

스크립트를 통하여 스크롤을 아래로 내려

툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.

이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때

툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.

그리고 보기에도 확연히 넓어보이는 것을 느낄수 있습니다.

간혹 페이지 콘텐츠 길이가 너무 짧아서 스크롤할 내용이 없을때

이 스크립트는 우리가 원하는 기능을 수행하지 않을 수도 있습니다.

그리고 페이지 콘텐츠 길이가 스크롤을 내리기에 어정쩡한 길이라면

툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우도 있습니다.

위의 캡쳐 사진이 그 예입니다.

콘텐츠 길이가 어정쩡해 툴바가 가려질 만큼 스크롤바가 내려가지 않아

툴바가 절반만 가려진 모습입니다.

이런문제를 해결하기 위해서는 높이값을 최대사이즈로 지정하여

페이지가 스크롤될 수 있게 할 수 있습니다.

<meta name="viewport" content="height=device-height,width=device-width" />

viewport를 이용해 height=device-height 를 설정하면

height가 기기의 height값이 되도록 설정되기 때문에 콘텐츠 길이가 짧더라도

페이지 최초 로딩 후 툴바가 보이지 않게 됩니다.

5. 기울기변화 감지하기

window.onorientationchange = function() {
  alert(window.orientation); 
}

0 : 일반적인 세로 화면(홈 버튼이 아래에 있음)
-90 : 시계 방향으로 회전된 가로 화면(홈 버튼이 좌측에 있음)
90 : 시계 반대 방향으로 회전된 가로 화면(홈 버튼이 우측에 있음)
180 : 180도 뒤집힌 화면(홈 버튼이 위에 있음)

가로보기 모드와 세로보기 모드에서 다른 UI를 제공하려는 경우

이 이벤트를 동해서 특정 스크립트를 실행할 수 있습니다.

보기 모드에 따라 다른 UI를 제공한다거나 하는 특별한 이유가 없다면

viewport에서 <meta name="viewport" content="width=device-width" />를 설정함으로써

width가 보기 모드에 따라 자동 조절되기 때문에 걱정할 것이 없습니다.

6. 라운드박스, 라운드버튼

.box {  
   -webkit-border-radius: 5px;  /* safari */
   -moz-border-radius: 5px;  /* firefox */
   background: #ddd;  
   border: 1px solid #aaa;  
}

사파리 브라우저에서는 사파리브라우저의 css 속성을 이용하여

쉽게 라운드박스, 라운드 버튼을 구현할 수 있습니다.

7. 터치 이벤트

touchstart
touchend
touchmove
touchcancel (시스템이 터치한 것을 취소하는 경우)

위의 것들은 터치관련 이벤트 입니다.

이벤트 발생시 event객체를 전달 받는데 다음과 같은 프로퍼티가 존재합니다.

touches : 복수로 화면에 터치되는 각 손가락들에 대한 터치 이벤트 모음들. 이 객체들은 페이지에 터치되는 좌표들의 값을 가지고 있습니다.
targetTouches : 터치할 때 발생합니다. 그러나 전체 페이지가 아닌 타깃 요소에만 반응합니다.

8. 제스쳐

gesturestart
gestureend
gesturechange

제스처 관련 이벤트 입니다.

event 객체를 전달받으며 다음과 같은 프로퍼티가 존재합니다.

event.scale : 확대비율 값입니다. 값 1은 확대축소가 되지 않은 기본 상태 입니다. 값이 1보다 작을 때는 줌-아웃이며 줌-인일때는 1보다 값이 큽니다.
event.rotate - 회전 각도입니다.

9. 특수링크

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

아이폰은 통화 또는 SMS 보내기를 실행할수 있는 특수 링크가 있습니다.

'tel:번호'로 이루어진 링크는 전화연결이 되며
'sms:번호'로 이루어진 링크는 sms가 연결됩니다.

이외에도

아이튠즈 스토어 링크는 아이튠즈와 연결됩니다.

구글맵 링크는 지도 애플리케이션과 연결됩니다.

유튜브 링크는 유튜브 애플리케이션과 연결됩니다.

이메일 주소 링크는 메일 애플리케이션에 연결됩니다.

10. 홈아이콘

사파리 브라우저를 이용하여 웹서핑을 하면서 하단에 + 탭을 클릭하면

현재 페이지를 책갈피(북마크, 즐겨찾기) 추가하거나

홈화면에 추가할 수가 있습니다.

여기서 말하는 홈화면에 추가란

아이폰의 바탕화면에 아이콘이 생성되어 웹페이지로 빠르게 연결할 수 있는 것을 말합니다.

<link rel="apple-touch-icon" href="http://www.example.com/iphone_home_icon.png" />

이 코드를 넣으면 여기에 설정된 이미지 파일이 홈아이콘으로 설정됩니다.

홈아이콘은 57*57의 png파일로 만드는 것이 좋습니다.

아이폰에서 자동적으로 볼록 튀어나와보이는 듯한 효과와 아이콘의 라운딩처리를 하기때문에

홈아이콘은 정사각형의 모양으로 만드셔도 됩니다.

홈아이콘이 설정되어있지 않을 경우

해당 웹페이지의 썸네일화면이 홈아이콘으로 설정됩니다.

11. 디버깅

console.log('Something');
console.error('Oops');
console.warning('Beware!');

위의 코드를 실행하였을 경우 아이폰 사파리 브라우저의 콘솔디버그 도구는 다음과 같은 메시지를 표시합니다.

디버깅용으로 사용되는 함수들입니다.

아이폰 사파리브라우저에서 콘솔디버그 도구를 사용하는 방법은

제가 지난번에 쓴 포스팅에 자세히 나와있습니다.

스마트폰 시장이 발달하고 무선인터넷이 보편화되고, 네트워크이용요금이 점점 낮아지고 있습니다.

스마트폰 시장에서는 저마다의 독자적인 플랫폼들이 속속 자신의 영역을 넓히려 하고 있습니다.

특정기기에 최적화된 어플리케이션은 만드는 것은

사용자경험을 극대화한다는 점에서 좋으나

안드로이드용, 아이폰용, 윈도모바일용 등 플랫폼별로 어플리케이션을 개발해야하는 비용이 뒤따릅니다.

반면 어떠한 플랫폼이든 웹브라우저가 있기때문에

웹어플리케이션은 많은 비용을 절감하면서

스마트폰 사용자들의 기대를 충족시켜줄수 있습니다.

아이폰용 웹어플리케이션을 개발하려고 하신다면 위의 사항을 꼭 알아두시면

개발에 많은 도움이 되실겁니다.

putty 색상 설정

(진우아범) — Thu, 22 Sep 2011 09:33:29 +0900

putty를 사용할 경우 바탕을 검은색으로 설정하였을 경우
디렉토리가 파란색이라 제대로 보이지 않는다 이럴 경우의 설정은

1. putty로그인
2. vi .bashrc
3. 제일 하단에 다음 라인 추가
LC_COLORS="di=01;31" 추가

4. 로그 아웃 후 다시 로그인

매우 간단하다.

e-Book제작 laker framework 자체 메뉴얼

(진우아범) — Mon, 29 Aug 2011 16:29:36 +0900

e-Book제작 laker framework 자체 메뉴얼 자체 메뉴얼 주소 : http://www.jinwoo.info/other/laker.html eBook Framework 참고 사이트 : http://bakerframework.com/ Framework 참조 사이트 : http://www.lakercompendium.com/

진우의 세상살이

jquery plugin site

jQuery tools User's Guide - jQuery tools basics (III) - ING

The role of CSS

Default CSS files

jQuery tools User's Guide - jQuery tools basics (II) - ING

The role of HTML HTML 규칙

The role of JavaScript and jQueryJavaScript 와 jQuery의 역할

Execute your scripts when the document is readydocument가 준비되었을 때 ( ready() ) 이 스크립트를 실행해라.

jQuery tools User's Guide - introduction to jQuery tools ( III )

Browser Support 지원 브라우져

jQuery Tools and FlowplayerjQuery Tools 와 Flowplayer

jQuery tools User's Guide - introduction to jQuery tools ( II )

Understanding jQuery Tools의 이해

jQuery tools User's Guide - introduction to jQuery tools ( I )

jQuery tools 에 대한 소개

Essential tools for modern websites현재적인 웹사이트를 위한 필수 툴

Small size. High performance. Free CDN.작은 사이즈, 높은 향상성, 무료 CDN(Content Delivery Network)

For beginners 초보자를 위해

For serious programmers깊이있게 고민하는 개발자를 위해

jQuery 자료 모음

아이폰 웹앱 개발시 주의점 [펌]

putty 색상 설정

e-Book제작 laker framework 자체 메뉴얼

The role of JavaScript and jQuery
JavaScript 와 jQuery의 역할

Execute your scripts when the document is ready
document가 준비되었을 때 ( ready() ) 이 스크립트를 실행해라.

jQuery Tools and Flowplayer
jQuery Tools 와 Flowplayer

Essential tools for modern websites
현재적인 웹사이트를 위한 필수 툴

Small size. High performance. Free CDN.
작은 사이즈, 높은 향상성, 무료 CDN(Content Delivery Network)

For serious programmers
깊이있게 고민하는 개발자를 위해