happyness

happyness WEB CSS Layout, 웹표준

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

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

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

happyness WEB 웹퍼블리셔, 웹표준

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

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

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

happyness WEB/XHTML and CSS HTML, XHTML, 웹표준

과연 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 WEB 2.0

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 SEO

이번에 이미지 갤러리를 만들어 보기로 했다.

인터넷은 참 대단하다. 나처럼 플래시를 접한지 얼마 되지도 않은 사람에게도 원하는 프로그램을 할 수 있도록 도와주니 말이다.
아직은 이것 저것 많은 것을 알아가야 하지만, 또 다르게 하나 하나 알아가는 재미 또한 쏠쏠하다.

Thumbnail 이미지와 Large 이미지로 구성되는 갤러리 이다.
아직은 MovieClip 정도로 구현하였지만, 로드된 이미지 사이즈가 잘못된 겨우에도 지정된 이미지 사이즈로 표시될 수 있도록, 또한 로딩될때 로딩중 이라고 표시하는 부분을 더 보안할 점 들이다.

---

happyness WEB/Flash Action Script 3.0, Flash, Image gallery

웹표준에서 말하는 기본적인 철학이 구조와 동작, 표현의 분리이다.
아래 소스는 IE7, FF2에서 테스트 되었다.

<!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=utf-8" />
<title>Structure와 Behavor의 분리</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="onload.js"></script>
<script type="text/javascript">
    //<![CDATA[
        // window.onload 에 함수를 등록한다.
        addOnLoadListener(addCountryEventListener);
       
        /*
         * 지정된 객체의 이벤트를 등록한다.
         * 참조: Document Object Model (DOM) Level 2 Events Specification
         *       http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/Overview.html
         */
        function addCountryEventListener() {
            var country = document.getElementById('country');
            if (country.addEventListener) {
                // IE가 아닌 경우
                country.addEventListener("change", setCountry, false);
            } else if (country.attachEvent) {
                // IE의 경우
                country.attachEvent("onchange", setCountry);
            }
        }
       
        function setCountry(e) {
            if (!e) var e = window.event;
           
            // IE의 경우 this 오브젝트를 사용할 수 없음.
            var tg = (window.event) ? e.srcElement : e.target;

            // IE의 경우 option value를 생략한 경우 선택한 값이 없으나,
            // FF의 경우 데이터를 가져옴.           
            document.getElementById('form1').selectedCountry.value = tg.options[tg.selectedIndex].value;
        }
    //]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    <dl>
        <dt>Select Country</dt>
        <dd>
            <select name="country" id="country">
                <option value="Korea">Korea</option>
                <option value="France">France</option>
                <option value="German">German</option>
                <option value="Italy">Italy</option>
            </select>
        </dd>
        <dt>Selected Country</dt>
        <dd>
            <input type="text" name="selectedCountry" id="selectedCountry" />
        </dd>
    </dl>
</form>
</body>
</html>

아래의 파일을 다운받으면 예저를 볼 수 있다.

happyness WEB/XHTML and CSS XHTML+CSS

웹 페이지를 작성하다보면 BODY 내에 CSS를 정의하는 경우가 많다.
페이지를 여러개로 쪼개는 경우 이런 일이 발생할 소지가 꽤 끄다고 할 수 있다.
하지만, 브라우져의 경우 본문을 파싱하다 정의된 CSS를 만나면 처음부터 다시 파싱한다. (어라 CSS정의가 또 있네? 내가 빼먹은게 있나?)
이럴경우 페이지내의 컨텐츠가 많다면 당연 로딩속도가 느려지게 된다. 많으면 많을 수록 더욱 느려지는 건 당연지사...

아래의 예는 P 태그를 바디 안에서 다시 정의했다. 이경우 전에 나온 P 태그 또한 동일한 스타일 시트가 적용되는 것을 볼 수 있다.

<!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=utf-8" />
<title>CSS 파싱</title>
<style type="text/css">
p {
 font: 2em "Verdana, Arial, Helvetica, sans-serif" bold;
}
</style>
</head>
<body>
<p>first paragraph</p>
<style type="text/css">
 p { border: 1px solid #00F; }
</style>
<p>second paragraph</p>
</body>
</html>

happyness WEB/XHTML and CSS CSS

플래시를 이제 막 접하면서 UCC에서 사용하는 동영상 플레이어를 흉내 내보기로 하였다. 목표는 FDS를 사용하지 않는 단순 스트리밍 방식의 플에이어다. 일단 개념을 잡고 인터넷을 뒤지기 시작했다.

ActionScript 3.0은 OOP의 개념을 도입한것 같다-이전 버전은 경험이 없어 어떠한지 모르겠다-. 마치 자바 프로그램을 하는 것 같은 느낌이 들어 어렵지 않게 느껴진다. 그렇지만 이것 이외의 것들은 참 힘들게 느껴진다. 경험이 없으니 당연하겠지만~

도움말, 블로그에 있는 아티클을 읽고 인용하고, 샘플 프로그램을 베끼다 시피 하면서 일부 완성하였다. 이후에 해야 할 것들은 비디오 컨트롤 부분을 컴포넌트화 하는(언제 될지는) 것이 목표이다.

첨부된 파일을 다운받아 소스를 살펴볼 수 있다.

---

사용예

<embed loop="true" menu="false" quality="high" 
width="320" height="240"
type="application/x-shockwave-flash" 
pluginspage=
"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" 
src="http://www.htdocs.kr/fmp/swf/fmp1.swf?vid=1234">
</embed>

happyness WEB/Flash Action Script 3.0, Flash CS3

플래시에서 파라메터를 받아 서버와 통신하는 예제이다.
URLRequest와 URLLoader를 이용하여 구현하였다.

메인 소스:

[code]
import flash.events.Event;
import flash.events.IEventDispatcher;
import flash.events.IOErrorEvent;
import flash.events.HTTPStatusEvent;
import flash.events.ProgressEvent;
import flash.events.SecurityErrorEvent;

import flash.net.URLRequestMethod;

import flash.text.TextFieldAutoSize;
import fl.controls.Label;

import com.ericfeminella.collections.IMap;
import com.ericfeminella.collections.HashMap;

import kr.htdocs.net.HTTPRequest;

/* 파라메터를 받음 */
var param1:String = (loaderInfo.parameters.param1 == undefined)
      ? "null" : loaderInfo.parameters.param1;
var param2:String = (loaderInfo.parameters.param2 == undefined)
      ? "null" : loaderInfo.parameters.param2;

/* 넘겨줄 파라메터 셋 만듬 */
var map:IMap = new HashMap(); 
map.put("param1", param1); 
map.put("param2", param2); 

/* 서버에 데이터 요청 */
var xr:HTTPRequest = new HTTPRequest("http://www.htdocs.kr/fmp/flv.php", URLRequestMethod.GET, map);
xr.addEventListener(Event.COMPLETE, completeHandler);
xr.addEventListener(Event.OPEN, openHandler);
xr.addEventListener(ProgressEvent.PROGRESS, progressHandler);
xr.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
xr.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
xr.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

xr.load();

/*
 * 이벤트 핸들러
 */
 
function completeHandler(event:Event):void {
 var loader:URLLoader = URLLoader(event.target);

 /* 텍스트 출력 */
 txResult.text = loader.data;
/*
 var l:Label = new Label();
 l.text = loader.data;
 l.autoSize = TextFieldAutoSize.CENTER;
 l.x = 30;
 l.y = 30;
 addChild(l);
*/
}

function openHandler(event:Event):void {
 txLog.text = txLog.text + "openHandler: " + event;
}

function progressHandler(event:ProgressEvent):void {
 txLog.text = txLog.text + "progressHandler loaded:" + event.bytesLoaded + " total: " + event.bytesTotal;
}

function securityErrorHandler(event:SecurityErrorEvent):void {
 txLog.text = txLog.text + "securityErrorHandler: " + event;
}

function httpStatusHandler(event:HTTPStatusEvent):void {
 txLog.text = txLog.text + "httpStatusHandler: " + event;
}

function ioErrorHandler(event:IOErrorEvent):void {
 txLog.text = txLog.text + "ioErrorHandler: " + event;
}

stop();
[code]

HTTPRequest.as :
[code]
/**
 * Copyright (c) 2008 Young Joo Lee <ifalcon@naver.com>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
package kr.htdocs.net {
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 import flash.net.URLRequestMethod;
 import flash.net.URLVariables;
 
 import com.ericfeminella.collections.IMap;

 /**
  * = URLRequest =
  * URLRequest 클래스는 하나의 HTTP 요청에 포함된 모든 정보를 캡처한다.
  * FileReference 클래스의 upload() 및 download() 메서드뿐 아니라 URLStream의 load() 메서드,
  * URL 다운로드를 시작하기 위한 URLLoader, Loader 및 기타 로드 작업에 URLRequest 객체가 전달된다.
  *
  * = URLLoader =
  * URLLoader 클래스는 URL에서 텍스트, 이진 데이터 또는 URL 인코딩된 변수 형식으로 데이터를 다운로드한다.
  * 이것은 텍스트 파일, XML 또는 동적 데이터 기반 응용 프로그램에서 사용되는 기타 정보를 다운로드할 때 유용하다.
  *
  * URLLoader 객체는 모든 데이터를 URL에서 다운로드한 다음 ActionScript에서 사용할 수 있게 한다.
  * 다운로드 진행 상황에 대한 알림을 전송하며, 이 진행 상황은 전달된 이벤트뿐 아니라
  * bytesLoaded 및 bytesTotal 속성을 통해서도 모니터링할 수 있다.
  */
 public class HTTPRequest {
  private var _uri:String;
  private var _method:String;
  private var _args:IMap;
 
  private var _loader:URLLoader;
 
  /**
   * 생성자
   */
  public function HTTPRequest(uri:String, method:String, args:IMap = null) {
   this._uri = uri;
   this._method = method;
   this._args = args;
   
   this._loader = new URLLoader();
  }
 
  /**
   * 이벤트를 등록한다.
   */
  public function addEventListener(type:String, listener:Function):void {
   _loader.addEventListener(type, listener);
  }
 
  /**
   * 지정된 uri로 데이터를 요청한다.
   */
  public function load():void {
   var request:URLRequest = new URLRequest(_uri);
   request.method = (_method == null) ? URLRequestMethod.GET : _method;
   
   /* 전달될 파라메터를 세팅한다. */
   if (_args != null) {
    var nameValuePairs:URLVariables = new URLVariables();
    var keys:Array = _args.getKeys();
    for each(var key:String in keys) {
     nameValuePairs[key] = _args.getValue(key);
    }
    request.data = nameValuePairs;
   }
   
   /* 요청 */
   try {
    _loader.load(request);
   } catch (error:Error) {
    trace("Unable to load requested document.");
   }
  }
 }
}
[/code]

다운로드: flashmovieplayer.zip

데모:

happyness WEB/Flash ActionScript 3.0, Flash