솔라리스 10에서 vmware-tools 설치

2009/02/10 00:14
1. VM –> Instal VMWare Tools
2. Click install
3. Launch –> Applications –> Utilities –> Terminal
4. cp /cdrom/vmwaretoos/vmware-solaris-tools.tar.gz /tmp/
5. cd /tmp
6. gunzip vmware-solaris-tools.tar.gz
7. tar xvf vmware-solaris-tools.tar
8. cd vmware-tools-distrib
9. ./vmware-install.pl
10. Enter to accept default directory at /usr/bin
11. Enter to accept default directory at /etc
12. Enter to accept default directory at /etc/init.d
13. Enter to accept default directory at /usr/sbin
14. Enter to accept default directory at /usr/lib/vmware-tools
15. Enter to accept creating the directory
16. Enter to accept default documentation directory at /usr/share/doc/vmware-tools
17. Enter to accept creating the directory
18. Enter to accept executing /usr/bin/vmware-cofnig-tools.pl
19. Enter to accept creation of /etc/X11/xorg.conf file
20. Enter the appropriate number that represent the correct resolution for your monitor.
21. Restart X session or reboot
이올린에 북마크하기

happyness Server Management ,

2009/02/10 00:14 2009/02/10 00:14
[로그인][오픈아이디란?]

The Complete RRDTool-based Graphing Solution Part III

2008/06/18 20:05
이제 기본적으로 cacti가 실행될 환경이 만들어 졌다.
순서대로 cacti를 설치한다.

1. 설치전 작업

$ ln -s /usr/local/rrdtool/bin/rrdtool /usr/local/bin/rrdtool
$ ln -s /usr/local/php/bin/php /usr/local/bin/php

rrdtool: /usr/local/rrdtool 에 설치되었다 가정
php: /usr/local/php 에 설치되었다 가정.

2. cacti 프로그램 압축해제
웹서비스가 될 저장소는 /data4/httpdata 로 정한다.
$ tar -xvzf cacti-0.8.7b.tar.gz
$ mv cacti-0.8.7b cacti

3. PHP 설정
/etc/php.ini 파일을 열어서 extension_dir을 찾아 extension_dir = "./"을  extension_dir = /etc/php.d 로 입력 /etc 하위에 php.d 디렉토리 생성 후 mysql.ini , snmp.ini를 생성한다.
$ mkdir /etc/php.d
$ touch /etc/php.d/mysql.ini
$ touch /etc/php.d/snmp.ini

mysql.ini에 아래와 같이 추가
; Enable mysql extension module
extension=mysql.so

snmp.ini에 아래와 같이 추가
; Enable snmp extension module
extension=snmp.so


참고: PHP 4.3.5 또는 이하 버전을 사용하는 경우 아래 라인을 추가하며, 그 이상 버전의 경우 삭제한다.
session.save_path=/tmp

템블릿을 업로딩 할 경우 아래 업로드 옵션이 설정되어 있는지 확인한다.
file_uploads = On

3. Apache 설정
Apache와 PHP가 정상적으로 설치된 경우 별도 설정할 것이 없으며, DirectoryIndexindex.php가 설정되어 있는지 확인 한후 Apache를 재시작 한다.

4. MySQL 설정
cacti가 설치된 디렉토리로 이동하여 데이터 베이스를 설정한다.
$ cd /data4/httpdata/cacti
$ mysql -u root -p
mysql> create database cacti;
mysql> use cacti;
mysql> source cacti.sql;
mysql> GRANT ALL ON cacti.* TO
cactiuser@localhost IDENTIFIED BY 'cacti';
mysql> flush privileges;


5. cacti 데이터 베이스 환경설정
다운받아 압축을 푼 cacti 디렉토리의 include/config.php 파일을 열어 위에서 생성한 접속정보를 넣어준다.
# Edit include/config.php and specify the database type, name, host, user and password for your Cacti configuration.
$database_type = "mysql";
$database_default = "cacti";
$database_hostname = "localhost";
$database_username = "cactiuser";
$database_password = "cacti";


6. crontab 설정
데이터를 수집하기 위해 /ect/crontab 을 열어 아래 라인을 추가한다. 5분에 한번씩 데이터를 수집한다.
*/5 * * * * httpdusr php /data4/httpdata/cacti/poller.php > /dev/null 2>&1

참고: httpduser는 Apache를 실행하는 사용자로 등록하였으나, 그렇지 않은 경우, rralog 디렉토리를 httpduser가 쓰기 가능한 권한을 설정해야 한다.

7. cacti 시작
http://[yourdomain]/cacti 로 접속한다.
최초 접속하게 되면 기본 환경설정 페이지가 나타나며, 이 스텝을 완료하고 난후 cacti에 로그인 할 수 있다. 접속 계정은 admin/admin이며, 최초 접속시 암호를 변경해야 한다.
cacti step 1
[Step 1: 최초 접속화면]


cacti step 2
[Step 2: 신규설치 인지 업그레이드인지 선택, 여기서는 신규설치 선택]


cacti step 3
[Step 3: cacti가 사용할 기본 프로그램 위치 설정]

RRDTool Utility Version은 1.2.x를 선택한다. 아직 1.3.0은 지원되지 않고 있다.

cacti step 4
[Step 4: 첫 로그인 화면, admin/admin으로 로그인한다.]


cacti step 5
[Step 5: 암호를 재설정하라는 메시지가 출력된다]


cacti step 6
[Step 6: 환경설정이 모두 끝나 cacti의 첫 화면이 나타났다.]


이올린에 북마크하기(0) 이올린에 추천하기(0)

happyness Server Management ,

2008/06/18 20:05 2008/06/18 20:05
[로그인][오픈아이디란?]

The Complete RRDTool-based Graphing Solution Part II

2008/06/15 16:16
여기서는 cacti가 동작하기 위한 필요 팩키지 설치에 대하여 알아본다.
각 배포본에 따른 환경이 조금씩 다를 수 있으며,  오래된 배포본일 수록 설치된 팩키지를 업그레이드 해야 할 수도 있다.

본 설치환경은 Fedora Core 4이다.

리눅스에서 cacti 실행환경 및 의존성
cacti         cacti-0.8.7b.tar.gz
  Apache       httpd-2.0.63.tar.gz
    PHP     php-4.4.8.tar.gz
  MySQL       mysql-5.0.51b.tar.gz
  RRDTool       rrdtool-1.3.0.tar.gz
    cairo     cairo-1.6.4.tar.gz
      pixman   pixman-0.11.4.tar.gz
      freetype   freetype-2.3.6.tar.gz
      fontconfig   fontconfig-2.6.0.tar.gz
    pango     pango-1.21.0.tar.gz
      glib2   glib-2.16.3.tar.gz
  Net-SNMP       net-snmp-5.4.1.1.tar.gz
    beecrypt     beecrypt-devel-4.1.2-8.i386.rpm
    elfutils-libelf-devel     elfutils-libelf-devel-0.108-1.i386.rpm

프로그램 설치
1. 사전 작업
버전 업그레이드 및 설치시 라이브러리를 참조하지 못하는 팩키지는 삭제한후 소스를 다운받아 build한다.
fontconfig-2.2.3-13
freetype-2.1.9-2
freetype-devel-2.1.9-2
glib2-devel-2.6.6-1
glib2-2.6.6-1
pango-1.8.1-2


삭제 방법: 의존성으로 인하여 다른 팩키지를 삭제할 수 있으므로 --nodeps 옵션을 준다.
# rpm -e --nodeps fontconfig-2.2.3-13


2. 설치
컴파일시 라이브러리를 찾지 못 할 수 있으므로 아래와 같이 설정한다.
# export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:/usr/lib/pkgconfig


각 라이브러리는 의존성 및 버전에 영향을 받으므로 최하단 부터 설치한다.
rrdtool-1.3rc9
cairo-1.6.4
pixman-0.11.4
freetype-2.3.5
fontconfig-2.6.0
- 소스 컴파일한 위치에서 fontconfig.pc 파일을 /usr/local/lib/pkgconfig로 복사
pango-1.21.2
glib-2.15.4

net-snmp-5.4.1.1
컴파일시 Perl 버전과 매치되지 않아 메시지가 출력되면 아래와 같이 세팅한다.
버전을 맞추어도 된다.
# export NETSNMP_DONT_CHECK_VERSION=1

아래 패키지가 필요하다 다운받아 설치한다.
beecrypt-devel-4.1.2-8.i386.rpm
elfutils-libelf-devel-0.108-1.i386.rpm

./configure
./make
./make install

PHP
net-snmp를 사용하려면 snmp 기능을 사용하기 위해 '--with-snmp' 옵션을 사용해야 한다.
snmp 옵션이 사용되었는지는 phpinfo() 함수를 이용하여 알 수 있다.


3. 환경설정
net-snmp
    컴파일후 소스 디렉토리에 있는 EXAMPLE.conf를 /usr/local/share/snmp에 snmpd.conf로 복사한다.
cp EXAMPLE.CONF /usr/local/share/snmp

   /etc/init.d 에 snmpd 파일을 아래와 같이 생성한다.
#!/bin/sh
#
# Start snmpd
#
start() {
export LD_LIBRARY_PATH=.:/lib:/usr/lib:/usr/local/lib
echo "Starting SNMPD"
/usr/local/sbin/snmpd -c /usr/local/share/snmp/snmpd.conf
}
stop() {
echo "Stopping SNMPD"
killall snmpd > /dev/null 2>&1
killall snmpd > /dev/null 2>&1
}
restart() {
stop
start
}
case "$1" in
start)
start
;;
stop)
stop
;;
restart)
restart
;;
cleanup)
;;
*)
echo $"Usage: $0 {start|stop|restart}"
exit 1
esac
exit $?


이로서 cacti를 사용할 기본적인 팩키지를 모두 설치했다.
다음 Part에서 cacti를 설치해본다.

이올린에 북마크하기(0) 이올린에 추천하기(0)

happyness Server Management ,

2008/06/15 16:16 2008/06/15 16:16
[로그인][오픈아이디란?]

The Complete RRDTool-based Graphing Solution Part I

2008/06/14 01:03
시스템 모니터링 툴로 MRTG를 대체하는 RRDTool이 있고, 이것을 많이 사용하고 있다. 초보인 나로서는 RRDTool을 설치하고, 설정하여 그래핑하는 일은 쉬운일이 아니다.
이런 일련의 일을 보다 쉽게 시스템 상황을 그래프화 할 수 있는 cacti툴은 Apache, PHP, MySQL, NET-SNMP 기반으로 동작하며, MySQL을 이용한 데이터 소스 관리, RRDTool을 이용한 그래프 생성, 사용자 관리등을 지원한다. 특히 템플릿을 통한 데이터소스 및 그래프 지원은 cacti를 무한히 확장할 수 있도록 도와준다.

What is cacti
cacti
Cacti is a complete frontend to RRDTool, it stores all of the necessary information to create graphs and populate them with data in a MySQL database. The frontend is completely PHP driven. Along with being able to maintain Graphs, Data Sources, and Round Robin Archives in a database, cacti handles the data gathering. There is also SNMP support for those used to creating traffic graphs with MRTG.


Data Sources
To handle data gathering, you can feed cacti the paths to any external script/command along with any data that the user will need to "fill in", cacti will then gather this data in a cron-job and populate a MySQL database/the round robin archives.

Data Sources can also be created, which correspond to actual data on the graph. For instance, if a user would want to graph the ping times to a host, you could create a data source utilizing a script that pings a host and returns it's value in milliseconds. After defining options for RRDTool such as how to store the data you will be able to define any additional information that the data input source requires, such as a host to ping in this case. Once a data source is created, it is automatically maintained at 5 minute intervals.

Graphs
Once one or more data sources are defined, an RRDTool graph can be created using the data. Cacti allows you to create almost any imaginable RRDTool graph using all of the standard RRDTool graph types and consolidation functions. A color selection area and automatic text padding function also aid in the creation of graphs to make the process easier.

Not only can you create RRDTool based graphs in cacti, but there are many ways to display them. Along with a standard "list view" and a "preview mode", which resembles the RRDTool frontend 14all, there is a "tree view", which allows you to put graphs onto a hierarchical tree for organizational purposes.

User Management
Due to the many functions of cacti, a user based management tool is built in so you can add users and give them rights to certain areas of cacti. This would allow someone to create some users that can change graph parameters, while others can only view graphs. Each user also maintains their own settings when it comes to viewing graphs.

Templating
Lastly, cacti is able to scale to a large number of data sources and graphs through the use of templates. This allows the creation of a single graph or data source template which defines any graph or data source associated with it. Host templates enable you to define the capabilities of a host so cacti can poll it for information upon the addition of a new host.


이올린에 북마크하기(0) 이올린에 추천하기(0)

happyness Server Management ,

2008/06/14 01:03 2008/06/14 01:03
[로그인][오픈아이디란?]

Table for Layout vs CSS Layout

2008/06/09 00:41
웹에 종사하는 많은 사람들이 이미 웹표준에 대해 경험하고 실무에 적용하고 있다.
본인의 경우 웹표준에 대해 접하기 시작한 것은 작년 말부터 이며, 실제 실무에 적용하기 시작한 것은 그리 얼마 되지 않는다.
테이블 코딩에서 완전한 CSS로의 전환은 많은 시행착오를 필요로 했다. CSS가 여타 프로그램 언어처엄 에러를 명시적으로 표시해주지 않으니 디버깅 시간을 많이 필요로 했다. 하지만 아래의 글과 같이 많은 이점을 가져다 준다.
특히 고객에게 금전적 이익을 가져다 줄 수 있다는 것이다. 이부분에 대하여 많은 이야기가 있을 수 있고 사이트 성격에 따라 달라질 수 있겠으나(개발 공수가 늘어 프로젝트 비용이 증가할 수도 있겠다.) 본인이 관리하는 사이트의 경우 웹표준으로 전환하고 전체 페이지 사이즈가 78%나 준것을 경험할 수 있었다. 이것은 실제 네트웍에 흐르는 데이터가 이 만큼 감소한다는 이야기로 방문자가 많은 사이트 일수록  비용적 측면에서 확실히 이득이 된다.
꿈일 지도 모르나 전세게 웹사이트가 웹표준으로 이전을 한다면 전체 네트웍의 소통이 점더 원할하고, 투자비용도 아낄 수 있지 않을까 생각해 본다.

아래의 내용은 정찬명님의 포스팅한 글을 싣는다.


정찬명님의 글
http://naradesign.net/wp/2007/02/03/113/


약 1년 전 네이버 블로그를 사용하면서 동일한 실험을 했던 적이 있습니다. 그 당시에는 Table Layout과 DIV Layout을 비교한다고 말했었지만 사실 Table Layout 이라는 말과 DIV Layout 이라는 말은 모두 잘못된 표현입니다. Table Layout 이라는 용어는 Table이 격자형의 2차원 데이터를 마크업 하는 용도를 지니고 있다는 점에서 Layout 이라는 표현과 함께 사용한 것이 잘못된 표현이며, DIV Layout 이라는 용어는 DIV가 의미를 그룹짓는 용도를 지니고 있다는 점에서 역시 Layout과 결합한 것은 잘못된 표현 입니다. 결국 Layout 이라는 것은 화면배치를 위한 표현에 해당하기 때문에 어떤 (X)HTML 요소와도 조합하여 사용하는 것은 잘못된 표현이라고 할 수 있습니다. Table Layout 이라는 말은 사실 ‘Table for Layout’ 즉, ‘레이아웃을 위하여 사용된 테이블’ 정도로 밖에 표현할 수 없습니다. 두 가지 표현이 별반 차이가 없는 것처럼 느껴지는 분들도 계실테지만 사실 엄청난 차이가 존재합니다. 전자는 Table이 Layout을 위하여 사용되고 있고 또 그럴 수도 있다는 것을 전제 하지만 후자는 Table이 Layout 용도로 사용되는 것을 확실하게 경계하였기 때문에 사용되는 표현입니다. 어쨌거나 이미 네이버에서만 162분이나 스크랩을 하셨고 저는 1년이 지난 최근에서야 해당 포스트를 수정하였는데 1년동안 여러 분들께 잘못된 정보를 제공했다는 사실 때문에 약간의 죄책감을 가지게 되었습니다. 그것을 만회할 요량으로 다시 해당 코드를 손질하고 이곳에 올려놓습니다. 이제는 자수하여 광명찾고 싶습니다.

Table for Layout 예제보기 CSS Layout 예제보기
Table for Layout CSS Layout

웹 표준 방식의 CSS Layout은 콘텐트가 논리적으로 선형화 됩니다.

상기 두 개의 이미지는 동일한 Layout을 제공하고 있지만 코드는 각각 다릅니다. 이미 짐작하고 계셨겠지만 이번에는 CSS를 제거한 상태로 한번 보여드리겠습니다. CSS를 제거하게 되면 콘텐트가 선형화 되는 모습을 시각적으로 확인할 수 있고 선형화 하였을 때 콘텐트의 나열 순서에 무리가 없다면 그것은 어떤 장치에서 보더라도 논리적으로 바르게 이해할 수 있습니다. 왼쪽은 화면배치를 위하여 Table이 사용된 페이지이며 오른쪽이 CSS를 이용하여 Layout된 페이지 입니다. Opera Mini와 같은 휴대용 웹 브라우징 장치는 웹 페이지를 렌더링 할 때 Table을 모두 걷어내고 CSS조차 제거된 상태로 표시합니다. 따라서 아래 두 가지 경우의 페이지 가운데 어떤 페이지가 논리적으로 선형화 될 것인지는 굳이 보지 않더라도 쉽게 추측이 가능합니다. 사실 이것은 CSS Layout의 영향이라기 보다는 Markup을 잘 했기 때문에 볼 수 있는 결과 입니다. 하지만 거꾸로 생각하면 표현요소가 Markup으로부터 완전히 분리되어 있기 때문에 이렇게 논리적으로 Markup 하는것이 가능해 집니다. Layout에 Table을 사용하는 경우는 마크업이 표현요소를 포함하고 있기 때문에 콘텐트를 논리적으로 배치하려고 시도하면 표현문제와 충돌하게 되고 결국 논리보다는 표현을 위한 용도로 마크업을 사용하게 되어 논리적인 배치와는 거리가 멀어지게 됩니다.

CSS가 제거된 Table for Layout 예제보기 CSS가 제거된 Web Standard Layout 예제보기
Table for Layout Without CSS CSS Layout Without CSS

보통 Table을 선형화 하더라도 콘텐트의 순서가 완전히 뒤죽박죽으로 인식되지는 않습니다. 왜냐하면 Table을 걷어내는 경우 좌측 상단으로부터 우측 하단으로 콘텐트가 선형화 되는데 그러한 순서에 맞게 페이지의 콘텐트를 배치하는 경우도 있기 때문입니다. 그러나 그것은 운이 아주 좋은 경우이며 대부분의 경우는 논리적인 순서에 문제가 생기게 됩니다.

CSS Layout은 Table for Layout에 비하여 파일의 용량을 50% 이상 절감해 줍니다.

무엇인가 원하는 위치에 표시하기 위하여 Table을 Layout에 사용하는 경우는 <table><tr><td>내용</td></tr></table> 형식으로 코딩 되지만 CSS Layout은 <div>내용</div> 형식으로 코딩 됩니다. 예제코드 전체를 보여드리겠습니다. 화면(또는 지면) 관계상 코드를 모두 담아내면 화면이 너무 커지므로 코드의 서체크기를 일부러 줄여 놓았습니다. 코드를 자세히 확인하시려면 그냥 복사해서 메모장에서 볼 것을 권합니다.

Table for Layout CSS Layout
89 line 39 line
2,661 byte 1,027 byte
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr” />
<title>Table for Layout</title>
<link href=”TableForLayout.css” rel=”stylesheet” type=”text/css” />
</head>
<body style=”margin:0″>
<p id=”moveTo”><a href=”CSSLayout.html”>Go to CSS Layout</a></p>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”20″>
<tr>
<td colspan=”3″ valign=”top” id=”header”>Table for Layout</td>
</tr>
<tr>
<td width=”20%” height=”300″ valign=”top” style=”background:#666″><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″ id=”menu”>
<tr>
<th style=”height:30px; background:#999″>2Depth Title </th>
</tr>
<tr>
<td>Menu1</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
<tr>
<td>Menu2</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
<tr>
<td>Menu3</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
<tr>
<td>Menu4</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
<tr>
<td>Menu5</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
</table></td>
<td width=”60%” height=”300″ valign=”top” style=”background:#999″><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″ id=”pageTitle”>
<tr>
<th style=”height:30px”>3Depth Title </th>
</tr>
</table>
<table width=”100%” cellspacing=”0″>
<tr>
<td id=”text”>Content </td>
</tr>
</table></td>
<td width=”20%” height=”300″ valign=”top” style=”background:#CCC”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″ id=”links”>
<tr>
<th style=”height:30px; background:#666″>Links </th>
</tr>
<tr>
<td>Link List 1</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
<tr>
<td>Link List 2 </td>
</tr>
<tr>
<td class=”line”></td>
</tr>
<tr>
<td>Link List 1</td>
</tr>
<tr>
<td class=”line”></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan=”3″ valign=”top” id=”footer” style=”background:#333″><a href=”http://naradesign.net/”>naradesign.net</a></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr” />
<title>CSS Layout</title>
<link href=”CSSLayout.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p id=”moveTo”><a href=”TableForLayout.html”>Go to Table for Layout</a></p>
<h1>CSS Layout</h1>
<div id=”center”>
<div id=”menu”>
<h2>2Depth Title </h2>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div id=”content”>
<h3>3Depth Title </h3>
<div id=”text”> Content </div>
</div>
<div id=”links”>
<h3>Links</h3>
<ul>
<li>Link List 1</li>
<li>Link List 2</li>
<li>Link List 3 </li>
</ul>
</div>
</div>
<address id=”footer”>
<a href=”http://naradesign.net/”>naradesign.net</a>
</address>
</body>
</html>
Table for Layout CSS Layout
17 line 23 line
1,030 byte 1,771 byte
* { font-size:small; font-family:Arial}
a { font:inherit; color:#FFF; text-decoration:none}
a:hover { text-decoration:underline}
#moveTo { position:absolute; top:4em; right:2em}
#header { font-size:5em; color:#FFF; font-weight:bold; background:#000}
#menu th { border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left}
#menu td { font-size:small; font-weight:bold; color:#FFF}
#menu td.line { height:1px; padding:0; background:#FFF}
#pageTitle { margin-bottom:1em; background:#999}
#pageTitle th,
#link th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666}
#text { color:#FFF;}
#links { margin-bottom:1em}
#links th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666}
#links td { color:#FFF}
#links td.line { height:1px; padding:0; background:#FFF}
#footer { font-family: Verdana; font-size:x-large; font-weight:bold; font-style:italic; color:#FFF}
* { margin:0; padding:0; font-size:small; font-family:Arial}
h1 { font-size:5em; color:#FFF; font-weight:bold; background:#000; padding:20px}
h2 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#999; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0}
h3 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#666; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0}
a { font:inherit; color:#FFF; text-decoration:none}
a:hover { text-decoration:underline}
#moveTo { position:absolute; top:4em; right:2em}
#center { position:relative; overflow:hidden}
#menu { position:relative; width:20%; background:#666; float:left; height:300px}
#menu ul { margin:20px; margin-top:0; padding:0}
#menu li { padding:5px; border-bottom:1px solid #FFF; font-weight:bold; color:#FFF; list-style:none}
#content { position:relative; background: #999; font-size:small; font-family:Verdana; color:#FFF; width:60%; float:left; height:300px}
#content h3 { margin-bottom:1em}
#text { margin:20px; margin-top:0; line-height:150%; font-family:Verdana}
#text table { border-left:1px solid #CCC; border-top:1px solid #CCC}
#text table caption { font-weight:bold; text-align:left}
#text table th { background:#666}
#text table th,
#text table td { padding:.5em; border-right:1px solid #CCC; border-bottom:1px solid #CCC; text-align:center}
#links { position:relative; float:left; background:#CCCCCC; width:20%; clear:right; height:300px}
#links ul { margin:20px; margin-top:0; padding:0}
#links li { padding:5px; border-bottom:1px solid #FFF; color:#FFF; list-style:none}
#footer { position:relative; clear:both; background: #333; font-family: Verdana; font-size:x-large; font-weight:bold; color:#FFF; padding:20px }

CSS Layout의 경우 HTML 파일의 용량은 50% 이상 절감됩니다. CSS파일의 용량은 약 70% 정도 증가하였지만 CSS파일은 웹 사이트 접속시 딱 한번 로드되고 로컬 PC의 캐시메모리에서 재활용 되므로 전송량에 미치는 부하는 무시해도 좋은 수준입니다. 이 실험에서는 비록 하나의 웹 페이지를 단순 비교하였지만 웹 페이지의 수가 증가하면 증가할 수록 웹 표준 방식의 CSS Layout Code는 경제적인 효과가 배가됩니다.

사람이나 로봇(컴퓨터)이 이해하기 쉬운 구조가 됩니다.

코드가 줄어들기 때문에 개발자들이 코드보기가 수월해 진다는 것은 쉽게 추측할 수 있습니다. 즉, 삽질을 줄여주죠. 하지만 그런 점은 겨우 부가적인 이점에 불과합니다. 웹 표준 방식의 HTML 코드는 모바일 장치를 포함한 어떤 종류의 웹 브라우저 장치에서 출력 되더라도 그것을 이해할 수 있는 수준으로 렌더링 됩니다. 또한 검색엔진으로부터 높은 점수를 받습니다. 특히 Title 태그와 h1~h6 등의 제목태그 및 alt 텍스트를 사용할 때 그렇습니다. 검색엔진의 접근성이 높아져서 피검색 될 확률이 높아집니다.

유지보수가 쉬워지고 유지보수 비용을 절감시켜 줍니다.

웹 사이트의 디자인만 개편한다고 가정할 때 Table 기반으로 Layout된 페이지들은 Layout을 변경하기 위하여 수천 페이지의 HTML 문서를 모두 열어서 수정해야 하는 고통이 따릅니다. 하지만 CSS 기반으로 Layout된 웹사이트는 HTML 파일은 열어볼 필요조차 없어집니다. 불과 몇개의 CSS파일을 수정하는 것으로 매우 간단하게 수천개의 웹 페이지 디자인을 개편할 수 있습니다. 표현요소를 CSS로 완벽하게 분리했다면 HTML파일을 수정해야 하는 상황은 오직 데이터가 업데이트 될 때 뿐입니다.

웹 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다.

웹은 태어날 때부터 보편성을 전제하였습니다. 즉, 웹 표준만 지키면 누구나 접근할 수 있도록 이미 그렇게 설계 되어 있다는 의미 입니다. 가장 짧은 시간에 접근성을 크게 증진시킬 수 있는 방법으로서 image 요소에 대한 alt 텍스트를 강조하고 있는데 이것은 WCAG 지침이기 이전에 XHTML 표준 문법입니다. 실제로 WCAG 지침은 XHTML의 표준 문법 가운데 접근성 이슈만 추려내 놓고 그것을 지키라고 말하는 문장이 많습니다.

이올린에 북마크하기(0) 이올린에 추천하기(0)

happyness WEB ,

2008/06/09 00:41 2008/06/09 00:41
[로그인][오픈아이디란?]

새로운 직업군 웹 퍼블리셔

2008/06/03 00:29
웹표준이라는 화두 속에서 웹퍼블리셔라는 직업군이 새롭게 등장하고 있다.
어떻게 보면 예전의 코더에서 퍼블리셔라는 것으로 진화한다고볼 수도 있겠으나, 코더 보다는 좀더 상위 개념으로 보는게 좋을것 같다는 생각을 한다.

현업에서, HTML을 XHTML로 전환하고 웹표준에 맞게 코딩하고 하는 일련의 작업을 진행하면서 느끼는 것은 어떻게 웹표준에서 말하는 구현, 동작, 표현을 분리하여 얼마나 구조적인 문서를 만드느냐, 외부 검색엔진(Google, Yahoo, ...)에 대한 대응, 접근성 향상, 크로스 브라우징등등 많은 것을 고려한다는 것은 그렇게 쉽게 다가오는 문제는 아닌것 같다.

이렇다 보니 나 스스로가 좀더 전문적인 지식을 습득해야 하거나, 전문적인 지식을 습득한 사람이 필요로 하게된다. 이런 것들이 좀더 발전하여 전문지식을 습득하고, 계획 및 통제, 관리를 할 수 있는 사람들을 웹퍼블리셔라 부르고 있다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

happyness WEB ,

2008/06/03 00:29 2008/06/03 00:29
[로그인][오픈아이디란?]

웹표준에서 HTML이 아닌 XHTML을 선택하나

2008/06/03 00:14
웹문서를 작성하는데 있어 HTML, XHTML, XML등을 이용하여 표현한다. 하지만 웹표준을 준수하고 표현하는 데에서는 XHTML을 이용한다. XHTML을 사용하는 이유는 사용가능한 요소와 속성이 HTML과 거의 같고, 배우기 쉬우며, 현재 나와 있는 브라우져들이 이를 충분히 지원하기 때문이다.

또한 아래와 같은 큰 특징들이 있다.

1. 빠른 데이터 처리와 안정적 브라우져 동작
2. 데이터 재 사용과 정보 공유 촉진
3. 네임스페이스 이용과 다양한 기기 대응


이올린에 북마크하기

happyness WEB/XHTML and CSS , ,

2008/06/03 00:14 2008/06/03 00:14
[로그인][오픈아이디란?]

WEB 2.0의 10대 기술 요소

2008/05/26 12:54
과연 WEB 2.0 이 무엇일까? 트랜드가 아닐까 생각한다.
모질라가 개발되고, 인터넷이 막 시작되던 시절에는 그 자체로만으로 과히 혁명적 이었다. 이 렇게 시간이 흐로고 기술들이 무르익어 제2의 개화기를 맞이 했다고 생각해도 될것 같다.

WEB 2.0을 이루는 요소들은 아래와 같다.

1. 웹 표준(XHTML/CSS)
2 브라우저 지원(Firefox, Safari)
3 유니코드 (UTF-8)
4 논리적 주소체계 (Logical URI)
5 컨텐츠 신디케이션(RSS/Atom, RDF)
6 오픈 API (REST, SOAP, Web Services)
7 집단 지성(Folksnomy, Tag)
8 가벼운 서비스 프레임웍(Python, Ruby on Rails)
9 풍부한 사용자 경험(Ajax, Flex)
10 확장 기능 (Firefox Extensions, Widget)
이올린에 북마크하기

happyness WEB

2008/05/26 12:54 2008/05/26 12:54
[로그인][오픈아이디란?]

Sun ONE Web Server 6.1 에서의 301 Redirection 설정하기

2008/05/24 14:50
Sun ONE Web Server 6.1 의 경우 Administrator를 통해 Redirection을 설정할 수 있으나, 301이 아닌 302 코드를 클라이언트에 보내게 된다. 그래서 302코드를 301코드로 변경하여 클라이언트에 보내도록 설정해야 한다.

아래와 같이 config 디렉토리 및의 obj.conf에 코드를 삽입 후 서버를 재시작 한다.

<Object name="default">
...
...
..
<Client code="302">
Output fn="set-variable" error="301" noaction="true"
</Client>
</Object>

※ 주의: Object의 하단에 삽입한다.

위와 같이 등록한 후 NameTrans를 설정하면 클라이언트에 301 코드를 전송하게 된다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

happyness Web Server & WAS ,

2008/05/24 14:50 2008/05/24 14:50
[로그인][오픈아이디란?]

SEO 의 10가지 실수

2008/05/24 01:09

1. Targetting the wrong keywords
This is a mistake many people make and what is worse – even experienced SEO experts make it. People choose keywords that in their mind are descriptive of their website but the average users just may not search them. For instance, if you have a relationship site, you might discover that “relationship guide” does not work for you, even though it has the “relationship” keyword, while “dating advice” works like a charm. Choosing the right keywords can make or break your SEO campaign. Even if you are very resourceful, you can't think on your own of all the great keywords but a good keyword suggestion tool, for instance, the Website Keyword Suggestion tool will help you find keywords that are good for your site.


2. Ignoring the Title tag
Leaving the <title> tag empty is also very common. This is one of the most important places to have a keyword, because not only does it help you in optimization but the text in your <title> tag shows in the search results as your page title.


3. A Flash website without a html alternative
Flash might be attractive but not to search engines and users. If you really insist that your site is Flash-based and you want search engines to love it, provide an html version. Here are some more tips for optimizing Flash sites. Search engines don't like Flash sites for a reason – a spider can't read Flash content and therefore can't index it.


4. JavaScript Menus
Using JavaScript for navigation is not bad as long as you understand that search engines do not read JavaScript and build your web pages accordingly. So if you have JavaScript menus you can't do without, you should consider build a sitemap (or putting the links in a noscript tag) so that all your links will be crawlable.


5. Lack of consistency and maintenance
Our friend Rob from Blackwood Productions often encounters clients, who believe that once you optimize a site, it is done foreve. If you want to be successful, you need to permanently optimize your site, keep an eye on the competition and – changes in the ranking algorithms of search engines.


6. Concentrating too much on meta tags
A lot of people seem to think SEO is about getting your meta keywords and description correct! In fact, meta tags are becoming (if not already) a thing of the past. You can create your meta keywords and descriptions but don't except to rank well only because of this.


7. Using only Images for Headings
Many people think that an image looks better than text for headings and menus. Yes, an image can make your site look more distinctive but in terms of SEO images for headings and menus are a big mistake because h2, h2, etc. tags and menu links are important SEO items. If you are afraid that your h1 h2, etc. tags look horrible, try modifying them in a stylesheet or consider this approach:
http://www.stopdesign.com/articles/replace_text.


8. Ignoring URLs
Many people underestimate how important a good URL is. Dynamic page names are still very frequent and no keywords in the URL is more a rule than an exception. Yes, it is possible to rank high even without keywords in the URL but all being equal, if you have keywords in the URL (the domain itself, or file names, which are part of the URL), this gives you additional advantage over your competitors. Keywords in URLs are more important for MSN and Yahoo! but even with Google their relative weight is high, so there is no excuse for having keywordless URLs.


9. Backlink spamming
It is a common delusion that it more backlinks are ALWAYS better and because of this web masters resort to link farms, forum/newgroup spam etc., which ultimately could lead to getting their site banned. In fact, what you need are quality backlinks. Here are some more information on The Importance of Backlinks


10. Lack of keywords in the content
Once you focus on your keywords, modify your content and put the keywords wherever it makes sense. It is even better to make them bold or highlight them.

From: http://www.webconfs.com/top-10-seo-mistakes-article-24.php

이올린에 북마크하기

happyness WEB/Search Engine

2008/05/24 01:09 2008/05/24 01:09
[로그인][오픈아이디란?]