브라우저 접속시 버전 업데이트 알림메세지

웹 작업 진행하다보면 누구나 공감할 수 있는 문제중의 하나 입니다.

 

원도우9가 나오는 시점에 아직도 XP/익스8을  사용하고 계신 분들 및 익스8을 업데이트 하지 않으시려는

클라이언트로 인한 기술적인 문제에 많이 부딪히고 있습니다.

마이크로소프트에서 윈도우 XP 서비스 내년 4월 8일 지원 종료 상위 OS로의 전환 권장한다 는

공고가 있다고 말씀드린들 소귀에 경 읽어주시는 상황 되는경우 있습니다. (어쩌다 그런 클라이언트를 만나셨는지...)

 

윈도우XP 사용자는 2014년 4월 8일을 기점으로 어떤 기술 지원도 받을 수 없게 됩니다. 마이크로소프트가 XP 지원을 종료한다고 해도 소비자들이 사용하는 것까지 종료되는 건 아닙니다. 다만 지원 종료 이후에도 윈도우XP를 계속 사용할 경우, 각종 바이러스나 스파이웨어, 악성코드, 제로데이 공격, 해킹 등 보안 위협에 노출될 가능성이 높아질 수 있는거죠

 

 

 

 

 

 

업데이트해야 한다고 말해야 하는 이유

 

개발 시간과 비용 감소
오래 된 웹 브라우저에서도 동작하도록 최적화하려면 시간이 오래 걸리고 비용도 비싸집니다.
웹 디자인 기법과 기술
최신 웹 브라우저는 옛날보다 더 많은 웹 디자인 기술이나 웹 표준을 지원하지만...

한 번도 사용해 보지 못했을 수도  있습니다.

새로운 브라우저는 더 많은 기능이나 신기술(CSS3, SVG, HTML5, RSS, CSS로 내용 생성, 유연한 레이아웃)을

지원합니다. 웹 사이트에 적용하면 더 좋은 모습을 더 쉽게 만들 수 있습니다.
보안과 새로운 기능
보안, 속도, 기능 등 여러 이점이 있습니다. 업데이트 페이지를 참고하십시오.

오래된 브라우저의 보안 취약점에 대한 분석은 이 논문에 실려 있습니다.
웹은 진화해야 합니다...
단 혼자서는 진화하지 못하고, 브라우저도 같이 진화해야 합니다.

8년 전에 개발된 웹 브라우저(인터넷 익스플로러 6)가 아직까지도 사용되고 있다는 사실은

웹의 역사에서 드문 경우입니다.

지금 시작하지 않으면, 2011년에도 2001년처럼 웹 사이트를 디자인해야 합니다.

사용자는 업데이트를 싫어하지 않습니다...

 

업데이트를 하면 보안, 속도 호환성 부분에 좀 더 나은 웹 부라우저를 사용하실 수 있습니다. 업데이트 해야겠죠 ? ^^

 

언제부턴가 여기저기 웹 사이트 제작시 버전 업그레이드 알림메세지를 띄우는 사이트가 많아졌습니다.

오래된 브라우저로 웹 사이트를 방문하면 사이트 맨 위에

'현재 브라우저는 오래되었으며 업데이트를 추천'하는 조그마한 알림 표시줄이 나타나게 하는 소스 입니다.

 

웹 사이트에 추가할 코드입니다. 웹 페이지에 아래 코드를 추가하십시오.

--------------------------------------------------------------------------------------------------------

다음 브라우저로 접속하면 알림 표시:

IE <= 6 <= 7 <= 8 <= 9 <= 10 Firefox <= 3.6 <= 4 <= 5 <= 10 <= 15 <= 20 <= 25 Opera <= 10.6 <= 11 <= 12 <= 15 Safari <= 4 <= 5 <= 5.1 <= 6 Chrome: auto구글 Chrome은 자동으로 업데이트됩니다.

추천하는 브라우저 목록으로 자동으로 갱신하기: 제작사에서 브라우저를 지원하지 않거나 보안 취약점이 있는 경우 자동으로 목록에 추가됩니다.

추가할 코드

<SPAN style="BACKGROUND-COLOR: #f6f6f6"><script type="text/javascript"> var $buoop = {}; $buoop.ol = window.onload; window.onload=function(){ try {if ($buoop.ol) $buoop.ol();}catch (e) {} var e = document.createElement("script"); e.setAttribute("type", "text/javascript"); e.setAttribute("src", "//browser-update.org/update.js"); document.body.appendChild(e); } </script> </SPAN>

 

플러그인을 사용할 수도 있습니다: WordPress, TYPO3, TYPOlight (german), vBulletin, concrete5, MODx, Drupal, Habari, Magento, WCF 2, CMS made simple, XenForo.

 

--------------------------------------------------------------------------------------------------------

옵션

스크립트의 옵션은 다음과 같습니다:

var $buoop = {
    vs: {i:6,f:2,o:9.63,s:2,c:10},  // 알릴 브라우저 버전
    reminder: 24,                   // 메시지를 다시 표시할 시간
                                    // 0 = 항상 표시
    onshow: function(infos){},      // 알림 표시줄이 나타난 다음 호출할 콜백 함수
    onclick: function(infos){},      // callback function if bar was clicked

    l: false,                       // 메시지 언어. 예: "ko"
                                    // 기본 언어 감지를 무시함
    test: false,                    // true = 항상 표시줄 보이기 (테스트용)
    text: "",                       // 사용자 정의 알림 HTML 텍스트
    text_xx: "",                    // custom notification text for language "xx"
                                    // e.g. text_de for german and text_it for italian
    newwindow: true                 // 새 창이나 탭으로 링크 열기
};

CSS 편집하기

스크립트를 실행하면 다음 CSS 규칙이 적용됩니다. CSS 규칙은 수정할 수 있습니다. CSS 규칙에 새로운 항목을 추가하시면 됩니다. 예: body.buorg {font-size:20px}

.buorg {
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    border-bottom:1px solid #A29330;
    background:#FDF2AB no-repeat 1em 0.55em url(http://browser-update.org/img/dialog-warning.gif);\
    text-align:left;
    cursor:pointer;
    font-family: Arial,Helvetica,sans-serif; color:#000;
    font-size: 12px;
}
.buorg div {
    padding:5px 36px 5px 40px;
}
.buorg a {
    color:#E25600;
}
#buorgclose {
    position: absolute;
    right: .5em;
    top:.2em;
    height: 20px;
    width: 12px;
    font-weight: bold;
    font-size:14px;
    padding:0;
}