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

Slides:



Advertisements
Similar presentations
[Homework #2] (6 th Edition English Version 기준 )  [ 복습문제 ] 에서 다음 문제의 해답제시 (pp.169~171)  R5, R8, R10, R11, R15, R26, R27  [ 문제 ] 에서 다음 문제의 해답제시 (pp.171~179)
Advertisements

LOGO Open API 를 이용한 SNS 위젯 개발 프로젝트 최종 발표 4 조 채상혁 윤호선 이재규.
KARGER 서울대학교의학도서관 ,
Nov Youn-Hee Han Term Project 안내 Nov Youn-Hee Han
웹 2.0 및 Ajax 개요.
Image & Video processing
Cross Compiler를이용한 커널 컴파일 및 포팅
웹 2.0 개요.
Sep Youn-Hee Han 웹서비스 컴퓨팅 수업을 위한 코딩 환경 준비 Sep Youn-Hee Han
무들(moodle) 온라인 교육지원 시스템 학생 매뉴얼
Chapter05 오디오와 비디오 HTML5 Programming.
AJAX 커머스아이 박준열.
[Homework #3] 오류 찾기 문제 BankAccount 문제 MyMetric 문제
MICE IT 프로젝트 2011년 1학기.
Youn-Hee Han HTML5 - GeoLocation Youn-Hee Han
Communication and Information Systems Lab. 황재철
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
고급 웹 개발 응용 프로젝트 2010년 1학기.
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
DB연동하기 원격db접속.
Cross Compiler를이용한 커널 컴파일 및 포팅
학과 : E-BIZ 경영학과 학번 : 이름 : 홍 지 애
시스템 인터페이스 Lab3 Unix 사용법 실습.
Chapter11 웹 스토리지 & 웹 데이터베이스
Microsoft SharePoint를 사용자 지정하는 방법 온라인 웹 사이트
Term Project 수행 안내 2007 컴퓨터공학실험(Ⅰ).
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
컴퓨터소프트웨어설계및실험 년 1학기 실험계획 -.
Web RSS 서비스 구축 조이름 : A 도상훈 김진범 정도영 공정호.
Chapter13 파일 접근 & 오프라인 접근 HTML5 Programming.
Chapter 31 Uploading Web Pages
Term Projects 다음에 주어진 2개중에서 한 개를 선택하여 문제를 해결하시오. 기한: 중간 보고서: 5/30 (5)
Connection the World Biomedical Science
TERM PROJECT 제안서 안내 2010 컴퓨터공학실험(Ⅰ).
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
인문학 동영상 강의 사용자 매뉴얼 (PC & Mobile).
- RSS Reader 페이지 작성 컴퓨터공학실험( I )
Nessus 4 설치 정보보호응용 조용준.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
- RSS Reader 페이지 작성 컴퓨터공학실험( I )
웹디자인
KARGER 서울대학교의학도서관 ,8054.
PMIS 서버 설정 환경설정 작성자 : 배경환.
컴퓨터공학실험 (I) 년 1학기 실험계획 -.
컴퓨터공학실험 (I) 년 1학기 실험계획 -.
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
March 2013 Youn-Hee Han Homework 1 - IPv6 사용 - March 2013 Youn-Hee Han.
암호학 응용 Applied cryptography
05. General Linear List – Homework
[INA240] Data Structures and Practice
- Open API (3) : Naver Map OpenAPI 컴퓨터공학실험( I )
Homework #5 (1/3) 다음을 수행한 후, 결과 파일들을 출력하여 제출한다.
Homework-1 - HTML5와 CSS를 활용한 개인 홈페이지 제작 -
[INA240] Web Programming Homework #2 [INA240] Web Programming
12 그리드 시스템.
Homework #3 (1/3) 다음을 수행한 후, 결과 파일들을 출력하여 제출한다.
5주 실습강의 학기, 소프트웨어 설계 및 실험(Ⅰ).
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
멀티미디어 활용 -플래시 CS3 류 정 남.
TERM PROJECT 최종 보고 발표 안내 2010 컴퓨터공학실험(Ⅰ).
워드프로세서 스프레드시트 문서 관리 인터넷 활용
TrustNet 전자 협조전 사용설명서 목 차 작성,수정,삭제 결재함 처리현황 발송대장,접수대장
Homework #3 - 페이지 모듈화 및 로그인처리 -
KARGER 서울대학교의학도서관
숙제 작성 및 제출 과정 김진하 2008/03/14.
이 프레젠테이션은 PowerPoint의 새로운 기능에 대해 안내하며, 슬라이드 쇼에서 가장 잘 보입니다
JAVA 프로그래밍 16장 JNLP.
실전 프로젝트: 홈페이지 구축 시트콤 프렌즈 팬 사이트 구축하기.
웹 사이트 분석과 설계 학과 : e-biz 경영학과 2-2 학번 : 이름 : 이재섭.
Presentation transcript:

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 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>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 <a href="http://howe.iki.rssi.ru/GCTC/gctc_e.htm">Star City</a>.</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>

NAVER Open API NAVER 제공의 Open API 공식 사이트 NAVER가 제공하는 RSS feed 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 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>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&subctg1=&subctg2=&OutUrl=naver</originallink> <link>http://openapi.naver.com/l?AAACWLwQqDMBBEvyYeJdlYXQ85FMRTb/2CkGxQJFFjbPHvu21hYN7MMPtJ+TLLWapybWQSvY9qoctgAEK01NjWBcC+IWmx7yiAcgpVV02ZgplK2YS+CxhZ32+d7Ity7dbIRbRzYstkfZ2mJPQYV09CD4/nIKCNs2c+yDEfs1cclNQc1t8gAZjtn6WERmN3gw/+FUVTsAAAAA==</link> <description>... 한영애 밴드ㆍ윈디시티ㆍ크라잉넛ㆍ수리수리마하수리ㆍ니나노 난다 등은 15, 16일 남한산성 일대에서 열리는 ‘굿 음악제’(<b>Kut</b> Music Festival)에 참여한다. 굿음악이란 굿을 할 때 사용하는 음악으로, 장르에 관계없이 굿판에서 들려주는 음악을 일컫는다. 황해도 굿음악에서 영감을 받은... </description> <pubDate>Wed, 12 Sep 2012 17:48:00 +0900</pubDate> </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>... 행사명 : 굿음악제(<b>Kut</b> Music Festa) 일시 : 2012년 9월 15일 13:00 ~ 16일(일) 05:00 장소 : 남한산성일대 프로그램 : 풍물굿 난장, 소리굿 난장, 학술굿판 관람료 : 무료 주최 : 경기도, 경기문화재단 주관 : 굿연구소 소리굿 난장 출연진 : 한영애 밴드, 윈디시티, 크라잉넛, 수리수리 마하수리... </description> <pubDate>Mon, 10 Sep 2012 12:35:00 +0900</pubDate> … </channel> </rss> 5 5

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 6

RSS Analysis by using Ajax & DOM processing 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("http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query="+ queryString), true); xmlhttp.send(); </script> </head> 7 7

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 8

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 9

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

Daum Open API Daum 은 XML 뿐만 아니라 JSON으로도 결과를 받을 수 있음 http://apis.daum.net/search/board?q=daum&apikey=DAUM_SEARCH_DEMO_APIKEY&output=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에 링크를 걸어놓아 평가자가 쉽게 숙제를 확인할 수 있도록 할것 즉, http://link.koreatech.ac.kr/~student1 링크로 들어가면 index.html을 보게 되는데 여기서 눈에 잘 띄도록 2차 숙제 링크를 걸어둘 것

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

서버 및 계정 설정 내용 FTP & SSH 계정 설정 현황 서버 주소: 220.68.82.29 passwd student1 계정 설정 현황 이름 학번 계정 김남훈 2008135014 student1 김대우 2005160014 student2  김원진 2005135019 student3  김정연 2008135030 student4  김태환 2007135040 student5  김호경 2008135037 student6  노재현 2006135033 student7 박예나 2009135049 student8 백승원 2005135059 student9 손현곤 2012136066 student10 송현정 2006135060 student11 신은세 2007135069 student12 양우석 2009160092 student13 양은호 2005135076 student14 여명 2008135070 student15 오동근 2006135071 student16 유지선 2009135078 student17 이정현 2007135092 student18 이지은 2009160142 student19 이학 2008160138 student20 임재진 2007135104 student21 장성 2007135105 student22 정용진 2007135114 student23 한영미 2008135125 student24 한재민 2007135126 student25 황정민 2008135133 student26 김대웅 student27 LINK@KOREATECH