Your SlideShare is downloading. ×
0
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
[Ewd]class02 0313
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[Ewd]class02 0313

190

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 익스프레시브 웹 응용 디자인 Expressive Web Application Design
  • 2. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Second Class | 0313 WEB1.0 ∙ 2.0 ∙ 3.0(30m) HTML5(20m) Web Design Basics(30m) Website : ewd.jylee6977.com/tc (next mon)
  • 3. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 4. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 5. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 6. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 7. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 8. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 9. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 10. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 11. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 사람들은 웹 3.0이 무엇인지 묻는다. 내 생각엔 사용자가 모든 것이 접혀 있 어 애매하게 보이는 크기를 조절할 수 있는 벡터 그래픽스의 오버레이를 사용 할 때 웹 2.0과, 커다란 데이터 공간을 가로지르며 통합되는 시맨틱 웹에 대한 접근에서 사용자는 어마어마한 데이터 자원에 접근할 수 있을 것이다. “ 팀 버너스 리
  • 12. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 “웹 2.0은 마케팅 용어이며 나는 여러분이 웹 3.0을 방금 발명했다고 생각한다. 그러나 웹 3.0이 무엇인지 추측할 때, 여러분에게 이는 응용 프로그램을 만드는 다른 방식이라고 말하고 싶다. 웹 3.0이 궁극적으로 함께 결합된 응용 프로그램으로 보일 것이라는 것이 나의 추측이다. 수많은 특성이 있다: 응용 프로그램들은 상대적으로 작고 데이터는 그 무리들 안에 있으며 그 응용 프로그램들 은 아무 장치나 PC, 휴대 전화를 통해 실행할 수 있다. 응용 프로그램들은 매우 빠르며 사용자 맞춤식으로 이러한 프로그램들을 변경할 수 있다. 게다가 이러한 응용 프로그램들은 바이러스가 전염되는 것처럼 소셜 네트워크, 전자 우편을 통해 배포된다. 가게에 가서 물건을 구입하지 않아도 된다. 우리가 컴퓨팅에서 볼 수 있었던 응용 모델과는 매우 다르다. 에릭 슈미트
  • 13. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 “웹 1.0은 전화 접속에 5.0K 평균 대역이고, 웹 2.0은 평균 1메가 비트의 대역이며 웹 3.0은 언제나 10메가비트의 대역이 될 것이 다. 웹 3.0의 대역은 완전한 동영상으로 이루어진 웹이 될 것이 며 이것이 바로 웹 3.0의 느낌과 비슷할 것이다. 리즈 헤스팅즈
  • 14. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 단방향 웹 쌍방향 참여의 웹 "개방형 서비스 구조를 기반으로 사용자의 참여를 통해 핵심가치를 창출하는 인터넷 서비스" WEB 1.0 WEB 2.0 시멘틱 웹 “속도와 플랫폼의 변화, 똑똑한 데이터와 인공지능의 향상, 애플리케이션의 진화가 이루어진 환경" WEB 3.0
  • 15. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 16. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 17. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 18. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 19. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 1. "시멘틱한 마크업" 기존의 html4보다 더 명확한 의미 표현이 가능하도록 26개 정도의 새로운 마크업이 추가되었다. 2. API 다양한 응용 개발을 지원
  • 20. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 “웹을 둘러싼 난무한 비표준을 지양하고 지능적이고 실행가능한 웹 구현을 위해 탄생한 차세대 웹표준 기술이다.” 웹이 더 이상 문서공유나 문서 표현만을 위한것이 아니라 하나의 응용프로그램으로 진화 하고 있다. HTML5는 HTML4.01 XHTML1.0에 대한 차세대 표준안이며,현재 W3C를 주축 으로 애플,모질라,구글,오페라,MS등 웹브라우저 벤더가 참여하고있는 산업표준이다. 기존의 html 표준의 한계(기존의 시멘틱하지 못한 마크업)를 극복하는 차세대 웹표준이 며, 리치웹 응용을 가능하게 한다. =>엑티브엑스,플래시등의 플러그인의 문제점 보완
  • 21. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 section 일반적인 문서나 애플리케이션 영역 표시 섹션의 제목을 h1~h6까지 함께 사용 article 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠 표시 aside 문서의 주요 부분을 표시하고 남는 사이드바의 콘텐츠 hgroup 제목과 그의 부제목을 그루핑 header 헤더부분, 사이트 소개 또는 네베게이션 등 표시 내용중간에는 머리글 역할 footer 푸터 부분 사이트 저작관, 제작자 정보 nav 사이트안에서의 네비게이션 요소 표시
  • 22. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 figure, figurecaption 그림이나 비디오 같은 멀티미디어 컨텐츠에 캡션을 붙이고자 할때 표시 audio, video 멀티미디어 컨텐츠 표시 embed 플러그인 컨텐츠 표시 mark 텍스트에 형광펜으로 칠한것과 같은 강조효과 progress 프로그레스바 막대 표시 time 날짜 시간 표시 canvas 웹상의 그래픽 표시 API와 함께 사용해 다양한 어플리케이션 제작 가능
  • 23. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Web Storage Local Storage라고도 불림. 웹의 내용을 사용자 컴퓨터에 임시저장하는 기능을 구현 하는 API로 인터넷 접속이 끊긴 상태에서도 이미 살펴보았던 정보들은 볼수 있도록 애플리케이션 구현가능 Drag & Drop 웹 페이지 상에서 원하는 항목을 드래그 드롭할수 있게 해주는 API Geolocation 여러 포털 사이트에서 제공하는 공개지도 API와 함께 사용하면 자신의 현재 위치를 알아 낼수 이쓴 애플리케이션을 쉽게 만들수 있음 Canvas <canvas>요소와 그리기 API를 제공하여 웹에서 직접 그림을 그리는 애플리케이션 제작 가능. Web Worker CPU에 부다를 많이 주는 작업을 여러 워커로 나누어 작업하면 실행속도에 서로 영 향을 주지않고 실행 가능 Indexed DB API 진행중이던 웹 SQL데이커베이스 API에 대한 논의가 중단되면서 새로운 대안 제안. SQL같은 별도의 언어를 배우지 않아도 간단한 API만으로 데이터 베이스 조작가능 API
  • 24. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 25. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 26. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 1. Use pen & paper
  • 27. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 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/
  • 28. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 3. ETC Fuel Yahoo Stensil Wireframe Symbols Free Sketching Kit
  • 29. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 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/
  • 30. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 FOR Next Week * 무엇을 디자인할것인가? 내용. 내용. 내용. Contents Creation

×