본문 바로가기

메모장/모바일

반응형사이트 제작시 간편하게 그리드 잡는 플러그인(?) 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/ 템플릿을 파는 곳, 모바일 디자인은 위젯 디자인에 응용해도 좋음