웹디자인 : 브라우저에서 스크롤이 생기지 않는 화면 사이즈

수업에서 언급한바와 같이 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

iPhone 디자인 재료들


아이폰 어플이나 모바일웹을 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

CCL 크리에이티브 커먼즈 라이센스 달린 사진 이용하기


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


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

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

이지선

posted by jisunlee

이미지를 팝업 새창으로 깔끔하게 띄우기

  • 안녕하세요 여쭤볼게 있어서 이렇게 글을 올립니다,

    <script language="JavaScript">
    <!--
    function setCookie( name, value, expiredays ) {
    var todayDate = new Date();
    todayDate.setDate( todayDate.getDate() + expiredays );
    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
    }

    function closeWin() {
    if ( document.notice_form.chkbox.checked ){
    setCookie( "maindiv", "done" , 1 );
    }
    document.all['divpop1'].style.visibility = "hidden";
    }
    //-->
    </script>



    <div id="divpop1" style="position:absolute;left:30px;top:20px;z-index:200;visibility:hidden;">
    <table width=400 height=320 cellpadding=0 cellspacing=0>
    <tr>
    <td style="border:0px #666666 solid" align=center bgcolor=white><img border=0 src="http://monicahair.com/xe/mainpage/popup/popup_01.jpg"></a>
    </td>
    </tr>
    <tr>
    <form name="notice_form">
    <td align=right><a href="javascript:closeWin();"><img border=0 src="http://monicahair.com/xe/mainpage/popup/popup_03.jpg"></a></font><br><font color="#5a5a5a" style="font-size:9pt"><input type="checkbox" name="chkbox" value="checkbox">오늘 하루 이 창을 열지 않음</td>
    </tr>
    </form>
    </table>
    </div>

    <script language="Javascript">
    cookiedata = document.cookie;
    if ( cookiedata.indexOf("maindiv1=done") < 0 ){
    document.all['divpop1'].style.visibility = "visible";
    }

    else {
    document.all['divpop1'].style.visibility = "hidden";
    }
    </script>

    이정도까지가 팝업창 소스 같은데,,,
    이 소스에 새창으로 띄우는 팝업창 소스를 넣으려면 어떻게 해야하나요?
    그리고 이건 제 메일주소입니다.
    himoola21@naver.com

    yula 2011.09.08 17:15

그림을 클릭하면 그림이 새 창에 뜨는 것
<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

숙명 계정으로 50M까지 홈페이지 만들수 있음

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

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: 과제전 제출

  • 이전 댓글 더보기
  • http://blog.naver.com/6607144
    교수님 말씀대로 수정했구요, 링크는 진행중이에요!

    황다원 2010.05.23 23:26
  • http://blog.naver.com/tnfus0523/100105916646
    기말작업을 과제전으로하기로했었는데,
    링크는 아직 코딩작업이 마무리되지 않아서 진행중입니다.
    포트폴리오싸이트면 할 수 있을것같기도 한데ㅠ

    김수련 2010.05.23 23:39
  • http://blog.naver.com/hyosha/90087604258
    hyosha.wo.to
    포트폴리오사이트로 과제전 합니다^^

    이효숙 2010.05.23 23:42
  • http://blog.naver.com/bijou0621/106149156

    포폴사이트로 과제전 할게요..

    조소현 2010.05.24 00:01
  • http://blog.naver.com/conyunv

    기말작업으로 과제전 제출하려고그랬는데 호스팅하니까 링크가 제대로 안되네요 ㅠㅠ
    수업시간에 질문드리고 해결안되면 포폴사이트로 과제전 제출하겠습니다!

    서윤석 2010.05.24 00:17
  • http://blog.naver.com/cutylady1004/110086731017
    디자인을 다시 해야할 것 같아서 포폴사이트로 과제전 할게요...

    함유경 2010.05.24 00:38
  • http://blog.naver.com/dnflehofkddl/130086688828

    포폴사이트로 과제전 하겠습니다^^;

    변민녕 2010.05.24 02:24
  • http://blog.naver.com/ricoda/106155411
    디자인을 다시 하다가 너무 늦어져서 링크를 못걸 것 같아서 기말과제말고 포폴사이트로 하겠습니다.ㅜㅜ

    안정호 2010.05.24 02:38
  • http://bsshake.tistory.com/entry/517-과제전-Orgeltants

    권서윤 2010.05.24 02:56
  • http://blog.naver.com/sweetignt/40107154373

    김현진 2010.05.24 04:28
  • http://blog.naver.com/baha58/150086828696
    플래시가 에러라서 지금 뒤에 페이지가 연결이 안됩니다... (계속 진행중)

    김바다 2010.05.24 04:50
  • http://22020.tistory.com/category/Web.
    플래시끼리 링크거는걸 모르겠어요. 알려주세요 ㅜ

    ㄷㅏㅇㅡㄴ 2010.05.24 05:34 신고
  • http://blog.naver.com/crystalwine6/140107416162

    슬라이드만 할수 있을것같아요 ㅠ

    서가은 2010.05.24 05:44
  • 플래시 메뉴 제작이 좀 늦어져서 기말과제 말고 포폴사이트로 과제전 할께요ㅠㅠ..
    http://blog.naver.com/chgmldit/30086667594

    박초희 2010.05.24 06:15
  • http://blog.naver.com/yew5n/130086692242

    강예원 2010.05.24 06:57
  • http://blog.naver.com/cola_ice/10086850071
    플래시는 만들어놨는데 올리면 자꾸 뜨질 않네요 swf따로 url를 띄우면 제대로 나오는데.. 저번에 말씀드렸던 대로 폿폴사이트로 과제전 합니다..

    강서현 2010.05.24 07:21
  • http://blog.naver.com/18444

    강현진 2010.05.24 11:15
  • http://blog.naver.com/juyoung2341/20106355339

    오주영 2010.05.24 12:20
  • http://blog.naver.com/som0satang/150086843486

    김혜지 2010.05.24 12:51
  • http://blog.naver.com/i1514/60107873182

    교수님 여기에 캡쳐 폴더 올렸어요!!!!

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

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


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

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

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

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

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

=> 수업시간전에 앞에 있는 컴퓨터에 웹디자인_과제전 > 자신이름 폴더를 만들어서 카피해 놓을시기 바랍니다!!!!!!
posted by jisunlee

웹디자인 : 플래시 활용하기

  • http://blog.naver.com/i1514/60107373620 저 디자인이제 올려염 ㅠㅠ

    문정윤 2010.05.17 10:27
    • 디자인을 칸칸히 나누었는데... 나눈 간격을 좀 줄이던가 해보면 어떨까? 좀 둔탁한 느낌이 들어서...

      이지선 2010.05.22 08:11 DEL
  • 저도 디자인 조금 수정했습니다
    http://blog.naver.com/baha58/150085922037

    김바다 2010.05.17 11:10
박상원군에게 배운 플래시 투토리얼과 관련있는 동영상을 찾아서 올립니다.
박상원군에게 오늘 했던 예제화일을 받아서 추후에 포스팅하도록 하겠습니다.
예제화일 올립니다. 다운로드 받아서 해보시고 다음시간에 질문하시기 바랍니다.

박상원군이 추천하는 플래시 교재는
"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/10 과제전 & 과제 & 필독!변경공지!!!!

  • 프린트 하고싶어용

    문정윤 2010.05.11 12:36
  • 교수님, 포폴사이트를 프로젝션으로 할거면 이미 한 사이트를 켑쳐하는 것이 아니라 따로 이미지 작업을 해서 슬라이드형식으로 보여지는 건가요?

    양혜진 2010.05.11 17:19
  • http://blog.naver.com/dnflehofkddl/130086195135

    변민녕 2010.05.16 23:34
    • Title of Website라는 부분은 본인 프로젝트의 제목을 적으시면 됩니다. Marketing for Dr.You Cookies and Chinps 뭐 이런정도로 적으면 될것같습니다. 본인이 생각해서 멋진 제목으로 적으세요. 사이트 디자인이 깔끔하기는 한데. 좀 확띄는게 없습니다. 이거다 플래쉬로 처리하실건가요? 그리고, 그리드에 맞지 않다보니 좀 둥둥떠다니는 느낌이 납니다. 이건 제가 직접 설명드리죠. 내용을 좀더 많이 넣거나 에니메이션 처리를 가지 않으면 좀 맥빠지는듯한 느낌이 들것같으니 조심하시기 바랍니다.

      jisunlee 2010.05.17 10:49 신고 DEL
  • http://blog.naver.com/yew5n/130086237830

    강예원 2010.05.17 05:17
    • 메인일러스트가 굉장히 강렬한데, 이거는 가져온것같아보임. 그러나 웹디자인 포트폴리오에서 본인이 직접 일러를 그리거나 하는게 의미가 있지, 남의 것을 메인비쥬얼로 효과가 그다지 없음. 상품에 맞추어 메인이미지를 본인이 직접그리도록 할것.

      jisunlee 2010.05.17 11:07 신고 DEL
  • http://blog.naver.com/ceylon88/60107378090
    프린트는 안하구요.. 저 코드때문에 첫화면부터 안보여서, 오늘 질문드릴께요 ㅠ;

    이태경 2010.05.17 09:45
    • 상세페이지에서 디자인을 좀더 그리드에 맞추어 수정할것 좀 산만하다는 느낌이 듬. 그리고 이름이 계속 들어가는것이 좋을것같음. 박스형태를 고수하는 경우 메뉴와의 위치를 밸런스를 잘 맞추는것이 중요함

      jisunlee 2010.05.17 11:23 신고 DEL
  • 조예지 :포트폴리오사이트 완성, 김현진 : 기말타겟, 박혜진 : 포트폴리오사이트, 이태경 : 포트폴리오사이트 , 문정윤: 기말타겟, 김바다 : 기말, 강서현: 포트폴리오사이트, 서가은: 기말타겟(쇼핑몰로 변경), 오주영: 포폴, 안정호: 기말 가방사이트, 양혜진: 기말, 변민녕: 기말 닥터유, 황다원: 쇼핑몰, 김보람: 포폴사이트, 박초희 : 기말 패밀리레스토랑, 박혜련 : 포폴, 함유경: 기말Yes24

    jisunlee 2010.05.17 10:24 신고
  • http://blog.naver.com/ricoda/104870418 아직 수정중입니다.

    안정호 2010.05.17 10:39
    • 이미지 영역이 너무 커서 내용을 나오는 부분이 작은것 같음, 내용나오는 부분을 좀더 영역을 늘리는것은 어떠한지.전체 플래쉬로 작업할것인지? 전체 플래쉬로 작업하는게 아니면 이미지로 작업할때는 optimazation을 잘해서 이미지 용량을 줄이는 방법을 고미해야 할것임. gif로 이미지를 생성할것. 플래시에서 하는경우는 일러에서 그려서 불러들여서 벡터이미지로 작업할것

      jisunlee 2010.05.17 11:47 신고 DEL
  • http://blog.naver.com/crystalwine6/140106977662
    진행중입니다

    서가은 2010.05.17 10:54
    • 날으는 물고기하고 상단의 윗부분이 비슷한데... 상단메뉴랑 겹치면서 복잡해보입니다. 아예 그부분을 없애고 다르게 가면 어떨까요? 참고로 etsy.com이라는 미국 최대 핸드크래프트 오픈마켓 사이트를 보시기 바랍니다.
      그리고 가독성이 떨어지지 않도록 주의 하시고 글자들도 그리드에 맞추어 잘 표현될수 있도록 해 주세요.

      jisunlee 2010.05.17 11:52 신고 DEL
  • http://blog.naver.com/6607144
    과제전 포폴 사이트로 할게요!

    황다원 2010.05.17 11:56
    • 자신의 사진 나오는거 빼고, 장미 나오는것 빼고, 다른것으로 대치바람. 소개페이지하고, 나머지 2장은 괜찮은것같아요.

      이지선 2010.05.22 08:17 DEL
  • http://blog.naver.com/hyosha/90086718253

    이효숙 2010.05.17 12:08
    • 전에보다 훨씬 나아졌네요.. GIFT에 쓰인 끝이 동글동글한것을 다른곳에 포인트로 쓰면 좀더 디자인이 재미있을것같네요. 그리고 전체 영어 한글 혼용인가요?

      이지선 2010.05.22 08:20 DEL
  • http://blog.naver.com/i1514/60107373620 저 디자인이제 올려염 ㅠㅠ

    문정윤 2010.05.17 12:20
    • 디자인 사이에 간격이 좀 넓어서 둔탁한 느낌이... 저랑 월요일에 디자인 수정해보아요.

      이지선 2010.05.22 08:21 DEL
  • http://blog.naver.com/tricksoul

    양혜진 2010.05.17 12:22
    • 갈색 부분이 적어져서, 좀더 가벼운 느낌으로 디자인이 바뀌어서 좋은것같습니다. 메인 페이지는 첫번째것으로 갈건가요? 검정 네모 뒤에 그라데이션 깐거... 이거 살짝 부담스러운데... 좀더 고민해 보세요.

      이지선 2010.05.22 08:24 DEL
  • http://blog.naver.com/tricksoul

    양혜진 2010.05.17 12:22
  • 김나래, 이효숙, 권서윤, 김수련, 강예원, 서윤석, 김혜지

    이지선 2010.05.17 12:30
  • 김다은(도우미) + 바다

    이지선 2010.05.17 12:31
  • 비밀댓글입니다

    2010.05.17 12:43
  • http://blog.naver.com/morphine_0/70086472952

    조예지 2010.05.22 08:02
    • 자신의 biography 및 흰색바탕에 글씨만으로 처리하는 부분을 약간 배경보다 하얀 하을색으로 가면 어떨까요? 좀더 튀지 않고 부드럽게 갈것같은데...

      이지선 2010.05.22 08:26 DEL
  • http://blog.naver.com/baha58/150086699607

    김바다 2010.05.22 08:45
  • http://blog.naver.com/marchlioon

    박혜진 2010.05.23 01:22
  • http://blog.naver.com/tnfus0523/100105916646
    출석은 위에 됫는데 포스팅한거 댓글다는거 까먹었었네용
    포스팅을 5월23일랄 과제전 한거랑 같이했었어요~ 이거 다음에 크리틱 받고 수정한걸로 다시 디자인했습니다
    ^^!!

    김수련 2010.06.07 12:59
과제전 공간문제로 프린트를 안 하는것으로 결정되었습니다!!!!!!!!

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: 5/3 과제


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

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

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

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

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

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

웹디자인 : 중간과제 발표 가이드라인

  • 이전 댓글 더보기
  • http://blog.naver.com/marchlioon
    http://marchlion.hosting.paran.com

    박혜진 2010.04.26 00:41
  • http://poopootam.hosting.paran.com
    http://blog.naver.com/cutylady1004/110085046766

    함유경 2010.04.26 01:59
  • ryeoung0414.hosting.paran.com
    http://blog.naver.com/ryeoung0414/100104271804

    박혜령 2010.04.26 02:03
  • http://blog.naver.com/awiseapple
    http://awiseapple.hosting.paran.com

    김나래 2010.04.26 03:18
  • http://ddongbyun.wo.to/
    http://blog.naver.com/dnflehofkddl/130084952718

    변민녕 2010.04.26 04:00
  • http://happywony.wo.to
    http://blog.naver.com/6607144

    교수님 파란 계정에서 자꾸 안되서
    wo.to에서 다시 했습니당!

    황다원 2010.04.26 04:26
  • http://blog.naver.com/bmk1218
    교수님, 파란에 웹호스팅이 에러나고 안되서 wo.to신청해놨는데 이메일기다려야해서 아직 못했습니다. 일단 태그짜서 완성해놓은것만 캡쳐해서 올렸어요.

    배민경 2010.04.26 04:44
    • http://min1218.hosting.paran.com

      배민경 2010.04.26 13:02 DEL
  • http://sweetignt.hosting.paran.com
    http://blog.naver.com/sweetignt/40105422504

    김현진 2010.04.26 04:55
  • http://albbangbbangfam.wo.to/
    http://blog.naver.com/tricksoul

    양혜진 2010.04.26 05:44
  • http://hyosha.wo.to
    http://blog.naver.com/hyosha/90085824908

    이효숙 2010.04.26 06:25
  • http://kangseohyun.com/
    안되면 http://kkirugi.wo.to/
    http://blog.naver.com/cola_ice/10085147923

    강서현 2010.04.26 06:52
  • http://blog.naver.com/bijou0621/104432835
    http://sohyun0621.hosting.paran.com/

    조소현 2010.04.26 07:08
  • http://kangyewon.hosting.paran.com/
    http://blog.naver.com/yew5n/130084954544

    강예원 2010.04.26 07:37
  • http://blog.naver.com/chgmldit/30084995705
    http://chochohee.wo.to

    박초희 2010.04.26 08:45
  • http://cciess.hosting.paran.com/
    http://blog.naver.com/juyoung2341

    오주영 2010.04.26 10:06
  • 이제 됩니다!! 얏호.
    http://shieeet.hosting.paran.com/

    http://22020.tistory.com/

    ㄷㅏㅇㅡㄴ 2010.04.26 12:08 신고
  • http://blog.naver.com/crystalwine6/140105695817
    http://owldr403.wo.to

    서가은 2010.04.26 12:34
  • http://blog.naver.com/som0satang/150085150668
    http://hyejiworld.hosting.paran.com

    김혜지 2010.04.26 12:41
  • http://blog.naver.com/tnfus0523/100104285033

    입니다
    처음 디자인과 많이 바뀌었어요(처음것은 블로그에)
    http://ssregitong.wo.to/


    010 7537 9407

    홈페이지 배경에 쓰인 연기 이미지는 저작권상
    문제가 없는 브러쉬를 다운받아서 한것입니다.

    김수련 2010.04.27 17:06
  • http://baha58.wo.to/
    http://blog.naver.com/baha58/150084256024

    김바다 2010.04.28 21:12

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

Podcast? 팟캐스트?

팟캐스트에 대한 사전적 의미

팟캐스트는 애플의 아이팟(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 아이콘을 삽입하는 방법

RSS 아이콘을 삽입하는 방법은 
  • 아래의 사이트에서 적당한 아이콘을 다운받는다.
  • 티스토리 블로그에 비공개로 사진을 올린다.
  • 마우스 우클릭해서 이미지 주소를 복사한다.

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


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



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

웹디자인 5주차 과제

  • http://blog.naver.com/cola_ice/10084338700
    궁금한 점은 포스트에 글을 써놨습니다..

    강서현 2010.04.11 21:42
  • http://blog.naver.com/sweetignt/40104588208
    메인 다음의 페이지를 어떻게 해야할지 아직 막막해요,,계획했던게 있는데 수정을 해야할까봐요 ㅠㅠ

    김현진 2010.04.12 00:33
  • http://blog.naver.com/crystalwine6/140104873417

    서가은 2010.04.12 02:14
  • http://audubon.tistory.com/

    김보람 2010.04.12 03:21
  • 포스트주소를 못찾겠습니다..zzZ
    http://22020.tistory.com/category/

    ㄷㅏㅇㅡㄴ 2010.04.12 04:06 신고
  • http://99dimension.com
    브라우저에 따라 화면이 다르게 나오는데 어떻게 해야할지 모르겠습니다..- -;

    조예지 2010.04.12 10:34
  • http://blog.naver.com/i1514/60105310206

    문정윤 2010.04.12 10:34
  • http://blog.naver.com/hyosha/90084922615
    벤치마킹은 컨텐츠위주로만 했고, 지금 html로 작업중입니다

    http://blog.naver.com/hyosha/90084945797
    html로 작업한것 첨부했습니당

    이효숙 2010.04.12 10:34
  • http://blog.naver.com/baha58/150084255287
    알집에 있습니다.

    김바다 2010.04.12 10:36
  • http://blog.naver.com/cutylady1004/110084257081
    파일첨부해놨습니다. 그림이 자꾸 밀려서 나와요...

    함유경 2010.04.12 10:39
  • http://blog.naver.com/ryeoung0414/100103460130 첨부파일로 올렸습니다.

    박혜령 2010.04.12 10:40
  • http://blog.naver.com/ricoda/103653089
    아직 많이 진행하진 못했습니다. 페이지 크기를 다시 설정하고 해야할 듯 합니다.

    안정호 2010.04.12 11:15
  • 일단 파란계정 연결은 하고봤는데.. 무료계정도 문제고 기본 태그에도 뭐가 문제인질 모르겠는게 있어서 일단 확인용 덧글먼저 답니다 죄송합니다..이름을 클릭하시면 페이지가 이동돼요. 주소는 일단 달아놨지만 확인하실수 없어요 ㅠㅠ;;
    월요일 오전에 다시 해보려고합니다 이해를 잘못하고있는건지 답답해요ㅜㅠ 월요일에 여쭙겠습니다

    권서윤 2010.04.18 23:37
  • http://baha58.hosting.paran.com 했습니다.
    다른 advertising이나 artworks는 차차 올리겠습니다.
    나머지는 다 연결되어있습니다.
    그리고 아직 css는 어디에 써야할지 몰라서 손대지 않았습니다.

    김바다 2010.04.19 00:05
  • 교수님 그런데 혹시 이미지 위에 글을 쓰는건 불가능한가요?
    카테고리에 일기를 만들어놨는데, 일기를 쓰고 링크를 걸어둘수는 없나요???

    김바다 2010.04.19 00:10
  • 아직 코드 짜는 단계이긴 한데 테이블이나 모양이 조금씩 밀리는 것 같아요 ㅜ
    첨부파일로 올렸습니다

    김나래 2010.04.19 03:59

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 모바일 디자인 담당자 특강 건 - 가능한 날짜 알려주세요.

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

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

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

posted by jisunlee

웹디자인 과제 4주차

  • 이전 댓글 더보기
  • http://blog.naver.com/bmk1218

    배민경 2010.04.05 01:38
  • http://blog.naver.com/cutylady1004

    함유경 2010.04.05 01:42
  • http://blog.naver.com/ceylon88

    이태경 2010.04.05 02:00
  • http://blog.naver.com/morphine_0

    조예지 2010.04.05 02:03
  • http://blog.naver.com/crystalwine6

    서가은 2010.04.05 02:04
  • http://blog.naver.com/ryeoung0414

    박혜령 2010.04.05 03:05
  • http://blog.naver.com/yew5n/130083702091

    강예원 2010.04.05 03:09
  • http://22020.tistory.com/category/Web.

    어랏? 기획..만 했습니다. 이대로 실제 이미지 넣고 작업해서 올리겠습니다..
    위에서부터 게시물 3개 차례대로

    3.페이지디자인 기.획.
    2.서치
    1.기획서

    +추가
    메인& 서브페이지 디자인.

    ㄷㅏㅇㅡㄴ 2010.04.05 03:42 신고
  • http://blog.naver.com/tricksoul

    양혜진 2010.04.05 04:11
  • http://blog.naver.com/18444

    강현진 2010.04.05 04:32
  • http://audubon.tistory.com/

    김보람 2010.04.05 06:13
  • http://blog.naver.com/ricoda

    안정호 2010.04.05 06:50
  • http://blog.naver.com/juyoung2341

    오주영 2010.04.05 07:47
  • http://blog.naver.com/nana221___

    최미나 2010.04.05 08:37
  • http://blog.naver.com/hyosha

    이효숙 2010.04.05 09:12
  • http://blog.naver.com/som0satang

    김혜지 2010.04.05 10:01
  • http://blog.naver.com/i1514/60104895078
    [출처] 포트폴리오 사이트의 메인과 서브페이지 디자인|작성자 i1514
    http://blog.naver.com/i1514/60104895241
    [출처] 기획 사이트 메인 디자인 이미지 스케치 |작성자 i1514

    문정윤 2010.04.05 10:42
  • http://blog.naver.com/cola_ice/10083937934

    강서현 2010.04.05 10:43
  • http://blog.naver.com/chgmldit/30083778934

    박초희 2010.04.05 23:15
  • http://blog.naver.com/tnfus0523/

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

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

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

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

웹디자인 3주차 과제


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

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

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

posted by jisunlee

웹디자인 1주차 과제 - 여기에 댓글로 달아주세요.

  • 이전 댓글 더보기
  • morphine_0@naver.com
    http://blog.naver.com/morphine_0
    초대장 보내달라는 말을 방명록에 썼더니 안 보셨나봐요..T_T

    조예지 2010.03.13 02:57
  • peppershake@naver.com
    http://bsshake.tistory.com/

    trers 2010.03.13 11:20 신고
  • ricoda@naver.com
    http://blog.naver.com/ricoda

    안정호 2010.03.13 15:27
  • conyunv@naver.com
    http://blog.naver.com/conyunv

    서윤석 2010.03.13 15:31
  • tnfus0523@naver.com
    http://blog.naver.com/tnfus0523

    김수련 2010.03.13 18:31
  • bae.minkyeong@gmail.com
    http://blog.naver.com/bmk1218

    배민경 2010.03.13 20:32
  • marchlioon@naver.com
    http://blog.naver.com/marchlioon

    박혜진 2010.03.13 23:02
  • awiseapple@nate.com
    http://blog.naver.com/awiseapple

    김나래 2010.03.14 00:59
  • cutylady1004@naver.com
    http://blog.naver.com/cutylady1004

    함유경 2010.03.14 02:05
  • bijou0621@naver.com
    http://blog.naver.com/bijou0621

    조소현 2010.03.14 11:20
  • hyosha@naver.com
    http://blog.naver.com/hyosha

    이효숙 2010.03.14 13:12
  • specialchin@gmail.com
    http://blog.naver.com/tricksoul

    양혜진 2010.03.14 16:39
  • aruwlove@nate.com
    http://blog.naver.com/yew5n

    강예원 2010.03.14 16:43
  • 6607144@naver.com
    http://blog.naver.com/6607144

    황다원 2010.03.14 21:24
  • k18444@hotmail.com
    http://blog.naver.com/18444

    강현진 2010.03.14 22:07
  • som0satang@nate.com
    http://blog.naver.com/som0satang

    김혜지 2010.03.14 22:43
  • ryeoung0414@naver.com
    http://blog.naver.com/ryeoung0414

    박혜령 2010.03.15 00:58
  • nana221@naver.com
    http://blog.naver.com/nana221___

    최미나 2010.03.15 01:59
  • juyoung2341@nate.com
    http://blog.naver.com/juyoung2341

    오주영 2010.03.15 09:53
  • sweetignt@naver.com
    http://blog.naver.com/sweetignt

    김현진 2010.03.22 11:33

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