From Design pattern
Jump to: navigation, search
(→‎How to Use)
(→‎Instructions)
 
(112 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
Ixpatterns.com 은 Mediawiki 를 이용하여 제작되어 있습니다.
+
How to use 에서는 직접 사례나 패턴을 등록/수정하고, 패턴을 제작할 수 있는 세가지 방법을 설명한다.
  
−
Mediawiki 는 Wiki 재단에서 개발한 라이브러리 사이트 제작 엔진으로 다양한 사용자들이 함께 사이트에 자신의 의견과 정보를 더할 수 있습니다. 이 페이지에서는 작성되어져 있는 글을 수정하거나 새로운 페이지를 만들기 위한 방법을 소개합니다.
+
* [[#How to modify pattern page|How to modify pattern page]]: 기존 패턴 페이지를 수정하고 보완하는 방법을 설명한다.
 +
* [[#How to add new example|How to add new example]]: 새로운 사례를 추가하는 방법을 설명한다.
 +
* [[#How to add new pattern|How to add new pattern]]: 새로운 패턴을 추가하는 방법을 설명한다.
 +
----
 +
== How to modify pattern page ==
 +
IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다.
  
−
== 작성되어져 있는 패턴 페이지를 수정하는 방법 ==
+
=== Instructions ===
−
=== Use When ===
+
# 계정을 생성하여 로그인한다.
−
# 다른 사용자가 작성해 놓은 페이지에 잘못된 부분이 있을 때 페이지를 수정할 수 있습니다.
+
# 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다.
−
# 보다 최근 자료가 있거나 기존에 작성되어 있는 자료보다 더 좋은 자료가 있다면 페이지를 수정하여 자료를 최신화 할 수 있습니다.
+
# 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다.
−
# 기존에 작성되어 있는 페이지에 자신이 가지고 있는 사례를 추가하고자 할 때 사용됩니다.
+
# 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다.
  
−
=== How to Use ===
+
 
−
# 계정을 생성하여 로그인합니다.
+
[[File:how_to_edit.png|665px]]
−
# 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누릅니다.
+
----
−
# 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누릅니다.
+
== How to add new example ==
−
[[File:Edit_Wiki.png|665px]]
+
IxPatterns.com에 정의된 패턴 페이지에 자신이 수집한 최신의 흥미로운 사례를 추가할 수 있다.
−
* 잘못된 내용을 수정하고 싶은 경우 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누릅니다.
+
 
−
* 자료를 최신화 하거나 사례를 추가하고자 할 경우 Ixpatterns.com 에서 권장하는 wiki 언어 규정을 확인하여 내용을 작성한뒤 Save Page 버튼을 누릅니다. (wiki 언어는 Mediawiki에서 일반사용자들이 보다 쉽게 라이브러리를 구축하기 위해 만든 언어입니다)
+
=== Instructions ===
 +
# 계정을 생성하여 로그인한다.
 +
# Header 에 위치한 Edit 버튼을 누른다.
 +
# 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다.
 +
# 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다.
 +
 
 +
* Wiki grammar guideline
 
   <nowiki>
 
   <nowiki>
−
=== 사례 이름 (사례의 출처개념으로 작성해주세요) ===
+
=== 사례 이름 (사례 출처를 기술한다) ===
−
* 사례에 대한 설명을 작성해 주세요
+
* 사례에 대한 설명을 간략하게 작성한다.
 
[[File:파일이름.확장자|665px]]
 
[[File:파일이름.확장자|665px]]
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
−
{{#Widget:Vimeo|id=36790650|width=665|height=374|start=14s}}
+
 
 
</nowiki>
 
</nowiki>
  
−
=== Image & Video Upload ===
 
−
Ixpatterns.com 은 다양한 인터페이스와 인터랙션에 대한 사례들이 모여진 라이브러리 입니다. ixpatterns.com 을 방문한 사람이라면 누구든지 자신이 가지고 있는 이미지자료나 영상 자료를 공유할 수 있습니다. 단, 영상의 경우 youtube, vimeo 등에 업로드된 자료를 링크해 주시면 감사하겠습니다.
 
−
==== How to Image Upload ====
 
−
아래 방법은 Mediawiki 에 익숙하지 않은 사용자를 위한 가이드입니다.
 
−
==== How to Video Upload ====
 
  
 +
[[File:grammar_sample.png|665px]]
 +
 +
=== Instructions for image & video upload ===
 +
IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 YouTube, Vimeo 등에 업로드된 자료를 링크하여 추가하는 것을 권장한다.
 +
 +
* How to Upload Image
 +
<nowiki>
 +
 +
1. [[File:파일이름.확장자|665px]] 을 복사하여 이미지를 넣고 싶은 곳에 붙여넣는다.
 +
2. Save Page 를 눌러 글을 저장한다.
 +
3. 링크된 Upload File 페이지에서 이미지를 등록한다.
 +
4. 페이지에 이미지가 등록되었는지 확인한다.
 +
</nowiki>
 +
[[File:image_up_01.png|300px]]  [[File:image_up_02.png|300px]]
 +
 +
* How to Upload Video
 +
<nowiki>
 +
 +
1. iPhone
 +
아이폰은 기본적으로 아이폰5 의 화면비율을 따른다.
 +
아이폰 4, 4s로 촬영된 영상은 width 를 기준으로 height 를 조정한다.
 +
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=300}}
 +
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=533}}
 +
 +
2. ipad
 +
아이패드는 기본적으로 아이폰의 width 기준을 따른다.
 +
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}}
 +
- 세로 : {{#Widget:Vimeo|id=########|width=395|height=533}}
 +
 +
3. Android
 +
안드로이드 촬영 영상의 경우 ios 와 달리 화면비율이 기기에 따라 다르다.
 +
때문에 안드로이드 촬영 영상은 아이폰의 width 기준을 따라 촬영된 영상에 맞춰 height 를 조정한다.
 +
아래는 갤럭시 3의 화면비율이다.
 +
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=303}}
 +
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=528}}
 +
 +
4. 촬영한 영상, 링크한 영상
 +
ix Patterns.com 은 기본적으로 YouTube와 Vimeo 영상링크를 권장한다.
 +
Vimeo의 경우 모든 영상 인코딩이 16:9 비율이지만,
 +
YouTube의 경우 오래된 영상들 중 일부가 6:4 비율을 가지고 있다.
 +
이러한 부분을 확인하여 아래 소스를 사용한다.
 +
- Vimeo : {{#Widget:Vimeo|id=########|width=665|height=374}}
 +
- YouTube
 +
  * 16:9 비율 : {{#Widget:Youtube|id=########|width=665|height=374}}
 +
  * 6:4 비율 : {{#Widget:Youtube|id=########|width=665|height=443}}
 +
</nowiki>
 +
----
 +
 +
== How to add new pattern ==
 +
IxPatterns.com을 사용하는 사람은 누구나 자신이 생각하는 인터랙션 패턴을 추가할 수 있다. 9개의 카테고리로 구성되는 IxPatterns.com은 각각 다음과 같은 기준으로 패턴을 구분한다.
 +
 +
각각의 대분류는 유사한 패턴끼리 중분류를 이루며 사용자가 등록하는 패턴은 중분류 카테고리안에 존재한다.
 +
 +
* Dealing With Data : 데이터를 검색, 수정, 저장, 변환하는 태스크에 관련된 패턴
 +
* Getting Input : 명령을 실행하거나 내용을 입력하는 태스크에 관련된 패턴
 +
* Navigation : 다른 화면으로 이동하거나 정보를 빨리 찾아가도록 도와주는 패턴
 +
* Notifications : 시스템의 상태 또는 수행해야 할 사항에 대하여 알려주는 패턴
 +
* Screen Interaction : 입력 행동에 따라 화면 이미지 또는 개체가 움직이거나 변화하는 패턴
 +
* Manipulation : 시스템을 직접 또는 매개체를 통하여 독특한 방식으로 조작하는 패턴
 +
* Voice & Bio Interaction : 목소리나 생체 정보를 통해 시스템을 조작하거나 반응하는 패턴
 +
* Mixed Reality : 현실 세계와 가상 세계를 결합하는 다양한 방식을 보여주는 패턴
 +
* Context Recognition : 사람, 기기, 환경 요소 간 정보 인식에 기반한 인터랙션 패턴
 +
 +
 +
 +
=== Instructions ===
 +
# 계정을 생성하여 로그인한다.
 +
# URL 의 마지막 부분에 '/패턴명' 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다)
 +
# Edit Page 를 눌러 글을 작성한다.
 +
# 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다.
 +
 +
 +
<nowiki>
 +
패턴설명을 적는다.
 +
== with this pattern, we can solve ==
 +
패턴을 통해 해결할 수 있는 문제들이 무엇인지에 대하여 적는다.
 +
== Example ==
 +
Image를 등록한다(위의 How to Upload Image 참조).
 
----
 
----
 +
=== 사레 이름 ===
 +
* 사례설명을 작성한다.
 +
Image 또는 Video 를 등록한다(위의 How to Upload Video 참조).
 +
[[category:중분류 카테고리명]] </nowiki>

Latest revision as of 19:04, 21 July 2014

How to use 에서는 직접 사례나 패턴을 등록/수정하고, 패턴을 제작할 수 있는 세가지 방법을 설명한다.

How to modify pattern page

IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다.

Instructions

  1. 계정을 생성하여 로그인한다.
  2. 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다.
  3. 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다.
  4. 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다.


How to edit.png

How to add new example

IxPatterns.com에 정의된 패턴 페이지에 자신이 수집한 최신의 흥미로운 사례를 추가할 수 있다.

Instructions

  1. 계정을 생성하여 로그인한다.
  2. Header 에 위치한 Edit 버튼을 누른다.
  3. 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다.
  4. 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다.
  • Wiki grammar guideline 
 
=== 사례 이름 (사례 출처를 기술한다) ===
* 사례에 대한 설명을 간략하게 작성한다.
[[File:파일이름.확장자|665px]]
{{#Widget:Vimeo|id=36790650|width=665|height=374}}


Grammar sample.png

Instructions for image & video upload

IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 YouTube, Vimeo 등에 업로드된 자료를 링크하여 추가하는 것을 권장한다.

  • How to Upload Image 

1. [[File:파일이름.확장자|665px]] 을 복사하여 이미지를 넣고 싶은 곳에 붙여넣는다.
2. Save Page 를 눌러 글을 저장한다.
3. 링크된 Upload File 페이지에서 이미지를 등록한다.
4. 페이지에 이미지가 등록되었는지 확인한다.

Image up 01.png  Image up 02.png
  • How to Upload Video 

1. iPhone
아이폰은 기본적으로 아이폰5 의 화면비율을 따른다.
아이폰 4, 4s로 촬영된 영상은 width 를 기준으로 height 를 조정한다.
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=300}}
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=533}}

2. ipad
아이패드는 기본적으로 아이폰의 width 기준을 따른다.
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}}
- 세로 : {{#Widget:Vimeo|id=########|width=395|height=533}}

3. Android
안드로이드 촬영 영상의 경우 ios 와 달리 화면비율이 기기에 따라 다르다.
때문에 안드로이드 촬영 영상은 아이폰의 width 기준을 따라 촬영된 영상에 맞춰 height 를 조정한다.
아래는 갤럭시 3의 화면비율이다.
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=303}}
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=528}}

4. 촬영한 영상, 링크한 영상
ix Patterns.com 은 기본적으로 YouTube와 Vimeo 영상링크를 권장한다.
Vimeo의 경우 모든 영상 인코딩이 16:9 비율이지만, 
YouTube의 경우 오래된 영상들 중 일부가 6:4 비율을 가지고 있다.
이러한 부분을 확인하여 아래 소스를 사용한다.
- Vimeo : {{#Widget:Vimeo|id=########|width=665|height=374}}
- YouTube
  * 16:9 비율 : {{#Widget:Youtube|id=########|width=665|height=374}}
  * 6:4 비율 : {{#Widget:Youtube|id=########|width=665|height=443}}

How to add new pattern

IxPatterns.com을 사용하는 사람은 누구나 자신이 생각하는 인터랙션 패턴을 추가할 수 있다. 9개의 카테고리로 구성되는 IxPatterns.com은 각각 다음과 같은 기준으로 패턴을 구분한다.

각각의 대분류는 유사한 패턴끼리 중분류를 이루며 사용자가 등록하는 패턴은 중분류 카테고리안에 존재한다.

  • Dealing With Data : 데이터를 검색, 수정, 저장, 변환하는 태스크에 관련된 패턴
  • Getting Input : 명령을 실행하거나 내용을 입력하는 태스크에 관련된 패턴
  • Navigation : 다른 화면으로 이동하거나 정보를 빨리 찾아가도록 도와주는 패턴
  • Notifications : 시스템의 상태 또는 수행해야 할 사항에 대하여 알려주는 패턴
  • Screen Interaction : 입력 행동에 따라 화면 이미지 또는 개체가 움직이거나 변화하는 패턴
  • Manipulation : 시스템을 직접 또는 매개체를 통하여 독특한 방식으로 조작하는 패턴
  • Voice & Bio Interaction : 목소리나 생체 정보를 통해 시스템을 조작하거나 반응하는 패턴
  • Mixed Reality : 현실 세계와 가상 세계를 결합하는 다양한 방식을 보여주는 패턴
  • Context Recognition : 사람, 기기, 환경 요소 간 정보 인식에 기반한 인터랙션 패턴


Instructions

  1. 계정을 생성하여 로그인한다.
  2. URL 의 마지막 부분에 '/패턴명' 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다)
  3. Edit Page 를 눌러 글을 작성한다.
  4. 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다. 


패턴설명을 적는다.
== with this pattern, we can solve ==
패턴을 통해 해결할 수 있는 문제들이 무엇인지에 대하여 적는다.
== Example ==
Image를 등록한다(위의 How to Upload Image 참조).
----
=== 사레 이름 ===
* 사례설명을 작성한다.
Image 또는 Video 를 등록한다(위의 How to Upload Video 참조).
[[category:중분류 카테고리명]]
Retrieved from "http://www.ixpatterns.com/index.php?title=How_to_use&oldid=108874"