영삼이의 전문 정보 발행처

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

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

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

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

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

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

부트스트랩 3

url: http://bootstrapk.com

 

 

부트스트랩 2

url: http://maczniak.github.io/bootstrap/index.html

Bootswatch: Free themes for Bootstrap

url: http://bootswatch.com

 

[출처] 트위터 부트스트랩! 웹 디자인과 CSS에 부담을 덜자!|작성자 커티스

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

wr_parent 입니다. 

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

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

bbs/view_comment.php 부분입니다. 

<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>
    <SCRIPT type=text/javascript>
        $(document).ready(function () {
            $('.remaining').each(function () {
                // count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
                var $count = $('.count', this);
                var $input = $(this).prev();

                // .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
                var maximumCount = $count.text() * 1;

                // update 함수는 keyup, paste, input 이벤트에서 호출한다.
                var update = function () {
                    var before = $count.text() * 1;
                    var now = maximumCount - $input.val().length;

                    // 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
                    if (now < 0) {
                        var str = $input.val();
                        $input.val(str.substr(0, maximumCount));
                        now = 0;
                    }

                    // 필요한 경우 DOM을 수정한다.
                    if (before != now) {
                        $count.text(now);
                    }
                };

                // input, keyup, paste 이벤트와 update 함수를 바인드한다
                $input.bind('input keyup paste', function () { setTimeout(update, 0) });

                update();
            });
        });
    </SCRIPT>
<TEXTAREA></TEXTAREA>
<DIV class=remaining>남은 글자수: <SPAN class=count>300</SPAN></DIV>

Trigger an Error

오류 발생시키기(Trigger an Error)
사용자가 데이터를 입력할 수 있는 스크립트에서는,
불법적인 입력이 발생했을때 오류를 발생시키는 것이 상당히 유용합니다.

PHP에서는, 이걸 trigger_error() 함수를 통해 실행 할 수 있습니다

jQuery Mobile 5일차.

-jQuery Mobile 페이지 이동과 효과.

Page 이동

1. 기본 페이지 구조.

기본적으로 단일 페이지 구조에 최적화 되어 있다. 즉, 하나의 HTML 파일에 모든 콘텐츠를 정의하거나 페이지 내에 서로간의 영역을 구분해 교체하는 방식으로 페이지 이동을 처리한다. 이렇게 하면 전체 적으로 스타일을 일관되게 적용할 수 잇고 페이지 이동에 따른 애니메이션 효과를 원할히 처리할 수 있어 웹앱의 으로서의 특징을 살릴수 있다.

jQuery mobile application은 data-role="page" 속성이 지정된 영역을 하나의 페이지로 간주하고 이 영역 단위로 브라우저에 표시한다.

2. 내부 링크 페이지 이동.

기본 페이지 구조에서도 말했듯이, jQuery Mobile은 page영역을 하나의 화면으로 여긴다. 때문에 한페이지 정의 여러화면을 대상으로 내부적으로 이동할 수 있게 내부 링크를 지원한다.

내부 링크를 사용하기 위해서는 일단 하나의 HTML 파일에 여러 page를 정의해 놓고 서로 교체하는 방식으로 페이지 이동을 처리한다.

이동할 page를 식별하기 위해서 ID를 부여하고 이 값으로 링크를 연결하는 방식을 취한다.

3. 외부 링크 페이지 이동.

외부 링크란 건 내부 링크와는 달리 하나의 HTML에서 다른 HTML 파일로의 페이지 이동을 말한다. 솔직히 jQM이 단일 페이지에 특화되어 있어도 HTML파일 하나로는 솔직히 관리도 힘들고 구현하기도 너무 힘들다. JQM에서는 자동적으로 외부링크 이동을 Ajax 통신으로 처리를 하고, 통신의 결과를 기존 페이지에 통합하는 방식으로 처리해서 내부 링크 페이지 이동과 유사하게 동작하도록 만들어져 있단다.

<a href="xxx.html"> </a> 이런식으로 앵커태그를 사용하여, 기존 HTML에서의 링크 작업과 같은 방식으로 동작하게 된다. 물론 다른 HTML파일들은 JQM의 양식에 맞게 작성이 되어 있어야한다.

4. 외부 사이트 이동 과 링크 옵션

위에는 모드 동일 사이트 내의 링크들에 대한 이야기이고, 외부 사이트로의 링크의 경우에는 JQM의 페이지 이동 매커니즘이 적용안된다. JQM은 HTML 링크 타입을 모두 지원하며, Ajax 기반의 처리외의 방식을 지원하기 위해 몇개의 옵션을 지원한다.

rel="external" , data-ajax="false", target="_blank" 3가지 방법 모두 앵커 태그에 덧붙여서 사용을 하시면 되고, 이런 방법들은 페이지 제어권이 완전히 넘어가 새로고침되는 방식으로 동작을 하게 된다.

외부 사이트가 JQM의 방식을 따르지 않는다면 꼭 사용을 하여야하는 방법같다.

5. 기능 링크

기능 링크는 이메일이나 전화 번호에 대한 링크를 말한다. 다들 스마트폰이나 태블릿 pc 등에서 경험을 해보았겠지만 전화번호를 누르면 전화가 걸어진다 던지, 메일 주소를 누르면 메일을 쓸수 있도록 동작을 한다던지의 행동을 하게 만드는 것들이다. 이 기능들은 JQM이 지원하는게 아니라 모바일 기기들이 알아서 고맙게 지원해주는 기능들이다.

TIp.

1. 링크를 이용하여 page를 구성하면 자동으로 back 버튼이 header 부분에 생성이 된다. data-backbtn="false" 속성을 header에 추가하면 자동 생성이 안된다.

2. jQM은 페이지 이동시 기존 js 객체인 location.hash값도 함께 업데이트하므로 브라우저 자체 back 기능도 잘 동작이된다.

페이지 이동 API 와 애니메이션 효과.

1. 페이지 이동

스크립트 영역에서의 page 이동을 처리하기 위해 JQM에서는 mobile 객체의 changePage() 메서드를 제공해준다.

내부: $.mobile.changePage("#OtherPage","slide","reverse");

외부: $.mobile.changePage("#Other.html","slide","reverse");

2. 애니메이션 효과

Page Transition 이라고 하며 , 총 6개의 CSS 기반 Transition이 제공된다. 페이지 링크를 정의하는 애커 테그에 data-transition 속성을 지정하면 ok !!.

효과의 종류

slide: 왼쪽으로 미끄러지듯 이동 (default).

slideup: 위쪽으로 미끄러지듯 이동.

slidedown: 아래쪽으로 미끄러지듯 이동.

pop: 팝업 형태로 새 페이지가 두둥.

fade: 기존 페이지가 희미해지면서 새 페이지가 두둥.

flip: 새 페이지가 트리플 악셀 . 두둥.

반대 방향으로 Transition 효과를 주고 싶으면 data-direction="reverse" 속성을 주면 ok.

JavaScript

a free online quick reference order here VisiBone

I hope you find these 
excerpts of VisiBone
JavaScript references
very useful.

Contents:
Number
String
Number <–> String
Boolean
Date
Math
Array
Function
logic
Object
type
object-orientation
Error (exceptions)
LEGEND
Operator Precedence

More content is in the
product closeups, especially:
DOM (Document 
Object Model)
Regular Expressions

The information here 
is part of two printed
references, that
VisiBone makes, the
JavaScript Card:

a dense, laminated,
four-page 8.5x11 book

and also the
JavaScript Foldouts:

a set of three fan-fold
booklets with larger
print and smaller
folded size.

Does it look busy?
Well, it wasn't meant
for idle people!

Here are all the
features of client-side
JavaScript, in
living code.

English takes a
back seat here.  
To make solid 
code, learn to 
read, think and 
write in
JavaScript.
Fluency will
serve you best
in the end.

The assert()
function is the best
invention for
programming
since the subroutine.

Not only will its
proper use make
your software
test itself, earning
and protecting
reliability from the
start.

But it's a clear,
concise way to
describe exactly
what all the features
of JavaScript do.

Did I mention?
Feedback 
form below!

Regular Expressions
are very versatile for
validating or
analyzing strings.

See the JavaScript
Regular Expressions
reference.
If you are looking to
establish or extend
your business in
international markets,
it is very important to
ground your company's
brand and presence in
targeted countries. The
first step in a successful
strategy is to register
an international domain
for your company.
International domain
registration can be
tricky, so use a
registrar that knows
the requirements and
process is important.
Check out godaddy
for the widest selection
and best prices on
international domains.

The assert() function
is like a video camera. 
Hold on now, this will 
make sense in a sec.

Think how you first learn 
human language. You 
observe words spoken 
and their effects. 
Person A: "I'm hungry" 
Person B gives A food. 
You infer an association 
between making the 
sound "hungry" and 
getting fed.

This card can teach you 
JavaScript not by talking 
about it but by doing it 
and (here's the part I'm 
smug about) showing 
you the effects. The 
assert() function is a 
great way of showing 
you what JavaScript 
code does.

Imagine, instead of a 
dead-tree dictionary 
that defines words in 
terms of ... other words, 
it would instead show 
a video clip of people 
using and responding
to those words.

Assert makes the 
effects of JavaScript 
code visible, just like 
this video-dictionary 
would make the 
effects of human 
words visible.

VisiBone also makes
several printed web
color references.

Posters & Charts

Laminated Cards

that match the 
"VisiBone2"
swatch collection 
in Adobe
Illustrator and 
Photoshop.

Plus two varieties 
of Mouse Pads.

And a chart with 
1068 non-web-safe
colors:

Guaranteed compatible
with walls in Asia,
Europe, the Americas,
Africa, Australia and
California.

Thank you, and good luck building!
—

JavaScript Reference Contents:
Number
String
Number <–> String
Boolean
Date
Math
Array
Function
logic
Object
type
object-orientation
Error (exceptions)
LEGEND

Here's a table of Browsers versus the JavaScript versions they claim to support:

        
         
                IE   IE   IE   IE  IE  IE  IE  IE
                PC   Mac  PC   PC  Mac Mac PC  PC    Netscape   Mozilla   Opera
                4.01 4.01 4.01 5.0 5.0 5.1 5.5 6     4.7  6.0   0.9-1.0   6.03

JavaScript      X    X    X    X   X   X   X   X     X    X        X      X
JavaScript1.0   X    X    X    X   X   X   X   X     X    X        X      X

JavaScript1.1   X    X    X    X   X   X   X   X     X    X        X      X
JavaScript1.2   X    X    X    X   X   X   X   X     X    X        X      X
JavaScript1.3             X    X   X   X   X   X     X    X        X      X
JavaScript1.4                      X   X                  X        X      X
JavaScript1.5                                             X        X

Jscript         X    X    X    X   X   X   X   X

EcmaScript                X    X           X   X                          X

exceptions      no   no   yes  yes yes yes yes yes   no   yes     yes     yes
supported?


An "X" in row "Yyyyy" means code under <script language="Yyyyy"> will run
in the browser for that column.  For example:

     IE6/PC
     ------
     <script language="JavaScript 1.3">
          // runs
     </script>

     Netscape 6
     ----------
     <script language="EcmaScript">
          // ignored
     </script>

(Yes, there are two radically different browsers both claiming to be IE4.01,
one claims to support JavaScript 1.3 and EcmaScript, and exceptions work
perfectly, and the other not.)

See the Error section for a trick on how to include code with exceptions.