Visual & Media Design

출처 : 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..

드림위버와 포토샵을 함께 쓰는 방법을 설명하고 있습니다. 이미지레디의 기능이 포토샵 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 와이어드 잡지 디렉터 스콧다디히의 디자인 강연 스노우에서 해당 동영상보기

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..

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

HTML5로 iPhone App 만들기 PPT http://www.slideshare.net/guruguru/html5-iphone-app HTML5 소개 및 배우기 http://www.slideshare.net/Channy/html5-html5-open-conference HTML5 on Mobile http://xguru.net/593 HTML5 실전 가이드 책자 입니다. PDF 문서로 Creative Commons Attribution Share-Alike License v3.0 라이센스 하에서 이용 가능합니다. http://webstandards.or.kr/html5

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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

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

영국식 발음이라서 알아듣긴 힘들지만 캡션이 달려있습니다. 개략적으로 이야기 하며, 다 유용한 이야기이니, 시간내서 한번 보시기 바랍니다. 한글번역 누구하실분?

보호되어 있는 글입니다.

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.

자신의 홈페이지 디자인하여 홈페이지로 만들기 1. 포토샵에서 자신의 홈페이지를 디자인한다. 디자인 할때는 사이즈와 그리드를 고려하여 디자인한다. 2. 우선 html에서 어떤식으로 테이블을 구성할것인가를 메모장 또는 드림위버를 이용하여 짠다. =>test 라는 게시글의 html 참고 요망 3. 필요한 영역에 이미지를 불러들여서 삽입한다. 4. 이미지 영역중 블로그로 연결할 이미지를 정하여 자신 블로그의 링크를 삽입니다. * html 태그를 익힐수 있도록 하는 과제이기때문에 드림위버나 각종 웹에디터에서 테이블을 그리거나 이미지를 삽입하지 마시기 바랍니다. * 자신의 블로그에 디자인한 html 화일을 캡쳐하고 해당 html과 img폴더에 들은것을 zip으로 압축하여 파일첨부하여 포스트 합니다. ~ 3월 22일..

보호되어 있는 글입니다.

title 01 title 02 title 03

보호되어 있는 글입니다.

Part 1. Web Design Process Part 2. Web Design Process Part 3. Web Design Process

드림위버/플래쉬/포토샵/일러스트레이터를 컴에 깔아서 쓰시기 바랍니다. 추천한 교재는 CS4버전을 포함하고 있으므로 버전을 구해서 깔기를 바랍니다. 수업시간에 소개드린대로 웹사이트 디자인하는 위의 프로그램을 배울 수 있는 사이트와 동영상을 몇개 소개 합니다. http://www.lynda.com/ http://tv.adobe.com/ 이 사이트에서 product 를 선택하시면 프로그램을 선택할수 있고 해당 프로그램의 동영상 목록 페이지로 가시면 원하시는 프로그램을 배울수 잇는 예제 동영상들이 있습니다. 드림위버 투토리얼은 다음에서 보실수 있습니다. 검색창에 html 을 쳐보셔도 원하시는 영상을 보실수 있습니다. http://tv.adobe.com/search/?q=Dreamweaver Tutorial

internet archive wayback Yahoo! http://web.archive.org/web/*/http://yahoo.com Google http://web.archive.org/web/*/http://google.com

강의계획서(Syllabus) 교과목명(Course Name) 웹디자인ⅠWeb design Ⅰ 학수번호/분반(Course No./Class) 06285/02 교과목 개요(Course Description) 시각정보의 요소들을 합리적이고 효과적으로 표현하는 창조적 디자인 능력을 웹 편집 프로그램을 활용한 실기를 통하여 웹디자인의 프로세스와 구성을 배운다. 교육목표(Course Objective) 웹디자인의 기획, 설계, 디자인, 개발 코딩에 이르는 전과정을 실습함으로써 자신의 적성에 맞는 웹디자인 분야를 알아가는데 목적을 둔다. 강의방법(Course Resources) 기말로 진행하는 개인 프로젝트는 클라이언트가 있는 웹사이트로서 개발한다. 주교재(Textbook) The Principles of Beaut..