카테고리 없음2014. 6. 17. 11:45
Posted by 다오나무
우분투2014. 6. 17. 11:29

CSS에서는 변수를 사용할 수 없습니다.

그래서 같은 코드를 여러번 입력해야 하는 불편이 있습니다.

이러한 단점을 보완해주는 것이 Less입니다.

변수와 여러 함수를 이용하여 CSS 코드를 만들 수 있습니다.

Less 문법으로 코드를 짠 후 컴파일을 하면 CSS 파일로 변환됩니다.

따라서 컴파일이 가능하도록 프로그램을 설치해야 합니다.

Ubuntu를 사용하고 있다면, 단 한줄의 코드로 관련 프로그램을 설치할 수 있습니다.

apt-get install node-less

설치를 했다면 테스트를 해봐야겠죠. 다음의 내용으로 style.less 파일을 만듭니다.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

다음과 같이 명령합니다.

lessc style.less > style.css

style.less가 있는 폴더에 style.css가 만들어집니다. 내용은 다음과 같습니다.

#header {
  color: #6c94be;
}

CSS 코딩을 할 때 변수를 사용하거나 함수를 이용할 수 있다는 것은 상당히 매력적입니다. 하지만, 공부할 거리가 더 생기는군요.

프로그래머는 계속 새로운 기술이 나와서 평생 지루하지 않은(?) 직업 같습니다.

Posted by 다오나무
카테고리 없음2014. 6. 16. 16:14

다운로드 주소


http://fortawesome.github.io/Font-Awesome/3.2.1/



Posted by 다오나무
2014. 6. 16. 16:00

웹 개발을 할때, 트위터 부트스트랩 (Twitter Bootstrap)을 사용하면 디자인과 CSS에 대한 부담을 좀 덜 수 있다.

특히 나같이 뼛속까지 개발자라서 디자인 감각이 영 꽝인 사람들에겐 가뭄에 단비같은 존재다.

이런걸 오픈소스로 공개해주시다니, 정말 감사할 따름!

예제도 잘 정리되어 있어서 별도의 서적 없이도 쉽게 프로젝트에 적용할 수 있을 정도다.

현재 버전 3까지 나왔으며, 유지보수 프로젝트를 위해서 버전 2의 링크도 포함해 놓았다.

그리고 Bootswatch는 부트스트랩에 여러가지 테마를 적용해 놓은 버전이다. 한가지 색상에 질린다면 Bootswatch에서 나에게 맞는 컬러로 적용해보도록 하자!

 

부트스트랩 3

url: http://bootstrapk.com

 

 

 



Bootswatch: Free themes for Bootstrap

url: http://bootswatch.com

 


'' 카테고리의 다른 글

DISQUS 소셜 댓글 달기  (1) 2014.06.16
그누보드 게시판 테이블 그리고 댓글  (0) 2014.06.16
남은 글자수 체크  (1) 2012.07.23
Trigger an Error - 오류 발생시키기  (0) 2012.05.19
jQuery Mobile 페이지 이동  (1) 2011.11.03
Posted by 다오나무
2014. 6. 16. 15:13



블로그에 소셜 댓글 서비스를 제공하는 ‘DISQUS’를 사용하는 방법에 대해서 알아 보겠습니다.

티스토리에서 제고아는 댓글 서비스는 양방향 서비스가 아닌, 티스토리 회원들만을 위한 일방적인 시스템의 성격이 강했습니다.

비회원도 ‘비밀 글’을 작성 할 수 있도록 하는 방식은 좋지만, 비회원으로 댓글을 달았을때, ‘답댓글’이 달릴 경우 비회원에게는 알림 서비스를 제공하지 않는다는 것이 불편했었습니다.

그리고 내 블로그에서 이루어진 댓글 활동들에 대해서 정확한 통계자료를 보여주지 않는 점 또한 불편했었는데요.

댓글 입력 폼에 방문자가 이미지 파일을 첨부할 수도 있고, 이미지 파일의 URL 주소 혹은 유튜브와 같은 동영상 파일의 URL 주소를 입력하면 해당 URL 주소를 자동으로 인식해서, 이미지 파일과 동영상을 보여 주기도 합니다.


 



디스커스(DISQUS) 란?


해외의 유명한 블로그, 사이트 등에서는 대부분이 이 디스커스 댓글 폼을 사용하고 있습니다. 그리고 디스커스라는 회사 또한 국내회사가 아닌, 외국 회사라서 사이트의 언어는 영문으로 되어 있습니다.

하지만 사이트의 직관적인 인터페이스 덕분에 영어실력이 부족해도 이용하는데에는 전혀 불편함이 없습니다. 

또한 댓글목록에 댓글목록 내용(키워드)과 관련된 광고가 노출이 되서 클릭당 커미션을 지급하는 CPC 광고를 개제할 수 도 있습니다.

정확하지는 않지만, CPC 광고 서비스를 이용하기 위해서는 일정 수 이상의 댓글 커뮤니티가 활성화 되어야 CPC 광고를 개제할 수 있는 항목이 활성화 되는 것 같습니다.





디스커스(DISQUS)에 댓글을 달기 위해서는?


총 5가지의 방식으로 댓글을 입력할 수 있도록 지원을 하고 있습니다.

첫번째, 디스커스에 가입한 계정으로 로그인 해서 댓글을 입력할 수 있습니다.
두번째, 트위터 계정으로 댓글을 입력할 수 있습니다.
세번째, 페이스북 계정으로 댓글을 입력할 수 있습니다.
네번째, 구글 플러스 계정으로 댓글을 입력할 수 있습니다.
다섯번째, 비회원으로 이메일주소 입력만으로 댓글 입력이 가능 합니다.





그리고 댓글을 입력 하면서 이미지 파일을 첨부하고 싶다면, 드래그앤드롭 방식으로 이미지 파일을 추가할 수 있습니다.

방문자가 궁굼한 사항이 있을때, 스크린샷을 찍어서 이미지 파일을 함께 첨부해서 방문자와 블로그 운영자간의 소통을 더 원활하게 해 주기도 합니다.



디스커스(DISQUS) 회원가입 및 로그인


디스커스에 회원가입을 할 때 필요한 사항으로는 사용할 영어 이름(닉네임), 이메일 주소, 비밀번호 이 세가지 사항만 있으면 누구든지 회원가입이 가능 합니다.

굳이 디스커스에 회원가입을 하지 않더라도, 페이스북, 트위터, 구글 플러스 의 계정을 디스커스와 연동해서 해당 SNS 계정으로도 로그인이 가능 합니다.

 



블로그를 운영하고 있는 사람이라면, 누구나 쉽게 회원가입 및 로그인이 가능하기 때문에, 상세한 설명은 생략하고 바로 다음 단계로 넘어 가겠습니다.





디스커스(DISQUS)에 웹 사이트(블로그)를 등록하고 댓글 플러그인 소스 코드 발급 받기!


디스커스에 회원가입을 하고, 로그인을 했다면 사이트를 등록하는 페이지가 가장 먼저 반기게 될 겁니다. 혹은 다른 페이지가 먼저 반기게 된다면, 디스커스 홈페이지의 여러 위치에서 ‘ADD DISQUS TO YOUR SITE’ 를 확인할 수 있기 때문에, 쉽게 해당 페이지로 이동이 가능 합니다.





Site name
➥ 디스커스 댓글을 사용 할 웹 사이트(블로그)의 이름을 입력 해 주세요!

Choose your unique Disqus URL
➥ 나의 디스커스 댓글 커뮤니티를 확인할 수 있는 SNS 개념의 웹 주소 입니다. 사이트 이름을 입력하면 자동으로 사이트 이름으로 입력이 되며, 변경 또한 가능 합니다.

Category
➥ 자신의 웹 사이트(블로그) 카테고리를 설정하는 곳인데, 목록에 없다면 “Auto’ 로 해 주세요!

Finish registration

➥ 사이트 이름 및 카테고리 설정이 끝났다면 해당 항목을 클릭해서, 디스커스 댓글을 설치할 수 있는 ‘Install’ 페이지로 이동을 해 줍니다.

 



위의 페이지에서 자신이 사용하는 블로그 플랫폼이 없다면(?) 첫번째에 있는 ‘Universal Code’ 를 클릭 해 주면 됩니다. 

하지만 바로 install 설치를 하게 된다면, 디스커스 댓글 폼 인증에서 오류가 발생할 수 있습니다. 그래서 install을 하기전에 앞서서 Admin ➜ Settings ➜ General 에서 먼저 설정을 해 주어야 합니다.


그러면 General(일반) 에서 설정할 수 있는 사항들에 대해서 간략하게 살펴 보겠습니다.

Appearance(외관)
➥ 색상, 서체 등을 설정할 수 있습니다. 기본값으로 두세요!

Comment Count Link
➥ 댓글 수 링크 입니다. 기볼값으로 두시면 됩니다!

Default Sort(기본 분류)
➥ 어떠한 댓글들이 가장 먼저 보여주게 할건지를 설정 할 수 있습니다. 최고의 댓글, 오래된 댓글, 최신의 댓글…

Discovery
➥ 디스커스 댓글목록 아래에 내가 활동한 다른 댓글 커뮤니티 링크를 보여줄건지 말건지를 선태할 수 있습니다. 체크하는 것을 권장 합니다.

Site Identity(사이트 정보)
➥ 사이트(블로그) 이름, URL 주소, 카테고리, 설명, 사용 언어를 입력하는 곳 입니다. 이 항목에 있는 사항들을 정확하게 입력해야 install 페이지에서 정상적으로 인증이 완료 됩니다. 그리고 사용 언어에서 ‘korean’으로 해 주어야 디스커스 댓글 폼에 한글로 표시가 됩니다.

Community Rules(디스커스 댓글 커뮤니티 규칙)
➥ Guest Commenting 항목에 체크를 해야 ‘비회원’도 이름과 이메일 주소만으로 댓글을 남길 수 있습니다.
➥ Pre-moderation 에서는 댓글을 승인해야 노출이 되게 할건지, 이메일 주소가 없는 사람의 댓글일때만 검토후에 승인할건지, 승인절차 없이 모든 댓글이 노출되게 할건지를 설정할 수 있습니다.
➥Links in Comments 링크가 있는 댓글일 경우에 승인을 해줘야 노출이 되게 할건지를 설정 할 수 있습니다.
➥Flagged Comments 신고된 댓글에 대해서 어떤 조치를 할건지를 설정 할 수 있습니다.
➥ Automatic Closing 자동으로 특정시간, 특정기간 동안 댓글 입력 폼을 폐쇄 할 수 있습니다.

Social Platform Integration
➥ 트위터 사용자 이름을 지정할 수 있습니다.

그리고 맨 아래에 있는 ’Save Changes’ 를 클릭해서 저장을 해 주세요! 그리고 install 페이지로 다시 이동을 해서 디스커스 댓글 폼을 설치 해 주면 됩니다.

     

그 외에 ‘Moderators’ 와 ‘Filters’ 그리고 ‘Advanced’ 는 추후에 설정을 해도 됩니다.

General
➥ 일반적인 설정을 하는 곳 입니다.

Moderators
➥ 디스커스 댓글을 관리 할 수 있는 다른 운영자를 추가할 수 있습니다.

Filters
➥ 비속어 필터, 스팸 메시지 차단, 사용자 차단 등을 관리할 수 있습니다.

Advanced
➥ 고급설정을 하는 곳이며, 디스커스에서 사용할 나의 아바타를 추가할 수 있으며, 디스커스 댓글과 사이트를 제거 할 수도 있습니다.


이제 기본적인 설정사항은 끝났으므로, install(Universal Code) 페이지로 이동을 해 주세요!

 



디스커스의 소셜 댓글을 설치할 수 있는 ‘html 소스’를 발급받는 페이지로 이동을 하게 됩니다. 상단에 있는 첫번째 소스(코드)는 디스커스 댓글 입력 및 목록의 코드 이므로, 웹 사이트(블로그)에서 삽입하고자 하는 위치에 해당 코드를 복사해서 붙혀넣기 하면 됩니다.





티스토리 블로그에서 글 관련 태그는 s_tag_label 에 위치해 있으므로, 그 아래에 위에서 복사한 디스커스 소스코드를 붙혀넣기 해서 해당 태그가 끝나는 지점 바로 아래에 디스커스 댓글 입력 및 목록 폼이 출력되게 했습니다.





s_tag_label 이 끝나는 항목에 /br 태그를 입력해서 간격을 띄워 줬습니다. 그리고 그 바로 아래에 디스커스 소스코드를 붙혀넣기 해 주고 '!— 디스커스 댓글 시작’ 과 같은 주석을 달아 줬습니다.

또는 본문 아래에 바로 디스커스 댓글 입력 및 목록 폼을 보여주고 싶다면 _article_rep_desc_ 치환자를 찾아서 그 아래에 붙혀넣기 하면 됩니다.


그리고 디스커스의 두번째 소스코드(자바스크립트)는 /body 바로 위에 주석을 달아서 붙혀넣기 해 주세요!




소스코드를 정상적으로 삽입 했다고 해서, 모든 절차가 끝난 것은 아닙니다. 마지막으로 디스커스 설치 페이지 아래에 있는 ‘Verify’ 버튼을 클릭해서 인증을 해 주어야 합니다.





성공적으로 모든 작업이 완료가 되었다면? 위와 같이 ‘Congrats! Disqus appears to be properly installed’ 라는 메시지와 함께 ‘Verify again’으로 바뀌게 됩니다.

이제 블로그로 이동을 해서 정상적으로 작동하는지, 그리고 보여지는지 확인 해 보겠습니다!

 



디스커스는 댓글 입력 폼 으로만 사용할 수 있는 것은 아닙니다. 티스토리 블로그에서는 공지사항과 같은 글에는 댓글 입력을 지원하지 않는데요.

공지사항 글을 작성할 때, 마지막 부분에 디스커스 댓글 플러그인 html 소스 코드를 붙혀넣기 하면, 공지사항과 같은 글에도 댓글 입력 폼을 만들 수 있습니다.

그리고 방명록 또한, 티스토리에서 방명록 관련 치환자를 찾아서 적절한 위치에 디스커스 댓글 플러그인 html 소스 코드를 붙혀넣기 하면, 방명록으로도 사용이 가능 합니다.

어떻게 사용하느냐에 따라서 활용방법은 무궁무진 해 보입니다. 그리고 댓글 커뮤니티 활성화가 잘 된다면, 추후에는 CPC 광고도 댓글 목록에 삽입할 수 있어 블로그의 새로운 수익모델이 될 수도 있습니다.


'' 카테고리의 다른 글

트위터 부트스트랩 다운로드  (0) 2014.06.16
그누보드 게시판 테이블 그리고 댓글  (0) 2014.06.16
남은 글자수 체크  (1) 2012.07.23
Trigger an Error - 오류 발생시키기  (0) 2012.05.19
jQuery Mobile 페이지 이동  (1) 2011.11.03
Posted by 다오나무
2014. 6. 16. 11:01


그누보드는 게시판의 글과 댓글이 하나의 테이블로 되어있습니다. 

게시판에 따라, 따로 테이블로 되어 참조키를 이용하여 불러오는 경우도 있습니다만, 그누보드는 하나의 테이블로 되어있는데, 이는 제목과 내용을 검색하는데 용이한 장점이 있겠습니다. 

그리고 참고로 게시판의 테이블은 그누보드경우 게시판마다 각각의 테이블이 존재합니다. 생성은 관리자에서 게시판 생성시 테이블이 만들어지며, 그 테블명은 config.php 에서 정의된 $g4[write_prefix] 와 생성시 입력한 아이디값 bo_table 값으로 이어져 생성됩니다. 

XE 경우 여러개의 게시판이라도 하나의 테이블로 되어있습니다. 속도가 느리지 않겠냐는 우려에 XE 개발자경우 mysql의 힘을 믿는다는 글귀를 본적있는 듯합니다. 가능한 이야기일겁니다. 

각각 테이블의 게시판과 하나로 된 테이블의 게시판과의 장단점은 분명 있습니다. 

하나로 된 테이블 구조에서 통합적으로 게시글을 불러들일 경우 별 어려움 없이 가능합니다. 

반면 그누보드처럼 게시판수에 따라 테이블이 있다면 이때 통합적으로 게시글을 불러올려면 union 을 써야 하고, 이때 불러들일 field 값을 일일이 줘야 합니다. 이유는, 게시판에 생성되어있는 필드들의 순서값이 다를 수 있어 서로 다른 결과값을 가져올수 있습니다. 만약, 다른 방법이 있다면 알려주시면 감사하겠습니다. 

그누보드 게시판 테이블을 이야기하기전에 위와 같이 언급한데에는 다른 형태의 게시판이 있고 그 차이가 어떤지 아주 간략히라도 이해하는데 도움이 되고자함입니다. 

그누보드에서 일반 게시글인가, 댓글인가 구분을 해주는데 필드명은 wr_is_comment 입니다. 

그럼 게시글만 출력하게되는 목록과 관련된 부분을 한번 보겠습니다. 

bbs/list.php 내 포함된 부분입니다 

1if ($sca || $stx)
2{
3    $sql " select distinct wr_parent from $write_table where $sql_search $sql_order limit $from_record, $board[bo_page_rows] ";
4}
5else
6{
7    $sql " select * from $write_table where wr_is_comment = 0 $sql_order limit $from_record, $board[bo_page_rows] ";
8}
9$result = sql_query($sql);



$sca : 카테고리, $stx : 검색단어 로 검색시 댓글까지 검색을 한다는 것이 보입니다. 그 조건이 아니면? 게시글만 가져온다는 내용입니다. 


그렇다면, 게시글에 대한 댓글은 어떤 연결고리로 불러들일지 궁금해지겠지요. 

wr_parent 입니다. 

댓글들이 가지는 부모의 wr_id 값을 가지는 놈입니다. 

댓글을 예를들기 위해 이제 글내용보기시 로 넘어가면 위 쿼리문에서 본문글을 가져왔으니, 그 아래 댓글을 가져오는 쿼리문이 있을겁니다. 

bbs/view_comment.php 부분입니다. 

1$sql " select * from $write_table where wr_parent = '$wr_id' and wr_is_comment = 1 order by wr_comment, wr_comment_reply ";


'' 카테고리의 다른 글

트위터 부트스트랩 다운로드  (0) 2014.06.16
DISQUS 소셜 댓글 달기  (1) 2014.06.16
남은 글자수 체크  (1) 2012.07.23
Trigger an Error - 오류 발생시키기  (0) 2012.05.19
jQuery Mobile 페이지 이동  (1) 2011.11.03
Posted by 다오나무
안드로이드2014. 6. 3. 15:45

전에 포스팅한 폰갭, 안드로이드 플랫폼 추가하는 중에 에러가 발생하는 경우! 에 이어서 추가로 작성하는 글입니다.


위 글에서는 윈도우 환경에서 에러가 나는 경우에 ant 설치하는 방법에 대해 다루고 있습니다.

그런데, OS X (Mac)에서도 폰갭(Phonegap)에 안드로이드(Android) 플랫폼을 추가하려고 하면 동일한 에러가 발생합니다.

역시 동일하게 ant를 설치해 주어야 합니다.


개념상으로는 윈도우나 OS X 이나 ant 설치하는 방법이 동일하지만, 몇가지 명령어가 다릅니다.

다만, OS X 와 리눅스는 유닉스 계열 운영체제라서 아래 표시하는 방법은 리눅스에서도 동일하게 사용 가능한 방법이라고 보시면 됩니다.


ANT는 아파치에서 주도하는 프로젝트 중 하나로, 소프트웨어 빌드 도구입니다.

이제 설치해 보겠습니다.



ANT를 다운받습니다.


ANT의 설치는 압축을 해제하고 환경변수를 등록하는 것으로 이루어집니다.

http://ant.apache.org/ 에서 바이너리로 다운 받아서 적당한 위치에 압축 해제를 하면 됩니다.


저의 경우에는 /Users/사용자계정명/ 에 압축을 풀었습니다.

일반적으로는 /usr/bin/ 을 많이 사용하는 것 같습니다.


그래서 제 경우에는 결과적으로 /Users/username/apache-ant-1.9.4/ 에 설치가 된 것입니다.


환경변수 추가 전에 ant가 실행되는 것을 테스트 해보고 싶으시면 다음과 같이 하시면 됩니다.


[압축 해제한 디렉토리]/bin/ant -version



ANT 설치된 디렉토리를 환경변수에 지정


단순히 다음과 같이 타이핑 하시면 됩니다.


export ANT_HOME=[압축해제한디렉토리]/ant

export PATH=${PATH}:${ANT_HOME}/bin


ANT_HOME 이란 환경변수에 압축 해제한 곳을 저장하고, PATH 변수에 디렉토리를 추가하는 형태로 작업합니다.

환경변수 지정할 때는 오타 발생하지 않도록 주의해서 작성해 주세요.

Posted by 다오나무
안드로이드2014. 6. 3. 10:28

일본 사이트 : http://whgadget.blog.jp/archives/38140828.html

국내 사이트 : http://android-app-easy.blogspot.kr/2014/05/blog-post.html

'안드로이드' 카테고리의 다른 글

OS X에 ant 설치하기  (0) 2014.06.03
안드로이드 launcher icon 실행 아이콘 사이즈  (0) 2014.01.14
안드로이드 마켓 등록  (0) 2012.07.03
Posted by 다오나무