모바일 썸네일형 리스트형 자전거 타고 퇴근하는 날, 만난 풍경들을 핸드폰 사진으로 담아봅니다... 센치했던 날... 일년에 몇번밖에 못하는 자전거 타고 출퇴근 하던 때였습니다. 바로 요날 퇴근 할 때 괜히 감성적이 되어서는 조금 가다가 서서 사진 찍고, 조금 더 가다가 또 사진 찍고 하면서 퇴근했었네요. ^^; 무슨 부귀영화를 누리려고, 이리 정신없이 바쁘게 살아가는지...라는 생각이 드는 하루였습니다...ㅎㅎ... 2017.4.19. 다음에서 제공하는 모바일기기별 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 [HTML5+CSS3]모바일에서 터치, 슬라이드 모션 구현에 유용한 자바스크립트 라이브러리 터치, 슬라이드 모션을 위한 자바스크립트 라이브러리 모바일에서 터치라는 액션을 통해 슬라이드 모션을 적용할 수 있도록 하는 자바스크립트 라이브러이 제공 사이트입니다. 아래 파일은 해당 URL 에서 다운 받으실 수도 있습니다. 꼭, 터치 모션이 되는 디바이스에서 열어야, 슬라이드 모션이 확인디 됩니다. 바로가기 - http://swipejs.com 누구나 모바일 슬라이드 포토갤러리 구현할 수 있다 텍 기존의 클릭 방식이 아닌, 손가락으로 쓸어 넘기면 마치 앱 처럼 부드럽게 다음 슬라이드로 넘어가는 것이 이 소스가 가지는 가장 큰 특징입니다. 관련 사이트 및 링크 공식웹 사이트 : http://www.photoswipe.com/ 미리보기 : http://www.photoswipe.com/latest/examples/04-jquery-mobile.html 다운로드 : http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-2.1.6.zip 출처 - http://mjuzhj23.blog.me/140141533634 RWD, Responsive Web Design 반응형 웹에 대해서 반응형 웹(Responsive Web)의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다. 반응형 웹(Responsive Web)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게.. 모바일 웹사이트 주소창 자동 숨기기 스크립트 모바일 웹사이트 주소창 자동 숨기기 스크립트 아래 코드를 해당 페이지에 삽입하시면 됩니다. 안드로이드 개발시 주의점 중 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) 이 된다. .. 이열~~^^; 드디어 안드로이드에서 티스토리에 글쓰기 기능이 추가되다!! 정말 역사적인 순간임~! 이제 드뎌 폰으루 글쓰기가되는구나^^;; 좋다쿠나ㅋㅋ 기념으루다가ㅎㅎ 어제새벽 내컴에 SSD 드라이브를 설치하는 중간에 찍었던 사진ㅎㅎ 폰으루 포스팅하니까...처음이라그런지 약간 어색하구아잉ㅋㅋ 뭐..금방익숙해 지겠지요ㅎㅎ 그나저나 완전 졸리네... 오늘은 하나끝내고자야되는데... 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://www.androidicons.com/ 모바일 웹디자인 시안, 갤러리 사이트 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); } 모바일(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 태그 사용 예시 - 이전 1 2 다음
