Visual & Media Design

게시판을 수정해서 운영하는 형태들을 고려하신분들은 워드프레스를 쓰시는 방안으로 결정하는게 좋다고 합니다. (민원기님 자문) 그래서 워드프레스를 설치를 해서 써야 하는데 이런경우에는 가상 서버 호스팅을 받아서 써야 한다고 합니다. 음. 결국은 돈이 좀 들어가야 할것 같습니다. 우선 다음 수업시간이 수업을 들어보고 결정하던가... 아니면 무조건 모바일쪽에 게시판을 써서 뭔가 제공을 해보겠다고 생각하시는 분들은 아래 민원기님의 메일을 참고하셔서 워드프레스를 설치하는것을 수업시간에 배울수 있도록 가상서버호스팅을 미리 신청하시기 바랍니다. 어쨌든 이번에 잘 만들어서 계속 가지고 있겠다고 생각하면... 자신의 웹페이지를 도메인으로 사서 웹사이트와 모바일쪽에서 모두 운영하겠다고 생각하시면... 가상 서버 호스팅을 받..

예술의 전당 한가람미술관 : 디자인 & 아트페어 http://www.designartfair.com/sub01_02.html 삼원페이퍼갤러리 : 도쿄디렉터즈클럽 전시. -> 작년에 갔엇는데... 전시규모는 작았지만 괜찮았음 http://www.papergallery.co.kr/

다음주까지 디자인 이미지작업 완료해 옵니다. 숙제한것은 블로그에 올리시고 여기에 댓글로 블로그 포스트 URL을 달아주세요. 코딩은 그 다음주부터 본격적으로 들어가서 기말에 최대한 완성도를 높이는것에 포커스를 맞추시기 바랍니다. 디자인 컨셉이 바뀌신분은 프리젠테이션 화일도 업그레이드 하시고 디자인 이미지 작업도 완료해 오시기 바랍니다. 다음주에는 민원기님이 동화책, 동영상 모바일웹에서 삽입하는것을 특강하실 에정이고 워드프레스는 현재 서버문제로 다시 방법을 찾고 있습니다. 조만간 다시 공지토록하겠습니다. 그리고, 금요일 열린대학 디자인전공 금요일 오후 2시 한상은 라운지 꼭 참석바랍니다. http://www.snow.or.kr/common/notice.html?mode=viewForm&uid=36

http://www.tutorialized.com/tutorials/Photoshop/Textures-and-Patterns/1 http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/ Texturing of Old Paper Abstract Background of Colored Bars The Ultimate Wood Texture Tutorial Liquid Blood Background Fabric Folds Smooth Silk Texture Creating a Wrinkled Paper Effect Creating a Mac-Type Background in Photoshop Windows Vista Aurora Effect Cr..

http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/ Design Commission Design Commission is another website that uses a very clean content area with a textured background. The background of Design Commission also includes a slight red color on the left side to give it some variety. Carbonica Carbonica uses neutral-colored textures throughout the design of its website. Headli..

http://inspiredology.com/26-hand-drawn-websites/ http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/

Illustrated Vector Landscape Web Design Trendhttp://www.blog.spoongraphics.co.uk/articles/vector-cartoon-and-illustrated-landscape-web-design-trend http://www.divvoted.com/ http://www.meomi.com/

게시판 이용 : 썸네일이 표시되는 목록, 그림과 텍스트의 내용페이지 표시 -> tistoy, 직접 DB 구성 (Word Press => 민원기님) 동화책을 구현할수 있는 방법 -> 다음, 이전으로 이미지를 이동하면서, 목차로 이동하는 기능의 구현 동영상을 삽입하여 구동하는 방법 -> YouTube의 URL 삽입, MP4, H.264 코덱 동영상 삽입 -> 태그를 입력하여 동영상과 같이 띄우는데. 검색하는 방법에 대해서도 추가하였으면 함

1. 자신의 모바일 웹프로젝트는 작은 두꺼운 종이 카드에 그리고. 어떻게 구현할것인지 스케치해볼것. 2. 친구/가족에게 자신의 종이카드로 만든 모바일 사이트를 보여주고 사용해보라고 하면서 클릭하는대로 다음 화면을 보여줌. 좋고 나쁜것에 대한 피드백을 받고 정리할것. 이것을 반영하여 스케치를 고침. 3. 정보구조도 형태 또는 수행 프로세스(task 수행순서)에 따라서 늘어놓고 디지털 카메라로 사진을 찍어서 블로그에 올릴것.

정보구조 : 최신트렌드 http://informationarchitects.jp/ http://www.informationarchitects.jp/en/wtm4/ What web designers could learn from print designers View more presentations from Erlend Debast. The Art Of Colors View more presentations from Elisa Giaccardi. 분학 보색, 3색, 4색, 유사색 설정하여 웹사이트 샘플에 적용할수 있는 사이트 Export 기능을 이용하면 웹사이트 코드로 받거나 text로 받고... Photoshop에서 자신만의 swatch 를 만들어서 save 하여놓으면 일관성있게 작업을 할수 있음 (lo..

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

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단계 전..

다음주 과제는 코딩을 마무리하시고 민원기님에게 질문사항을 여기에 댓글로 올리시고 각자 모바일웹 구현하고 싶은것을 몇자로 적어서 댓글로 달던지 블로그에 자기가 구현하고 싶은 어플사이트나 모바일 웹 사이트를 올리고 그 블로그 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..

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

아이폰용 브라우져 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..

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

드림위버와 포토샵을 함께 쓰는 방법을 설명하고 있습니다. 이미지레디의 기능이 포토샵 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 하이퍼링크와 관..

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

강 의 계 획 서(Syllabus) 2010학년도 제 2학기 숙명여자대학교 *강의과목 교과목명 (Course Name) 웹디자인Ⅱ Web design Ⅱ 학수번호/분반 (Course No./Class) 06286/02 수강대상 (Major) 학점/시간 (Credits/Hours) 2/3 요일/교시 (Day/Period) 월 3-5 강의실 (Classroom) 미술대407 강의종류 (Method) 이론(Theory)( ) 이론 및 실습(Theory&Practice)(∨) 실험,실습,실기Experiment&Practice( ) *담당교수(Professor) 교수명 (Name) 소속 (Department) 연락처 (Personal Number) 공개전화번호 (Office Number) E_Mail 상담시간 (..