1 / 16

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

Homework-2 - 실시간 인기검색어 통합뷰어 만들기 -. 2012. 10 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr. RSS 2.0. RSS (Really Simple Syndication) XML 을 사용하여 뉴스나 블로그 사이트에서 주로 사용하는 컨텐츠 표현 방식 웹 사이트 관리자는 RSS 형식으로 뉴스나 블로그 내용을 관리하고 그 내용을 가져갈 수 있는 URL 을 제공한다 . URL 로서 제공되는 RSS 내용  RSS Feed

quana
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Homework-2- 실시간 인기검색어 통합뷰어 만들기 - 2012. 10 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr

  2. 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

  3. RSS Sample RSS 2.0 기반 Sample 파일 <?xml version="1.0"?> <rss version="2.0"> <channel> <title>Liftoff News</title> <link>http://liftoff.msfc.nasa.gov/</link> <description>Liftoff to Space Exploration.</description> <language>en-us</language> <pubDate>Tue, 10 Jun 2003 04:00:00 GMT</pubDate> <lastBuildDate>Tue, 10 Jun 2003 09:41:01 GMT</lastBuildDate> <docs>http://blogs.law.harvard.edu/tech/rss</docs> <generator>Weblog Editor 2.0</generator> <managingEditor>editor@example.com</managingEditor> <webMaster>webmaster@example.com</webMaster> <item> <title>Star City</title> <link>http://liftoff.msfc.nasa.gov/news/2003/news-starcity.asp</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 &lt;a href="http://howe.iki.rssi.ru/GCTC/gctc_e.htm"&gt;Star City&lt;/a&gt;.</description> <pubDate>Tue, 03 Jun 2003 09:39:21 GMT</pubDate> <guid>http://liftoff.msfc.nasa.gov/2003/06/03.html#item573</guid> </item> … </channel> </rss>

  4. NAVER Open API • NAVER 제공의 Open API 공식 사이트 • http://dev.naver.com • Openapi 소개 사이트 • http://dev.naver.com/openapi • 제일먼저 해야 할 일 • 키 등록 • 키 등록 관련 FAQ • http://dev.naver.com/openapi/faq • NAVER가 제공하는 RSS feed • 검색 API  뉴스 • http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query=kut 4

  5. RSS Sample of NAVER <?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"> <channel> <title>Naver Open API - news ::'kut'</title> <link>http://search.naver.com</link> <description>Naver Search Result</description> <lastBuildDate>Tue, 09 Oct 2012 15:58:28 +0900</lastBuildDate> <total>271</total> <start>1</start> <display>10</display> <item> <title>한영애 밴드·윈디시티 굿판에 빠지다</title> <originallink>http://www.segye.com/Articles/NEWS/CULTURE/Article.asp?aid=20120912022885&amp;amp;subctg1=&amp;amp;subctg2=&amp;OutUrl=naver</originallink> <link>http://openapi.naver.com/l?AAACWLwQqDMBBEvyYeJdlYXQ85FMRTb/2CkGxQJFFjbPHvu21hYN7MMPtJ+TLLWapybWQSvY9qoctgAEK01NjWBcC+IWmx7yiAcgpVV02ZgplK2YS+CxhZ32+d7Ity7dbIRbRzYstkfZ2mJPQYV09CD4/nIKCNs2c+yDEfs1cclNQc1t8gAZjtn6WERmN3gw/+FUVTsAAAAA==</link> <description>... 한영애 밴드ㆍ윈디시티ㆍ크라잉넛ㆍ수리수리마하수리ㆍ니나노 난다 등은 15, 16일 남한산성 일대에서 열리는 ‘굿 음악제’(&lt;b&gt;Kut&lt;/b&gt; Music Festival)에 참여한다. 굿음악이란 굿을 할 때 사용하는 음악으로, 장르에 관계없이 굿판에서 들려주는 음악을 일컫는다. 황해도 굿음악에서 영감을 받은... </description> <pubDate>Wed, 12 Sep 2012 17:48:00 +0900</pubDate> </item> <item> <title>굿음악제, 남한산성에서 무박 2일로 펼쳐지는 놀이판 굿판~</title> <originallink>http://www.ilyoseoul.co.kr/news/articleView.html?idxno=68563</originallink> <link>http://openapi.naver.com/l?AAABWMQQrDIBAAX6NHqZomm4OHQskTehe7omhjYhTr72thYGAOc1bMXYVaaOkHqh3bRQN2BVYggMZJz8YKWCe8aVgXtIIbDnyhLqNVrpSDyAcR26C1xnzs6cJUIzOJhTzq/zikc/Em4stjY658IpGbf3/3RORzhvssfzfgAgiIAAAA</link> <description>... 행사명 : 굿음악제(&lt;b&gt;Kut&lt;/b&gt; Music Festa) 일시 : 2012년 9월 15일 13:00 ~ 16일(일) 05:00 장소 : 남한산성일대 프로그램 : 풍물굿 난장, 소리굿 난장, 학술굿판 관람료 : 무료 주최 : 경기도, 경기문화재단 주관 : 굿연구소 소리굿 난장 출연진 : 한영애 밴드, 윈디시티, 크라잉넛, 수리수리 마하수리... </description> <pubDate>Mon, 10 Sep 2012 12:35:00 +0900</pubDate> </item> <item> … </item> </channel> </rss> 5

  6. RSS Analysis by using Ajax & DOM processing http://link.koreatech.ac.kr/courses/webservice/ajaxtest3.html 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

  7. RSS Analysis by using Ajax & DOM processing Ajax 로 RSS 분석 및 출력하기 (2/3) html = "<table border='1'><tr><td>Title</td><td>LINK</td></tr>"; for (vari=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 += "&nbsp;"; } html +="</td></tr>"; } html += "</table>"; document.getElementById("item").innerHTML=html; } } varqueryString = "한기대"; xmlhttp.open("GET", "proxy.php?proxy_url=" + encodeURIComponent("http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query="+ queryString), true); xmlhttp.send(); } </script> </head> 7

  8. RSS Analysis by using Ajax & DOM processing 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

  9. 4개의 NAVER OpenAPI 서비스 • 실시간 검색어 서비스 • http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&query=nexearch&target=rank • 뉴스 서비스 (RSS) • http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query=kut • 이미지 서비스 • http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=image&start=1&display=10&query=kut • 블로그 서비스 • http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=blog&display=10&start=1&sort=sim&query=kut 9

  10. Daum Open API • Daum 제공의 Open API 공식 사이트 • http://dna.daum.net/apis/view_all • 검색 API • 블로그 검색, 카페 검색, 게시판 검색, 동영상 검색, 웹 검색, 이미지 검색, 지식 검색

  11. Daum Open API • Daum 은 XML 뿐만 아니라 JSON으로도 결과를 받을 수 있음 • http://apis.daum.net/search/board?q=daum&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json

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

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

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

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

  16. 서버및 계정 설정 내용 • FTP & SSH • 서버 주소: 220.68.82.29 • FTP로 접속 확인후 SSH 클라이언트 다운 받아 반드시 비밀번호 변경 • passwd student1 • 계정 설정 현황 LINK@KOREATECH

More Related