[Ewd]class02 0313

Expressive Web Application Design | WEEK 2 : FLEX.HTML5
익스프레시브 웹 응용 디자인
Expressive Web Application Design

Second Class | 0313
WEB1.0 ∙ 2.0 ∙ 3.0(30m)
HTML5(20m)
Web Design Basics(30m)
Website : ewd.jylee6977.com/tc (next mon)

사람들은 웹 3.0이 무엇인지 묻는다.
내 생각엔 사용자가 모든 것이 접혀 있
어 애매하게 보이는 크기를 조절할 수
있는 벡터 그래픽스의 오버레이를 사용
할 때 웹 2.0과, 커다란 데이터 공간을
가로지르며 통합되는 시맨틱 웹에 대한
접근에서 사용자는 어마어마한 데이터
자원에 접근할 수 있을 것이다.
“
팀 버너스 리

“웹 2.0은 마케팅 용어이며 나는 여러분이 웹 3.0을 방금 발명했다고 생각한다.
그러나 웹 3.0이 무엇인지 추측할 때, 여러분에게 이는 응용 프로그램을 만드는 다른 방식이라고 말하고 싶다.
웹 3.0이 궁극적으로 함께 결합된 응용 프로그램으로 보일 것이라는 것이 나의 추측이다.
수많은 특성이 있다: 응용 프로그램들은 상대적으로 작고 데이터는 그 무리들 안에 있으며 그 응용 프로그램들
은 아무 장치나 PC, 휴대 전화를 통해 실행할 수 있다.
응용 프로그램들은 매우 빠르며 사용자 맞춤식으로 이러한 프로그램들을 변경할 수 있다.
게다가 이러한 응용 프로그램들은 바이러스가 전염되는 것처럼 소셜 네트워크, 전자 우편을 통해 배포된다.
가게에 가서 물건을 구입하지 않아도 된다.
우리가 컴퓨팅에서 볼 수 있었던 응용 모델과는 매우 다르다.
에릭 슈미트

“웹 1.0은 전화 접속에 5.0K 평균 대역이고, 웹 2.0은 평균 1메가
비트의 대역이며 웹 3.0은 언제나 10메가비트의 대역이 될 것이
다. 웹 3.0의 대역은 완전한 동영상으로 이루어진 웹이 될 것이
며 이것이 바로 웹 3.0의 느낌과 비슷할 것이다.
리즈 헤스팅즈

단방향 웹
쌍방향 참여의 웹
"개방형 서비스 구조를 기반으로
사용자의 참여를 통해 핵심가치를 창출하는
인터넷 서비스"
WEB 1.0
WEB 2.0
시멘틱 웹
“속도와 플랫폼의 변화,
똑똑한 데이터와 인공지능의 향상,
애플리케이션의 진화가 이루어진 환경＂
WEB 3.0

1. "시멘틱한 마크업"
기존의 html4보다 더 명확한 의미 표현이 가능하도록 26개 정도의 새로운 마크업이 추가되었다.
2. API
다양한 응용 개발을 지원

“웹을 둘러싼 난무한 비표준을 지양하고 지능적이고 실행가능한 웹 구현을 위해 탄생한
차세대 웹표준 기술이다.”
웹이 더 이상 문서공유나 문서 표현만을 위한것이 아니라 하나의 응용프로그램으로 진화
하고 있다. HTML5는 HTML4.01 XHTML1.0에 대한 차세대 표준안이며,현재 W3C를 주축
으로 애플,모질라,구글,오페라,MS등 웹브라우저 벤더가 참여하고있는 산업표준이다.
기존의 html 표준의 한계(기존의 시멘틱하지 못한 마크업)를 극복하는 차세대 웹표준이
며, 리치웹 응용을 가능하게 한다.
=>엑티브엑스,플래시등의 플러그인의 문제점 보완

section
일반적인 문서나 애플리케이션 영역 표시
섹션의 제목을 h1~h6까지 함께 사용
article 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠 표시
aside 문서의 주요 부분을 표시하고 남는 사이드바의 콘텐츠
hgroup 제목과 그의 부제목을 그루핑
header
헤더부분, 사이트 소개 또는 네베게이션 등 표시
내용중간에는 머리글 역할
footer
푸터 부분
사이트 저작관, 제작자 정보
nav 사이트안에서의 네비게이션 요소 표시

figure,
figurecaption
그림이나 비디오 같은 멀티미디어 컨텐츠에 캡션을 붙이고자 할때 표시
audio, video 멀티미디어 컨텐츠 표시
embed 플러그인 컨텐츠 표시
mark 텍스트에 형광펜으로 칠한것과 같은 강조효과
progress 프로그레스바 막대 표시
time 날짜 시간 표시
canvas
웹상의 그래픽 표시
API와 함께 사용해 다양한 어플리케이션 제작 가능

Web Storage
Local Storage라고도 불림. 웹의 내용을 사용자 컴퓨터에 임시저장하는 기능을 구현
하는 API로 인터넷 접속이 끊긴 상태에서도 이미 살펴보았던 정보들은 볼수 있도록
애플리케이션 구현가능
Drag & Drop 웹 페이지 상에서 원하는 항목을 드래그 드롭할수 있게 해주는 API
Geolocation
여러 포털 사이트에서 제공하는 공개지도 API와 함께 사용하면 자신의 현재 위치를
알아 낼수 이쓴 애플리케이션을 쉽게 만들수 있음
Canvas
<canvas>요소와 그리기 API를 제공하여 웹에서 직접 그림을 그리는 애플리케이션
제작 가능.
Web Worker
CPU에 부다를 많이 주는 작업을 여러 워커로 나누어 작업하면 실행속도에 서로 영
향을 주지않고 실행 가능
Indexed DB API
진행중이던 웹 SQL데이커베이스 API에 대한 논의가 중단되면서 새로운 대안 제안.
SQL같은 별도의 언어를 배우지 않아도 간단한 API만으로 데이터 베이스 조작가능
API

1. Use pen & paper

2. Use Online Tools
https://gomockingbird.com/
http://lovelycharts.com/
http://www.lumzy.com/
https://www.jumpchart.com/
http://balsamiq.com/
http://www.google.com/google-d-s/drawings/

3. ETC Fuel
Yahoo Stensil
Wireframe Symbols
Free Sketching Kit

1. Use Free Website Template
www.freewebsitetemplates.com
www.websitetemplatesonline.com
www.andreasviklund.com/templates/
www.templatemonster.com/
www.oswd.org/
www.freewebsitetemplates.com/freewebsite/
2. Use Interactive Web Design
3. Free Web Tools
Site.google.com/site
www.wordpress.com
http://imcreator.com/

FOR Next Week
* 무엇을 디자인할것인가?
내용. 내용. 내용. Contents Creation

[Ewd]class02 0313

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

Semelhante a [Ewd]class02 0313

Semelhante a [Ewd]class02 0313 (20)

Mais de JY LEE

Mais de JY LEE (20)

[Ewd]class02 0313