블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'데꾸벅'에 해당되는 글 194건

  1. 2009.05.04 포토샵 강좌 : +20 PSD를 HTML/CSS로 컨버팅하기
  2. 2009.05.04 소용돌이 및 꽃 브러쉬 (Swirls and Flowers Brush) 29
  3. 2009.05.04 Ajax Framework 분석
  4. 2009.04.28 CSS로 Table 디자인 하기 15
  5. 2009.04.27 CSS Hack in IE8 9
  6. 2009.04.16 물감번짐 효과 포토샵 브러쉬 및 텍스쳐 57
  7. 2009.04.16 고해상도 먹물튀기기 포토샵 브러쉬 6
  8. 2009.04.16 간결하면서도 우아한 명함디자인 30선
  9. 2009.04.16 더 나은 디자이너가 되기 위해 도움이 되는 튜토리얼 사이트 50선
  10. 2009.04.15 웹표준 UI/UX 그리고 프리젠테이션
  11. 2009.04.10 HTML5 Gallery 4
  12. 2009.04.08 온라인 메모장 6
  13. 2009.04.07 Extjs Core 3.0 Beta 릴리즈 4
  14. 2009.04.06 jQuery Grid Plugin : jqGrid 16
  15. 2009.04.04 프리젠테이션 개발자에게 유용한 14가지 Cheat Sheets
  16. 2009.04.04 14가지 인상적인 포토샵 타이포그라피 효과 2
  17. 2009.03.31 Examples Of ExtJS in Action 2
  18. 2009.03.31 Character Set과 Encoding 이해하기
  19. 2009.03.31 extjs RowAction 붙이기 1
  20. 2009.03.22 AJAX & UI 강의자료 8
  21. 2009.03.17 프로페셔널 프론트엔드 개발자에게 필요한 기술
  22. 2009.03.04 UX 디자인 기획은 원맨쇼가 아니다 6
  23. 2009.01.29 Apache expires 설정으로 브라우저 캐시
  24. 2009.01.21 extjs 2.2의 IE에서 iframe document load 버그패치
  25. 2009.01.20 홈페이지 보안 강화 도구(CASTLE) 보급 안내 1
  26. 2009.01.19 2009년 유행할 웹디자인 트렌드 14
  27. 2009.01.14 ext의 border-layout과 같은 jQuery UI.Layout Plugin
  28. 2009.01.12 jQuery pageSlide
  29. 2009.01.12 Web 2008 통계
  30. 2009.01.12 Javascript로된 Wiki Parser : Creole 1.0

프로젝트를 하다가 보면 여러명의 퍼블리셔들과 작업을 할때가 있다. 웹디자이너가 작업해놓은 PSD 작업물을 HTML/CSS로 분리하여 작업하는걸 보면 답답함을 감추지 못할때가 있는데 역량차이에 의한 문제도 있겠거니와 작업방식의 차이가 많이 난다는것을 느끼곤 했는데 포토샵파일을 HTML/CSS로 만들어주는 사이트가 있어서 소개해 볼까 한다.

원문사이트 : dzineblog




1.  The Design Lab: PSD Conversion


2. From PSD to HTML, Building a Set of Website Designs Step by Step


3.  Coding: Design Lab TV Styled Layout


4. PSD to CSS/HTML in Easy Steps - Part 1


5. Slice and Dice that PSD


6.  Converting a Photoshop Mockup: Part Two, Episode One


7.  Build a Sleek Portfolio Site from Scratch


8. Portfolio Layout - Learn To Code It


9. Converting a Design From PSD to HTML


10.  How to Convert a PSD to XHTML


11. How to Convert PSd to Html


12.  Creating a CSS Layout from scratch


13. PSD > HTML/CSS


14. Encoding a Photoshop Mockup into XHTML & CSS


15.  Css Template Tutorial


16. Portfolio Layout 4: The Code


17. Tutorial Coding a Layout


18.  Converting a Photoshop Mockup


19.  Killer site - From Illustrator to Xhtm to Drubal


20.  From PSD to HTML


21.  Coding a Car Sales Layout


Post by 넥스트리소프트 데꾸벅(techbug)
, |

최근 들어 포토샵 브러쉬를 상당히 많이 올리게 되네요~
가끔씩 여성스런 웹사이트나 간지사이트 만들때 백그라운드나 텍스쳐로 사용해도 될듯 합니다.

출처 : Best Design Option
사용제한 : 비상업적 용도로만 사용하셔야 합니다. (non-commercial OK?)








Post by 넥스트리소프트 데꾸벅(techbug)
, |

Ajax Framework 분석

Scripter/AJAX / 2009. 5. 4. 11:45


ajax framework 선택시 Matt Raible씨가 그의 고객에게 했던 분석을 그의 블로그에 포스팅 하였다. 항상 ajax framework선택시 어떠한 프레임웍을 선택할지 고민이 많이 된다. 재미있는것은 ajaxian 포스팅에 보면 다트판을 그려놓고 선택한다는 농담이.. ㅡ.,ㅡ;

여러분도 이 다트판을 돌려 선택하나요? 사실 일전에 데꾸벅이 포스팅한 ajax framework고르는법 글도 사내 프로젝트에 사용할 프레임웍을 고민하다 만든 포스팅이였는데 같은 고민을 하는데도 질이 틀리네요.. 한번씩 참조하시는것도 괜찮을듯 싶어 포스팅합니다.

아래표는 Matt Raible씨가 모든 프레임웍으로 직접 프로토타입형태의 애플리케이션을 만들어보고 중요한 기준이 되는 특징들로 도식화한 것입니다.

참조 : ajaxian, indeed, google doc




아래 그래프는 결론적으로 모든 ajax framework들이 웹애플리케이션을 만들기에 손색이 없었다고 합니다. 거의 대부분의 프레임웍들이 이제는 거의 비슷하게 성능평가가 나오고 있습니다. 정말로 다트판을 던져 고른다는 농담이 그냥 나온 얘기는 아니였네요.

아래는 각각의 프레임워크를 동일 가중치를 주어 평가한 그래프입니다.



여기서 비교된 프레임워크는 가장 인기있는 프레임웍을 대상으로 했다고는 하지만 jquery는 빠져있네요.

 

indeed 에서 검색한 결과 위 그래프와 같이 jQuery가 짧은 기간에 급상승하고 있네요.. 여기서는 dojo, yui, gwt, extjs, jquery,prototype.js까지 비교하고 있습니다. qooxdoo나 mootools는 빠져있네요 ㅡ.,ㅡ;


대부분의 ajax framework들이 prgressive enhancement하다고 합니다.  점점더 많은 요구와 사용자 committer들, 다양한 플러그인들, 각 프레임웍마다의 기능들을 서로 보완해 나가고 있습니다.
얼만전 ext3.0 core beta에서와 마찬가지로 서로의 장단점들을 보완해 가며 서서히 하나의 완전한 프레임웤들로 자리매김 하고 있네요~

하나의 프레임웍만 제대로 익힌다면 다음 프레임웍은 떡 주물듯이~ 가능할까요?









'Scripter > AJAX' 카테고리의 다른 글

CSSHttpRequest  (0) 2008.11.12
HTTP Header에 대하여  (0) 2008.11.08
AJAX에서 즐겨찾기와 뒤로가기를 다루는 방법  (0) 2008.09.24
100라인 Ajax Wrapper  (0) 2008.04.19
어떤 AJAX Framework를 선택할 것인가.  (0) 2008.03.14
Post by 넥스트리소프트 데꾸벅(techbug)
, |


그룹웨어형식의 웹애플리케이션을 퍼블리싱하다가 보면 테이블들을 많이 사용하는데
코딩할때 마다 테이블들의 스타일시트들을 생성해줘야 할때가 있다.
귀찮아서 만들어놓은 CSS를 사용하고는 하는데 혹시나 괜찮은 CSS를 찾아보다가 CSS TABLE GALLERY를 찾았다.

CSS하나 하나 다운로드 받아 처리하기 귀찮아서 정리해서 올려본다.

[마크업]

<table summary="This table lists all the flights by XYZ Air leaving London today.">
  <caption>Flight Schedule</caption>
  <thead>
    <tr>
       <th id="fn" scope="col">Flight Number:</th>
      <th id="fr" scope="col">From:</th>
      <th id="to" scope="col">To:</th>
      <th id="dp" scope="col">Departure:</th>
      <th id="ar" scope="col">Arrival:</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">Total: 3 flights</td>
    </tr>
  </tfoot>
  <tbody>
  <tr>
    <th scope="row">BA 3451</th>
    <td>Heathrow</td>
    <td>Nuremberg</td>
    <td>19:20</td>
    <td>19:50</td>
  </tr>
  <tr class="odd">
    <th scope="row">BA 1254</th>
    <td>Luton</td>
    <td>Alicante</td>
    <td>19:40</td>
    <td>20:50</td>
  </tr>
  <tr>
    <th scope="row">LH 331</th>
    <td>Heathrow</td>
    <td>Hamburg</td>
    <td>20:00</td>
    <td>20:20</td>
  </tr>
  </tbody>
</table>




[CSS]

table {border-collapse: collapse;border: 1px solid #38160C;font: normal 11px verdana, arial, helvetica, sans-serif;color: #F6ECF0;background: #641B35;}
caption {text-align: left;font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;}
td, th {border: 1px dashed #B85A7C;padding: .8em;color: #F6ECF0;}
thead th, tfoot th {font: bold 11px verdana, arial, helvetica, sans-serif;border: 1px solid #A85070;;text-align: left;background: #38160C;color: #F6ECF0;padding-top:6px;}
tbody td a {background: transparent;text-decoration: none;color: #F6ECF0;}
tbody td a:hover {background: transparent;color: #FFFFFF;}
tbody th a {font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;text-decoration: none;font-weight:normal;color: #F6ECF0;}
tbody th a:hover {background: transparent;color: #FFFFFF;}
tbody th, tbody td {vertical-align: top;text-align: left;}
tfoot td {border: 1px solid #38160C;background: #38160C;padding-top:6px;}
.odd {background: #7B2342;}
tbody tr:hover {background: #51152A;}
tbody tr:hover th,
tbody tr.odd:hover th { background: #51152A;}

 

소스다운로드 :




















Table designs
Design Name Author Country Comment Download
Total 98 designs
TagBox TagBox Deutschland Table design based on the fresh TagBox style. Download
Maniac Merchants Marten Willberg Germany A Georgia headline with a green-blue body. Download
Acuity Design Style Acuity Internet Marketing Brazil Black Style, with smooth grey and green elements. Download
Aqua Matthias Richter Germany Have fun! Download
Smooth Taste Thomas Opp Germany Smooth style with my favourite colours. Enjoy! Download
Stainless Steel Stenli Bulagaria Use cellspacing="1" for better feel. Download
Sky is no heaven Michael Schmieding Germany My new Design colors. Download
Foggy Country Straussennest South Africa Foggy Country - Green Trees planted on brown sugared ground. Download
Blue gradient Mihalcea Romeo Romania Nice table design based on a very subtile blue gradient. Download
desert Marc Bodon Germany brown, red, grey and white... simply smooth ;-) Download
orange and grey Christoph Plessner Germany Download
serif my love Frank Schnappenberger Germany A clean and simple table design with serif font Download
REDandBLACK Martin Paffenholz Germany Style like our website. Best viewed in Mozilla Firefox. Download
UV Green Kunimichi Takahashi USA Let me know what you think. Download
BakeSale admin Matti Putkonen Finland Table model used in BakeSale shopping cart admin interface. Download
The OC Rodolfo Marin Chile Table based in the color table from one of my latest design, overclockers.cl Download
blue like ice Erik Ginnerskov Denmark Nice and clean. No fancy stuff. Download
Dark Night Michael Schmieding germany That's my design with my favorite colors. I hope you like it. Download
mediagroove mayumi takami Japan i like this type of design. Download
chives' tables chives Germany Clean and spicy design from chives-team Download
table red-white Jens Germany Inspired by the original 'Assischale' and dedicated to 'Kollesche' ;-) Best wishes to everybody! Download
Candy Stefan Bihl Germany Hi, I hope this CSS File is not to pink ;-) Regards Stefan Download
Simple and Clean Leandro Pessoa Brazil My model! ;) Download
Blue Newton de Góes Horta Brasil Minimalist design in blue Download
Infected Infected-FX Mexico Minimal and clean design for next tutorial, mooflex inspired colors, icons by fam fam fam. ^^ Download
Azulon Joorge Epunan Chile Just playing with the ccode. I like the blue, and how it combines with other elements Looks pretty nice. Download
Casablanca Rodrigo Castilho Galvao Ferreira Brazil Inspired by Casablanca Web Standards Template existing in Template Design Competition, WESTCIV. Download
Salmon Ricardo Aroca Chile Orange colors. Style inspired in salmon, the main product of my city, Puerto Montt. Some advanced selectors (hover, after, before) and properties (content). Best viewed in modern browsers. Download
Clear Blue Robert Hartl Germany It's a clear but individual white-blue design with subdued hover-effects for modern browsers. Download
Blix Theme Newton de G—es Horta Brasil Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts Download
iCubed Lar Veale Ireland Nice clean table with small gradient images. Row hover in Firefox gives another gradient effect. Download
Jacob Emiliano ESB Brasil Web Usability useit.com: usable information technology Download
Go Jamaica Hern‡n Argentina Jamaica, A Good place! Download
Poetry For Browser Monika Thon-Soun Austria Code is Poetry. Internet Explorer you can't show us arrows and hover effects. You can't show us correct borders. It looks like that you can't understand poetry. Don't be jealous of browsers. It is simply:Learn to be a browser and everything is going to be alright. Download
Red Body Jarek Karczewski Poland Red Body is my first style. I hope you like it :-) I'll try to do another style, maybe ... Enjoy Download
Like Adwords Cleiton Francisco Brazil A simple style like Google Adwords list. Download
Pretty In Pink Viktor Persson Sweden Smooth, pretty and pink. Best viewed in Mozilla Firefox. Download
Two times table Stu Nicholls England A very basic table for all Internet Explorer users but something VERY different for understanding browsers :o Hope you like it. Download
Brazilian taste DvD Franco Brazil Pleasant design with happy colours, readable data and a bonus: a little effect playing with the caption text and image background. Download
bluish Stefan Herzig Germany Blue style with a hint of Amiga Download
Second Revolution Henrique Costa Pereira Brazil Flexible glass button style. Feel free to resize the font! Download
BluInBlock JuanMa Argentina It is a good blue style that contains block properties with any background images. I hope you like it :) Download
pop.pop.star Timo Wirth Germany Inspired by Andy Warhol, this bold and simple table emphasizes the table rows (rather than the columns). Download
Tabular tables Stu Nicholls England A simple table using a little border art for mouseovers. Download
The Sky Is Blue Eric Pui Malaysia The sky is blue... Download
Sea Glass Stephanie Leary US Subtle and green. Download
Orange Brownie Cody Lindley US Nice idea, the site that is. Download
Blaugrana Choan C. G‡lvez Spain Alternating row and link colors. Enhancements (hover, image replacement) for modern browsers. Download
Soft Table Newton de G—es Horta Brazil A simple table style with the use of the soft brown color Download
Innocent Flowers Christine Kirchmeier Germany Simple, friendly design in blue Download
Shades of Blue Velizar Garvalov Bulgaria Simple blue design with some :hover effects Download
Gmail scrolling Mauricio Samy Silva Brazil A look-alike theme with fixed height for the table container DIV and vertical scroll bar. There is an :hover behavior on caption background image. Download
Shades of Purple Demetrius Francis Bahamas Basic styles with a purple scheme. Download
Turkish Delight Paul Brownsmith UK Raspberry shades with chocolate rollovers for compliant browsers. Clean, clear and choco-sweet. Download
Grayed Out Terence Ordona US A simple look and feel that improves with the quality of your browser's CSS support. Shows possible use of a la Excel styling. Download
Nimbupani Divya Singapore A minimalist style that explores the relative weights of the lines that differentiates one element from the other. The same design elements has also been used on this site http://jflickruploader.blogspot.com Download
Trekkish Violets Patryk Zawadzki Poland Well... a bit trekkish I guess (but not really inspired by holodeck). Blues and violets here and there. Looks best when viewed in Firefox. Download
Golden style Michael Horn Germany Golden coloured style, with hover effects in modern browsers (Firefox, Opera). Download
Oranges In The Sky Krasimir Makaveev Bulgaria Just a simple table design with orange and blue links! Download
Rockstar Jens Wedin Sweden Simple classic design with advanced stuff for standard compliant browsers. Download
Greyscale Two Plus Four UK Minimalist design in black, white and shades of grey. Resizeable text and CCS2 enhancements for those that know. Download
Coffee with milk Roger Johansson Sweden Clean, no-nonsense design with a latte-ish colour palette. Some extra design features in modern browsers. Download
Clean and crisp Mats Lindblad Sweden Clean and Crips table style, with a little MS feel to it. Although it works best in Firefox. Download
classic mitch uk no comment, just some damn good table styling! Download
Winter Blues Gunta Klavina Latvia Blue pastel coloured style. Download
Green Life Vitaly Friedman Germany A Fresh, Warm and Readable Table Download
Breathing Space Kevin Leitch UK Lots of padding on the default design. Contains enhancments for selector-enabled browsers. Download
Warm Fall Mya Leigh USA Warm fall colors with easy to read text. Download
iTunes John Lawrence UK Table design based on Apple's iTunes software. Download
MintGreen Taimar Teetlok Estonia Warm and friendly mint-green presentation. Download
Heaven is Closer Niko Neugebauer Portugal A simple style that improves with the quality of your browser's CSS support Download
Table on a Table C Montoya USA Pastel blue and yellow, and a nifty background. Behaves decently in IE. Images are table_oil2.jpg and table_oil3.jpg. Download
Cygenta Tim Baker Canada Monospaced with a painful palette. Download
Spread Firefox! Thierry Koblentz USA Best experience in Firefox! ;-) Download
Table Sprite Parker Torrence USA This design employs a single graphic for both the caption title and the background effects. Download
Muted Dan Champion Scotland Grey and beige, clean and simple. Minimal use of CSS2 fancy bits like :after and tr:hover. Download
Chocolate Phil Thompson UK A simple table style with a sexy chocolate-inspired colour scheme. Lots of room for the table data to breathe. Download
Smilies AndrŽ Mendona Brasil Green table with alpha transparency, lots of smilies and shadows. Download
Inset cells Mauricio Samy Silva Brazil A table with inset cells and the use of adjacent-sibling selectors and border-spacing propertie for compliants browsers. Download
Shaded Colour Erik A. Drabl¿s Norway Dark table design using alternating link colors. Download
Revolu‹o Etc Henrique Costa Pereira Brazil Nice warm coloured table with small, but resizable, text. Download
Lab Report Louise Dade UK Clear, simple and informative data display for a scientific paper. Includes a background image, download icon and a "faux alpha transparency" rollover effect (a tiny tile with every other pixel transparent). Fully commented CSS file. Download
MSIE hover Mirek Kom‡rek Czech Republic Really simple one with hover in MSIE (using JavaScript via expression()) Download
Kashual Khaki Shane Shepherd USA You'll look great in Kashual Khaki! Be ready for fun when your lookin' snappy in khaki! Download
Orange You Glad Randy Peterman USA There is an image required for standards compliant browsers to get a 'bonus' download arrow for the download links. Download
Matrix? Christian Roque G. Peru using black and green, remove the red and bigger letter. Download
10 minutes Richard Grevers New Zealand Minimalist, using separated borders and spacing with a four-colour pallette. Download
Spearmint tints Ben Boyle AUS Simple coloured style with a minty theme. Download
Table structure Ben Boyle AUS Contrasts headings and cells, displays heading scope and summary (where supported). Download
City Mouse Janie Hadsel USA A tab with image text is placed in the caption background; caption text is hidden, but remains accessible to non-graphical browsers and screen readers. A simple table background image is dressed up by layering a transparent gif placed in the odd table rows. Download
Alpha transparency Mauricio Samy Silva Brazil Simulating alpha transparency with CSS Download
Grey suits you sir Stuart Colville UK Smart grey table with hover effect. Download
Cusco Sky Braulio AndrŽs Soncco Pimentel Perœ Soft blues like Cusco Sky Download
Roll Over from Down Unda Jason M Roehrig AUS A very sophisticated table showing many rollover effects on CSS2-abled browsers Download
Blue On Blue Glenn Slaven AUS A serif font table with a bit of colour to define the cells. Download
Chrome de la chrome Chris Heilmann UK Using gradient backgrounds to create chrome effects Download
Minimalist Chris Heilmann UK As minimal as you can get, only lines around the body cells Download
Plain old table Chris Heilmann UK Tried and true, boring grey table with a one pixel line Download
Post by 넥스트리소프트 데꾸벅(techbug)
, |

CSS Hack in IE8

Publisher/CSS / 2009. 4. 27. 11:20


유입경로를 분석하다가 IE8용 CSS Hack을 찾는 분들이 많아 정리합니다.
지난 포스트(CSS Hack을 정리)에 이어 Full-Browsing을 위해서 아래와 같이 몇가지만 알면 CSS-Hack에 대한 모든것을 아실수 있을 겁니다. 

/***** 선택자 Hacks ******/
/* IE 6 및 하위버전 */
* html #uno  { color: red }
 
/* IE 7 및 하위버전 */
*:first-child+html #dos { color: red }
 
/* IE 7 및 최신브라우저(IE8포함) */
html>body #tres { color: red }
 
/* 최신브라우저 (IE7제외, IE8포함) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 및 하위버전 */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
 
/***** 어튜리브트 Hacks ******/
 
/* ie6 및 하위버전 */
#once { _color:blue }
 
/* ie7 및 하위버전 */
#doce { *color: blue } /* or #color:blue */
 


참조 : Paul Irish's Blog

모든 IE에 똑같이 적용할때 추천하는 방법으로는 body에 클래스 선택자를 이용해서 다음과 같이 작성할수 있다.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->

다음과 같이 .ie처럼 만들어 준다. 위의 예제파일을 참조하세요 

div.foo { color: inherit;}
.ie div.foo { color: #ff8000; }

 

dbloom blog를 보면 다음과 같이 IE8에서의 CSS-Hack을 추천한다.

IE8 표준모드 Only:
.test { color /*\**/: blue\9 }

IE8을 포함한 IE버전
.test { color: blue\9 }








 

Post by 넥스트리소프트 데꾸벅(techbug)
, |
Post by 넥스트리소프트 데꾸벅(techbug)
, |



그라피티나 좀더 젊고 역동적인 사이트를 디자인 하다가 보면 먹물튀기기 효과나 화려한 그래픽을 원하는 경우가 많다. 이럴경우 사용하기 위한 포토샵 브러쉬를 공개한다.


0123456789101112131415161718192021222324


데꾸벅 주 : 저작권이 걸려있으므로 사용시 주의바랍니다.  상업적 용도로만 사용하지 않으시면 됩니다.











Post by 넥스트리소프트 데꾸벅(techbug)
, |


클라이언트에게 지속적인 관심을 가지게 하거나 알리기 위해 명함을 사용한다.
보통 명함들은 간결하게 만드는 경우가 있는데 간결하다고 평범한것이 아니다(Simplicity doesn’t equal plain)
데꾸벅이 명함디자인을 할때 참고했던 사이트에서 우아한 명함디자인 샘플 30개를 올려본다.

 

 










Post by 넥스트리소프트 데꾸벅(techbug)
, |


50 Sites That Will Help You To Become a Better Designer


이곳(dzineblog)에 가면 더 많은 디자인 리소스 정보와 지식들, 그리고 디자인시 영감을 제공할 사이트들을 제공하며,
디자이너의 스킬을 향상시키는 도움이 될만한 목적으로 디자이너들이 가장 많이 사용하는 디자인 리소스 목록들을 잘 정리해 놓았다.
작성자인 yugu는 초보디자이너들에게 항상 리스트업된 사이트를 시간될때 마다 둘러보는것이 도움이 된다고 말하고 있다.

데꾸벅 북마크에도 포함되어있는 사이트가 많은데.. 제대로 보지는 못했던거 같다..
더많은 공부가 필요할듯...





Site To Check For Quality Tutorials

1. PSD Tuts


2. Tutorial9

3. Pixel2life

4. Vector Tuts

5. PS Hero

6. PSD Fan

7. Good Tutorials

8. Photoshop Lady

9. Vectips

10. Veerl’s Blog

11. N Design Studio

12. Spoon Graphics

13. Go Media Zine

14. PSD Vault

15. HV Designs

16. Tutorial Dog

17. Tutzor

18. Photoshop Star

19. Photoshop Support

20. PSD RockStar








 

Design Forums To Join

1. Designers Talk


2. Graphic design forum

3. Sitepoint

4. Pixel2life Forum

5. Digital Point Forum








Community To Check

1. DepthCore


2. Behance Network

3. Humble Voice

4. Deviant Art

5. Carbonmade









Design Blogs To Follow

1. Smashing magazine


2. Design Melt Down

3. A list Apart

4. Noupe

5. Vandleay Design

6. Design Mag

7. Just Creative Design

8. David Dairey

9. Specky boy

10. Abduzeedo

11. WebDesgin Ledger

12. UX Booth

13. I Love Typography

14. Web Designer Wall

15. Bitbox

16. Designer Daily

17. Six Revisions

18. Web Designer Depot

19. 1st Web Designer

20. Fuel your Creativity


 


Post by 넥스트리소프트 데꾸벅(techbug)
, |

01 |  웹표준


 

 
[이미지출처 : 디자인정글]

    오페라 소프트웨어 웹 표준 커리큘럼 을 번역한 자료입니다. 시간나실때 한번씩 읽어 보세요~
    좋은 내용들이 많네요 

    웹표준커리큘럼의 소개와 차례

  

 

02 | 웹실무 프로젝트(웹표준 & UI/UX  개발 프로세스



[이미지출처 : 디자인정글]

 

    과정을 들으라는 내용이 아니라 커리큘럼을 살펴보면 어떠한 것이 프리젠테이션개발자에게 필요한 내용들인지
    확인할수 있습니다.
    요즘 프리젠테이션 개발자를 일컫는 User Interface에서 User란 단순 사용자가 아니라  
    시스템 vs. 솔루션,   
    개발자 vs. 개발자
    고객    vs. 개발자 등, 무수히 많은 개념을 포함하고 있습니다.
    이러한 이질적인 개념들을 통합(Integrate) 혹은 연계(Interface)하는것입니다.   

 

    "당신이 생각하는 디자인DESIGN이란 무엇입니까? 단순히 표현EXPRESSION인가요?
    그렇다면, 구조STRUCTURE는 고려하였는지요?"    
 

    OOO정글 아카데미 과정소개

 

  

데꾸벅, 피곤에 쩌든 어느저녁에.. 그냥 함 끄적여 보다..

 

 

 

 

Post by 넥스트리소프트 데꾸벅(techbug)
, |

HTML5 Gallery

Publisher/HTML/HTML5 / 2009. 4. 10. 20:18


아직 Editors Draft (2009년 4 월 8일) 중인 HTML5로 된 사이트를 한곳에 모아둔 사이트가 있어서 소개한다.
(데꾸벅 주: 헉 아직 Working Draft상태인줄 알았는데 이 포스트를 작성하다가 링크를 걸기위해 찾아갔더니만 Editor's Draft 상태이다. W3C의 고무줄 스케줄:로드맵 에 따르면 이미 권고안으로 확정되어야 하지만 최소한 Working Draft상태가 올해안에 안끝날줄 알았는데....  조만간.. HTML5로 또 한번 IT쪽이 떠들썩 하겠군~~~)

사이트 주소 : http://html5gallery.com/






구글크롬, IE8, 7, Firefox3, Opera 에서도 깨짐없이 잘 보이고 있다.
HTML소스를 열어보니 <section>, <nav>, <header> 태그들이 보이고 CSS는 3.0 스펙으로 처리되어 있다.
한가해 질때 각각의 사이트 소스를 분석해 보는것도 괜찮을듯 하다.




아래사이트는 HTML5 스펙으로 구성된 사이트들이다... 즐감 하시길...
http://www.tableless.com.br/
http://jacobrask.net/
http://willworkforart.net/
http://a.deveria.com/
http://www.codedread.com
http://www.thatstandardsguy.co.uk/
http://openscriptures.org/
http://www.thewatchmakerproject.com
http://theccaa.net
http://rebathoregon.com/
http://shepherd-interactive.com/
http://weston.ruter.net/
http://richclarkdesign.com
http://chipbarm.com
http://camendesign.com/
http://www.aneventapart.com/
http://www.uxlondon.com/
http://intertwingly.net/blog/

가까운 시일내에 데꾸벅 블로그도 HTML5 + CSS3로 도배를.. 크크~








'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |


미투데이를 하다가 온라인 회의나 아이디어를 정리할때 사용하면 좋은 사이트를 찾다.

http://linoit.com

어찌보면 레몬펜과 비슷할수 있으나 조금은 느낌이 틀린이유는 무엇일까?

데꾸벅 메모장으로 오시려면 이곳으로 오세요

Post by 넥스트리소프트 데꾸벅(techbug)
, |



ext3.0 베타버전이 릴리즈 됐다.
1.01a 버전부터 써오면서 라이센스정책을 쭈욱 지켜봤는데 이번 ext core 3.0는  MIT라이센스로 배포가 되었다.
즉 아무렇게 배포,수정이 가능하다는 얘기다.

현재 안정버전인 ext2.2나 그 이전 버전의 경우 core 파일이 obfuscating되어 있었던 반면 이번 ext3.0 Beta버전의 경우는 MIT정책에 따라 모든 소스가 친절하게도 주석까지 달려있어서 분석하기도 한층 쉬워졌다.
시간되시는 분들은 한번씩 까(?) 보시는것도 괜찮을듯... ㅎㅎ 데꾸벅 생각이였음돠~

 



 

JSONP 소스

Ext.ns('Ext.ux');

Ext.ux.JSONP = (function(){
    var _queue = [],
        _current = null,
        _nextRequest = function() {
            _current = null;
            if(_queue.length) {
                _current = _queue.shift();
       _current.script.src = _current.url + '?' + _current.params;
       document.getElementsByTagName('head')[0].appendChild(_current.script);
            }
        };

    return {
        request: function(url, o) {
            if(!url) {
                return;
            }
            var me = this;

            o.params = o.params || {};
            if(o.callbackKey) {
                o.params[o.callbackKey] = 'Ext.ux.JSONP.callback';
            }
            var params = Ext.urlEncode(o.params);

            var script = document.createElement('script');
        
 script.type = 'text/javascript';

            if(o.isRawJSON) {
                if(Ext.isIE) {
                    Ext.fly(script).on('readystatechange', function() {
                        if(script.readyState == 'complete') {
                            var data = script.innerHTML;
                            if(data.length) {
                                me.callback(Ext.decode(data));
                            }
                        }
                    });
                }
                else {
                     Ext.fly(script).on('load', function() {
                        var data = script.innerHTML;
                        if(data.length) {
                            me.callback(Ext.decode(data));
                        }
                    });
                }
            }

            _queue.push({
                url: url,
                script: script,
                callback: o.callback || function(){},
                scope: o.scope || window,
                params: params || null
            });

            if(!_current) {
                _nextRequest();
            }
        },

        callback: function(json) {
            _current.callback.apply(_current.scope, [json]);
            Ext.fly(_current.script).removeAllListeners();
            document.getElementsByTagName('head')[0].removeChild(_current.script);
            _nextRequest();
        }
    }
})();


 

 

 JSONP를 이용한 Flickr이미지 가져오기

<script>
Ext.onReady(function() {
    var resultTemplate = new Ext.Template.from('result-template');
   
    var updateResults = function(data) {
        Ext.fly('resultset').update('');
        Ext.each(data.items, function() {
            this.src = this.media.m;
            resultTemplate.append('resultset', this);
        });
    }
   
    Ext.get('search-form').on('submit', function(ev) {
        ev.preventDefault();
        Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
            callbackKey: 'jsoncallback',
            params: {
                format: 'json',
                tags: Ext.fly('search-value').dom.value,
                tagmode: 'all',
                lang: 'en-us'                           
            },
            callback: updateResults
        });
        return false;
    });
})
</script>

 

<form id="search-form" action="#">
    <input type="text" value="ExtJS, Screenshot" id="search-value">
    <button type="submit" id="search-button">Search</button>           
</form>

<div id="resultset"></div>

<textarea id="result-template" style="display: none">
    <div class="result">
        <div class="header">
            <h4>{title}</h4>
            <h5>{author}</h5>
        </div>
        <img src="{src}" title="{title}">
    </div>
</textarea>



 

 jQuery를 이용한 Flickr이미지 가져오기

  $.getJSON(
    "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
      $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).attr("onclick","location.href="+item.media.link).appendTo("#result");
        $(document.body).unblock();
      });
    });

 

 참고로 Rhio.Kim's Extjs 2.2.1 Class Diagram

 

'Scripter > EXTJS' 카테고리의 다른 글

Ext js 틀고정 그리드  (1) 2009.11.15
Ext.Updater 깜빡거림 방지  (0) 2009.05.06
Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

jQuery로 프로젝트 수행중 extjs의 grid기능을 맘껏 쓸수 없을까 하다가 데꾸벅! jqGrid라는 아주 좋은 녀석을 발견하였다.

여러가지 테마를 사용할수 있지만 구미에 맞도록 CSS를 바꿔 보았다. extjs의 경우 UI자체를 수정하기가 어려운 반면 이녀석은 상당히 수월하게 바꿀수 있었다.

소스다운로드 :





HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>서학리조트 컨텐츠</title>
<link rel="stylesheet" type="text/css" href="style/css/contents.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/css/grid.css" media="screen" />
<script type="text/javascript" src="style/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="style/js/jquery.jqGrid.js" charset="utf-8"></script>
<script type="text/javascript" src="style/js/contents_04.js"  charset="utf-8"></script>
</head>
<body>
    <table class="tbl_tit02"><tr><td>담보 사항</td></tr></table>
    <div class="gridJ" style="width:780px"><table id="gridList" class="scroll" ></table></div>


    <div id="rsperror" title="서버에러나오는곳"></div>

 


    <input type="button" value="선택된Row 데이터가져오기" id="a1" />
    <input type="button" value="Row삭제" id="a2" />
    <input type="button" value="마지막Row추가" id="a3" />
    <input type="button" value="id가 13인 Row선택하기" id="a4" /><br />
    <input type="button" value="tax컬럼 숨기기" id="a5" />
    <input type="button" value="tax컬럼 나타내기" id="a6" />

    <input type="button" value="id가 13 에디팅하기" id="a7" />
    <input type="button" value="저장" id="a8" />
    <input type="button" value="취소" id="a9" /><br />

    <input type="button" value="header값 스타일변경" id="a10" />
    <input type="button" value="셀값 스타일변경" id="a11" />
    <input type="button" value="데이타초기화" id="a12" />
    <input type="button" value="그리드 width/height조절" id="a13" /><br />
   
    <input type="button" value="HTML 테이블을 그리드화하기" id="a14" />
</body>
</html>




js file

var lastsel3;

$(document).ready(function(){

    $("#gridList").jqGrid({
        url:'server.json',
        mtype: 'GET',
        datatype: "json",
        colNames:['인벤토리','날짜', '고객', '수량','세금','합계','비고'],
        colModel:[
         {name:'id',index:'id', width:100,align:"center",key:true},
         {name:'invdate',index:'invdate', width:120,editable:true,sorttype:"date",formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"}},
         {name:'name',index:'name asc, invdate', width:100,editable:true,editoptions:{size:"20",maxlength:"30"}},
         {name:'amount',index:'amount', width:100, align:"right",editable:true,editable:true,editrules:{number:true,minValue:100,maxValue:350},formatter:'currency',formatoptions:{thousandsSeparator:","}},
         {name:'tax',index:'tax', width:100, align:"right",editable:true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
         {name:'total',index:'total', width:100,align:"right",editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
         {name:'note',index:'note', width:150, sortable:false,editable:true,edittype:"textarea", editoptions:{rows:"1",cols:"20"}}
        ],
        rowNum:30,    <-- 가끔씩 이넘이 말썽부릴때가...  -1로 해놓으면 가져온 데이타 모두 뿌려줍니다
        height:278,
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        multiselect: false,//앞에 체크박스처리
        multikey: "",//multikey: "ctrlKey/shiftKey",
        editurl: "server.json",
        /*onSelectRow: function(id){  //row가 선택되었을 경우
      if(id && id!==lastsel3){
       jQuery('#gridList').restoreRow(lastsel3);
       jQuery('#gridList').editRow(id,true,pickdates);
       lastsel3=id;
      }
     },*/
        /*jsonReader: {//스크롤할때마다 가져오기
      repeatitems : true,
      cell:"",
      id: "0"
     },*/
       afterInsertRow: function(rowid, aData){
         switch (aData.name) {
          case 'Client 1':
           jQuery("#gridList").setCell(rowid,'total','',{color:'green'});
          break;
          case 'Client 2':
           jQuery("#gridList").setCell(rowid,'total','',{color:'red'});
          break;
          case 'Client 3':
           jQuery("#gridList").setCell(rowid,'total','',{color:'blue'});
          break;
          
         }
        },
        loadError : function(xhr,st,err) {
         jQuery("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
        },
        imgpath: 'style/grid'
    });

    $("#a1").click( function(){
     var id = jQuery("#gridList").getGridParam('selrow');
     if (id) {
      var ret = jQuery("#gridList").getRowData(id);
      alert("id="+ret.id+" invdate="+ret.invdate+"...");
     } else { alert("Row를 선택해주세요");}
    });
    $("#a2").click( function(){
     var su=jQuery("#gridList").delRowData(12);
     if(su) alert("id가 12인 Row삭제"); else alert("이미 지워졌삼~");
    });
    $("#a3").click( function(){
     var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
     var su=$("#gridList").addRowData(99,datarow);
     if(su) alert("마지막Row추가 성공- 서버쪽 업데이트처리해주세요"); else alert("처리가 되지 않았음.");
    });

    $("#a4").click( function() {
        $("#gridList").resetSelection();
     $("#gridList").setSelection("13");
    });

    $("#a5").click( function() {
     $("#gridList").hideCol("tax");
    });
    $("#a6").click( function() {
     $("#gridList").showCol("tax");
    });

    jQuery("#a7").click( function() {
     jQuery("#gridList").editRow("13");
     this.disabled = 'true';
     jQuery("#a8,#a9").attr("disabled",false);
    });
    jQuery("#a8").click( function() {
     jQuery("#gridList").saveRow("13");
     jQuery("#a8,#a9").attr("disabled",true);
     jQuery("#a7").attr("disabled",false);
    });
    jQuery("#a9").click( function() {
     jQuery("#gridList").restoreRow("13");
     jQuery("#a8,#a9").attr("disabled",true);
     jQuery("#a7").attr("disabled",false);
    });

    jQuery("#a10").click( function() {
     $("#gridList").setLabel("tax","Tax Amt",{'font-weight': 'bold','font-style': 'italic'});
    });
   
    jQuery("#a11").click( function() {
     $("#gridList").setCell("12","tax","",{'font-weight': 'bold',color: 'red','text-align':'center'});
    });
   
    jQuery("#a12").click( function() {
     $("#gridList").clearGridData();
    });

    jQuery("#a13").click( function() {
     $("#gridList").setGridWidth(500);
     $("#gridList").setGridHeight(400);

    });

    jQuery("#a14").click(function (){
     tableToGrid("#htmlGrid");
     $("#htmlGrid").setGridWidth(810);
    });

});

 

function pickdates(id){
 alert(id);
}




server.json

{
    "page": "1",
    "total": 27,
    "records": "13",
    "rows": [
        {
            "id": "5",
            "cell": [
                "5",
                "2007-10-06",
                "Client 3",
                "200.00",
                "0.00",
                "200.00",
                null
            ]
        },
        {
            "id": "4",
            "cell": [
                "4",
                "2007-10-05",
                "Client 2",
                "120.00",
                "12.00",
                "134.00",
                null
            ]
        },
        {
            "id": "3",
            "cell": [
                "3",
                "2007-10-05",
                "Client 1",
                "50.00",
                "10.00",
                "60.00",
                null
            ]
        },
        {
            "id": "2",
            "cell": [
                "2",
                "2007-10-05",
                "Client 3",
                "100.00",
                "0.00",
                "100.00",
                "no tax"
            ]
        },
        {
            "id": "1",
            "cell": [
                "1",
                "2007-10-04",
                "Client 3",
                "150.00",
                "0.00",
                "150.00",
                "no tax"
            ]
        }
    ]
}



 소스사용은 자유이나 태클달지 맙시다 ^^  현재버전의 jqGrid와 틀립니다..

Post by 넥스트리소프트 데꾸벅(techbug)
, |


원본출처 : 14 Most Useful Web Design Cheat Sheets


웹디자이너에게만 필요한 것이 아니라 프리젠테이션 개발자에게 필요한 모든 치트시트를 포함하고 있다.
일전에 포스팅한 프리젠테이션개발자들에게 필요한 기술들에 포함된 기술들에 대한 치트시트이다.


Adobe Photoshop CS4 Keyboard Shortcuts






Adobe Photoshop CS3 Keyboard Shortcuts




Photoshop Lasso Tool Cheatsheet





Adobe Pen Tool Cheatsheet




CSS Cheat Sheet (V2)




Mac OS X CSS Cheat Sheet





CSS CHEAT SHEET





(X)HTML Elements and Attributes





HTML/XHTML in one page





jQuery 1.3 Cheat Sheet




mootools 1.2 cheat sheet





Prototype 1.6.0.2 Cheat Sheet




Adobe Flash CS4 OS X Keyboard Shortcuts




Flash CS3 Cheat Sheet

 







CSS Cheet Sheet





Javascript Cheat Sheet




jQuery Cheat Sheet



MySQL Cheat Sheet






Reqular Expression Cheat Sheet







PHP Cheat Sheet










Post by 넥스트리소프트 데꾸벅(techbug)
, |
Post by 넥스트리소프트 데꾸벅(techbug)
, |



Manning에서 나온 Extjs In Action 의 샘플파일을 링크걸어놓은 사이트가 있어 올린다.
고환율때문에 사기는 그렇고 아직 MEAP(Manning Early Access Program)상태라 어둠의 경로로 얻으려고 했으나 좋은건 사주는게... ㅡ.,ㅡ;



General Apps

  • CRM : [ demo ]
  • Ajax Yahoo IM : [ demo ]
  • Mail Center (Webmail) : [ demo ]
  • File Sports : [ demo ]
  • SeeMe (using Google Maps) : [ demo ]
  • ExtPlorer : [ demo ]
  • Group Office : [ demo ] (demo/demo)

Development Tools

Books

  • ExtJS In Action [ link ]
  • Learning ExtJS [ link ]



--------[ 이건 그냥 덤으로.. ^^ ] -------------------------------------------------------
IE7   [ 4.00 Kb ]
astar   [ 4.00 Kb ]
clock   [ 4.00 Kb ]
cssdropshadow   [ 4.00 Kb ]
gzoutput   [ 4.00 Kb ]
loopsbench   [ 4.00 Kb ]
pwdsecurity   [ 4.00 Kb ]
tris   [ 4.00 Kb ]
DOM.js   [ 2.42 Kb ]
ColorFader.html   [ 1.20 Kb ]
ColorFader.js   [ 3.01 Kb ]
CssSwitcher.js   [ 1.35 Kb ]
LoadVars.html.old   [ 2.48 Kb ]
FolderTree.swf   [ 58.21 Kb ]
LoadVars.html   [ 3.41 Kb ]
LoadVars.js.old   [ 9.11 Kb ]
LoadVars.js   [ 7.92 Kb ]
Sqlitei_Example.html   [ 12.56 Kb ]
SimpleSWF.js   [ 911 bytes ]
TEST_PHP4_MYSQL.zip   [ 1.51 Kb ]
TEST_SqliteMPTTA.zip   [ 1.37 Kb ]
adsense.html   [ 9.34 Kb ]
bigdollar.html   [ 2.96 Kb ]
browser_agent.html   [ 899 bytes ]
cssswitcher.html   [ 3.48 Kb ]
fap.example.js   [ 3.89 Kb ]
fakedom.html   [ 2.05 Kb ]
testf5.html   [ 1.16 Kb ]
flashPlayerVersion.html   [ 694 bytes ]
flashPlayerVersion.js   [ 1.11 Kb ]
jsbenchmark.html   [ 9.19 Kb ]
multipletest.html   [ 1.66 Kb ]
myfolder_flash.xml   [ 26.70 Kb ]
onload.html   [ 501 bytes ]
onload2.html   [ 1.89 Kb ]
onload3.html   [ 542 bytes ]
onload4.html   [ 2.61 Kb ]
onmousewheel.html   [ 33.91 Kb ]
onmousewheel.js   [ 1.18 Kb ]
othertest.swf   [ 810 bytes ]
othertest.txt   [ 652 bytes ]
simpleswf.html   [ 277 bytes ]
simpleswf.zip   [ 20.68 Kb ]
singletest.html   [ 1.17 Kb ]
singletest.swf   [ 765 bytes ]
singletest.txt   [ 656 bytes ]
singletesthalfheight.txt   [ 654 bytes ]
wheelscroll.gif   [ 1.90 Kb ]
testf5.swf   [ 629 bytes ]
testf5.txt   [ 648 bytes ]

'Scripter > EXTJS' 카테고리의 다른 글

Ext.Updater 깜빡거림 방지  (0) 2009.05.06
Extjs Core 3.0 Beta 릴리즈  (4) 2009.04.07
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Extjs 3.0 Roadmap  (10) 2008.11.12
Post by 넥스트리소프트 데꾸벅(techbug)
, |


간혹가다 프로젝트를 하다가 보면 한글 캐릭터셋, 인코딩 때문에 많이 헷갈릴때가 있다.
이번에 강의자료를 만들다가 데꾸벅의 블로그 RSS를 JSP로 Proxy를 만들기 위해 HttpClient라이브러리를 가져오기 위해 UTF-8로 가져왔는데 실제 RSS파일은 UTF-8로 헤더파일에 기재되어 있었으나 ISO8859-1로 가져와야 했다.

<%@ page language="java" pageEncoding="utf-8" %>
<%@ page import = "org.apache.commons.httpclient.HttpClient" %>
<%@ page import = "org.apache.commons.httpclient.methods.GetMethod" %>
<%@ page import = "org.apache.commons.httpclient.HttpStatus" %>
<%
 request.setCharacterEncoding("utf-8");
 String url = "http://techbug.tistory.com/rss";

 HttpClient client = new HttpClient();
 GetMethod method = new GetMethod(url);

 try {
  int statusCode = client.executeMethod(method);

  out.clearBuffer();
  response.reset();

  response.setStatus(statusCode);

  if (statusCode == HttpStatus.SC_OK) {
   String result = method.getResponseBodyAsString();
   response.setContentType("text/xml; charset=iso8859-1");
   out.println(result);
  }
 } finally {
  if (method != null) method.releaseConnection();
 }
%>



extjs의 한글 로케일 파일을 설정해줄때도 해외에 거주하는 개발자들에게 문의는 적었으나 국내에서 개발하는 개발자들의 불만이 상당히 많았다. js파일을 UTF-8로 인코딩 해 놓았으니 해당 내용안의 한글이 모두 깨어져 스크립트 에러가 떨어진다는 것이였다.이럴때는 다음과 같이 처리 해준다.

<script type="text/javascript" charset="utf-8" scr="로케일파일.js" ></script>

또한 form submission시 캐릭터셋을 처리할때 모질라 계열에서는 accept-charset을 해주면 되지만 익스플로러에서는 아예 무시해 버린다.. 이때는 자바스크립트를 사용하여 다음과 같이 해주면 된다
아래소스는 prototype.js를 이용한 예제이다.

function send() {
    var f = $('frmTest');
    if (Prototype.Browser.Gecko)  //Firefox일 경우
        f.acceptCharset = 'euc-kr';
    else
        document.charset = 'euc-kr';
    f.submit();
    if (!Prototype.Browser.Gecko) //Firefox가 아닌 경우
        document.charset = 'utf-8';
}

 

 

 

문자셋 (charset, Character Set)

하나의 언어권에서 사용하는 언어를 표현하기 위한 모든 문자(활자)의 모임을 문자셋(charater set)이라고 한다.
다시 말하면 우리가 얘기하는 언어를 책으로 출판할 때 필요한 문자(활자)를 모두 모은 것이라고 생각하면 된다. 추가적으로 부호와 공백 등과 같은 특수 문자도 문자셋에 포함된다.
영어의 경우 알파벳 대소문자와 특수 문자 등으로 간단하게 문자셋을 구성할 수 있지만 한글의 경우 출판에서 가,나,다 등으로 출판함으로 훨씬 다양한 문자셋을 가지고, 또한 한자를 병행해서 사용함으로 문자셋의 범위는 더욱 넓어진다.
추상적인 글자 셋은 여러 개의 인코딩을 가질 수 있다. MIME 문자셋은 IANA에서 정의하며 인터넷 및 XML 파일에서 사용한다.

 

인코딩 (encoding)
인코딩은 문자셋을 컴퓨터가 이해할 수 있는 바이트와 매핑하는 규칙이다.
예를 들면 ASCII Code에서 A,B,C 등은 문자셋이고 A는 코드 65, B는 코드 66 등 바이트 순서와 매핑한 것이 인코딩이다. 따라서 문자셋을 어떻게 매핑하느냐에 따라 하나의 문자셋이 다양한 인코딩을 가질 수 있다. 

대부분의 인코딩에서는 대소문자를 구분하지 않는다.
대한민국 문자셋(charater set)에서 가장 많이 사용하는 인코딩은 "UTF-8", "KSC5601", "ISO-8859-1" 이다.


문자셋(인코딩)의 예

  • 한글 : 8bit KSC5601 (8bit EUC-KR, 7bit ISO-2022-KR, ISO-2022-Int)
  • 영문 : KSC5636, US-ASCII (둘 간의 차이는 화페 단위 뿐)
  • 한글+영문 : KSC5861 (EUC-KR), KSC5636 + KSC5601를 모두 포함한다.
  • 유니코드 : 4byte Unicode < ISO-10646 UCS (ISO-8859-1, UTF-8, UTF-16)

문자셋과 인코딩은 동일한 명칭을 가질 수 있어 서로 혼용하여 사용되는 경우가 많다.

  • EUC-KR은 원래 유닉스용 표준이었는데 인터넷으로 확장되어 사용된다.
  • KSC5601은 인터넷에서 원활한 한글(완성형) 사용을 위하여 정의된 표준이다.
  • EUC (Extended UNIX Code), UTF (UCS Transformation format)


기본 인코딩

Windows : 시스템 언어와 관련된 코드 페이지를 따름

  • 영문 Windows는 CP1252 인코딩을 사용
  • 한글 Windows는 MS949 인코딩을 사용

 

Unix : LANG 환경 변수로 지정된 로케일에 해당하는 인코딩

  • Solaris는 LANG 환경 변수가 ko, ko_KR일 경우 EUC-KR 인코딩을 사용
  • HP는 LANG 환경 변수가 ko_KR, ko_KR.eucKR일 경우 EUC-KR 인코딩을 사용
  • Unix에서 locale -a 명령을 사용하여 LANG 환경 변수에 지정 가능한 문자셋을 확인할 수 있다.

HTML : ISO-8859-1와 ISO-10646
XML : UTF-8
웹 브라우져 : 내부적으로 모두 유니코드로 처리를 한다.
HTTP/1.0 : ISO-8859-1
HTTP (URL,URI) : US-ASCII, %hexadecimal_code, JavaScript escape() 함수 사용
Java : 유니코드 2.0
직렬화된 Java Class : UTF-8
J2EE : ISO-8859-1
Oracle : UTF-8 (AL32UTF8), 한국에서는 KSC5601 (KO16KSC5601)

 


다양한 환경에서 인코딩 설정


웹 브라우져 설정

"도구 -> 인터넷 옵션 -> 언어" 메뉴를 선택한다.
영어[en]와 한국어[ko]를 추가하고 원하는 언어를 가장 상단에 위치한다.

JVM 설정
일반적으로 LANG 환경 변수를 설정해 주면 자동으로 설정이 된다.

locale -a : Solaria unix 명령어로 지원 가능한 encoding을 확인한다.
env  LANG  ko : csh에서 Encoding을 설정한다. (KSC5601, EUC-KR)
LANG=ko : ksh에서 Encoding을 설정한다. (KSC5601, EUC-KR)

JVM 옵션 설정 (UTF-8, ISO-8859-1, KSC5601)

        -Dfile.encoding=8859_1 :필수 항목
        -Dfile.client.encoding=8859_1

JSP를 사용하여 JVM 옵션 확인 (encoding.jsp)

        file.encoding = <%= System.getProperty("file.encoding") %><br>
        file.client.encoding = <%= System.getProperty("file.client.encoding") %><br>
        client.encoding.override = <%= System.getProperty("client.encoding.override") %><br>

HTML 설정 : HTML 파일을 UTF-8로 만들어 저장한다.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


XML 설정
    XML 파일을 UTF-8로 만들어 저장한다.

    <?xml version="1.0" encoding="UTF-8" ?>

JSP 설정
    JSP 파일을 UTF-8로 만들어 저장한다.

    <%@ page pageEncoding="UTF-8" %>
    <%@ page contentType="text/html;charset=UTF-8" %>

Servlet 설정

    HTTP 요청의 인코딩 지정
    request.setCharacterEncoding("UTF-8");
    HTTP 응답의 인코딩 지정
    response.setContentType("text/html; charset=UTF-8");

web.xml 설정

    <mime-mapping>
        <extension>html</extension>
        <mime-type>text/html;charset=UTF-8</mime-type>
    </mime-mapping>

 



 참고자료

 

 

 

Post by 넥스트리소프트 데꾸벅(techbug)
, |


기본적으로 grid의 View에 editor와 같이 다른 컴포넌트를 붙이기는 기존 소스보다 컴포넌트를 붙이는 소스가 더 많이 들어가는 경우가 있다.
데꾸벅의 경우도 프로젝트중 각각의 그리드 Row마다 progress bar를 붙여야 하는 경우가 생겼었는데..
포럼글을 뒤지다가 다음과 같은 좋은 사용자 플러그인이 있어 분석을 위해 소스를 까 보았다.



위 그림에서 보는바와 같이 그리드위에 버튼을 만들어 올릴때 new Ext.button이 아닌 new Ext.Action을 사용하여 사용자 플러그인을 사용한 소스이다.
소스 API  및 관련 포럼글 

HTML
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="./css/icons.css">
 <link rel="stylesheet" type="text/css" href="./css/Ext.ux.grid.RowActions.css">
    <link rel="stylesheet" type="text/css" href="../../ext/ext-2.2/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../ext/ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext/ext-2.2/ext-all.js"></script>
 <script type="text/javascript" src="./js/Ext.ux.grid.RowActions.js"></script>
 <script type="text/javascript" src="./js/Ext.ux.Toast.js"></script>
 <script type="text/javascript" src="rowactions.js"></script>
</head>
<body></body>
</html>





JS

Ext.BLANK_IMAGE_URL = '';
Ext.ns('Example');
Example.version = '1.0';

Example.Grid = Ext.extend(Ext.grid.GridPanel, {

  initComponent:function() {

   // Create RowActions Plugin
   this.action = new Ext.ux.grid.RowActions({
    header:'Actions'
   ,autoWidth:true
   ,keepSelection:true
   ,actions:[{
     iconIndex:'action1'
    ,qtipIndex:'qtip1'
    ,iconCls:'icon-open'
    ,tooltip:'Open'
   },{
     iconCls:'icon-wrench'
    ,tooltip:'Configure'
    ,qtipIndex:'qtip2'
    ,iconIndex:'action2'
    ,hideIndex:'hide2'
   },{
     iconIndex:'action3'
    ,qtipIndex:'qtip3'
    ,iconCls:'icon-user'
    ,tooltip:'User'
    ,style:'background-color:yellow'
   }]
   ,groupActions:[{
     iconCls:'icon-del-table'
    ,qtip:'Remove Table'
   },{
     iconCls:'icon-add-table'
    ,qtip:'Add Table - with callback'
    ,callback:function(grid, records, action, groupId) {
     Ext.ux.Message.msg('Callback: icon-add-table'
         , 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>'
         , groupId
         , action
         , records.length);
    }
   },{
     iconCls:'icon-graph'
    ,qtip:'View Graph'
    ,align:'left'
   }]
   ,callbacks:{
    'icon-plus':function(grid, record, action, row, col) {
     Ext.ux.Message.msg('Callback: icon-plus'
         , 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>'
         , row
         , action);
    }
   }
  });

  this.action.on({
   action:function(grid, record, action, row, col) {
    Ext.ux.Message.msg('Event: action', '클릭한 Row: <b>{0}</b>, 액션: <b>{1}</b>'
        , row
        , action);
   }
   ,beforeaction:function() {
    Ext.ux.Message.msg('Event: beforeaction', '핸들러에서 false반환시 액션취소.');
   }
   ,beforegroupaction:function() {
    Ext.ux.Message.msg('Event: beforegroupaction', '핸들러에서 false반환시 액션취소');
   }
   ,groupaction:function(grid, records, action, groupId) {
    Ext.ux.Message.msg('Event: groupaction', 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>', groupId, action, records.length);
   }
  });

  Ext.apply(this, {
    store:new Ext.data.Store({
    reader:new Ext.data.JsonReader({
      id:'company'
     ,totalProperty:'totalCount'
     ,root:'rows'
     ,fields:[
      {name: 'company'}
        ,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ,{name: 'industry'}
        ,{name: 'desc'}
        ,{name: 'action1', type: 'string'}
        ,{name: 'action2', type: 'string'}
        ,{name: 'action3', type: 'string'}
        ,{name: 'qtip1', type: 'string'}
        ,{name: 'qtip2', type: 'string'}
        ,{name: 'qtip3', type: 'string'}
        ,{name: 'hide2', type: 'boolean'}
     ]
    })
    ,proxy:new Ext.data.HttpProxy({url:'jsonData.json'})
    ,sortInfo:{field:'company', direction:'ASC'}
    ,listeners:{
     load:{scope:this, fn:function() {
      this.getSelectionModel().selectFirstRow();
     }}
    }
   })
   ,columns:[
    {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'}
    ,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}
    ,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ,this.action
   ]
   ,plugins:[this.action]
   ,loadMask:true
   ,viewConfig:{forceFit:true}
  });

  this.bbar = new Ext.PagingToolbar({
    store:this.store
   ,displayInfo:true
   ,pageSize:10
  });

  Example.Grid.superclass.initComponent.apply(this, arguments);
 }


 ,onRender:function() {
  Example.Grid.superclass.onRender.apply(this, arguments);
  this.store.load({params:{start:0, limit:10}});
 }
});

//컴포넌트 등록
Ext.reg('techbuggrid', Example.Grid);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var win = new Ext.Window({
         width:600
  ,minWidth:320
        ,id:'agwin'
        ,height:400
        ,layout:'fit'
        ,border:false
  ,plain:true
        ,closable:false
        ,title:"그리드 Row Action 처리하기"
  ,items:{xtype:'techbuggrid',id:'actiongrid'}
    });
    win.show();
});




사용자 플러그인.JS

Ext.ns('Ext.ux.grid');
if('function' !== typeof RegExp.escape) {
 RegExp.escape = function(s) {
  if('string' !== typeof s) {
   return s;
  }
  return s.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1');
 };
}

Ext.ux.grid.RowActions = function(config) {
 Ext.apply(this, config);
 this.addEvents(
   'beforeaction'
  ,'action'
  ,'beforegroupaction'
  ,'groupaction'
 );
 Ext.ux.grid.RowActions.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.RowActions, Ext.util.Observable, {
  actionEvent:'click'
 ,autoWidth:true
 ,dataIndex:''
 ,header:''
 ,keepSelection:false
 ,menuDisabled:true
 ,sortable:false
 ,tplGroup:
   '<tpl for="actions">'
  +'<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
  +'{cls}" style="{style}" qtip="{qtip}">{text}</div>'
  +'</tpl>'
 ,tplRow:
   '<div class="ux-row-action">'
  +'<tpl for="actions">'
  +'<div class="ux-row-action-item {cls} <tpl if="text">'
  +'ux-row-action-text</tpl>" style="{hide}{style}" qtip="{qtip}">'
  +'<tpl if="text"><span qtip="{qtip}">{text}</span></tpl></div>'
  +'</tpl>'
  +'</div>'
 ,hideMode:'visiblity'
 ,widthIntercept:4
 ,widthSlope:21
 ,init:function(grid) {
  this.grid = grid;
  if(!this.tpl) {
   this.tpl = this.processActions(this.actions);
  }
  if(this.autoWidth) {
   this.width =  this.widthSlope * this.actions.length + this.widthIntercept;
   this.fixed = true;
  }
  var view = grid.getView();
  var cfg = {scope:this};
  cfg[this.actionEvent] = this.onClick;
  grid.afterRender = grid.afterRender.createSequence(function() {
   view.mainBody.on(cfg);
   grid.on('destroy', this.purgeListeners, this);
  }, this);

  if(!this.renderer) {
   this.renderer = function(value, cell, record, row, col, store) {
    cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
    return this.tpl.apply(this.getData(value, cell, record, row, col, store));
   }.createDelegate(this);
  }

  if(view.groupTextTpl && this.groupActions) {
   view.interceptMouse = view.interceptMouse.createInterceptor(function(e) {
    if(e.getTarget('.ux-grow-action-item')) {
     return false;
    }
   });
   view.groupTextTpl =
     '<div class="ux-grow-action-text">' + view.groupTextTpl +'</div>'
    +this.processActions(this.groupActions, this.tplGroup).apply()
   ;
  }

  if(true === this.keepSelection) {
   grid.processEvent = grid.processEvent.createInterceptor(function(name, e) {
    if('mousedown' === name) {
     return !this.getAction(e);
    }
   }, this);
  }
  
 }
 ,getData:function(value, cell, record, row, col, store) {
  return record.data || {};
 }

 ,processActions:function(actions, template) {
  var acts = [];

  Ext.each(actions, function(a, i) {
   if(a.iconCls && 'function' === typeof (a.callback || a.cb)) {
    this.callbacks = this.callbacks || {};
    this.callbacks[a.iconCls] = a.callback || a.cb;
   }

   var o = {
     cls:a.iconIndex ? '{' + a.iconIndex + '}' : (a.iconCls ? a.iconCls : '')
    ,qtip:a.qtipIndex ? '{' + a.qtipIndex + '}' : (a.tooltip || a.qtip ? a.tooltip || a.qtip : '')
    ,text:a.textIndex ? '{' + a.textIndex + '}' : (a.text ? a.text : '')
    ,hide:a.hideIndex
     ? '<tpl if="' + a.hideIndex + '">'
      + ('display' === this.hideMode ? 'display:none' :'visibility:hidden') + ';</tpl>'
     : (a.hide ? ('display' === this.hideMode ? 'display:none' :'visibility:hidden;') : '')
    ,align:a.align || 'right'
    ,style:a.style ? a.style : ''
   };
   acts.push(o);

  }, this);

  var xt = new Ext.XTemplate(template || this.tplRow);
  return new Ext.XTemplate(xt.apply({actions:acts}));

 }
 ,getAction:function(e) {
  var action = false;
  var t = e.getTarget('.ux-row-action-item');
  if(t) {
   action = t.className.replace(/ux-row-action-item /, '');
   if(action) {
    action = action.replace(/ ux-row-action-text/, '');
    action = action.trim();
   }
  }
  return action;
 }
 ,onClick:function(e, target) {

  var view = this.grid.getView();

  var row = e.getTarget('.x-grid3-row');
  var col = view.findCellIndex(target.parentNode.parentNode);
  var action = this.getAction(e);

  if(false !== row && false !== col && false !== action) {
   var record = this.grid.store.getAt(row.rowIndex);

   if(this.callbacks && 'function' === typeof this.callbacks[action]) {
    this.callbacks[action](this.grid, record, action, row.rowIndex, col);
   }

   if(true !== this.eventsSuspended && false === this.fireEvent('beforeaction', this.grid, record, action, row.rowIndex, col)) {
    return;
   }
   else if(true !== this.eventsSuspended) {
    this.fireEvent('action', this.grid, record, action, row.rowIndex, col);
   }

  }

  t = e.getTarget('.ux-grow-action-item');
  if(t) {
   var group = view.findGroup(target);
   var groupId = group ? group.id.replace(/ext-gen[0-9]+-gp-/, '') : null;

   var records;
   if(groupId) {
    var re = new RegExp(RegExp.escape(groupId));
    records = this.grid.store.queryBy(function(r) {
     return r._groupId.match(re);
    });
    records = records ? records.items : [];
   }
   action = t.className.replace(/ux-grow-action-item (ux-action-right )*/, '');

   if('function' === typeof this.callbacks[action]) {
    this.callbacks[action](this.grid, records, action, groupId);
   }

   if(true !== this.eventsSuspended && false === this.fireEvent('beforegroupaction', this.grid, records, action, groupId)) {
    return false;
   }
   this.fireEvent('groupaction', this.grid, records, action, groupId);
  }
 }

});

Ext.reg('rowactions', Ext.ux.grid.RowActions);




요기 괜찮은 사용자 플러그인도 함 보세요





















'Scripter > EXTJS' 카테고리의 다른 글

Extjs Core 3.0 Beta 릴리즈  (4) 2009.04.07
Examples Of ExtJS in Action  (2) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Extjs 3.0 Roadmap  (10) 2008.11.12
Ext2.2 Release  (11) 2008.08.07
Post by 넥스트리소프트 데꾸벅(techbug)
, |

본 강의자료는 복제, 배포가 불가능합니다. by techbug





Internet Explorer 8




Reference Books
  Designing Interfaces  : UI Pattern과 관련된 내용을 익히기에 좋습니다. [관련사이트]

 Ajax Programming 기초부터 중급까지  : 기초가 부족하신 분들이 보시기에 좋습니다. (예제: JSP)

 Ajax Design Patterns : 설계패턴에 대한 전반적인 내용 (예제:php)

 Ajax in Action : Ajax 설계패턴에 대한 전반적인 내용

 Ajax Patterns and Best Practices : 예제파일이 좋습니다.

 Ajax Security : 로그인 보안 및 알고리즘에 대해 설명

 Ajax design pattern for web2.0 : 설계패턴의 전반적인 내용

 Pro Javascipt Design Patterns : 자바스크립트 설계원칙에 대한 내용

 Foundation of Ajax : 테스팅툴이나 ajax기초에 대해서 설명합니다.
 
 
 
 
 
 
 
웹표준 및 jQuery 관련 추천책 
 웹표준교과서

 CSS 마스터전략

 실용예제로 배우는 웹표준

 웹2.0을 이끄는 방탄웹

 웹표준 Ajax DOM 스크립팅

jQuery1.3 작고 강력한 자바스크립트 라이브러리

jQuery in Action (프로그래밍 jQuery)

















'강좌 및 번역' 카테고리의 다른 글

HTML5  (10) 2010.03.02
프로젝트 관리자가 알아야할 97가지 사실  (1) 2009.12.08
Post by 넥스트리소프트 데꾸벅(techbug)
, |



 


프로페셔널 프론트엔드 개발자에게 필요한 기술에 대해서 Yahoo의 Nate Koechley의 얘기를 들어봅시다.
프론트엔드 엔지니어가 어떠한 일을 하는지, 어떤 업무를 해야 하는지.  이들로 인한 효과가 무엇인지에 대해 말해주고 있습니다. 

프론트엔드 기술에 대해서 전혀 모르는 분보다는 쬐금 아시는분들이 듣기에 좋습니다.

간단하게 얘기하자면..

HTML syntax에서 많이들 혼용하는 부분이나 표준적인 코딩, 자신이 생각하는 코딩법 (데꾸벅 주: 사실 동영상에서의 <div id="footer"><p>보다는 <address>가 더 좋습니다.) 등에 대해서 설명하며,
CSS에서는 selector사용법, background-image를 유용하게 사용하는법, 그로인한 효과등을 알려주는군요..

이벤트 핸들러를 이용한 Javascript를 사용할때의 유용한 표현, 분리된 자바스크립트(unobtrusive javascript)에 대한 얘기며, 실제 프론트엔드 기술에서의 Publisher가 아닌 Integrator로써의 역할에 대한 내용을 많이 역설하는군요..

사실 이번에 KOSTA강의에서 UI, UX아키텍쳐 설계에 대해서 강의를 맡게 되었는데 강의내용에 있던 내용들이 많이 있군요..  AJAX 설계방법시 많은 패턴중에 간략하게 설명해 놓은 부분들도 있네요~~

쉽고 간략하게 핵심만 골라 설명해주고 있습니다. 깊이는... 글쎄요~ ^^
다음에 시간이 나면 저두 이런 자료를 하나 만들어 올려야 겠군요..

   












'Pattern Searcher > 어쩌다 쓴 넋두리' 카테고리의 다른 글

온라인 메모장  (6) 2009.04.08
이땅의 개발자에게 필요한 철학  (2) 2008.03.05
Getting Real  (0) 2008.03.04
Post by 넥스트리소프트 데꾸벅(techbug)
, |
출처 : http://boxesandarrows.com/view/ux-design-planning

번역을 할 시간이... .. 나중에 해야겠군요..ㅡ.,ㅡ;

A lot of confusion and misunderstanding surrounds the term "user experience." The multitude of acitivities that can be labeled with these two words span a vast spectrum of people, skills and situations. If you ask for UX design (UXD), what exactly are you asking for? Similary, if someone tells you they are going to provide you with UXD for an application, website or intranet or extranet, what exactly are you going to get?

Is it just one person who is responsible or is it a team of people who are in charge of UXD? In this story I´ll sketch my ideas ofUXD based on my experiences and at the end of this story I will give you my answer.

Let us start at the beginning – UXD starts with experience – experience of the users. And so I will talk about the users first.

 

 

UXD-P – every person is an individual

Every person is an individual. Every person is in possession of different roles. For each individual there will be many roles and each person adopts a different role depending on the circumstances.

roles of experiences

User Roles

Sometimes the individual person holds one role, but mainly he will hold quite a few roles like consumer, customer, user, client, investor, producer, creator, participant, partner, part of a community, member, and so on.

 

 

UXD-P – network of expectations, experiences and knowledge

Every user is multi-faceted – and is considerably more complex than they themselves can imagine – so it´s not very helpful just to talk to the user or ask him what he needs. We have to watch what people do; we have to listen to what people say and to recognize what decisions people make – and by observing we have to evaluate and understand why they do this and that. Why and what kind of visual elements will the user like, prefer and or understand? Why and what kind of mental model, navigation or function do they respond to?



Jakob Nielsen said “To design an easy-to-use interface, pay attention to what users do, not only what they say. Self-reported claims are unreliable, as are user speculations about future behaviour.” (Jakob Nielsen – Alertbox) and I agree – I think no statement can be objective. Perhaps the circumstances are not realistic or not reasonable for the person. Or maybe the person himself is not really in the “situation,” or he is being influenced by other factors (trying to please the tester for example). Or maybe he is trying to succeed with the test rather than trying and failing, which tells us so much more.

When all three perspectives (do, say, make) are explored together, we are able to realize the experience spectrum of the “normal” user/customer we are working for.

Jesse James Garrett said: “User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” (J.J.Garrett – The Elements of User Experience) .

areas of experiences

Experiences

Areas of experiences: different areas which effect the quality of communication

 

 

UXD-P – personal and individual

When we talk about experiences, we take the individual into consideration, including the subjective occurrences felt by the person who has the “confrontation” with what we want them to use. Experiences are momentary and brief – sometimes they are part of a multi-layered process or they are on their own.



Normally such know-how has been learned as a part of something or by itself and will be remembered in the same way – but that’s not always the case – and the person deals with the situation in a different way. If we look at their exeperience as a continuum, the user brings their experiences of the past to the interaction in the present and adds their hopes for the future. That future could be: to interact with their banking in a safe and secure way.

flow of experiences

Flow of Experience

Flow of experience: the individual user/customer is always in the present – they act in the present. They are influenced by former experiences and current expectations.

UXD-P is taking the users’ views, behavior, and interactions, to figure out the emotional relationship between them and the thing we have built. For the most part these "people" and their experiences are unknown. It requires an appreciation of the customer: their journey, their personal history and their experiences.

It is the collective set of experiences, in the online-world, the offline-world, or even tiny little things (i.e. My coffee was cold this morning) that affects their experience of the products and the companies that represent them. It is about appreciating the individual user’s unmet needs, wants, capabilities and desires in a contextual way. It´s a box of experiences including the things the user saw, acted and felt. (BBC Two [12th February 2008, 9pm, BBC Two] had a program on rational thought. Highlights of the program include: Loss complex, Post-decision rationalization, Priming, Precognition. Watch highlights from the programme : http://www.bbc.co.uk/sn/tvradio/programmes/horizon/broadband/tx/decisions/highlights/ )

Experiences and expectations meet in the present. Both are inseperably combined, and every action we take takes both parts into consideration. When a person uses an application, he tries to understand what happens. He will always try to reference this to his past experiences. The moment is also tightly coupled to his expectations of his personal outlook.



At this point of “present” I think of the UX honeycomb of Peter Morville [1] …

honeycromb – Peter Morville

Morville’s "honeycomb"

honeycomb – Peter Morville (P.Morville – Facets of the User Experience)

In the present we have to deliver to the individual user and his specific task the best answers to following questions.


  • Is the application useful for the individual user and his specific task?
  • Is the application usable for the individual user and his specific task?
  • Is the application desirable for the individual user and his specific task?
  • Is the application valuable for the individual user and his specific task?
  • Is the application accessible? Available to every individual user, regardless of disability?
  • Is the target findable for the individual user and his specific task?
  • Is the application credible for the individual user and his specific task?

In the UXD-P the whole team has to take the users’ views of the GUI and the interactions to figure out the emotional relationship between the brand and potential customers. It requires a common appreciation of the customer journey and their personal history: not only with the product and similar products, but also with similar experiences.

 

 

UXD-P – teamwork and cooperation

The first stage in discovering – to invent or design for the experience – is to take a new viewpoint about the people who buy and use the products and services we are designing. This is a birdseye view and from step to step we have to use the "mouseview," which is to say a detailed view from the user’s perspective, as we develop the application we have to switch between these views. Our main desire is to to respect, value, and understand the continuum of experience and expectations our users have .

UXD-P can sometimes be a slippery term. With all the other often used terms that float around: interaction design, information architecture, human computer interaction, human factors engineering, usefulness, utility, usability and user interface design. People often end up asking, “What is the difference between all these fields and which one do I need?” If the UXD is aimed to describe the user’s satisfaction, joy or success with an application, product or website, however we specify it, there are a few key essentials which need to be tackled and I have to point out the UX honeycomb of Peter Morville [1] a second time. Each of these points, as enlightened above, makes up a considerable component of the user experience. Each is made effective due to the design offerings from each of the following elements:

Usefulness is based upon utility and usability. This means the product is able to give exactly the right kind of service and what the user is expecting from it. And it´s the joy of reaching my aims and the joy of doing so easily. The information architecture is in charge of clarity of the information and features, lack of confusion, a short learning curve and the joy of finding. The designing of the interaction is essential for a successful and overall satisfying experience. So the interaction design has to answer the questions of workflow, logic, clarity, and simplicity of the information. Visual design is responsible for the clarity of the information and elements, simplicity of tools and features, pleasant or interesting appearance of the interface, the visual hierarchy, and the joy of look and feel. Accessibility is a common term used to describe how easy it is for people to use applications or other objects. It is not to be mixed up with usability which is used to describe how easily an application, tool or object can be used by any type of user. One meaning of accessibility specifically focuses on people with disabilities: physical, psychological, learning, among others. Even though accessibility is not an element of its own, it is important to notice that accessibility also plays a role on the whole user experience to increase the likelihood of a wide-ranging user experience. People tend to gravitate to something that is easier to use regardless of who it might have been designed for.



The UXD innovation process is a nonlinear spiral of divergent and convergent activities that may repeat over time. Any design process begins with a vision. This applies particularly to the UX process. A vision, however, is not enough to start design. As I mentioned before, we always have different circumstances, users and roles. Therefore, it is critical to accurately understand the end user’s needs and requirements – his whole experience and expectations. The UX process relies on iterative user research to understand users and their needs. The most common failure point in UX processes is transferring the perspective of users to UI design. The key is to define interaction first, without designing it. First, all the research (the user, product and environment) have to be organized and summarized in a user research composition. These lead to user profiles, work activities, and requirements for the users. The user research composition feeds directly into use cases. The use cases show steps to accomplish task goals and the content needed to perform interactions. Completed use cases are validated with the intended user population. This is a checkpoint to see if the vision is being achieved and the value is clear to users and the project team. The next step is to design the user interface, generating directly from the interaction definition. A primary concern with design is to not get locked into a single solution too early. To keep the project on time, this step should be split into two parts: rough layout and exact and detailed design. The rough layout allows experimentation and rapid evaluation. Detailed design provides exacting design and behavior previews of the final application that specify what is to be coded. Iterative user evaluations at both stages are connected to be fast and effective in improving GUI, design feedback, rapid iterative evaluations, and usability evaluations.

UX workflow cycle

Image_7

design workflow – workcycle – workspiral

 



 

 

UXD-P – Gathering the elements

The diagram below presents the relationship of the elements above:

elements of UXD-P

Elements of UXD-P



Lewin’s equation

Lewin’s Equation, B = f (P,E) ( B – Behaviour; f – Function; P – Person; E – Environment ), ...

... is a psychological equation of behaviour developed by Kurt Lewin. It states that behaviour is a function of the person and his or her environment [2].

There is a desired behaviour that we need to encourage, but we have no control over the person, so via interaction design, information architecture and interface design we control the environment and therefore generate the desired behavior. (see reference: books.google.com ).

 

 

UXD-P – many steps to go but every step is worth it

How do we involve our team, customer and our user/consumer? We can start at different points, but I like to think about the circumstances first. Where do we come from? Where are we? Where will we go? And who is “we”? “We” means each person who is involved in the project. Iin the centre of each effort stands the user. To get the user with his personal experiences and expectations into the project, the design team and the customer needs a combining glue / tool / instrument. I believe these are the personas of the “target users/consumers” in the process of UXD-P. If there are no personas the second or third choice are scenarios or the workflows (based on a certain user/person).

The management point of view for the most cases is also the view of our customer. It includes the user’s/consumer’s age, income, gender and other demographics. The perspective of UXD-P is to look at behaviour, goals and attitude.

To get a realistic persona we have to identify first of all the target users. Out of my experiences this is not only the task of our client to define the users and consumers – we have to support him. During the identification and characterization we have to go beyond demographics and try to understand what drives individual users and consumers to do what they do and these as detailed in quantity and quality as necessary and possible – like I mentioned above. The approach and the complexity of the characterization depend on the tasks, project and functionalities. Parallel to the very personal description we need a “picture” of the environment. For each persona we must define their business and/or their private concerns and aims. Do they want to research a product for purchase later? Are they concerned about not wasting time primarily? Do they just want to purchase something online as easy and quick as possible?

Depending on these personas we can formulate, discuss and prove scenarios – from the very beginning of the project, during the project and as check or analysis at the end of the project.

 

 

 

 

 

UXD-P – my blueprint of schedule – "todos" and deliverables

We are always asking and being asked: what are the deliverables. Throughout my career as an IA, UX-planner and designer, as well as during my study of architecture and town planning, I have constantly asked myself following the questions:


  • What kind of project is it? What are the key points?
  • What should our steps and milestones be in the project?
  • What should our/my deliverables be?
  • How can we/I explain the main idea?

I have realized that if I do not answer these questions previous to creating a deliverable, I waste more time and deadlines slip.

The deliverables are not for us. The deliverables are a means of communication with several people: manager, decision maker, client, designer, front-end developers, back-end developers, etc. Sometimes I have the feeling we overlook this from time to time. After I think about the project I have to ask myself, where will my deliverables and other efforts fit within the process of design? The following diagram describes different lines of work that will lead us to some questions each line must accomplish. Depending on these questions and topics I will outline the basis, basics and deliverables for which each skill and ability which is necessary.

Image_6___schedule of UXD-P_small version

Image_6

schedule of UXD-P ___ better view – schedule 1238px x 1030px

 

UXD-P – my conclusion

I studied architecture and town planning. And just like town planning and architecture isn’t just for architects and art lovers, the internet isn’t just for computer users and developers. Similarly, just as the towns and the cities are for the inhabitants and architecture is for the users of a building, so products and applications are for the user, the customer, the member and not for the people who build them.

In every kind of process we should act in a team but in the process of UXD-P it is absolutely essential that we have to think parallel, with the same focus . We have to act in a team, although every team member is a kind of lawyer: lawyer of budget, of the client, of utility, of usability, of look and feel, of brand and finally of the user himself. Because at the end of the project, our user/customer is the final judge.

Good design is not only interface, or look and feel, or technology, or hardware, or how it works. It is every detail, like the structure, the labelling, the border of a button or a little icon. Finally, it is the sum of every element. I believe that a shared vision of a group of creators will have more potential than individual creativity. And that is the point where creativity meets expectation. The point of view on IA and design and the process to get to a well-designed product will be changed by UXD-P.

The persons who use the application or other object that we invent are the real “architects” of the “architecture” – the real “inventor” of the design. The more we know about our users, the more likely we are to meet their needs.

As the capabilities of interactive applications and the internet go forward and grow, more and more consumers use the applications and the various possibilities in new and different ways. We must think about all aspects of user experience.

And I will ask you once again: Is it just one who is responsible or is it the team which is in charge of UXD-P?

Personally, I believe it is the process of planning and designing for User Experiences (and so I think it’s the team which is in charge), but the overview has to have an experienced planner as a kind of captain.

 

The most common cause of an ineffective website (one that doesn’t deliver value to both the business and its intended constituents) is poor design. The products have to follow, to cover the functions and the experiences. The lack of clear organization, navigation and values of brand and mood mean that people will have an unintentional and maybe bad experience, rather than one that will meet the business’s relationship objectives for each individual. User experience design and planning is a fundamental component to the creation of successful digital products, applications and services.

UXD-P is UXdesign and planning- - In my estimation there are distinctions between Design and Planning.

Design is usually considered in the context of arts and other creative efforts. When I think of design in the UX process it focuses on the needs, wants, and limitations of the end user of the designed goods, but mainly on the visual parts and the mood. A designer has to consider the aesthetic-functional parts and many other aspects of an application or a process.

The planning part provides the framework. The term "planning" describes the formal procedures used in such an endeavors, such as the creation of documents, diagrams etc. to discuss the important issues to be addressed, the objectives to be met, and the strategy to be followed. The planning part is responsible for organizing and structuring to support utility, findability and usability.

I strongly believe that both parts – design and planning – have to work closely together. Every team member should have the ability to think cross-functionally and to anticipate consequences of activities in the whole context.

I’ve often seen timelines like this …

Image_8___

and this doesn´t work for UXdesign and planning …

I give a timeline the preference which looks like this:

Image_9___

... to develop a UXdesign and UXplanning.

And in the center of this team and of this process should stand the leading person – the user!

Image_9___basis points of UXD-P

Post by 넥스트리소프트 데꾸벅(techbug)
, |


Apache Module mod_expires 관련 글 : PHP스쿨에서 좋은 팁하나를 꼬불쳐 둔다.  
아래 내용은 여기저기서 관련글들을 모아모아서 정리하였다. 낭중에 서버관리할때 처리하면 편하겠네..  




apache에서는 mod_expires 모듈을 통해 Expires HTTP header 를 설정할 수 있다.
이를 통하여 클라이언트(웹페이지 방문자)에 캐싱되는 문서나 이미지들이 많아서 트래픽을
감소시킬 수 있다. 이미지 전용 서버나 이미지 디렉토리에 설정을 해두면 효과적이다.

이미지 서버에 지정한 다음 예를 보자.


<IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 1 month"

        # 제외할 디렉토리
        <Directory "/usr/local/apache/htdocs/temp">
        ExpiresActive Off
        </Directory>
</IfModule>

- ExpiresActive On 지시자로 Expires 설정을 enable 한다.
- ExpiresDefault "access plus 1 month" 지시자는 액세스한지 얼마나 지나서 expire할 것인지를 지정한다.
  즉, 지정한 기간만큼 클라이언트에 캐싱이 된다. 위에는 1달이다.

이외에 클라이언트에서 액세스한지 1달, 4주, 30일, 1년 등과 같은 expire 주기와
서버의 파일의 수정 시간으로 expire 주기를 설정할 수 있다.

ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"
ExpiresDefault "access plus 1 years"
ExpiresDefault "modification plus 30 days"



ExpiresDefault "<base> [plus] {<num> <type>}*"
ExpiresByType type/encoding "<base> [plus] {<num> <type>}*"

ExpiresByType image/bmp "access plus 1 month" 
ExpiresByType image/cgm "access plus 1 month" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType image/tiff "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 

ExpiresByType video/mpeg "access plus 1 month" 
ExpiresByType video/quicktime "access plus 1 month" 
ExpiresByType video/x-msvideo "access plus 1 month" 

ExpiresByType audio/basic "access plus 1 month" 
ExpiresByType audio/midi "access plus 1 month" 
ExpiresByType audio/mpeg "access plus 1 month" 
ExpiresByType audio/x-aiff "access plus 1 month" 
ExpiresByType audio/x-mpegurl "access plus 1 month" 
ExpiresByType audio/x-pn-realaudio "access plus 1 month" 
ExpiresByType audio/x-wav  "access plus 1 month" 

ExpiresByType application/x-shockwave-flash  "access plus 1 month"


- 설정 마지막부분에 Directory 지시자와 ExpiresActive Off 설정을 통해
  특정 디렉토리만 expire 설정에서 제외할 수 있다.
  반대로 특정 디렉토리만 On으로도 설정할 수 있다. (일반 웹서버에 /images 와 같이 디렉토리가 있는 경우)


ExpiresByType image/gif "acces plus 4 weeks"


- 위처럼 파일의 유형으로도 가능하다.



파일 다운로드 php 에는 

header('Pragma: cache'); // 아파치가 자동으로 no-cache 를 붙이기 때문에 넣어준다. 
header('Cache-Control: max-age=2592000'); 
header('Expires: '.substr(gmdate('r', strtotime('+1 MONTH')), 0, -5).'GMT'); 




Post by 넥스트리소프트 데꾸벅(techbug)
, |

얼마전 부터 방명록에 몇몇 분들이 iframe 안에서 grid panel이 동작하지 않는다고 하여 포럼글을 찾아보던중 다음과 같은 버그가 존재하였다.

FF3, Opera, IE6에서 document를  load시 load타임이 맞지 않아서 생기는 버그였다. 기존 2.1버전에서 2.2 버전으로 업그레이드 하면서 생긴 버그이다. 만일  ext의 프리미엄 멤버라면 svn을 통해서 해당 내용들을 모두 업데이트 받았겠지만 가난한 나같은 개발자들은 그러지 못한 관계로 포스팅한다. 

먼저 가장 최근의 ext-2.2 버전을 다운로드한다. ( 같은 버전이라도 버그패치되는 대로 패치하기 때문에 매일매일 다를수 있다. 다운로드 받거든 이미 받았던 버전과 용량체크를 해 보면 바로 알수 있다.. ㅡ"ㅡ; )

ext-all-debug.js 를 이용한다면 다음과 같이 3개 메쏘드를 바꿔준다.

fireDocReady(),  initDocReady(), onDocumentRead()

1580줄 fireDocReady를 다음과 같이 바꿔준다.

 var fireDocReady = function(){
        docReadyState = true;
        if(Ext.isGecko) {
             document.removeEventListener("DOMContentLoaded", fireDocReady, false);
        }

        if(docReadyProcId){
             clearInterval(docReadyProcId);
             docReadyProcId = null;
        }

        if(docReadyEvent && !Ext.isReady){
            Ext.isReady = true;
            docReadyEvent.fire();
            docReadyEvent.clearListeners();
        }
    };


1597줄의 initDocReady를 다음과 같이 바꿔준다.

    var initDocReady = function(){
        docReadyEvent = new Ext.util.Event();

        if(Ext.isReady){ return;}

        E.on(window, 'load', fireDocReady);

        if(Ext.isGecko) {
            document.addEventListener('DOMContentLoaded', fireDocReady, false);
        }
        else if(Ext.isIE){
                                 
            document.onreadystatechange = function(){
                if(document.readyState == 'complete'){
                     document.onreadystatechange = null;
                     fireDocReady();
                }
            };
                                
             if(window == top){   //Use the default readystatechange/onload as primary detection mechanism for frames 
                   var doScrollChk = function(){
                    try{
                       document.documentElement.doScroll('left');
                       Ext.isReady || fireDocReady();
                   }catch(e){
                       Ext.isReady || setTimeout(doScrollChk ,0);
                   }
                  };
                  doScrollChk();
               }
          
        } else if(Ext.isOpera){
              document.addEventListener( 'DOMContentLoaded', function () {
                    if (Ext.isReady) return;
                    for (var i = 0; i < document.styleSheets.length; i++)
                          if (document.styleSheets[i].disabled) {
                                  setTimeout( arguments.callee, 0 );
                                  return;
                          }
                           Ext.isReady || fireDocReady();
                           document.removeEventListener("DOMContentLoaded", arguments.callee, false);

                }, false);
        }
        else if(Ext.isSafari){
           var re = /complete|loaded/i;
            docReadyProcId = setInterval(function(){
                if(re.test(document.readyState) ) {
                    Ext.isReady || fireDocReady();
                 }
            }, 10);
        }
    };


1743줄의 onDocumentReady를 다음과 같이 바꿔준다.

     onDocumentReady : function(fn, scope, options){
            if(!docReadyEvent){
                initDocReady();
            }
            if(docReadyState || Ext.isReady){
                options || (options = {});
                fn.defer(options.delay||1, scope);    ----------> 0을 1로 바꿔주면 된다.  defer(1)과 같은 효과
            }else{
                docReadyEvent.addListener(fn, scope, options);
            }
        },




직접 ext-all-debug.js를 수정하였을 경우는 다음과 같이 하면 되고 각각의 컴포넌트들을 수정하려면 아래 eventManager관련 파일을 찾아 덮어쓴후 다시 빌드하여 ext-all.js로 만들어 쓰면 된다. 





사족 : 조만간 올초에 3.0 이 나올텐데 다시 업그레이드 되겠죠~ 이클립스용 ext designer와 standalone designer도 벌써 3.0 버전용이 나와 있더군요.. ㅡ.,ㅡ;











'Scripter > EXTJS' 카테고리의 다른 글

Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
Extjs 3.0 Roadmap  (10) 2008.11.12
Ext2.2 Release  (11) 2008.08.07
ExtJS 2.1 릴리즈  (4) 2008.04.22
Post by 넥스트리소프트 데꾸벅(techbug)
, |

금일(2009/01/20)  KISA(인터넷침해사고대응지원센터)에서 홈페이지관련 보안강화도구인 캐슬을 배포하였다. (진작에 이렇게 하지..) 
 웹관련 분야에 종사하다 보면 프로젝트 말기에 보안관련 패치와 보안관련 레포트에 스트레스를 받아오던 차에 범정부(?) 적으로 지원해 주니 감사할 따름이다. 



최근 공격자들이 국내 홈페이지를 해킹하여 악성코드 유포 및 개인정보 탈취하는 사례가 지속적으로 발생하고 있습니다.

이에, 한국정보보호진흥원에서는 홈페이지의 보안성을 강화하는 "홈페이지 보안 강화도구(CASTLE)"를 배포하고 있습니다.

사용을 희망하는 회사(기관)나 개인 사용자 분들은 아래의 프로그램과 설명서를 다운받아 사용하시기 바랍니다.

○ CASTLE 다운로드(ASP, PHP, JSP)  --------------------

○ CASTLE 사용자 설명서 다운로드------------------------

○ CASTLE 설치 가이드 다운로드 -------------------------
※ CASTLE를 홈페이지에 적용하면, 주요 취약점을 공격하는 침입시도 및 공격코드들을 차단할 수 있습니다. 또한 개발 중이거나, 운영 중인 홈페이지에 약간의 수정을 통해 쉽게 적용 가능하고, 적용 후 CASTLE의 관리 기능으로 손쉽게 관련 정책이나, 설정을 수정할 수 있습니다.




참고적으로 웹보안 4종가이드를 첨부하여 올린다. 

1. 홈페이지 개발 보안가이드
2. 웹애플리케이션 보안템플릿(PHP버전)
3. 웹서버 구축 점검가이드
4. 가이드 CD


















'Integrator > SECURITY' 카테고리의 다른 글

IIS 405 Error 처리방법  (2) 2008.10.29
Post by 넥스트리소프트 데꾸벅(techbug)
, |


들어가기에 앞서
얼마전 가트너에서 발표한 2009 웹 10대 전략을 아래와 같이 요약하였다.
1. 가상화(Virtualization)
2. 클라우드 컴퓨팅(Cloud Computing)
3. 서버(Servers)
4. 웹 기반 아키텍처(Web-Oriented Architectures)
5. 엔터프라이즈 매쉬업(EnterpriseMashups)
6. 특성화 시스템(Specialized Systems)
7. 소셜 소프트웨어와 소셜 네트워킹(Social Software and Social Networking)
8. 통합 커뮤니케이션즈(Unified Communications)
9. 비즈니스 인텔리전스(Business Intelligence)
10. 그린IT(Green IT)

대부분의 2009년 웹트렌드는 소셜네트웍, 모바일, Saas라 불리는 클라우딩 컴퓨팅에 초점을 맞추고 있다. 대부분이 2008년에 이미 이슈화 되었고 앞으로 기술전망에서 언급된 내용이였다. 다만 전망하지 못한 부분들이 있었는데 금융위기에 관련된 부분이 조금 추가되었을 뿐이다. 
그런데 그에 따른 디자이너들의 웹트렌드에 대책은 어느정도 만족할수 있을까라는 생각에 여러사이트들을 둘러보다가 좋은 정보가 있어 포스팅한다. 


디자이너들은 항상 새로운것을 요구하고 여러가지를 경험하는 것을 좋아합니다.
작업물에 사용자의 반응을 지켜보는것을 좋아하고 가능한한 주류보다는 남들과 차별화된 디자인적 접근을 좋아합니다. 결론적으로 남들과 다르게 접근하고 새로운 트렌드를 추구하는 디자이너를 위해 최근 몇개월간의 추세를 기준으로 2009년 웹디자인트렌드를 작성합니다..
 - 원본글 중에서


1. Letterpress

최근 몇개월간 이제껏 많이 사용하지 않았던 온라인 서비스를 하는 웹사이트에서 인쇄물에서의 글꼴과 같은 웹사이트들이 많이 출현하였습니다. 이미 국내의 네트웍 인프라 덕분에(?) 국내의 다수 웹사이트는 이미 이러한 대형 인쇄타이포를 이용한 웹사이트들이 많이 있습니다. 특히 웹에이젼시나 디자인 전문 포트폴리오 사이트의 경우에는 더더욱 그렇습니다.


[ http://365daysofastronomy.org/ ]


[ http://www.alexbuga.com/v8/ ]


[ http://brightkite.com/ ]


[ http://www.powerset.com/ ]


[ http://www.storenvy.com/ ]


[ http://unblab.com/login ]


[ http://www.leemunroe.com/ ]


[ http://2d2.es/ ]


[ http://www.respiromedia.com/ ]






2. Rich User Interfaces

기쁘게도 현대 웹사이트와 웹애플리케이션에서의 UI는 점점 더 뷰티플해지고 사용하기 좋아집니다. 그러나 최근 몇년 동안은 이러한 애플리케이션의 사용자경험이 환상적으로 향상되고 전통적인 데스크탑애플리케이션에 거의 가깝게 진화하고 있습니다.

특히 지난해에는 더 많은 사이트들에서 다양한 디자인 요소로써 사용되고 있고 사용성을 중시한 인터페이스들이 나타나기 시작하였습니다.  웹동향과 마찬가지로 RIA, Flex, Javascript UI Libraries의 영향으로 이러한 현상은 점점더 두드러 질것으로 예상됩니다.


[ http://www.quicksnapper.com/ ]


[ http://www.quicksnapper.com/ ]


[ http://dc2009.drupalcon.org/> ]

위의 두 예제는 웹애플리케이션 디자이너들에게 좀더 기능적으로 접근하고 표현하기 위해 그들의 경험을 향상시키고 있는 증거이다.


[ http://konigi.com/interface/mobileme-calendar-date-selector ]


[ http://www.newspond.com/science/ ]


[ http://www.howcast.com/categories ]


[ http://moodstream.gettyimages.com/ ]


[ http://www.gettyimages.com/ ]


[ http://listen.grooveshark.com/ ]


[ http://www.kontain.com/#home ]









3. PNG transparency

투명한 PNG 포맷은 불행히도 IE6에서는 지원하지 않지만(IE6에서도 편법적으로 지원합니다.) 좀더 사용자들에게 좋은 이미지를 제공하게 해둔다. 이전까지의 투명이미지는 PNG만큼의 쿨러티를 지원해주지 않았으나 PNG의 투명도를 이용한 디자인은 아래와 같이 근사한 사이트를 디자인 하게 해준다. 

IE6에서는 setPNG와 같이 자바스크립트 나 url(data: /base64)와 같은 CSS만으로도 가능하겠지만 디자인적인 측면에서 투명이미지 사용으로 인하여 얻는 효과는 무궁무진합니다. 


[ http://rustinjessen.com/ ]


[ http://dc2009.drupalcon.org/ ]


[ http://24ways.org/ ]


[ http://labs.paulicio.us/viewport/#2 ]


[ http://www.restroom.nl/ ]


[ http://www.wishingline.com/notebook/ ]


[ http://carrotcreative.com/ ]







4. HUGE Typography

사용자에게 좀더 어필하기 위하여 36픽셀이상의 폰트들이 많이 사용되고 있습니다. 특히 웹디자인 에이젼시나 포트폴리오 사이트, 제품사이트에서 많이들 사용됩니다. 국내의 웹사이트들은 이미 많이들 사용하고 있죠? 다만 깨끗한 한글폰트를 사용하는 사이트는 그리 많지 않고 대부분이 영어라는 점에서 아쉬운점은 있습니다.


[ http://www.francescomugnai.com ]


[ http://madebygiant.com/ ]


[ http://theautumnfilm.com/red-white-sale/us.html ]


[ http://www.signalapps.com/ ]


[ http://www.blackestate.co.nz/ ]


[ http://www.onefastbuffalo.com/ ]


[ http://www.shiftpx.com/ ]







5. Font Replacement

기존의 폰트에서 요즘은 다른 폰트들로 바껴가고 있습니다. 타이포그라피에 더 많은 주의를 기울이는 디자이너들 만큼 웹사이트의 본문에 더 세심한 주의를 기울입니다. 기존의 helvetica, arial, georgia,verdana체에서 다양한 폰트들로 웹사이트가 채워졌습니다. 재미있는것은 이러한 폰트들이 웹사이트의 디자인을 결정하기도하며, 사용자들에게 더 어필한다는 것입니다. 


[ http://blog.iso50.com/ ]


[ http://365daysofastronomy.org/ ]


[ http://www.chigarden.com/ ]


[ http://www.nonesuch.com/journal ]


[ http://daily.creattica.com/ ]









6. Modal Boxes (Lightboxes)

Modal boxes (dialog windows)는 차세대 팝업화면입니다. 이미 모든 브라우저에서 팝업차단기능때문에 div 태그와 자바스크립트를 이용한 팝업을 많이 겪어 보았을 것입니다. 이러한 팝업도 둥근 모서리의 애플리케이션 디자인처럼 진화하고 있습니다.


[ http://typedeskref.com/ ]


[ http://www.realmacsoftware.com/rapidweaver/overview/ ]


[ http://listen.grooveshark.com/ ]








7. Media Blocks

점점 더 빠른 네트웍인프라가 좋아지다 보니 이러한 미디어 블럭들이 많이 사용되고 있습니다. 사용자들에게 좀더 빠르고 사용하기 편하고 접근성이 좋은 디자인을 제공하기 위하여 자바스크립트와 플래쉬를 이용한 기술들이 주류를 이루고 있습니다.


[ http://www.getbackboard.com/ ]


[ http://www.goodbarry.com/ ]









8. The Magazine Look

대부분의 블로그, 기술 포트폴리오 사이트등등에서 게시물의 배치, 타이포그래피등 전통적인 인쇄방식의 그리드 기반의 디자인이 점점 인기를 끌고 있습니다. 현재 보시고 계신 티스토리 블로그 조차도 잡지와 같은 그리드 형식을 뛰고 있는것이 많으며 특히 뇌입어블로그의 스마트에디터의 경우느 이러한 그리드-레이아웃 템플릿 조차도 지원하고 있습니다.


[ http://www.alpha-multimedia.com/category/blog ]


[ http://www.objectifiedfilm.com/ ]


[ http://www.inspirationbit.com/sources-of-inspiration-to-the-rescue/ ]


[ http://www.good.is/ ]


[ http://cutandtaste.com/ ]


[ http://www.nonesuch.com/journal ]







9. Carousels (Slideshows)

Carousels은 자신이 원하는 페이지를 마우스 클릭이나 키보드의 화살표만으로 이동할수 잇는 슬라이드 네비게이션의 필수요소입니다. 이러한 슬라이드쇼는 사용자들로 하여금 더 쉽게 원하는 컨텐츠를 찾을수 있도록 배려해 줍니다.

전통적인 탑-레프트-컨텐츠 레이아웃에서 좀더 사용자들에게 쉽고 빠르게 정보를 전달하기 위해서 더 유용한 방식의 슬라이드 네비게이션이 강조되는 경향이 많습니다. 뇌입어의 웹캐스트도 같은 현상이라고 봐도 될런지... 


[ http://www.itv.com/ ]


[ http://money.cnn.com/ ]


[ http://music.yahoo.com/ ]


[ http://vickycristina-movie.com/ ]







10. Introduction Blocks

대부분의 웹사이트에서 상단-왼쪽영역은 가장 중요한 부분입니다. 이부분은 사용자에게 중요한 메세지나 권리들을 알려주고 가능한 빨리 메세지를 전달하는 역할을 합니다. 사실 많은 디자이너들이 웹애플리케이션이나 회사웹사이트디자인이든 온라인 서비스든 포트폴리오 사이트이든 상단-왼쪽 영역은 슬로건이나 간단한 소개를 넣는 것을 좋아합니다. 이곳에는 생생한 타이포그래피나 강력한 인상을 위하여 임팩트한 이미지들이 많이 사용됩니다. 보통 250~400픽셀의 높이로 사용됩니다. 디자인 요소 중 정보전달의 중요한  "강"-"약" 포인트에서 "강"에 해당되는 임팩트가 주로 들어가는 영역입니다. 


[ http://www.shannonmoeller.com/ ]


[ http://productplanner.com/ ]


[ http://www.45royale.com/ ]


[ http://revyver.com/ ]


[ http://creamscoop.com/ ]





더 많은 정보는 이곳에서 확인하세요! 






Post by 넥스트리소프트 데꾸벅(techbug)
, |

ExtJS의 border-layout 과 같은 효과를 내는 jQuery플러그인이 나와서 소개합니다.

UI.Layout 플러그인 제작자이며 초기프로젝트 제한자인 Kevin Dalman씨 또한 extJS border-layout을 보고 감명받아 jQuery Plug-in을 만들었다고 하며, 간단한 헤더레이아웃이나 사이드에서 부터 툴바, 메뉴, 헬프패널, status bars, sub-forms등을 가지고 있는 복잡한 애플리케이션까지 원하는 어떤 레이아웃도 만들수 있다고 하네요 ^^;
라이센스제한은 듀얼라이센스로  GPL과 MIT 라이센스를 따르고 있습니다. 아무렇게나 써도 된다는 것이네요 다만 제작자들이 원하는것은 사용해보고 괜찮으면 jQuery 플러그인사이트에서 "rate it" 투표나 해달라는거네요.. ㅡ"ㅡ;

jQuery stable version : 1.2.6
jQuery UI 1.5.2
UI.Layout Plugin 1.2.0

extjs의 기본 border-layout


솔직히 jQuery의 레이아웃매니저가 사용하기는 더 어렵게 느껴지는 이유는 무얼까요?




'Scripter > jQuery' 카테고리의 다른 글

jQuery Grid Plugin : jqGrid  (16) 2009.04.06
jQuery pageSlide  (0) 2009.01.12
jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기  (1) 2008.09.03
jQuery Loading바 구현하기  (2) 2008.07.08
Post by 넥스트리소프트 데꾸벅(techbug)
, |

jQuery pageSlide

Scripter/jQuery / 2009. 1. 12. 13:03

Web2.0이 대두되면서 기존의 레거시한 웹UI보다 조금은 다이나믹하고 다양한 Layout들이 나오기 시작했다.
탑-레프트-컨텐츠-푸터 방식의 eye-tracking이 중시되던 UI에서 기술적으로 많이 향상되기 시작하면서 다양한 메뉴와 UI화면들이 표현되기 시작했다.

마우스에 의한 각각의 메뉴표현 방식 : Ubiquity Pane in Mouse 

구현기술향상에 의한 다양한 UI를  소화하기 위해서 위의 그림과 같이 여러가지 메뉴가 만들어 졌다.
그중에 Firefox Mobile의 메뉴를 jQuery Plugin으로 구현한 소스가 있어 소개한다.
(위 메뉴중 2줄 좌측 Tray Menu)
복잡하고 표현하기 힘든 UI의 경우 잠시 페이지를 숨겼다 오른쪽 panel에서 보여줄때 상당히 유용할듯.(extjs의 panel collapse, expand와 기능이 비슷하나 jQuery pageSlide의 경우는 a 링크에 표현된 페이지를 오른쪽에서 보여준다는 면에서 다르다)

[사용법]
 <script type="text/javascript">   $(document).ready(function() {
       $('a').pageSlide({
           width: "350px"
       });
   });
 </script>

Demo-Source, Project Homepage



Post by 넥스트리소프트 데꾸벅(techbug)
, |

Web 2008 통계

Publisher/WEB2.0 / 2009. 1. 12. 11:05


오늘자(2009/01/09) Ajaxian 포스트중에 2008년 Web에 대한 통계에 대한것을 정리하다.

John Allsopp씨는  extensive state of the web 2008 survey에서 전세계, 다양한 분야의  1,200명의 웹전문가를 대상으로 사용하는 브라우저,OS, 웹사이트 개발시 사용한 기술들에 대해서 정리하였다.

해당 포스트를 보면, 국내사용자를 대상으로 한 설문조사가 아니라서 국내환경과는 조금은 맞지 않는 부분이 있긴 하지만 대부분이 인식하고 있는 부분이라 결과에 대해서는 어느정도 공감하고 있으리라 생각한다.
예상했던 대로 2008년 한해는 UI기술에 대해서 획기적으로 많은 변화와 웹의 미래를 엿볼수 있는 한해가 아니였나 싶다.

비윈도우즈 계열이 50%에 육박했으며 윈도우즈XP는 여전히 무거운 Vista보다 단지 1/4 의 유저많이 사용하고 있었다.
단지 기본브라우저로 IE를 사용하고 있는 사용자는 극히 드물었으며, Firefox가 50%의 시장점유율을 보였으며, Safari3 이 21%, 크롬은 단지 4%의 시장점유율을 보였다.   

웹개발 기술로써는 응답자의 3%는 전혀 웹유효성검증을 하지 않았으며 70%가 항상 유효성 검증을 하고 있었으며 10%의 응답자만이 table로 layout을 그리고 있었으며 90%가 CSS Style을 이용하여 페이지를 그리고 있었다.
자바스크립트 라이브러리에서는 JQuery가 60%로 압도적으로 우세하였다.

플러그인 기술로는 Flash가 60%를 Silverlight가 2%, 애플의 QuickTime이 놀랍게도 20%를 차지하고 있었다. 
개발기술로는 PHP가 63%, Javascript가 55% ASP.NET이 17%, Pythondl 15%, Ruby가 14%로 그 뒤를 잇고 있다.

모바일웹의 도래
기본 레거시 브라우저에 다른 브라우저를 고려한다면 어떤 브라우저를 고려하는가에 대한 응답에 대해서 20%가 모바일에 대해서 고려하고 있었다. 전통적인 래탑이나 데스탑에서 모바일로서 웹이 이동해 가고 있다는 뜻은 아닐까?


설문대상자
응답자중 33%가 디자이너, 거의 반인 48.5%가 개발자이며 그외 18%로 북아메리카, 유럽, 호주,뉴질랜드쪽 응답자가 많았다.



브라우저 및 OS


웹개발시 사용하는 테스트 브라우저
 


마크업기술

사용하는 마크업




마크업의 경우 얼마나 자주 유효성 검증을 하는가?
 

사용하는 DOCTYPE은?


테이블로 레이아웃을 그리는가?

사용하는 속성이 있는 태그는?

사용하고 있는 MicroFormat(RDFa)은?



CSS기술

웹디자인 철학

크로스브라우징

사이트 디자인시 Qurksmode로 사용하는지?

CSS를 사용하는 목적


CSS사용시 자주 사용하는 선택자 및 CSS3중 사용하는것은?

웹폰트를 사용하는지? 사용하면 어떤식으로 사용하는지?

SVG는 사용하는지? CANVAS태그를 사용하는지?

사이트개발시 노트북이나 PC이외의 장치에 대해서는 고려하는지?
이외 장치에 대해 고려하는 응답자중 15%정도가 mobile, 10%가 iPhone(역시 대세인가?) 1%가 Blackberry 5명이 Wii 에 대해서 고려한다고 응답하였다.



Javascript, Ajax, DOM에 대해서

개발시 자바스크립트를 사용하는 목적
응답자중 5%를 제외한 모든 응답자가 자바스크립트를 사용하였다. (나머지 5%는 뭐지??)

Javascript Coding Practices (무간섭 스크립트를 사용하는가?)
마크업과 자바스크립트를 분리하여 사용하는가에 대한 질문 (Unobtrusive Javascript)

W3C DOM 을 엄격히 고수하는가?


Javascript Library and Framwork

사용하는 자바스크립트 라이브러리나 프레임웍은?

Flash, Silverlight, 다른 embedded content

브라우저 플러그인을 사용하여 웹사이트를 구성하는가? 구성한다면 어떤 종류를 많이 사용하는가? 어떠한 목적으로 사용하나?


Back-end 개발언어 및 시스템

서버하드웨어를 구동하는 환경?


사용하는 웹서버는?

서버의 OS는?

많이 사용하는 데이타베이스는?


사용하는 언어는?


사용하는 서버프레임웍은?















아래는 각각의 통계자료에 바탕하여 패키지화한 페이지들이다 시간있을때 한번씩 둘러보는것도 좋을것 같다.


Javascript

  • jQueryDownload | Site | Docs | Plugins
    My favorite Javascript framework with a small footprint at 20k.
  • SWFObject 2.1 Download | Site
    Defacto script for embedding Flash content.
  • OffspringDownload | Site
    Automatically applies .first-child, .last-child, .only-child classes to DOM elements.
  • Dean Edwards IE7 ScriptDownload | Site
    Library makes IE5/6 behave like IE7.
  • NicEditDownload | Site
    Turns any textarea into a WYSIWYG editor.
  • Reflection 2.0Download | Site
    Adds a wet-floor effect to any image.

jQuery Essential Widgets

jQuery Specialized Widgets

  • Custom Checkboxes 1.1.0b2Download | Site
    Easily replace checkboxes and radios with custom graphics.
  • markItUp! 1.1.5Download | Site
    Turns textarea tag into a markup editor with various syntaxes.
  • jEditable 1.5.1Download | Site
    Makes any element a click-to-edit, Ajaxified item.
  • Date Picker 2.1.2Download | Site
    Creates a popup date picker to easily fill in forms.
  • Table Sorter 2.0.3Download | Site
  • Ingrid Datagrids 0.9.1Download | Site
  • Star RatingDownload | Site
    Creates a star rating interface based on a simple form.
  • jMedia 1.01Download | Site
    Flexible multi-media embedding. Supports: Flash, QT, Real, +.
  • BlockUI 2.14Download | Site
    Prevents activity with the window or elements when using AJAX.
  • jCarousel 0.2.3Download | Site
    Scroll items in horizontal or vertical order with controls.
  • Farbtastic 1.2 Color PickerDownload | Site
    HSL color picker widget.

jQuery “Extensions”

  • jQuery MetadataDownload
    Embed metadata in HTML tags. See code for examples.
  • jQuery Easing 1.3Download | Site
    jQuery library for advanced sliding-type animations.
  • Bgiframe 2.1.1Download | Site
    Used when you show elements over a select control in IE6.More Selectors 1.1.3.1Download | Site
    Adds a plethora of interesting selector options.

PHP/MySQL

  • CodeIgniter 1.7.0Download | Site | Docs | Forums
    Easy, documented framework by the devs of ExpressionEngine.
  • pChart 1.2.7Download | Site | Docs
    PHP classes to render high-quality charts.
  • mySQLDumperDownload | Site
    Quality backup solution for large mySQL databases.
  • PHP Development GuidelinesSite
    Best practices for PHP development from the EE guys.
  • PHPMailer 2.3Download | Site | Tutorial
    Send email with attachments, HTML and embedded images.
  • TAR/GZIP/BZIP2/ZIP Archives 2.1Download | Site
    Builds and downloads zip+ files on the fly.
  • ROS PDF ClassDownload | Site
    Module-free creation of PDF documents from within PHP.

Flash Components

  • Open Source FLV PlayerDownload | Site | Docs
    "OS FLV" - Open source, embedable player for Flash video.
  • JW FLV Player 3.12€30 | Download | Site
    SWF file that displays FLV videos. Free for personal use.
  • SlideShowPro$29 | Site | Wiki
    Gallery and slideshow Flash component. 60 options.
  • MonoSlideShow$19.95 | Site | Manual
    Gallery and slideshow SWF file. 150 options.
  • XSPF Flash MP3 Music Player (Slim)Download | Site
    SWF file that plays mp3 songs and playlists.
  • Date Slider 1.1Download | Site
    SWF file that selects a date range.
  • amChartsFree/€85/€275 | Site
    Customizable Flash charts. Free version embeds link to vendor.
  • TWF Flash Uploader€15/€50 | Site
    Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools

  • Standalone IE6Download | Site
    Download a standalone version of IE6 you can install in XP.
  • Allan Jardine's "Design" BookmarkletSite
    Four overlay tools: Grid, Ruler/Guides, Measurement, Crosshair.
  • XRAY BookmarkletSite
    Select any page element and display its style info.
  • SpriteNavi Menu Tool for FireworksSite
    Takes the work out of creating sprite-based horizontal menus.
  • Create Favicons in PhotoshopMac Plugin | Win Plugin
    Install this PS plugin to add ability to save in .ico format.
  • Javascript Email Enkoder (Spam protection)Site
    Protect email addresses by converting into encrypted JavaScript.

Grid Design

  • 960 Grid SystemDownload | Site
    CSS grid system based on 960px wide design in 2 col widths.
    12 column - 60px wide columns, 20px gutters.
    16 column - 40px wide columns, 10px gutters.
  • Blueprint CSS 0.8Download | Site
    Stylesheet set that combines some of the best thinking on css design. Grids, typography, reset included.
  • GridMaker2 for Photshop CS2+Download | Site
    Photoshop script that creates custom grids.
  • GridMaker2 (columns only)Download
    A modified version that only outputs columns.
  • Grid DesignerSite
    Online tool to design and preview a grid system. This one also includes side margins.
  • Grid CalculatorSite
    Online tool to design and preview a grid system.
  • Syncotype BookmarkletSite
    Overlays a customizable baseline grid on your web page.

Content Generators

  • Ajax Loading GraphicsSite
    Online tool to customize an animated loading graphic.
  • Loader GeneratorSite
    Another tool to customize one of 99 different loading graphics.
  • Stripe GeneratorSite
    Online tool to customize background stripe tiles.
    Also see Stripe Mania.
  • Background Maker (Tiled Backgrounds)Site
    Online tool to make pixel-by-pixel tiled backgrounds.
  • CornerShopSite
    Online tool to generate rounded corner graphics and code.
  • Dummy Text GeneratorSite
    Best tool for generating dummy content. Highly configurable.
  • LipsumSite | Copyable Text
    Generic lorem ipsum copy for roughing in content.
    Also see Lorem2.com and html-ipsum.com

Pixel Icons

Vector Icons

  • ClickBits$49 | Site
    792 arrows & web-related icons in OpenType font format.
  • InfoBits$29 | Site
    188 web-related icons & dingbats in OpenType font format.
  • 165 Vector Icons by GoSquaredSite | Preview
    Free, useful icons in SVG, JPG and Illustrator CS2 format.

Backgrounds & Styles

  • Illustrator - Basic Gradients by GoSquaredSite
    Free, Web2.0-style gradients in SVG or Illustrator CS2 format.
  • Illustrator - Web 2.0 Gradients by dezinerfolioSite
    130 Illustrator gradients. Matches PS gradients below.
  • Photoshop - Web 2.0 Gradients by dezinerfolioSite
    130 Photoshop gradients.
  • Photoshop - Web 2.0 Layer StylesSite
    131 Photoshop layer styles by deszinerfolio.com.
  • Photoshop - Web 2.0 Gradients by EuphorishSite
    70 Photoshop gradients.

Hosting

  • ServInt - My Current Host of Choice$49 | Site
    Well-regarded Virtual Private Server solution starting at $49. This site is hosted there. Better experience for me than MediaTemple. Cheaper than Mosso.
  • BlueHost - Decent low-cost host$6.95 | Site
    Hosting many sites here. Solid host for small to medium traffic. Great customer support and uptime. Unlimited domains.

Browser Compatibility

  • PNG Support in IEDownload | Site | Code
    Enable transparent PNG support in IE.
  • PNG Support in IE (CSS Only)Site | Code
    Enable transparent PNG support in IE6 using only CSS.
  • Whatever:hover in IEDownload | Site | Code
    Enables css :hover support in IE.
  • IE Browser Filtering/TargetingSite | Code
    Some hacks to target different browsers.
  • Misc Browser WorkaroundsCode
    Click the code link to see some collected browser workarounds.

Must-Know CSS Techniques

  • Sliding DoorsSite
    Not just for tabs, this technique is by far the most useful of all.
  • Taming ListsSite
    Transform the meager list into something useful.
  • CSS ResetSite
    Several variations exist here. Resetting all the styles to a baseline helps a lot in styling websites. Season to taste.
    Yahoo YUI Reset | Eric Meyer's Reset
  • Clearing Floats without Extra MarkupSite | Code
    Avoid adding extra markup to your documents using this method to clear floats.

General HTML Techniques

  • Resize a Popup to Fit an Image's SizeSite | Code
    Make a popup window resize perfectly to the image.

Typography

  • FontSquirrel - High Quality FREE FontsSite
    Free, hand-picked, licensed-for-commercial-use fonts.
  • Typical Cross-Browser Font CascadesSite | Sample
    Use these fonts lists when specifiying fonts in your css.
  • Alternative Font CascadesSample
    Interesting alternative cascades.
  • Default Mac FontsSite | Show
  • Default Windows FontsSite | Show

Firefox Extensions

  • Firebug 1.3Install | Site
    Edit, debug, and monitor CSS, HTML, and JavaScript live.
  • Web Developer's ToolbarInstall | Site
    Adds a menu and a toolbar with various developer tools.
  • View Formatted SourceInstall | Site
    Displays formatted source and CSS info for each element.
  • YSlowInstall | Site
    Analyzes pages and tells why they're slow. REQUIRES FIREBUG.
  • Dust-Me Selectors 2.11Install | Site
    Dust-Me Selectors finds unused CSS selectors in your site.
  • UrlParamsInstall | Site
    Displays the GET and POST parameters of a web page.
  • Link CheckerInstall | Site
    Checks all links on a webpage and reports broken ones.

Mac Software

  • MAMP 1.7.2Download | Site
    Installs a self-contained local hosting environment on your Mac. (M)ac, (A)pache, (M)ySQL, (P)HP.
  • VirtualHostX 1.1.1$9 | Download | Site | Tutorial
    Host multiple sites on your Mac. Useful with MAMP.
  • CSSEdit 2.6€29.95 | Download | Site
    The best CSS editor on the market. An absolute must-have.
  • TextMate 1.5.7€39 | Download | Site
    The best text editor ever.
  • Coda 1.6$99 | Download | Site
    Popular all-in-one web development application.

Services

  • DNSstuffSite
    Configure, monitor & fix problems with your domain & email.
  • Bulk Email with Campaign MonitorSite
    Campaign Monitor is an email newsletter sending service geared towards designers. $5 + 1¢ per address per mailing.
  • Domain Names by PickyDomains$50 | Site
    PickyDomains will help you come up with a good/available domain name for only $50.
  • Bust A Name Domain SearchSite
    Two-word combination searches and quick lookups.
  • NameBoy Domain SearchSite
    Good name suggestor tool.
  • Add This Social Bookmarking WidgetSite
    Widget helps visitors bookmark your page on social media sites.
  • ShareThis Social Bookmarking WidgetSite
    Another widget to help visitors bookmark your page on social media sites.
  • Web Development Project EstimatorSite
    Estimate the time and materials required for a proposed web project.
  • SSLmatic - Cheap SSL Certificates$19.99 | Site
    Discounted SSL certs from RapidSSL, GeoTrust and Verisign.

Cheat Sheets

Post by 넥스트리소프트 데꾸벅(techbug)
, |


Beautifully Documented Code를 보다가 일전에 Wiki 관련 Parser에 대해서 관심을 가지게 되었다.
그때는 Java로 된, 혹은 Server side 언어쪽만 찾아봤었는데 이렇게 자바스크립트로 된 파서를 찾아서 꿈쳐둔다.

웹페이지를 퍼블리싱할때 디자인적인 측면이 많이들 강조된다. 타이포나 문장에 대한 배치등 그리드에 대한것도 전적으로 디자이너의 몫으로 넘기기 쉽다. 그러나 사실 이러한 문서 작업은 디자이너들 보다는 퍼블리셔나 산출물작업의 양만으로 따진다면 서버 프로그래머들의 작업량이 더 많다.

사내프로젝트를 진행하다가 든 생각중 하나가 실제 개발자들이 개발에 대한 지식이나 업무에 대해서 공유할수 있는 사이트를 만들어 보고 싶었다. 이슈(Trac, Bugzilla) 소스의 공유(CVS,SVN), 혹은 설계문서나 산출물들을 한곳에서 문서로 관리할수 잇다면 얼마나 좋을까 생각한것이 Wiki였다.  
Wiki를 만든다는것은 엄청난 자원의 손실이며 사실 마음에 드는 Wiki또한 없었다.  

뭐 잡설은 집어치고,  이전 레이텍(Latex)이나 HanTex과 같이 화면상에 문서를 구성할수 있게 실시간으로 스크립트를 이용해서 만들어 준다면 얼마나 좋을까? 바로 Creole Parser가 이러한 것을 가능하게 해주었다.
 





'Scripter > JAVASCRIPT' 카테고리의 다른 글

offsetParent의 모든것!  (0) 2010.02.04
자바스크립트 delete 연산자에 대한 고찰  (8) 2009.11.18
자바스크립트 가이드  (0) 2008.12.03
JsonML 활용하기  (0) 2008.11.12
CSS & JAVASCRIPT 최적화 도구  (0) 2008.10.26
Post by 넥스트리소프트 데꾸벅(techbug)
, |