수업에서 언급한바와 같이 1024*768을 기준으로 하는 경우가 대부분이며
이때 모든 종류의 브라우저에서 스크롤이 안생기는 영역에서 디자인이 되려며
상단의 브라우저 메뉴를 제외한 영역을 고려한 사이즈로 작업되어야 합니다.
849*507 을 기준으로 작업합니다

reference : http://www.designerstoolbox.com/designresources/safearea/compare/?PHPSESSID=404371441f30ebc39a52d2b901e571cd

Screen Resolution 1024 x 768

Browser Safe Area Download File
Mac OS X: Safari 909 x 519 download Safari Window (.psd)
Mac OS X: Firefox 909 x 507 download Firefox Window (.psd)
Windows Vista: IE 849 x 621 download IE Window (.psd)
Windows Vista: Firefox 849 x 608 download Firefox Window (.psd)
Windows XP: IE 998 x 615 download IE Window (.psd)
Windows XP: Firefox 998 x 622 download Firefox Window (.psd)
Safe area for all browsers 849 x 507
 

Screen Resolution 800 x 600

Browser Safe Area Download File
Mac OS X: Safari 685 x 351 download Safari Window (.psd)
Mac OS X: Firefox 685 x 339 download Firefox Window (.psd)
Windows Vista: IE 625 x 453 download IE Window (.psd)
Windows Vista: Firefox 625 x 440 download Firefox Window (.psd)
Windows XP: IE 774 x 447 download IE Window (.psd)
Windows XP: Firefox 774 x 454 download Firefox Window (.psd)
Safe area for all browsers 625 x 339
posted by jisunlee
http://vimeo.com/6520450
Web Design Tutorial Part One

Web Design Tutorial Part One from andrew on Vimeo.


1. 와이어 프레임을 손으로 먼저 자세히 그린다.
2. 포토샵에서 먼저 새로운 도큐먼트에서 Web을 선택하고 거기서 사이즈를 선택
3. proof setup에서 monitor RGB 선택, proof color 를 선택
4. grid system generator를 이용하여 그리드 이미지를 만들고 이것을 가져다가 포토샵에 넣고 사용
5. 포토샵 레이어 폴더를 만들어서 각각의 로고, 메인메뉴 등등의 폴더를 만들어서 따로 따로 디자인해서 이용함 . 이것은 와이어 프레임을 그렸던 것에 기초해서 만든다. 그런다음에 종류별로 다시 정리 (폴더 끼리 묶는)
6. 칼라 팔레트는 코드로 메모장에 넣어놓고 항상 일관성 있게 쓴다.
7. 칼라 팔레트의 색상을 선택하여 포토샵으로 가져와서 메인에 상단에 버켓툴을 이용하여 붇는다.
8. 로고를 가져와서 좌측 라인에 정렬한다.
9. 사진을 넣을 경우 플리커(flickr.com)등에서 라이센스에 문제가 없는 사진을 가져다가 쓴다.
10. 상단 네비게이션을 보색을 사용함으로써 사이트에 생동감을 더한다. http://colorschemedesigner.com/ 에서 보색을 얻을 수 있음
11. 상단네비게이션에 시스템 폰트를 사용하는 경우, 시스템 폰트들을 사용하여 적당한 폰트를 선택하고 같은 간격으로 나열한다.



Web Design Tutorial Part 2 from andrew on Vimeo.






What is web design? By Nico Macdonald
http://books.google.com/books?id=YIzEcmM8cD8C&printsec=frontcover&dq=web+design&cd=6#v=onepage&q=&f=false

https://www.youtube.com/watch?v=GOfhmzNLWzY
HTML Tutorial 1 - Designing A Website In Notepad - Basics and Beginnings

posted by jisunlee

아이폰 어플이나 모바일웹을 2학기 웹디자인에서 시도하려고 합니다.
디자인 하실때 다음의 재료들을 쓰셔서 디자인을 시작할수 있습니다.

iPhone Safari Browser

iPhone Safari Browser

download Download File (.psd)

 
iPhone GUI Elements

iPhone Status Bar: Gray

iPhone Status Bar: Gray

download Download File (.psd)

 

iPhone Status Bar: Black

iPhone Status Bar: Black

download Download File (.psd)

 

iPhone Title Bar: Blue

iPhone Title Bar: Blue

download Download File (.psd)

 

iPhone Title Bar: Black

iPhone Title Bar: Black

download Download File (.psd)

 

iPhone Title Bar Buttons

iPhone Title Bar Buttons

download Download File (.psd)

 

iPhone Icon Bar

iPhone Icon Bar

download Download File (.psd)

 

iPhone Safari Text Box

iPhone Safari Text Box

download Download File (.psd)

 

iPhone Safari Pulldown Menu

iPhone Safari Pulldown Menu

download Download File (.psd)

 

iPhone Safari Radio Buttons

iPhone Safari Radio Buttons

download Download File (.psd)

 

iPhone Safari Check Boxes

iPhone Safari Check Boxes

download Download File (.psd)

 

iPhone Check Mark, Add, Arrow Icons

iPhone Check Mark, Add, Arrow Icon

download Download File (.psd)

 

iPhone Item List

iPhone Item List

download Download File (.psd)

 

iPhone Switches

iPhone Switches

download Download File (.psd)

 

iPhone Controls

iPhone Controls

download Download File (.psd)

 

iPhone Button

iPhone Button

download Download File (.psd)

 

iPhone Selector

iPhone Selector

download Download File (.psd)

 

iPhone Large Buttons

iPhone Large Buttons

download Download File (.psd)

 

iPhone Notification

iPhone Notification

download Download File (.psd)

posted by jisunlee


자신의 작업에서 사진이나 그림을 가져다가 쓰실경우에는 반드시 저작권을 확인하셔야 합니다. 오늘 웹디자인 수업시간에 설명을 드린대로 CC 라이센스 표시가 있는 사진이나 그림을 쓰시는 경우에는 비영리 목적으로 자유롭게 쓰실수 있습니다.
이용방법은 가장 찾기 쉬운것으로는 Flickr 에서 고급검색 Advanced Search 에서 CCL 달린 컨텐츠만 이용하는 방식을 쓰시는게 좋습니다.
http://www.flickr.com/search/advanced/
() Creative Commons 사용권이 있는 컨텐츠 내에서만 검색합니다. 
     상업용으로 사용할 컨텐츠를 찾습니다.
    


그러나 이경우에도 변경금지 조항이 있는지, 2차저작물에 대한 원작자 표시등에 대해서 지키셔서 쓰시는 것이 좋습니다.
by 아이디, 출처 URL

위의 내용을 가져온 사진/ 이미지 아래에 반드시 삽입하셔서 적법한 컨텐츠를 사용하는 습관을 기르시길 바랍니다.

이지선

posted by jisunlee

그림을 클릭하면 그림이 새 창에 뜨는 것
<a href="javascript:openwindow('http://hobbang.co.kr/hobbang/images/hobbang-01-1.gif', 100,100)"><img src="http://hobbang.co.kr/hobbang/images/hobbang-01-1.gif" border="0"></a>
←클릭해보세요

새 창(보통 팝업창이라고 하죠)이 자동으로 뜨는거하구 클릭해서 뜨는거를 설명합니다..


아래의 빨간색 부분을 새창을 띄우는 링크를 하고 싶은 HTML 문서에 써 줍니다..

<script LANGUAGE="Javascript">
<!--
function openwindow(opage, x, y) {
farwindow = window.open('','Links','width='+x+', height='+y+', toolbar=0, scrollbars=0, resizable=no');
if (farwindow != null) {
if (farwindow.opener == null) {
farwindow.opener = self;
}
farwindow.location.href = opage;
}
}
//-->
</script>



위의 자바스크립트를 반드시 써줘야 새창이 나타납니다..
위에서 지정된 openwindow() 함수에 의해 새로운 창이 뜨게 하는데요..


Links는 새 창의 이름입니다.. 창의 이름을 지정하여 두면 openwindow()를 사용한 곳을 클릭할 때마다 매 번 새 창이 뜨지 않고 하나의 새 창에서 클릭한 주소의 내용이 나타나게 됩니다..
Links 대신 ''로 작은따옴표를 바로 열고 닫고 하면 창의 이름이 없기 때문에 매번 새로운 창이 뜹니다..

x는 창의 width(가로 크기), y는 창의 height(세로 크기)입니다..

toolbar=0 는 익스플로러의 메뉴 아래에 있는 도구아이콘이 나타나지 않게 하는거구요..

scrollbars=0 는 스크롤바가 나타나지 않게 하는거에요..
스크롤바가 필요하면 scrollbars=1 로 고치면 될꺼에요..

resizable=no 는 창에서 창의 크기를 변화시킬 수 있는 창의 오른쪽 위에 있는 창크기조절 아이콘을 사용하지 못하게 하는거에요..
resizable=yes라구 하면 사용할 수 있게 되죠..
새 창에서 상태표시줄은 나타나지 않습니다..
그리고 새창은 창 최대화 버튼은 사용하지 못하도록 되어 있답니다.. 새 창을 크게 하고 싶다면 새 창에서 키보드 F11 키를 누르면 됩니다..

openwindow()를 사용하는 방법은
openwindow()를 불러오는 곳에서 창에 뜰 주소(HTML, 그림, .swf 파일 등의 주소) 와 창의 크기를 지정해서 적어주면 됩니다..
창에 뜰 주소는 반드시 작은 따옴표로 막아두셔야 합니다. (예: 'http://hobbang.co.kr')

새창 띄워주는 자바스크립 부분(맨 위의 빨간색 소스 부분)을 .js 파일로 만들어서 사용하면 HTML 문서에서는 .js 파일을 불러오는 script 태그만 사용하면 되니까 편리합니다..
아래 내용을 메모장에서 파일 형식을 .js로 해서 파일로 저장하세요. (파일이름 예 : newwindow.js) function openwindow(opage, x, y) {
farwindow = window.open('','Links','width='+x+', height='+y+', toolbar=0, scrollbars=0, resizable=no');
if (farwindow != null) {
if (farwindow.opener == null) {
farwindow.opener = self;
}
farwindow.location.href = opage;
}
}


.js 파일은 자신의 홈에 올려놓구요..
(파일 올리는 건 자신의 홈 관리자로 들어가서 파일 올리기 메뉴를 사용하세요)
openwindow()를 사용하고 싶은 문서에서는 아래처럼만 추가하면 됩니다..
<script language="javascript" src=".js파일의주소와이름"></script>
.js파일의주소와이름은 자신의 홈주소와 파일이름을 주소로 적어주면 됩니다..
(예: http://hobbang.co.kr/newwindow.js)

출처 : http://hobbang.co.kr/zboard/zboard.php?id=snow21&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&keyword=%BB%F5%C3%A2&select_arrange=headnum&desc=asc&no=339

----------------------------------------------------------
1. 글자 또는 이미지를 클릭하면 새로운 웹사이트로 이동

<a href="링크할 URL">글자 또는 <img src="주소"></a>

**문자열이나 그림을 다른 HTML문서나 웹사이트로 링크시킨다.
문자열에 링크가 설정되면 파란색으로 밑줄이 그어지게 되고,
그림에 링크가 설정되면 그림주위에 파란색의 겅계선이 나타난다

**그림의 경계선은 <img>태그의 border="0" 으로 설정하고, 문자열은의 밑줄은 스타일 시트사용





2. 새창으로 사이트 띄우기

<a href="링크할 URL" target="창이름">글자</a>

**창이름 : _blank - 새로운 창으로 링크될 문서를 불러옴

_parent - 링크될 문서가 원래 프레임인 부모프레임에 나타냄

부모프레임이 없는 경우 _self 와 같다

_top - 프레임을 해제하고 링크될 문서를 창 전체로 불러옴 (= _new)

_self - 링크될 문서를 원래 같은 프레임으로 불러옴





3. 새창띄우기(java script) : <body>와 </body>사이에 삽입

window.open("링크할 URL","창이름","속성")

**속성 : 필요하면 [=yes]나 [=1] , 필요없으면 [=no]나 [=0]으로 지정

location : 주소표시줄
directoryies : 연결
resizable : 크기조절
staus : 상태표시줄
toolbar : 표시단추
memubar : 메뉴
width : 새창 너비
height : 새창 높이
left : 새창 왼쪽 위치
top : 새창 위쪽 위치



**가로"n" 세로"n" 크기로 새창띄우기 - [최대화시킬 수 있음]

<a href="#" >글자</a>



4. 작은이미지를 클릭하면 큰이미지 띄우기

<a href="이미지URL"><img src="이미지URL" border="n" width="n" height="n"></a>



사이트 첫페이지나 중간 중간에 작은 창을 이용하여 공지사항을 달아놓은 것을 많이 보았을 것입니다.

이러한 것은 자바스크립트를 이용한 브라우져 조절 기능인데...알고 있으면 아주 유용하게 사용할 수 있습니다.

기본적으로 이 기능을 사용할 때는 자바스크립트의 window.open 을 사용합니다.

상황 소스
자동 팝업시 <script>window.open('원하는 웹페이지주소','...','....','.....')</script>
클릭 팝업시 <a href="#" onclick="window.open('원하는 웹페이지주소','...','...')">클릭</a>

일반적으로 우리가 새창을 띄울때는 위의 두가지 경우가 대부분입니다.
설명해놨듯이 "자동팝업시"란 웹페이지가 로딩되면서 바로 새로운 창이 생기는 것을 말하며,
클릭 팝업시란 링크된 부분을 클릭해야 만히 새창이 뜨는 것을 말합니다.

소스의 중간에 '...','...' <--이런 부분에 바로 브라우져창을 조절하는 속성이 들어가게 된다.
그러면 그 속성들을 알아보도록 하죠^^

 
menubar=yes/no 윈도우의 menubar 표시여부
directories=yes/no 윈도우의 directory button들의 출력여부
location=yes/no 윈도우의 location box 표시여부
status yes/no 윈도우의 상태표시줄 표시여부
toolbar=yes/no 윈도우의 toolbar 표시여부
scrollbars=yes/no 윈도우의 가로 세로 scrollbar 표시여부
resizable=yes/no 윈도우의 크기가 조정될 수 있는 지 결정
width=수치 윈도우의 너비 결정
height=수치 윈도우의 높이 결정
top=수치 윈도우의 위치조절(화면 상단으로 부터 간격 조정)
left=수치 윈도우의 위치 조절(화면 왼쪽으로 부터 간격 조정)

※ 참고적으로 yes의 경우 표시,출력,크기조정 가능.....no의 경우 표시, 출력, 크기조정 불가를 나타냅니다.

예를 들어 소스를 만들어 보죠^^

클릭시 <a href="#" onClick="window.open('banner.htm','_blank','toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable=no,width=424,height=219 top=10 left=10')">클릭</a>
자동팝업시 <Script>window.open("banner.htm",'_blank','toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable=no,width=424,height=219 top=10 left=10')</script>

※ 주의점 - 위에 소스를 적을 때 "" 쌍따옴표 사이에 공란이 있으면 안되고요..

그리고 웹페이지 주소 다음에 _blank 부분은 name 설정이 들어가는 부분입니다.
원하는 창의 네임을 지정해주고 그 네임으로 팝업을 하면 해당 팝업창에 주소부분의 웹페이지가 뜨게 되는 거죠.

하핫^^ 세상에는 꼭 남들과 반대로 가고 싶어하는 사람들이 소수(?) 있습니다.
즉, 자기는 FM을 추구한다 하시는 분들, 조금 더 어렵게 사용하고 싶다하는 분들,
남들과는 차별되고 싶다하시는 분들은 아래 소스를 사용하세요^^

<script language="javascript">

function OpenAnotherWin(szhref){
AnotherWin = window.open(szhref,"AnotherWin",
"toolbar=yes,location=yes,directories=yes,
status=yes,menubar=yes,scrollbars=yes,
resizable=yes,width=300,height=300");
}

</script>

단, 위의 소스를 <head></haed> 사이에 넣고
<body>부분에 onLoad='OpenAnotherWin("이동할 웹페이지주소")'> 를 반드시 넣기를 바랍니다.^^


창닫기 버턴 <input type="submit" value="창닫기" onclick="window.close()">
or
<a href="#" onClick="parent.close()">창닫기</a>
이전 페이지로 가기 <input type="submit" value="이전" onclick="history.back()"> or
<a href="#" onClick="history.back()">이전페이지로</a>
앞 페이지로 가기 <input type="submit" value="앞으로" onclick="history.forward()">
or
<a href="#" onClick="history.forward()">앞 페이지로</a>
새로 고침 <input type="submit" value="새로고침" onclick='top.location="javascript:location.reload()"'>
or
<a href="#"onClick='top.location="javascript:location.reload()"'>새로고침
</a>

한가지 주의할 점은 창닫기 버턴의 경우 가끔씩 "현재보고 있는 창을 닫으시겠습니까?" 라는 자바경고창이 뜨는 경우가 있는데

이 경우는 닫을 려고 하는 창이 새로운 창이 아나라 원래 부모창일 경우 나타나게 됩니다.

위에 설명한 것 하고는 차원이 다른데 비슷한 기능이기 때문에 소스를 하나 소개하겠습니다.

바로 일정시간 이후 자동으로 창이 닫히는 기능을 하는 자바스크립트입니다.

위에 소스를 <head>부분에 집어 넣으시고요.. <body> 부분에는 onLoad="startTime();" 넣는 거 잊지 마세요^^

출처->http://tagmania.net/html/main.php

posted by jisunlee
인트라넷으로 접속해서 왼쪽 젤 하단에 있습니다.

http://www.sookmyung.ac.kr/~mancc/adduser.html

학교계정의 홈페이지를 만들고 싶어요.
인트라넷> 숙명홈페이지계정신청> [신규 홈페이지 계정발급]에서 신청하시면 홈페이지계정을 바로 이용할 수 있습니다. (2008.4.14 변경)

홈페이지 계정 정책 : 1인 개인계정 1개와 공용계정 1개에 한함.

홈페이지 주소는 어떻게 되나요?
기본적으로 서버에 'www_home'폴더를 생성하고 그 안에 index.htm 문서를 올리게 되면 브라우저에서 http://sookmyung.ac.kr/~userID 와 같이 호출하였을 때 자신의 홈페이지를 볼 수 있습니다.
홈페이지 용량은 얼마나 되나요?
숙명홈페이지 계정 용량은 50MB를 제공하고 있으며, 그 이상의 용량증설은 되지 않습니다. 본인의 홈페이지 공간이 어느정도 되는지 궁금한 분들은 텔넷으로 접속하셔서 확인해 보시기 바랍니다.


FTP 프로그램을 다운받아서 설치합니다.
여기서는 알FTP 프로그램을 가지고 설명하도록 하겠습니다.
★ 알FTP 프로그램 다운받기 : http://www.altools.co.kr
프로그램 실행 후 상단 메뉴 중 '접속하기'눌러 설정값을 아래와 같이 지정해줍니다.
단, 아이디/비밀번호는 발급받은 계정의 정보를 입력합니다.
접속이 되면 아래처럼 자신의 홈페이지 계정에 들어가게 됩니다.
①번 영역은 로컬 PC환경이고, ②번 영역은 홈페이지 서버환경입니다.
계정에 접속이 되면 우선 'www_home'이라는 이름으로 새폴더를 생성합니다.
'www_home' 디렉토리를 더블클릭하면 그 안으로 들어가게 됩니다.
PC영역에서 전송하고자 하는 파일을 선택하고 서버영역으로 마우스를 드래그 & 드랍 또는 상단의 '업로드'버튼을 눌러 파일을 전송합니다. 서버에서 파일을 다운받을 때도 같은 방법으로 시도합니다.
홈페이지에 들어가는 모든 문서 및 파일은 'www_home'디렉토리 안에 위치해야 합니다.
서버에 홈페이지를 올릴 때 첫 페이지의 문서명은 index.htm 또는 index.html로 합니다. (영문 소문자)본인의 홈페이지 URL은 http://sookmyung.ac.kr/~계정ID(예: test) 가 됩니다.
첫화면의 문서명을 위와 같이 주지 않았을 경우에는 해당 문서명까지 모두 입력하여 호출하여야 합니다. (예 : http://sookmyung.ac.kr/~계정아이디/test.htm)
브로우저에서 확인시 홈페이지가 안뜬다면 주소에 www가 붙어있는 경우입니다.
작업이 끝나면 상단의 [접속끊기]버튼을 눌러 서버접속을 끊고 '파일> 프로그램종료'를 눌러 알FTP프로그램을 종료합니다.
알FTP 프로그램 도움말 : http://www.altools.co.kr/help/alftp/40/frame.htm
posted by jisunlee

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

1. 슬라이드용 디자인
자신의 웹사이트 디자인을 이미지를 1024*768 로 작업바랍니다.

- 자신 웹사이트 디자인 컨셉소개
템플릿 포토샵화일 첨부합니다. 나눔고딕 ExtraBold를 사용하였습니다.
서체다운로드 : http://hangeul.naver.com/nanum.nhn
폰트를 먼저 인스톨하시고 포토샵을 여셔서 입력한뒤에
jpg로 만들어서 제출합니다.


- 자신 웹사이트 디자인 이미지
백그라운드 없고, 브라우저 부분빼고 순수 이미지 영역만 4장 1024x768 사이즈로 제출합니다.

2. 웹사이트 링크로 연결할 부분에 대한 제출

- 타이틀, 링크  이름.txt (메모장에 적을것)
- 썸네일 이미지 180px × 118px jpg

자신의 블로그에 올리고, 여기에 댓글 다시기 바랍니다.

제출기한은 5월 24일 월요일 수업시간까지 입니다.

=> 수업시간전에 앞에 있는 컴퓨터에 웹디자인_과제전 > 자신이름 폴더를 만들어서 카피해 놓을시기 바랍니다!!!!!!
posted by jisunlee
박상원군에게 배운 플래시 투토리얼과 관련있는 동영상을 찾아서 올립니다.
박상원군에게 오늘 했던 예제화일을 받아서 추후에 포스팅하도록 하겠습니다.
예제화일 올립니다. 다운로드 받아서 해보시고 다음시간에 질문하시기 바랍니다.

박상원군이 추천하는 플래시 교재는
"Flash Navigation Patter" 플래시 네비게이션 패턴 18
윤용호 지음.
www.thedofl.com/navigation18
절판되었다고는 하나 헌서점이나 도서관에서 찾아서 보면될것같습니다.

아도비에서 제공하는 동영상이기때문에 차근차근 따라하시면 어렵지 않을것입니다. 따라하시면서 오늘 한 내용도 복습해 보시기 바랍니다.

액션스크립트를 이용하여 링크를 제공하는것에 대한 투토리얼
http://tv.adobe.com/watch/flash-downunder/actionscript-3-101/

플래시를 Export하여 웹화일로 삽입하기
http://tv.adobe.com/watch/learn-flash-professional-cs4/getting-started-19-creating-a-flash-web-movie/

플래시 CS3를 이용하여 웹사이트 만드는 투토리얼
http://tv.adobe.com/show/flash-in-a-flash
posted by jisunlee
과제전 공간문제로 프린트를 안 하는것으로 결정되었습니다!!!!!!!!

1. 과제전 전시계획
5월 25일 1시에 설치하고 26일~6월3일까지 과제전 전시합니다.
프로젝터와 프린트 두가지로 예정하고 있으며 프린트로 하고 싶은신 분은  아래에  댓글 달아주시기 바랍니다.
전부 그리고 프로젝션으로 갑니다.
전시공간 문제로 모두 프로젝션으로만 과제전시합니다.
2대를 쓸예정이고, 큰것에는 이미지슬라이드를 하고 작은것에는 각자 작업한 웹사이트의 링크를 보여주고 직접 접속할 예정입니다. (버그가 있거나, 이미지가 깨지거나, 링크가 잘 안되는 웹사이트는 빼고 가겠습니다.)

2. 과제제출
프린트 하실분은 다음주까지 A1 사이즈(추후 한번더 공지예정)로 작업하시기 바라고

프로젝션은 2대를 설치해서 한대는 이미지 넘기는 슬라이드, 한대는 마우스 클릭이 가능하도록 설치할 예정

1. 슬라이드용 디자인
자신의 웹사이트 디자인을 이미지를 1024*768 로 작업바랍니다.

- 자신 웹사이트 디자인 컨셉소개
이건 제가 템플릿을 만들어서 오늘중으로 올리도록 하겠습니다.
템플릿 포토샵화일 첨부합니다. 나눔고딕 ExtraBold를 사용하였습니다.
서체다운로드 : http://hangeul.naver.com/nanum.nhn
폰트를 먼저 인스톨하시고 포토샵을 여셔서 입력한뒤에
jpg로 만들어서 제출합니다.


- 자신 웹사이트 디자인 이미지
백그라운드 없고, 브라우저 부분빼고 순수 이미지 영역만 4장 1024x768 사이즈로 제출합니다.

2. 웹사이트 링크로 연결할 부분에 대한 제출

- 타이틀, 링크
- 썸네일 이미지 180px × 118px jpg

자신의 블로그에 올리고, 여기에 댓글 다시기 바랍니다.

제출기한은 5월 24일 월요일 수업시간까지 입니다.
이때까지 취합이 안되면 과제전에 못들어갑니다.

각자 작업해서 블로그에 올리시고... 코드작업 이제 들어가시기 바랍니다.
posted by jisunlee

1. Main(1~2 페이지 이상) & Sub(5 페이지 이상) 디자인 마무리 => 블로그에 포스트하고 여기에 숙제 댓글 달기
주제를 바꾸거나 새로 정하신 분들은 다음시간까지 ppt마무리와 디자인까지 마무리하여서 저에게 보여주시기 바랍니다.

2. 교재 스터디 312 페이지의 배경 이미지고정과 외부 스타일 시트까지 최종 복습하여 마무리 합니다.

3. 위의 교재 및 제가 올려놓은 화일을 참고하여 external CSS 적용안한사람은 적용하여 완성하기 바랍니다. 이 포트폴리오사이트 숙제는 기말까지 계속가니 미리미리 끝내시길 바라니다. 

* 다음주는 뷰티풀 웹 디자인 교재로 넘어가서 강의토록 하겠습니다.교재 사지 않아도 됩니다.
** 서울대 박상원군이 플래쉬 메뉴 만드는 방법에 대해서 다음주 부터 2주간 특강을할예정입니다. 플래쉬를 쓰시고자 하는 분들은 미리 디자인을 끝내놓으셔야 따라하면서 가실수 있습니다. 

***코드에 문제가 생겼거나 ftp 업로드에 문제가 생기신 분들은 저에게 질문바랍니다. 이메일을 주시거나 새힘관 206호에 방문 바랍니다.
 
posted by jisunlee

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.


1.  자신의 포트폴리오 html 사이트 완성
자신의 포트폴리오 사이트를 CSS 화일을 연결한 (external) HTML 작업하여 파란 웹호스팅에 업로드할것
** 해당 웹호스팅 URL을 여기에 댓글로 달고 자신의 블로그에 캡쳐한 화면과 동시에 URL을 포스팅 할것

2. 중간발표 이후 기말까지 진행할 프로젝트 기획 발표
아래내용이 포함되어야함. 기존의 웹디자인 5주차에 이미 기 공지된 내용임.
** 이름.ppt에 정리하여 미리 수업 시작 전에 웹디자인 폴더한군데에 넣어놓을것.

1단계 전략수립(strategy / research)
1-1. Mission
- 개발 하고자 하는 사이트의 미션은 무엇인가? 몇문장으로 정리
1-2. Objectives
- 개발 하고자 하는 사이트의 목적은 무엇인가? 몇문장으로 정리
1-3. Target Users
- Primary Target 사용자와 Secondary Target 사용자를 정의
1-4. Scope of the Project

- 유사/ 경쟁 사이트 벤치마킹

2단계 디자인 및 스펙결정 (design / Ideation)
2-1. 컨셉개발
- 개발하고자 하는 사이트의 디자인 컨셉을 몇문장으로 정리
2-2. 크리에이티브 디자인
- 비쥬얼 디자인 시안 (메인1, 서브1)
2-3. 기술설계
- IA(Inforamtion Architecture) 정보구조 설계
사이트의 웹페이들(또는 컨텐츠)가 연결된 구조도
posted by jisunlee

창학 B178  오늘 웹디자인 여기서 합니다. 7:00 pm
다음의 이효숙씨가 아래의 내용으로 특강을 해주실 예정입니다

1. 포탈에서 모바일 시장을 바라보는 시각
2. 모바일 어플과 모바일웹의 기획단계에서 고려해야 할 점
3. Daum의 어플 개발사례 : tv팟, 지도, 다음앱스, 티스토리 (아직 사내 오픈 예정인 어플 등)
4. 모바일 어플 UX가이드 소개
5. 모바일웹 UX가이드 소개

이지선
posted by jisunlee
팟캐스트에 대한 사전적 의미

팟캐스트는 애플의 아이팟(Ipod)과 방송(Broadcasting)을 결합해 만든 신조어로, 포터블 미디어 플레이어(PMP) 사용자들에게 오디오 또는 비디오 파일 형태로 뉴스나 각종 콘텐츠를 제공하는 것을 말한다.

과거엔 특정 방송을 정해진 시간에 일일히 녹음해두었다가 청취해야 했지만  팟캐스트는 특정 방송 내용을 시간에 구애받지 않고 언제 어디서나 활용할 수 있다는 것이 가장 큰 특징이라 할 수 있다. 또한 뉴스, 영어학습, 음악, 강좌등 활용 방안은 무궁 무진하다고 할 수 있다.

팟캐스트를 활용하는 방법은 itunes, rss리더, 티스토리 플러그인을 제공하는 podics 를 이용하는 방법이 있다.

1.rss 리더 활용

아래 이미지는 구글 리더를 통해 팟캐스트 구독하는 화면이다. 팟캐스트 주소를 rss리더기에 등록하면 아래와 같이 날짜에 상관없이 원하는 시간에 방송을 들을 수 있다.[FREEWARE] - 막강한 기능의 무료 RSS 리더 FeedDemon


2. itunes활용

itunes를 설치하고 고급- podcast등록을누르고 팟캐스트 주소를 등록한다.

주소를 등록하면 itunes에서 그 주소의 각종 미디어 콘텐츠를 내컴퓨터로 자동으로 다운 받는다. 그리고 다운 받은 미디어 파일들은 내컴퓨터-내문서-내음악-itunes-itunes music-podcast폴더에 저장된다. 듣고 싶을 때 들으면 된다.


3.podics.com활용

자세한 사용법은 테이크아웃 미디어 - 포딕스 공식 블로그에 잘 나와있다. 처음 가입 후 시작을 어떻게 하는 지만 간단히 소개한다.

웹사이트에 가입후 웹사이트 상단에 'mypodics'로 이동하면 세개의 폴더가 보인다. 구독은 포딕스 사이트와 관계없는 팟캐스트 구독시 rss주소를 등록하면 되고 스크랩은 포딕스 사이트내의 콘텐츠를 스크랩해두는 폴더이다. 좌측 상단의 '스튜디오' 버튼을 클릭하면 업로드 사이트로 이동한다.

용량제한은 100mb가 아니고 한 번에 올릴 수 있는 업로드 용량제한이 100mb..전체 용량은 무제한이다.


스튜디오 사이트로 이동하면 하단에 '녹음하기, 오디오,비디오 업로드' 버튼이 보인다. 내컴퓨터에 마이크를 연결하고 녹음하기를 누르면 바로 녹음을 할 수 있고, 오디오나 비디오는 그냥 업로드 하면 된다. 기존의 동영상 사이트와 다른 것은 팟캐스트로 등록 발행하면 다른 사람들이 rss 구독하거나 itunes로 다운 받을 수 있다는 점이다.

 

녹음하기를 누르면 아래 화면이 등장하고 허용을 눌러주면 된다.

테이크 아웃 미디어 - 포딕스 웹사이트는 티스토리와 제휴를 통해 위젯을 제공 한다는 점이 강점이다. 자신의 블로그에 자신만의 방송국을 차릴수 있어, 보다 다양하게 블로그를 활용할 수 있다. 내 블로그 방문자에게 자신의 목소리를 들려주고 싶다면 포딕스에서 녹음 후 티스토리 플러그인과 위젯을 이용하면 된다.

마지막으로 다양한 국내외 팟캐스트 사이트 정보를 알고 싶다면 Podcasting in Korea! UCC 포드캐스트? 팟캐스트! ::를 방문하면 된다. 팟캐스트에 대한 거의 모든 정보가 있는 블로그다.

posted by jisunlee

RSS?

웹사이트에서 정보를 수집하거나 새로운 소식을 접할 때 일반적으로 흔히 하는 행동 또는 가장 손쉬운 방법은 포털 사이트에 접속하는 것입니다. 그리고 검색을 하고 중요하다 싶은 웹사이트의 경우 북마크를 하는 것이 아직까지는 가장 보편적이 행동입니다. 그러나 이러한 방법은 매번 별도의 웹사이트에 접속해야하며, 다른 일을 하다 새로운 소식을 바로 접하기가 상당히 어렵습니다. 또한 시간의 낭비도 많습니다.

rss 는 뭔가요?

우리는 보통 신문을 매일 배달해서 구독합니다. 매번 가판대를 방문해서 신문을 사서 보지는 않습니다.

rss란 real simple syndication 의 약자로 '정말 간단한 배급'으로 해석할 수 있습니다. 즉 간단한 배급을 통해 뉴스 사이트나 블로그를 방문하는 번거로움과 시간의 낭비를 덜어주는 것입니다. 또한 웹2.0 의 중요한 구성 요소 중에 하나입니다.

rss 구독 기능을 사용하면 매번 웹사이트나 블로그를 방문할 필요없이 자신의 rss 구독기 한 곳만 방문하면 됩니다. 또한 rss 구독기들은 정보를 보관하고 분류하고 태그를 삽입할 수 있는 다양한 기능들을 제공함으로 매번 웹사이트에서 스크랩을 하거나 북마크, 복사 등등의 번거로운 과정을 줄여줍니다. 최근엔 정보의 공유와 활용이 보편화되면서 간단한 배급, rss 를 지원하는 웹사이트들이 늘어나고 있는 추세입니다.

rss 를 지원하는 블로그나 뉴스를 구독하기 위해서는 어떻게 하나요?

rss로 뉴스나 블로그 소식을 구독하기 위해서는 rss 리더기 또는 구독기라는 것이 필요합니다.

rss구독기는 크게 두가지로 구분됩니다. 브라우저에서 바로 이용하는 온라인 구독기와 데스크탑 프로그램 구독기 입니다. 온라인 구독기는 다시 홈페이지 형과 단순 구독기능 을 가진 것으로 나누어 집니다. 홈페이지 형은 여러가지 위젯을 활용할 수 있고 많은 정보를 훓어보기는 좋지만 정보관리 면에서는 많이 부족합니다. 각자 자신의 스타일에 맞는 형태를 이용하면 됩니다.

rss 리더기들은 굉장히 많습니다만 초보자들도 쉽게 사용할 수 있는 몇가지 만 소개합니다. .

온라인 형은 가입을,설치형은 컴퓨터에 설치를 하고 사용을 하면 됩니다. 사용법은 그리 어렵지 않습니다. 그 다음 rss 구독 기능을 지원하는 사이트를 발견하면RSS구독 버튼을 클릭하고 주소를 복사한 뒤 해당 구독기에서 추가 입력해 주거나

자신이 가입하거나 이용 중인 리더기 아이콘 버튼을 클릭하면 구독기에 추가되며 새로운 소식이 올라올 때마다 rss구독기에 자동으로 업데이트 됩니다. 그러므로 매번 블로그를 북마크 해두고 반복해서 방문할 필요가 없습니다.

처음엔 무엇을 구독해야 할지 감이 잘 안온다면, 온라인 구독기 사이트의 경우 분야별로 추천 구독 사이트들 목록을 지원하고 쉽게 추가할 수 있도록 하고 있습니다.

rss 구독 기능은 불필요한 행동을 줄여주고 시간을 절약해 줌으로 많은 뉴스나 블로그들의 소식을 한 발 앞서 확인할 수 있습니다. 정보가 홍수처럼 아니 쓰나미처럼 몰려오는 현대 사회에 rss 구독기의 활용은 필수 요소라고 할 수 있습니다.

마지막으로 정보는 가공 분류하지 않으면 가치가 없습니다. 블로그에 단순히 펌질을 하거나 북마크 해두면 쓰레기만 쌓일 뿐입니다. rss 구독기를 통해 정보를 분류하고 태깅하고 적절히 활용해서 자신의 지식의 차원을 넓혀 가시기 바랍니다.

ps)우리나라엔 게시판으로 구성된 웹사이트들이 많이 있습니다. 게시판을 구독하고 싶다면 아래 글을 참조하세요. [WEBSERVICE] - rss 구독을 지원하지 않는 게시판 또는 웹사이트를 간단히 rss로 구독하기- page2rss

단 모든 게시판을 지원하지는 않습니다.


혹시 drchoi blog를 구독하고 싶으세요? rss 구독기 사이트에 가입하거나 설치를 하셨다면 코끼리를 클릭해보세요

주소를 복사한 후 추가하거나 구글리더, 한rss 버튼을 클릭해 보세요...drchoi blog 의 소식을 편안히 구독기에서 볼 수 있습니다.

혹시라도 이 글을 블로그에 삽입하고 싶으시면

아래 코드를 복사 붙이기 하고 처음과 끝에 <> 를 삽입하면 됩니다.

a href=" http://drchoi.or.kr/918" target="_blank">
<img src="hhttp://cfs10.tistory.com/upload_control/download.blog?fhandle=
YmxvZzMyNDA4QGZzMTAudGlzdG9yeS5jb206L2F0dGFjaC8wLzEwLmpwZw==" align = middle border = 0> </a
오래 전 부터 쓰고 싶었던 글인데 이제야 숙제를 끝낸 느낌입니다...^^
posted by jisunlee
RSS 아이콘을 삽입하는 방법은 
  • 아래의 사이트에서 적당한 아이콘을 다운받는다.
  • 티스토리 블로그에 비공개로 사진을 올린다.
  • 마우스 우클릭해서 이미지 주소를 복사한다.

아래 태그를 사용해서 블로그 사이드바나 스킨의 적당한 곳에 삽입해 주면 된다. ()괄호는 < >로 바꿔줘야 한다.


(a href="블로그 rss feed주소" target="_blank")
(img src="블로그 이미지 주소" align = "middle"  border = "0") (/a)
참고)target=blank를 제거하면 현재창에서 열린다.



다양하고 예쁜 RSS아이콘을 다운로드 받을 수  있는 사이트
posted by jisunlee

1. HTML & 드림위버 CS4 교재 실습
277페이지 ~ 312페이지 : 스타일 시트로 문서의 한계 뛰어넘기 / 하이퍼링크 정의 스타일시트 만들기 / 배경이미지 고정과 외부 스타일 시트

* 자신의 포트폴리오 사이트 HTML 작업 시작하기
==> html 코드를 하시다가 모르시는것은 저에게 질문을 주세요~ 코드 같이 보면서 알려드릴께요.
플래쉬로 작업하고 싶으신 분도 우선은 html 로 작업먼저 해보시기 바라니다. 플래쉬는 중간고사 이후로 박상원님이 오셔서 특강하실 예정...

2. 중간고사 준비하기

1단계 전략수립(strategy / research)
1-1. Mission
1-2. Objectives
1-3. Target Users
1-4. Scope of the Project

- 유사/ 경쟁 사이트 벤치마킹

2단계 디자인 및 스펙결정 (design / Ideation)
2-1. 컨셉개발
2-2. 크리에이티브 디자인

2-3. 컨텐츠 기획
2-4. 기술설계
- IA(Inforamtion Architecture) 정보구조 설계

3단계 프로토타입 & 테스트
- low-fidelity prototype : 종이등에 스케치한것으로 테스트 하기
- high-fidelity prototype : html 등으로 실제 동작하는것에 대한 디테일한 인터렉션까지 테스트 해 볼수 있도록 프로토 타입을 제작하여 테스트 하기

4단계 제작

- 론칭 이후 결과 보고서 및 피드백에 관한 보고서 작성

**** 녹색부분이 이번 중간고사 발표때 들어가야 할 내용입니다.
자세한 템플릿이나 예제는 추후에 보강토록하겠습니다. 미리미리 준비하시기 바랍니다.
posted by jisunlee

Daum 모바일 디자인을 담당하고 있는 이효숙님의 특강을 진행할 예정입니다.
모바일 웹의 가이드에 대해서 설명해 주실 예정입니다. 제가 수업시간에 부탁을 드렸으나 월요일 오전에 있는 정기회의로 인해 월요일 오전은 어려우시다네요.
그래서 월요일 저녁시간대에 잡거나, 토요일에 하려고 합니다.
1안 4월 19일 월요일 저녁 6시~(4월 19일 월요일 오전수업을 저녁으로 이동)
2안 4월 24일 토요일 오전 10시~ ( 이날 하게 되면 26일 예정이였던 중간발표 까지 같이 가도록 하겠습니다.)
3안 5월 1일 토요일 오전 10시~ (5월 3일 월요일 수업 대체)

결정 ==> 4월 19일 월요일 저녁 7시

월하는 시간대를 알려주시기 댓글로 바랍니다.

posted by jisunlee
3/29 출석 : 김다은, 김바다, 강서현, 김현진, 강예원, 수련, 박초희, 변민녕, 황다원, 조예지, 박혜진,서가은, 김보람, 권서윤, 서윤석, 조소현, 양혜진, 이효숙, 배민경, 김나래, 문정윤, 이태경, 김혜지, 오주영, 최미나, 안정호, 함유경, 박혜령

숙제하면 댓글로 달아주세요. 댓글을 안달면 숙제안한것을 간주.

과제 : 자신의 포트폴리오 사이트의 메인과 서브페이지 디자인 (포토샵 또는 일러로 작업하여 이미지화일로 자신의 블로그에 올리기)

중간발표 공지 :
1. 자신의 포트폴리오 사이트 html 까지 작업
2. 자신이 만들고자 하는 웹사이트에 대한 사이트 디자인 기획서 + 메인 디자인 이미지
posted by jisunlee

1. HTML & 드림위버 CS4 교재
part 3 이미지와 멀티미디어 개체 사용하기 까지 실습 해볼것

2. 자신의 블로그에 자신의 웹포트폴리오 사이트에 대한 기획서 작성
- 자신의 포트폴리오에 담고 싶은 결과물들을 프린트하여 친구들 3명이상에게 보여주고
어떻게 포트폴리오 사이트를 만들면 좋을지에 대한 의견을 구한다.
- 친구들의 의견을 요약하여 포스트하고
자신의 포트폴리오 사이트에 대한 기획서를 아래내용을 포함하여 작성한다.
-- 사이트 명
-- 사이트 목적
-- 타겟 사용자 (1차, 2차)
-- 사이트 범위 : 사이트에 담고자 하는 컨텐츠에 대한 정리

3. 자신의 웹포트폴리오를 만들기위한 유명 디자이너들의 포트폴리오 사이트 벤치마킹하기
==> 이건 2주에 걸쳐 실시
- 자신의 블로그에 멋지다고 생각되는 포트폴리오 사이트들의 화면을 캡쳐하고 링크를 단뒤에 왜 선택하였는지에 대한 간단한 내용을 포스트 할것

posted by jisunlee

1. 이름, 이메일주소, 블로그나 홈페이지 주소 URL을 여기에 댓글로 달기

2. 자신이 만들고 싶은 아니면 잘만들었다고 생각하는 웹사이트를 찾아서 URL을 블로그에 적고, 거기에 누가 만들었는지, 어떻게 만들었는지를 조사해서 글로 쓸것

3. HTML 을 설명한 1장을 읽어보고 HTML 화일을 블로그에 연결해서 올려볼것(파일로 첨부- 다양한 방법을 시도해 볼것... 단 HTML 태그를 외우도록 노력할것)

교재 :
웹페이지 제작을 위한 HTML 드림위버 CS4 
저자" 함호종, 조양현, 김성욱 지음 혜지원 출판
http://www.yes24.com/24/goods/3591748?scode=032&srank=1

수업시간에 보연준 서적들
주교재 :
Beautiful Web Design 뷰티풀 웹 디자인 : 좋아 보이는 웹사이트를 만드는 디자인 원칙
제이슨 비어드 저/이광우 역 | 인사이트(insight) | 2009년 05월
http://www.yes24.com/24/goods/3385518?scode=029&srank=1


UX 디자인 커뮤니케이션: 성공적인 UX전략과 산출물을 위한 노하우
댄 브라운 저/NHN UX Lab 역 | 위키북스
http://www.yes24.com/24/goods/3206993?scode=032&srank=2

참고서적
웹디자인 마인드
Professional 웹 디자인 마인드
제프리 빈 저/전용석 역 | 안그라픽스 | 원서 : The Art & Science of Web Design

http://www.yes24.com/24/goods/232695?scode=032&srank=1

이모셔널 디자인
Donald A. Norman 저/박경욱,이영수,최동성 공역/김진우 감수 | 학지사 | 원서 : EMOTIONAL DESIGN

http://www.yes24.com/24/goods/2174992?scode=032&srank=1

그외에 플래쉬책은 신명용의 액션스크립트 1&2를 추천해 드렸는데,
이것은 플래쉬를 어느정도 써보신분이 사서 보시길 추천합니다.

그리고 위의 책은 다 안사셔도 됩니다.
가급적 도서관등을 이용하여 대여하시거나 돌려서 보셔도 될듯하며
html/드림위버 책도 원하시는 분에 한에서 사서보시기를 권합니다.

이지선
posted by jisunlee

웹디자인 수업 첫수업이 다음주 월요일 3월 8일에 있습니다. 추가로 수강하실 분들 우선 수업에 들어와 주세요. 김은혜 조교에게 증원신청할 예정입니다. 김조교에게 물어본뒤 다시 업데이트 포스팅 하겠습니다.
posted by jisunlee