Visual & Media Design

http://yoast.com/social-buttons/

http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

웹사이트의 페이지 로딩속도가 결국 인터넷 비니지스의 승패를 좌우한다라는 주장을 하는 책- book of speed 이 나왔습니다. 인터넷에 모든 컨텐츠가 공개되어 있습니다. 이중 웹디자인에서는 이미지 최적화 image optimazation부분을 눈여겨 보시면 되겠습니다 http://www.bookofspeed.com/chapter5.html 시간나는대로 번역해서 올릴예정입니다.

Add to home screen message for iphone and ipad 아이폰과 아이패드에 홈스크린 메시지를 더하기 스크립트 다운로드 받기 https://github.com/cubiq/add-to-homescreen/tarball/master 데모화면 http://vimeo.com/19090508 한글도 지원하므로 풍선말에 나오는 해당 텍스트가 자동으로 한글을 지원함 사이에 아래 스크립트를 삽입 위에서 다운로드 받은 스크립트의 폴더 "src"와 "style"폴더를 같이 업로드해서 각각 add2home.css와 add2home.js의 링크를 정확하게 표시해주어야 함.

모바일에 flickr 슬라이드 쇼를 넣는 방법 http://freejavascriptslideshow.com/flickr-javascript-slideshow-for-mobile.html 소프트웨어를 다운로드 받아서 구동시키면 코드를 자동 생성해 주고 원하는 부분에 넣으면 됨. 주의할것은 관련 폴더들을 모두 가져와야 함 flickr 사진을 PC 웹사이트에 슬라이드 쇼로 가져오는 방법 임베디드코드를 생성해서 원하는 부분에 가져다 넣기만 하면됨. http://www.flickrslideshow.com/ 예: 특정셋을 가져다가 넣었음 http://www.flickr.com/photos/jisunlee/sets/72157625948886045/ Created with flickr slideshow from so..

http://www.cssplay.co.uk/menu/gallery3l.html Cascading Style Sheet#gallery { padding:0; margin:0; list-style-type:none; overflow:hidden; width:320px; height:425px; border:1px solid #888; background:#fff url(windows/win_back.gif); } #gallery li { float:left; } #gallery li a { display:block; height:30px; width:320px; float:left; text-decoration:none; border-bottom:1px solid #fff; cursor:default; }..

출처 http://www.lokeshdhakar.com/projects/lightbox2/ 아래의 화일을 다운로드 받습니다. 아래의 화일들이 있어야 합니다. Download Lightbox v2.05 1. 자신이 작업하는 html 페이지에... 부분에 아래를 삽입합니다. 2. 원하는 이미지의 링크 태그에 아래처럼 삽입합니다. image #1

배경이미지 패턴으로깔아주기 스크롤바 디자인 바꾸기 http://www.iconico.com/CSSScrollbar/

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations See also Chapter 4. Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla

http://yensdesign.com/tutorials/popupjquery/ 버튼을 누르면 새창이 뜨면서 창부분만 하일라이트 됩니다. 요새 많이 쓰는 j쿼리의 투토리얼 입니다. http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

w3schools.com/css/

http://colorschemedesigner.com/

국내의 무료 웹호스팅을 제공하는 업체들 리스트 입니다. 닷홈. 사용방법도 아래에있어요. http://ilryu.tistory.com/113 해외의 무료 웹호스팅 대용량 http://blog.naver.com/PostView.nhn?blogId=parangbee&logNo=80120844021 국내 무료웹호스팅 라온넷 http://www.raonnet.com/

http://www.000webhost.com/order.php 계정을 신청하시고 파일 질라(다운로드: http://filezilla-project.org/download.php )에 가서 파일 > 사이트 관리자 를 선택하시고 자기가 만든 URL을 입력함 호스트(H) : www.(자신이입력한값).(랜덤주소값).net 사용자 : 입력하고 부여받은 번호 비밀번호 : 자기가 임의로 정한 비번 화일 5000개까지 공짜이고, 압축포맷은 잘 열리지 않음. 주의 할것 무료이면 언제든 날라갈수 잇으므로 반드시 백업을 자신의 컴에다가 해놓을것.

http://www.w3schools.com/html/default.asp HTML Tutorial 1 - Designing A Website In Notepad - Basics and Beginnings HTML Tutorial 2 - Colours, Fonts, Backgrounds Website Design HTML Tutorial 3 - Adding Images & Backgrounds To Your HTML Website HTML Tutorial 4 - HTML Website Tables & Layouts Tutorial HTML Tutorial 5 - Links & Menu Bars - Website Design Tutorial HTML Tutorial 6 - Putting Your Websi..

스매싱 매거진의 아이폰 앱중에 디자인잘된것에 대한 기사입니다. 2009년도 10월 http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/ Be Happy Now25 (iTunes Link26) Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface. Flickr13 [iTunes link14] Flickr is another example of how to achieve a good balance between functionality, visual design and the s..

http://blog.cocoia.com/2010/iphone-4-icon-psd-file/

http://www.junapps.com/bbs/board.php?bo_table=iphone_web http://b.headvoy.net/315 기본 투토리얼 http://webdevmobile.com/xe/jsframework iPad 용 JQ Touch https://gist.github.com/340427

http://neofuture.cafe24.com/jqtouch_medi/jqtouch-r148/sample/index.html 지난번에 민원기님이 주신것으로 간단한것을 만들어보았습니다. 음. 잘 뜯어서 해보세요. 저는 여기에 몇가지 기능을 추가하고 싶은데... 동영상 플레이연결하는것등등... 추가적인 질문 있으면 댓글로 달아주세요. 이번주 수업 월요일날 수시때문에 못한것은 주말에 미술관에 필드트립을 옵션으로 가는것으로 대치하려고 합니다. 좋은전시 있으면 알려주세요~

쉬운 설치 방법 (테마 및 플러그인) Winscp를 통해서 접속하고(cafe 24인경우 root 아이디로 들어가야함) 터미널을 구동함 1. VSFTP 실행 /etc/init.d/vsftpd restart 터미널창에 명령어입력에 위의 빨강글씨를 복사하여 입력 2. VSFTP 설정 FTP에서 최상위로 이동 /etc/vsftps/ftpusers (화일명) , user_list

사파리 브라우저는 깔고 기본설정의 고급의 제일하단에 개발자용으로 보기에 체크박스를 선택한 후 브라우저의 개발자용에서 사용자에이전트를 safari 4.1 iPhone으로 설정한다. 참고 : http://wkimin.tistory.com/15 샘플 데모 http://www.inheart.kr/html5/jqtouch-r148/sample/index.html 샘플 코드 http://www.inheart.kr/html5/jqtouch_sample.zip 테마 변경 themes/apple 또는 jpt 를 복사해서 새로운 자기 많은 테마를 만든다. 디자인 변경이 필요한곳 (이미지 변경 필요) sample/jqt_startup.png (320 * 480) sample/jqtouch.png (57 * 57) ABOUT..

민원기님 블로그 참고 http://wkimin.tistory.com/13 모바일 웹에서도 동영상을 재생할수 있는 간단한 방법을 알아 보겠다. * 3가지 방법이 있는데, blip.tv, youtube, vimeo 사이트를 사용하는 방법을 알아보자. * 주의점 blip.tv를 제외하고는 default로 모바일 영상을 제공하지 않습니다. 동영상을 업로드 하는 사용자의 선택에 의해서 모바일 영상 제공여부가 구분됩니다. 본인이 직접 동영상을 제작해서 업로드 한다면, 동영상 업로드시 mobile 동영상 제공 여부를 확인해야 합니다. 1) blip.tv 영상 (embed 코드) 2) youtube 영상 (iframe 코드) 3) viemo 영상 (iframe 코드) 4) test link www.inheart.kr/..

참고 : http://wkimin.tistory.com/14 1. 가상 서버 호스팅을 한다. 2. 신청 완료까지 카페 24의 경우 한시간정도 걸린다. 3. http://ko.wordpress.org/ 한국 워드프레스에 접속 http://ko.wordpress.org/download/ 에서 오른쪽의 빨간 버튼을 눌러 다운로드 한다. 4. 보안을 추가한 FTP 파일 전송 프로그램을 다운로드 받아 설치해 놓을것 winscp download (http://winscp.net/download/winscp429setup.exe) 5. 가상 서버 호스팅이 신청된 메일을 확이하여 Winscp 의 바탕화면의 아이콘을 더블클릭하여 실행... 호스트 이름 Domain neofuture.cafe24.com 포트번호가 비보안채..

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

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/

정보구조 : 최신트렌드 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..

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.