반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형

jQuery Mobile에서는 두가지 방법으로 다른 페이지들과 연결을 하는데요.

첫번째는 <a> links attributes 를 사용해서 다른 페이지들과 연결을 하는 방법이 있구요.

두번째는 $.mobile object 로 정의된 changePatge() 메소드를 사용하는 방법이 있습니다.


이 두가지 방법과 관련해서 공부해 보겠습니다.


Manage the attributes of links



윈도우(페이지)에서 다른 윈도우로 transition 하는 것은 a link 를 통해서 이루어 집니다. 버튼 같은데에 이 a link를 적용해서 사용하거나 하죠. 이 link의 attributes들은 클릭 했을 때 어떤 동작이 일어나도록 합니다.


Link to an email address or phone number


아주 간단한 예제를 보죠. 우리의 애플리케이션 창에서 email, SMS, 전화걸기 등을 할 수 있도록 하겠습니다. <a> link의 href attribute 값을 지정함으로서 이러한 action들이 이루어 지도록 할 수 있습니다.


Links to an email address and telephone number


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Talk to Eric Sarrion : </p>

    <a href=mailto:ericsarrion@gmail.com>By mail</a><br /><br />

    <a href=tel:0625570924>By phone</a><br /><br />

    <a href=sms:0625570924>By SMS</a><br /><br />

  </div>

</div>


</body>





convention11.html


Link to a window in the same HTML page


이건 이전부터 많이 사용하던 고전적인 방법이죠.  링크에 href를 넣는 겁니다. 새로운 윈도우에 대해서는 <div> element의 id 를 사용하구요. 아까 그 href에는 "#" character를 넣습니다. (eg href="#win2")


An HTML page containing two windows


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=#win2> Goto window 2 located in the same page </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>



convention12.html


Link to a window in another HTML page on the same server


다른 HTML 페이지가 같은 서버의 다른 위치에 있다면 jQuery Mobile 은 내부적으로 Ajax call 을 사용해서 다른 HTML 의 내용을 load 합니다. 두개의 파일은 반드시 같은 서버에 있어야 합니다. 그렇지 않으면 jQuery Mobile에 의한 Ajax call 이 제대로 작동되지 않을 겁니다.


Index.html file that contains the first window


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=index2.html> Goto window 2 located in index2.html </a>

  </div>

</div>


</body>

</html>


index2.html file containing the second window


<!DOCTYPE html>

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>


</body>

</html>



convention131.html


convention132.html

(Firefox 브라우저에서 테스트 해 보세요.)


여기서 주의해야 할 점은 Ajax 에 의해 로드되는 페이지의 encoding을 가리키기 위해 <meta> tag를 사용했다는 겁니다. 별도의 HTML 파일에 페이지가 있게 되면 jQuery Mobile에 의해 내부적으로 만들어지는 Ajax request는 디폴트로 UTF-8을 사용합니다. iso-8859-1 encoding을 사용하면 외국어를 사용할 때 활용될 수 있습니다.





링크를 클릭하면 두번째 HTML 페이지가 나타납니다.





어떻게 jQuery Mobile이 새로운 HTML 페이지를 로딩하는지를 이해하기 위해 firfox에 있는 Firebug를 사용해보도록 하겠습니다.


클릭하기 전의 HTML 은 아래와 같습니다.




클릭하고 난 후의 HTML 은 아래와 같습니다.



두번째 <div> element (with id win2)가 HTML 페이지의 DOM tree elements의 한 부분이 되는 것을 볼 수 있습니다. 이것은 index2.html page 안에 포함돼 있는 두번째 윈도우와 연관이있습니다. jQuery Mobile이 사용하는 Ajax technique들에 의해 내부적으로 일어난 일입니다. 그렇기 때문에 첫번째 클릭이 일어나면 내용을 표시하기 위해 약간의 시간이 더 걸리게 되는 겁니다. (서버로부터 새로운 HTML 코드를 새로 retrieve 하고 이것을 현재 표시돼 있는 HTML code에 insert 하기 위한 시간이죠.) 이제 새로운 HTML 코드는 final page로 서 로드 됩니다. 이제 이후에 일어나는 클릭에 대해서는 이러한 시간을 필요로 하지 않습니다. 그러니까 좀 더 빨리 화면이 표시 될 수 있겠죠.


두번째 HTML 페이지 내부에 여러개의 윈도우가 있다면 이 경우에는 첫번째 윈도우만 insert 되게 됩니다.


이제 다시 Back button을 사용해서 이전 페이지로 돌아가 보죠. Firebug에 표시되는 HTML code는 아래와 같습니다.



이제 DOM tree에서 두번째 윈도우가 사라진 걸 볼 수 있습니다. jQuery Mobile은 메모리 공간을 절약하기 위해 그 부분을 메모리로부터 remove 합니다. 만약 이 경우에도 메모리에 계속 저장돼 있게 하려면 <div> element안에 data-dom-cache=true attribute 를 넣어주면 됩니다.


Index2.html file containing the second window, which will be stored in memory despite its disappearance of the display


<!DOCTYPE html>

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2 data-add-back-btn=true data-dom-cache=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>









반응형

영화 MB의 추억 예고편

2012. 10. 8. 20:02 | Posted by 솔웅


반응형



10월 18일 개봉예정인 MB의 추억 메인 예고편!


MB의 추억 (Remembrance of MB, 2012)


2007년 MB의 관점에서 바라본 2007년의 유권자!
 그리고, 2012년 우리가 2007년의 MB를 되돌아 보는 정산코미디!
 정치인이 선거에 출마할 때면 허리와 고개가 생고무가 되지만 일단 당선만 되면 그 유연하던 허리와 고개가 시멘트로 변한다. 한마디로 눈에 뵈는 게 없어진다. 2012년 유권자 관점에서 2007년 MB의 대선 활동을 되돌아 보면, 참 황당하게 낚였다고 생각할 지 모르겠지만, 그 땐 그게 제대로 먹혔다. 2007년 MB의 관점에서 2007년의 유권자는 어떤 집단이었을까?
 시간을 뒤섞어 보자. 2012년 우리가 2007년의 MB를 만나러 간다. 당시 경제를 살릴 준비된 지도자 MB는 국민들의 열렬한 지지를 받았다. 유권자의 입맛에 맞는 말들을 MB는 막 던졌고 탐욕적인 유권자는 열광했다. 2007년 유세 중 MB가 당시 여당을 향해 내뱉은 공격적인 말들은 대부분 지금 MB자신과 현재 여당에 해당하는 말이다. 돌이켜 보면 레알 코미디 같은 상황이지만 MB는 2012년에도 여전히 나름 대통령직을 열심히 수행하고 있고, 5년이 지난 지금 당시의 말들에 대해 아무도 정산하지 않는다.







이번 대선은 정권 심판, 정권 교체 가 되야 된다고 저는 생각합니다.

반응형

Together we can, Together we will

2012. 10. 6. 21:11 | Posted by 솔웅


반응형

그렇게 뛰어나게 실력이 좋지도 않고 똑똑하지도 않은 평범한 내가 정말 운이 좋아 미국에서 개발자로 생활하고 있는데요...


뭐 정확하게 얘기하면 미국에서 외국인 노동자로 일하고 있는거죠.


한국에서 외국인 노동자로 일하고 있는 분들 하고는 비교할 수 없겠지만 하옇든 외국인 으로 산다는 것 그리고 외국인 노동자로 산다는 것은 어디나 힘든 점들이 있을 겁니다.


미국이 어떤 이유에서든 물질적으로 풍요롭고 또 개인의 권리를 존중해주는 분위기가 한국과는 좀 차이가 있어서 그런데서 오는 다른 작업환경 생활환경들에서 오는 좋은점들도 있구요.


체제라던지 이데올로기라던지 외적인 이런 체제를 유지하는 내면의 메커니즘이라던지 사회 제도라던지, 정치문화, 언론문화, 사회문화 같은 이런 큰 규모의 얘기를 오늘 하고 싶은건 아니구요.

(물론 하고 싶은 얘기가 없는 것은 아니지만......)


그냥 오늘은 개인적인, 일반 소시민들의 사고, 시민의식 뭐 그런것 들 중의 한가지에 대해 생각해 보고 싶습니다.

고 딱 한가지....

시민들의 장애인에 대한 인식과 태도요.


오늘 ohmynews 를 보다가 인상깊게 읽은 기사인데요.


발달장애를 가진 쌍둥이를 키우는 어머니의 글이었습니다.

([장애아 부모로 산다는 것⑥] 자폐성 장애아 한결·한길 엄마 우진아씨)


링크 걸어놨으니까 관심 있는 분은 읽으시면 좋을 것 같습니다.

그 기사중에 제 맘에 콕콕 박혔던 대목을은요.


물론 사람들에게 피해를 끼칠 때도 있었어요. 대 놓고 '애 교육을 저 따위로 시키느냐' '장애가 있는 애들을 왜 데리고 다니느냐'라며 욕하는 분들도 계셨지만, 그때그때 이해를 구했어요. '우리 아이가 장애가 있어서 그런다'고요. 그리고 '규칙이나 예의를 잘 이해하지 못하는 자폐'라고요.


장애인이 적응해야 할 사회 환경 중 대표적인 것이 대중교통이잖아요. 초등학교 입학 전 조기교실을 다닐 때도 일부러 대중교통을 이용했어요. 두 녀석을 데리고 버스를 타면 별일이 다 있지요. 버스에서 쫓겨나 중간에 내린 일도 여러 번 있었어요. 한 번은 아이가 하도 소란을 피우고 난리를 치니 기사 아저씨가 잠실대교 중간에 버스를 세우더라고요. 애들 데리고 내리라고요. 거기서 내려 3시간을 걸어서 집에 왔어요. 택시를 탈 수도 있었지만 일부러 걸었어요. '중간에 내리면 이렇게 고생한다'는 걸 가르치려고요.


버스에 동승했던 승객들 중 반은 엄마를 비난했고 반은 동정했다. "시끄러우니 아이를 데리고 내리라"는 승객은 차라리 이해할 수 있었다. 그러나 장애에 대한 이해 없이 "저런 걸 왜 낳았어?" "저런 걸 왜 데리고 다녀"라며 들으라는 듯 큰소리로 비난하거나 대놓고 "쯧쯧" 혀를 차며 동정 아닌 동정을 하는 사람들


아직은 우리 사회가 장애인을 동등한 인격체나 동등한 사람으로 인정하지 않아요. 장애인을 부족한 사람으로 여겨 무시하고 경멸하거나 고작해야 '불쌍하다' '안 됐다' 동정하는 정도지요. 장애인 본인들도, 장애아를 둔 엄마들도 동정을 원하는 것이 아니에요. 존중해 주지 못할 거면 차라리 동정보다는 모른 척해주길 바라는 마음이에요.


이 것 말고도 다른 많은 좋은 얘기들이 있었지만 오늘은 이 부분들이 저에게는 많이 돋 보였습니다.


왜냐하면 어제 밤에 유튜브 비디오 한개를 봐서인데요.



몰래 카메라 인데요.


상황 설정은 이렇습니다.

Autism 에 걸린 아이가 가족과 같이 식당에 왔는데요.

물론 정상이 아니니까 주변사람이 신경쓰이게 되겠죠.

그런데 한 사람이 이 가족들에게 그 아이 데리고 집에 가라고 뭐라 그러는거예요.


그런 상황에서 주위에 있는 평범한 사람들의 반응을 보는 건데요.


모두들 생각보다 더욱 더 적극적으로 그 아이와 가족의 편을 드는거예요.



저 위의 기사를 보면서 저도 한국에서 태어나서 한국에서 교육받고 한국에서 어린시절 젊은 시절 다 보냈기 때문에...

그런 상황에서 어떤 사람들은 이해해 주지만 또 어떤 사람들은 대놓고 불편해하고 집에나 데려가라 그러고 도움도 안되는 동정이나 하고 했을 거라는게 그림이 충분히 그려지는거예요.


그리고 길지는 않지만 미국에서 생활하고 있으니까 저 비디오에서처럼 저런 상황에서 사람들이 장애가 있는 사람에게 어떠한 눈치도 주지 않을 거라는게 충분히 그림이 그려지고요.



그렇다고 미국은 어떻고 한국은 어떻고 더 깊게 파고 들어가서 비교하고 싶은 생각은 없고요.


그냥 한국에서도 이렇게 장애인들에 대한  그리고 약자에 대한 생각이 좀 더 개선 됐으면 좋겠어요.


그리고 이런것이 독재와 급격한 경제개발을 거치면서 너무 경쟁위주의 사고방식, 대의를 위해서는 작은 시민들의 피해는 필수불가결하고 나아가서는 너무 당연하게 느끼는 분위기에서 작은 시민들보다도 더 작고 경쟁력에 도움이 안되는 약자와 장애인들에 대한 생각과 태도가 너무 비인간적으로 된 것은 아닌가 생각 됩니다.


저도 이곳 미국에서 밀알이라는데를 다니면서 장애인들과 이전보다 많이 접해보고 하면서 여러가지를 생각하게 됐는데요.


당연히 장애인들이 자본을 확대 재생산 하는데는 아주 비효율적입니다.

하지만 장애인들은 사랑을 확대 재생산 하는데는 아주 효율적입니다.


사랑을 확대 재생산하고 배려를 확대 재생산하고 그러면서 편안함을 확대 재생산하고 기쁨을 확대 재생산하고 행복을 확대 재생하는데 아주 효율적인 존재입니다. 그들은......


뭐가 더 이득인지 따지기 좋아하는 마음이 누구에게나 다 있겠죠?

그게 지금을 사는 한국사람들(저도 포함해서)에게는 돈이나 경제 쪽의 이득을 더 따지는게 당연하게 받아들여지는 것 같은데요.


그렇더라도 잘 생각해 보면 그 기준에서도 후자쪽이 훨씬 더 유익한 거 아닐까요?




반응형