Visual & Media Design

이 박스를 라운드로 보이게 하려면 Firefox, Safari/Chrome, Opera, IE9를 이용하여 보셔야 합니다. http://www.cre8ivecommando.com/how-to-create-css-only-buttons-9243/ 이건 HTML 부분에 들어가는 부분으로 그냥 링크만 거시면 됩니다. I'm a Button! 이부분은 CSS로 head 부분이나 external css 화일에 삽입하시면 됩니다.

http://virtuelvis.com/gallery/css/rounded/ The CSS The top left and top right corners are created using the following CSS rule: .rounded:before { background: transparent url(top-right.png) scroll no-repeat top right; margin-bottom: -20px; height: 30px; display: block; border: none; content: url(top-left.png); padding: 0; line-height: 0.1; font-size: 1px; } The bottom left, and the bottom right c..

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced Home News Contact About

보호되어 있는 글입니다.

1. 모바일 페이지 작성시 사파리로 테스트 방법 1) 스마트폰으로 직접 페이지 열어보기 2) 사파리 브라우저를 이용한 개발자 도구 이용하기 3) 다운로드 http://www.apple.com/safari/download/ 위의 URL에서 웹브라우저 인스톨러를 다운로드 받습니다. 인스톨 하시고 나서 오른쪽 상단에 톱니바퀴같은것을 보실수 있습니다. 이 톱니 바퀴를 선택하시면 여러개의 메뉴가 보이고 "기본설정.."이라는것을 선택하시면 새로운 창에 여러가지가 뜹니다. 그중에 고급 아이콘을 클릭하시면 하단에 "메뉴 막대에서 개발자용 메뉴 보기"라는 것에 체크박스를 표시합니다. 그리고 나서 네모난 종이같은 아이콘은 상단 에서 클릭하면 "개발자용"이라고 메뉴가 새로 보이는 것을 확인할수 있습니다. "개발자용"을 클릭..

보호되어 있는 글입니다.

원래 웹사이트 메인 화일 여기에서 모바일 디바이스로 가는것을 구분해주는 js 화일 모바일웹사이트 메인 화일 이 세개의 화일을 다운로드 받아서 보세요.

Ex_Files_Adapt_Sites.zip

플래시 대신에 html 5, css, java script를 이용하여 에니메이션과 인터렉션을 만들어주는 툴 간단한 에니메이션에 쓸수 있습니다. http://labs.adobe.com/technologies/edge/ 초보자 가이드 http://www.adobe.com/devnet/edge/articles/guide-to-edge.html 린다닷컴 간단 투토리얼 http://www.lynda.com/Edge-Beta-tutorials/Edge-First-Look/89044-2.html

보호되어 있는 글입니다.

보호되어 있는 글입니다.

http://help.adobe.com/en_US/digitalpubsuite/using/WS67cb9e293e2f1f60-21ba9a4512e5e5e0b8d-7ffe.html

인디자인 디지털 퍼블리싱 수트 인디자인 템플릿 http://gilbertconsulting.com/id_templates/iPad_templates.zip 해상도 72 ppi 1024*768 http://indesignsecrets.com/image-resolution-for-ipad-publishing.php 해사

DIV 중앙정렬 완벽 해결법 지금 소개해드리는 코딩은 IE7과 FF2와 Opera9.25와 Safari3.0.4에서 모두 구현됩니다. 지식iN의 어떤 웹 디자이너가 답변한 것을 보고 배웠어요. 우리가 div를 배울 때 div의 스타일을 margin-left:auto; margin-right:auto;로 하거나, 좀 쉽게 하려면 margin:0 auto;로 놓으면 div가 브라우저의 가운데에 놓이게 된다고 배웠습니다. 제로보드 메뉴얼도 그렇고 팁 공유에 올라온 글들에도 그렇게 나오죠? 제 경우엔 IE에서 먹히지 않더군요. 나머지 브라우저들은 다 잘 보이더만. 그래서 찾다가 아래 방법을 찾았어요. 코딩은 직접 했습니다. 내용 html에서 이렇게 하고 여기에 들어가는 css에서 다음과 같이 코딩합니다. 코드를..

보호되어 있는 글입니다.

여기 과제 진행한것 댓글 달아주세요.

여기에 댓글로 달아 제출하세요.

http://sinbd.com/index/hompy/study.php?mid=69&r=view&uid=22625 css이용한 웹표준 코딩의 예. http://ugpapa.tistory.com/176 http://ugpapa.tistory.com/177 http://ugpapa.tistory.com/179 http://ugpapa.tistory.com/180 http://ugpapa.tistory.com/184 여기의 예제를 참고하시면 보다 명확하게 알수 있음 위의 웹표준코딩에 모바일의 값들을 넣어서 적용한 css화일을 첨부하니 참고바랍니다.

최근에는 978 가로 사이즈에 12 칼럼을 적용하는게 가장 인기라고 합니다. http://978.gs/ 다운로드에 가시면 템플릿을 다운로드 받아 이용하실수 있습니다. 960 가로사이즈 그리드 적용 http://960.gs/ 하단에 각 사이트 예제에서 show grid 버튼을 눌러보면 어떻게 그리드를 적용했는지 볼수 있습니다. 소스코드 다운로드 css 화일로 간단하게 본인이 디자인하고자 하는 사이트에 적용가능 http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/ 사용 설명 동영상

오픈지식강의 v23 드림위버 Dreamweaver CS5.5 활용기-1 ~ HTML5, CSS3, jQuery, Widget Browser from Jungle Communications Co.,Ltd. on Vimeo.

wire frame 완성해 올것 http://www.vcarrer.com/2010/06/iphone-grid-system.html 파르소나, 시나리오 스토리보드 완성 못 한사람 완성할것 css div 에 대한 설명 http://www.w3schools.com/css/css_grouping_nesting.asp 네비게이션 바 http://www.w3schools.com/css/css_navbar.asp

미래웹기술연구소 김종광 책임연구원 w3labs.kr 플래시를 지원하지 않는 아이폰, 아이패드 => HTML5를 대안으로 제시 플래시는 폐쇄된 비표준기술 vs. 웹은 공개된 표준기술 Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작 가능 HTML5가 프로그래밍까지 가능 webkit 엔진 68%, Opera 23% OS는 틀려도 엔지은 웹킷엔진으로 같음 소스를 직접 수정할수 있는 커미터는 구글직원 35% 애플 31% 그리고 나머지. 오픈소스의 탈을 쓴 구글, 애플직원들이 만들고 있음 IE6 버림 -6개월-> html5 제한적 지원 -6개월-> html 5 모바일 지원 구글의 데스크탑광고가 모바일쪽으로 넘어가면 좀더 광고를 계속 노출하면서 수익을 올릴가능성이 높..

여기에 댓글 달아주세요. 파르소나를 1-3명까지 개발하고, 이에 대한 각 파르소나의 시나리오를 그리고 그에 해당하는 화면들의 flow chart 들과 각 화면의 wire frame을 그리면 됩니다.

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html 아이패드와 관련된 부분 http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW29 여기도 참고 : 자세하게 제시하고 있음 http://redleaf.tistory.com/tag/UI%EA%B0%80%EC%9D%B4%EB%93%9C http://blog.d..

출처 : http://monodream77.blog.me/130090397497 Create Custom Icons - 커스텀 아이콘을 만들어라. 별 도의 디자인이 없더라도, 모든 어플리케이션은 아이콘이 필요하다. 또한 스팟라이트 검색 결과를 위해 작은 아이콘도 만들어야 한다. 어플리케이션에 따라, 바 아이콘, 설정 아이콘, 문서타입 아이콘도 필요할 수 있다. 다른 어플리케이션과는 달리, 이 모든 아이콘은 아이폰 OS에서 적절히 보여지기 위해 특정한 기준을 따라야 한다. Note : 가능하면, 네비게이션 바, 툴바, 탭 바는 시스템에서 제공되는 버튼과 아이콘을 사용하라. 이 부분에서 별도의 아이콘을 사용해야 한다면, "iPhone Human Interface Guidelines"의 "Icons for N..

출처 : http://monodream77.blog.me/130090397497 Reduce Full-Screen Transitions - 전체화면 전환은 피하라 컨 텐츠의 내용이 바뀔 때 시각적인 트랜지션을 밀접하게 적용하라. 정보의 일부분이 바뀔 때 때 전체 화면을 통째로 교체하는 대신에, 변경이 필요한 부분의 영역만 업데이트하도록 하라. 스크린 전체를 바꾸지 말고 각각의 뷰와 오브젝트를 트랜지션하는 것이 일반적인 규칙이다. 대부분의 경우에 전체 스크린을 뒤집는 방법은 추천하지 않는다. Enable Collaboration and Connectedness - 협업과 공유를 가능하게 하라 사용자는 아이패드를 개인용 기기로 보지만, 아이패드는 다른 사람과 같이 협업하며 사용하기에 좋은 크기를 가지고 있다..

아이패드(iPad) UI 가이드라인 (1/3) Method / UI design 2010/07/21 09:08 http://monodream77.blog.me/130090397497 애플에서 제공하는 iPad User Experience Guideline입니다. 아이패드 어플리케이션의 UI도 기본 원칙은 iPhone Human Interface Guideline을 따르면 된다고 합니다만, 큰 스크린 해상도를 효과적으로 사용하는 방법과 가로/세로모드를 유연하게 지원할 수 있도록 하는 방법에 대한 가이드가 아이폰 어플리케이션의 가이드와는 크게 다른 것 같습니다. 아이패드 어플리케이션이 단순히 아이폰 어플리케이션을 확대시켜 놓은 것 처럼 만들어지만 안된다는 것이죠. 그리고 GUI에 있어서도 저해상도와 작은 스..