title[] = "Police"
subtitle[] = ""
phone[] = "6173332893"

http://YOUR_DRUPAL_SERVER_DOMAIN/emergency-contacts-v1 에 생성된 RSS feed 는 여러분이 입력한 contact 정보는 빠져 있을 겁니다.  /admin/user/permissions로 가셔서 field_primary_contacts 과 field_secondary_contacts를 anonymous user 가 볼 수 있도록 enable 해 주셔야 합니다.

매니저인 Patrick이 휴가 가면서 웹사이트 링크를 메일로 보내주고 같습니다.
거기에는 iOS에서 사용되는 WebClip 에 대한 소개글이 있더라구요.

imore.com이라는 사이트인데 여러가지 개발 관련 팁 정보가 많이 있는 곳 같아요.

WebClip에 대한 내용은 이미 알고 있었지만 이렇게 따로 정리 해 두면 나중에 좀 더 도움이 될 수 있을 것 같아서 정리해 두기로 했어요.

그리고 외국 동료들이 알려주는 웹 싸이트는 네이버등 한국 검색엔진을 통해서 얻어지는 정보 이외에 추가적으로 정보를 얻을 수 있는 source가 될 수 있더라구요.

좀 더 풍부한 정보 소스를 확보 할 수 있는 잇점이 있어요.

(이 글을 읽는 분들에게도 도움이 되시길 바래요)

============== o ======= o =========

Ninja tip: How to create a custom iPhone/iPad home screen icon for your website

By Georgia, Friday, Nov 26, 2010 at 2:54 pm

Add to Homescreen 을 눌렀을 때 iPhone, iPod touch, iPad 에 웹사이트의 아이콘이 만들어서 보여지는데 관심 있으세요? 방문자들이 당신의 웹 사이트의 WebClip을 그들의 홈 스크린에 추가해서 볼 수가 있습니다. 그들은 그것을 친구들한테 보여 주겠죠? 그 친구들도 홈스크린에 웹 클릭을 추가할거고 여러분의 웹사이트는 구글 Page ranks에서 보여질 겁니다.

올해에 애플이 아이패드와 새로운 Retina Display 해상도를 선보였죠? 그러면 여러분은 더 큰 사이즈의 아이콘을 준비하셔야 할 겁니다.

• 120X120 사이즈의 아이콘이 iPad와 아이폰 4에 알맞는 아이콘 이미지 크기 입니다. 이 크기의 아이콘을 만드세요.
• 테두리에 둥근 처리 하는 것은 걱정하지 마세요. 애플이 자동적으로 해 줄겁니다. 그리고 손톱 모양의 shiny 효과도 자동적으로 해 줄거구요.

아이콘은 아래처럼 될 겁니다.

•  근사한 아이콘을 만들고 난 후 이것의 이름을 apple-touch-icon.png 로 명명하세요.
•  이제 이것을 여러분 웹사이트의 root 디렉토리에 업로드 하세요. 아마 아래와 같이 경로가 되겠죠.
http://www.yoursite.com/apple-touch-icon.png

이제 됐습니다. 아주 쉽죠?

이제 방문자가 아이폰이나 아이팟 터치 혹은 아이패드로 여러분의 사이트를 보다가 action 버튼(iOS 4.2 이하의 버전에서는  the "+" button 임)을 누르고 Add to Home Screen을 선택하게 될 겁니다. 그러면 방문자의 앱 목록에 여러분 사이트의 웹클립이 생성되겠죠. 이제 그 웹클립 아이콘만 누르면 한번에 여러분 사이트를 방문할 수 있습니다. 그러면 여러분 사이트는 더 많은 방문자를 기록하겠죠. 이 간단하고 소박한 기능을 절대 평가 절하하지 마세요. 

Bonus tip : 여러분 사이트에 custom icon을 생성하지 않으면 애플은 그 사이트의 페이지에 대한 screenshot으로 아이콘을 만들겁니다. 그 페이지는 Add to Home Screen을 할 때 오픈했던 페이지가 될겁니다.

UPDATE: Update : Marc Edwards는 Campaign Monitor 에서 Jesse Dodd's article의 아티클에대해 다음단계로 웹 아이콘을 어떻게 생성하는지에 대해 알려 주었습니다.

더 자세한 것을 알고 싶으시면 전체 아티클을 읽어 보세요.

이제 방법을 아셨나요? 질문이 있으시면 댓글로 남겨 주세요. 만약 여러분 사이트에 훌륭한 새 아이콘이 생겼다면 저희에게 알려 주세요. 저희도 체크해 보게요.

Tips of the day 코너는 초보자부터 숙련자까지의 개발자들에게 도움이 되는 내용을 전해 드립니다. 이 팁을 이미 알고 계셨더면 다른 친구들에게 도움이 될 수 있도록 링크를 알려 주세요. 만약에 여러분만의 팁이 있으시다면 댓글로 알려주시거나 dailytips@tipb.com 으로 내용을 보내 주세요. (아주 훌륭하고 이전에 알려지지 않은 팁이라면 상품을 드립니다.)

Data Architect

Data Modeling Architect

phonegap-android-terminal-quickstart

이 글은 PhoneGap 0.9.2 와 0.9.3 시절의 튜토리얼 입니다. 지금은 폰갭 버전이 1.8.1이네요. 이점 감안하시고 보세요.

Requirements

이 글은 이미 안드로이드 SDK를 인스톨 했고 제대로 작동 되는 상황에서 직접 해 보실 수가 있습니다. 아직 안됐으면 먼저 Android SDK를 설치 하시고 진행하세요. 여기에서 다운로드 받으시면 됩니다. 그리고 최소한 한개 이상의 Android virtual device(AVD)를 생성해 놓으셔야 합니다. 안드로에드 에뮬레이터에서 여러분이 만든 프로젝트를 돌릴려면 AVD가 필요합니다. 그리고 여러분 system path에 Android tools와 android platform-tools 폴더 가 있어야 합니다. 이 두개의 폴더들은 여러분의 Android installation directory안에 있을 겁니다.

또한 폰갭도 필요하겠죠.

• Download the latest copy of PhoneGap and extract its contents. 이글은 Android에 대한 튜토리얼이기 때문에 Android 디렉토리에 있는 내용이 중요합니다.
  
• ant가 인스톨 돼 있어야 합니다. 필요하면 system path에 ant installation의 bin 폴더를 추가하셔야 합니다. 환경변수 ANT_HOME을 ant가 인스톨 된 폴더로 지정해 주세요.
  

Building The Sample Project

터미널에서 새로 다운로드 받은 폰갭을 찾아보세요. 그리고 android/sample 폴더로 가세요.

커맨드라인에서 android list targets를 타입해서 target 리스트를 보세요.

그리고 android update project -p . -t # 를 타입하세요. 그러면 필요한 파일들이 추가되거나 업데이터 될 겁니다. 위 명령어 중에서 # 는 ID로 바꿔주세요.

이제 에뮬레이터를 실행시키거나 device를 plug in  해 주세요. device를 plug in 하시는 편이 더 낫습니다. 그러면 아래 2 screen에 대한 과정은 넘어 가셔도 됩니다.

에뮬레이터는 Android AVD manager 와 함께 실행되고 커맨드라인에서 android라고 치면 됩니다.

원하는 virtual device를 선택하세요.

에뮬레이터가 다 로딩 될 때까지 기다리시고.

 그리고 build 하고 run  하시려면 터미널에 ant debug install을 타입하시면 됩니다.

Notes

가끔 and debug install이 실패할 수도 있습니다. 이럴 때는 터미널에 adb kill-server 를 하시고 adb start-server를 하세요. 그리고나서 adb-devices를 치시면 연결된 devices를 보실 수 있습니다.

샘플 프로젝트를 보실 수 있으시면 index.html을 마음대로 수정하시고 다시 실행 해 보세요.

안드로이드에서 디버그하기에 좋은 툴은 logcat 입니다. 이 logcat 을 사용하려면 터미널에서 adb logcat 을 치세요.

phonegap-android-eclipse-quickstart

Requirements

이 글은 이미 안드로이드 SDK를 인스톨 했고 제대로 작동 되는 상황에서 직접 해 보실 수가 있습니다. 아직 안됐으면 먼저 Android SDK를 설치 하시고 진행하세요. 여기에서 다운로드 받으시면 됩니다. 그리고 최소한 한개 이상의 Android virtual device(AVD)를 생성해 놓으셔야 합니다. 안드로에드 에뮬레이터에서 여러분이 만든 프로젝트를 돌릴려면 AVD가 필요합니다.

You also need to: 또한 폰갭도 필요하겠죠.

• Download the latest copy of PhoneGap and extract its contents. 이글은 Android에 대한 튜토리얼이기 때문에 Android 디렉토리에 있는 내용이 중요합니다. 

이클립스에 이미 Android SDK 가 세팅 돼 있어야 겠죠. Window > Preferences > Android 를 여시고 아래와 같이 됐는지 확인해 보세요.

이제 여러분은 샘플 프로젝트를 빌드하시거나 새로운 프로젝트를 만드실 수 있습니다.

Building The Sample Project

File > New > Android Project

• Create new project from existing source 를 선택하세요.
  
•  Browse를 클릭하시고 다운로드 하신 폰갭에서 제공된 샘플 앱이 있는 곳을 찾아가세요.
  

오래된 안드로이드 버전을 사용하셔도 됩니다. 최신 버전의 SDK도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다. 다만 이글을 쓰는 시점에 다운받은 폰갭 0.9.4 는 안드로이드 3.0과 문제가 있을 수 있으니 2.2나 2.3을 먼저 사용해 보세요.

(이 부분에서 이클립스가 phonegap.jar를 찾지 못하면 에러를 보실 수도 있습니다. 이런 경우 /libs 폴더에서 오른쪽 마우스를 누르시고 Build Paths/ > Configure Build Paths로 가 주세요. 그리고 나서 Libraries tab에서 phonegap.jar를 Project에 add 하세요. 이클립스가 제대로 표시하지 못한다면 여기서 refresh(F5)를 하시면 제대로 표시 할 겁니다.)

이제 여러분은 여러분의 프로젝트를 안드로이드 어플리케이션으로 돌릴 수 있습니다. 프로젝트에서 오른쪽 마우스를 누르시고 Run As 로 가셔서 Android Application 을 클릭하세요. 이클립스가 AVD를 선택하라고 할 수도 있습니다. 만약에 없으면 이때 create 하셔도 됩니다. 미리 생성해 놓으셨다면 선택하시고 진행하시면 됩니다.

Creating A New Project

File > New > Android Project

And give it some sensible defaults.

오래된 안드로이드 버전을 사용하셔도 됩니다. 최신 버전의 SDK도 사용가능합니다. 어느것을 선택하시던 폰갭이 알아서 처리할 겁니다.

여러분이 다운로드 받으신 폰갭에서 우리는 아래 두개의 파일이 필요합니다.

1. Android/phonegap-1.0.0.jar
2. Android/phonegap-1.0.0.js

이클립스에서 생성하신 프로젝트의 root 디렉토리에 아래 두개의 디렉토리를 생성하세요.

1. /libs
2. /assets /www

위 두 파일을 복사해 넣으세요.

1. Android/phonegap-1.0.0.jar to /libs 
2. Android/phonegap-1.0.0.js  to /assets/www

이클립스에서 Package Explorer에서 해당 프로젝트를 선택하신 후 refresh(F5)를 해 주세요. 복사해 넣은 두개의 파일이 보이실 거예요.

Now, create index.html in your www folder and add some code like so:

이제 www 폴더에 index.html을 생성하세요. 그리고 아래 코드를 복사해 넣으세요.

이클립스의 src 폴더에 있는 main 자바 파일을 약간 수정해 주세요.

1. 클래스의 extend를 Activity에서 DroidGap으로 바꿔주세요.
2. Replace the setContentView() line 을 super.loadUrl("file:///android_asset/www/index.html"); 로 바꿔주세요.
3. Add import com.phonegap.*;

(이 부분에서 이클립스가  phonegap-1.0.0.jar를 찾지 못하면 에러를 보실 수도 있습니다. 이런 경우 /libs 폴더에서 오른쪽 마우스를 누르시고 Build Paths/ > Configure Build Paths로 가 주세요. 그리고 나서 Libraries tab에서 phonegap-1.0.0.jar를 Project에 add 하세요. 이클립스가 제대로 표시하지 못한다면 여기서 refresh(F5)를 하시면 제대로 표시 할 겁니다.)

마지막으로 폰갭이 제대로 동작할 수 있도록 AndroidManifest.xml 파일에 몇개의 퍼미션을 추가하겠습니다.

여러분이 사용하시는 에디터로 매니페스트 파일을 열어 주세요. 그리고 versionName과 application 태그 사이에 아래 내용을 복사해서 넣어 주세요.

AndroidManifest.xml에서 activity 태그에 아래 attribute 가 있어야 합니다.

    android:configChanges="orientation|keyboardHidden"

이건 뭘 말하냐 하면요. 안드로이드는 이런 이벤트들이 일어날 때 index.html을 reload 하지 않을거란 겁니다. phonegap이 이 이벤트들에 대해서 핸들링 할 겁니다.

마지막으로 다운로드 받으신 폰갭의 xml 폴더를 카피하셔서 여러분 프로젝트의 res 폴더에 넣으세요.

이제 여러분은 여러분의 프로젝트를 Android Application으로 실행하실 수 있습니다. 프로젝트에서 오른쪽 마우스를 클릭하신다음에 Run As -> Android Application을 선택하세요. 이클립스가 AVD를 선택하라고 물어볼 겁니다. AVD를 생성하지 않으셨으면 새로 생성하시고 이전에 생성하셨으면 그걸 선택해서 계속 진행합니다.

AVD가 적용되서 에뮬레이터가 뜨는데는 시간이 걸릴겁니다. 그리고 에뮬레이터가 뜬 후에도 조금 기다리시면 여러분이 만든 프로젝트가 화면에 실행 되는 걸 보실 수 있습니다.

Have fun!

요즘 브라우저 크기를 줄이면 화면 레이아웃이 갑자기 바뀌는 웹사이트를 가끔 봅니다.

Responsive WEB 개념을 이용해서 만든건데요.

요즘 웹페이지를 표시하는 디바이스들이 많이 늘어나다 보니까 하나의 웹페이지를 데스크 탑, 모바일 폰, 타블렛 PC 등 다른 해상도의 디바이스들에 맞는 레이아웃을 각각 만들 필요가 있어 졌습니다.

이 Responsive WEB은 HTML5이 Media Queries 를 이용하여 하나의 소스로 제작된 컨텐츠로 여러 해상도의 화면을 제공할 수 있도록 만드는 개념입니다.

대표적으로 Boston Globe 가 있는데요.

1. A flexible, grid-based layout : 그리드를 상대적(% 단위 등)으로 지정하여 브라우저 크기에 따라 유동적으로 변환
2. Flexible width media: images, video : 너비가 변경되어도 웹페이지 안의 미디어가 넘치지 않게 하는 기법
3. Media queries : 다양한 브라우저에서 표현양식을 제어할 수 있게 고안된 기능

Responsive WEB에는 이 세가지 개념이 기본적으로 깔려 있습니다.

그런데 이 반응형 웹은 IE8 미만에서는 사용할 수 없다고 합니다.

오늘 제 immediate manager 인 Rajesh 가 Boston Globe를 보여주면서 이거 어떻게 하는지 아냐고 물어보더라구요.

예전에 이 Responsive WEB 소스코드로 한번 연습한 적이 있어서 대충 알려 줬는데요.

많이 까먹어서 제대로 알려주지 못한 것 같네요.

생각난 김에 다시 소스로 정리를 해 두려고 합니다.

이게 제일 간단한 소스인데요.

우선 보시면 HTML5를 지정했구요. Charset 을 utf-8으로 하는 메타태그가 하나 있습니다.

그리고 뷰포트 메타태그가 있습니다. width=device-width 로 해서 화면을 사용자 디바이스 width 에 맞춰서 display 되도록 한 겁니다.

이 viewport 관련해서도 별도의 글에서 정리해 둬야겠네요.

그리고 그 다음이 css 파일인데요.

799픽셀 이하짜리와 800픽셀 이상짜리 두개를 따로 마련했습니다.

그리고 태그 안에 media query 가 있습니다. 이 부분에서 해상도에 맞게 css 파일을 불러 오는 겁니다.

그 다음에는 두개의 div 가 있는데 하나는 id가 pc_view 이고 다른 하나는 mobile_view 입니다.

이 id를 가지고 css에서는 어떻게 사용하는지 보죠.

우선 desktop_pc.css 파일 입니다.

보시면 여기서는 mobile_view 의 display 를 none으로 했죠?

그러면 pc_view 만 나오게 됩니다.

그럼 mobile.css를 보실까요?

역시 pc_view 의 display를 none으로 했습니다.

개념만 이해하기 위해 아주 간단한 예제를 살펴 봤습니다.

모바일 웹을 개발하다 보면 각 디바이스 별로 기능을 다르게 주는 경우가 있습니다.

아이폰 인경우는 어떤 기능을 실행하고 또 안드로이드인 경우는 다른 기능을 실행하고 등등이요.

그런데 전화기를 다 가지고 있지 못하면 이 기능을 제대로 테스트하지 못하기도 합니다.

이럴 경우 user agent 를 바꿔서 데스크탑이나 랩탑에서도 모바일 디바이스에서 해야만 하는 테스트를 할 수가 있습니다.

각 브라우저에 맞는 User Agent Switcher 플러그인을 설치하시면 되는데요.

우선 크롬부터 알아 보겠습니다.

1. 크롬 user agent switer

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

 우선 크롬 브라우저를 실행시킨 후에 위 링크로 접속을 합니다.

다음에 오른쪽 위에 있는 Added to chrome 버튼을 클릭하시면 됩니다.

간단하죠?

그러면 오른쪽 위에 저런 아이콘이 생기는데요. 이 아이콘을 누르고 원하는 디바이스를 선택하시면 됩니다.

그럼 위와 같이 제 랩탑에 있는 크롬 브라우저인데 Platform 이 iphone으로 잡히고 User Agent에도 iPhone으로 잡힙니다.

2. 파이어폭스 user agent switer

http://chrispederick.com/work/user-agent-switcher/

파이어폭스에서도 마찬가지로 이 링크로 가셔서 설치하시면 됩니다.

그리고 메뉴에서 tools - Default User Agent를 선택하셔서 사용하세요.

그러면 아까와 마찬가지로 랩탑에 있는 파이어폭스 브라우저인데도 아이폰으로 인식합니다.

그리고 또 다른 파이어폭스용 User Agent Switcher 인것 같은데요.

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

여기로 가셔서 받으셔도 됩니다.
저는 저 위에걸로 깔아서 쓰고 있습니다.

모바일 웹 개발하시는데 도움이 되시길 바랍니다.

ERD Tools - Avolution, dbForge Studio (MySQL), ER/Studio, ERwin, Oracle Designer, PowerDesigner, Rational Rose, Toad Data Modeler, Microsoft Visio, Visual Paradigm, RISE Editor