전에 포스팅했던 QR코드 생성/저장/인쇄등의 서비스를 제공하던 꿍알 사이트에서 오픈 이벤트를 진행합니다.

이번 오픈으로 전부터 예고하던 꿍알 이라는 서비스 즉 모바일 웹을 무료로 제한없이 제작할수있다네요~

다른곳과 차별화 된것이라면 분류별 스킨을 제공하고 있고~ 이런 스킨들이 계속 추가 될 예정이라고 합니다.~


여하튼 오픈이벤트 10년 넘게 호스팅 사업을 해온 블루웹이니 만큼 이벤트 신뢰도도 높고 회원가입도

이메일, 이름, 연락처 만 받고 있어 가입도 부담없고 좋습니다.



좋은건 -ㅅ- 참여해보니 경품 이 무려 맥북에어  / 아이팟 임에도 불구하고 그렇게 참여자가 많지 않다는점이

아주 훌륭하네요 ㅎㅎ 그만큼 가능성이 높으니까요~


이벤트 참여방법을 설명하려고 보다보니 마치 경품 사냥꾼 브리핑 같긴 하지만 ㅋ 어쨌든~ 설명 ㄱㄱ~

응모권을 모아서 원하는 상품에 응모하는 이벤트 외에도 여러가지 진행중이니 참고하세요~

이벤트 페이지 바로가기 : http://www.qoongr.co.kr/event/event01.html

[응모권 모으는 방법]
- 회원가입 : 1개 (회원가입할때 딱 한개;;)
- 꿍알 만들기 : 하루에 단한번 2개 (이거는 모바일웹 만드는 빌더인데 분야별로 스킨도 있고 옵션 선택해서 이미지,동영상 지도 등도 삽입할수있습니다.)
- 축하댓글 쓰기 : 하루에 단한번 1개 (이벤트 페이지 에서 하단에 축하 댓글을 작성하면 하루에 한번 점수가 쌓임)
- 이용후기 작성 : 하루에 단한번 2개 (서비스 이용이나 유료구매한 상품에 대한 이용 후기를 작성할수 있는데 역시 하루에 한번)
- 꿍알 상품 구매 : 큐알코드를 스티커나 도장 등으로 구매할 경우 응모권 5개를  받을수 있다.

현재 이벤트 오픈 시작일이라서 두달동안 얼마나 많은 인원이 참가할지는 모르겠지만 제법 해볼만한 경쟁률이 될듯 하다.

굿럭.. 하지만 이미 맥북을 사버린 나는 1위따윈 관심없다 !!!!!!!!!!

사용자 삽입 이미지


skyand96.com

skyand96.com

skyand96.com

skyand96.com

[사파리 를 이용한 아이폰/아이패드/아이팟 터치 모바일웹 테스트 하기]

1.우선 사파리5 를 설치합니다. (http://www.apple.com/kr/safari/download/)
  설치되어있다면 pass~

2. 설치한 사파리의 메뉴중 오른쪽 상단의 톱니바퀴 메뉴를 클릭 > 메뉴 중 기본설정을 클릭합니다.

사용자 삽입 이미지
 

3. 기본설정 > 고급탭 의 [메뉴 막대에서 개발자용 메뉴보기] 를 체크해줍니다.

사용자 삽입 이미지

4. 다시 사파리창으로 돌아와서 이번에는 페이지 모양의 아이콘을 클릭하면 개발자용 메뉴가 보이게 됩니다.
   개발자용 > 사용자 에이전트 를 차례대로 선택하면
   스샷에서 보이는것 처럼 여러가지 플랫폼으로 간단하게 전환이 가능합니다.

   훌륭합니다.

   단, 크기는 직접 손으로 조정해야한다는거 말고는 -_-;;(크기까지 해당 플랫폼과 맞게 딱 고정되었다면 좋겠다는!!)

사용자 삽입 이미지

사용자 삽입 이미지



5. 사파리깔기도 귀찮고, 이것마저도 귀찮다~면 그냥 다른 사람들이 만들어둔 사이트를 접속하는게 좋겠네요

- 아이폰 테스트 사이트
http://www.iphonetester.com/
http://www.testiphone.com/

- 아이패드용 테스트 사이트
http://www.ipadpeek.com/


6. 아니면 윈도우용 시뮬레이터를 설치해서 테스트~
  이전 포스팅가기



[아이폰용 모바일웹 제작 팁]

1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기

<input type="text" />
<input type="search" />
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="time" />
<input type="number" />
<input type="datetime" />
<input type="week" />
<input type="date" />

2. 툴바숨기기

<script type="text/javascript">
 window.addEventListener("load",function(){
  setTimeout(scrollTo,0,0,1);
 },false);
</script>

3. 화면 회전시 폰트사이즈 고정

auto : 기본값, 화면회전후 비율에 맞게 폰트크기가 자동으로 조정됨.
none : 회전시에도 폰크기 고정.
n% : 폰트크기를 정한 크기로 변경.
 
 html {

      -webkit-text-size-adjust:none;

  }

4. 모바일웹페이지를 가로 크기에 딱 맞추기

user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0  : 페이지 로딩시 확대비율
maximum-scale=1.0  : 최대확대비율
minimum-scale=1.0  : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

 5. 회전에 따라 다른 css 적용하기

 <script type="text/javascript">
 function orient()
 {
  switch(window.orientation){
   case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
    break;
   case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;
   case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;
  }
 }
 window.onload = orient();
  </script>

 <body onorientationchange="orient();">
 </body>

 6. 기본 어플 호출하기

 - 전화걸기 : <a href="tel:1588-2120 ">블루웹 고객센터</a>

 - 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
 - 문자보내기실행 : <a href="sms:">문자보내기</a>

 - 메일보내기실행 : <a href="mailto:">메일보내기</a>
 - 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>
 - 내용채워서 메일보내기 : <a href="mailto:echos@blueweb.co.kr?cc=echos@blueweb.co.kr&bcc=echos@blueweb.co.kr&subject=test subjct&body=test body"">메일보내기</a>

+ Recent posts

티스토리 툴바