iframe자동 크기 조절

렛츠웹 + 게임/My Tip 2009. 1. 5. 16:47

<html>
<head>
<script language="JavaScript">
<!--
var ifrContentsTimer;
function resizeRetry() { //이미지같이 로딩시간이 걸리는 것들이 로딩된후 다시 한번 리사이즈
        if(document.body.readyState == "complete") {
            clearInterval(ifrContentsTimer);
        }else {
            resizeFrame();
        }
}
function resizeFrame(){  //페이지가 로딩되면 바로 리사이즈..
        var h = parseInt(document.body.scrollHeight)+10;
        if(h<600){h=600;}
       self.resizeTo(document.body.scrollWidth + (document.body.offsetWidth-document.body.clientWidth), h);
}
//-->
</script>
</head>

<body onload="resizeFrame();ifrContentsTimer = setInterval("resizeRetry()",100);" style="margin-top:0;margin-left:0" bgcolor="#FFFFFF">

 

 

 

//iframe 크기 조정
if(document.attachEvent){
 document.attachEvent("onreadystatechange",
  function (){
        var h = parseInt(document.body.scrollHeight)+10;
   if(h<600) h=600;
   self.resizeTo(document.body.scrollWidth + (document.body.offsetWidth-document.body.clientWidth), h);
  }
 );
}

==========================================================================

[다른 도메인간 iframe 세로 자동스크롤 조정]


a.com
- auto.size.html
- testiframe.html
#################################################################
#    auto.size                                                  #
#                                                               #
#     iframe                                                    #
#          ###############                                      #
#          #b.com/cp.html#                                      #
#          ###############                                      #
#                                                               #
#################################################################

b.com 
- cp.html
#################################################################
#    function(){                                                #
#     www.a.com/auto_size.html?height='+height; => 높이값 전달  #
#                                                               #
#     iframe                                                    #
#          ######################                               #
#          #a.com/auto_size.html#                               #
#          ######################                               #
#                                                               #
#################################################################

 

먼저 a라는 홈페이지에 auto_size.html을 만듭니다.
====================== auto_size.html  - a.com =========================
<html>
  <head>
    <title>Resizing Page</title>
    <script type="text/javascript">
      function onLoad() {
        var params = window.location.search.substring( 1 ).split( '&' );
        var height;
        for( var i = 0, l = params.length; i < l; ++i ) {
          var parts = params[i].split( '=' );
          switch( parts[0] ) {
          case 'height':
            height = parseInt( parts[1] );
            break;
          }
        }
        if( typeof( height ) == 'number' ) {
   //alert(height);
          window.top.updateIFrame( height );
        }
      }

    window.onload = onLoad;
    </script>
  </head>
  <body>
    <p>Resizing IFrame...</p>
  </body>
</html>
=======================================================

 

그리고 a라는 홈페이지에서 링크할 문서에는 아래와 같이 삽입합니다.
======================= a.html - a.com ===================
 <script type="text/javascript">
      function updateIFrame( height ) {
   alert(height);
        var iframe = document.getElementById( 'myiframe' );
        iframe.setAttribute( 'height', height );
      }
</script>
<iframe name=myiframe src='http://**.***.com/' width='900' height='1000' scrolling='no' frameborder='0'></iframe>
 
 

이제 b라는 도메인의 b.html에는 아래와 같이 삽입합니다.
================== b.html  - b.com============================
<style>
 inneriframe { position : absolute; top : 0px; left : 0px; visibility: hidden; } 
</style>

<script type="text/javascript">
      function rsize() {
      var iframe = document.getElementById( 'inneriframe' );
        var height_autosize = document.getElementById( 'height_autosize' );
  var height = document.body.scrollHeight;
        iframe.src = 'http://***.*****.com/html/auto_size.html?height='+height;
  }

 </script>

<BODY onload=rsize();>
<div id = height_autosize>
  내용
</div>
 <iframe id="inneriframe" width="600" height="50"></iframe>
</BODY>
--------------------------------------------------------------------------------------

 

동일 도메인

--------------------컨텐츠 사이트에----------------------------
<body onload="resizeFrame(); ifrContentsTimer = setInterval('resizeRetry()',100);">
<script>
    var ifrContentsTimer;
    //이미지같이 로딩시간이 걸리는 것들이 로딩된후 다시 한번 리사이즈
    function resizeRetry()
    {        
        if(document.body.readyState == "complete") {
            clearInterval(ifrContentsTimer);
        }

        else {
            resizeFrame();
        }
    }

    //페이지가 로딩되면 바로 리사이즈..
    function resizeFrame()
    {
        self.resizeTo(
                           //document.body.scrollWidth + (document.body.offsetWidth-document.body.clientWidth),
         document.body.scrollWidth,
                           parseInt(document.body.scrollHeight)+10);
     }

'렛츠웹 + 게임 > My Tip' 카테고리의 다른 글

정규표현식(php)  (0) 2009.01.05
암,복호화 함수  (0) 2009.01.05
엑셀저장처리  (0) 2009.01.05
표준웹코딩 예제  (0) 2007.10.09
표준웹코딩의 장점 Table for layout과 CSS layout의 비교실험  (0) 2007.06.09
posted by 망차니

설정

트랙백

댓글

다음, 오픈 플랫폼에 기반한 지도 API 공개

렛츠웹 + 게임/IT News 2009. 1. 5. 16:45
이용자들이나 외부 서비스 업체들이 직접 다음 지도를 이용하여 자신이 원하는 데로 다양하게 다음 지도를 활용할 수 있는 다음 지도 API(http://dna.daum.net/apis/maps) 서비스를 공개한다고 30일 밝혔다.

API(Application Program Interface; 응용 프로그램 인터페이스)란, 서비스 개발에 필수적인 프로그래밍 기술이 없이도 원하는 서비스를 손쉽게 만들 수 있도록 지원하는 프로그램을 말한다.

이미 다음은 지난 2006년부터 다음의 검색, 블로그, 카페, 도서 API 등의 데이터 플랫폼을 외부에 공개하여 다양하고 재미있는 서비스와 애플리케이션을 개발할 수 있도록 외부 개발자 및 사용자와 공유해왔다. 이를 통해 다음은 오픈과 공유로의 변화하는 인터넷 패러다임을 적극적으로 주도해 온 것.

이번에 공개하는 다음 지도 API는 사용자들이 자신의 웹 사이트나 메일, 카페, 블로그 등에 편리하게 지도를 표시할 수 있도록 오픈 플랫폼에 기반을 두고 있다.

기존 지도를 단순 스크랩하는 기능 이외에도 지도상의 원하는 위치에 선이나, 도형, 글자입력 등 여러 가지 정보를 표시할 수 있으며, 다음 지도 서비스에서 제공하는 기능을 손쉽게 웹사이트에 추가할 수 있다.

다음 지도 API에는 ▲ 국제적 기준에 맞는 위/경도 좌표계 채택 ▲ 좌표계 변환 기능 제공 ▲ 영역 확대 및 축소 ▲ 면적 및 거리 재기 ▲ 선, 사각형, 화살표, 원 그리기 ▲ 글자 입력 등이 가능한 입력 상자 넣기 등 다양한 기능을 제공한다.

특히, 다음 지도 API는 기본좌표체계로 세계측지계(WGS84) 위도/경도 좌표계를 사용하나, 기존의 콩나물 좌표계 및 다른 지도 API와의 연계 혹은 사용하고 싶은 좌표계를 사용할 수 있도록 총 9개의 좌표계를 지원하여 타 포털과의 서비스 차별화를 꾀했다.

또한, 이번 다음 지도의 API 공개로 다음 內 서비스는 물론 다른 사이트와의 연동을 강화하게 되었다.

예를 들어 자신이 운영하는 웹사이트나 블로그, 카페 등에 자신이 다녀온 여행지를 보여주는 지도나, 아파트 시세를 나타내는 부동산 지도 등 자신만의 다양한 지도가 가능한 혼합(Mashup. 매쉬업) 서비스가 가능해 짐으로써 지도의 활용도를 한층 더 높일 수 있게 됐다.

다음 이재혁 CTO(기술최고책임자)는 "다음은 사용자 편의성을 극대화하고, '개방'과 '공유'라는 다음의 서비스 철학을 기반으로 누구나 쉽게 서비스를 활용할 수 있도록 지도 API 서비스를 공개하게 되었다"라며 "이번 무료로 공개되는 다음 지도 API를 활용하면, 누구나 쉽고 편리하게 다음 지도를 활용해 자신의 목적에 맞는 다양한 응용 프로그램과 서비스를 개발할 수 있다"라고 밝혔다.

이어 다음은 연내 안에 대대적인 지도 서비스 개편을 준비 중이며, 이에 따라 지도 API 역시 계속 확대해 나갈 예정이다.

새롭게 준비 중인 다음 지도서비스는 국내 최고 품질의 고해상도 지도를 비롯해 국내 주요 도시를 실사 형태로 제공할 계획이다.

한편, 다음은 지도 API 공개 기념으로 내달 30일까지 다음 지도 API를 이용하여 만든 웹 서비스 중에서 한 달 간 최다 조회를 기록한 사용자 5명을 선정해 WII 게임기 등의 다양한 경품을 제공하는 `다음 지도 API 콘테스트`를 함께 개최할 예정이다. 
posted by 망차니

설정

트랙백

댓글

프로젝트 관리 - SMART 방법론

George T. Doran의 방법론으로

프로젝트의 목표를 정의하고 실천하기 위한 기준은

다음과 같이 SMART의 이니셜로 설명할 수 있다.

 

1) Specific: 목표 정의가 명쾌해야 한다.

  프로젝트 관리가 성공하기 위해서는 무엇보다도 목표가 분명해야 한다. 목표가 분명하다는 것은 프로젝트의 생성에서부터 타당성 검토가 이루어져야 하고, 고객 및 이해 관계자의 요구 사항을 정의하는 것에서부터 출발한다. 프로젝트 관리 방법론에서는 작업 목록을 WBS(work break-down structure)라고 부른다. 프로젝트의 목표는 WBS로 구현되므로, WBS의 원리와 구성 방법론을 체계적으로 이해해야 한다. WBS에는 산출물과 단계가 분명하게 반영되어야 하며, 관리 가능한 범위 내에서 합리적으로 구현해야 한다.


2) Measurable: 측정 가능한 진행 상황 관리 기준을 수립해야 한다.

  피터 드러커도 “측정할 수 없으면, 관리할 수 없다”라고 지적하였듯이, 프로젝트 계획이 구체적인 수치로 정량화되지 않으면, 관리 기준을 분명히 적용할 수 없다. 단순히 측정 가능해서는 부족하며, 측정 값을 시각적인 차트와 그래픽 표시기로 제시하여 직관적이고 정확한 분석을 할 수 있어야 한다.


측정 가능한 프로젝트 계획을 수립하기 위해서 작업은 어떻게 분해해야 하는지, 진행율은 어떻게 측정할 것인지 계획 단계에서부터 고려해야 한다. 작업에 대한 여유 시간은 얼마나 되는지, 가용 자원으로 수행 가능한지 측정할 수 있어야 한다. 계획 대비 실적의 차이는 얼마나 되는지, 상황 보고 시점에서 프로젝트의 범위, 일정, 작업량, 예산은 어떠한지 측정할 수 있어야 한다. 프로젝트의 착수 시점부터 완료 시점까지 모든 업무를 측정 가능하게 계획하고 실행하는 방법을 이해해야 한다.


3) Assignable: 목표 완수를 위한 한 명의 책임자를 지정한다.

프로젝트의 수행도를 높이기 위한 최소한의 기본 지침은 업무의 책임을 분명히 하는 것이다. 자원을 배정하는 기준은 업무 수행 능력 뿐만 아니라 책임성이 함께 있어야 한다. 프로젝트를 수행하는 주체는 결국 프로젝트 팀원이며, 팀원들은 프로젝트의 가장 중요한 자원인 시간과 돈을 쓰는 존재이기 때문이다. 프로젝트의 수행도를 높이고 책임 있는 업무 수행을 위해서는 프로젝트 관리자의 역할론을 이해하고 효율적인 의사 소통 방법을 이해할 필요가 있다. 조지 도란이 제시한 SMART 의 A가 잘못 제시되는 경우가 많다. 예를 들면, acceptable, agreed-on, action-oriented, attainable, achievable, appointable, aligned, accountable 등 다양하게 해석하고 있다. 그러나 분명한 것은 프로젝트 관리에서 자원의 책임성을 강조한 자원 배정 적합성이 매우 중요하다는 것이다.


4) Realistic: 현실적인 제약 조건을 조정할 수 있어야 한다.

프로젝트의 계획은 현실성이 있어야 한다. 현실적인 원칙이란 제한된 시간, 예산 및 자원의 체계적인 운영을 의미한다. 프로젝트의 현실적인 운영을 위해 필요한 고려 사항은 범위, 시간, 예산, 품질, 작업량이 있으며 이들 제약 조건들은 상호 영향 관계에 있다.


5) Time-related: 작업은 분명한 기간을 가져야 한다.

 

프로젝트 관리자에게 가장 중요한 사고는 시간 개념이다. 모든 작업은 기간과 작업량을 가진다. 뿐만 아니라 프로젝트의 모든 관리 기준 구성 요소들은 시간 요소를 갖는다. 정보의 가치는 시간 선상에서 의미를 가지며, 정보 공유 시점이 지난 모든 프로젝트 정보는 가치를 상실하기 때문이다.


posted by 망차니

설정

트랙백

댓글

웹사이트 평가

뻔하다고 생각하지 말고 다시 한번 머리속에 정리해서
다시 한번 나의 창조물을 사랑의 눈으로 보라..
 
익숙하다고 생각하는 곳에 잘 안다고 생각하는 것에
항상 처음처럼의 마음이 필요하다
------------------------------------------------------------
 
웹사이트 평가
 
 
 
1. 객관적 지표 대 3요소
 
1) 견고함(Firmness)

- 시스템 차원의 접금 방법
- 웹사이트가 안정적으로 구축되어 있는가?
 
2) 편리함(Commodity)

- 사용성 측면의 접근 방법
- 웹 사이트으 기능을 편리하게 사용할 수 있는가?
 
3) 즐거움(Delight)

- 디자인 측면의 접근 방법
- 사용자가 미적, 감각적인 디자인으로 정의되어 있는가?
 
 
* 객관적 지표 3대 요소의 기원
 
- 건축학의 개념에서 유추
: 건물이 갖추어야 할 기본적 속성으로 간주
좋은 건축물 = 견고하고 안정적으로 지어져야 하고, 동선 설계나 공간 설계와
               같은 설비나 기능적 측명들이 이용하기 편리하게 구성
               이용하는 사람들에게 즐거움을 줄 수 있도록 디자인이나 경험적
               측면들에 대한 요소가 고려되어야 함
 
실제 세상의 삶의 공간 = 가상 공간의 사이트가 갖추어야 할 기본 속성]
 
 
2. 객관적 지표 세부 평가 요소
 
1) 견고함
- 시스템의 안정성(Robustness)
: 웹사이트 시스템 구축의 기술적 측면에서 안정적으로 구축되었는가 평가

- 운영의 신뢰성(Reliability)
: 웹사이트 운영의 측면에서 사용자가 웹 사이트를 신뢰할 수 있는가를 평가한다.

- 기술의 혁신성(Innovation)
: 웹사이트의 기술적 측면에서 독특한 아이디어를 기술로 구현하거나 혁신적인 기술이
안정적으로 반영되어 있는가를 평가
 
2) 편리함
- 내용성(Content)
: 웹사이트가 제공하는 정보와 콘텐츠의 내재적 품질(Intrinsic Quality), 정황적 품질(Contextual Quality), 표현적 품질(Representational Quality)를 평가
> 내재적 품질 : 컨텐츠의 정확성, 객관성, 독특성을 평가
> 정황적 품질 : 컨텐츠의 관련성, 적시성, 적합성을 평가
> 표현적 품질 : 컨텐츠의 해석성, 이해성, 일관성, 디자인적인 표현성

- 기능성(Structure/Navigation)
: 웹사이트의 기능을 사용자가 쉽고 편하게 이용할 수 있는가에 대한 평가 요소
: 정보 전체의 조직 구성과 해당 구조 안에서의 사용자의 이동을 돕는 구조 및 항해 차원과 관련된 항목

- 상호작용성(Communication)
: 사용자 또는 정보 제공자, 시스템 개발자와 사용자 간의 원활한 의사소통이 가능하도록 하는 정보 전달 수단

3) 즐거움
- 심미성(Aesthetics)
: 웹사이트의 시각적 디자인의 측면을 화면 구성 요소들간의 조화로움과 적절성의 측면에서 평가
- 경험성(Experience)
: 웹사이트를 이용하면서 사용자가 경험하게 되는 감각적이고 감성적인 다양한 가치들에 대한 주관적 만족도 평가
 
- 다단계 평가
보편성과 타당성을 획득하기 위해 정성적, 정량적 측면의 평가를 가능
 
3. 단계별 적용 방안
 
1) 사용자의 주관적 만족도 평가
: 사용자의 만족도에 대한 설문 조사를 실시하여 해당 웹사이트를 이용하는 사용자들의 의견과 주관적 만족도 분석
 
-- 고객 프로젝트 질문지 및 사전 단계의 설문조사
- 주관적 고객 지표 작성
 
2) 객관적 실사 평가
: 웹사이트 평가요소를 객관적으로 측정할 수 있는 구체적인 평가 기준 수립 정량적 평가 실시
 
-주관적 고객지표와 함께 객관적 지표를 통합한 구체적인 평가 기준 수립
 
3) 전문가 평가
: 사용자 설문이나 시스템 실사를 통해서 나타날 수 없는 정성적이고 전문가적인 식견이 요구되는 측면에 대한 평가와 각 분야의 특수성과 다양성을 반영
 
*  평가 요소의 중요도

: 표준 컴퓨터 환경에서의 접근의 용이성
: 플러그 인, 뷰어 필요시 다운로드 가능성
: 웹사이트 방문동안의 즐거움
: 문서 내용의 독특성
: 시작이나 홈페이지로의 복귀 가능한 링크 제공
: 웹 사이트의 전반적인 구조의 이해 용이성
: 사이트내 현 위치 파악의 용이성
: 체계적으로 편성된 링크
: 맞춤 정보의 제공
: 사용된 용어의 일관성
: 정돈된 시각적 구성요소
: 문서의 문법, 철자의 정확성
: 이벤트 정보(경품 및 무료 사은 행사)
: 구성의 일관성
: 링크 식별의 명확성
: 사이트 이용에 관한 FAQ 또는 도움말 제공
: 아이콘, 그래픽, 문자의 명료성
: 링크의 적절성
: 낮은 스크롤 바 사용 횟수
: 사이트의 친숙성
; 경쟁사의 제품/서비스와의 비교 정보
: 문서의 최종 갱신일 및 갱신빈도
: 링크와 사용자 입력 부분에 대한 설명 제시
: 웹 문서의 다른 파일 형태로 이용 가능성
: 문서 작성 일자 명시
: 웹문서 접근에 필요한 마우스 클릭 수
: 문서 내용의 출처나 참고 문선 제시
: 기업뉴스 및 공지사항
: 아이콘과 그래픽 사용의 일관성
: 텍스트 온리 기능
: 사이트 내 검색엔진의 제공
: 문서 작성자에 대한 연락정보의 명시
: 관련 정보와 연결된 외부 링크 제공
: 사원 및 원자재 조달 정보
: 해당 사이트의 구축 및 운영의도 명시
: 기업의 일반 현황
: 재무상태 정보
: 이용 대상의 명시
: 작성자나 후원조직의 홈페이지 링크 제공
: 문서 작성자 이름
: 최고 경영자의 메시지

posted by 망차니

설정

트랙백

댓글

위지아 (www.wisia.com) - 집단 지성 기반 소셜 네트워크


김범수 전 NHN 대표가 NHN을 떠나 창업한 아이위랩의 집단 지성 기반 소셜 네트워크 웹서비스 위지아 ...

 

이용자가 직접 작성한 차트에 다른 이용자가 추천, 평가, 답변등을 다는 형태로 이용자의 참여도에 따라 단계가 올라가는 형태의

 

서비스로 블로그/카페에 담기등을 통해 공유할수 도 있다

 

각 차트는 이용자의 참여도에 따라 단계가 올라가는데

 1단계 (답변 중) - 8명 이상의 답변이 올라오면 2단계로

 2단계(투표 중) - 100명 이상의 추천을 받으면 3단계로
 3단계(100인의 추천) - 100인의 추천 아이콘이 표시된다

 

이용자의 레벨은

위지아지수와 위지아포인트 등에 의해 유치원생, 초등학생, 중학생, 고등학생, 대학생, 사회인, 부모, 멘토의 8등급으로 나뉜다

 

초기의 소셜 네트워크 서비스 시장 진입에는 성공한것으로 보이지만 (김범수 대표의 힘으로)

향후 차트 컨텐츠의 정보성과 재미를 제대로 확보해 나갈수 있냐는 것(초기에는 재밌지만 금방 싫증이 남-아직컨텐츠가 많지 않음)과

개인 프로필이 단순히 위지아 차트의 활용도만을 나타내 좀더 개인을 표현하고싶어 하는 이용자들이 만족할수 있을지

(집단속의 개인은 자신을 표현하고 나타내고자 하는 욕구가 ..)

그리고 단순 바이럴 마케팅이 아닌 효율적인 추가 마케팅으로 추가 이용자들의 확보를 해 나갈수 있을지..가 성공의 관건이 아닐까

 

한마디로 하면 재밌지만 너무 단순하여 조금은 지루해지는..

위에 말한대로 집단 지성속에 개인의 감성과 욕구를 충족해주었으면 하는 바램이..

 

어쩄든 재미있는 차트가 좀 있다 방문해 보시길


posted by 망차니

설정

트랙백

댓글