분류 전체보기
jQuery Mobile 기본 코딩
JQueryMobile은 우선 SPI(Single Page Interface)를 중점으로 설계되었다. SPI가 무엇이냐? html페이지 하나에 여러 페이지를 다 작성하겠다는 것이다. html4의 #을 통한 즐겨찾기와 유사한데 틀린 점은 각 내부 페이지가 별개의 페이지로 보여진다는 것이다. ... ... [source 1] 초기 로드 ... 소스 작성 ... [Source 2] SPI형태의 페이지 작성 slide [Source 3] 버튼 [그림 1] 버튼 about [Source 4] 삭제 버튼 [그림 2] 삭제 버튼 YES NO AAA [Source 5]
Hybrid App
Application iPhone Android WinMobile7 Bada Web HTML4 JavaScript CSS 장점 : 유지보수 용이 단점 : 속도 (Html Parsing, Network), Network Traffic Web App 모바일 브라우저에서 수행되는 App급의 사이트 Server 연동 realtime, Graphic의 문제를 해결하기 위해 HTML5 사용 (그러나 HTML 5는 정식버전이 아니다. HTML5를 국내시장에서 부정적으로 보는 사람도 많지만, Mobile환경에서 성공 가능성을 봄.) 그러나 HTML5도 기존의 App의 기능적인 측면을 못 따라감 그래서 Hybrid App가 나옴 Hybrid App Native App Web App Hybrid App 장점 * 화려하고 ..
iPhone Web App 만들기
iPhone은 기본적으로 Web App에 대해 설계되어있고, 사파리 모바일을 통해 인터넷을 하다가 Web App을 추가할 수 있다. 이 때, 기본 이름은 html의 이 되고, 아래 소스를 쓰면, 아이콘 이미지 및 Web App를 시작할 때 이미지를 보여줄 수 있다. 이것에 대해 찾아보다가 이미 너무 자세하게 설명해준 블로그를 발견했다. 배드걸s님[1]의 블로그를 참조하자. 매우 설명이 잘 되어있다. Reference [1] 배드걸s 블로그, http://blog.naver.com/bad0242?Redirect=Log&logNo=130100718142
Mobile용 Meta Tag
MobileOptimized Meta Tag Microsoft에서 모바일을 위해 Layout의 가로 크기를 조정하기 위해 고안한 태그 ex) Smartphone : content = "176" pocket pc : content="240" or content="480" HandheldFriendly Meta Tag Palm의 AvantGo mobile browser를 위한 태그 모바일 화면 크기 조정관련 설정 ex) * true : 모바일용(화면 크기 조정 기능) * false : Desktop에 최적화된 html 사용 Viewport Meta Tag 대부분의 스마트폰 브라우저에서 화면의 크기를 조정하기 위해 사용 기존 width값은 980px ex) Viewport META Example Value D..
Mobile UI/UX Guideline
Mobile UI/UX Guideline ([1][2]참고) 1. 하나의 웹을 위한 설계 다양한 장비를 고려하여 설계한 컨텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다. 주제의 일관성: 다양한 장비에서 동일 URI에 접속했을 때 제공되는 정보와 기능은 일관성이 있어야 함 성능: 사용자에게 향상된 기능을 제공하기위해 장비 성능을 상세히 확인 오작동: 다양한 장비가 각각 다르게 해석하여 발생할 수 있는 오작동을 염두에 두고 설계 테스팅: 실제 장비와 에뮬레이터 상에서 테스트를 수행 2. 웹 표준 준수 세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야한다. 유효한 MARKUP: 표준 문법에 유효한 문서를 작성 컨텐츠 포맷 지원: 장비가 지원하..
서버사이드 자바스크립트 기술
서버 사이드쪽을 자바스크립트로 구현하는 기술 정말 놀랍다. 시간이 날 때 조금 더 자세한 블로깅을 하겠다. http://nodejs.org/
크롬(Chrome) 개발자 도구
크롬이 기본으로 개발자 도구를 지원해주고 있었다. 구글은 정말 사랑할 수 밖에 없는 것 같다. 따로 추가 플로그인 같은걸 설치해주어야 할지 알았는데 크롬 설치시 기본적으로 내장되어 있다. 꾀 기능이 많아 보이는데 조금씩 알아가야 할 것 같다. (당장은 내가 웹 개발자가 아니니 쓸일은 없어보인다. -_-;) 단축키 : [CTRL] + [SHIFT] + J 위에는 HTML5에서 추가된 storage를 테스트하고 개발자 툴을 이용해서 저장된 storage를 확인한 것이다. 아래는 소스이다. LocalStorage Test remove key:- value: Add [Source 1] storage.html 아래는 HTML5에서 추가된 Indexed DB의 테스트 코드이다. Database Test remove..
Aptana 플러그인
Aptana 쪽에서 만든 플러그인 하이브리드와 연관하여 자바스크립트 코딩에 도움이 됨 http://download.aptana.org/tools/studio/plugin/install/studio [그림 1] Aptana 설치 후 뜨는 창 설치 하면 그림 1과 같은 화면이 뜨고 그림2의 버튼이 추가된다. 그림 2의 첫 번째 버튼을 누르면 그림3이 뜨는데, 추가적인 자바스크립트 라이브러리를 편리하게 설치할 수 있다. 그리고 그림4와 같이 필요한 라이브러리를 추가적으로 체크해주자. [그림 2] Aptana 설치 후 추가되는 버튼 [그림 3] Install new Additional Features [그림 4] Window->Preferense 설정 화면 * 이클립스 실행 웹 브라우저에 기타 브라우저 등록 [..
App 개발 환경
Android http://developer.android.com OS : Linux VM : Dalvik IDE : Eclipse Language : Java iPhone http://developer.apple.com OS : iOS IDE : xCode, Interface Builder Language : Objective C Window Mobile http://create.msdn.com/en-us OS : Window Phone7 IDE : Window Phone Developer Tool(VS2010 for Window Phone) Language : C#, VB.net Bada http://developer.nada.com OS : RTOS IDE : Bada SDK(Eclipse) Lan..
웹 브라우저 점유율을 보여주는 사이트 - 스탯카운터
전체 국가나 각 국가의 웹 브라우저 시장 점유율을 보여주는 사이트. http://gs.statcounter.com/ 아래쪽에 보면 알겠지만, IE의 점유율이 많이 내려갔지만 국내에서는 압도적인 점유율을 자랑한다. 그러나 Mobile 상에서는 많이 다른 모습을 보여준다. * 전체 국가 브라우저 점유율 * 국내 브라우저 점유율 * 국내 모바일 브라우저 점유율 기타 HTML5 관련 사이트 http://www.html5rocks.com/en/ http://caniuse.com/ http://www.w3.org/ https://demos.mozilla.org/ko/