Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -

Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -
Youn-Hee Han

RSS 2.0 RSS (Really Simple Syndication)
XML을 사용하여 뉴스나 블로그 사이트에서 주로 사용하는 컨텐츠 표현 방식 웹 사이트 관리자는 RSS 형식으로 뉴스나 블로그 내용을 관리하고 그 내용을 가져갈 수 있는 URL을 제공한다. URL로서 제공되는 RSS 내용  RSS Feed RSS Reader를 사용하여 RSS Feed를 받아 좀 더 보기 편한 방식으로 이용할 수 있다. RSS is a dialect (방언) of XML. All RSS feeds must conform to the XML 1.0 specification RSS feed 아이콘 2

RSS Sample RSS 2.0 기반 Sample 파일 <?xml version="1.0"?>
<rss version="2.0"> <channel> <title>Liftoff News</title> <link> <description>Liftoff to Space Exploration.</description> <language>en-us</language> <pubDate>Tue, 10 Jun :00:00 GMT</pubDate> <lastBuildDate>Tue, 10 Jun :41:01 GMT</lastBuildDate> <docs> <generator>Weblog Editor 2.0</generator> <item> <title>Star City</title> <link> <description>How do Americans get ready to work with Russians aboard the International Space Station? They take a crash course in culture, language and protocol at Russia's <a href=" City</a>.</description> <pubDate>Tue, 03 Jun :39:21 GMT</pubDate> <guid> </item> … </channel> </rss>

NAVER Open API NAVER 제공의 Open API 공식 사이트 NAVER가 제공하는 RSS feed
Openapi 소개 사이트 제일 먼저 해야 할 일 키 등록 키 등록 관련 FAQ NAVER가 제공하는 RSS feed 검색 API  뉴스 4 4

RSS Sample of NAVER 5 <?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"> <channel> <title>Naver Open API - news ::'kut'</title> <link> <description>Naver Search Result</description> <lastBuildDate>Tue, 09 Oct :58: </lastBuildDate> <total>271</total> <start>1</start> <display>10</display> <item> <title>한영애 밴드·윈디시티 굿판에 빠지다</title> <originallink> <link> <description>... 한영애 밴드ㆍ윈디시티ㆍ크라잉넛ㆍ수리수리마하수리ㆍ니나노 난다 등은 15, 16일 남한산성 일대에서 열리는 ‘굿 음악제’(<b>Kut</b> Music Festival)에 참여한다. 굿음악이란 굿을 할 때 사용하는 음악으로, 장르에 관계없이 굿판에서 들려주는 음악을 일컫는다. 황해도 굿음악에서 영감을 받은... </description> <pubDate>Wed, 12 Sep :48: </pubDate> </item> <title>굿음악제, 남한산성에서 무박 2일로 펼쳐지는 놀이판 굿판~</title> <originallink> <link> <description>... 행사명 : 굿음악제(<b>Kut</b> Music Festa) 일시 : 2012년 9월 15일 13:00 ~ 16일(일) 05:00 장소 : 남한산성일대 프로그램 : 풍물굿 난장, 소리굿 난장, 학술굿판 관람료 : 무료 주최 : 경기도, 경기문화재단 주관 : 굿연구소 소리굿 난장 출연진 : 한영애 밴드, 윈디시티, 크라잉넛, 수리수리 마하수리... </description> <pubDate>Mon, 10 Sep :35: </pubDate> … </channel> </rss> 5 5

RSS Analysis by using Ajax & DOM processing
Ajax 로 RSS 분석 및 출력하기 (1/3) – 철저 분석 필요 <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var xmlDoc = xmlhttp.responseXML; document.getElementById("title").innerHTML= xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; document.getElementById("link").innerHTML= xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue; var html; var itemElement = xmlDoc.getElementsByTagName("item"); 6 6

Ajax 로 RSS 분석 및 출력하기 (2/3) html = "<table border='1'><tr><td>Title</td><td>LINK</td></tr>"; for (var i=0; i < itemElement.length; i++) { html += "<tr><td>"; html += itemElement[i].getElementsByTagName("title")[0].childNodes[0].nodeValue; html +="</td><td>"; if (itemElement[i].getElementsByTagName("originallink")[0].childNodes[0] != undefined) { html += itemElement[i].getElementsByTagName("originallink")[0].childNodes[0].nodeValue; } else { html += " "; } html +="</td></tr>"; html += "</table>"; document.getElementById("item").innerHTML=html; var queryString = "한기대"; xmlhttp.open("GET", "proxy.php?proxy_url=" + encodeURIComponent(" queryString), true); xmlhttp.send(); </script> </head> 7 7

Ajax 로 RSS 분석 및 출력하기 (3/3) <body> <h1>Ajax Example</h1> <div> <b>title:</b> <span id="title"></span><br /> <b>link:</b> <span id="link"></span><br /> </div> <p> <button type="button" onclick="loadXMLDoc()">Change Content</button> </p> <div id="item"></div> </body> </html> 8 8

4개의 NAVER OpenAPI 서비스 실시간 검색어 서비스
뉴스 서비스 (RSS) 이미지 서비스 블로그 서비스 9 9

Daum Open API Daum 제공의 Open API 공식 사이트
검색 API 블로그 검색, 카페 검색, 게시판 검색, 동영상 검색, 웹 검색, 이미지 검색, 지식 검색

Daum Open API Daum 은 XML 뿐만 아니라 JSON으로도 결과를 받을 수 있음

과제 요구사항 목표 Ajax & DOM Processing을 활용하여 네이버와 다음의 4개 웹 서비스를 통합하여 보여주는 “실시간 인기 검색어 통합 뷰어”를 개발 요구사항 NAVER 실시간 인기 검색어 웹서비스를 주어진 주기 (Default: 30초) 마다 갱신해서 분석하여 화면에 리스트 한다. 10개의 실시간 인기 검색어 리스트 중 하나를 클릭하면 네이버와 다음에서 제공하는 검색 API 중 최소한 3개 이상을 사용한 결과를 통합하여 화면에 보여준다. 예를 들어 다음과 같은 정보를 한 화면에 보여준다. NAVER 뉴스 NAVER 블로그 Daum 이미지 제시한 각종 정보들의 좀 더 구체적인 원본 정보를 보기 위하여 원본 링크를 최대한 제공한다. 12 12

화면 디자인 예 선택 사항… 한번 고민해 보세요~~~ 오늘의 날씨 천안: 21C… 2011년 10월 5일 오후 4시 30분
인기 검색어 순위 변리사 안양외고 최강희 … “변리사” 관련 뉴스 리스트 제목: … 내용: … 링크: … “변리사” 관련 블로그 리스트 “변리사” 관련 이미지 리스트 오늘의 날씨 천안: 21C… 13 선택 사항… 한번 고민해 보세요~~~ 13

Homework #2 제출기한 제출방법 2012년 10월 28일 일요일 23:59:59 만들 파일
viewer.html, …, style.css ftp://link.koreatech.ac.kr에 FTP로 자신의 계정에 접근하여 업로드할것 1차 숙제와 다른 폴더에 파일을 구성한다 하지만, 반드시 index.html에 링크를 걸어놓아 평가자가 쉽게 숙제를 확인할 수 있도록 할것 즉, 링크로 들어가면 index.html을 보게 되는데 여기서 눈에 잘 띄도록 2차 숙제 링크를 걸어둘 것

Homework #2 제출방법 el.koreatech.ac.kr 로 제출 2) 보고서 제출
서론, 본론, 결론의 구조를 가진 보고서 표지 서론: Homework의 내용 및 목적 본론: 자신이 만든 홈페이지 코드 설명 및 캡쳐이미지 등 특히, HTML5에 새로 추가된 엘리먼트 활용 내용 및 CSS 적용 내용 설명 필요 결론: 숙제를 한 이후의 느낀점, 하고싶은 말, 또는 불평~~ el.koreatech.ac.kr 로 제출

서버 및 계정 설정 내용 FTP & SSH 계정 설정 현황 서버 주소: 220.68.82.29
passwd student1 계정 설정 현황 이름 학번 계정 김남훈 student1 김대우 student2　 김원진 student3　 김정연 student4　 김태환 student5　 김호경 student6　 노재현 student7 박예나 student8 백승원 student9 손현곤 student10 송현정 student11 신은세 student12 양우석 student13 양은호 student14 여명 student15 오동근 student16 유지선 student17 이정현 student18 이지은 student19 이학 student20 임재진 student21 장성 student22 정용진 student23 한영미 student24 한재민 student25 황정민 student26 김대웅 student27

Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -

Similar presentations

Presentation on theme: "Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -

Similar presentations

Presentation on theme: "Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -"— Presentation transcript:

Similar presentations

About project

지원