Mobile 썸네일형 리스트형 [자바스트립트, Javascript] 디바이스 Device 별 체크 스크립트 [자바스트립트, Javascript] 디바이스 Device 별 (모바일, PC) 체크 스크립트 출처 - http://rahm.tistory.com/21 아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트 아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px 입니다. 그러므로 CSS파일 2개를 제작해주셔야합니다. 하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후 가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로 다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다. 소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다. 위처럼 작성하시면 문제가 될것은 없습니다. 나머지는 여러분들의 몫 입니다. 모바일 웹디자인 시 png에서 8bit, 24bit 차이와 용량을 줄이는 방법 출처 - http://blog.naver.com/khihaho?Redirect=Log&logNo=50003988002 [모바일웹] 모바일 UX 디자인에 대한 명쾌한 요약본 출처 - http://naebon.blog.me/150095762460 모바일UX디자인 실무 - Juan Sanchez 모바일 웹을 준비하려먼 개발도구도 잘 알아야되겠지만, 그 보다 먼저, 기획의 일련의 과정으로 사용자를 전적으로 배려한 UX디자인에 대한 의견이 정해져야 하겠습니다. 앱을 만들고 유튜브에 홍보 동영상을 올린다던지, 홍보용 트위터를 만드는 것도 좋지만 가장 큰 앱 홍보는 앱UX 가 아닐까 생각합니다. 윈도폰7의 UI특성을 반영한 UX디자인 폼입니다. 아이폰 등이 각각의 페이지를 슬라이드식으로 전환하는 반면, 윈도폰7은 옆으로 긴 화면을 좌우로 스크롤하는 페이지형태(Metro Design Concept - HUB style)를 지향합니다. HTML5이후 웹에서는 거의 사용되지 않는 Layer.. [Mobile] 모바일 웹 개발, 화면 확대 방지 viewport 출처 : http://htglss.tistory.com/66 모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 많은 웹페이지가 다른 브라우져(파이어폭스, 사파리, 크롬, 오페라 등)에서 많이 깨지게 되는 현상입니다. 그래도 그나마 그것은 비슷한 컴퓨터 환경인데 모바일 환경은 그 차원이 달라집니다. 우선 OS부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다... 우리가 모바일 웹사이트(Mobile Web Site)을 만들어야 하는 이유... 1.Google has a separate index for mobile content. 구글은 모바일콘텐츠를 따로 검색한다. 2.Your regular website is not going to cut it. 기존웹사이트는 모바일에 최적화되지 않았다. 3.1/5 of Americans access the mobile web each day. 미국인 5명중1명은매일 모바일웹에접속한다. 4.Mobile web will overtake the desktop within 5 years. 향후5년이내에 모바일웹이 PC 웹을 따라잡을 것이다. 5.$1.6 billion purchased from mobile devices in 2009. 2009년, 모바일전자상거래시장규모가16억달러에달러에달했다. 6.93% of.. 안드로이드 아이콘 다운 받기 http://www.androidicons.com/ 모바일 웹디자인을 위한 테크닉,추천 사례 최근 아이폰이 출시되면서 이 영향으로 모바일 디바이스를 통한 인터넷 접속률의 폭발적인 증가를 보였습니다. 국내의 경우 또한 이런 아이폰과 같은 스마폰의 영향으로 모바일 웹 환경의 변화가 가속화되고 있습니다. 특히 작년 한 해 미국의 모바일 디바이스를 통한 인터넷 접속자 수가 6300만 이상을 넘어섰다는 통계가 있었습니다. 이 얘기는 결국 머지 않아 몇 년안에 지금의 PC 웹 인프라 못지 않게 모바일 웹에서도 대중화된 인프라가 형성 될 것이라는 예측은 너무나 자연스러운 일이 아닐 수 없습니다. 상황이 이렇다보니 웹디자인 및 개발에 중요성이 PC웹 뿐만이 아니라 모바일웹로 넘어가고 있습니다. 그럼에도 불구하고 국내에는 아직 모바일 웹에 대한 실무적인 정보들이 많이 부족하다는 사실이 아쉬울 뿐입니다. 오늘 포.. 모바일 웹디자인 팁(tip) Mobile Web Design: Tips and Best Practices http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html 모바일 웹 디자인 : 팁과 모범 사례 원문 하드웨어와 소프트웨어의 기능에 친숙해지기 간단하게 하기 유효한 마크업 사용하기 원래 사이트를 방문하는 옵션 제공하기 별도의 모바일 테마를 사용하기 한 방향으로만 스크롤하기 팝업이나 새창 쓰지 않기 이미지 사용 최소화 하기 네비게이션 최적화하기 플래시나 자바스크립트에 의존하지 않기 가능한한 원래 사이트의 많은 컨텐츠를 포함시키기 리다이렉트 링크가 잘 동작하는지 확인하기 Effective Design for Multiple Screen Sizes http:.. 모바일 웹사이트 제작시 기울기 변화를 감지하는 이벤트 가로보기 모드와 세로보기 모드에서 다른 UI를 제공하려는 경우 window.onorientationchange = function() { alert(window.orientation); } 모바일(Mobile) 웹사이트 제작시 참고 사이트 - 제로나라 http://zeronara.net/bbs/board.php?bo_table=mobile 모바일 웹사이트 제작시 폰트 고정하기 모바일 폰은 가로나 세로로 볼때 폰트 고정합니다.(rotate) body,form,th,td,p { font-family : Verdana, Helvetica, Sans-Serif; font-size:12px; font-weight:normal; color:#000000; margin:0; padding:0; -webkit-text-size-adjust:none; } -webkit-text-size-adjust 의 사용방법 1. -webkit-text-size-adjust:auto; 2. -webkit-text-size-adjust:none; 3. -webkit-text-size-adjust:120%; 꼭 head.sub.php 설정에서 viewport 설정 의 "maximum-scale" 에 대한 설정.. 모바일 웹사이트 제작시 iPhone용 웹어플리케이션을 만들때 유용한 팁 홈스크린 아이콘 지정하기 페이지 루트에 apple-touch-icon.png 라는 이름의 아이콘 이미지를 넣어놓으면 이 페이지를 홈스크린으로 만들때 아이콘으로 사용하게 됩니다. 이 때 시각효과는 자동으로 적용이 되는데 만일 자동으로 시각효과가 적용되지않게 하려면 apple-touch-icon-precomposed.png 라는 파일을 위의 파일 대신 넣어놓으시면 됩니다. 만일 아이콘의 이름을 다르게 하거나 경로를 바꾸고 싶다면 아래와 같이 link 태그를 이용할 수도 있습니다. icon의 사이즈는 iPhone의 경우 57X57 픽셀이며 iPad는 72X72 픽셀입니다. 로딩 이미지 넣기 홈 스크린에서 실행시에 페이지가 로딩될동안 어플리케이션 처럼 로딩 이미지를 보여줄 수 있습니다. 아래와 같은 link 태.. 아이폰에서 웹상에 업로드된 MP4 동영상파일 스트리밍 재생하기 - video 태그 사용법 - - video 태그 사용 예시 - 모바일에서 사용하는 기본 메타태그 캐쉬 사용을 없애고 모바일 사이즈에 맞도록 랜더링 합니다. width : 넓이 – device-width | N px (200~10000 px, default 980 px) height : 높이 – device-height | N px (223~10000 px) initial-scale : 초기 확대/축소 배율 minimum-scale : 최소 축소 배율 – N (0~10, default 0.25) maximum-scale : 최대 확대 배율 – N (0~10, default 1.6) user-scalable : 확대/축소 가능 여부 – yes | no (default yes) 이전 1 다음
