Mimul's Developer World - Design World category

HTML5의 개요

Mon, 08 Feb 2010 10:16:00 GMT

1. HTML5 변천사
- HTML3.2 -> HTML4.01 -> XHTML1.0 -> HTML5

2. HTML Elements

2.1. 섹션(구조) 정의 요소
<section>: 문서의 특정 영역을 구분
<header>: 문서 또는 영역의 머리말에 해당하는 내용 구분
<footer>: 문서 또는 영역의 꼬리말에 해당하는 내용 구분
<nav>: 다른 페이지를 가리키는 링크들의 모음(네비게이션) 구분
<article>: 하나의 글 또는 기사(본문)의 단위 구분
<hgroup> : 태그에서는 h1-h6태그를 사용하고 subheading, 대체제목, line으로 구분할때 사용되어짐
<aside>: 본문의 흐름에서 벗어나는 내용 구분(참고, 팁, 사이드바, 인용)

2.2. 콘텐츠 삽입 요소
<figure>: 이미지, 비디오 등에 자막(캡션) 표현
<source> : codec의 지원이나 media type에 기초하여 브라우져가 선택하게 하여 video와 audio파일을 거기에 맞게 대체시켜 줌
<video>: 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시(UI API 제공)
예) <video src="myVideo.ogg"></video>
<audio>: 별도의 플러그인 설치를 필요로 하지 않는 음원 자료를 표시(UI API 제공)
예) <audio src="myAudio.ogg" controls="controls">
<canvas> : 그래프나 게임 같은 동적인 비트맵 그래픽 표시하는데 사용
예)
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
function draw(){
   var canvas = document.getElementById('myCanvas');
   if (canvas.getContext){
     var defineContext = canvas.getContext('2d');
   }
}
</script>
<embed> : 플러그인 컨텐츠 표시할 때 사용

2.3. Form 요소
<datalist> :
<keygen> : 키의 페어를 생성하기 위한 컨트롤을 나타냄
<output> : 스크립트에 의한 계산 결과 등 어떠한 출력 결과를 나타냄

2.4. 인터렉티브(상호작용) 요소
<dialog>: 사람 간에 일어난 대화 영역 구분
<details>: 추가적인 상세정보를 담고있는 영역(툴팁의 내용)
<datagrid>: 동적인 데이터를 효과적으로 표현(트리, 목록, 표)
<menu>, <command>: menu는 command 요소를 포함하여 즉각적인 동작 발생(콘텍스트 메뉴)
<command> : 사용자가 실행할 수 있는 명령어를 표시하는데 사용

2.5. 텍스트레벨 요소
<mark>: 강조할 필요까진 없으나 주목해야 할 문구를 표현(형광펜)
<meter>: 특정한 범위에 속하는 숫자 값을 표현(월급, 득표율, 테스트 점수 등)
<time>: 특정한 시각을 표현
<progress>: 현재 진행 중인 상태를 표현(다운로드 완료율)
<ruby/rt/rp> : 루비를 마크업함

3. HTML5 Attributes

3.1. input type
- text, password, hidden, file 같은 제한적인 사용을 하며 필요한 부분은 스크립트로 제어해왔는데 좀더 다양해짐
. tel : 전화번호
. search : 검색 박스
. url : 웹 주소
. email : 이메일 주소
. datetime : 정확하고 절대시간 지정
. date : 날짜 pickers
. month : 잘 표시
. week : 주표시
. time : timestamps
. datetime-local : 로컬의 날짜와 시간
. number : 숫자(spinbox)
. range : 슬라이더
. color : 색깔 pickers

3.2 Form Controls
- form을 동적으로 콘틀로할 수 있게 됨
. required : 사용자들은 빈필드로 submit할 수 없음
. placeholder   : input내에 text를 보여주거나 focus가 활성화 되면 필드를 공백으로 만들어 주고, focus가 되지 않았을때는 기본적으로 입력된 내용이 보여지게 함
. autofocus : 특정 input태그에 focus를 이동시키지만, script가 아닌 마크업이기때문에 모든 웹사이트에서 동일한 동작을 함
. autocomplete : 자동 완성 데이터 저장
. novalidate : form 요소에는 폼을 제출할 때 유효성 검증을 거치지 않도록 함
. list : datalist와 select와 함께 사용할 수 있음
. pattern :정규표현식으로 체크 가능

3.3. html
- manifest : 응용 프로그램은 저장을 위한 캐쉬와 데이타 추출을 위한 manifest를 가짐, 어플리케이션 캐싱과 관련됨

4. HTML5 Features
- Web workers : HTML4 지원 브라우저의 자바스크립트는 단일 프로세스로 순차적으로 동작하는데 반해 HTML5는 다중 쓰레딩 지원(단일 프로세스로 순차적으로 동작함을 극복한 동시에 다양한 어플리케이션을 실행가능하게 함)
예)     var worker = new Worker('js/worker.js'); worker.onmessage = function(event) {console.log('Result: ' + event.data);}
- Web Database : 자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API며, 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 줌
예) var dbase = window.openDatabase("Test", "1.0", "Sample DB", 90000);
- Web Storage : 업체별 로컬 스토리지기술을 표준화함(IE의 userData, FF의 Dom Storage, Flash의 Local Shared Object, Google Gear), Session Storage와 Local Storage 를 제공함
- Web Socket : 한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API를 제공함
- Geolocation API : 위치 정보(GPS/WiFi/3G based location)를 브라우저에서 Script API를 통해 제공받을 수 있음(위치 정보 : 위도, 경도, 높이, 정확도, 진행방향, 진행속도)
예) navigator.geolocation.getCurrentPosition(function(position);
- Drag & Drop API : 쉬운 Drag & Drop 지원
- Application cache : App Cache는 원하는 리소스를 오프라인으로 선언하면 되고 CACHE MANIFEST로 선언후 cache.manifest 파일에 내용을 적으면 됨
- Cross-document messaging : 서로 다른 도메인간의 메세지를 주고 받을 수 있음(보안 이슈 발생 가능성 존재)
- Microdata : itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 함
- HTML-RDFa : Microdata와 함께 마크업언어에 의미 정보 표현이 가능해 시맨틱웹의 기반 표준이 될 것임

5. 데모 사이트
- HTML 5 Demos and Examples
- HTML5 Gallery

HTML에서 Local Storage 에 관한 기술

Wed, 03 Feb 2010 09:59:00 GMT

1. 개요

기존의 데이터 저장은 클라이언트 사이드는 쿠키, 서버 사이드는 세션 외에는 GET아나 POST 방식으로 데이터를 전달받으면서 기능 구현을 했습니다. 하지만 Server-Side 로 처리 되던 데이터 처리에 대한 부하를 Client-Side 로 가져 오면서 좀더 여유있는 리소스의 이용을 통하여 보다 빠른 속도의 웹 어플리케이션의 구현이 가능 해지게 한 방식이 바로 Local Storage 에 관한 기술들입니다.
오프라인(Offline) 상에서 수정된 데이터를 온라인(Online)이 되었을 때 실 서버로 동기화하여 온라인 Only의 환경적 제약을 뛰어 넘을 수 있게 될 것입니다.

2. 종류

- Internet Exploere 의 userData - 1M
- Firefox 의 DOM Storage - 5M
- Flash Local Shared Object - 100KB
- Google Gears
- Cookie - 4K

3. 영향

이 기술은 HTML 5 Client-Side Database Storage에 영향을 주어서 draft에 포함되어 있습니다.
Ajax Performance 이슈의 대안으로도 활용되고 있죠.

[참조 사이트]

Local Storage 에 관한 기술

접근성이란?

Tue, 24 Nov 2009 03:33:00 GMT

우리가 생활하는 사회 공간의 모든 것들이 접근성을 배제하고는 생각할 수 없을 정도로 접근성을 강조하게 됩니다. 특히 선진국가로 가기 위한다면...
작은(?)것 하나 하나 모두 세심하게 고려하는것을 생활화한다면 우리도 모르는 사이에 이미 다른 나라사람들은 한국을 선진국이라고 말하겠죠?

1. 개념적 정의
- 접근성(Accessibility)는 산업 디자인, 사용자 인터페이스 디자인, 건축, 시스템 공학, 인간공학 등의 분야에서 쓰이는 용어로, 사용자의 신체적 특성이나, 지역, 성별, 나이, 지식 수준, 기술, 체험과 같은 제한 사항을 고려하여 가능한 많은 사용자가 불편 없이 이용할 수 있도록 제품, 서비스를 만들어 제공하고 이를 평가 할 때 쓰이는 말이다. 접근성이 높다는 것은 이러한 제한 사항을 가진 사용자도 불편 없이 사용할 수 있다는 것을 뜻하며 접근성이 낮다는 것은 어떠한 제한 때문에 사용하기 불편하거나 사용할 수 없을 때를 말한다.
- 이용자 분류 : 어린이, 노인, 시각장애, 청각장애, 지체장애, 정신지체, 난독증, 외국인, 정상인

2. 접근성 분류
*. 도로의 접근성
- 접근로, 연석램프, 램프, 계단(접근로가 아닌 일반 대중용 계단), 엘리베이터, 플랫폼 리프트, 보도, 횡단보도, 육교 교통신호시설을 건축할때 장애자들을 배려하도록 설계단계부터 적용해야 함

*. 교통시설의 접근성
- 정류장, 버스터미널, 역사(철도, 지하철)를 건축할때 장애자들을 배려하도록 설계단계부터 적용해야 함

*. 가로시설물
- 중전화, 우체통, 자동판매기, 휴지통, 음수대를 건축할 때 장애자들을 배려하도록 설계단계부터 적용해야 함

*. 건물시설물 접근성
- 엘리베이터, 화장실, 문/창문, 전화를 건축할때 장애자들을 배려하도록 설계단계부터 적용해야 함

*. 웹의 접근성
- 시각 장애인을 위해 이미지에 대한 대체 설명 제공, 청각 장애인을 위한 동영상 자막제공, 지체 및 시각장애인을 위한 키보드 만으로의 이용보장, 다양한 OS, 브라우저, 디바이스에서 서비스 가능 등의 기능을 지원해야함
- 분류
   . PC - 입력(마우스, 키보드), 출력(모니터, 프린터, 스피커, 프로젝션) 장치
   . 모바일 - 화면크기(Small Screen, Full Browsing), 접속 속도, 입력장치
   . 운영체제 - 윈도우, 맥, 리눅스
   . 브라우저 - 익스플로러, 파이어폭스, 사파리, 오페라
- 다양하게 논의되고 있고 분류된 관점마다 필요한 접근적 요소들의 복잡성이 존재함

*. 책의 접근성
- 귀로 읽는 <오디오북>, 손으로 읽는 <점자책>, 고령인구와 약시인구를 위한 <큰 활자책> 들이 활성화된다면 독서문화의 큰 출발점일까 생각됨.

*. 휴대폰 기기의 접근성
- 청각 장애자에게는 진동벨, 벨/음성 주파수 조정, TTY, 키판의 촉각 알림, 보청기 기능, 전화기능들의 시각적 표시
- 시각 장애자에게는 음성 다이얼, 키판의 오디오 기능, 음성인식, 점자 요금청구서
- 지체 장애자에게는 원터치다이얼링, 자동 재다이얼, 자동응답, 음성다이얼링, 음성인식, 잡기 쉬운 디자인

정보 지식의 독점 및 불평등으로 인해 사회적 갈등을 해결하며, 사회적 약자, 소수자들의 삶에 대한 질이 높이기 위해 필요할 것입니다.

다들 관심을 가지고 노력했으면 합니다.

JavaScript에서 reload 사용 예

Sun, 15 Nov 2009 11:42:00 GMT

reload는현재 페이지를 재호출하는 방법입니다. 아래와 같이 세가지 방법이 있는데 필요한 요건에 따라 선별해서 사용해 보세요.

history.go(0); - 캐시에서 우선 찾음
window.location.reload(); - 캐쉬에서 우선 검색하고 없으면 서버에서 재호출함
window.location.reload(true); - 서버에서 무조건 재호출

[관련 포스트]

location.href와 location.replace() 차이

HTML 테이블(Table) 태그 가이드

Fri, 13 Nov 2009 13:27:00 GMT

<table>태그는 <div>태그에 비해 처리 속도가 늦다고 합니다. 테이블은 필요한 곳(표)에서만 사용하세요.
아래는 테이블 관련 정보들입니다. 다들 아시겠지만 기본적이지만 그래도 강조되는 것이 기본기가 있어야 응용이 가능한 법입니다. 기본기가 있어야 성능 이슈도 줄일 수 있습니다. ^^

1. 테이블 관련 속성 정보

height="픽셀" : 표의 높이를 설정
width="픽셀/(%)" : 표의 너비를 지정
hspace="픽셀" : 표 위아래로 표 외곽 내용들과의 간격을 지정
id="id 이름" : class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있음
rules="cols/rows/none/all/group" : 표에서 셀 사이에 경계선 지정
style="스타일 시트 입력" : 적용될 스타일 시트를 지정
title="제목" : 해당 문자에 부여할 텍스트를 입력
cols="숫자" : 표에 들어갈 열의 개수를 지정
align="left/center/right" : 표의 정렬
backgroungd="배경이 될 이미지 파일" : 배경 지정
bgcolor="색이름/SRGB" : 배경 색상
bordercolor="색이름/SRGB" : 표의 외곽선의 색상 지정
border="픽셀" : 표의 외곽선의 두께를 지정
bordercolordark="색이름/SRGB" : 표의 외곽선을 3차원으로 만들때 사용
bordercolorlight="색이름/SRGB" : 표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
cellpadding="픽셀" : 셀 경계와 셀 안의 내용과의 간격을 지정
cellspacing="픽셀" : 셀과 셀 사이의 간격을 지정
class="클래스 이름" : 스타일 시트의 서식을 지정
frame="above/below/border/hsides/Lhs/rhs/vside/void" : 표 외곽선의 형태를 지정 border="1" 이상일 때 사용 가능

2. 샘플 소스

<table border="1">
<caption>표의 제목</caption>
<colgroup span="1" style="background:#FEFEFE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>

<!-- Table Header-->
<thead align="center">
<tr>
<th>셀 헤더 1</th>
<th>셀 헤더 2</th>
<th>셀 헤더 3</th>
</tr>
</thead>

<!-- Table Footer-->
<tfoot align="center">
<tr>
<td>셀 푸터 1</td>
<td>셀 푸터 2</td>
<td>셀 푸터 3</td>
</tr>
</tfoot>

<!-- Table Body-->
<tbody align="center"> 
<tr>
<td>내용 1</td>
<td>내용 2</td>
<td>내용 3</td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
</tbody>
</table>

3. 실행 결과