[jQuery Mobile] jQuery Mobile로 봄싹 첫화면 만들기

퇴근 버스에서 코딩 중인데… 차가 막힌다. 그래도 에어콘을 틀어주니 다행이다. 안그럼 노트북과 에그가 만들어 내는 열로 완전 익어버렸을텐데…

jQuery Mobile 데모 페이지를 그대로 베꼈다.

궁금한게 있다.

1. 근데.. Demo 에서 보여주는 다른 예제 코드를 보려면 어떻게 하는지 모르겠다. 소스 코드 보기를 선택하면 매번 데모 페이지의 첫 화면 소스 밖에 안 보인다.. 흠;; 해당 페이지를 다운로드 받아볼까..

2. 링크 눌렀을 때 어떻게 이동하는걸까나… 페이지 전환이 되지 않는다. 물론 꼼수가 있긴 하지만.. 뭔가 Ajax 기반으로 페이지 전환을 하는 것 같은데.. 어찌하는겨..?


Multimodal Interface

멀티모달 인터페이스  [multimodal interface]

  인간과 컴퓨터, 또는 단말기기 사이의 인터페이스를 음성뿐만 아니라 키보드, 펜, 그래픽 등 다양한 수단을 활용하는 것. 사용자가 음성, 키보드, 펜 등으로 정보를 입력하고 음성, 그래픽, 음악 및 멀티미디어나 3차원 영상 등을 통하여 출력을 받게 하는 인터페이스로서 월드 와이드 웹 컨소시엄(W3C)의 멀티모달 인터랙션 워킹 그룹에서 멀티모달 인터랙션 프레임워크(multimodal interaction framework), EMMA(Extensible Multimodal Annotation) 및 잉크 마크업 언어(Ink Markup Language) 등의 표준화를 진행하고 있다.

출처 네이버 용어 검색

사용자 삽입 이미지출처 : 구글 이미지 검색

이걸로 학교 수업에서 10분간 발표할 자료를 만들어야 하는데… 흠.. 언능 만들고 공부나 해야지 에구~

분산 시스템 시험 문제

분산 시스템 정의.

미들 웨어의 위치와 정의.

분산 시스템의 예제를 쓰세요.

투명성이 무엇이냐 – 10

투명성의 예제 – 11

개방성이 무엇이고 하기 위해 필요한 것이 무엇인가? – 18

확장성 – 23 말고 뒤에 퍼포먼스와 관계된

28 – 확장 테크닉의 세가지 나열 하고 쓰십쇼.

하드웨어

36 – 어떻게 나누는가? 각각의
특성은 무엇인가?

38 – 멀티 프로세서 컨디션 많다
->
캐쉬 쓴다 -> 스위치 – 41

소프트웨어 컨셉 OS –

49, 50 – 커플링

NOS 장단점 ? 미들웨어에서는
그 장점을 살리고 단점을 없앤다. – 76, 77

미들웨어 모델 – 79

82 외워

– C/S –

93 – 티어 구조 중요

2 티어가 뭐고 3 티어가
뭔지 장단점은 뭔지 쓰시오 – 99

흠냐.. 교수님이 뽑아 주신 문제 들입니다. 문제 근처에 있는 번호는 관련된 PPT 페이지 번호죠. 저는 지금 부터 저 PPT에 있는 내용을 외워야 합니다. 공부하기 전에 써봅니다.

분산 시스템 정의. => 분산되어 있는 시스템

미들 웨어의 위치와 정의. => 미들 이니까 당근 중간에서 플랫폼과 외부를 연결하는 것.

분산 시스템의 예제를 쓰세요. => 웹서비스, 서버 여러대로 돌리는 포탈 사이트, 외계인이 보내는 신호 잡으려는 무언가;;

투명성이 무엇이냐 – 10 => 안 보이는 것

투명성의 예제 – 11 => 투명인간

개방성이 무엇이고 하기 위해 필요한 것이 무엇인가? – 18 => 오픈 마인드

확장성 – 23 말고 뒤에 퍼포먼스와 관계된 => 멀티 능력을 보유하려면 자원 관리와 타이밍이 좋아야 함.

28 – 확장 테크닉의 세가지 나열 하고 쓰십쇼. => 확장 테크닉 세가지… 잘, ZAL, JAL

하드웨어

36 – 어떻게 나누는가? 각각의
특성은 무엇인가? => 보조 기억장치, 주 기억장치, CPU, 입력장치, 출력장치 기타 등등

38 – 멀티 프로세서 컨디션 많다
->
캐쉬 쓴다 -> 스위치 – 41 => 흠.. 그렇군요. 근데요?

소프트웨어 컨셉 OS –

49, 50 – 커플링 => 돈이 없어요~

NOS 장단점 ? 미들웨어에서는
그 장점을 살리고 단점을 없앤다. – 76, 77 => 넹

미들웨어 모델 – 79 => Spring이 아주 이쁜 모델

82 외워 => 싫어요 ㅠ.ㅠ

– C/S –

93 – 티어 구조 중요 => 네 중요하죠.

2 티어가 뭐고 3 티어가
뭔지 장단점은 뭔지 쓰시오 – 99 => 2층, 3층

공부 좀 해야겠네요.

정리 끝~ 워드로 4장 반 분량이네요. 요걸 외우면 시험 잘 본다는거..
[#M_ more.. | less.. |

분산시스템 정의: A collection of independent computers that appears to its users as a
single coherent system.

 

미들웨어의 위치와 정의:  Middleware : organized by means of a layer of software that is
logically placed between a higher-level layer consisting of users and
applications

 

분산 시스템의 예: 학교 시스템, 주문
처리 정보 시스템, WWW

 

분산 시스템 목적: Connecting Users and Resources, Transparency,
Openness, Scalability

 

투명성이 무엇이냐: To hide the fact that its
processes and resources are physically distributed across multiple computers

 

투명성 예:

 

개방성이 무엇이고 무엇을 하기 위해 필요한 것이 무엇인가?

다른 시스템에서 제공하는 서비스를 서로 사용할 수 있도록 하는 것. Portability,
Flexibility, Extensibility
를 고려해야 한다.

 

확장성 이란? 시스템을 확장할 때 비용이 적게 들고 퍼포먼스가 좋아질수록
확장성이 좋다.

 

 

 

Three techniques for scaling

n  Hiding communication latencies

n 
Asynchronous communication

n 
More or less independent tasks
can be scheduled for execution while another task is waiting for communication
to complete.

n  Distribution : Decomposition

n 
Taking a component, splitting
it into smaller parts and subsequently spreading those parts across the system.

n  Replication of Components

n 
Replicate components across a
distributed system

하드웨어 구조

멀티 프로세서, 멀티 컴퓨터

 

멀티 프로세서의 문제: coherent memory -> 버스가
과다 사용(overload)되기 때문에 성능이 저하 된다 -> 버스와
메모리 사이에 캐시를 사용한다(자주 사용하는 정보를 가지고 있는다.).

그러나.. Cache coherent problem 발생 = 제한된 Scalability로 인해 병목 현상 발생한다. -> 메모리를 모듈별로 쪼개서 크로스바 스위치 사용 -> 그러나
크로스바 스위치의 문제 발생 = 크로스바 스위치 비용이 크다.
=>
오메가 스위치 사용 => 스위치 비용 줄여야 한다 => Hierarchical systems = 몇몇 메모리를 CPU
담당 시킨 것. => Homogeneous Multicomputer Systems(Bus-based
multicomputer => Switch-based multicomputer)

 

 

Network Operating System

n  Advantage

n  Scalability

n  Openness

n  Disadvantage

n  Transparency

n  Usability

 

Middleware

n  Consider the definition of distributed system

n  Independent computers => NOS

n 
Scalability and Openness

n  Single System Image => DOS

n 
Transparency and Usability

n  Middleware

n  An additional layer of software between applications and NOS

n 
is used in NOS to more or less
hide the heterogeneity of the collection of underlying platforms

n 
also to improve distribution
transparency and advanced communication facilities and to provide various
services

 

Middleware Model

n  Distributed File System

n  All resources are treated as files

n  No difference between local and remote files

n  Remote Procedure Call    

n  Emphasis on hiding network communication by allowing a process to
call a procedure of which an implementation is located on a remote machine

n  Distributed Object

n  Each object implements an interface that hides all the internal
details of the object from its users

n  The Web Model

n  Extremely simplifies the use of network resources (distributed
documents model)

 

Middleware Model

n  Distributed File System

n  All resources are treated as files

n  No difference between local and remote files

n  Remote Procedure Call    

n  Emphasis on hiding network communication by allowing a process to
call a procedure of which an implementation is located on a remote machine

n  Distributed Object

n  Each object implements an interface that hides all the internal
details of the object from its users

n  The Web Model

n  Extremely simplifies the use of network resources (distributed
documents model)

 

Middleware Services

n  Access Transparency

n  RPC, remote invocation, distributed file systems, distribute
database

n  Naming

n  Name services allow entities to be shared and looked up (as in
directories)

n  URL

n  Persistency

n  Distributed Transaction

n 
Allows multiple read and write
operations to occur atomically

n  Atomicity

n  Security

n  Combined with the need for extensibility, security has turned out to
be one of the hardest services to implement in DSs

 

Application Layering

n  User-Interface Level

n  Processing Level

n  Data Level

 

2-Tier vs. 3-Tier Client/Server

n  2-tier client/server system

n  the application logic is either inside the user interface on the
client or within the Database on the server (or both)

n  Ex) file server, database server with stored procedures

n  3-tier client/server system

n  the application logic lives in the middle-tier

n  In theory, 3-tier systems are more scalable, robust, and flexible.

n  The can integrate data from multiple sources on heterogeneous
systems

n  Ex) TP Monitors, Distributed Objects, and the Web

_M#]

팀플이 솔플이 되는 순간

얼마전 맨유의 경기 중에 루니가 준 완전 나이스 패스를 호날두가 대기권 탈출 슛으로 황당하게 마무리한 적이 있었습니다.

간단한 웹사이트 하나를 만드는 팀플에서 jsp도 모르고 db도 모른다길래 html만 부탁했더니 아래처럼 해서 저에게 줬습니다. 메인 화면입니다.

프레임은 자유롭게 움직이고 높낮이도 제대로 안맞아 있습니다. 팀이름을 “세번째 팀” 이라고 지었네요. 제 자신도 띄어쓰기를 잘 지키지 못하기 때문에 뭐라고 그리 꾸짓고 싶진 않지만 “경매물품보기”는 “경매물품등록”은 보기가 싫어지네요. 참고로 그림이나 꾸미기는 왠지 여자가 잘할 것 같아서 여학우에게 부탁했던 부분입니다. 여자라고 다 미적이지는 않다는거~ “경매물품보기”를 클릭하면 예술입니다.


이게 뭔가… 순간 당황스러워서 한동안 넋을 놓고 보고 있을 수밖에 없었습니다. 내가 무엇을 잘못했길래 이런 시험에 들게 하는 것인가. 분명 나와 대화를 할 땐 잘 알아들은 척 하더니 하나도 의사소통이 제대로 안됐다는 것을 여지없이 보여줍니다. 지역별에는 서울 대전 대구 부산 과 같은 주요 도시명만 오면 되고 가격별에는 평당1만~10만, 10~100만 이런식의 단위가 와야 하는데 쌩뚱맞게 주소가 나옵니다. 그리고 화려한 표.. 딱봐도 사람이 할 짓이 아닙니다. 그래서 혹시나 해서 소스코드를 봤습니다.

※주의 스크롤 압박 소스 보기
[#M_ more.. | less.. | <html>

<head>
<meta http-equiv=”content-type” content=”text/html; charset=euc-kr”>
<title>경매물품..ㅋㅋㅋ</title>
<meta name=”generator” content=”Namo WebEditor”>
</head>

<body bgcolor=”white” text=”black” link=”blue” vlink=”purple” alink=”red”>
<p>&nbsp;</p>
<table border=”1″ width=”100%” height=”29%” bordercolor=”white”>
   <tr>
       <td width=”286″ height=”93″ border=”1″ bgcolor=”black” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:24pt;”><font color=”white”>지역</font></span></b></p>
       </td>
       <td width=”413″ height=”93″>&nbsp;</td>
       <td width=”286″ height=”93″ bgcolor=”black” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:24pt;”><font color=”white”>가격</font></span></b></p>
       </td>
   </tr>
</table>
<p>&nbsp;</p>
<table border=”1″ width=”100%” height=”100%” bordercolor=”white”>
   <tr>
       <td width=”46″ height=”20″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”white” height=”44″ bordercolor=”black”>
           <p align=”center”><b>&nbsp;</b><span style=”font-size:18pt;”><b>서울</b></span></p>
       </td>
       <td width=”153″ height=”20″>&nbsp;</td>
       <td width=”94″ height=”20″>&nbsp;</td>
       <td width=”94″ height=”20″>&nbsp;</td>
       <td width=”19″ height=”20″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ height=”44″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″ height=”20″>&nbsp;&nbsp;인천광역시 남구 주안 5동 태화아파트 1</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;&nbsp;동 1405호</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”><b>&nbsp;</b></td>
       <td width=”85″ bgcolor=”white”><b>&nbsp;</b></td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#CCCCCC” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>경기도</span></b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#CCCCCC” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”85″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″ height=”21″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#ABA7A7″ height=”45″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>충청도</span></b></p>
       </td>
       <td width=”153″ height=”21″>&nbsp;</td>
       <td width=”94″ height=”21″>&nbsp;</td>
       <td width=”94″ height=”21″>&nbsp;</td>
       <td width=”19″ height=”21″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#ABA7A7″ height=”45″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″ height=”21″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”85″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#777373″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>전라도</span></b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#777373″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”85″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#595656″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>경상도</span></b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#595656″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″>&nbsp;</td>
       <td width=”85″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″>&nbsp;</td>
       <td width=”14″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″>&nbsp;</td>
       <td width=”85″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″>&nbsp;</td>
       <td width=”14″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″>&nbsp;</td>
       <td width=”85″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″>&nbsp;</td>
       <td width=”14″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
</table>
<p>&nbsp;</p>

</body>

</html>_M#]
물어봤지요.

“뭘로 만드신건가요?”

“나모요.”

“아.. 그렇군요. HTML로 그냥 코딩할 줄 모르시나요?”

“아니요. 아는데 시간이 오래 걸려서. 뭐가 잘못됐나요?”

화면을 꾸미려는 코드는 html에서 최소화 시켜야 소스코드 보기가 쉽습니다. 꾸미기는 css로 따로 빼줘야 유지보수도 편하고 역시 코드 보기가 좋은 것 같습니다. 이 말을 해줬지만 css를 모른다. 나는 잘 보인다. 두 마디로 “왜 내가 한걸 무시해. 나 삐질라그래!”라는 감정을 대신해 주었습니다.

그래서 꾸미기가 하나도 없이 html로 제가 다시 만들어야했습니다. 팀플이 솔플이 되는 순간입니다.