1 / 17

이번 시간에는 ...

이번 시간에는. 지난 시간에는 전화걸기 , 전화 받기 등 전화기능 , 휴대폰 단말기내 전화번호부 제어 기능 , 발신 전화 , 수신 전화 , 부재중 전화 등 , 전화 Call Logs 제거를 위한 기능 등 , WAP 의 전화 및 전화 부가 기능을 위한 WTAI 에 대해서 알아보았습니다 . 이번 시간에는 WAP 2.0 개발을 위한 XHTML 의 기본 사항을 학습해 보도록 하겠습니다. 학습 목표. 21 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WAP 2.0 XHTML. 이번 장의 학습 목표.

dennis-hickman
Download Presentation

이번 시간에는 ...

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 이번 시간에는... 지난 시간에는 전화걸기, 전화 받기 등 전화기능, 휴대폰 단말기내 전화번호부 제어 기능, 발신 전화, 수신 전화, 부재중 전화 등, 전화 Call Logs 제거를 위한 기능 등, WAP의 전화 및 전화 부가 기능을 위한 WTAI에 대해서 알아보았습니다. 이번 시간에는 WAP 2.0 개발을 위한 XHTML의 기본 사항을 학습해 보도록 하겠습니다.

  2. 학습 목표 21 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WAP 2.0 XHTML 이번 장의 학습 목표 무선 Markup 언어와 XHTML Mobile Profile 에 대해 알 수 있다. WAP 2.0 XHTML MP의 구성과 개발 Tool 및 개발 참조 Site에 대해 알 수 있다. WAP 2.0 XHTML MP 개발을 위한 XHTML MP 태그에 대해 알 수 있다

  3. 무선 Markup 언어 • 무선 Markup 언어의 발전 • 다양한 XML 기반 무선 Markup 언어  WML (WAP 1.0에 포함, SKT, LGT 및 전세계 대부분 사용) HDML (Openwave에서 개발, LGT 등 일부 이동통신사 적용) • 다양한 HTML의 무선 Markup 언어  mHTML (마이크로소프트 ME, KTF 사용), cHTML (Compact HTML, 일본 NTT DoCoMo 사용) • XHTML  기존 HTML의 범용성과 XML의 장점을 모두 갖춤 • 무선 Markup 언어의 발전

  4. 무선 Markup 언어 • XHTML MP (Mobile Profile) 특징 • HTML 4.0의 기능을 수용 + XML의 응용  HTML 4.0 Strict, Transitional, and Frameset DTD를 XML에 맞게 재구성 • HTML기능을 갖는 마크업 언어 : HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML MP (Mobile Profile) • XHTML 특징 • XHTML 문서는 XML의 규칙을 따름 : XHTL MP용 XML DTD를 따로 정의 • XHTML 문서의 미디어 타입은 text/html로 사용 : 기존 HTML 브라우저에서 사용 가능 • XHTML 문서의 사용자 Interface는 CSS (스타일 시트) 사용 • HTML과 XHTML의 차이 • XHTML은 대문자와 소문자를 구분  HTML은 구분 안함 • XHTML 태그는 모두 소문자 사용 • XHTML은 그 사용에 있어서 Syntax-Sensitive : HTML에 비해 문법 사용을 정확하게 해야 함 • XMHTML은 시작 태그, 끝 태그가 항상 쌍으로 존재해야 하며, 빈 태그는 ‘/’를 사용 (예: <p>~</p>. <hr />) • XHTML의 모든 속성 값은 인용기호(“”)와 함께 사용 (예. <a link href=“abc.xml”>)

  5. XHTML MP 구성 • XHTML MP (Mobile Profile) 구성 • XHTML MP DTD • 모든 XML 문서는 그 DTD를 가진다  WAP 1.0의 WML 서문 (Prolog) 의 사용과 유사 <?xml version="1.0" charset="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> • XHTML MP 기본 골격 • HTML의 골격과 유사  head와 body로 구성 <html> <head> ... </head> <body> ... </body> </html> • XHTML MP CSS (Cascading Style Sheet) • XHTML로 구성하는 문서의 스타일 정의 (HTML의 CSS와 유사) <head> <link href="mystyle.css" type="text/css" rel="stylesheet"/> ... </head>

  6. XHTML MP 개발 Tool • XHTML MP (Mobile Profile) Simulator • XHTML 문서는 “.html”로 저장 • XHTML 문서는 기본적으로 모든 유선 인터넷 브라우저에서 실행 가능 • XHTML용 전용 테스트 브라우저 이용 가능 • 예: Openwave Mobile SDK 브라우저 : http://developer.openwave.com에서 WAP 2.0 XHTML 및 WAP Simulator 브라우저 다운로드 • XHTML 참조 사이트 • 표준 XHTML 문서 Specification  http://www.w3.org/TR/xhtml1/ • XHTML MP 개발 및 Simulator 참조  http://developer.openwave.com/ • WAP 2.0 XHTML MP Specification  http://www.wapforum.org • XHTML 문서 Validation 검사 (W3C validator)  http://validator.w3.org

  7. XHTML MP Basic • XHTML MP (Mobile Profile) 기본 골격 • XHTML MP 문서 작성 기본 • XHTML DTD 선언, XML 지원 언어 선언 • <html> 태그 선언 시, 공식 XHTML Namespace (xmlns=“http://www.w3.org/1999/xhtml”) 지정 • XHTML의 모든 태그는 소문자로 표현 • XTHML 문서는 <html>로 시작  <head>와 <body>로 구성 • <head>에는 문서 타이틀과 스타일 시트 선언 • <body>는 XHTML 문서 컨텐츠 구성 <?xml version="1.0"encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <title> Welcome to my page </title> </head> <body> <h1> Welcome to XHTML! </h1> </body> </html>

  8. XHTML MP - Basic • XHTML MP (Mobile Profile) head • head 요소 • 문서에 관련된 정보를 표현 • 예) 제목, 관련 자료, 저자, 핵심 단어, … • <head> 내에 문서 타이틀 ( <title> ),XHML 문서의 CSS 스타일 ( <link> ), XHML 문서의 메타 요소 ( <meta>예: refresh, expire 등 ) 정의 • body 요소 • 실제 문서 내용 표시 • <body> 내 사용 태그는 HTML과 유사 <?xml version="1.0"encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <title> Head Element </title> <link rel="stylesheet"href="style.css"type="text/css"/> </head> <body> <h1> Welcome to XHTML! </h1> </body> </html>

  9. XHTML MP - 메뉴 • XHTML MP (Mobile Profile) 컨텐츠 메뉴 표현 • XHTML 메뉴 표시 • 일반 HTML의 메뉴 표시 방법과 동일 • 일반 Hyperlink, Image 삽입 링크 사용 가능 • <ol>, <li> 태그 등, Text Format 태그 이용하여 숫자 메뉴 표시 • 숫자 메뉴 표시 예제 : <ol>과 <li> 태그 사용 <?xml version="1.0"encoding="UTF-8"?> <!DOCTYPE html PUBLIC"-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <title> Head Element </title> <link rel="stylesheet"href="style.css"type="text/css"/> </head> <body> <p> Number Menu: <ol> <li> <a href="contact.jsp?id=32"accesskey="1"> Albert </a> </li> <li> <a href="contact.jsp?id=45"accesskey="2"> choi </a> </li> <li> <a href="contact.jsp?id=21"accesskey="3"> June </a> </li> <li> <a href="contact.jsp?id=17"accesskey="4"> Mary </a> </li> </ol> </p> </body> </html>

  10. XHTML MP - Text Format • XHTML MP (Mobile Profile) 컨텐츠 Text Format • XHTML Text Format 종류 • 일반 HTML의 Text 표시 방법과 동일  단락 표시 (<p>, <br> 등), 해더 표시 (<h1>, <h2>, <h6> 등) 문자 강조 표시 (<u>, <I>, <b> 등), 리스트 (<ul>, <ol> 등) • 제목 • <h1>큰제목</h1><h2>소제목</h2> • 순서 목록 (ordered list) • <ol> <li>첫째</li> <li>둘째</li> </ol> • 일반 목록 (unordered list) • <ul> <li>이것</li> <li>저것</li> </ul> • Text Format 예제 : <p> Plain text <br/> <em> Lots of emphasis </em> <br/> <i> Some italics </i> <br/> <b> This should be bold </b> <br/> <strong> This one bold too </strong> <br/> <b> <i> Bold and italic </i> </b> <br/> <q> Just a quote </q> <br/> <kbd> mono-spaced </kbd> </p>

  11. XHTML MP - Table • XHTML MP (Mobile Profile) Table 표시 • XHTML Text Format - Table • 일반 HTML의 Table 표시 방법과 동일 • 표 만들기  tr (table row), th (table header), td (table data) • 테이블 표시 예제 : <table border="2"> <tr> <td style="background-color:red;color:white“ colspan="2"> Colspan 2 </td> <td> Table </td> </tr> <tr> <td> With </td> <td> Background </td> <td rowspan="2"; style="background-color:blue;color:white"align="center"> Row <br/> Span </td> </tr> <tr> <td> in first </td> <td style="background-image:url(soccer.png);color:blue" align="center"> </td> </tr> </table>

  12. XHTML MP - CSS • XHTML MP (Mobile Profile) 컨텐츠 Format을 위한 CSS 사용 • CSS - XHTML 문서의 스타일 정의 • <head> 태그 내, CSS 정의 파일 명시 • CSS 내 내용 Example • CSS 사용 예제 : <head> <title> Head Element </title> <link rel="stylesheet"href="style.css"type="text/css"/> </head> BODY {color: #006699; font-family: Arial, sans-serif; background-color: #FFFFFF} TD {font-family: Arial, sans-serif} .bluetext { color: #006699; } .blue { color: #000000; background-color: #99CCFF;} File 명: style.css <table> <tr class="blue"> <td> 1 <a accesskey="1"href="1.html"> Menu #1 </a> </td> </tr> <tr> <td> 2 <a accesskey="2"class="bluetext"href="2.html"> Menu #2 </a> </td> </tr> </table>

  13. XHTML MP – Link & Image • XHTML MP (Mobile Profile) 그림 및 링크 표현 • XHTML 링크 • 기본적으로, 일반 HTML의 링크 방법과 동일 • <a href=“link_url”> 사용 • XHTML 이미지 • 유선 HTML 이미지 삽입 방법과 동일 • <img src=“image_source_url”> 사용 • XHTML 이미지 & 링크 예제 • 이미지 파일 명  plusm.jpg • 확인 버튼 클릭 시, top5.html 사이트로 이동 <a accesskey="2"class="bluetext"href="top5.html"> <img alt="mug shot"src="plusm.jpg"/> </a>

  14. XHTML MP – User Input • XHTML MP (Mobile Profile) 사용자 Input 처리 • XHTML 사용자 Input 처리 태그 • <form> 태그 : 사용자 Input을 지정한 사이트로 전송 • <select> 태그 : 다수개의 Selection List 제공, 사용자는 List 중 하나 Item 선택 가능 • <input> 태그 : 사용자 Input 직접 입력 (type=“text”), Radio Box (type=“radio”) 및 Check Box (type=“checkbox”) 의 Item 중 선택 입력 • 사용자 Input 처리 예제 : <form action="/servlets/processform"method="get"> <p> <select name="category"> <option value="blended"selected="selected">Product:</option> <option value="books">Books</option> <option value="music">Music</option> <option value="dvd">DVD</option> </select> <br/> Keyword: <br/> <input type="text" name="key"value="" format=""/> <br/> Do you accept? <br/> <input type="checkbox"name="accept"checked="checked" /> <br/> </p> <input type="submit"value="Submit"/> </form>

  15. 요약 정리 이번 시간에 소개했던 내용을 정리해 봅시다. 무선 Markup 언어와 XHTML Mobile Profile 에 대해 알아보았습니다. WAP 2.0 XHTML MP의 구성과 개발 Tool 을 알아보고 개발 참조 Site를 소개하였습니다. WAP 2.0 XHTML MP에 사용되는 다양한 태그를 설명하고 각각의 예제를 소개하였습니다. 다음 시간에는 국내 이통사별 컨텐츠 제작 가이드에 대하여 학습하시게 될 것입니다.

  16. 평가 하기 문제1 XHTML MP에 대해 말해 보시오 정답은 다음과 같습니다. XHTML Mobile Profile은 WAP 2.0 컨텐츠 제작 언어로, HTML의 범용성과 XML의 유연성을 모두 가지는 차세대 모바일 Markup 언어입니다. 해설내용: XHTML MP는 인터넷 표준 단체인 W3C와 WAP 표준 단체인 OMA가 함께 작성한 WAP 2.0 컨텐츠 제작 언어로, MP는 모바일 프로파일의 약자입니다. XHTML과 HTML의 차이점은 먼저, XHTML은 대소문자를 구분하고,XHTML에 사용하는 태그는 모두 소문자로 표시해야 하며, HTML이 태그 사용에서 문법 오류에 대해 유연하게 대처하는 면에 비해 XHTML 은 정확한 문법 사용이 요구됩니다.

  17. 평가 하기 XHTML MP의 문서 구성에 대해 말해보시오 문제2 정답은 다음과 같습니다. XHTML MP는 XML DTD 선언부와 <html>로 시작하는 문서 내용으로 구성 해설내용: XHTML은 XML DTD 선언부에 XHTML DTD와 XML 지원 언어를 선언하고, <html> 태그 선언 시, 공식 XHTML Namespace인 (xmlns=“http://www.w3.org/1999/xhtml”)을 지정합니다. XTHML 문서는 <html>로 시작하고, <head>와 <body>로 구성되며, <head>에는 문서 타이틀과 스타일 시트를 선언하고, <body>에는 XHTML 문서 컨텐츠를 구성합니다.

More Related