interactive_design 594

2학기 웹디자인 관련 : 아이폰에서 모바일웹 만들기

Safari Web Content Guide 아이폰은 사파리브라우저를 사용합니다. 그래서 애플에서 나온 사파리 웹컨텐츠 가이드를 참고하시면 됩니다. 본 블로그의 컨텐츠 대부분도 가이드를 참고로 만들어집니다. (사파리 브라우저로 보는 것이 좋아요~) http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html TestiPhone.com - iPhone Simulator 아이폰에서 보이는 웹사이트를 대략적으로 시뮬레이션 해볼 수 있는 사이트입니다. 단순히 아이폰 해상도에서 어떻게 보이는지 정도만 참고하시는게 좋겠네요. 기능적인면까지 아..

디자인학제 관련 리서치자료

AIGA Education Session http://www.aiga.org/content.cfm/education 2015년의 디자이너를 규정하다. http://www.aiga.org/content.cfm/designer-of-2015 2006년부터, AIGA(the professional association for design)와 Adobe사가 팀을 이루어 미래 디자이너에 대해서 조명해 보려고 함 2015년의 디자이너의 능력 1. 문제를 커뮤니케이션하기위한 시각적 해결안을 개발하고 창조할수 있는 능력 - 구조, 타이포그라피, 미적감각, 구성, 의미를 담은 이미지를 구축하고 구성 2. 커뮤니케이션 문제를 해결할수 있는 능력 - 문제 규정, 리서치, 분석, 솔루션 도출, 프로토타이필, 사용자테스트, 평..

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

그림을 클릭하면 그림이 새 창에 뜨는 것 ←클릭해보세요 새 창(보통 팝업창이라고 하죠)이 자동으로 뜨는거하구 클릭해서 뜨는거를 설명합니다.. 아래의 빨간색 부분을 새창을 띄우는 링크를 하고 싶은 HTML 문서에 써 줍니다.. 위의 자바스크립트를 반드시 써줘야 새창이 나타납니다.. 위에서 지정된 openwindow() 함수에 의해 새로운 창이 뜨게 하는데요.. Links는 새 창의 이름입니다.. 창의 이름을 지정하여 두면 openwindow()를 사용한 곳을 클릭할 때마다 매 번 새 창이 뜨지 않고 하나의 새 창에서 클릭한 주소의 내용이 나타나게 됩니다.. Links 대신 ''로 작은따옴표를 바로 열고 닫고 하면 창의 이름이 없기 때문에 매번 새로운 창이 뜹니다.. x는 창의 width(가로 크기), y는..

숙명 계정으로 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를 제공하고..

웹디자인 1: 과제전 제출

1. 슬라이드용 디자인 자신의 웹사이트 디자인을 이미지를 1024*768 로 작업바랍니다. - 자신 웹사이트 디자인 컨셉소개 템플릿 포토샵화일 첨부합니다. 나눔고딕 ExtraBold를 사용하였습니다. 서체다운로드 : http://hangeul.naver.com/nanum.nhn 폰트를 먼저 인스톨하시고 포토샵을 여셔서 입력한뒤에 jpg로 만들어서 제출합니다. web_template.psd - 자신 웹사이트 디자인 이미지 백그라운드 없고, 브라우저 부분빼고 순수 이미지 영역만 4장 1024x768 사이즈로 제출합니다. 2. 웹사이트 링크로 연결할 부분에 대한 제출 - 타이틀, 링크 이름.txt (메모장에 적을것) - 썸네일 이미지 180px × 118px jpg 자신의 블로그에 올리고, 여기에 댓글 다시기..

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

박상원군에게 배운 플래시 투토리얼과 관련있는 동영상을 찾아서 올립니다. 박상원군에게 오늘 했던 예제화일을 받아서 추후에 포스팅하도록 하겠습니다. 예제화일 올립니다. 다운로드 받아서 해보시고 다음시간에 질문하시기 바랍니다. 박상원군이 추천하는 플래시 교재는 "Flash Navigation Patter" 플래시 네비게이션 패턴 18 윤용호 지음. www.thedofl.com/navigation18 절판되었다고는 하나 헌서점이나 도서관에서 찾아서 보면될것같습니다. 아도비에서 제공하는 동영상이기때문에 차근차근 따라하시면 어렵지 않을것입니다. 따라하시면서 오늘 한 내용도 복습해 보시기 바랍니다. 액션스크립트를 이용하여 링크를 제공하는것에 대한 투토리얼 http://tv.adobe.com/watch/flash-do..

웹디자인 1 : 5/10 과제전 & 과제 & 필독!변경공지!!!!

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

웹디자인 1: 5/3 과제

1. Main(1~2 페이지 이상) & Sub(5 페이지 이상) 디자인 마무리 => 블로그에 포스트하고 여기에 숙제 댓글 달기 주제를 바꾸거나 새로 정하신 분들은 다음시간까지 ppt마무리와 디자인까지 마무리하여서 저에게 보여주시기 바랍니다. 2. 교재 스터디 312 페이지의 배경 이미지고정과 외부 스타일 시트까지 최종 복습하여 마무리 합니다. 3. 위의 교재 및 제가 올려놓은 화일을 참고하여 external CSS 적용안한사람은 적용하여 완성하기 바랍니다. 이 포트폴리오사이트 숙제는 기말까지 계속가니 미리미리 끝내시길 바라니다. * 다음주는 뷰티풀 웹 디자인 교재로 넘어가서 강의토록 하겠습니다.교재 사지 않아도 됩니다. ** 서울대 박상원군이 플래쉬 메뉴 만드는 방법에 대해서 다음주 부터 2주간 특강을할..

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

1. 자신의 포트폴리오 html 사이트 완성 자신의 포트폴리오 사이트를 CSS 화일을 연결한 (external) HTML 작업하여 파란 웹호스팅에 업로드할것 ** 해당 웹호스팅 URL을 여기에 댓글로 달고 자신의 블로그에 캡쳐한 화면과 동시에 URL을 포스팅 할것 2. 중간발표 이후 기말까지 진행할 프로젝트 기획 발표 아래내용이 포함되어야함. 기존의 웹디자인 5주차에 이미 기 공지된 내용임. ** 이름.ppt에 정리하여 미리 수업 시작 전에 웹디자인 폴더한군데에 넣어놓을것. 1단계 전략수립(strategy / research) 1-1. Mission - 개발 하고자 하는 사이트의 미션은 무엇인가? 몇문장으로 정리 1-2. Objectives - 개발 하고자 하는 사이트의 목적은 무엇인가? 몇문장으로 정리..

파란 웹호스팅 - FTP 접속/업로드 방법

오늘 수업시간에 질문이 나왔던 파란 웹호스팅에 접속하는 방법입니다. 알 FTP를 쓰는 방법에 대해서 자세히 나와있습니다. http://bizfree.paran.com/helper/h/h_man_list.html 이 사이트에 들어가시면 좌측에 서비스별자료실>웹호스팅자료실>FTP접속안내 를 누르시면 팝업이 뜹니다. 이 팝업을 열러보시면 알 FTP를 다운로드 받을수 있는 링크가 있고 여기에 접속방법, 업로드 방법이 탭별로 정리가 되어 있습니다. 이거 따라 해보시고 잘 안되시는 질문 바랍니다.

모바일웹 특강

창학 B178 오늘 웹디자인 여기서 합니다. 7:00 pm 다음의 이효숙씨가 아래의 내용으로 특강을 해주실 예정입니다 1. 포탈에서 모바일 시장을 바라보는 시각 2. 모바일 어플과 모바일웹의 기획단계에서 고려해야 할 점 3. Daum의 어플 개발사례 : tv팟, 지도, 다음앱스, 티스토리 (아직 사내 오픈 예정인 어플 등) 4. 모바일 어플 UX가이드 소개 5. 모바일웹 UX가이드 소개 이지선

웹사이트에 동영상을 추가하는 방법

Vimeo, Blip.TV 에 올리거나 네이버, 네이트에 올리실수 있습니다. Vimeo가 광고도 안나오고 깔끔한 편입니다. Vimeo의 자세한 사용방법은 아래에서 찾으시길 바랍니다. http://blog.daum.net/miriya/15600858 여기 Vimeo에 업로드하면 임베디드 코드를 얻으실수 있는데 이걸 가져다가 본인의 html 또는 블로그에 삽입하시면 됩니다. 이지선

Podcast? 팟캐스트?

팟캐스트에 대한 사전적 의미 팟캐스트는 애플의 아이팟(Ipod)과 방송(Broadcasting)을 결합해 만든 신조어로, 포터블 미디어 플레이어(PMP) 사용자들에게 오디오 또는 비디오 파일 형태로 뉴스나 각종 콘텐츠를 제공하는 것을 말한다. 과거엔 특정 방송을 정해진 시간에 일일히 녹음해두었다가 청취해야 했지만 팟캐스트는 특정 방송 내용을 시간에 구애받지 않고 언제 어디서나 활용할 수 있다는 것이 가장 큰 특징이라 할 수 있다. 또한 뉴스, 영어학습, 음악, 강좌등 활용 방안은 무궁 무진하다고 할 수 있다. 팟캐스트를 활용하는 방법은 itunes, rss리더, 티스토리 플러그인을 제공하는 podics 를 이용하는 방법이 있다. 1.rss 리더 활용 아래 이미지는 구글 리더를 통해 팟캐스트 구독하는 화면..

RSS?

웹사이트에서 정보를 수집하거나 새로운 소식을 접할 때 일반적으로 흔히 하는 행동 또는 가장 손쉬운 방법은 포털 사이트에 접속하는 것입니다. 그리고 검색을 하고 중요하다 싶은 웹사이트의 경우 북마크를 하는 것이 아직까지는 가장 보편적이 행동입니다. 그러나 이러한 방법은 매번 별도의 웹사이트에 접속해야하며, 다른 일을 하다 새로운 소식을 바로 접하기가 상당히 어렵습니다. 또한 시간의 낭비도 많습니다. rss 는 뭔가요? 우리는 보통 신문을 매일 배달해서 구독합니다. 매번 가판대를 방문해서 신문을 사서 보지는 않습니다. rss란 real simple syndication 의 약자로 '정말 간단한 배급'으로 해석할 수 있습니다. 즉 간단한 배급을 통해 뉴스 사이트나 블로그를 방문하는 번거로움과 시간의 낭비를 덜..

RSS 아이콘을 삽입하는 방법

RSS 아이콘을 삽입하는 방법은 아래의 사이트에서 적당한 아이콘을 다운받는다. 티스토리 블로그에 비공개로 사진을 올린다. 마우스 우클릭해서 이미지 주소를 복사한다. 아래 태그를 사용해서 블로그 사이드바나 스킨의 적당한 곳에 삽입해 주면 된다. ()괄호는 로 바꿔줘야 한다. (a href="블로그 rss feed주소" target="_blank") (img src="블로그 이미지 주소" align = "middle" border = "0") (/a) 참고)target=blank를 제거하면 현재창에서 열린다. 다양하고 예쁜 RSS아이콘을 다운로드 받을 수 있는 사이트 » 10 Most Beautiful RSS Icon Packs for Web 2.0 » Social Networking Blog - So..

인터넷 자격증 - 웹디자인 관련

http://partners.adobe.com/public/ace/main.html Adobe사에서 주는 프로그램 별 공식 자격증 한국에도 있으나 포토샵과 일러밖에 없고 기회가 되면 영어로 된걸 따는것이... http://www.iadobe.co.kr/ 그외에 공신력있는 웹디자인 국제 자격증 => 한국에는 얼마나 알려져 있느지는 모르겠음 http://www.ciwcertified.com/exams/1d0520.asp 그러나 여기 자격증 준비 사이트의 참고자료를 보면 이 자격증을 준비하는데는 상당한 실력이 필요할것 같음 Third-Party Books, Web Sites, and Newsgroups The following resources are suggested as supplements to your..

개인 웹사이트 만들기 : 도메인, 호스팅... 드디어 무료 웹호스팅 발견!

호스팅은 이곳에서 신청하시고... http://hosting.paran.com/ 도메인 구입은... 젤 싸다고 올라온데가 http://dom.tt.co.kr/domain/info/price.php (한글/영문).com (한글/영문).net (한글/영문).org 1년 16,500원 (0%할인) 2년 30,800원 (6%할인) 3년 45,100원 (8%할인) .pe.kr 1년 11,000원 (0%할인) 2년 19,800원 (10%할인) 3년 29,700원 (10%할인) 친구들이랑 저녁먹는거 하루 안 먹는다 생각하고 눈 딱감고 구입하시면 3년은 제 이름으로된 도메인 홈피로 만들수 있죠. 여기에 html 로 우리가 배우는것을 만들수도 있고 게시판을 주로 넣는데... (소통이 안되는곳은 죽은곳이리라...) 전에는..

플리커 사진 슬라이드 쇼 웹페이지에 삽입하기

요새는 임베디드로 삽입 못하는게 없습니다. Flickr 는 이미 여러차례소개한 대로 전세계에서 가장 큰 사진 포털입니다. 여기에 개인 계정을 만들로 사진을 올리면 슬라이드쇼로 가져다가 쓰실수 있습니다. 방법은 아래 URL에 가서 해당 플리커 URL 만 가져다가 넣고 코드를 생성하셔서 본인의 블로그나 사이트에 가져다 넣으면 됩니다. http://www.flickrslideshow.com/ 아래는 백악관 플리커 사진 슬라이드 쇼 Created with flickr slideshow. 이것은 제 플리커 사진중에 세트 하나 Created with flickr slideshow.

웹디자인 5주차 과제

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 - 유사/ 경쟁 사이트..