<< 10월 2008 | | 12월 2008 >>

인큐베이팅 서비스

신자유주의의 양극화가 세상을 뒤덮어가고...

과거의 박정희 전 대통령이 토건식으로 전국토를 계발했듯, 김대중 전 대통령은 토건식 정보화망을 구축함으로써 인터넷 벤처기업이 꽃을 피울 수 있었고, 김대중 정부 이후, 벤처기업에 대한 정부의 지원은 조금씩 축소되기 시작한다.

현재 이명박(박정희가 토건식 정치를 보고 자리온..) 정부 들어서는 정통부 해체, 심지어 11/25일 아놀드 슈워제네거 캘리포니아 주지사 접견자리에서 건넨 그 말이란다. "정보기술(IT)시대는 일자리가 줄어들고 소득격차가 벌어지는데, 녹색기술(GT)시대는 일자리를 IT보다 훨씬 많이 만들어낼 수 있고 소득 격차도 줄인다." ...

이처럼 인터넷 벤처, 이제는 좀 시들어진 듯 들리는 이 토양(인터넷)이다. 하지만 우리들의 삶을 너무나 많이 바껴 인터넷 없이는 살 수 없게 되었다. 우리는 이제 웹으로 연결된 이 세상과 어떻게 하든 공존해야 한다. 그런데 한국의 인터넷 환경은 네이버, 다음의 독주속이 심한 불균형을 이루고 있다.

그야말로 다양성이 상실되어 있다는 반증이며 다양성의 공존이 필요하다는 것이다. 이런 현상을 타파할수 있는 방법은 다양한 시도들이 이루어 질 수 있는 기업 환경이다. 정부가 안되면 기업들이 해야하죠. 그래서 웹이란 토양에서 다양한 비즈니스를 위해 새로운 아이디어를 현실화 할 수 있도록 체계적인 지원을 해주는 인큐베이팅 서비스에 대해 알아 보았습니다.

1. 개념
 - 학문적 의미
  . Smilor(1987)는 `배양하다(Incubate)`라는 단어의 경영학적 의미에 대하여 설명하였는데, `Incubate`라는 의미는 새로운 사업의 개발에 아주 적절한 말로써, `Incubate` 한다는 것은 부화하고 성장할 수 있는 좋은, 정해진, 그리고 통제된 조건을 유지시켜준다는 의미를 포함한다고 하였다. 또한 그것은 `기업이 형태를 갖추고 발전할 수 있도록 도와주는 것을 의미하며 이러한 맥락에서 `Incubating`은 배양을 위해서 잘 통제된 조건을 제공하는 것`이라고 하였다.
 - 일반적 의미
  . 벤처기업의 창업 아이템 선정에서부터 회사 운영, 독립, 분사까지 도와주는 전 과정을 뜻한다. 단순히 회사 설립이나 운영 방안에 대해 조언해주는 ‘컨설팅’에서 한 걸음 더 나간 개념이다.

2. 사례
 - Litmus2(http://www.litmus2.com/) - 소프트 뱅크
  . 서비스에 대한 호스팅을 지원합니다.
  . 서비스에 대한 평가를 제공합니다.
  . 서비스에 대한 홍보 및 사업 제휴를 지원합니다.
  . 서비스에 대한 투자유치 기회를 제공합니다. (리트머스2 프로세스 참고)
  . 서비스에 대한 기획/기술 컨설팅을 지원합니다. (옵션 사항)
  . 소프트뱅크의 포트폴리오 또는 리트머스2에 입주한 다른 서비스들과의 연계 및 상호 협력을 지원합니다.

 - Paran YES!(http://yes.paran.com/) - 파란닷컴
  . 서비스 기획/개발을 위한 사무실 제공합니다.
  . 서비스 호스팅을 지원합니다.
  . 서비스 출시를 위한 퍼블리싱/마케팅을 지원합니다.
  . 개발을 위한 운영비도 지원합니다.

 - Noeply(http://neoply.com/) - 네오위즈 인터넷
  . 서비스를 위한 개발 공간과 운영비를 지원합니다.
  . 서비스 운영을 위한 서버와 네트워크 리소스를 지원합니다.
  . 서비스에 대한 사업/서비스 기획 및 기술 자문을 제공합니다.
  . 서비스의 지속적 추진현황과 평가업무를 수행합니다.
  . 서비스에 대한 홍보를 지원합니다.

 - 그외
  . KT(http://ktidea.kt.co.kr/user/index.jsp)

신생 밴처기업의 실질적인 도움을 줄 수 있는 프로그램들이 많이 나와서 한국에서도 웹 2.0 서비스가 일본처럼 많이 활성화 될 수 있는 계기가 되었으면 합니다.
거품이 아닌 새로운 인터넷이 삶의 또다른 패러다임이 될 수 있도록...

유용한 jQuery Plugin들

유용한 jQuery 플러그인 들을 모았습니다. 한번 링크 클릭해서 필요한 플러그인이 있으면 참조해서 응용해 보세요. 상당히 양이 많죠 ^^

 

  • Accessibility Stylesheet and text size switcher.
  • Accordion Accordion interface with a few variations.
  • AlphaNumeric Prevent users from inputing special characters.
  • Ajax File Upload Loading graphic displays while file is uploaded.
  • appendDom Write HTML with JavaScript, great for displaying Ajax results.
  • appendText Converts text into post friendly html.
  • blockUIEXCELLENT Create a message overlay while blocking user interaction on elements or the entire page.
  • BogoFolders View text through a 'file menu' interface.
  • BogoTabs Basic tabbed interface.
  • Bubble Demo highlights selected table rows in groups of tables..
  • Calendar Aids date entry.
  • Checkbox manipulation Select, unselect and toggle checkboxes.
  • ChiliEXCELLENT Syntax highlighting for displaying code on webpages.
  • Choose Component Select data from a table row through a modal window.
  • Click Menu Generates dropdown menus.
  • clueTip Tooltips with many variations.
  • Color Animations Add color animations to div backgrounds.
  • Color Picker Pass in color choices and attach custom events to each color block.
  • columnHover Highlight table rows and columns.
  • columnManager Add, remove and toggle table columns.
  • ContextMenu - Menus that show when you right click specified elements.
  • Confirmer Adds a listener to check if user confirms their action.
  • CycleEXCELLENT Add flash-like image effects to rotating image galleries.
  • date picker Aids date entry.
  • Delicious Read delicious bookmarks from a user to display on a webpage.
  • Dimensions Get accurate window and document attributes across browsers.
  • Equalize Columns Make columns the same height as the longest column.
  • FCKEditor Plugin Adds a rich text editor to a textarea.
  • Field Expand the ability to retrieve and set values in forms.
  • FormEXCELLENT Change HTML forms to submit via Ajax.
  • Gallery Viewer JavaScript image gallery.
  • getUrlParam Function to get url parameters.
  • Google Feed Plugin Display any RSS feed to a webpage.
  • Gradient Adds a gradient to a div without needing an image.
  • Grid Column Sizing Table column draggable resizing.
  • Grid Row Sizing Expand and collapse table rows.
  • hoverIntent Prevents unintended hover events.
  • idTabs Add tabbed interface to a website.
  • Impromptu Create modal windows and messages.
  • jQuery Localisation Applies localisation packages based on the user's language preference.
  • jBox UI dialog widget.
  • jCalendar Aids selecting of dates inline on a page.
  • jCarousel Lite Simple carousel for images and HTML content.
  • jCodeViewer Syntax highlighting for displaying code on webpages.
  • jdMenu Hierarchical Menu Generates dropdown menus.
  • jEditable Live editing of elements on a webpage.
  • jFeed XML feed parser.
  • jPanView Replaces big images with a zoom viewer in HTML.
  • jqDnR Drag'n'Resize elements on a page.
  • jQMaps Interact with Google maps.
  • jqModal Display notices, dialogs, and modal windows in a web browser.
  • Treetable Make a tree view out of an HTML table.
  • Tree ViewEXCELLENT Tree view controls.
  • Suggest Add autocomplete to input fields.
  • YAV Form validation library.
  • jqUploader Provides a status bar for uploading images.
  • jScrollPane Customize your scrollbars.
  • jTagEditor EXCELLENT Turn a textarea into a tag editor.
  • jVariations Create a control panel to manipulate elements on a page.
  • Keyboard Navigation Dynamically determine which element to focus on based on it's position on the screen.
  • labelOver Overlay labels over an input field.
  • LavaLamp Navigation menu with a 'lava' effect.
  • Lazy Load Only load images that are in the current window.
  • Live Query Adds event listeners to elements.
  • Masked Input Add mask to inputs to aid user data entry (phone numbers, etc).
  • Media EXCELLENT Unobtrusive conversion of standard markup into rich media content.
  • Extra selectors for JQuery Add more selectors to jQuery.
  • Mousewheel Mousewheel event handler.
  • Mousehold Event Add repeating event as the user holds down the mouse.
  • Multiple File Upload Select multiple files one by one as it adds to a queue list.
  • newsticker Create a fading news ticker.
  • Password Strength Meter Indicator to show the strength of a users password.
  • PopupWindow Creates an preview popup of destination link.
  • Query String Object Useful for sending URL parameters.
  • Select box manipulation Remove and add options from a select list or dropdown in many ways.
  • selectCombo Tool for making dependant dropdowns with Ajax.
  • Star Rating Generates star rating from input fields
  • Grid Dynamic ajax grid control.
  • slideViewer Image gallery as slides.
  • Spoilers Hide content behind an image until user action is taken.
  • tableHover Row and column highlighting with variations.
  • tableFilter Search box is added to each column header to filter table.
  • tablesorter Client side table sorting.
  • Taconite EXCELLENT Easily make multiple DOM updates using the results of a single AJAX call.
  • Textgrad Add gradients to whole blocks of text.
  • Time Entry Sets an input field up to accept a time value.
  • Tooltip Add tooltips from title page.
  • Validation EXCELLENT Add live validation to forms.
  • WYMeditor EXCELLENT Web-based XHTML WYSIWYM editor.
  • Zoomi Zoomable thumbnails.
  • XSLT Transform XML/XSL from JavaScript.
  • XAP Ajax library.

 

태그 :

jQuery와 배열

1. 배열로부터 jQuery 오브젝트 생성

 - $함수에 넣으면 OK
   $([1,2,3])
 - NodeList와 같은 넣어주어도 해석
   $(document.getElementsByTagName("div"))
   // $("div")와 같음

2. jQuery를 활용하여 배열 처리

 - 길이 조회
   $("div").length
   // document.getElementsByTagName("div").length 와 같음
 - 특정 인덱스의 요소를 취득
   . [] 이나 get(index)를 사용하면, 특정의 인덱스의 DOM 요소를 취득할 수 있음
   $("div")[0]
   $("div").get(0)
   // document.getElementsByTagName("div")[0]와 같음
   . eq를 사용하면, 특정의 인덱스의 요소만을 포함한 jQuery 오브젝트가 되돌아 옴
   $("div").eq(0)
   // $(document.getElementsByTagName("div")[0]) 또는
   // $("div:first") 같음
   . reverse 한 뒤에 한층 더 jQuery 오브젝트로 하려면 , 모두에 소개한 것처럼,$()에 넣는다.
   $($("div").get().reverse())
   . get()의 내부에서는 $.makeArray(this)가 실행되고 있음
   . $.makeArray()는 배열과 같은 것(NodeList나 arguments, jQuery 오브젝트 등)을 배열로 변환할 때 편리함
 - jQuery 오브젝트로부터 배열을 작성
   . each!(제일인수가 인덱스, 제2인수가 요소)  
   $("div").each(function(i, elem){elem.className="foo"+i;})
   // 이하의 코드와 같은
   // var elems = document.getElementsByTagName("div");
   // for(var i = 0; i < elems.length; i++)
   //     elems[i].className = "foo" + i;
   OR
   $("div").each(function(){this.className = "foo";})
   // $("div").attr("className", "foo")와 같음
   . map!
   $("div").map(function(){return this.className;})
   // ["", "class1", "class2", ...]
   // (클래스명 일람을 포함한 jQuery 오브젝트)
   . filter!(인덱스 번호도 올수 있음)
   $("div").filter(function(){
    return this.className == "foo";
   })
   // $("div.foo")와 같음
   OR
   $("div").filter(function(i){
    return i % 2 == 0;
   })
   // $("div:even")와 같음
   . filter 에는 CSS 실렉터도 사용할 수 있다.
   $("div").filter(".foo")
   . map과 filter를 한 후에 end()를 부르면, 원래의 jQuery오브젝트로 돌아옴
   $("div")
    .filter(".foo")
        .style("display", "none")
    .end()
    .filter(".bar")
        .style("display", "block")
    .end()
   // 이하는 같음
   // $("div.foo").style("display", "none");
   // $("div.bar").style("display", "none");

[참고 사이트]
  • http://d.hatena.ne.jp/nitoyon/20081121/jquery_array
태그 :

Flickr API를 활용하여 이미지 검색 화면

1. Flickr API Key 생성

 - http://www.flickr.com/services/api/keys/

2. 구현 소스

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" xmlns:album3d="com.mimul.image.*"
 backgroundColor="black" width="632" height="340">
<mx:Script>
 <![CDATA[
  import com.mimul.image.ImageLoader;
  import mx.rpc.AsyncToken;
  import mx.collections.ArrayCollection;
  import mx.rpc.events.ResultEvent;
  import mx.controls.Alert;
  import mx.core.IFlexDisplayObject;
  import mx.managers.PopUpManager;
  
  private var photos:ArrayCollection;
  private var result:Array;
  private var mappedPhoto:Object;
  private var params:Object;
  
  private function createPhotos(photos:ArrayCollection):Array {
   result = new Array();
   for each(var photo:Object in photos) {
    // 이미지 매퍼
    mappedPhoto = {
     picture: 'http://farm' + photo.farm +
     '.static.flickr.com/' + photo.server + '/' +
     photo.id + '_' + photo.secret + '_m.jpg',
     label: photo.title
    };
    result.push(mappedPhoto);
   }
   return result;
  }
  
  private function eventResult(event:ResultEvent):void {
   photos = flickrapi.lastResult.rsp.photos.photo
    as ArrayCollection;
   if(photos == null || photos.length < 1) {
    album.dataProvider = new Array();
    status.text = "결과가 없습니다. 다시 검색해 주세요.";
   } else {
    album.dataProvider = createPhotos(photos);
    status.text = "이미지 로딩 중...";
   }
  }
  
  private function search(text:String):void {
   if (text == null || text.length < 1) {
    mx.controls.Alert.show("검색할 내용이 없습니다. 검색 내용을 입력하세요.");
   } else {
    // cross domain 허용
    Security.allowDomain("*", "api.flickr.com");
    flickrapi.url="http://api.flickr.com/services/rest/";
    params = new Object();
    params.method="flickr.photos.search";
    params.per_page = "30";
    params.api_key="f81ec9e8cb7e47d027b0362b80dc4db8";
    params.text = text;
 
    status.text = "flickr에서 데이터를 검색중...";
    flickrapi.cancel();
    flickrapi.requestTimeout = 10;
    flickrapi.send(params);
   }
  }
 ]]>
</mx:Script>
 <mx:HTTPService id="flickrapi" result="eventResult(event)"
  resultFormat="object"/>
 <album3d:Album3D id="album" width="624" height="340" 
  tileWidth="240" tileHeight="180" padding="20"
  zoomViewZ="-300" fullViewZ="1500" startPosX="-480"
  pictureClick="trace(event.data.label)"
  pictureRollOver="trace('over:'+event.data.label)"
  pictureRollOut="trace('out:'+event.data.label)"
  creationComplete="search('꽃')"
  pictureLoaded="status.text=''"/>
 <mx:TextInput width="560" id="searchInput"
  enter="search(searchInput.text)" color="white"
  backgroundColor="black" height="21.969696"/>
 <mx:Button x="566" y="0" label="검색" color="white"
  fontSize="10" width="56.89394" height="21.969696"
  click="search(searchInput.text)"/>
 <mx:Label bottom="0" color="white" id="status"/>
</mx:Application>

3. 실행 화면


태그 :

[무료 책] The Art & Science of CSS 제공

css'The Art & Science of CSS' 라는 책을 무료로 제공하는 곳이 있습니다. 이 사이트는 가끔 무료로 책을 제공하고 있습니다. 오랫만에 무료책이 하나 왔네요.

CSS관련 책이니 디자이너나 개발자에게 도움이 될만한 책입니다.

여기 가서 이메일을 입력하면 다운 받을 수 있는 링크를 메일로 발송해 줍니다.
'Your Free Book: The Art & Science Of CSS' 라는 제목으로 메일이 발송되면 다운 받을 수 있는 링크를 제공해 줍니다. 그 링크를 클릭하면 PDF파일을 다운받을 수 있습니다.
앞으로 10일 정도 남았는데 관심있는 분들은 다운 받아서 보세요.

책 내용은 아래와 같습니다.

1. Headings
 - Hierarchy
 - Identity
 - Image Replacement
 - Flash Replacement

2. Images
 - Image Galleries
 - Contextual Images
 - Further Resources

3. Backgrounds
 - Background Basics
 - Case Study: Deadwood Design
 - The Future of Backgrounds

4. Navigation
 - The Markup
 - Basic Vertical Navigation
 - Basic Horizontal Navigation
 - Tabbed Navigation
 - Variable-width Tabs
 - Advanced Horizontal Navigation

5. Forms
 - Accessible Form Markup
 - Form Layout
 - Required Fields and Error Messages

6. Rounded Corners
 - Flexibility
 - Experimenting with these Techniques

7. Tables
 - The Structure
 - The Styling
 - Table Elements in Action
 - Using JavaScript
 - The Future

태그 :

jQuery 코드를 잘 작성하는 5가지 팁

1. DOM중에 데이터를 보존할 수 있는 data 메소드를 사용하자
 - 잘못된 예
$('selector').attr('alt', 'this is the data that I am storing');
 // then later getting that data with
$('selector').attr('alt');
   alt」등의 HTML에 데이터를 보존해 두면 다음에 꺼낼 수 없게 되어 버리는 일이 있으니까 좋지 않다.
 - 잘된 예
$('selector').data('meaningfllname', 'this is the data I am storing');
 // then later getting the data with
$('selector').data('meaningfullname');

대신에 jQuery의data 메소드를 이용하자.이것은 페이지의 요소로서 데이터를 관련지을 수 있다.

2. jQuery의 selectors를 활용하자
jQuery에는 많은 selectors가 있지지만, jQuery의 오리지날 selectors를 사용하자.
자주 이용하는 것은 이하의 selectors이다.

:input
예::input는 페이지내의 input 요소, select 요소, textarea 요소등을 지정할 수 있다.

[attribute=value]
예:input[name='container']는 name 속성의 값이 container의 input 요소

:eq(index)
예:table:eq(3)는 페이지로 4개째의 table 요소

3. 많은 DOM를 조작하는 경우는 livequery 플러그 인을 이용하자
 - livequery 플러그인을 이용하면, 나중에 추가할 예정의 요소에 대해서 이벤트를 바인드 해 둘 수 있다.

4. Ajax로 form를 송신하는 경우는 form 플러그인을 이용하자
 - jQuery Form Plugin를 이용하면

$(form).ajaxSubmit();
이라고 하는 간단한 기술로 form의 송신을 할 수 있다

5. class를 flag로서 이용하자.
 - addClass 메소드를 이용해 class를 추가해 두면, hasClass 메소드를 이용해 flag로서 이용할 수 있다.

[참조 사이트]

 

태그 :

야후 날씨 API로 위젯 만들기

1. 야후 날씨 라이브러리 다운로드
 - 여기서 다운로드
 - AstraWebAPIs.swc libs 디렉토리에 임포트

2. 야후에서 국가/지역 코드 정보 조회
 - http://weather.yahoo.com/South-Korea/KSXX/regional.html 사이트에 가서 해당 지역의 마우스 올려놓으면 KSXX0037 코드가 보임

3. 기본 날씨 정보
 - 온도 :weather.current.temperature
 - 체감온도 : weather.current.wind.chill
 - 습도 : weather.current.atmosphere.humidity
 - 풍속 : weather.current.wind.speed

4. 야후 API 활용해서 Widget 작성한거 사용하기
 - 사용 방법

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="WeatherWidget" width="250" height="296"
   codebase="http://fpdownload.macromedia.com/get/
flashplayer/current/swflash.cab">
   <param name="movie" value="http://mimul.com/examples/
widget/WeatherWidget.swf"/>
   <param name="quality" value="high" />
   <param name="bgcolor" value="#869ca7" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="http://mimul.com/examples/
widget/WeatherWidget.swf" quality="high" bgcolor="#869ca7"
    width="250" height="296" name="WeatherWidget" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
 </object>

5. 결과 화면


[구인 공고] KTH MIS팀에서 전산직 정규 직원을 모집

KTH MIS팀(제가 몸 담고 있습니다. ^^)에서 전산직 정규 직원을 모집합니다.

1. 지원 요강
- 업무내용 : 웹(고객관리/인증 관련) 어플리케이션 개발
- 전공 : 전공 및 학과 무관
- 경력 : 경력 1년 ~ 5년
- 프로그램 :Java, C/C++
- DBMS: Oracle(SQL, Pro*C), 대용량 데이터 처리 기술

2. 제출 서류 및  전형방법
- 접수 방법 : http://paran.career.co.kr/jobs 접속 후 온라인 입사지원
- 접수기간 : 2008년 11월 13일 (목) 09:00 ~ 2008년 11월 20일 (목) 23:00

3. 기타 문의 사항
 - 이메일 : pepsi@paran.com

저희팀은 OpenID/OAuth/Payment 등 다양한 Web 2.0 기반의 인증 인프라 서비스를 개발 노하우를 가진 팀으로 신규 트랜드와 기존의 인프라 업무 노하우를 고루 겸비하고 있어 지원자들에게 많은 도움이 될 것입니다.
그 만큼 트랜드를 이끌어갈 수 있도록 여러분의 노력도 필요하겠죠. ^^ 아무튼 저희와 함께 할 여러분의 도전을 원합니다. 홧팅 ~~
자세한 내용은 여기를 참조하시어 신청하십시오. 문의 사항은 댓글이나 메일로 보내주시면 성심 성의껏 답변해 드리겠습니다.

태그 :

Gmail을 활용한 메일 발송 클라이언트

1. 소스

package client;
import java.util.Properties;
import javax.mail.Message;
import javax.mail.MessagingException;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
public class GmailClient
{     private static final Properties props;
    static {
     props = new Properties();
     props.put("mail.smtp.host", "smtp.gmail.com");
     props.put("mail.smtp.port", "587");
     props.put("mail.smtp.auth", "true");
     props.put("mail.smtp.starttls.enable", "true");
    } 
 public void send(String username, String password,
     String to, String subject, String body) throws MessagingException
 {
  Session sess = null;
  Transport transport = null;
  MimeMessage mm = null;
  
  try {
      sess = Session.getInstance(props);
      mm = new MimeMessage(sess);
      mm.setFrom(new InternetAddress(username));
      mm.setSubject(subject);
      mm.setRecipient(Message.RecipientType.TO, new InternetAddress(to));
      mm.setContent(body, "text/plain; charset=iso-2022-kr");
      mm.setHeader("Content-Transfer-Encoding", "7bit");
    
      transport = sess.getTransport("smtp");
      transport.connect(username, password);
      transport.sendMessage(mm, mm.getAllRecipients());
     } catch (Exception e) {
      e.printStackTrace();
     }  finally {
         if (transport != null) {
             transport.close();
         }
     }
 }
 public static void main(String[] args) {
  try {
   new GmailClient().send(
                "****@gmail.com",       //발송 메일 주소
                "********",             // gmail 계정 패스워드
                "pepsi@paran.com",    // 수신 메일 주소
                "메일 발송 테스트",     // 제목     
                "잘 들어가냐...대답 해"); // 메일 내용
   System.out.println("메일 발송 성공 !!");
  } catch (MessagingException e) {
   e.printStackTrace();
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
}
잘 활용해 보세요. 간략하게 구현해 보았습니다.

 

태그 :

jQuery 를 활용한 tablesorter 위젯

1. 요구 사항

2, 사용 방법

 - 위의 필요한 파일들을 include하고 난 다음
 - 아래 스크립트를 추가함

<script type="text/javascript">
jQuery(function($) {
    $('#large').tablesorter({
        widgets: ['cookie']
    });
});
</script>

 3. 데모 사이트

 - 여기를 클릭하세요.

필요하신분들은 참고하세요. 소스 분석도 한번 해보세요.

[참고 사이트]

태그 :

Internet Explorer에서 디버깅

1. DebugBar(Firebug for IE)
 - 특징 :  DOM inspector, HTTP inspector, JavaScript inspector, console 지원, validation tools 지원
 - 사이트 : http://www.debugbar.com/

2. Web Development Helper
 - 특징 :  DOM inspector, HTTP requests 로깅,  script error call stacks
 - 사이트 : http://projects.nikhilk.net/WebDevHelper/Default.aspx

3. Visual Web Developer 2008
 -  특징 : JavaScript debugger
 - 사이트 : http://www.microsoft.com/express/vwd/

4. Miscrosoft Script Debugger
 - 특징 : JavaScript debugger
 - 사이트 : http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en

5. HTTP Analyzer 3.2(유료)
 - 특징 : Header, Timing, Content, Cookies, Query Strings, Post data, Request and Response Stream 정보 조회
 - 사이트 : http://ie-debug-https.qarchive.org/

6. HttpWatch(유료)
 - 특징 : HTTP viewer, headers, cookies, caching, POST data 조회, HTTPS, compression, redirection & chunked encoding 지원, C#, Ruby, Javascript 지원
 - 사이트 : http://www.httpwatch.com/

[관련 포스트]

태그 :

[북리뷰] 시간 도둑을 잡아라

저자 : 나츠카와 가오 지음 | 김영환 번역
출판사 : 한스미디어
출간 : 2007-12-24

[책내용]
프로젝트 1. '다른 사람에게 휘둘리는 시간'을 잘 활용하자
- '시간도둑'은 당신 바로 옆에 앉아 있다
01 맡겨 주십시오! 제 나름대로 생각이 있습니다!
 - 가장 중요한 것은 '자신의 시간'이다. 그것을 최우선으로 고려하고 난 후에 상사에게 어떻게 대응할지를 생각하자.
02 '자기중심'으로 생각하자
 - 쓸데없는 것을 줄이기 전에 그것이 당신에게 정말 쓸데없는 것인지 곰곰이 생각해보자.
03 상대방으로 하여금 자신이 중요한 사람이라고 느끼게 해주자
 - '다른 사람에게 휘둘려버리는 시간'은 그 사람의 신뢰나 안심감을 얻게 되면 상당 부분 해소될 수 있다.
04 합리적인 사고
 - 다른 사람이 원하는 프로세스에 얽매일 필요는 없다. 당신은 당신의 방식대로 합리적으로 생각해서 행동하면 된다.
05 자네에게 맡기겠네!
 - 때로는 다른 사람에게 맡기거나 내버려두는 것도 필요하다.

프로젝트 2. '일의 시간'을 제대로 활용하자
- '시간도둑'은 책상 속, 수첩 속, 회의 중, 출퇴근전철 등 어디에나 있다.
06 메모를 하지 않는다
 - 메모나 수첩을 과신하지 말자. 공백시간이나 사고를 중단시키는 작업에 '시간도둑'이 없는지 잘 생각해 보자.
07 회의는 춤춘다
 - 회의나 메모도 머릿속을 스쳐 지나가는 엉뚱한 것을 시간도둑으로 만들지 않기 위해 있는 것이다.
08 무엇이 최우선?
 - 기일이나 목표를 설정하는 이유는 자신이 바라고 있는 것을 달성하기 위해서나 그것을 위한 시간을 확보하기 위해서다.
09 '할 수 있다'는 것을 전제로
 - '이렇게 해보면 좋지 않을까'하고 생각나는 것이 있다면 시간낭비가 될지언정 일단은 행동으로 옮기자.
10 일석이조
 - '두 가지를 동시에'보다 '한 가지로 두 가지의 성과를 낼 수 없을지'를 생각해보자.

프로젝트 3. '다른 사람의 시간'을 자기 것으로
- '시간도둑'은 쓸데없는 이야기를 좋아한다
11 이심전심
 -  말하지 않아도 되는 것은 굳이 말할 필요가 없다. 상대방도 알고 있다면 그것을 새삼 확인하기 위해 시간을 허비하지 말자.
12 '당장'이란 몇 초?
 - 정보는 '정확히 전달함'으로써 쓸데없이 시간을 허비하지 않게 된다. 하지만 그 전에 의견일치를 봐두는 편이 필요하다.
13 설명이 필요 없는 이 한마디
 - 중요한 것은 감성을 전하는 것! '이론화하는 것'이 반드시 효율적인 것은 아니다.
14 만나러 가는 편이 빠르잖아!
 - '직접 이야기 하는 것'과 '메일로 전하는 것'의 장단점을 잘 생각해서 효율적으로 사용하자.
15 알고 있다니까요!
 - 상대방이 지겹게 무언가 또 이야기하려 할 때는 자신감을 가지고 "알고 있습니다!"하고 단언해버리자

프로젝트 4. '꾸물꾸물하는 시간'을 없앤다
- '시간도둑'은 틈만 있으면 당신의 인격을 훔쳐간다
16 70퍼센트 주의
 - 완벽주의보다는 70퍼센트라도 좋으니 앞으로 나아가자.
17 내일 아침 일찍 무엇을 할까?
 - 전날에 준비를 해두거나 일정한 습관을 기르는 등 '일을 시작하는 데 시간을 허비하지 않을 궁리'를 해보자.
18 집어치워!
 - 일할 의욕이 나지 않을 때는 하던 일을 일단 멈추고 기분을 전환시키는 것도 효율적인 선택지다.
19 마츠이 히데키, 그걸로 안 된다면 가메다 코우키
 - '스스로 컨트롤할 수 없는 일'에 대해서는 아무리 시간을 투자하더라도 낭비다.
20 남의 말에 상처받지 않고 명상 하기
 - 시간도둑에게 시간을 빼앗길 것 같은 때는 그 시간이 자신의 것이 되고 있는지 잠시 생각해보자.

[느낌점]
오늘부터 미루고 있는 일을 찾아보고 중요성과 시급성을 따져서 하나씩 클리어해 봐야겠네요.
작은 시작부터 실행에 옮겨야겠죠. 요즘 일본인이 쓴 책을 많이 일게 되네요. 시간관념이 투철하다는 생각을 많이하게 되고 한편으로는 너무 각박한 세상을 산다는 느낌도 강하고.
하지만 나만의 스타일로 흡수하는게 우선 중요하다고 판단이 서네요. 필요한 부분, 효과가 클거 같은 부분을 먼저 습관화할 필요는 있어 보입니다. 나와 타인이 같이 사는 사회에서 서로거 피해를 주지 않는 범위에서 활용되어야겠지요. ^^

*. 메라비안의 법칙 : 한 사람이 상대방으로부터 받는 이미지는 말의 내용으로 7%, 나머지 93퍼센트는 그 사람의 외견이나 목소리로 결정된다.

씨게이트 ‘프리에이전트 고’ 출시

요즘 외장 하드를 안가지고 없는 사람들이 없을 정도로 생필품중에 하나인 것에 틀림없죠. 특히 개발자들에게는..
그러던 중에 씨게이트가 외장형 하드디스크 프리에이전트 고 출시를 기념하여 블로터 및 블로거 여러분들을 위한 아주 특별한이벤트를 기획했답니다.
그래서 필요해서 응모를 해 봅니다.

1. 필요한 사유는
요즘 들어서 기획/개발 문서 작성에 필요한 다양한 자료들, 동영상, 사진파일 등의 멀티미디어데이터들을 많이 관리하는 저로선 외장 하드를 필수적으로 사용합니다. 그런데 기존의 외장 하드는 용량에서 한계가 있고 사용한지 5년이 지나 사용 만료 기간이 다가와서 불안하기도 하고 해서 새로 하나 필요하게 되었습니다.
특히나 개발자들에게는 없어서는 안될 중요한 저장 도구이죠. 개발 프로젝트별 소스와 산출물...기존 개발자들이라면 여러개의 프로젝트를 수행했을 것입니다. 이것이 자신의 포트폴리오가 되어 항상 자신의 분신처럼 외정하드에 저장해서 관리한답니다.

2 채울 내용은

  • 과거 수행했던 프로젝트들(이것만 해도 20GB가 넘을 것이입니다. ^^)
  • 개인적으로 개발한 소스들
  • 가끔 사진과 동영상 파일들

3. 이번 이벤트에 참여하게된 계기
기존 하드의 성능상 사용 기간상 바꿀때가 되어서 이것 저것 살피다가 디자인과 가벼운 무게(160g), 동기화 등의 장점을 가진 씨게이트의 제품을 선물로 받기 위해서 ^^
선택 받지 못하면 하나 사야겠지만요 ^^

4. 내가 생각하는 씨게이트는

  • 청계천 조립 PC가 활개치던 시기, 즉 하드디스크라는 제품군이 나오는 초기부터 이름을 떨치며 현재까지도 상당히 인정받는 기업
  • 대학생때 조립피시 사용할때 익히 들어본 기업
  • 돈을 조금 더 주더라도 안정적인 브랜드를 사용하는 사람들이 선택하는 기업

세련된 디자인과 충격 보호기능, 동기화 등의 좋은 개념의 외장 하드가 나와서 관심이 간다..
브랜드도 있고...
관심있으신 분들 한번 응모나 구매해도 좋을 듯 합니다.

 

폐지로 만든 다이어리

환경 재단에서 주최한 재활용품으로 다이어리 만드는 행사에 다녀왔습니다.
소재는 폐지를 믹서기에 갈아서 풀 먹여 만든 재활용 용지에다 자기만의 다이어리를 만들어 보았습니다. 끝에는 니스를 발라서 찢어지는 것을 방지했답니다.
폐지로 만든 다이어리치곤 괜찮죠?

제목은 라이프 로그로 정했답니다.

태그 :

Apache Tomcat Connector(1.2.27) released(04 November 2008)

원따끈 따끈한 뉴스입니다. ^^
Apache Tomcat team이 Apache Tomcat Connector(1.2.27)을 릴리즈 했다는 군요. 자세한 릴리즈 내용은 아래에 정리했습니다. 바로 설치하셔서 운영 서버의 버전을 업 하세요. 오픈 소스는 생명은 최신 소스를 반영하는 것, 또한 성능 이슈 해결책 중에 하나라는 거 아시죠? ^^

1. 주요 특징들

  •  Watchdog Thread for Periodic Tasks : 독립된 Watchdog 쓰레드를 설정해서 요청 처리 프로세스와 독립적으로 Task를 수행하여 성능 개선을 꾀함
  • Connection Probing : 커넥션이 사용중인지 아닌지를 기존에는 새로운 커넥션을 수립을 통해 알수 있었지만 지금은 Watchdog Thread를 통해 알 수 있다. 그리고  ping_mode를 통해 정기적인 커넥션 탐색이 가능함
  • Mount Extensions : worker parameter per mount 가능
  • Improved IIS support : multiple IIS 6 application pools with the ISAPI redirector 사용 가능
  • Enhanced Status Worker :AJP workers의 상태 정보를 다양하게 볼 수 있음
  • Miscellaneous Improvements
     . session stickyness indicator 설정 지
     . socket_connect_timeout 설정 지원
     . connection_acquire_timeout 설정 지원

2. 설치 방법

  •  ~tomcat-connectors-1.2.27-src/native>./configure --with-apxs=/home/k2/server/httpd-2.0.63/bin/apxs
  • ~tomcat-connectors-1.2.27-src/native>make
  • ~tomcat-connectors-1.2.27-src/native>make install

3. 기타

  •  자세한 정보 : 여기
  •  다운로드 커넥터 : 여기

 

Services, Platforms 그리고 Ecosystems

현재 온라인 웹 서비스를 구축하는데 많은 변화가 있어 왔습니다. 그래서 이러한 부분을 정리할 필요가 있어 정리해 보았습니다.
물론 생각이 다를 수 있어 제 생각만을 정리해 봅니다.

1. Service
 - 브라우저 기반의 사용자의 요청에 의해 해당 웹 서비스를 데이터 Repository에서 가져와서 요청 이벤트에 응답하는 형태로 이루어짐
 - 대부분의 서비스가 여기에 해당됨

2. Multichannel service
 - One Source - Multi Use의 대표되는 아키텍처로 브라우저 기반 이외에 휴대폰이나 스마트폰 등의 모바일 기반에서 제공되는 형태를 말함.
 - Desk 기반의 설치 응용 프로그램, IPTV에도 서비스를 제공함

3. Open API
 - 서비스 공급자가 다채널을 위한 인터페이스를 구축하여 서비스를 위한 정보와 기능을 압축하고 확장 가능한 방식으로 생산 비용을 배포함
 - Contents, Personal, Service Data(서비스의 정보와 기능들로 구성)들을 API라는 인터페이스를 가지고 상호 연동을 통해 시너지를 내는 모델로 발전함
 - 협의의 사용자의 참여와 사용자 중심의 전략이 서비스에 주입됨

4. Platform
 - 표준 기반의 확장성이 보장되는 형태의 인터페이스를 제공함
 - 개발자와 사용자 모두 타인이 만든 응용 프로그램(API를 활용하여)을 합법적으로 사용하여 자신만의 서비스를 가공할 수 있음
 - 서비스, API, API 가공할수 있는 플랫폼 환경 제공
 - 체계적인 문서, 코드 샘플, DEMO등의 매뉴얼 제공

5. Ecosystem
 - Contents, Personal, Service Data(서비스의 정보와 기능들로 구성)들을 서비스 구성자가 쉽게 연동할 수 있는 플랫폼 제공
 - 개발자와 사용자가 자신만의 Open API와 Platform을 가지고 서비스를 구축하고 운영하며, 사용자들은 트래픽과 경험, 가치를 얻고 서비스에 광고를 수익모델로 하나의 서비스 생존 사이클을 운영할 수 있는 서비스 시스템
 - 다양한 디바이스에서 Multichannel service도 가능