PowerPoint Presentation

Similar documents
슬라이드 1

160322_ADOP 상품 소개서_1.0

¸ð¹ÙÀÏÇÖµµÅ¥

Windows Live Hotmail Custom Domains Korea

PowerPoint 프레젠테이션

웹2.0

Web Scraper in 30 Minutes 강철

슬라이드 1

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

슬라이드 1

Microsoft Word - src.doc

SIGIL 완벽입문

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

Web 2.0 and OpenAPI

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

1701_ADOP-소개서_3.3.key

iOS5_1±³

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

미쓰리 파워포인트

<4D F736F F F696E74202D E20C0CEC5CDB3DD20C0C0BFEB20B9D720BCADBAF1BDBA20B1E2BCFA E >

untitled

미디어 및 엔터테인먼트 업계를 위한 Adobe Experience Manager Mobile

Microsoft PowerPoint - kimswld ppt

슬라이드 1

<C1A4BAB8BBEABEF720B9CEB0A3B9E9BCAD2DC3D6C1BE2E687770>

마켓온_제품소개서_ key

슬라이드 1

PowerPoint Presentation

TTA Journal No.157_서체변경.indd

View Licenses and Services (customer)

Windows 8에서 BioStar 1 설치하기

고객 카드

쉽게 풀어쓴 C 프로그래밍

2009방송통신산업동향.hwp

wtu05_ÃÖÁ¾

PowerPoint 프레젠테이션

[White Paper]다시보는 시맨틱 웹 그리고 시맨틱 기술 하는 Tabulator와 Sindice에 기반한 데이터 매쉬업 및 브라우징 서비스인 sig.ma는 꼭 한번 경험해 봐야 할 대상이 다. 또한, SemaPlorer나 DBpedia Mobile 경우는 LOD

PowerPoint Template

0. 들어가기 전

PDF_Compass_32호-v3.pdf

Microsoft Word - G14[1].전종홍.doc

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

서현수

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

H-2 한영수

슬라이드 1

02-출판과-완성

<C1F6B9E6BCBCC6F7B7B32DB3BBC1F62D37BFF92D322E687770>

PowerPoint 프레젠테이션

PowerPoint Presentation

Scopus 한국어이용가이드-3차수정

2

<C6F7C5D0BAB8B0EDBCAD5FC3D6C1BE2E687770>

PowerPoint 프레젠테이션

2 PX-8000과 RM-8000/LM-8000등의 관련 제품은 시스템의 간편한 설치와 쉬운 운영에 대한 고급 기술을 제공합니다. 또한 뛰어난 확장성으로 사용자가 요구하는 시스템을 손쉽게 구현할 수 있습니다. 메인컨트롤러인 PX-8000의 BGM입력소스를 8개의 로컬지

이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

2장 변수와 프로시저 작성하기

PowerPoint 프레젠테이션

i4uNETWORKS_CompanyBrief_ key

사용하기 전에 2

Microsoft PowerPoint - chap01-C언어개요.pptx

52 l /08

<4D F736F F F696E74202D20332DC1F6B9DDC1A4BAB8BDC3BDBAC5DB>

바이럴 마케팅 효과측정

7.1 인터넷의개요 인터넷이란? 웹의발전 인터넷의구성 인터넷의확산 2

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

i4uNETWORKS_CompanyBrief_ key

Module 1

커버콘텐츠

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :

멀티미디어 콘텐츠 접속을 위한 사용자인증 시스템_교열(박세환, ).hwp

PowerPoint Presentation

<B9AEC8ADBBEABEF7BFACB1B8BDC720BCBCB9CCB3AA2DBCD2BCC8B3D7C6AEBFF6C5A9BCADBAF1BDBA20C1F8C8AD20BCBCB9CCB3AA2E687770>

1

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

슬라이드 1

*2008년1월호진짜


<4D F736F F D B1D7B7ECB8DEBDC3C2A1C6AEB7BBB5E5>

Microsoft Word - 문필주.doc

H3250_Wi-Fi_E.book

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

맘톡광고소개서

ADOP-소개서_.key

[Brochure] KOR_TunA

Google Maps Platform

PowerPoint Presentation

<30392E342E32372DC0CCBDB4B8AEC6F7C6AE20C3D6C1BE2E687770>

Microsoft Word - 김완석.doc

Samsung SDS Enterprise Cloud Networking CDN Load Balancer WAN

GUIDEBOOK FOR TEACHERS

<C1A4C3A5B8DEB8F05FC1A C8A35FB0F8B0F8B5A5C0CCC5CD20B0B3B9E6B0FA20B0ADBFF8B5B52E687770>

SBR-100S User Manual

PowerPoint Presentation

01장 웹 개요와 실습 환경 구축

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

Microsoft PowerPoint 웹 연동 기술.pptx

PowerPoint 프레젠테이션

Transcription:

웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 1

10 웹 2.0 서비스의구현기술 10 Technical Implementation of Web 2.0 Services - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 2

차례 10.1 콘텐츠유통을위한 RSS 기술 10.1.1 데이터유통채널의변화와 RSS 의등장 10.1.2 RSS 의발전과정과작동원리 10.1.3 RSS 의장점과활용분야 10.2 콘텐츠출판을위한블로그와팟캐스팅 10.2.1 블로그의개념과작동원리 10.2.2 아이튠즈 (itunes) 와팟캐스팅 (Podcasting) 10.3 시맨틱웹으로발전하는태깅과마이크로포맷 10.3.1 문서에의미를줄수있는소셜태깅 10.3.2 마이크로포맷 10.4 웹인터페이스의진화, RIA 와 Ajax 10.4.1 RIA 의등장배경과발전방향 10.4.2 Ajax 의개념및특징 10.4.3 Ajax 의구현사례 10.5 오픈 API 와매쉬업서비스 10.5.1 오픈 API 와매쉬업서비스의개념 10.5.2 매쉬업서비스의종류 10.5.3 매쉬업사이트구축사례 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 3

데이터유통채널의변화와 RSS 의등장 1 콘텐츠신디케이션 (Contents Syndication) 콘텐츠생산자 (Contents Provider) 가제공하는콘텐츠를다른수요자에게연결해주는콘텐츠배급및유통을위한중개사업 웹신디케이터 (Web Syndicator) 웹콘텐츠를수집하여다른여러웹사이트운영자에게제공 예 ) 영화유통의배급업체, 뉴스유통을위한배급 콘텐츠유통채널에도변화 온라인웹환경에서단순히웹사이트게시로는부족 새로운콘텐츠에대한정보를사용자에게별도로제공해야 이메일이나메시징방식 사용자의메일주소를등록한후정기적으로정보제공 필요한콘텐츠정보만골라내는것도귀찮은작업 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 4

데이터유통채널의변화와 RSS 의등장 2 웹피드 (Web Feed) 개념의등장 콘텐츠의정보를사용자에게전달하기위한웹문서파일형식 RSS가가장널리사용되는형식 제공하고있는콘텐츠의목록및개요등관련정보를포함 콘텐츠구독기 웹피드의주소를등록한후최신정보를제공 등록된피드파일에서부터주기적으로갱신정보를찾아와서보여줌 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 5

데이터유통채널의변화와 RSS 의등장 3 RSS RDF Site Summary 혹은 Really Simple Syndication 웹사이트에서콘텐츠의갱신정보를게시해주는웹피드표준형식 표준 XML 파일형식으로콘텐츠의요약정보와메타데이터를포함 기본개념 1) RSS 버튼을통해 RSS 파일주소를자신의리더에등록 2) RSS 리더는등록된주소의 RSS 피드에새로갱신된정보를요청 3) RSS 리더가등록된피드주소로부터갱신된내용만을취합 4) 갱신된콘텐츠의내용을보려면연결되어있는링크로직접방문 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 6

RSS 의발전과정과작동원리 1 RSS 의발전과정 1990 년중반마이크로소프트의 CDF(Channel Definition Format) 미디어데이터의정보를인터넷채널을통해배포 애플 MCF(Meta Contents Framework): 메타데이터표현 넷스케이프 RDF(Resource Description Framework) 개발 일반적인메타데이터표현언어 시맨틱웹 (Semantic Web) 발전에도기초 RDF 사용예 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 7

RSS 의발전과정과작동원리 2 RSS 피드파일형식 RSS 0.9 (RDF Site Summary 혹은 Rich Site Summary) 1999 년넷스케이프사에서 XML 기반의 RDF 로표현 RSS 1.0 2000 년 RSS-DEV 워킹그룹, RDF 에기반메타데이터표현을명확히 RSS 2.0 (Really Simple Syndication) UserLand 에서 0.9 버전을지속적으로발전시켜, 2002 년 RSS 최종판 Atom 1.0 웹컨소시엄에서는웹피드의표준화를위해 2003 년 Atom 개발 현재 RSS 1.0, RSS 2.0, Atom 1.0 혼재되어사용 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 8

RSS 의발전과정과작동원리 3 RSS 2.0 피드파일의구성 채널 (<channel>) 과아이템 (<item>) 정보로구성 <channel> 사이트에대한헤더정보 <title>,<link>,<description> 그외에 16 가지부가적인요소 <item> 각각의글에대한요약정보 <title>, <description> <link> 등 7 가지부가적인요소 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 9

RSS 의발전과정과작동원리 4 RSS 버튼 RSS 피드를제공한다는사실과피드의주소를표시 콘텐츠의구분에따라여러개의 RSS 피드제공이가능 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 10

RSS 의발전과정과작동원리 5 RSS 리더 RSS 피드를읽어주는프로그램 웹페이지를볼때웹브라우저이용, RSS 피드내용을볼때리더이용 RSS 리더의사용 콘텐츠공급사이트에서제공하는 RSS 피드주소등록후 주기적으로방문하여 RSS 피드를파싱하여그결과를화면에출력 대표적으로 Google Reader, My Yahoo, Bloglines, 한 RSS 등 최근웹브라우저에서도 RSS 피드의리더기능을지원 (a) 한 RSS 를이용하는경우 (b) 웹브라우저를이용하는경우 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 11

RSS 의장점과활용분야 RSS 의장점 선택적인콘텐츠구독이가능 빠르고편리하게콘텐츠정보접근 : 동시에여러채널구독가능 과거의구독기록도보관가능 콘텐츠의재사용성이증가 활용사례 뉴스서비스등주기적으로변경되는정보를제공하는사이트 음악이나멀티미디어콘텐츠를배포하는팟캐스팅 콘텐츠상품거래정보, 날씨나환율정보제공, 이벤트정보제공등 광고삽입을통해기업홍보및마케팅수단으로도활용 일정공유라든지쿠폰발행등의애플리케이션에서도활용 교육콘텐츠분야 : 교재제공, 공지사항, 과제제출등에활용 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 12

블로그의개념과작동원리 1 블로그 (Blog) 개념 1997.11 존바거 (John Barger), web 과 log( 기록 ) 의합성어 블로거 (Blogger) 가알리고싶은생각이나주장을웹페이지에일기처럼적어놓고, 다른사람도볼수있게나열해놓은글들의모음 게시판과는달리한사람이나소수의사람만이글을게시 콘텐츠를남에게알리는과정 : 콘텐츠출판 (Contents Publishing) 인터넷을통해기존미디어에못지않은힘을발휘 : 1 인미디어 블로그의진화 댓글과트랙백기능으로다양한의사소통, RSS 로블로그를구독 모바일블로그혹은마이크로블로그 : 트위터가대표적 멀티미디어자료를포함하도록진화 포토블로그 (Photoblog), mp3 블로그, 비디오블로그 (Videoblog 혹은 Vlog), 팟캐스팅등 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 13

블로그의개념과작동원리 2 블로그의작동과정 1) 엔트리 (Entry) 작성 블로거가자신의글로가장기본단위인엔트리를작성 각엔트리는하나의 HTML 파일, 이주소를고유링크혹은퍼머링크 2) 댓글 (Reply) 달기 글밑에간단하게몇줄로댓글혹은덧글 3) 트랙백 (Trackback) 으로연결하기 원격 (Remote) 댓글 글에대한의견을자신의블로그에작성 트랙백핑 (Ping) 을보내어서로의블로그가링크로연결 4) RSS 피드로구독하기 블로그콘텐츠의효율적배포 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 14

블로그의개념과작동원리 3 트랙백의원리 작동원리 A가자신의블로그글을작성할때트랙백주소를공개 B가댓글을자신의블로그에작성 (A의트랙백 URL을이용 ) 그글에대해댓글을달았다고트랙백핑을보내어 A에게통지 A와 B는서로연결되는링크가생성 트랙백핑의매개변수 title( 제목 ), excerpt( 초록 ), url(url 주소 ), blog_name( 블로그이름 ) 일방적푸시형태로원본이삭제되어도트랙백은남는다는단점 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 15

블로그의개념과작동원리 4 블로그의종류 가입형블로그 포털사이트나블로그전문웹사이트의블로그서비스를이용 서비스업체에서블로그저장공간이나편집도구등모두제공 커뮤니티형성이나콘텐츠배포를공유하여방문자수쉽게증가 사용자가자유롭게꾸미고사용하는데에는제한 전문블로그서비스로는티스토리, 이글루스, 블로거닷컴등 설치형블로그 자신의서버에블로그편집소프트웨어를설치하여운영 블로그레이아웃과다양한기능을사용자가자유롭게구성 웹지식필요, 자신이서버관리, 방문자증가도스스로해결해야 설치형블로그프로그램으로는텍스트큐브, 워드프레스, 텍스타일, 무버블타입등 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 16

아이튠즈와팟캐스팅 1 팟캐스팅 콘텐츠공급자가오디오방송등의프로그램을미디어파일로제작하여웹사이트에포스팅하는방법 RSS 를이용해서정기적 / 자동으로구독함으로써방송전달 Podcasting = 아이팟 (ipod)+ 브로드캐스팅 (Broadcasting) 합성어 아이튠즈 (itunes) : 대표적인팟캐스팅소프트웨어 PC 나모바일기기등모든디지털미디어플레이어에적용가능 국내팟캐스팅의대표적인사례 : 나꼼수 아이튠즈 (itunes) 실행화면 팟캐스팅로고 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 17

아이튠즈와팟캐스팅 2 팟캐스팅의구성요소 에피소드 (Episode): 팟캐스터 (Podcaster) 가제작한파일 팟캐쳐 (Podcatcher)/ 수집기 (Aggregator): 에피소드의웹피드를처리해주는 RSS 리더 팟캐스팅의작동과정 팟캐스터가작성한에피소드를서버에업로드하고 RSS파일갱신 청취자는원하는팟캐스트를구독신청 RSS 주소가등록되어갱신되는파일들을자동으로다운로드 디지털미디어플레이어가컴퓨터와연결될때자동으로동기화 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 18

아이튠즈와팟캐스팅 3 팟캐스팅으로구독 팟캐스트 (Podcast) 파일안에오디오파일의 URL 주소를기술 팟캐스트파일사례 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 19

아이튠즈와팟캐스팅 4 팟캐스팅의특징 언제어디서나소비자가원하는디지털콘텐츠를감상 스트리밍대신다운로드, 휴대용디지털기기를이용 저비용으로도제작이가능하여다양한팟캐스트제공 기업뿐아니라개인및소규모그룹등누구나제작하고배포 보드캐스팅 (Vodcasting) = Video + Podcasting 팟캐스팅의활용분야 음악감상이외에도광고나홍보, 교육및뉴스제공분야 마케팅수단으로적극활용 맞춤형광고제작등개인화서비스가가능 교육목적으로도많이활용 열린강좌 (Open Course) 의팟캐스트를학생들에게제공한사례 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 20

문서에의미를줄수있는소셜태깅 1 (1) 태그와소셜태깅 태그 (Tag) 웹문서 / 자료에연관된정보나키워드정보를 꼬리표 처럼부착 정보의분류, 검색등부가적인기능이가능하게해주는메타데이터 문서내에서단어, 문장, 이미지등어떤구성요소에도부착가능 컴퓨터와사람이같이이해하고협력할수있는시맨틱웹의발전과정 태깅 (Tagging): 태그를다는행위 소셜태깅 (Social Tagging): 일반사용자들도태그를달고공유 예 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 21

문서에의미를줄수있는소셜태깅 2 플리커 (www.flickr.com) 소셜태깅으로가장유명한이미지공유사이트 태그를통한이미지분류와검색을제공한다 이미지에대한간략한설명과함께태그를직접입력 위치정보의태그도인터페이스를통해편리하게부착및검색 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 22

폭소노미 1 소셜태깅 여러사용자가집단지성을통해미리정해지지않은분류체계인폭소노미 (Folksonomy) 나태그구름 (Tag Cloud) 의실현이가능 폭소노미 대중 / 집단지성에의한분류시스템 대중을의미하는 folk 와분류법을의미하는 taxonomy 의합성 택소노미 (Taxonomy) 계층구조의카테고리분류방식 하나의리소스에하나의카테고리만적용 적당한카테고리가존재하지않을때에는정확한분류불가능 폭소노미 기존에정확한분류가없거나새로운분야에속하는자료도분류 하나의자료를다수의카테고리로분류가능 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 23

폭소노미 2 폭소노미의장점 집단지성에의한분류로원하는자료를찾기쉽다 : 경험을바탕 한번본자료를다시찾기쉽다 : 유사한키워드로검색가능 많은양의자료를관리하는데효율적이다 : 계속변화하는자료 태그구름 (Tag Cloud) 태그들의관계를시각적으로표현 태그를 2 차원공간상에연관도나중요도에따라배치하고글자의크기나색상등에변화 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 24

마이크로포맷 1 (1) 마이크로포맷의목적 시맨틱웹에대한연구 문서를구조화하고특정한의미를부여하거나추가적인정보를교환하기에는 HTML 의기능이부족하다는지적 마이크로포맷 (Microformat) HTML 문서내에서간단한의미를표현하여포함시키는방법 주소록, 사회적관계, 일정공유, 위치정보의표현등다양한용도 테크노라티 (Technorati) 사에서처음제안 class 속성으로정보간관계나추가적인의미를표현하여전달하면, 이를약속한대로해석하여활용 rel 속성이나 rev 속성을이용하면더다양한의미표현이가능 장점 : 간단하게의미를표현하여전달할수있다 기존의사용하던다른포맷을형태로변경하여그대로활용가능 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 25

마이크로포맷 2 (2) 마이크로포맷활용사례 : hcard, geo 마이크로포맷사용않는경우 <div> 요소만으로는이름, 소속기관, 연락처등을구분불가능 hcard 마이크로포맷활용 <div> 요소의 class 속성에이름은 fn, 소속은 org, 전화번호는 tel - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 26

마이크로포맷 3 geo 마이크로포맷활용예 위도와경도정보표현 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 27

소셜미디어에서의활용 : XFN 1 XFN(XHTML Friends Network) 하이퍼링크를이용해인간관계를표현하자는것이목적 사람간의개인적관계를하이퍼링크의 rel 속성으로표현 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 28

소셜미디어에서의활용 : XFN 2 블로그서비스에서인간관계를표현 XFN 관계형식은순서에상관이없으며, 블로그모임이나링크페이지에인간관계를덧붙임 인간관계는간단한저작인터페이스를통하여손쉽게작성 편집기화면 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 29

소셜미디어에서의활용 : XFN 3 마이크로포맷의활용 HTML 문서내에서특정부분의의미를추가하여정보를교환 이메일로명함교환 hcard, 일정공유 hcalendar, 이력서정보교환 hresume, 리뷰정보표현 hreview, 위치정보표현 geo, 소셜미디어환경에서관계정보표현 XFN, XOXO, xfolk 등 트위터에서대화표현사례 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 30

RIA 의등장배경과발전방향 1 RIA(Rich Internet Application) 기술 웹브라우저기반인터페이스의단점을개선 웹브라우저애플리케이션은인터넷트래픽으로응답속도가늦고 HTML 언어의제약으로자유로운인터페이스구현곤란 2000.10 미국포레스트리서치에서 X- 인터넷 이란개념발표 2002 년매크로미디어플래시제품백서에 RIA 용어처음등장 이후어도비플래시기반의플렉스 (Flex), 마이크로소프트의실버라이트 (Silverlight), 선마이크로시스템즈의자바 FX 등 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 31

RIA 의등장배경과발전방향 2 Ajax 기술의등장 RIA 기술의단점 표준기술이아니며자신들의고유한플랫폼을기반으로실행 HTML5 에서풍부한사용자인터페이스기능을제공 HTML 언어의한계점에서시작하였지만이전에웹에서불가능했던많은작업들이 HTML5 에서가능 Ajax 와 HTML5 는웹표준을근거 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 32

Ajax 의개념및특징 1 Ajax(Asynchronous Javascript And XML) 웹애플리케이션에서자바스크립트와 XML 을이용하고비동기통신방식에기반하여사용자인터페이스를구현하는기술 2005.2 제임스가렛 (Jesse James Garrett) 발표한에세이에서유래 Ajax: A New Approach to Web Application, Adaptive Path Ajax 는 7 가지기술들의조합 Asynchronous+JavaScript+CSS+DOM+XML+XSLT+XMLHttpRequest 표준언어 XHTML 과 CSS 를이용한표현기술 DOM 을이용한동적인화면구성과상호작용 XML 과 XSLT 를이용한데이터교환및데이터처리 XHR(XMLHttpRequest) 를이용한비동기데이터통신 이해하기쉬운자바스크립트언어를이용하여모든것을통합제어 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 33

Ajax 의개념및특징 2 Ajax 애플리케이션모델 웹서버측데이터처리로직과클라이언트측의사용자인터페이스로직을분리 처리결과에서필요한데이터만 XML 데이터로전송 클라이언트측에 HTML, CSS, 자바스크립트를처리하는 Ajax 엔진필요 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 34

Ajax 의개념및특징 3 Asynchronous 개념의비동기통신 이전의웹애플리케이션 서버에서처리결과를브라우저에돌려보낼때까지대기 예, 기존의검색엔진, 상거래사이트에서예금거래 Ajax 애플리케이션모델 서버에서데이터처리하는동안브라우저는사용자의다음작업처리 대표적인사례 : 구글지도 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 35

Ajax 의구현사례 1 (1) 검색제시어기능 ( 검색어추천기능 ) 낱말을다입력하기전에추천단어목록을입력창아래쪽에표시 Aj 입력 => Aj 로시작하는단어, a 입력 => Aja 로시작하는단어 단어목록만 XML 형태텍스트데이터로전송 : 전송량매우감소 제시어창만갱신함으로써인터페이스의반응속도를증진 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 36

Ajax 의구현사례 1 (2) 지도이미지의비동기처리 구글지도 지도의이미지를전부다운로드받기전에다음작업을실행 이미지가모두도착하지않았을경우 이동시 : 확대하려는부분의지도이미지가없으면회색으로 확대시 : 새로받기전의이미지를이용하여단순히확대 지도이미지를다받으면정상적으로표시 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 37

오픈 API 와매쉬업서비스의개념 1 오픈 API: Open Application Programming Interface 기존의 API 개념을웹사이트에확장한것 웹사이트의일부기능을남들이사용하도록 API 형태로공개한것 공개한 API 를이용하여손쉽게원하는웹서비스기능을구현 이점 검색기능이나지도기능등을자신의사이트에서손쉽게이용 서비스활용도가높아지면서서비스가더욱활성화되어트래픽증가 유지보수가쉬워질뿐아니라기업간제휴나서비스공유가용이 매쉬업 (Mashup) 인터넷에서서로다른서비스를조합하여새로운웹서비스생성 공개된 API를이용하므로개발비용매우적고가볍게프로그래밍 개방과공유를기반으로하는웹2.0 환경의핵심기술 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 38

오픈 API 와매쉬업서비스의개념 2 최초의매쉬업서비스 폴레이드매처 (Paul Rademacher) 의하우징맵 (HousingMaps) 구글의지도 + 크레이그리스트 (Craigslist) 부동산정보를연동 이를계기로구글을비롯한여러웹사이트에서 API 를공개 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 39

매쉬업서비스의종류 매우다양한오픈 API 가제공 구글지도뿐아니라구글검색, 유튜브의비디오, 플리커의이미지제공, 아마존의상품검색및구매기능등 API 를이용하여다양한매쉬업서비스구현 지도, 검색, 이미지나비디오제공, 쇼핑등의분야 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 40

구글 API 다양한오픈 API 를제공 구글지도 API, 구글검색 API, 구글캘린더 API, 유튜브 API 구글애드센스 API, 구글차트 API, 구글주소록 API, 웹로그분석 사례 : 여행안내사이트 iguide.travel 구글애드센스 API, 구글지도 API, bookingwiz.com 검색 API - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 41

소셜미디어 API 소셜미디어사이트에서도다양한매쉬업서비스 페이스북의경우 2007 년오픈 API 공개후, 6 개월만에수만개의애플리케이션이개발됨 데이터를활용한다양한애플리케이션서비스 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 42

국내에서제공하는 API 대형포털사이트를중심으로오픈 API 를제공 네이버 : 지도, 검색, 카페, 미투데이등기능에대한오픈 API 제공 다음 : 지도 API, 콘텐츠데이터제공 API, 인증이필요한 API 등 매년공동으로매쉬업경진대회개최 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 43

매쉬업사이트구축사례 1 간단한예제 : 네이버지도와컨트롤을내사이트에포함 API 키발급 : 네이버의경우 API 이용등록페이지에서지도 API 키발급 (http://dev.naver.com/openapi/register) 지도를화면에출력하고, 줌컨트롤을표시하기위한코드 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 44

매쉬업사이트구축사례 2 1 네이버에서제공하는스크립트와지도 API 키값을헤드에포함 2 지도를출력할컨테이너설정 3 위치객체생성 4 지도객체생성 5 줌컨트롤객체추가 - 웹과인터넷활용및실습 (Web & Internet) - 10 웹 2.0 서비스의구현기술 45