SyntaxHighlighter 입니다. 기존에 EYE 님께서 만드신 버젼도 있지만 전 개인적으로 Alex Gorbatchev가 만든 기능이 더 맘에 들어서 제작해보았습니다. 기존에 시작할때에는 단순하게 EYE 님께서 만드신 스크립트를 Alex Gorbatchev의 것으로 바꾸는 것만 생각했었지만 그렇게 되면 단순히 플러그인을 베끼는 느낌이 들 것 같아서 환경설정 기능까지 포함해서 완전히 새롭게 제작했습니다. Based on eye plugin 이라고 적긴 했지만 ^^;; 일단 eye 님의 플러그인이 모토가 되었기에 감사하는 마음으로 함께 적습니다.

Manuz_SyntaxHighlighter.zip

플러그인 다운로드 2009.04.22 최신버젼

추가 수정사항 리스트 입니다.

  • 2009.04.22 [code] 추출 패턴 변경
  • 2009.04.22 toolbar 사용여부 작동안하던 부분 수정
  • 2009.04.22 Core.css 의 font-size !important 속성 제거 (font-size 설정이 작동하지 않아서 수정함

/*** SYNTAX HIGHLIGHTER using SyntaxHighlighter (http://alexgorbatchev.com/wiki/SyntaxHighlighter)
*
* version: 1.0
* Syntax Highlighter version: 2.0.296
*
* usage : [code:js
]...[/code]
* usage : [code:bash]...[/code]

* usage : [code:cpp]...[/code]
* usage : [code:php]...[/code]
* ... anything if you want  :)
*
* available class list :
*  Type    : class name
*  ------------------------------------------------
*  Bash/shell  : bash, shell
*  C#     : c-sharp, csharp
*  C++    : cpp, c
*  CSS     : css
*  Delphi    : delphi, pas, pascal
*  Diff     : diff, patch
*  Groovy   : groovy
*  JavaScript : js, jscript, javascript
*  Java    : java
*  Perl     : perl, pl
*  PHP     : php
*  Plain    : Text  plain, text
*  Python   : py, python
*  Ruby    : rails, ror, ruby
*  Scala    : scala
*  SQL     : sql
*  Visual Basic : vb, vbnet
*  XML     : xml, xhtml, xslt, html, xhtml
*
* made by manu(
http://manuz.com)
* based on eye(
http://theeye.pe.kr)'s plugin. THX :D
*/


아래는 실제 동작 화면입니다.

 $_SERVER['HTTP_HOST'], 'fullpath' => str_replace('index.php', '', $_SERVER["REQUEST_URI"]), 'position' => $_SERVER["SCRIPT_NAME"], 'root' => rtrim(str_replace('rewrite.php', '', $_SERVER["SCRIPT_NAME"]), 'index.php') ); ?>

간단히 몇가지 샘플과 스크린샷도 아래에 함께 올려봅니다.

사용자 삽입 이미지

Default 테마


사용자 삽입 이미지

Django 테마



사용자 삽입 이미지

Emacs 테마


사용자 삽입 이미지

FadeToGrey 테마


사용자 삽입 이미지

Midnight 테마


사용자 삽입 이미지

RDark 테마


사용자 삽입 이미지

구문강조 플러그인 환경설정 화면입니다.

ps. 다 만들어 놓고 여기저기서 검색을 해보니 제가 만든것과 비슷한 기능을 하는게 상당히 많이 존재하네요.. -_-; 점심먹고 시간을 다 보내버렸는데.. 괜히 했을까요~? 혼자 만족해야 할 것 같습니다.. -_ㅠ

2009/04/21 16:58 2009/04/21 16:58
Posted by 마누
JavaScript 를 이용해서 특정 페이지의 컨텐츠 부분만을 인쇄하는 기능을 만들게 되었다.
새창을 띄워서 하는 방법만을 고수해오다 새창을 띄우지 않고 현재 페이지의 내용만을 인쇄 하고 싶어서 한번 만들어 보았는데 너무 복잡해져버린 것 같다 ㅎ

사용자 삽입 이미지
CSS 에서 Print 기능을 사용하여 하는 방법도 있긴 하지만 스크립트로 해보고자. -_-;;
스크립트로 구현해보았다. 해보고나서 드는 생각은 CSS 로 하는 것이 가장 좋은것 같다는 생각이다.
아주 간단하게 구현이 가능하리라 본다. (CSS 로 한다면..)

새로 개편된 함평군청 홈페이지에 제작한 스크립트를 적용해보았는데 나름 잘 되는 것 같다.
브라우저 호환성은 IE6 과 IE7 에 두었다.

우측의 이미지는 현재 함평군청 홈페이지의 모습이다. 빨간색으로 되어있는 부분만 인쇄하고자 만들게 된 스크립트 이다. 원래 CSS 로 하게되면 Header와 Footer SideBar 부분을 display:none 속성을 주어서 해결하면 된다. 그리고 위와 같이 선언한 내용을
이렇게 불러서 사용하게 되면 프린트 할때만 사용하게 된다. 파일을 따로 분리하고 싶지 않다면 @media print { } 안에 넣어서 사용할 수도 있다. 파일의 갯수가 많아지게 되면 request count 가 너무 많아져서 홈페이지가 느려지게 되는 경향이 있으므로 합치는 것도 좋은 방법이 되리라 본다.

각설하고 내가 생각한 방법에 대해서 적어본다.
  1. 사용자에게 보이지 않는 숨겨진 IFRAME 을 생성한다.
  2. 프린트 버튼을 클릭하게 되면 프린트 영역으로 설정된 곳의 내용을 모두 읽어서 IFRAME 으로 밀어넣는다
  3. 숨겨져 있는 IFRAME 만을 인쇄한다.
위 방법으로 진행하던중 몇가지 문제 점이 발생했다
  • 첫번째 IFRAME 을 숨기면서 사용했던 Display:none 속성때문에 접근에 권한 문제가 발생한다는 것
  • Inline 으로 작성한 스타일이 아닌 <link 로 스타일을 선언한 경우 디자인이 전혀 없는 상태로 인쇄되는 것
  • 숨겨진 IFRAME 으로 내용을 보낼 때 개체를 찾지 못하는 경우가 있다는 것
  • 숨겨진 IFRAME 안에 내용을 집어넣을때 읽어오지 못하는 경우가 있다는 것
  • IE6 과 IE7 간의 인쇄된 사이즈가 틀리게 보인다는 것

위에 발생한 문제점들을 모두 해결한후에 나온 소스가 아래에 있다.

 /* 페이지 인쇄 기능 (개발 : 김형원 2009.04.13) */
function lf_printIframe() {
	if (document.getElementById("PrintAreaDiv") != null) {
		var sHTML = document.getElementById("PrintAreaDiv").innerHTML;
	} else {
		window.print();
		return;
	}
	var linkCount = document.getElementsByTagName("link").length;
	var styleLink;
	for(i=0;i < linkCount;i++) {
		styleLink = hiddenFrame.document.createElement('link');
		styleLink.type = "text/css";
		styleLink.rel = "stylesheet";
		styleLink.href = document.getElementsByTagName("link")[i].href;
		hiddenFrame.document.appendChild(styleLink);
	}
	hiddenFrame.location.href="/_modules/print/printPage.php";
	var Div = hiddenFrame.document.createElement('div');
	Div.style.width = "750px";
	Div.style.float = "left";
	Div.innerHTML = sHTML;
	if( navigator.appName.indexOf("Microsoft") > -1 ){
		if( navigator.appVersion.indexOf("MSIE 6") > -1){
			hiddenFrame.document.body.style.zoom='85%';
		}else if(navigator.appVersion.indexOf("MSIE 7") > -1){
			Div.style.margin = "0 0 0 20px";
			hiddenFrame.document.body.style.zoom='120%';
		}
	}
	hiddenFrame.document.appendChild(Div);
	hiddenFrame.focus();
	hiddenFrame.print();
}

printPage.php 의 소스는 아래와 같다.








 

페이지 인쇄


 

그리고 프린트할 페이지의 상단에

위의 내용만 넣어주고 프린트하기 위한 버튼에 lf_printIframe 함수만 호출해주면 잘 동작한다.

다 하고나서 드는 생각은 내가 삽질을 했구나 하는 생각뿐이다 그냥 CSS 로 할걸.. ㅋㅋ
그래도 한번 해봤으니 경험이다 라고 생각하고 넘어가련다.. ㅎㅎ

PS. 피드백 환영입니다. JS 나 HTML ,CSS 에 관해서는 이제 조금씩 배워가는 단계라서 ^^;;

2009/04/13 17:07 2009/04/13 17:07
Posted by 마누

Style [ IME-MODE]

 | WEB
2008/06/18 16:40

style="ime-mode:disabled"    (오직영문만)
style="ime-mode:active"        (한글기본설정 // 한영변경가능)
style="ime-mode:inactive"      (영문기본설정 // 한영변경가능)
style="ime-mode:auto"

auto 디폴트이며, IME가 첨부되어 있지 않다. 이는 ime-mode 애트리뷰트가 지정되지 않은 것과 같다.
active 모든 글자들이 IME를 통하여 입력되었다. 사용자는 IME를 불활성화 시킬 수 있다.
inactive 모든 글자들이 IME를 통하지 않고 입력되었다. 사용자는 IME를 활성화 시킬 수 있다.
disabled IME가 완전히 불활성화 되었다. 사용자는 IME를 활성화 시킬 수 없다.

2008/06/18 16:40 2008/06/18 16:40
Posted by 마누
태그

WorkManager Ver.2008

 | WEB
2008/04/01 10:20
WorkManager Ver.2008

일을 하다가 TO DO LIST 관리를 종이로 했더니
놓치는 것도 많고 체크도 제대로 되지 않는 듯하여
To Do List 관리를 위한 간단한 메모장 비슷한 프로그램을 짜 보았다.

우선순위를 설정하여 리스팅 순서를 설정할 수 있으며
다중 사용자를 지원하여 여러 사용자가 사용할 수 있도록 해 두었다.

추후 더 개발하여 배포해볼까 생각도 하고 있다.

사용자 삽입 이미지
2008/04/01 10:20 2008/04/01 10:20
Posted by 마누

개념적 디자인 2부

 | WEB
2006/10/17 14:01
아래의 글은 광주서광교회 홈페이지 제작회의를 위한 브리핑 자료입니다.
한 군데서 사용할 자료로는 아깝다는 생각이 들어 포스팅 합니다.
여기저기서 짜집기 하고 제 생각도 포함되어있는 글들이니
그냥 읽고 많은 피드백 주시길바랍니다 :)

페이지 스케치에 관한 내용입니다.

홈페이지의 페이지스케치는 크게 2가지로 나뉘는데
하나는 메인페이지 즉 홈페이지에 처음 들어갔을때 나오는 페이지
그리고 서브페이지 홈페이지에서 세부페이지를 열었을때 나오는 페이지
이렇게 메인과 서브로 구성됩니다.

메인페이지의 예를 들자면
  1. http://hanbitschool.net/ 한빛고등학교 메인페이지
  2. http://sanmaeul.org/ 산마을고등학교 메인페이지

서브페이지의 예를 들자면
  1. http://hanbitschool.net/sub_01_01.htm 한빛고등학교 서브페이지 (학교헌장)
  2. http://hanbitschool.net/community/zboar ··· ohanbitt 한빛고등학교 서브페이지 (사진으로 보는 한빛)
  3. http://sanmaeul.org/sub_01_01.htm 산마을고등학교 서브페이지 (교육이념)
  4. http://sanmaeul.org/bbs/zboard.php?id=notice 산마을고등학교 서브페이지 (공지사항)

메인페이지와 서브페이지의 개념적 디자인은 종이하나 펴고 펜하나 들고 머리만 조금 맞대면 금방 끝납니다
그 일을 하기 위해 조금 설명하자면

모든 페이지에는 메인 메뉴와 카피라잇 그리고 로고가 들어갑니다
그리고 메인 페이지에는 최근게시물 ( 글 또는 사진 ), 퀵메뉴, 배너, 아웃로그인, 하단메뉴, 최상단메뉴 등 많은 컨텐츠가 들어가고
서브 페이지에는 서브메뉴, 현재위치 알림, 그리고 메인 컨텐츠 ( 게시판, 컨텐츠, 어떤 폼 등 ) 이 들어간다.

사용자 삽입 이미지

<한빛고등학교 메인 컨텐츠 디자인 예>

사용자 삽입 이미지

<한빛고등학교 서브페이지 컨텐츠 디자인>

위의 배경 디자인이 아닌 빨간색 라인 즉, 페이지 스케치 라는 것은 홈페이지 각 페이지의 골격을 그리는 작업이다.
보통 서브페이지는 위와 비슷한 편이며 메인페이지는 디자인을 중시하고 중요한 부분을 부각시키는 편이 강하다.

http://www.freegine.com/new_down/down_l ··· p%3Bcpid=

위의 링크를 들어가면 많은 웹디자인들이 있다. 도용해선 안되지만 구조를 참고할수는 있을듯 싶음.

위와 같이 디자인을 하고나면 제작자에게 전해줄 모든 자료는 완성된다.
웹디자이너와 웹프로그래머가 위의 내용을 가지고 전체적인 틀을 만들고 그렇게해서 만들어진 프로토타입을 가지고 다시한번 미팅을 하게되며 수정작업을 거친후 세부적인 컨텐츠 내용을 넣게된다.

90% 이상 만들어진후에 전체적인 홈페이지를 놓고 한번더 미팅을 하여 전반적인 수정작업을 거친후 홈페이지 오픈을 하게된다.
2006/10/17 14:01 2006/10/17 14:01
Posted by 마누

개념적 디자인 1부

 | WEB
2006/10/17 13:50
아래의 글은 광주서광교회 홈페이지 제작회의를 위한 브리핑 자료입니다.
한 군데서 사용할 자료로는 아깝다는 생각이 들어 포스팅 합니다.
여기저기서 짜집기 하고 제 생각도 포함되어있는 글들이니
그냥 읽고 많은 피드백 주시길바랍니다 :)


본 글은 단지 예시일 뿐이며 서광교회 청년대학부 홈페이지의 계획안을 짜고 기획하는데 도움이 될 뿐입니다.
         
홈페이지의 개념적 디자인이라는 것은 크게 2가지로 구분되는데
하나는 홈페이지의 싸이트맵 즉 플립디자인입니다.
그리고 또 하나는 실제적인 디자인의 모델이 될 페이지 디자인입니다.

홈페이지 회의에 앞서 서로의 편한 이해를 위해 제가 만들었던 특정 홈페이지를 예로 들어 설명 하겠습니다.

1. 홈페이지 이름 : 한빛고등학교 http://hanbitschool.net
2. 홈페이지 방향 : 자연친화적이며 개방적인 모습의 홈페이지 진취적이며 새로운 모습을 추구.
3. 홈페이지 구성도 :
          굵은 글씨가 주 메뉴 그 밑의 - 로 되어있는 메뉴가 서브메뉴 입니다.
          홈페이지의 기본적인 구성은 2단계 플립메뉴를 초과하지 않도록 구상되었습니다.

         학교소개
         - 학교헌장 : 단순컨텐츠 페이지
         - 학교특색 : 단순컨텐츠 페이지
         - 학교연혁 : 단순컨텐츠 페이지
         - 학교이념 : 단순컨텐츠 페이지
         - 교직원소개 : 사진게시판 ( 교직원소개 ) 운영자권한
             ( 카테고리 : 교무실 , 행정실, 특성화교과, 생활관, 급식소 )
         - 사진으로 보는 한빛 : 사진게시판 ( 학교사진소개 ) 특정유저권한
             ( 카테고리 : 일반교과, 특성화, 행사활동, 한빛사계, 교사회, 동아리, 초청특강, FAQ. 체험학습, 한빛일상 )

         교육활동
         - 각종현황 : 일반게시판 ( 운영자권한 )
             ( 카테고리 : 학교실태, 교육과정, 특색교육, 특별활동, 특기적성, 정보화현황, 각종규정 )
         - 특성화교과 : 단순컨텐츠 페이지
         - 행사활동 : 단순컨텐츠 페이지
         - 동아리활동 : 단순컨텐츠 페이지

         학교소식
         - 공지사항 : 일반게시판 ( 운영자권한 )
         - 학사일정 : 스케쥴게시판 ( 운영자권한 )
         - 학교운영위원회 : 일반게시판 ( 특정회원권한 )
         - 1학년 : 일반게시판 ( 일반회원권한 )
         - 2학년 : 일반게시판 ( 일반회원권한 )
         - 3학년 : 일반게시판 ( 일반회원권한 )

         교직원전용 ( 특정회원 권한 ) invisible menu
         - 공지사항
         - 업무알림
         - 아이들이야기
         - 행정실
         - 식당
         - 운영위

         열린마당
         - 한빛인방  : 일반게시판 ( 일반회원권한 )
         - 사랑방 : 일반게시판 ( 일반회원권한 )
         - 사진자료실 : 사진게시판 ( 일반회원권한 )
         - 문서자료실 : 일반게시판 자료첨부기능 ( 일반회원권한 )
         - 인터넷시누대 : 웹진형게시판

         기타 메뉴
         - 회원가입 : 회원가입폼
         - 사이트맵 : 사이트맵
         - 이메일무단수집거부 : 이메일무단수집거부 팝업
         - 묻고답하기 : 일반게시판 ( 방문자권한 )
         - 학교위치 : 단순컨텐츠 페이지

* 위와 같이 전체적인 싸이트의 구성을 합니다.
앞의 1번 글에서 지금까지 광주서광교회 홈페이지 구성에서의 좋은점을 추리고
새로운 컨텐츠를 개발하여 홈페이지 구성을 하게됩니다.

큰 타이틀 메뉴의 갯수는 6개를 초과하지 않는 것이 좋으며 가장 좋은 갯수는 4~5 개입니다.
하위 메뉴의 갯수도 마찬가지 6개를 초과하지 않는것이 좋으며 너무 많으면 방문자에게 복잡함을 시사할뿐
도움이 되지 않는 경우가 많습니다.

각 메뉴의 구상을 마치게 되면
그 페이지를 단순컨텐츠 페이지 즉 그냥 글만 또는 이미지 만을 넣을 것인지
아니면 일반 게시판으로 구성할것인지
또는 사진 게시판으로 구성할것인지 에 대하여 결정합니다.

그리고 각 페이지의 접근 권한에 대해서도 설정합니다.
페이지를 볼수 있는 권한 또는 리스트를 열람할수 있는 권한 그리고 글을 쓰고 답변을 달수 있는 권한 등.

1부 끝 ( 2부에서는 페이지 디자인에 대해서 이야기 합니다. )
2006/10/17 13:50 2006/10/17 13:50
Posted by 마누

조사단계

 | WEB
2006/10/17 13:39
아래의 글은 광주서광교회 홈페이지 제작회의를 위한 브리핑 자료입니다.
한 군데서 사용할 자료로는 아깝다는 생각이 들어 포스팅 합니다.
여기저기서 짜집기 하고 제 생각도 포함되어있는 글들이니
그냥 읽고 많은 피드백 주시길바랍니다 :)

광주서광교회 청년대학부가 사용해왔던 홈페이지나 카페 및 클럽의 구조와 방향성을 조사해봄.

1. 광주서광교회 청년회 카페 (since 2003.09.30)
  사이트 주소 : http://cafe.daum.net/gjsggh
  회원수 : 251명 (2006년 10월 16일 현재)
  메뉴 구성도
     +-----------------------------
     + 정회원 신청란 : 정회원으로의 등급 올리는 신청을 위한 게시판
     + 발도장 : 메모장 (장문의 글이 아닌 간단하게 한줄씩 남길수 있는 게시판)
     + 자유게시판 : 일반게시판
     + 공지.광고판 : 공지를 위한 알림 게시판
     + 오늘의 말씀 : 주일 목사님 설교 내용 요약 게시판
     + 낙타무릎(기도게시판) : 중보기도를 부탁하는 게시판, 기도문을 올리는 게시판
     + 찬양의 창 : 함께 들을수 있는 찬양 올리는 게시판
     + 마음의 창 : 익명게시판
     + 목사님께 바란다 : 목사님께 건의사항
     + 말씀쓰기 릴레이 : 성경말씀을 릴레이로 타이핑 하여 올리는 게시판
     + 누군가 널 위하여~ (중보) : 지체들을 위한 중보 게시판
     +-----------------------------
     + 사진(그림)자료실 : 청년회 사진 자료
     +-----------------------------
     + 기본자료실 : 정체불명의 자료실
     + 찬양의 이해 : 찬양에 대한 자료?? 비 활성화
     +-----------------------------

  - 참고사항 : 현재 운영중이기는 하나 글이 올라오지 않고 운영되지 않고 있음.

2. 광주서광교회 대학부 카페 (since 2000.03.11)
  사이트 주소 : http://cafe.daum.net/sukwang
  회원수 : 521명 (2006년 10월 16일 현재)
  메뉴 구성도
     +-----------------------------
     + 주바라기 : 일반적인 자유게시판 ( 나눔의 글 등. )
     + 푯대광고 : 공지게시판
     + 푯대인의 기도방 : 중보기도 및 기도 요청방
     + 축하해줍시다 : 지체동정의 게시판
     + 찬양듣기 : 찬양게시판
     + 푯대인을 소개합니다 : 새신자 소개게시판
     + 제 고백 들어주실거죠 : 익명게시판
     + 등급신청란입니다 : 등급신청 게시판
     + 2004년 동계수련회 후기 : 말그대로 -_-;;
     +-----------------------------
     + 광주서광교회 카페 자료실 : 일반 자료실
     + 대학부 사진 앨범 : 사진 자료실
     +-----------------------------

  - 참고사항 : 홈페이지 개설로 인해 2004년 2월 28일자로 카페 폐쇄

3. 광주서광교회 대학부 홈페이지 (since 2004.02.28)
  사이트 주소 : http://ucsk.com (현재 폐쇄상태)
  회원수 : 약 150명 (기록이 남아있지 않음)
  메뉴 구성도
     +-----------------------------
     + 기록이 남아있질 않음..
     +-----------------------------

  - 참고사항 : 홈페이지운영 후에 유령회원들만 가득하여 홈페이지 조회수는 많으나 글이 올라오지 않아
                    조금씩 죽어감..... -_ -;; 현재는 도메인도 외국 전문 도메인업체에 넘어가버린 상태이며
                    호스팅 받은 서버는 현재 형원이가 개인돈으로 유지중 ( 현재 이 게시판의 서버가 그 서버임 )

4. 광주서광교회 대학부 클럽 (since 2005.05.14)
  사이트 주소 : http://ucsk.cyworld.com
  회원수 : 61명 (2006년 10월 16일 현재)
  메뉴 구성도
     +-----------------------------
     + 공지사항 : 공지사항 게시판
     + 주바라기 : 일반적인 자유게시판
     + 우리들의 추억 : 사진 게시판
     + 저기.. 실은.. : 익명 게시판
     + 끄적 끄적 : 오이까끼 게시판 ( 자신이 직접 그림을 그릴 수 있는 게시판 )
     + 자기소개하기 : 자기 소개 게시판
     +-----------------------------
     + 푯대자료실 : 대학부 주보였던 푯대 게시판
     + 기타자료실 : 잡다 자료실
     +-----------------------------
     + 찬양국게시판 : 찬양콘티 및 새로운 곡 게시판
     + 임역원게시판 : 임역원 전용 게시판
     +-----------------------------

   참고사항 : 잦은 홈페이지 및 카페 이동으로 인해 방문자가 현저히 줄고 가입자도 매우 적으며 현재 운영되지 않고 있슴.

=====================================================

다른 청년대학부의 홈페이지 구성도 벤치마킹
- 다른 홈페이지에 대한 벤치마킹은 홈페이지 링크와 특징만을 적겠음. ( 양이 너무 많아서 )

  1. 사랑의교회 청년부 http://yos.sarang.org/frameindex.asp
       - 특징 : 엄청난 지원을 통한 동영상 링크등..
       - 장점 : 다양한 컨텐츠?
       - 단점 : 너무 복잡한 싸이트 구성 ( 질릴정도 , 숨겨져 있는 메뉴를 찾는데 흥미를 붙이게 될수도 )
                  홈페이지에 한계를 느껴서 많은 청년부내 사역팀들이 각자의 클럽을 만들어서 외부에서 활동하는 것으로 파악됨

  2. 계속 이어서 적겠삼~~~ ㅋ
2006/10/17 13:39 2006/10/17 13:39
Posted by 마누
아래의 글은 광주서광교회 홈페이지 제작회의를 위한 브리핑 자료입니다.
한 군데서 사용할 자료로는 아깝다는 생각이 들어 포스팅 합니다.
여기저기서 짜집기 하고 제 생각도 포함되어있는 글들이니
그냥 읽고 많은 피드백 주시길바랍니다 :)

  1. 조사단계
    - 직접적인 클라이언트와의 만남을 통한 홈페이지 제작 방향 검토
    - 여타 싸이트의 벤치마킹
       ( 오래되고 알려져있는 싸이트의 경우는 매우 오래된 구조를 가지고 있는 경향이 많고 오래되지 않고 알려져 있지 않은 싸이트의 경우는 잘못된 구조나 문제점을 많이 가지고 있는 경향이 짙다. 하지만 위의 싸이트 들에 최신의 경향과 구조를 가지고 있을수 있는 가능성은 항상 존재하며, 참고로 할 필요성에 관하여서는 두말할 필요도 없다. 가장 좋은 방법의 벤치 마킹은 중상위권의 발전하고 있는 싸이트를 벤치마킹 하는 것이 가장 적절한 벤치마킹 방법이라 할 수 있다 )
    - 클라이언트의 희망사항과 목적등에 부합한 컨텐트 목록 비교 분석

  2. 개념적 디자인 단계
    - 화이트 보드, 플립차트를 이용하여 싸이트의 개념을 정리
    - 시나리오 작성
       ( 방문자가 싸이트를 어떻게 경험하며 사용하게 될지의 예상 시나리오 작성 )
       ( 각 시나리오에 장점과 단점 파악 및 적용 )
    - 싸이트가 나아가는 방향과 어떤 형태와 목적을 지니는지에 대한 토론
       ( 만든 직후부터 계속 이어질 홈페이지의 방향성에 대해서 토론 )
    - 구조적 페이지 모형
       ( 개념적인 디자인의 모형을 구상, 메인 페이지 밎 특정 페이지의 컨텐츠 구상 )
    - 디자인 스케치
    - 웹기반 프로토타입
       ( 컨텐츠와 엔진등 모든 프로세서를 제하고 구조와 네비게이션만을 가동하여 실제 웹 페이지의 형성 모형을 보고 작동을 확인함 )

  3. 제작 및 운영
    - 세부 구조 계획
       ( 세부적인 페이지의 내용을 구성 및 제작 )
    - 제작 및 검토 작업 병행 ( 작업현황을 클라이언트와 공유하면서 피드백 체크 )
    - 90% 이상 완료 후에 재미팅 마지막 수정 작업 ( 디자인 및 구성에 관한 )
    - 완료후 테스트 ( 사용자 인터페이스 및 각종 브라우저와 해상도 등에서 동일하고 문제 없이 보이는지에 대한 )
    - 자체 서버나 웹호스팅 업체에 업로드 및 싸이트 오픈
    - 요청에 따라 검색엔진에 싸이트 등록

---------------------------------------

위의 내용은 제가 홈페이지 제작을 할때 사용하는 단계입니다.

현재 우리 청년대학부에 맞는 제작을 하자면 조사단계에서 많은 조사가 필요할듯 싶습니다.
( 요청하건데 많은 홈페이지를 방문 하여보시고 벤치마킹을 해오실수 있다면 좋겠습니다 )

그리고 홈페이지의 개념적 디자인은 웹디자인 시안전문 홈페이지를 이용하는 것이 바람직하다고 판단됩니다
( 많이 알려진 싸이트로 www.freegine.co.kr 을 이용하면 좋을 것으로 판단됩니다.
프리진 홈페이지에서 웹디자인 부분을 보시고 대략적인 홈페이지의 구상을 해오시는 것도 도움이 되리라 봅니다 )

수요일 밤에 모일때 먼저 청년 대학부에서 지금까지 운영해온 카페와 클럽 등을 조사하여서 지금가지 운영해온 컨텐츠와 그리고 우리에게 필요한 컨텐츠를 함께 이야기 해보고 홈페이지의 플립챠트 구성이 우선될 것으로 생각합니다
( 빠르고 알찬 진행을 위해 -_-)b )
2006/10/17 13:17 2006/10/17 13:17
Posted by 마누
사용자 삽입 이미지

수정을 힘들어 하시는 분들이 많아서요.

메일로 수정해달라고 하시는 분들은 수정해 드렸습니다만..

수정하지 못해서 사용할수 없다고 하신분들이 많네요 ^^;;

여기 꼬리글달아 주시면 수정해서 메일로 보내드리던가 하겠습니다.

답글 달아주실때 사용하실 문구와 메일 주소 남겨주세요.

예)
앞문구 : MANUZ
뒷문구 : NET
메일주소 : manu@manuz.net
2004/06/03 15:40 2004/06/03 15:40
Posted by 마누
사용자 삽입 이미지

Manuz 스킨 7종 입니다.
색상은 Blue,Grey,DarkGrey,Orange,Red,Green,Purple 로 7가지 입니다.
기본 디자인은 http://neave.com 에서 가져왔습니다.
디자인은 Paul Neave 에게 저작권이 있습니다.

이 스킨은 WANKIM 님의 스킨과 Neave 의 디자인을 혼합시킨 스킨입니다.
저의 노력에 대해선 별로 언급하고 싶지 않습니다. 한게 없기에.. -_-;

단 배포는 저의 홈페이지에서만 하도록 합니다. 다른곳으로의 펌질은 별로 용납하고 싶지 않습니다.

사용시 유의사항

1. 스킨파일에 보시면 manuz.fla 파일이 있습니다. 이파일을 수정하시어 위의 manuz net 글씨를 고치시길 바랍니다. 글씨체도 배포합니다.

<다운로드>
플래쉬 소스 manuz.fla
사용 폰트 nordic.ttf


2. 스킨을 적용후 트리색상 변경을 해야 합니다.
스킨 색상에 따라 적용이 다르니 아래를 참조해주세요
모든 글씨색은 #333333
배경색은
BLUE : #D6E9FC
RED : #FFB6C0
GREEN : #DBEFC1
GREY : #E5E5E5
PURPLE : #EFD1F4
ORANGE : #FFDBBC
DARKGREY : #C1C1C1


3. 적용하시고 마누 블로그에 잡소리 한마디 남겨주시길.. ㅎㅎ 1번 2번은 안지켜도 3번은 지켜주세요 -_-)+

질문이나 피드백은 꼬리글로 합시다.. 아직 게시판이 없어요 ^^;;

스킨다운로드
BLUE
RED
GREEN
GREY
PURPLE
ORANGE
DARKGREY


스킨미리보기
BLUE
RED
GREEN
GREY
PURPLE
ORANGE
DARKGREY
2004/05/12 01:23 2004/05/12 01:23
Posted by 마누

행복합니다^^
요즘은 행복하다고 말하기 힘듭니다. 힘든건 힘든거니까요. 하지만 조만간 다시 웃을겁니다. 저에겐 웃고 행복한 모습이 제일 잘 어울리는 것 같거든요.

카테고리

전체 (143)
일상다반사 (40)
삶이 있는 고민 (41)
웹표준 및 웹접근성 (1)
기록들... (0)
Meditation (15)
WEB (11)
IT (26)
영상 (8)

글 보관함

달력

«   2010/07   »
        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 31
Total : 187131
Today : 148 Yesterday : 169