웹코딩App,Plugin 검색 결과

해당 글 22건

새로운 수익창출 모델 - Adobe Affiliate Program (어도브 제휴 프로그램)

사이트 및 블로그 운영의 수익창출모델에 도움이 될만한 프로그램이 있어 소개합니다. 기존의 구글 애드센스와 유사하며 아래에서 배너 신청 및 등록방법에 대하여 알아봅니다. Adobe 제휴 프로그램 소개 Adobe Affiliate Program은 어도브사와 제휴를 맺고, 웹 사이트에 배너를 등록하여 수수료 이익을 창출하는 프로그램이다. 또한, 어도브사는 익히 알다시피 포토샵, 일러스트등의 유명 그래픽 프로그램 제작사로 관련제품을 월간 혹은 연간 구독을 통해 저렴한 가격으로 사용할 수 있게 제공하고 있고, 여러가지 할인혜택을 함께 제공하고 있다. HOME Adobe 제휴 프로그램 DOC Getting_Started_Guide_The_Adobe_Affiliate_Private_Network_Nov16_KOR_V..
웹코딩/App,Plugin 8년 전

사운드클라우드 썸네일 추출

사운드클라우드의 오픈 API를 활용하여 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 사운드클라우드 API Key 발급 사운드클라우드 썸네일을 추출하기 위해서는 API Key 발급이 필요하다. 사운드클라우드 API에 접속하여 사용할 애플리케이션에 맞는 키 발급을 받으면 된다. 이 글에서는 자바스크립트를 이용하니 Client-side JavaScript Applications 을 선택하도록 한다. 물론 사전에 사운드클라우드에 가입해두도록 하자. 그 동안 다른 멀티미디어 서비스들에서는 Key 발급 없이 대체 방안을 강구했지만 사운드클라우드에서는 방법을 찾지 못했다. Try out the Client-side a..
웹코딩/App,Plugin 9년 전

데일리모션 동영상 썸네일 추출

데일리모션 동영상의 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 데일리모션 동영상 VID 추출 아래와 같이 어딘가에 데일리모션 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 데일리모션 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 데일리모션 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/dailymotion.com\/embed\/video\/([a-zA-Z0-9_]+)/i..
웹코딩/App,Plugin 9년 전

다음 tv팟 동영상 썸네일 추출

다음 tv팟 동영상의 썸네일을 추출하는 방법을 살펴보며 유념해야 할 부분을 짚고 넘어갑니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 다음 tv팟 동영상 VID 추출 아래와 같이 어딘가에 다음 tv팟 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 다음 tv팟 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 다음 tv팟 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/videofarm.daum.net\/controll..
웹코딩/App,Plugin 9년 전

비메오 동영상 썸네일 추출

비메오 동영상의 공유소스를 기반으로 썸네일을 추출하는 방법에 대하여 살펴보며 크로스브라우징에 관련된 사항을 짚어봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다. 비메오 동영상 VID 추출 아래와 같이 어딘가에 비메오 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다. 비메오 동영상에 접근 삽입된 동영상 소스코드들(iframe) 중에서 비메오 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다. var vurl = $('iframe').attr('src').match(/player.vimeo.com\/video\/..
웹코딩/App,Plugin 9년 전

스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다. DOC Hide header on scroll down, show on scroll up DEMO Hide Header on on scroll down 고정된 헤더(네비게이션) 사용 불편함 인지 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 ..
웹코딩/App,Plugin 9년 전

Headroom.js - 스크롤을 감지하여 반응하는 요소

몇몇 애플리케이션에서 스크롤에 따라 하단의 광고가 등장하거나 상단의 메뉴가 등장하는 등의 사용자 편의를 고려한 디자인을 접해보셨을 겁니다. 관련하여 많은 스니핏(코드조각)이 존재하는데 그 중에서 한가지를 소개합니다. Headroom.js 소개 헤드룸(Headroom)은 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 가벼운 고성능의 자바스크립트 위젯이다. 이는 상단의 네비게이션에 자주 애용되고 있으며, 기존의 고정(Fixed)된 네비게이션이 차지하는 화면의 비율을 없애고 사용자의 반응에 따라 등장함으로써 좀 더 유연하게 화면의 가시영역을 확보한다. HOME Headroom.js REPO WickyNilliams/headroom.js DEMO 데모페이지 브라우저 지원 헤드룸은 아래의 브라우저 AP..
웹코딩/App,Plugin 9년 전

유튜브 동영상 썸네일 추출

유투브는 YouTube Data API를 통해 유투브 동영상에 대한 각종 정보와 쎔네일을 제공하고 있습니다. 문서에 삽입된 동영상의 썸네일이 필요한 경우가 있어 이 내용을 정리합니다. 동영상 ID값으로 썸네일 추출 유투브 동영상을 공유할때 제공되는 코드들은 대표적으로 아래와 같은 두가지 방식이 자주 애용된다. 공유 : https://youtu.be/nVCubhQ454c 소스코드 : 공유의 URL에서 nVCubhQ454c 부분과 소스코드의 의 src 속성값으로 주어진 nVCubhQ454c 가 바로 해당 동영상의 고유 ID값이다. 유투브는 해당 ID값을 기준으로 API를 통해 썸네일을 제공하게 되는데, API를 정식으로 사용하기위해서는 복잡한 절차를 따라야한다. 다만, 앞서 말했듯이 해당 ID값을 기준으로 ..
웹코딩/App,Plugin 10년 전

유튜브 iframe 콘솔 에러 : cast_sender.js

유투브의 동영상을 iframe 형식으로 삽입할때 간혹 콘솔 오류 메세지를 경험하게 됩니다. 이에 대한 개발자의 입장과 대처방안을 살펴봅니다. 콘솔 오류 내용 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED 위의 오류 메세지는 오페라와 크롬 브라우저에서 발생하는 오류임을 확인하였다.(윈도우용 사파리 브라우저가 없어 미확인) 발생 원인 유투브 동영상을 삽입한 문서에서 크롬캐스트(Chromecas)에서 필요한 cast_sender.js 파일을 요청하면서 이 오류가 발생한다. 크롬의 확장기능들과 연관된 어떤 조건을 만족할때 무엇을 삽입한다 등과 같은 매카니즘이 부족한 탓인지 몰라도 관련 개발자들이 마땅한 ..
웹코딩/App,Plugin 10년 전

Gravatar - 사용자의 아바타와 프로필을 불러오기

웹 애플리케이션을 만들때, 굳이 DB에 회원의 아바타나 프로필을 저장할 필요가 없다면(대부분 개인정보를 수집하기를 원할테지만...), 미리 입력되어 있는 해당 인물의 정보를 불러들여 가입시 회원정보를 입력하는 수고를 덜게 할 수 있는 애플리케이션들이 있습니다. 외국 웹 애플리케이션에서는 이를 연동하여 제작되는 것들을 종종 확인할 수 있습니다. Gravatar 소개 그라바타(Gravatar - Globally Recognized Avatar)는 이메일주소를 기반으로 사용자의 프로필과 아바타를 등록해두고 필요에 따라 불러들여 매번 각각의 애플리케이션마다 이를 작성해야 하는 노고를 줄여주는 애플리케이션이다. 매일 80억건 이상의 아바타 이미지가 그라바타에 의해 서비스되고 있으며, WordPress, githu..
웹코딩/App,Plugin 10년 전

RadarURL - 실시간 접속자 방문통계 #2

이전에 살펴본 Who's among.us 와 마찬가지로 사이트나 블로그에 실시간으로 현재 접속자를 파악할 수 있게 도와주는 위젯입니다. RadarURL 소개 레이더 위젯은 무료로 제공되는 실시간 통계 위젯이다. 위젯 홈페이지에 접속해서 실시간 데모 및 간단 사용법을 살펴 볼 수 있다. HOME RadarURL RadarURL 사용 이유 웹사이트에 얼마나 많은 방문자가 접속해있는지 확인 가능하다. 방문자들이 어떤 경로로 접속했는지, 어떤 페이지를 보고 있는지 확인 가능하다. 웹사이트 분석을 향상시키기 위해 고급진 장기간의 통계를 제공한다. 부하량과 트래픽 동향을 이해한다. 그냥 재미로 설치해보는 건 어때? RadarURL 사용법 RadarURL에 접속해서 단계별로 진행하면 된다. 1. 위젯이 표시될 위치 ..
웹코딩/App,Plugin 10년 전

Who's among.us - 실시간 접속자 방문통계

웹사이트나 블로그에 현재 접속자를 표기하고 싶을때가 있습니다. 구글 애널리틱스나 네이버 애널리틱스는 이를 비롯해 더 많은 기능을 보유하고 있지만 간단한 기능과 위젯표기를 원한다면 아래에서 설명하는 위젯을 추천합니다. who's amung.us 소개 웹 사이트 또는 블로그에 대한 무료 실시간 통계를 제공한다. 프로 버전은 유료이고 더 많은 기능을 지원한다. 블로그나 웹사이트 페이지에 위젯 코드를 추가하면 작동하기 시작한다. 위젯은 현재 웹사이트를 탐색하는 사람의 수(현재 접속자)를 표시한다. 또한 크롬이나 파이어폭스를 위한 플러그인을 제공한다. HOME Who's among.us 위젯 기능 위젯을 클릭하면 상세한 실시간 통계 페이지를 보여준다. 방문자가 사이트에 동시에 접속한 수량을 시간 별로 확인할 수 ..
웹코딩/App,Plugin 10년 전

TimelineJS - 시간의 흐름을 네비게이션화

이력, 연혁등 시간의 흐름을 표시하는 페이지가 필요할때 이를 좀 더 역동적으로 표현할 수 있는 도구들 중에 하나인 TimelineJS에 대해 소개합니다. 기존 버전에서 버전 3으로 업데이트 되었습니다. TimelineJS 3 소개 TimelineJS 3는 기존 버전에서 작성자와 개발자들에게 좀 더 유연함을 제공할 수 있도록 전체 재작성 되었다. 많은 부분을 비틀었는데, 유명한 도구이다보니 기존 사용자들을 위해 기존 버전을 지속적으로 제공하고 있다. HOME TimelineJS DEMO 휘트니 휘스턴 연대기 TimelineJS 3 새로운 점 유연한 행(row) 레이아웃 : 더 이상 3/6 행의 제한이 없다. 캡슐화 : 페이지당 하나 이상의 타임라인이 가능하다. 매우 거대한 시간간격을 지원 : 공룡! 빅뱅!..
웹코딩/App,Plugin 10년 전

Highlight.js - 코드 구문 강조

코딩을 주로 다루는 분들은 이를 표기해주는 몇몇 플러그인들이나 라이브러리들을 이미 사용하고 계시거나 온라인 하이라이팅 서비스를 이용하고 계실겁니다. Highlight.js 또한 그런 라이브러리 중에 하나로 설치 경험을 서술합니다. Highlight.js 소개 Highlight.js는 자바스크립트로 쓰여진 코드 구문 강조를 위한 라이브러리이다. 브라우저뿐만 아니라 서버에서도 잘 작동한다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 자동 언어 감지 기능을 가지고 있다. HOME highlight.js REPO isagalaev/highlight.js DOC documentation 130개의 언어와 65가지의 스타일을 제공한다. Live Demo 자동으로 사용된 코드 구문을 찾아 알..
웹코딩/App,Plugin 10년 전