웹2.0 개발

자바스크립트

서쪽하늘 — Fri, 18 Apr 2008 14:40:40 +0900

요즘 자바스크립트를 다시 공부하고 있는데 가벼운 마음으로 보기에 좋은 책이 있어 소개합니다. 보통 문법에 대한 설명을 하는 책이 많은데 이 책을 보면서 다시 예전 Copy&Paste 습관을 버려볼까 합니다.자바스크립트 for 웹2.0 셸리 파워즈 저/김태경,김대영 공역 | 한빛미디어 | 2007년 05월 1장 자바스크립트 소개 및 개요 자바스크립트를 소개하고 자그마한 웹페이지 응용프로그램을 처음으로 소개한다. 이 장에서는자바스크립트 사용에 관련된 여러가지 이슈들(통합개발환경, 보안, 접근성 등)을 다룬다. 2장. 자바스크립트 데이터 타입과 변수 이 장에서는 자바스크립트에서 사용하는 변수, 식별자, 문법, 기본 데이터 타입 등에 대해 개괄적으로 설명한다. 3장. 연산자와 구문 할당문, 조건문, 제어문 등의 자바스크립트 기본 구문과 이에 사용되는 연산자에 대해 다룬다. 4장. 자바스크립트 객체 자바스크립트에 내장된 객체인 Number, String, Boolean, D... more...

브라우저의 리턴매치가 가능한가?

서쪽하늘 — Wed, 02 Apr 2008 10:30:7 +0900

http://marketshare.hitslink.com/report.aspx?qprid=0 2008년 3월 세계 웹 브라우저 시장점유율최근 넷애플리케이션 조사에 따르면 지난해 80% 전후를 유지해 온 익스플로러의 세계 시장 점유율은 올해 3월 74.80%까지 줄었다. 반면, 파이어폭스는 지난해 14.95%에서 올해 3월 17.83%로 상승세를 타고 있습니다. 파이어폭스는 2008년 1월달 보다 약 1%의 상승이 반전의 가능성이 더 크게 보이게 합니다. 사파리의 6% 점유율도 이제는 생각해 봐야 할 시점인듯 보입니다.이런 구도는 MS와 모질라의 이번 리턴매치를 더 흥미롭게 하고 있네요.물론 국내에는 아직 해당사항이 아니지만...

드롭다운(풀다운) 메뉴 설명

서쪽하늘 — Wed, 26 Mar 2008 15:55:42 +0900

뉴스 e비즈니스 웹개발 테크 IT 세미나 코리아인터넷닷컴

ps. 2단계 풀다운 메뉴는 4월 중순~하순경에 올리도록 하겠습니다.-->

[펌]순진한 개발자가 사내정치에서 살아남는 법

서쪽하늘 — Tue, 18 Mar 2008 18:17:6 +0900

개발자 K씨를 재회한 것은 8년만의 일이다. 그는 나와 함께 일했던 직장에서 이직한 이후에 4번이나 더 이직을 했는데, 현재는 실직 상태에서 직장을 구하고 있었다. 솔루션을 개발하는 회사에서는 비전이 없어 그만 두었고, 대기업 계열 SI업체를 들어갔으나 개발이 아닌 관리를 시켜서 그만두었고, 포털에 들어갔는데 할 일이 별로 없고 회사 상황이 정치적이어서 그만두었다고 했다. 그리고 마지막 회사는 소위 벤처기업이었는데, 6개월이나 임금을 받지 못한 상태에서 사장이 사실상 야반도주를 해서 회사가 망했다고 했다. K씨는 자바를 정말 잘 다루던 개발자였는데, 일반적인 기준에서 볼 때 성격이 좋다고 얘기하기는 힘든 사람이었지만 그 정도면 무난하다고 할 수 있었다. 다만 여느 개발자와 마찬가지로, 타인의 욕구에 관심을 가지거나 커뮤니케이션 스킬이 뛰어난 사람은 아니었다. 다음은 그가 한 얘기이다.“회사 경영은 나하고 상관이 없다고 생각했어요. 제가 경영이나 관리 같은 것은 잘 모르고요. 회사에서... more...

한글 초성 추출

서쪽하늘 — Mon, 17 Mar 2008 09:45:46 +0900

키워드 : php, iconv, unicode, euc-krmore...

Ajax와 PHP를 이용한 로그인 개발

서쪽하늘 — Mon, 10 Mar 2008 13:36:20 +0900

비록 영어로 되어 있으나 번역이 쉬운 관계로 원문 내용 그래도 첨부합니다.로그인에 대한 쉽게 설명한 내용이라 보면서 바로 이해 되시리라 생각됩니다.In the previous lesson we have seen how to realize an user login using Ajax and Coldfusion. Today's lesson will explains how to realize the same action using Ajax and PHP. Download this tutorialIntroductionIn the site root we have to create these file, index.php,login.php, config.php and a folder AJAX with ajax_framework.js.The workflow is the same that I have explained in the previous lesson: the user submit an HT... more...

Step 2: the javascript function login()In this lesson we have see how enable the XMLHTTPRequest. In ajax_framework.js file we have added this code:/* ---------------------------- *//* XMLHTTPRequest Enable *//* ---------------------------- */function createObject() {var request_type;var browser = navigator.appName;if(browser == "Microsoft Internet Explorer"){request_type = new ActiveXObject("Microsoft.XMLHTTP");}else{request_type = new XMLHttpRequest();}return request_type;}var http = createObject();Now, in the same javascript file, we will add other lines of code for the function login():/* -------------------------- *//* LOGIN *//* -------------------------- *//* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */var nocache = 0;function login() {// Optional: Show a waiting message in the layer with ID ajax_responsedocument.getElementById('login_response').innerHTML = "Loading..."// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.var email = encodeURI(document.getElementById('emailLogin').value);var psw = encodeURI(document.getElementById('pswLogin').value);// Set te random number to add to URL requestnocache = Math.random();// Pass the login variables like URL variablehttp.open('get', 'login.php?email='+email+'&psw='+psw+'&nocache = '+nocache);http.onreadystatechange = loginReply;http.send(null);}function loginReply() {if(http.readyState == 4){ var response = http.responseText;if(response == 0){// if login failsdocument.getElementById('login_response').innerHTML = 'Login failed! Verify user and password';// else if login is ok show a message: "Welcome + the user name".} else {document.getElementById('login_response').innerHTML = 'Welcome'+response;}}}How you can see, the only change, respect to login() function of the previous tutorial with Coldfusion, is:http.open('get', 'login.php?email='+email+'&psw='+psw+'&nocache = '+nocache);...instead of:http.open('get', 'login.cfm?email='+email+'&psw='+psw+'&nocache = '+nocache);Step 3: login.phpIn the previous step we have see how the login() function pass two variable (email and psw) to the page login.php, to execute a query into our database and verify that the user exists. This is the login.cfm page code:

CSS 에서 박스 모델

서쪽하늘 — Mon, 10 Mar 2008 10:51:55 +0900

CSS 에 박스 모델이라는 게 있다. 쉽게 말해 웹상에 네모난 상자를 그리고 싶은데 어떻게 그려야 하고 폭이나 높이, 두께, 여백은 어떻게 정해야 하는 지를 정의해 놓은 것이다.이 박스 모델에 문제가 있는데 W3C 에서 정의한 박스 모델과 IE에서 구현한 박스 모델이 서로 다르다는 것이다.예를 들어보자.박스의 폭을 300, 선의 두께를 20, 안쪽 여백을 30이라고 하자.CSS 표준 모델에서는왼쪽 선 두께(20) + 왼쪽 여백(30) + 실제내용 폭(300) + 오른쪽 여백(30) + 오른쪽 선 두께(20) = 400IE 모델에서는왼쪽 선 두께(20) + 왼쪽 여백(30) + 실제내용 폭(200) + 오른쪽 여백(30) + 오른쪽 선 두께(20) = 300이렇게 되어 버린다.이런 불일치를 해결하기 위한 핵이 여러 개 있는데 그 중에 3개를 소개한다.두 개는 댄 씨더홈이 짓고 박 수만이 옮긴 "웹 표준"과 "방탄웹"에 나와 있고, 추천하는 마지막 하나는 웹 상에서 찾은 거다... more...Win IE 7 패스필터(?)모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)@import "null?"{";@import "/css/style.css";@import "null?"}";-->

euc-kr에서 utf-8로 변환하기

서쪽하늘 — Thu, 06 Mar 2008 14:00:54 +0900

unix 명령어iconv -f euc-kr -t utf-8 inputfile > outfilefind 명령어를 이용해 서브디렉토리까지 한번에 euc-kr 에서 utf-8로 변환해 주는 스크립트#!/bin/bashFROM=euc-krTO=utf-8ICONV="iconv -f $FROM -t $TO"# Convert ; *.php 대신 "*"를 주면 모든 확장자에 대해 변환 시도find dir/ -type f -name "*.php" | while read fn; do cp ${fn} ${fn}.bak $ICONV < ${fn}.bak > ${fn} rm ${fn}.bakdone작업을 하다 보면 문자열 변경하는 문제가 생겨서 변경해 봅니다..ps 서브드리게토리의 파일중 원하는 스트리 변경하기find . -type f -name "*" \-exec perl -pi -e "s/source/target/g" {} \... more...

브라우저 오픈서치 추가 (IE7, FF2)

서쪽하늘 — Tue, 04 Mar 2008 17:39:53 +0900

Open Search 개요 오픈서치(opensearch.org)는 검색결과를 공유하기 위한 간단한 포맷의 집합이다. RSS 및 기타 많은 프로그램들이 지원을 하며, 브라우저에서도 최근 지원을 하고 있다. 오픈서치는 위 그림을 보듯이 브라우저 우측 상단에 있으며, 이 기능은 IE에서는 7버전부터 지원이 되며 Firefox는 2 버전부터 지원이 된다. 즉 최신버전만이 지원이 가능하다. Version오픈서치는 amazon.com 산하의 A9 이라는 곳에서 첫 버전이 나왔으며, 1.0 버전은 2005년 3월, 1.1 버전은 2005년 12월 발표가 되었다.현재 1.1 이 최신버전이다. (2008.03.03) ExtensionIE 7 과 Firefox 2 는 확장 측면에서 지원 방식이 약간 다르다. IE 7 : OpenSearch Referrer Extension (링크) FF 2: OpenSearch S... more...

prototype v1.5에서 1.6으로 업그레이드 도우미

서쪽하늘 — Mon, 25 Feb 2008 17:32:14 +0900

Deprecation.js는 Prototype의 1.5버전을 1.6으로 업그레이드 할 수 있도록 도와주는 자바스크립트 라이브러리입니다.주소는 아래와 같습니다.http://prototypejs.org/2008/2/12/deprecation-js-easing-the-1-5-1-6-transition다운로드 deprecation script : deprecation.js

크기 제한 없고 관리할 수 있는 븍마크릿 만들기

서쪽하늘 — Thu, 14 Feb 2008 16:35:2 +0900

북마크릿(Bookmarklet)은 브라우저의 연결 툴바에 추가돼 클릭됐을 때 브라우저가 어떤 사이트를 보고 있어도 특정한 기능을 수행하는 특별한 자바스크립트 조각입니다.북마크릿은 브라우저나 플랫폼에 따라 다르지만 크기에 제한이 있습니다. 또한 한 줄에 모든 자바스크립트가 표현돼야 하기 때문에 보다 정교한 스크립트를 적용하고 관리하기가 쉽지 않습니다.크기 제한 없는 북마크릿 만들기이 코드의 핵심 아이디어... more...

자바스크립트에 변수 넘기는 방법

서쪽하늘 — Tue, 12 Feb 2008 14:22:41 +0900

자바스크립트에 변수 넘기는 방법이와 같이 호출해서 id의 값이 aaa값을 호출하는 방법에 대해서 기술해 보도록 하겠습니다.먼저 자바스크립트는 클라이언트 스크립트 입니다. 저런식으로 서버 사이드 스크립트(즉, 웹프로그램) 처럼 get 방식이나 post 방식으로 값을 주고 받지 못합니다. 따라서 ?id=aaa 은 무의미 합니다.그럼 포기하고 html 방식으로 처리하는 방법과 getElementsByTagName를 이용한 방법 2가지를 기술해 보도록 하겠습니다.1. html 방식으로 처리하는 방법자바스크립트에서 get방식으로 넘어온 값을 받을수 있습니다.test.htm에 이부분을 추가하고 test.htm?id=aaa라고 입력하면 aaa라는 값을 출력... more...

jQuery 소개 (prototype.js 상대 비교)

서쪽하늘 — Tue, 12 Feb 2008 10:34:21 +0900

요즘 뜨는 jQuery 분석1. 배우기 싶다. (간단하고 직관적인 구성)prototype.js은 자바스크립트 클래스 개념으로 접근을 하고 있어 전문가가 아닌 대부분의 개발자에게는 힘든점이 많다.jQuery는 DOM 선택에 있어서 id 아닌 CSS 이기 때문에 $ 함수 하나로 해결이 된다. 그리고, 리턴되는 것은 jQuery Object 다. 즉, 리턴되는 오브젝트에 원하는 기능을 넣거나 사용하면 된다. UI 접근과 효과를 빠르게 처리하고 싶은게 UI 툴킷의 용도라고 접근했을때 이런식의 Function 기반이 Prototype의 클래스 기반보다 편하다. 즉, 내가 원하는 DOM을 선택한 뒤 그 놈의 어떤 기능을 하게 한다든지 어떤 기능을 넣어주게 하겠다는 순서로 접근하는 방식이 훨씬 직관적이고 사용하기 편한하도 생각된다.예) 어는게 더 직관적인가?new Insertion.After('domElementID', 'wannabeTag'); // prototype.js$(... more...

CSS에서 사용할수 있는 17가지 색 이름

서쪽하늘 — Mon, 11 Feb 2008 10:29:16 +0900

위키피디아 웹색상검정은색회색하양빨강고동색자주색자청색녹색라임색올리브색노랑주황파랑남색암청색옥색 blacksilvergraywhiteredmaroonpurplefuchsiagreenlimeoliveyelloworangebluenavytealaqua

HTML에서 XHTML 1.0으로 가는 세가지 단계 (strict)

서쪽하늘 — Mon, 04 Feb 2008 16:48:6 +0900

1. DOCTYPE을 XHTML 1.0 Strict로 변경2. xmlns, lang 그리고 xml:lang 속성을 얼리먼트에 추가http://www.w3.org/1999/xhtml lang="en" xml:lang="en">3. 모든 빈 태그들은 ">"이 아닌 "/>"로 종료 => XHTML에 자세한 내용은 아래 URL를 참조하세요.http://trio.co.kr/webrefer/xhtml/overview.htmlps. 한글은 "ko"입니다.

HTML 문서정의타입 : DTD(Document Type Definitio) 분석

서쪽하늘 — Mon, 04 Feb 2008 15:28:46 +0900

"작성되어 있는 페이지는 HTML 페이지 입니다. 이 페이지는 표준을 따르고 있습니다. 바로 HTML 4.01 이죠~" 이런 의미겠죠~하나 분석해 볼까요?1. 이것은 이 페이지의 문서 타입을 명시한 거라고 부라우저에 알려줍니다.2. 이것은 HTML 얼리먼트가 아니라는 것에 주의하시기 바랍니다. 맨 처엄 "<" 다음에 "!"이 오면, 이것은 뭔가 다른 것이라는 점을 말해줍니다.3. html : 이것은 이 페이지의 루트(첫번째) 얼러먼트라는 의미입니다.4. PUBLIC : HTML 4.01 표준이 공개적으로 사용 사용 가능하는 의미입니다.5. "-//W3//DTD HTML 4.01 Transitional//EN" : HTML 4.01 버전을... more...

HTML History

서쪽하늘 — Mon, 04 Feb 2008 15:02:8 +0900

HTML 1.0-2.01988, 1991년초창기에는 HTML에 관하여 알아야 모든 것을 말출 수 있었습니다. 페이지들은 근사해 보이지 않았지만.. 적어도 하이퍼텍스트는 사용할수 있었습니다. 아무도 표준하는 것에는 관심이 없었고 단지 웹에 있는 모든 이들이 자신들의 "홈페이지"를 가지는 것에 심혈을 기울였습니다. 심지어는 여러분 책상 위에 있는 연필, 종이 클릭, 포스트-잇 조차도 "웹 콘텐츠"로 여겨지기도 했습니다. (이런 시대가 있었나?)HTML 31995년"브라우저 전쟁"의 길고 암울한 시대였습니다. 네스케이프와 마이크로 소프트가 전세계를 손아귀에 넣기 위해 치고 받으며 싸우고 있었습니다. 결국, 브라우저를 정복하는 자가 전 우를 정복하는 것이니까요. (결국 MS가 이겼죠 --;;)그 전쟁의 예기치 않는 희생의 결과의 중심에는 웹 개발자가 있었습니다. 브라우저 전쟁중에, 각 브라우저 회사들은 선두 자리를 지키기 위해 자신만의 독점적인 확장자를 추가하는 군비 경쟁을 하게 되었습니다... more...

자바스크립트 라이브러리 비교

서쪽하늘 — Thu, 31 Jan 2008 15:16:52 +0900

전 개인적으로 prototype.js 와 jQuery를 추천합니다. Prototype Dojo Mochikit Yahoo! Google JQuery Simple AJAX Drag n Drop Basic Visual Effects Advanced Visual FX Java integration Event handling Back button support with Ajax Developer tools Rated Features (0-4 stars) Minimal Learning Curve Ease of use (API) Widget... more...

툴팁(풍선도움말) 개발

서쪽하늘 — Wed, 30 Jan 2008 09:46:17 +0900

예전 개발시에는 title 속성을 이용해 처리했는데 한계가 있더군요.그래서 신규 개발중이었으나... 프로토팁이라는 좋은 툴이 있어서 포기하고 이걸로 처리해서 처리중에 있습니다.포토토팁(Prototip)에 대해서 간단히 설명하자면...Prototip은 Prototype/Scriptaculous를 기반하여 만들어진 툴팁 컴포넌트입니다.표준을 따르는 HTML, CSS를 이용한 18가지 레이아웃 디자인과 출력효과를 내장하고 있어 단순히 메시지를 표시하는 것 이상의 표현이 가능합니다.특히, CSS를 이용해 디자인을 손쉽게 커스터마이즈 할 수 있게 한 점과 특정 타겟의 시야를 가리지 않도록 하는 9가지의 Hooking옵션은 사용자의 입장을 충분히 고려해 만든 모습이 역력합니다.URL Prototipps. FF에서 위치 정보가 다르게 나와 고생했는데..css 파일에 * { margin: 0px; padding: 0px; } 구문을 추가하면 해결됩니다.

웹2.0 개발 추천 도서

서쪽하늘 — Thu, 24 Jan 2008 18:10:47 +0900

첫째, Ajaxhttp://www.aladdin.co.kr/rss/new_all/14605둘째, XHTML and CSSHead First HTML Width CSS & XHTML엘리자베스 프리먼,에릭 프리먼 공저/홍형경 역 | 한빛미디어 | 2006년 05월 웹 표준에 맞춰 웹 페이지를 만들 수 있도록 해주는 실용서! 이 책은 산업 표준에 맞는 웹 페이지들을 만들기 위해 필요로한 완벽한 학습 경험을 제공한다. 독자들은 때로는 게임을 하고, 퍼즐을 풀며, 미스터리에 빠져들면서 지금까지 전혀 상상해오지 못했던 웹 페이지들을 만들게 될 것이다. 또한 CSS와 함께 HTML이 동작하는 방법을 배우게 된다.YES24 구매하기 셋째, DOM‘DOM 스크립트’로 Javascript 다시 배우기‘DOM 스크립트‘는 기존의 자바스크립트 서적과는 확실히 다릅니다. 자바스크립트 문법을 알려주기 전에 ‘지금 구현하려고 하는 기능이 정말 사용자에게 유용한 것인가? 오히려 웹의 가치를 훼손하고 있지... more...