Microsoft PowerPoint - Chapter_04.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - Chapter_04.pptx"

혜란 방
5 years ago
Views:

1 1 Google Chrome OS May, 2016 Dept. of software Dankook University

2 목차 2 개념특징아키텍처애플리케이션구조활용분야전망

3 Chrome OS 개념 3 Chrome OS an operating system designed by Google and based upon the Linux kernel (July 2009) 웹을쾌적하게, 안전하게사용하기위해서설계된새로운 OS Chrome OS 를사용하면마치 TV 를보듯간편하게웹을이용

4 Chrome OS 개념 4 등장배경 최근데스크탑 OS 및애플리케이션의복잡도증대 버전업반복 기능추가반복 편의성저하데스크탑 OS 보안문제 사용자의데이터위험노출

5 Chrome OS 개념 5 등장배경 웹앱 (WebApp) 등장 새로운타입의앱 문서작성, 화상공유등막강한기능제공 설치하지않고간편하게이용가능

6 Chrome OS 특징 6 동작방식 Desktop( 바탕화면 ) 대신구글크롬웹브라우저가화면전체출력부팅후곧바로웹브라우징가능 OS 업데이트완전자동화 바이러스위험에노출되지않음 PC관리불편감소 TV를보듯간편하게웹이용

7 Chrome OS 특징 7 3 개의키워드 어디서든지 동일한작업환경을 어디서든지 사용가능 모두클라우드에서관리됨 애플리케이션 ( 웹앱 ) 사용자계정 ( 구글계정 )` 데이터구글서버자동저장 Google 어플리케이션 데이터

8 Chrome OS 특징 8 3 개의키워드 언제든지 재빨리부팅하고 언제든지 사용가능

9 Chrome OS 특징 9 3 개의키워드 안심하고 누구든지 안심하고 사용가능 Chrome OS Google Chrome 브라우저 악의성웹페이지 다른웹사이트 나갈수없음 다른웹사이트 시스템정보 사용자데이터

10 Chrome OS 특징 10 제약사항 데스크톱애플리케이션설치불가하드웨어구성이고정되어확장성이없음 OS만판매하지않고크롬이탑재된본체와함께판매

11 Chrome OS 구성요소 11 Chrome OS 구성요소

12 Chrome OS 구성요소 12 펌웨어 과거 PC의 BIOS에해당부팅시가장먼저실행되어하드웨어초기화및리눅스커널로드 OS본체나크롬브라우저가파손경우대비재설치용프로그램내장 PC의 BIOS와달리특정목적을위해서만커스터마이즈됨 OS 본체 Chrome OS는리눅스를기반으로한심플한시스템커널은성능개선을위한소수의패치를제외하고표준사용

13 Chrome OS 구성요소 13 Chrome 브라우저 Chrome OS로유일하게동작하는데스크톱애플리케이션웹브라우저이면서동시에사용자와 OS간의중개역할브라우저기능은타OS에서사용되는 Chrome브라우저와거의동일 Chrome브라우저확장기능동작 Chrome OS는가장아래층인시스템부터최적화 타OS의 Chrome 브라우저보다고속으로동작윈도우의위치나입력포커스관리를위한심플한윈도우관리자존재 Chrome OS에필요한기능만구글이새롭게구축

14 Chrome OS 부팅프로세스 14 Chrome OS 부팅프로세스

15 Chrome OS 부팅프로세스 15 부팅고속화를위한구조 세레이어모두에걸친최적화방식구축설계단계부터불필요요소배제로심플한부팅프로세스사용자로그인후처리단순 윈도우매니저와크롬브라우저다수의상주프로그램시작프로세스실행필요없음구글계정으로 OS에로그인시쿠키 ( Cookie) 가자동브라우저에계승

16 Chrome OS 애플리케이션구조 16 Chrome 확장 브라우저에설치한애플리케이션 타 OS Chrome 브라우저에서도이용가능 Chrome OS 에서데스크탑애플리케이션대체 사용자허가후설치가능 크로스도메인통신, 백그라운드동작등웹애플리케이션금지기능사용가능크롬확장을통해웹애플리케이션의제한극복 Chrome 패널 브라우저윈도우위에팝업형태로표시 기능자체는일반웹애플리케이션과동일 탭이나윈도우전환시에도작동 채팅, 음악플레이어

17 Chrome OS 애플리케이션구조 17 Chrome 확장개발 Chrome 확장은웹표준 (Web standards) 기술사용개발 HTML/ CSS/ Java Script Chrome 확장에는자동업데이트기능내장확장공개시자동업데이트를위한설정, 업데이트정보 xml 파일공개최신버전갤러리에등록시사용자의환경에맞춰자동업데이트

18 Chrome OS 활용분야 18 모바일 PC Chrome OS는 Intel CPU뿐아니라휴대전화등에사용되는 ARM 지원예정윈도우기반 PC보다가볍고전력절약 최초로제겅되는 Chrome OS PC 가휴대성을중시한넷북 PC 를처음구입하는사용자 유지보수의자유로움 항상보안상태유지 초보자에게안심하고권유가능 공용 PC 유지보수가필요없어관리비용대폭절감 하드웨어와소프트웨어가분리되는스테이트리스 (Statless) 방식장점

19 Chrome OS 전망 19 웹앱개발촉진 최신 Chrome 브라우저새로운웹표준최우선대응자바스크립트엔진은모든부라우저중최고수준웹애플리케이션개발촉진 모바일전개 안드로이드와공통점 리눅스기반 구글계정을전제로시스템설계 HTML5를지원한최신브라우저로최신웹애플리케이션실행가능웹기업구글 자바앱축소 모든분야에 Chrome OS 전개

20 Chrome OS App 실습 20 Google Chrome 브라우저설치

21 Chrome OS App 실습 21 Chrome 설정변경 chrome://flags 실험실확장프로그램 API

22 Chrome OS App 실습 22 Chrome Dev Editor 설치 다른편한 editor 를사용해도무관

23 Chrome Dev Editor 실행 23

24 Chrome Dev Editor 실행 24

25 Simple Hello World App (1/3) 25 { "manifest_version": 2, "name": "Hello_World", "description": "Print Hello, World! message", "version": "1.0", } "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activetab", "<all_urls>" ]

26 Simple Hello World App (2/3) 26 <!DOCTYPE html> <html> <head> <style> BODY {width : 520px; min-height:250px;} </style> <script src="popup.js"></script> </head> <body> </body> </html>

27 Simple Hello World App (3/3) 27 function sayhello(){ document.body.innertext = "Hello, World!"; } window.onload = sayhello;

28 Chrome OS App 실습 28 chrome:extensions 개발자모드

29 Chrome OS App 실습 29

30 Simple Hello World App 확인 30

31 Converter App 실습 (1/6) 31 { } "app": { "background": { "scripts": [ "background.js" ] } }, "manifest_version": 2, "name": "Converter", "version": "1.0.0"

32 Converter App 실습 (2/6) 32 background.js chrome.app.runtime.onlaunched.addlistener( function () { chrome.app.window.create('index.html'); } );

33 Converter App 실습 (3/6) 33 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>converter</title> <script src="converter.js"></script> </head> <body> <p> <label for="meters">meters:</label> <input type="text" id="meters"> </p><p> <label for="feet">feet:</label> <input type="text" id="feet" readonly> </p><p> <button id="convert">convert</button> </p> </body> </html>

34 Converter App 실습 (4/6) 34 converter.js window.onload = function () { document.queryselector("#convert").addeventlistener("click", function () { var meters = document.queryselector("#meters"); var feet = document.queryselector("#feet"); feet.value = meters.value * ; } ); };

35 Converter App 실습 (5/6) 35

36 Converter App 실습 (6/6) 36

37 37 Development of ChromeOS and WebApp on Linux

38 ChromeOS build 38 Ubuntu(14.04), 64bit arch, dev machine #sudo aptitude install git-core gitk git-gui subversion curl #mkdir ${SOURCE_REPO} #cd ${SOURCE_REPO} #repo init -u #repo sync #export BOARD=amd64-generic #cross_sdk --./build_packages board=${board} #cros_sdk --./build_image --board=${board} #cros_sdk -- cros flash --board=${board} usb:// Target machine #/usr/sbin/chromeos-install and way more See (

39 Chrome OS 실습 39 Google Chrome 브라우저설치 Ubuntu Software Center 를통해설치

40 Chrome OS 실습 40 프로젝트폴더생성 /home/user/ 위치에프로젝트폴더 chrome 폴더생성 $ mdkir chrome 프로젝트폴더이동 $ cd chrome

41 Chrome OS 실습 41 소스코드작성 Manifest.json 파일작성 $ vi manifest.json { "manifest_version": 2, "name": "Hello_World", "description": "Print Hello, World! message", "version": "1.0", } "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activetab", "<all_urls>" ]

42 Chrome OS 실습 42 소스코드작성 popup.html 파일작성 $ vi popup.html <!DOCTYPE html> <html> <head> <style> BODY {width : 520px; min-height:250px;} </style> <script src="popup.js"></script> </head> <body> </body> </html>

43 Chrome OS 실습 43 소스코드작성 popup.js 파일작성 $ vi popup.js function sayhello(){ document.body.innertext = "Hello, World!"; } window.onload = sayhello;

44 Chrome OS 실습 44 Chrome 브라우저등록 Chrome://extensions 이동

45 Chrome OS 실습 45 Chrome 브라우저등록 Developer mode 체크

46 Chrome OS 실습 46 프로젝트폴더불러오기 Load unpacked extension 선택

47 Chrome OS 실습 47 프로젝트폴더불러오기 프로젝트폴더선택

48 Chrome OS 실습 48 프로젝트폴더불러오기 추가된 chrome 확장확인 Enable 체크

49 Chrome OS 실습 49 예제 Chrome 확장실행 우측상단의추가된아이콘클릭정상작동확인

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.