메모장/모바일 썸네일형 리스트형 반응형사이트 제작시 간편하게 그리드 잡는 플러그인(?) Flexible Grid System 2014.11.7. 다음에서 제공하는 모바일기기별 Mobile Device, 해상도별 Resolution 미리보기 서비스, 트로이 Troy 포털사이트 다음에서 제공하는 기기별 미리보기 서비스 다음에서 이 서비스가 나온지는 언제인지는 모르겠으나 저는 꽤나 시간이 지난 후에나 알게 되었습니다.^^; 유용한 것 같아 스크랩 하려고 포스팅합니다. 화면의 왼쪽을 보시면 현재 나와있는 모바일 기기들의 제조사별 해상도가 있으며, 확인하고 싶은 기기를 선택 후 오른쪽 상단에 있는 URL에 웹사이트 주소를 기입하면 됩니다.ㅎ 주의사항은 버그 및 특성은 기기에서 직접보아야 한다는 점~! 해상도 확인 할때는 정말 유용하네요 ㅋ 아마 디자이너들이나 코더들이 좋아할 것 같습니당 ㅎ 또 하나의 Tip http://sunpig.com/martin/code/2012/androidzoom/devicewidth.html 확인하고 싶은 디바이스에서 위 URL를 호출하면 아래.. [자바스트립트, Javascript] 디바이스 Device 별 체크 스크립트 [자바스트립트, Javascript] 디바이스 Device 별 (모바일, PC) 체크 스크립트 출처 - http://rahm.tistory.com/21 모바일 웹사이트 주소창 자동 숨기기 스크립트 모바일 웹사이트 주소창 자동 숨기기 스크립트 아래 코드를 해당 페이지에 삽입하시면 됩니다. 안드로이드 개발시 주의점 중 dp, dpi, px 의 개념 대해 dp란 어쩔때 사용하는 것일까? 단순히 px을 dp로 변환하고자 한다면 dp = px * 0.66625로 계산한다.(해상도480*800 기준) 480*800 px => 320*533 dp이다. dp (dip, density independent pixel) 은 안드로이드에서 여러 화면 크기를 서포트 해주기 위해서 만든 유닛이다. 만약 많은 화면에서 내가 만든 레이아웃이 제대로 보이길 원한다면 dp를 써서 화면을 만드는 것이 좋다. 우선 주의할 것은 안드로이드는 160dpi를 기본으로 생각한다. 이것은 (320 x 480) 스크린의 density를 나다내는 것이다. 그러므로 480 x 800 (240dpi)의 스크린을 dp로 나타낸다면 320 x 533 (480 / 1.5, 800 / 1.5) 이 된다. .. 안드로이드 UI 개발 노하우 및 트렌드 분석 Customize Android Browser Scaling with target-densityDpi Customize Android Browser Scaling with target-densityDpi Webkit 사용 브라우저들 이미지 뭉개지는게 DPI 조정 때문이었구나. 메타 태그를 쓸 때 target-densityDpi를 device-dpi로 지정해주면 된다. 물론 이후의 가변폭을 위한 스케일링 같은건 자기가 알아서 해야한다. 자세한건 링크 참조.출처 : http://khrislog.net/post/3873961648/customize-android-browser-scaling-with 아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트 아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px 입니다. 그러므로 CSS파일 2개를 제작해주셔야합니다. 하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후 가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로 다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다. 소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다. 위처럼 작성하시면 문제가 될것은 없습니다. 나머지는 여러분들의 몫 입니다. 모바일 웹 사이트 개발 시 기본적 선언부분 출처 - http://w-rn.tistory.com/23 모바일환경을 위해 html,php 페이지 에 작업을 해주셔야할것이 있습니다. 선언시에는 PC와는 다르게 으로 선언해주셔야합니다. 동적인 HTML 페이지를 만들기 위해서 이죠. ^^* 선언 하셨다면 그 아랫줄에 이렇게 작성해주시기 바랍니다. 그다음부터는 HEAD, BODY를 작성하셔야 합니다. 다만 문제가 될것은 사이에는 반드시 가 추가되어야 합니다. 그리고 아이팟터치/아이폰 환경의 사용자들은 홈화면에 바로가기를 추가할수 있고, 아이콘을 나타내려면 와 같이 표시하셔야합니다. 정도의 사이즈로 나타내주시면됩니다. 자, 이제 body부분을 작성해야합니다. 가로,세로 모드를 구분하기 위해서는 새로바뀐 형식으로 작성하셔야합니다. 이제, 기초적인 페이지 준비는.. 모바일 웹디자인 시 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부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다... 모바일 사이트 제작 시 참고할 만한 사이트 http://www.mobileawesomeness.com/ 사파리 개발자용 모바일 화면(아이폰) 설정 1. 사파리 브라우저 설치 후 2. 상단메뉴 : 편집 > 기본설정 > 고급 (메뉴 막대에서 개발자용.. 체크) 3. 상단메뉴 : 개발자용 > 사용자 에이전트 > mobile safari 4.0.2-iphone 체크! 우리가 모바일 웹사이트(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://cssiphone.com/ http://mobify.me/gallery/ http://www.tappgala.com/ http://www.meetemplates.com/ 템플릿을 파는 곳, 모바일 디자인은 위젯 디자인에 응용해도 좋음 모바일 웹 design을 위한 Guide line[펌] 모바일 웹은 점점 급증해 가고 있다. 인터넷과 Web이 PC의 전유물이라는 사람들의 생각은 점점 없어져 가고 있는게 사실이다. 작년, 한해동안 미국에서만 6천3백만명이 넘는 사람이 모바일을 통해 웹에 접속하였다. 이는 2013년이 되면 전 세계적으로 17억명이 될것이라는 예견도 있다. 영국에서의 예만 보더라도 그 사실은 극명해 진다. 20%의 모바일폰 사용자들이 그 모바일 폰으로 인터넷을 즐기고 있다는 조사 결과도 나오고 있다.(Source : http://www.3g.co.uk/PR/Feb2007/4267.htm) 이게 불과 몇년 사이에 벌어진 일이다. 그래서 모바일 웹의 Design을 위한 Guide line의 필요는 절실했다. 그리고, 이곳 저곳에서 모바일 웹을 위한 정보들을 쏟아내기 시작했다. 모.. 모바일 웹디자인을 위한 테크닉,추천 사례 최근 아이폰이 출시되면서 이 영향으로 모바일 디바이스를 통한 인터넷 접속률의 폭발적인 증가를 보였습니다. 국내의 경우 또한 이런 아이폰과 같은 스마폰의 영향으로 모바일 웹 환경의 변화가 가속화되고 있습니다. 특히 작년 한 해 미국의 모바일 디바이스를 통한 인터넷 접속자 수가 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); } 모바일 웹사이트 제작시 폰트 고정하기 모바일 폰은 가로나 세로로 볼때 폰트 고정합니다.(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) 모바일 웹사이트 링크 방식 뒤로가기 device:back url송신 device:goto-URI 앞으로 device:reload 톱페이지 device:home 북마크열기 device:home/bookmark 북마크추가 device:home/bookmark?URI=http://URI/&title=타이틀 모바일 웹사이트에서 사용가능한 이미지 확장자 docomo - mova : gif (일부에서는 jpeg가능) - foma : gif/jpeg au - hdml : png/bmp (일부에서는 jpeg가능) - wap2.0 : png/gif/jpeg/bmp softbank - c : png/jpeg - p : png/jpeg/mmg - w,3gc : png/gif/jpeg/mmg 이렇듯 3사에서 사용하는 이미지 확장자가 다르나 95% 이상 지원하는 확장자는 jpeg이므로 모바일과 연동해서 쇼핑몰등은 jpg이미지를 사용해야 합니다. 모바일 사이트 제작시 고려할 10개 조항 1. 도코모, KDDI, 소프트뱅크등 최저 3 종류의 캐리어별로 페이지를 준비하지 않으면 안된다. 2. 쿠키는 기본적으로 사용 불가. 3. 테이블 태그를 사용할 수 없다. 4. 파라미터의 문자수가 제한되고 있다. 5. 메일 매거진을 일정량 이상 보내면, 캐리어의 블록을 받아 전달할 수 없게 된다. 6. 1 페이지에 표시할 수 있는 용량이 단말에 따라서 다르다. 7. 리디렉트는 연속 2회까지 한다. 8. uid, sid, pid3개는 파라미터명으로서 이용해서는 안된다. 9. SSL(HTTPS)의 페이지에서는 UID를 취득할 수 없다. 10. 캐리어에 의해서, 단말 식별 번호의 취득 방법이 다르다. 모바일 웹사이트에서 사용 가능한 태그 html head title body meta ***** blink marquee font blockquote p pre ***** dl dt dd ol ul li ***** div center ***** img br hr **** a ***** form input select option textarea 이전 1 2 다음
