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

Presentation on theme: "3부 애니빌더로 고급 기능 배우기 무선 인터넷 프로그래밍."— Presentation transcript:

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초가 지나면 애니빌 홈페이지로 이동하게 만들어 보고 문서 하단에는 광고를 표시하게 만들어 보겠습니다. 무선 인터넷 프로그래밍

10 3-2 폰페이지에 입력양식 만들기 [입력] 도구 / [옵션] 도구 무선 인터넷 프로그래밍

11 입력양식이란 입력양식이란 사용자가 글을 입력할 수 있도록 해주는 공간을 말합니다. 폰페이지에서는 글을 입력할 수 있는 TEXT 입력양식과 비밀번호를 입력해주는 PASSWORD 입력 양식을 많이 사용하고 있습니다. 무선 홈페이지에서 사용하는 입력양식 형태는 각양각색인데 011, 017, 019는 대부분 홈페이지와 유사하게 나타나고 016, 018은 한 페이지에 입력양식이 하나씩 나타나는 형태를 가지고 있습니다. 하단 메뉴를 이용해서 입력양식을 이동하면 글을 입력하거나 입력양식을 단계별로 거쳐가며 내용을 입력합니다. 무선 인터넷 프로그래밍

12 입력양식의 종류 무선 홈페이지에서 사용하는 입력양식은 홈페이지의 입력양식과 기능이 동일합니다. 단지 포괄적으로 사용되고 있는 입력양식은 TEXT 입력 양식과 PASSWORD 입력양식만을 사용하고 있기 때문에 표현의 제한을 많이 가지고 있다는 점만 다릅니다. 여기서는 무선 홈페이지에서 사용되는 입력양식에 대해서 알아보도록 하겠습니다. 무선 인터넷 프로그래밍

13 입력양식의 종류 TEXT 입력양식 PASSWORD 입력양식
PASSWORD 입력양식은 사용자가 입력한 내용이 화면에 ●으로 표시해주는 양식입니다. 보통 비밀번호를 입력하는 입력양식에 사용됩니다. TEXT 입력양식과 더불어 모든 언어에서 모두 지원하므로 자주 사용되고 있습니다. 무선 인터넷 프로그래밍

14 입력양식의 종류 CHECKBOX 입력양식 RADIO 입력양식
CHECKBOX 입력양식은 여러 개의 목록 중에서 사용자가 원하는 목록을 선택하게 해주는 양식입니다. 선택은 목록 중에 여러 개를 선택할 수 있는 기능으로 홈페이지의 CHECKBOX 입력양식과 동일합니다.  CHECKBOX 입력양식은 c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다. RADIO 입력양식 RADIO 입력양식도 CHECKBOX 입력양식과 동일하게 여러 개의 목록 중에서 사용자가 원하는 목록을 선택하게 해주는 양식입니다. CHECKBOX 입력양식과 차이점은 RADIO 입력양식은 목록 중에 하나만 선택이 가능합니다. c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다. 무선 인터넷 프로그래밍

15 입력양식의 종류 HIDDEN 입력양식 TEXTAREA 입력양식
HIDDEN 입력양식은 사용자가 입력할 수 있는 양식이 아니라 개발자가 특별한 값을 전달할 경우에 사용됩니다. 이 입력양식도 c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다. TEXTAREA 입력양식 TEXTAREA 입력양식은 여러 줄의 글을 입력할 수 있게 해주는 입력 양식입니다. 이 입력양식도 c-HTML 언어에서만 제공되는 입력양식으로 자주 사용하지는 않는 입력양식입니다. 무선 인터넷 프로그래밍

16 입력양식 만들기 [입력] 도구 단추를 이용해서 [text], [password], [checkbox], [radio], [hidden], [TEXTAREA]의 입력양식을 만들 수 있습니다. 이중에서 [text], [password] 도구를 주로 사용해서 꾸밉니다. 등록정보 대화상자에서 [내용] 항목에서는 입력상자 위에 표시할 글을 입력하고 [고급] 탭에서는 입력양식의 환경을 설정합니다. -입력타입 : 입력양식의 종류를 선택합니다. [text], [password], [checkbox], [radio], [hidden], [TEXTAREA] -변수명 : 입력양식에 기록한 내용을 지정하는 이름을 설정합니다. -기본값 : 입력양식에 기본값으로 표시하게 할 내용을 기록합니다. -입력양식 : 입력양식에 기록할 내용의 종류를 선택합니다. -Format문 : 입력양식에 기록할 내용의 형식을 설정합니다. -최대길이 : 최대 입력가능한 글자수를 지정합니다. -크기 : 입력 내용의 크기를 지정합니다. -널허용 : 사용자의 입력을 반드시 필요로 할 때 사용합니다. -checked : checkbox, radio 입력양식일 경우 체크 상태를 지정합니다. -Row : textarea 입력양식에서 글상자의 행 길이를 지정합니다. -Col : textarea 입력양식에서 글상자의 열 길이를 지정합니다. 무선 인터넷 프로그래밍

17 입력양식 만들기 [Format문] 항목에는 사용자가 입력양식에 넣을 입력형식을 설정할 수 있습니다.  [입력양식] 항목에 [사용자 정의]를 선택한 다음 [Format문] 항목에 원하는 형식을 지정할 수 있습니다. Format을 설정하지 않으면 *M으로 설정됩니다. 통신사에 따라 제대로 지원되지 않는 경우가 있으므로 특별한 경우가 아니라면 설정하지 않도록 합니다. [입력양식]에 사용하고 싶은 목록을 선택하면 [Format문] 항목에 해당 기호가 표시되는데 이것은 형식을 소개하기 위한 예이므로 예를 보고 적당하게 내용을 수정해주도록 합니다. [예] 4N : 4자리의 숫자가 입력 가능 AAA : 4자리의 특수 기호나 알파벳 대문자만 입력 가능 *M : 모든 문자를 자리 수 상관없이 입력 가능 무선 인터넷 프로그래밍

18 [예제 3-2-1] 입력양식 만들기 텍스트 입력양식과 패스워드 입력양식을 이용해서 이름과 주민등록, 비밀번호을 입력할 수 있는 입력양식을 만들어 보겠습니다. 무선 인터넷 프로그래밍

19 [옵션] 도구 만들기 옵션 도구란 여러 개의 항목 중 사용자가 하나 또는 여러 개를 선택할 수 있도록 해주는 도구로서 사용자가 직접 입력하는 것이 아니라 선택할 수 있도록 해줍니다. -화면에 표시할 항목 이름 -옵션 Label : 항목에 커서를 위치할 때 아래 메뉴에 표시할 이름 -옵션 Value : 항목을 선택했을 때 전송될 값 무선 인터넷 프로그래밍

20 [옵션] 도구 만들기 옵션 도구란 여러 개의 항목 중 사용자가 하나 또는 여러 개를 선택할 수 있도록 해주는 도구로서 사용자가 직접 입력하는 것이 아니라 선택할 수 있도록 해줍니다. -그룹선택 : 같은 항목일 경우 같은 그룹으로 선택합니다. -변수명 : 같은 항목으로 지정할 변수의 이름을 입력합니다. -기본값 : 값을 선택할 때 전송될 값으로 이미 지정되어 있는 값 목록이 표시됩니다. -Multiple : 같은 항목에 여러 개의 값을 중복해서 선택할 수 있도록 합니다. 무선 인터넷 프로그래밍

21 [예제 3-2-2] 혈액형 선택하기 옵션 도구를 이용해서 혈액형을 선택하는 예제입니다. 옵션 도구로 A, B, AB, O형 4 가지의 항목을 만든 후 사용자가 선택한 값을 화면에 출력하게 만들어 보겠습니다. 선택한 값을 화면에 출력하게 하기 위해서 서버스크립트를 이용해야 하므로 서버스크립트가 동작하는 서버를 이용할 경우에만 동작합니다. 무선 인터넷 프로그래밍

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

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

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

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

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

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

28 폰페이지 소스 구조 살펴보기 휴대폰 접속 시 문서를 찾아가는 순서
소스생성하기를 실행하면 처음 실행 문서인 default.asp가 만들어 지는데 이 파일은 문서를 열 때 제일 먼저 실행하여 접속자 휴대폰의 브라우저를 검색하여 휴대폰에서 지원하는 폰 페이지 언어를 찾습니다. 그런 다음 해당 문서가 포함되어 있는 해당 폴더로 이동한 후 폴더 안에 있는 index.asp 문서를 실행합니다. [017/019 일 경우] h(hdml) 폴더로 이동 [016/018 일 경우] m(mhtml) 폴더로 이동 [016/018 일 경우] k(KUN) 폴더로 이동 [017/019 일 경우] u(upwml) 폴더로 이동 [011/017 일 경우] w(wml) 폴더로 이동 [011/017 일 경우] wml2(wml2) 폴더로 이동 [011/017 일 경우] x(XHTML) 폴더로 이동 default.asp index.asp 문서를 실행 -> -> 무선 인터넷 프로그래밍

29 폰페이지 소스 구조 살펴보기 그림 구조와 벨소리 구조
소스생성하기를 실행하면 [images] 폴더 안에 휴대폰 컬러별로 [2c], [4c], [256c], [4096c], [65536c] 폴더가 생성됩니다. 2c는 흑백 모드이고 4c는 4색 컬러, 256c, 4096c, 65536c는 각각 256 컬러, 4096 컬러, 컬러 모드를 의미합니다. 그리고 각 폴더에 그림 형식에 따라 [bmp], [nbmp], [wbmp], [gif], [sis] 등의 폴더로 구분됩니다. [소스생성하기]를 실행하면 문서에 삽입한 그림들은 색상별, 그림 형식별로 변환해서 해당 폴더에 저장됩니다. 그러므로 문서를 실행하면 휴대폰에서 지원하는 그림 형식을 찾아서 화면에 그림을 표시해줍니다. 그러나 애니빌더는 흑백 모드에 최적화되어 있기 때문에 4c 칼라와 256 칼라는 별도로 그림을 변환해서 해당 폴더에 저장해주어야 합니다. 같은 방법으로 문서에 삽입한 벨소리 음악 파일들도 [melody] 폴더에 1폴리, 4폴리, 16폴리, 40폴리, 64 폴리 별로 음원별로 구분했고 휴대폰에 따라 각각 [011]과 [016] 폴더로 구분해 두었습니다. 무선 인터넷 프로그래밍

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

31 모바일용 그림으로 변환해주는 [이미지 변환]
[소스생성하기]를 실행하면 문서에 삽입되어 있는 그림들을 흑백 이미지로 변환해주지만 컬러 그림들은 제대로 변환해주지 못하므로 [이미지 변환]을 이용해서 그림들을 변환해주어야 합니다. [이미지 변환]은 문서에 삽입되어 있는 그림 파일을 무선 홈페이지에서 사용할 수 있는 그림 형식으로 변환해주는 기능으로 [SIS] 형식을 제외한 [BMP], [WBMP], [NBMP], [GIF], [PNG], [JPG] 등 대부분의 그림들을 흑백과 컬러로 자동 변환해 줍니다. 변환된 그림은 선택한 [변환위치] 폴더에 [images] 폴더에 해당 그림 형식 폴더 안에 저장됩니다. 이 기능은 애니빌더 퍼스널과 셰어웨어 버전에는 포함되어 있지 않습니다. 무선 인터넷 프로그래밍

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

33 [예제3-3-2] 모바일용 그림으로 변환하기 [소스생성하기]를 실행한 후 [이미지 변환]을 실행하여 문서에 삽입되어 있는 그림들을 컬러별로 자동 변환해 보겠습니다. 무선 인터넷 프로그래밍