WAP

WAP 한국외국어대학교 박상원

목차 • WML 기본 • 텍스트 작성과 포맷팅 • 카드와 덱 사이 왕래

WML이란 무엇인가? • WML(Wireless Markup Language) • 무선 네트워크를 통해 이동 전화기와 같은 소형 장치로 보내질 애플리케이션을 만들기 위한 마크업 언어 • WAP Forum에 의해 개발된 공개 표준 • WML 설계서는 WAP 설계서의 일부 • XML의 애플리케이션, DTD로 정의

WML 애플리케이션의 구조 • HTML과의 차이점 • 카드와 덱(Cards and Decks) • 하나의 애플리케이션에서 여러 개의 덱 사용

WML과 HTML의 차이점

카드와 덱(Cards and Decks) • WML 애플리케이션의 구성 • 하나 혹은 그 이상의 덱(deck) • Deck • 하나 혹은 그 이상의 카드(card) • 장점 • 관련된 카드들을 묶어주어 한번에 전송 • 사용자가 카드를 옮겨다닐때 마다 서버에 전송 요청 불필요 Application Document Card

하나의 애플리케이션에서 여러 개의 덱 사용 • 덱에서 허용된 최대 크기의 제한 • 덱이 클 경우 논리적으로 쪼개어야 한다 • 덱이 큰 경우 • 장점 • 크기가 큰 덱은 여러 개의 카드가 WAP-기능 장치로 한번에 전송 • 단점 • 서버에서의 전송시간 증가 • 균형 유지가 필요

첫번째 WML 예제 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card> Wrox Travel Welcome to our WAP site! </card> </wml>

문서 프롤로그 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> • WML이 XML 버전 1.0 기반 • 문서의 유효성을 검증할 DTD의 위치 • 위 예제는 WML 설계서의 버전 1.2 DTD 사용

덱(Deck) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card> Wrox Travel Welcome to our WAP site! </card> </wml> • 덱의 정의 • <wml> </wml> • <card> 요소를 반드시 포함

카드(Card) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card> Wrox Travel Welcome to our WAP site! </card> </wml> • 덱은 여러 개의 시작, 종료 <card> 태그를 포함할 수 있다

컨텐트 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card> Wrox Travel Welcome to our WAP site! </card> </wml> • 마이크로 브라우저에서 디스플레이될 텍스트

컴파일된 WML • WAP 이진 XML(WBXML) 컨텐트 포맷 • 목적 • 전송되는 데이터의 크기를 최소화할 필요성 • 컴파일 과정 • 토큰화 과정 • 태그와 요소 이름을 기정의된 단일 문자 코드(single-character code)로 대체 • 공백은 압축 • 주석은 제외

공백(White Space) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card> Wrox Travel Welcome to our WAP site! </card> </wml> <?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM //DTD WML 1.2//EN“"http://www.wapforum .org/DTD/wml_1.2 .xml"><wml><card>Wrox TravelWelcome to our WAP site!</card></wml>

<card> 요소의 id 속성 • 덱 안의 카드들 사이를 오갈 수 있게 <card id=“name”> content </card>

id 속성을 써서 카드 이름 달기 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu">Enter</a> </card> <card id="menu"> Check out our new unbeatable offers, our full vacation listings, and our competitive vacation insurance scheme. You can also read reviews of our vacations in our features section. For more information, you can search the site, or follow our links, which include up to the minute weather reports. If you have any queries don't hesitate to contact us! </card> </wml>

<card> 요소의 title 속성 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu">Enter</a> </card> <card id="menu” title=“Wrox Travel”> Check out our new unbeatable offers, our full vacation listings, and our competitive vacation insurance scheme. You can also read reviews of our vacations in our features section. For more information, you can search the site, or follow our links, which include up to the minute weather reports. If you have any queries don't hesitate to contact us! </card> </wml>

단락 • 포맷팅해서 읽기 좋게 • 태그를 이용 컨텐트 컨텐트 • 문단의 특정 부분만 포맷팅 가능

 요소의 align(정렬) 속성 • 정렬(alignment) • 오른쪽 정렬, 왼쪽 정렬(기본값), 중앙 정렬 • 요소의 align 속성 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu">Enter</a> </card> </wml>

 요소의 mode 속성 • 라인랩(line wrap) 세팅 가능 컨텐트 • mode 속성 • wrap • 기본 값 • 문장이 한 줄에 다 들어가지 않는 경우 다음 줄로 • nowrap • 문장이 아무리 길어도 단 한줄로만 출력

단락의 라인랩 모드 변경 예제 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu">Enter</a> </card> </wml> • mode 속성을 다시 원래대로 변경하지 않으면 뒤에 나오는 단락에 계속 적용

문자 엔코딩(Character Encoding) • 특정 정보를 표현하는 문자 x <y + z • < : 제한 문자, 태그로 인식 • 제한 문자 • 수치 문자 엔티티 • 명명 문자 엔티티

수치 문자 엔티티(Numeric Character Entities) • 모든 문자는 각각의 고유한 숫자를 가짐 • 이 숫자를 참조해서 해당 문자 출력 • WML은 숫자를 유니코드(Unicode)에서 가져옴 (예: H ) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="numeric"> Hello world </card> </wml>

명명 문자 엔티티(Named Character Entities) • 제한 문자를 좀 더 쉽게 사용할 수 있게 x < y+x “Think of the box.” "Think of the box."

개행(line-break) 제어 • 목적 • 서로 이어져야 할 문자 사이에 개행이 발생하지 않도록 • 서로 떨어져서 나타날 문자가 붙지 않도록 • 방법 • 요소를 써서 개행 • 엔티티를 써서 개행 방지 • 소프트 하이픈() 사용

 요소를 써서 개행 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu">Enter</a> </card> <card id="menu" title="Wrox Travel"> Check out our new unbeatable offers, our full vacation listings, and our competitive vacation insurance scheme. You can also read reviews of our vacations in our features section. For more information, you can search the site, or follow our links, which include up to the minute weather reports. If you have any queries don't hesitate to contact us! </card> </wml>

 엔티티를 써서 개행 방지 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> You can contact us by e-mail, or drop a letter in the post - our address is Arden House, 1102 Warwick Road, Birmingham, UK. </card> </wml>

소프트 하이폰() 사용하기 • 긴 단어 중간에 하이폰을 삽입해서 전체적으로 줄 수를 줄임 • 예) microprocessor Intel today announced Intel today announced two new additions to two new additions to its expanding its expanding micro- microprocessor processor range range

텍스트 디스플레이 방식 변경

하이퍼 링크 • Hyperlink • 항해(navigation) • 목적지(destination) • 앵커(anchor) - 출발점

URL을 써서 카드 참조하기 • URL(Uniform Resource Locator) • 절대 경로, 상대 경로 • 부분 앵커 : URL과 #기호 • 식별자는 <card> 요소의 id 속성 • deck-url#card-id

URL 사용 예 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu">Enter</a> </card> <card id="menu" title="Wrox Travel"> Check out our new unbeatable offers, our full vacation listings, and our competitive vacation insurance scheme. You can also read reviews of our vacations in our features section. For more information, you can search the site, or follow our <a href="ex6_1links.wml">links</a>, which include up to the minute weather reports. If you have any queries don't hesitate to contact us! </card> </wml>

<a> 요소의 href 속성 • 경로 지정에 사용 • 덱 안에서의 왕래 • 단순히 목적지 카드의 id를 부분 식별자의 형태로 href의 값에 지정 • 같은 사이트 내에서의 왕래 • 카드를 지정하지 않거나 식별자가 그 카드와 부합하지 않으면 마이크로브라우저는 자동으로 그 목적지 덱 안의 첫번째 카드로 이동 <a href=“deck-url#card-id”> content </a> • 완전한 URL을 써서 왕래하기 <a href=http://www.wrox.com/faq.wml#privacy>FAQ</a>

다른 덱으로 항해하기 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="links" title="Links"> <a href="http://www.pistoff.com/wap.wml">3 Valleys WAP Snow Report</a> <a href="ex6_1wrox.wml">Wrox Travel</a> </card> </wml>

<a> 요소의 title 속성 • 하이퍼링크로의 간략한 설명을 포함 • 이 속성의 사용 방법은 사용자 에이전트에 달려있으며, 종종 이를 무시하는 사용자 에이전트도 있다 • 상호운용성을 위해 title 속성 값을 6개의 문자이내로 제한

<a> 요소의 accesskey 속성 • WML 설계서에서 사용자 에이전트에 꼭 요구하는 사항은 아님 • 사용자의 키패드에 있는 키를 눌러서 앵커 선택 가능 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="links" title="Links"> <a accesskey="1" href="http://www.pistoff.com/wap.wml" title="Report">3 Valleys WAP Snow Report</a> <a accesskey="2" href="ex6_1wrox.wml" title="Travel">Wrox Travel</a> </card> </wml>

<anchor> 요소 • <a> 요소가 <anchor>의 축약 • 사용자가 선택했을 경우 일어나는 일에 대한 고려 가능 • <go>, <prev> 요소와 함께 써서 하이퍼링크의 목적지 지정 가능

<go> 요소 • 이벤트(event)의 결과로 일어나는 동작 지정 • 예) • 하이퍼 링크가 선택되거나 카드가 디스플레이될 때를 감지해서 응답

<go> 요소의 href 속성 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="links" title="Links"> <anchor title=“Enter”> Enter <go href=“#menu”> </anchor> </card> <card id=“menu”> <a href="http://www.pistoff.com/wap.wml" title="Report">3 Valleys WAP Snow Report</a> </card> </wml>

<prev> 요소 • 이전 카드로 돌아갈 수 있게 하는 기능 • 스택 형태로 URL을 저장 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="links" title="Links"> <a href="http://www.pistoff.com/wap.wml" title="Report">3 Valleys WAP Snow Report</a> <a href="ex6_3wrox.wml" title="Travel">Wrox Travel</a> <anchor>Back<prev/></anchor> </card> </wml>

<do> 요소 • <a>, <anchor>의 제한점 • 텍스트 흐름 중간에 나타남 • <do> • 사용자 동작을 다루는 좀 더 일반화된 메커니즘 제공 • 실행은 마이크로브라우저에 전적으로 의존적 • 고유 속성 • type, label, optional, name

<do> 요소의 type, label 속성들

<do> 요소 사용하기 (1/2) <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="splash"> Wrox Travel Welcome to our WAP site! <a href="#menu" title="Enter">Enter</a> <do type="accept" label="Enter"> <go href="#menu"/> </do> </card> <card id="menu" title="Wrox Travel"> Check out our new unbeatable offers, our full vacation listings,

<do> 요소 사용하기 (2/2) and our competitive vacation insurance scheme. You can also read reviews of our vacations in our features section. For more information, you can <a href="search.wml" title="Search">search</a> the site, or follow our <a href="links.wml" title="Links">links</a>, which include up to the minute weather reports. If you have any queries don't hesitate to contact us! <do type="accept" label="Search"> <go href="search.wml"/> </do> <do type="accept" label="Links"> <go href="links.wml"/> </do> </card> </wml>

<do> 요소 실행 결과

요약 • WML 기본 • 텍스트 작성과 포맷팅 • 카드와 덱 사이 왕래

WAP 2

내용 • 표(tables) • 변수 사용 • 사용자 입력 얻어내기

표 구조 정의 • 표현이 체계적인 필요가 있을 때 • 행열의 구조로 데이터 정렬 • <table> 요소 • <tr>, <td>

<table> 요소 • 테이블을 구성하는 태그의 종류 • <table> • <tr> : table row • <td> : table data • <table> 요소는 요소 안에 있어야 한다 • columns 속성 • 반드시 사용해야 한다 • 값이 0이 아니어야 한다 <table columns=“number”> 컨텐트 </table>

WAP

WAP

Presentation Transcript

Protocolo WAP

WAP

WAP 101

WAP 2.0

About WAP

WAP Architecture

WEP-WAP

WAP

WAP Overview

Beyond WAP

WAP Sites

Tecnología WAP

WAP-services

WAP Traffic

WAP

WAP, WML

WAP

Pemrograman wap

WAP 2.0

WAP-Myc_1

WAP Overview

WAP