Visual & Media Design

디렉팅과 기술적인 부분은 최진권님께 의뢰할예정이고 이것을 기말까지 본인의 과제로 같이 하고 싶으신분들의 신청을 받습니다. 아래에 비밀글로 본인의 이름, 전공, 이메일, 전화번호를 적어주시기 바랍니다. 기한은 내일 수업전까지 입니다. 수업시간에 최진권님과 상의해서 결정하도록할께요.

중간 발표를 못하신 분은 저에게 직접 찾아와서 pt할것 전화를 미리주어서 시간을 확인하시기 바람 아래 코멘트를 참고하여 기말까지의 과제 진행 스케쥴을 짜서 자신의 블로그에 올릴것 기술적으로 어떻게 구현할지. 필요한 도움은 무엇인지도 올릴것. IA를 좀더 보강하고, 디자인 시안을 메인과 서브페이지, 내용페이지 세단계로 나누어 디자인하여올것 그리고 데이타를 모으거나, 벤티마킹을 좀더 진행하는 과제를 수행할것. 기술적 정보를 제공이 추가적으로 더 이루어 질것임 게시판 이용 : 썸네일이 표시되는 목록, 그림과 텍스트의 내용페이지 표시 동화책을 구현할수 있는 방법 동영상을 삽입하여 구동하는 방법 강지연 포트폴리오 홈페이지 : http://dreamealist.comyr.com/ 모바일 포트폴리오 홈페이지 : ht..

오늘 10월 21일 수업 서울 시립미술관에서 진행합니다. 중간발표에서 어떤것을 발표하실지 고민하는 분들께 좋은 자극이 될것같아 그리 결정했습니다. 전시공식홈페이지 http://www.mediacityseoul.org/2010/ 서소문로 본관 오는길 안내 http://seoulmoa.seoul.go.kr/kor/information/information_1.jsp 10시에 매표소 앞에서 봅니다. 수업은 그쪽에서 진행토록 하겠습니다.

http://www.koddco.com/main.asp

CSS Inheritance - a simple step-by-step tutorial View more presentations from Russ Weakley. Head First HTML with CSS & XHTML: 웹2.0 시대의 웹 표준 학습법 http://www.yes24.com/24/goods/2104548?scode=029&srank=3 CSS Cascade View more presentations from Russ Weakley.

10월 25일 중간발표 준비사항 1. 자신의 포트폴리오 html or mobile 사이트 완성 자신의 포트폴리오 사이트를 CSS 화일을 연결한 (external) HTML 작업하여 파란 웹호스팅에 업로드할것 모바일 웹은 사파리 브라우져로 보여주세요. ** 해당 웹호스팅 URL을 여기에 댓글로 달고 자신의 블로그에 캡쳐한 화면과 동시에 URL을 포스팅 할것 2. 중간발표 이후 기말까지 진행할 프로젝트 기획 발표 아래내용이 포함되어야함. 기존의 웹디자인 5주차에 이미 기 공지된 내용임. ** slideshare.net 슬라이드쉐어닷넷에 업로드 하고 그것을 자신의 블로그에 삽입한뒤에 그 포스트 URL을 아래에 댓글로 달것 - 파워포인트 업로드할때 폰트가 깨져보인다면, pdf로 만들어서 업로드 하면됨 1단계 전..

10월 14일 다음주는 최진권씨 특강이 있습니다.미리 카메라촬영하고 촬영한 동영상을 컴퓨터에 카피하기- 촬영시 궁금했던것 질문하기... 질문을 여기에 댓글로 올려도 좋을것같습니다.프리미어로 어떻게 편집하는지... 저장 방법 등등을 설명해주실겁니다.그리고 blip.tv에 올려서 웹상에서 공유하는 방법을 알려주실거예요.간단하게 프리미어나 에펙에서 타이포나 일러오브젝트를 얹는 방법에 대해서도 설명해달라고 부탁할께요. 10월 21일에 제 강의는  live action, typography에 대한 강의를 할것입니다.숙제 밀린것 + 진권씨랑 같이 진행하신 숙제를 해오세요. - 스틸컷 합해서  에니메이션 만든기 - 타이포로 모션표현하기- 진권씨랑 진행하는 실사를 디카로 동영상 촬영하고 그위에 모션그래픽 오브젝트를 얹..

지난번 타이포를 이용해 모션을 표현해 보는 과제를 마저 완성바랍니다. 그리고 오늘 최진권님이 강의해주시는 DSLR 카메라(캠코더도 무관)를 이용하여 동영상을 촬영하고 간단한 편집까지 해서 올리는것이 다음주까지의 과제. 중간고사까지는 촬영한 동영상위에 그래픽 요소를 얹어서 완성해서 중간고사 과제로 발표 (이것에 대한 예는 다음주에 보여주도록 하겠습니다.)

Good Design for Everyday Living Part 1 http://www.youtube.com/watch?v=GkIkOTjjQWk http://www.youtube.com/watch?v=wRGqBRmYYsE http://www.youtube.com/watch?v=INvmdtqZBoM http://www.youtube.com/watch?v=XvGjZtvONCk http://www.youtube.com/watch?v=oFM7OHgx4vQ http://www.youtube.com/watch?v=7BBWEttFPVA http://www.youtube.com/watch?v=s4VE7FWhws4 http://www.youtube.com/watch?v=WsxZ9K2ptpE http://www.hill..

바우하우스 다큐멘터리 총 7개 파트 http://www.youtube.com/watch?v=QUw6h4I9oE4 첫부분은 독어 그뒤는 영어나레이션에 독어 캡션 http://www.youtube.com/watch?v=urCNY-082jE http://www.youtube.com/watch?v=8OjDIOmLOq8 http://www.youtube.com/watch?v=N4_AxqmU_Wc http://www.youtube.com/watch?v=N7xL_ZjYqA4 http://www.youtube.com/watch?v=yaf7aBPb1zE http://www.youtube.com/watch?v=6Q0xCSwysy0 http://www.youtube.com/user/artsmia Modernism: Brit..

Snowvice 지식모둠 http://www.snow.or.kr/note/culture/art/2503_1.html ted.com youtube.com http://channel.walkerart.org/browse/genre/architecture-design/ http://channel.walkerart.org/browse/genre/new-media/ http://vimeo.com/svaixd http://www.artbabble.org/channel/Graphic_Design http://video.google.com/videoplay?docid=9148348502370492159&ei=iN-YSYaUBae6qAOTg73XDA&q=CMU+Design+Lecture# http://www.youtub..

다음주 과제는 코딩을 마무리하시고 민원기님에게 질문사항을 여기에 댓글로 올리시고 각자 모바일웹 구현하고 싶은것을 몇자로 적어서 댓글로 달던지 블로그에 자기가 구현하고 싶은 어플사이트나 모바일 웹 사이트를 올리고 그 블로그 URL을 여기에 댓글로 달것 민원기님이 다음시간에 매쉬업 에 대해서 설명해 주실예정이고 이미지 슬라이드 등의 초간단 자바스크립트에 대해서 설명해주실겁니다. **** 귀한 시간내서 오시는것이므로 미리미리 질문을 준비해 오시길 바랍니다. *** 모바일 웹은 이때 모두 종료하시기 바랍니다. 10월 18일에는 CSS를 다시한번 리뷰해드리도록 하겠습니다. 그리고 시간이 허락하는대로 뷰티뷸 웹디자인의 2장도 강의할 예정 10월 25일은 중간고사 발표로 - 자신이 이제 까지 개발완료한 모바일웹 포트..

출처 : http://xguru.net/593 --- 생략 --- Mobile Web App 의 종류 Web App 이라고 해서 기존의 Web Site 에 비해 특별한 것은 아니지만, 모바일 관점, 특히 HTML5 기술을 기반으로 하는 Web App 들의 경우 다음과 같이 나눠 볼수 있습니다. Online Web Application 기존의 모바일 웹페이지를 포함한 웹 앱을 의미한다. HTML5, CSS3 등을 통하여 모바일 에서의 UI / UX 를 향상한다. GeoLocation API 를 이용하여 위치가 고정되지 않는 모바일의 장점을 활용한다. 주로 포털이나 컨텐츠를 리딩하는 형태의 앱이 많다. Offline Enabled Web Application Application Cache , LocalSt..

보호되어 있는 글입니다.

1. 현재 코딩된것에서 기본적으로 코딩할때 지켜야 할것 에 들어가는 태그로 넣어야 하는것 + home 버튼에서 추가하는 방법 => icon으로 추가 (아이콘 생성/이미지 사이즈, 업로드 방법) + 자기만의 인트로 나오고 홈페이지 나오는 방법 - 모바일에서 지원 안하지는 태그들 - 모바일웹에서 하지 말아야 할것들 2. m.도메인.com 연결방법 유저 브라우저 구분하는 방법 3. 모바일웹에서 자바로 추가해서 구현 가능한것들 www.geekshop.co.kr > shop info > 매장사진보기 http://scany.net/p/photoList.php?pagenum=421&id=list&background-color=%23000&background-image=normal_gray&tint-color=%230..

추석은 잘 보내셨는지요? 지난번 type으로 모션을 구현해 보는 과제에 대해서 오늘 여기에 댓글로 포스팅 바랍니다. 그리고 오늘 수업에 동영상이 되는 DSLR 카메라를 가져오시기 바랍니다. 렉앤플레이의 최진권님의 특강이 있을예정이오니 이점도 양지 하시기 바랍니다.

과제는 수업시간에 공지한대로 현재 작업중이 모바일웹 또는 인터넷 포폴 사이트의 코딩을 완료하는것입니다. 혼자 끙끙대지 마시고 문제가 생기면 저에게 이메일을 보내서 물어보시기 바랍니다. 그리고 다음월요일부터는 민원기님이 수업에 들어오셔서 코딩부분에 대한 특강을 진행할 예정이오니 이점 양지 바랍니다.

아이폰용 브라우져 http://www.opera.com/mobile/demo/ 창크기를 줄여서 볼것 http://mowser.com/

http://www.mobileawesomeness.com/ 블루밍데일 모바일웹페이지 http://www.mobileawesomeness.com/listings/gallery/bloomingdales/ http://m.bloomingdales.com/mt/www.bloomingdales.com Books and eBooks Mobile Web Design (Paperback) by Cameron Moll - Get the digital version here Building Mobile Web Sites by Richard Yates Mobile Web Development by Nirav Mehta dotMobi Mobile Web Developer's Guide - free with registrat..

모바일 웹페이지 웹표준 basic.html을 만들어보자. 모바일 홈페이지는 가급적 가로 스크롤을 보이지 않아야 한다. 그래서 DOCUTYPE에 XHTML mobile을 지정해주면 좋다. 하지만 m.naver.com은 을 사용한다. 그리고 특수 meta tag 'viewport'를 사용한다. viewport는 다음 링크에서 확인해보기 바란다. http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html http://learnthemobileweb.com/2009/07/mobile-meta-tags/ user-scalable=yes : zoom in/ou..

네이버 m.naver.com http://m.news.naver.com/css/news/d.css common css 설정부분 /*common*/ * { margin:0; padding:0; font-family:"나눔고딕", NanumGothic, "굴림", Gulim, Helvetica, AppleGothic, Sans-serif; -webkit-text-size-adjust:none; } body { position:relative; background-color:#f8f8f8; line-height:1.25em; color:#000; word-wrap:break-word; word-break:break-all; } body, input, select, textarea { font-size:14px..

SlideShare로 주로 많이 공유했었는데... 실제 인쇄상태의 퍼블리케이션을 제공하는 issuu에 홀딱 반했습니다. 역시 아날로그적인 습성을 버리기는 힘든듯... 멋진 잡지가판대에 앞에 선듯한 느낌. http://issuu.com/ Open publication - Free publishing - More photography 럭스미디어 김대표님이 추천해주신 사이트 http://www.inkling.com/

모바일 웹을 하시는 분들은 코딩을 어느정도 완료해서 FTP에 올려주세요. 모바일 에뮬레이터로 확인해보겠습니다. 다음시간에. 자신 포폴 하고 계신분들, CSS 쓰셔서 코딩완료 모른시는분들 꼭 질문하세요. Beautiful Web Design 좋아보이는 웹사이트를 만드는 디자인 원칙 The Principles Of Beautiful Web Design View more documents from SitePoint. 직접 다운로드 받으실수 있으니 책을 구매하시기 어려운 분들은 읽어보시길 바랍니다. 1장만 원서로 보실수 있습니다.

9월26일, 뮤지션들이 스튜디오 라이브를 촬영했던 바로 그 공연장에서 라이브 플래닛의 첫번째 에피소드 시사회를 개최합니다. 최고의 상영환경이 갖추어진 웰콤시어터에서 프로젝트에 참여한 뮤지션과 함께 영상을 감상하는 시간을 갖고자 합니다. 일시 : 2010년 9월 16일 (목) 오후 7시 반 장소 : 웰콤시어터 (지하철 3호선 동대입구역 1번출구) 러닝타임 : 90분 문의 : 최진권 [visualic@offbeat.co.kr / 010-4103-4835] MUSICIANS 몽구스, 서울전자음악단, 얄개들, 갤럭시 익스프레스, 3호선 버터플라이 http://www.recandplay.net/

드림위버와 포토샵을 함께 쓰는 방법을 설명하고 있습니다. 이미지레디의 기능이 포토샵 CS3부터 흡수되었다는군요. 동영상 투토리얼에서 스타일 쉬트까지도 쉽게 적용할수 있는 방법을 설명하고 있습니다. http://tv.adobe.com/watch/taming-the-web-with-greg-rewis/using-starter-layouts-part-1 http://tv.adobe.com/watch/taming-the-web-with-greg-rewis/using-starter-layouts-part-2/ http://tv.adobe.com/watch/taming-the-web-with-greg-rewis/using-starter-layouts-part-3/ http://tv.adobe.com/watch/ta..

SVA Dot Dot Dot Lectures: Jason Santa Maria from MFA Interaction Design on Vimeo. 강의를 한 Jason의 개인 블로그 및 포트폴리오 사이트 http://jasonsantamaria.com/portfolio/tmbg/ Wired 잡지 사이트 http://www.wired.com 와이어드 잡지 디렉터 스콧다디히의 디자인 강연 스노우에서 해당 동영상보기

웹디자인 1을 듣지 않은 사람은 지난주 과제에 CSS를 적용하여 코딩하여 볼것 참고 : http://visualcommunication.tistory.com/entry/사이트가-전체-테이블-100인경우와-CSS화일을-불러들이기extenal CSS StylingStyling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box ModelCSS Box Model CSS Border CSS Outline CSS Margin CSS Padding 모바일 웹디자인 작업이 진행되는 사람들은 코딩에 돌입할것. 코딩작업시 CSS 반드시 사용 모바일 디자인으로 우선정한 교재 Mobile Web Design For ..

html화일 코드는 다음과 같습니다. 바깥에 텍스트 표시 english좌측 고정경우 첫번째메뉴 두번째메뉴 세번째메뉴 네번째메뉴 브라우저창을 움직여보면 우측은 사이즈가 변하는것을 볼수 있음 여기서 가져오는 css화일은 mystyle.css로 지정하고 위의 html과 동일한 폴더에 위치합니다. 들어가는 코드는 다음과 같습니다. body { margin: 0px 0px 0px 0px; background-color:red; font-family:"굴림",Gulim,AppleGothic,Arial,Helvetica,Clean,Sans-serif; font-size:24px; } A { color: #3366cc; text-decoration:none;} A:link { color: #3366cc; text-de..

http://www.w3schools.com/html/html_css.asp HTML Introduction HTML Get Started HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Styles HTML Links HTML Images HTML Tables HTML Lists 웹페이지 제작을 위한 HTML & 드림위버 CS4 교재로 공부하는 경우 Part 0 홈페이지 제작을 위한 HTML 정복하기 Section 1 HTML의 기본 이해하기 Section 2 문서와 관련된 태그 Section 3 문자와 관련된 태그 Section 4 이미지와 관련된 태그 Section 5 하이퍼링크와 관..

이 위의 포스트의 댓글로 이름, 이메일, 본인 블로그 URL을 달아주세요. 처음 웹디자인을 들으시는 분은 간단하게 메인과 서브페이지를 만들로 만든 화일을 숙명계정으로 FTP에 올리는것을 시도해 보세요. http://visualcommunication.tistory.com/entry/%EC%88%99%EB%AA%85-%EA%B3%84%EC%A0%95%EC%9C%BC%EB%A1%9C-50M%EA%B9%8C%EC%A7%80-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EC%88%98-%EC%9E%88%EC%9D%8C FTP에 올리는것은 저와 한번 더 같이 해보도록 하겠습니다. 기존에 웹디자인 1을 들으셨던분들은 모바일용 웹디자인에 도전해 보시기 바랍니다...