2011년 봄학기 정보컴퓨터공학부 컴퓨터 소프트웨어 설계 및 실험

Slides:



Advertisements
Similar presentations
6 장 객체 - 지향 설계 ③. 목차 GUI 레이아웃  전화기 키 패드 전화기 키 패드 전화기 키 패드 모양의 GUI 를 만드는 Telephone.java, TelephonePanel.java 를 완성해 보자.  주석을 참고하여 TelephonePanel.java.
Advertisements

프로그래밍언어론 TA 윤들녁. 소개 윤들녁 연락처 : 공대 7 호관 4 층 401 호 데이터베이스 연구실 실습 후 날짜 _ 학번.zip 으로.
UX, RIA, 그리고 … Silverlight 공도소프트
을지대학교 무선 네트워크 사용 방법 2010 년 06 월 01 일. 을지대학교 무선 네트워크 사용 방법 1. PC 무선랜 카드 활성화 및 체크 1 단계 : 시작 -> 설정 -> 네트워크 설정 2 단계 : 무선 네트워크 설정 선택 -> 마우스 버튼 오른쪽 클릭 -> 사용.
MobileWeb 시작하기. 디바이스 별 해상도 갤럭시 S : 480*800 ( 옴티머스, 갤럭시, 베가 ) 안드로이드폰 / 아이폰 3G : 320*480 아이폰 4 : 640 *960 아이패드 : 1024*768 갤럭시탭 : 1024*600.
2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
한국예탁결제원 모바일 서비스 안내. 1. KSD 모바일 서비스 구축 배경 스마트폰 보급 및 이용확대 모바일 환경으로 서비스 환경 변화 고객 니즈 수용 및 서비스 향상.
JSON (JavaScript Object Notation) 인공지능 연구실. Artificial Intelligence Laboratory JSON 소개  JSON( 제이슨, JavaScript Object Notation) 은, 인터넷에 서 자료를 주고받을 때 그.
갤럭시S6 마시멜로 업데이트 및 루팅 안내 2016/05/10 SPIRE TECHNOLOGY INC.
해외전자정보서비스이용교육 EBSCO eBook (NetLibrary)
EBSCO eBooks 이용 방법 및 다운로드 (대출모드) 안내
Windows XP SP2 문제해결 Windows XP SP2를 설치한 회원께서는 Pop-up차단 기능과 ActiveX 설치의 어려움 발생 아래의 예는 안철수 바이러스 설치 시 문제점을 해결 하는 방법의 설명. 1. ActiveX 컨트롤 설치 ① 주소 표시줄 아래의 '이.
관광 스마트 북 발행 제안 OSMD( One Source Multi Device ).
Chapter 16 : Struts 프레임워크 2. chapter 16 : Struts 프레임워크 2.
jQuery Mobile을 이해하기 전에 jQuery가 무엇인지 알아야 한다.
CHAPTER 16. 모바일 웹페이지.
Chapter14 위치 정보 & 모바일 HTML5 Programming.
1.1 뷰포트 일반 웹 페이지의 모바일 실행 결과 뷰포트(viewport)
1. 신뢰할 수 있는 싸이트 등록 인터넷 익스플로러 실행 후 실행
부트스트랩(Bootstrap) 트위터사가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷
(개정판) 뇌를 자극하는 Red Hat Fedora 리눅스 서버 & 네트워크
임베디드 시스템 개론 크로스 플랫폼 설치 2일차 강의 자료 Embedded System Lab.
Youn-Hee Han HTML5 - GeoLocation Youn-Hee Han
소개. 소개 Silverlight, WPF, RIA, UX.... ? Silverlight, WPF, RIA, UX.... ? IT환경의 진화.
Visual Basic .NET 처음 사용하기.
전광판 어플 크레파스통 도상미 박아란 이민영.
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
iframe 사용하기 Chapter 3 Part 2
                              데이터베이스 프로그래밍 (소프트웨어 개발 트랙)                               퍼스널 오라클 9i 인스톨.
D / K / I / T / E / C / H / N / O / L / O / G / Y
소프트웨어 분석과 설계 Struts2 & JBOSS 설치하기
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
제 01 장 인터넷 프로그래밍 개요 학기 인터넷비즈니스과 강 환수 교수.
3강_HTML 기본-II 리스트 태그 - ul,li,ol 표를 나타내는 태그 - table 이미지를 출력하는 태그 – img
Wireless Java Programming
(인터페이스 상세 이용 방법 및 다운로드 (대출모드) 안내)
17강_스마트폰 레이아웃-I viewport header 제작 네비 제작 Lecturer Kim Myoung-Ho
자바응용.
반응형 웹 프로젝트
Mobile SHI 사용자 메뉴얼 중공업조선CI그룹 전진형( )
2장. JSP 프로그래밍을 위한 환경구성 제2장.
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
Web & Internet [03] HTML5 다양한 태그
명지대학교 통합모바일앱 E-Book 이용안내
컴퓨터소프트웨어설계및실험 년 1학기 실험계획 -.
CHAP 5. 레이아웃.
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
인문학 동영상 강의 사용자 매뉴얼 (PC & Mobile).
Tiny OS와 NesC Tiny OS Part1. Won Mi Sun – 17 지능제어 연구실.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
웹디자인
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
13차시_스마트 애플리케이션 기획 스마트 미디어의 사용환경과 사용자의 특성.
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
암호학 응용 Applied cryptography
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
Viewing Advanced Web Pages
3장 JSP프로그래밍의 개요 이장에서 배울 내용 : JSP페이지의 기본적인 개요설명과 JSP페이지의 처리과정 그리고 웹 어플리케이션의 구조에 대해서 학습한다.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
웹과 모바일 홈페이지의 이해와 제작 웹기획 & 제작
학부 컴퓨터공학부 교육과정 (학부) 2학년 4학년 3학년 1학년 1학기 2학기 IPP 자격과정 전공트랙
JAVA 프로그래밍 16장 JNLP.
Chapter 11. 문서 인쇄 및 파일 형식.
Presentation transcript:

2011년 봄학기 정보컴퓨터공학부 컴퓨터 소프트웨어 설계 및 실험 Mobile Web page 2011년 봄학기 정보컴퓨터공학부 컴퓨터 소프트웨어 설계 및 실험

목차 모바일 웹 페이지 소개 모바일 웹 페이지 구현 실습 모바일 웹 페이지란? 모바일 페이지의 필요성 모바일 웹 개발 전략 모바일 언어 모바일 콘텐츠 유형 모바일 웹 페이지 구현환경 실습

모바일 웹 페이지 소개

모바일 웹 페이지란? 모바일 환경을 위한 웹 페이지.

모바일 웹 페이지의 필요성 최근 스마트 폰 보급의 급증으로 모바일 환경에서 웹 페이지를 이용 하는 빈도가 늘어남. 최근 스마트 폰 보급의 급증으로 모바일 환경에서 웹 페이지를 이용 하는 빈도가 늘어남. 이에 따라 일반 데스크톱 환경에 맞게 구현된 웹 페이지를 모바일 환 경에서 구현하는데 문제가 발생하게 됨

모바일 웹의 구현 이슈 화면이 작음 일반 네트워크에 비해 느림 수십 가지의 플랫폼이 존재

일반 웹 페이지의 문제점 ->따라서 모바일 환경에 적합한 페이지가 필요하다!! 기존 홈페이지는 해상도가 높은 컴퓨터 모니터에서는 적합 하지만 스마트 폰 화면에서는 글자가 작게 보임. 페이지의 크기를 확대/축소 하는 것이 불편. 플래시 애니메이션과 같은 제약이 있는 경우에 해당 페이 지를 볼 수 없음. 클릭하기 어려움 ->따라서 모바일 환경에 적합한 페이지가 필요하다!!

Worldwide Mobile Browser Shere

모바일 웹 페이지 구현

모바일 웹 개발 시 고려할 사항(1) 페이지를 쉽게 네비게이션 할 수 있게 디자인하라. 가능하면 페이지를 나누어서 보여주어라. 레이아웃의 고정크기를 잡지 않는다. 레이아웃을 잡기 위해서 테이블을 이용하지 마라. 픽셀이 아닌 상대적인 값을 이용 하라.(em, ex, bolder, larger or thick) 한쪽 방향으로만 스크롤이 될 수 있게 하라.

모바일 웹 개발 시 고려할 사항(2) 이미지는 JPG와 GIF포맷만 사용하라. 기본 폰트만 사용하라. 한 페이지의 크기는20KB를 넘지 않게 하라. 이미지의 개수를 최소화해라. 프레임을 사용하지 말아라.

모바일 웹 개발 시 고려할 사항(3) CSS3은 사용하지 마라. HTTP1.1뿐만 아니라 HTTP1.0도 지원하고 있는지 테스트 하라. 링크의 Target을 지원하지 않는 단말기가 많기 때문에 정의하지 말아라. 브라우저 상단에 보이는 Title을 지원 안하는 경우가 많다는 것을 인지 하라. 이미지 맵을 사용하지 말아라. 팝업을 사용하지 말아라.

모바일 웹 개발 시 고려할 사항(4) 기본256 컬러만 사용 하라. 브라우저에 내장된 객체나 스크립트를 사용하지 않는다. onmouseover, onkeydown와 같은 트리거스크립트를 사용하지 않 는다. 가능하면 쿠키를 이용하지 말아라. 전체페이지 사이즈가 장치 최대메모리에 영향을 줄 수 있다는 것 을 인지하라.

모바일 마크 업 언어(1) XHTML XHTML-MP(XHTML 모바일 프로파일 ) XML의 엄격한 문법 규칙 준수와 HTML의 태그 집합을 결합한 언어. 모바일 브라우저는 HTML의 느슨한 규칙보다 XML 형식의 마크업을 더 쉽게 가공 할 수 있음. XHTML은 HTML을 지원하는 모바일 브라우저를 위해 최적화된 마크업. XHTML-MP(XHTML 모바일 프로파일 ) 모바일 웹을 위한 표준 마크업. 대부분의 XHTML-MP모바일 브라우저는 무선 CSS, CSS MP, CSS2 지원.

모바일 마크 업 언어(2) WML(Wireless Markup Language) 무선 마크업 언어. 저전력 모바일 디바이스를 위해 만들어졌음. 간단하지만 오래된 언어.

Viewport 설정 각 장치의 해상도가 다르기 때문에 모바일 페이지로 보면 각각 다른 크기의 화면이 보여지게 됨. 이때 이를 해결하기 위해 HEAD에 meta 태그 중에 viewport를 설정함. Ex) 아이폰 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> Ex) 갤럭시s <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target- densitydpi=high-dpi”/>

실행 페이지 비교 일반 모바일

모바일 웹 프레임워크 프레임워크(Framework) 모바일 웹 프레임워크 유명한 모바일 웹 프레임워크 소프트웨어의 구체적인 부분에 해당하는 설계와 구현 을 재사용이 가능하게끔 일련의 협업화된 형태로 클 래스들을 제공하는 것 모바일 웹 프레임워크 모바일 환경에 최적화된 다양한 클래스들을 제공하여 모바일 웹 구현을 간편하고 효율적으로 만들 수 있게 해주는 프레임워크 유명한 모바일 웹 프레임워크 iUI (http://code.google.com/p/iui) jQTouch (http://jqtouch.com/) iWebkit (http://iwebkit.net/) jQuery Mobile (http://jquerymobile.com/) jQtouch 적용 사례 – 신세계몰(http://shinsegae.com/mobile)

실습

jQTouch 사용하기(1) jQTouch 참고 웹 사이트 jQuery 기반의 모바일 웹 프레임워크 다운로드 http://jqtouch.googlecode.com/files/jqtouch-1.0-beta-2-r109.zip 참고 웹 사이트 jQTouch 시작하기(http://blog.naver.com/dpshop/140121493736) 간단한 jQTouch 강좌 (http://www.junapps.com/bbs/board.php?bo_table=iphone_web) Boost your next mobile web app with jQTouch (http://www.ibm.com/developerworks/kr/library/wa-jqtouch/index.html) 제공하는 데모(jqtouch-1.0-beta-2-r109.zip/demos/main/index.html)

jQTouch 사용하기(2) 사용법 1) 다운받은 zip파일을 jQTouch를 사용할 웹 페이지 파일(‘.php’, ‘.html’ 등)이 있는 폴더에 압축해제 한다. 2) 웹 페이지 코드의 <head>부분에 아래의 코드를 추가한다. <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'themes/jqt/img/back_button.png', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png', 'themes/jqt/img/grayButton.png', 'themes/jqt/img/whiteButton.png', 'themes/jqt/img/loading.gif' ] }); </script>

실습 내용 목표 jQTouch를 활용하여 4주차 실험에서 만들었던 OpenAPI 페이지를 모바일 웹 페 이지로 만들어보자. 세부 사항 검색 결과는 제목만 나오도록 하고, 클릭 시 해당 페이지로 이동하도록 구현한다.

실습 내용 결과 화면

jQTouch.html(1)

jQTouch.html(2)

Result.php 결과 목록 출력하는 법 <li class="forward"><a href="링크주소" target="_blank">보여질 문자열</a></li>