3 부 애니빌더로 고급 기능 배우기

1. 3부 애니빌더로 고급 기능 배우기 무선 인터넷 프로그래밍

2. 2-1 폰페이지 재미있게 꾸미기[문서정보] 대화상자/색상설정/타이머설정 무선 인터넷 프로그래밍

3. 문서 정보 창 살펴보기 • [문서정보] 대화상자는 목록에 해당되는 페이지의 정보를 설정해주는 기능 • 파일 이름, 확장자와 같은 기본 정보 수정부터 타이머 적용, 색상, 광고 등 문서에 적용할 수 있는 고급 효과들을 설정 • 고급 기능은 [고급] 탭을 클릭해야 설정 무선 인터넷 프로그래밍

4. 파일명 : 선택한 문서의 파일 이름을 변경 파일 확장자 : 선택한 문서의 파일 확장자 변경 카드명/타이틀 : 선택한 목록이 있는 부분의 카드명과 타이틀 이름을 설정 CacheClear : 휴대폰의 캐시 기능을 초기화 변수 클리어 : 변수의 값을 초기화 이전/지움버튼 disable설정 : 이전/지움 버튼의 기능인 이전 페이지로 가는 것을 못하게 함. 캐시처리&변수 초기화 유무 : 캐시와 변수를 처리 타이머 설정 : 문서에 타이머를 설정 색상 : 문서의 색을 지정 광고 : 광고창을 띄움 문서 정보 창 살펴보기 무선 인터넷 프로그래밍

5. 문서 정보 창 살펴보기 • 억세스 정보 • 프로젝트의 페이지에 접속할 때 해당 도메인과 경로를 거쳐야만 사이트 접속이 가능하도록 설정 • Domain 항목에는 폰 페이지가 있는 도메인 주소를 입력하고 [path] 항목에는 경로를 입력 • 입력한 경로에 있는 문서만 접속이 가능 • 입력한 경로 상위의 페이지도 접속이 불가능하게 되므로 특별한 경우가 아니면 설정하지 않는다. • 이 기능은 mHTML에서는 동작 안함. -Domain : 접속하는 도메인명을 입력 -path : 도메인 다음의 경로을 입력 -프로젝트 전체적용 : 현 프로젝트의 모든 페이지에 억세스 정보를 추가 무선 인터넷 프로그래밍

6. 문서 정보 창 살펴보기 • 타이머 적용 • 지정된 시간이 흐르면 입력한 URL을 열거나 사이트 안에 있는 페이지를 링크. -시간설정 : 지연 시간을 입력 -연결 구분 : 주소(URL)로 연결할 것인지 다른 페이지(Link)로 연결할 것인지 선택 -연결 : 연결할 주소를 입력하거나 페이지의 경로가 표시 -VAR : 연결 주소로 전달할 변수를 선택 -URL : 각 언어별로 주소 경로를 수정 무선 인터넷 프로그래밍

7. 문서 정보 창 살펴보기 • 색상 • 폰 페이지의 배경, 기본 글자색, 하이퍼링크 글자색을 설정 • WML, HDML에서는 동작하지 않습니다. 무선 인터넷 프로그래밍

8. 문서 정보 창 살펴보기 • 광고창 띄우기 • 문서를 로딩 할 때 페이지 하단에 검정색 띠지의 광고창이 나타나게 해주는 기능 • 문장이 길 경우에는 글자가 스크롤 됨 • 이 기능은 mHTML에서만 동작 무선 인터넷 프로그래밍

9. [예제 3-1-1] 문서 등록 정보 속성 설정 • [문서정보] 대화상자의 속성을 이용해서 문서 배경색을 지정하고 문서가 열린 후 3초가 지나면 다음 폰세상(http://mobile.daum.net) 홈페이지로 이동하게 만들어 보고 문서 하단에는 광고를 표시하게 만들어 보자. 무선 인터넷 프로그래밍

10. 3-3 모바일용 문서와 그림 변환하기 [소스생성하기], [이미지 변환] 무선 인터넷 프로그래밍

11. [소스생성하기] 란 • 제너레이트(Generate)라고도 부르는 [소스생성하기]란 • 작업한 문서에 사용된 내용들을 모바일에 사용할 수 있는 파일로 저장해주는 기능 • 문서에 삽입되어 있는 그림들도 사용자의 휴대폰이 컬러를 지원하는지 흑백을 지원하는지 판별해서 알맞은 그림 형식을 불러오도록 해주는 역할 수행 • 제너레이트(Generate)를 실행하려면 [소스생성하기] 단추를 클릭해서 [소스생성하기] 대화 상자를 실행 → 대화 상자에서 속성을 설정한 후 [확인] 단추를 클릭하면 프로젝트 파일을 저장한 폴더에 데이터들이 저장 무선 인터넷 프로그래밍

12. 언어 선택: 문서를 저장할 언어 종류를 선택 옵션 문서 파일 이름을 등록정보에 입력한 이름으로 설정 문서 파일 이름을 기본 파일명과 하위 파일 명의 이름을 임의로 설정 파일명의 절대 경로로 설정 모든 타이틀을 흐르는 문자열로 설정 모든 링크가 설정되어 있는 문자를 흐르는 문자열로 설정 모든 파일들의 경로를 절대 경로로 설정 파일 생성이 완료된 후 [소스생성하기] 대화 상자를 종료 문서에 삽입한 그림들을 bmp, wbmp, nbmp 그림 형식으로 변환 전체/부분 선택: 소스생성을 문서 전체를 실행할 것인지 현재 커서가 표시되어 있는 문서만 실행할 것인지 설정 [소스생성하기] 란 무선 인터넷 프로그래밍

13. [예제 3-3-1] [소스생성하기] 실행하기 • 이제까지 작업한 폰페이지에 제너레이트를 실행해서 문서를 저장해보자. • 우리나라에서 지원하지 않는 cHTML을 제외한 모든 형식을 생성하고 그림 파일들은 흑백 모드인 bmp, wbmp, nbmp 그림 형식으로 변환되도록 속성을 설정하자. 무선 인터넷 프로그래밍

14. 폰페이지 소스 구조 살펴보기 • 폴더 구조 • 제너레이션을 실행하면 프로젝트를 저장한 폴더에 문서를 열어 주는 default.asp 파일과 여러 가지 폴더들이 생성 됨. • hdml, mhtml, upwml, wml 등의 폴더는 폰페이지 관련 문서들이 저장되고 images 폴더는 그림이 저장되고 include 폴더는 동적처리에 관련된 데이터들이 저장됨 무선 인터넷 프로그래밍

15. 폰페이지 소스 구조 살펴보기 [메일] 도구로 메일 설정시 첨부한 파일들을 보관하는 폴더입니다. hdml 문서들이 포함되어 있습니다. 폰페이지에 사용된 그림들을 색깔별 종류별로 구분해 놓은 폴더입니다. 폰페이지 동적 처리 및 스크립트 관련 파일들이 저장되어 있는 폴더입니다. KUN용 폰페이지 문서들이 저장되어 있는 폴더입니다. mHTML용 폰페이지 문서들이 저장되어 있는 폴더입니다. 문서에 삽입되어 있는 벨소리를 화음별, 종류별로 구분해서 저장해둔 폴더입니다. UP-WML용 폰페이지 문서들이 저장되어 있는 폴더입니다. WML용 폰페이지 문서들이 저장되어 있는 폴더입니다. wml2용 폰페이지 문서들이 저장되어 있는 폴더입니다. xHTML용 폰페이지 문서들이 저장되어 있는 폴더입니다. 폰페이지 접속시 처음 열리게 할 인덱스 문서입니다. 애니빌더 프로젝트 파일입니다. 무선 인터넷 프로그래밍

16. 폰페이지 소스 구조 살펴보기 • 휴대폰 접속 시 문서를 찾아가는 순서 • 소스생성하기를 실행하면 처음 실행 문서인 default.asp가 만들어 지는데 이 파일은 문서를 열 때 제일 먼저 실행하여 접속자 휴대폰의 브라우저를 검색하여 휴대폰에서 지원하는 폰 페이지 언어를 검색 • 그런 다음 해당 문서가 포함되어 있는 해당 폴더로 이동한 후 폴더 안에 있는 index.asp 문서를 실행합니다. -> -> 무선 인터넷 프로그래밍

17. 폰페이지 소스 구조 살펴보기 • 동적인 처리를 해주는 기능 • 애니빌더는 사용자의 휴대폰 기능을 판별해서 알맞은 문서와 그림들을 선택해주는 동적 처리 기능을 제공 • 동적으로 처리한다는 의미는 문서에 삽입되어 있는 그림들을 사용자 휴대폰의 종류와 지원 색상에 따라 알맞은 그림을 찾아서 표현하게 해주는 기능 • 이 파일들은 [ROOT] 등록정보에서 [파일 확장자]를 ASP, JSP, PHP로 선택한 경우에만 실행 • [소스생성하기]를 실행하면 생성되는 [include] 폴더에는 이러한 동적 처리를 실행해주는 파일들이 저장됩니다. 무선 인터넷 프로그래밍

18. 모바일용 그림으로 변환해주는 [이미지 변환] 무선 인터넷 프로그래밍

19. 컴퓨터에서 폰페이지 열어보기 • Openwave SDK 6.2 / 7 시뮬레이터 사용하기 • up-wml, sk-wml, XHTML, WML2 문서를 불러 올 수 있음. • 애니빌더로 제작한 폰페이지를 열 경우 SDK6.2에서는 up-wml 문서를 열어 주고, SDK7은 XHTML 문서를 열어 주면 이미지를 컬러로 보여 줌. • SDK7 에서는 WMLScript 문서를 제대로 열 수 없음. 무선 인터넷 프로그래밍

20. 컴퓨터에서 폰페이지 열어보기 • KUN 시뮬레이터 시뮬레이터 사용하기 • KUN 시뮬레이터에서 지원하는 문서를 열어 주는 시뮬레이터 프로그램로서 애니빌더에서 M(mHTML)폴더와 K(KUN) 폴더에 있는 문서를 열 수 있습니다. KUN 시뮬레이터를 실행하면 나오는 메뉴에서 [URL]을 선택하고 [URL입력]에 URL을 입력해서 접속하면 시뮬레이터에 폰페이지가 열립니다. 무선 인터넷 프로그래밍

21. 컴퓨터에서 폰페이지 열어보기 • 웹 브라우저 사용하기 • [m] 폴더에 있는 mHTML 문서만 가능. • mHTML은 HTML로 제작되기 때문에 웹브라우저를 이용해서 문서 내용을 확인할 수 있다. • 웹브라우저의 창 크기를 휴대폰 창 크기만큼 조절하면 시뮬레이터처럼 확인할 수 있다. 무선 인터넷 프로그래밍

22. 3-5 모바일용 서버 만들기 서버 설정 무선 인터넷 프로그래밍

23. 모바일용 서버 만들기 • IIS 서버 구축하기 • 윈도우의 IIS 서버를 사용해서 ASP 문서로 제작할 경우 MIME 설정을 통해 모바일에서 사용하는 파일 형식을 입력하고 작업한 폴더를 서버 폴더로 설정해줌. • 만일 [관리도구]에 [인터넷 정보 서비스] 아이콘이 없을 경우에는 [프로그램추가/제거]-[Windows용 구성요소 추가/제거]를 이용해서 인터넷 정보 서비스 프로그램을 설치. 무선 인터넷 프로그래밍

24. 모바일용 서버 만들기 • IIS 서버 구축하기 • [제어판]을 연 다음 [관리도구] 아이콘을 더블 클릭해서 연 다음 [인터넷 정보 서비스] 아이콘을 더블 클릭해서 실행 • [기본 웹 사이트] 목록을 오른쪽 클릭하면 나타나는 메뉴에서 [속성]을 클릭합니다. 무선 인터넷 프로그래밍

25. 모바일용 서버 만들기 • IIS 서버 구축하기 3. [기본 웹 사이트 등록 정보] 창이 열리면 [홈 디렉터리] 탭을 클릭한 다음 [로컬 경로] 항목에 있는 [찾아보기] 단추를 클릭하고 폰페이지 데이터가 있는 폴더를 선택 무선 인터넷 프로그래밍

26. IIS 서버 구축하기 4.[HTTP 헤드] 탭을 클릭하고 [MIME 매핑] 폴더에 있는 [파일형식] 단추를 클릭합니다. 5.[파일 형식] 대화상자가 열리면 [새 형식] 단추를 클릭한 후 다음 내용을 입력한 후 [확인] 단추를 클릭합니다. 모바일용 서버 만들기 무선 인터넷 프로그래밍

27. 모바일용 서버 만들기 • IIS 서버 구축하기 6.같은 방법으로 파일 형식을 설정한 후 [확인] 단추를 클릭해서 창을 모두 닫습니다. 무선 인터넷 프로그래밍

28. 모바일용 서버 만들기 • IIS 서버 구축하기 무선 인터넷 프로그래밍

29. 모바일용 서버 만들기 • IIS 서버 구축하기 7.[기본 웹 사이트 등록 정보] 창에서 [항목시작] 단추를 클릭해서 서버 동작을 실행합니다. 무선 인터넷 프로그래밍

30. 시뮬레이터로 검사하기 1.애니빌더로 프로젝트를 연 다음 [ROOT] 등록정보의 [Site명 입력] 항목에 ‘http://localhost'를 입력하고 [파일확장자]에는 아파치서버를 사용할 경우에는 [PHP]를 선택, IIS를 사용할 경우에는 [ASP]를 선택, TOMCAT이나 RESIN,JSERV 서버를 사용할 경우에는 [JSP]를 선택한 다음 [적용]과 [닫기] 단추를 눌러 창을 닫음. 2.[소스생성하기] 단추를 클릭하고 [확인] 단추를 클릭해서 제너레이트를 실행합니다. 무선 인터넷 프로그래밍

31. 시뮬레이터로 검사하기 3.시뮬레이터를 실행한 다음 주소입력줄에 ‘http://localhost'를 눌러 실행하면 폰페이지가 열립니다. 무선 인터넷 프로그래밍