Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
•
1 like•1,908 views
Dreamweaver CS5.5 를 이용한 HTML5 개발
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Similar to Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발 (20)
Recently uploaded
Recently uploaded (7)
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
- 1. Adobe Dreamweaver CS5.5 - HTML5 김종광 책임연구원 | 미래웹기술연구소㈜
- 2. 발표자 소개 김종광 / 미래웹기술연구소 책임 연구원 (전) 멜론 모바일 사이트 구축 : HTML5 + Sencha Touch OKJSP 개발자 커뮤니티 HTML5 버전 + 모바일 버전 구축 월간 마이크로소프트 2011년 1월호 ~ 4월호 Sencha Touch 연재중 월간 웹 2011년 7월호 ~ 9월호 Sencha Touch 연재 중 Sencha Touch 관련 강의 및 도서 집필중 E-mail : jongkwang@w3labs.kr Twitter : @jongkwang Facebook : facebook.com/kimjongkwang Page 2
- 3. 목차 Adobe Dreamweaver CS5.5 - Adobe Dreamweaver CS5.5 특징 HTML5 - HTML5 개요 - HTML5 Tags - 멀티미디어 요소 - Form Elements - JavaScript API Using Dreamweaver CS5.5 - Defining a Dreamweaver Site - Dreamweaver UI - Forms Properties - Live View/Code - Configuring the Workspace Page 3
- 6. Adobe Dreamweaver CS5.5 뭐가 새로워 졌지? Page 6
- 7. Adobe Dreamweaver CS5.5 Multiscreen Preview panel Multiscreen Preview panel • Smartphones • Tablets • PC Media Query Support Page 7
- 8. Adobe Dreamweaver CS5.5 CSS3/HTML5 support CSS3 support • “CSS Panel” support CSS3 • Media Query support • Multiscreen Preview panel HTML5 • HTML5 Tag • Code Hinting • Live View support <video> (with QuickTime) • <svg> support Page 8
- 9. Adobe Dreamweaver CS5.5 jQuery Mobile jQuery Mobile • jQuery code hinting • jQuery Mobile WYSIWYG • Template support Page 9
- 10. Adobe Dreamweaver CS5.5 CSS3/HTML5 support PhoneGap • Build and package native apps • Andorid and iOS • Device API (Camera, GPS, Accelerometer…) Page 10
- 11. Adobe Dreamweaver CS5.5 CSS3/HTML5 support Adobe BrowserLab • OS 와 브라우저에 따른 차이를 • 2개 화면으로 비교 할 수 있다 Page 11
- 12. Adobe Dreamweaver CS5.5 뭐가 새로워 졌지? HTML5 요소와 라이브러리의 추가! Page 12
- 13. Adobe Dreamweaver CS5.5 그렇다면 왜 cs5.5 인가? Cs6.0 이 아니고? Page 13
- 14. Adobe Dreamweaver CS5.5 Adobe Creative Suite 5.5 Mobile 환경의 대응!! - Tablet 과 Mobile 기기의 역할 증대 - 기존 Contents 들의 Mobile 지원할 필요성 증대 Mobile 중요성 증대 기존과 다른 양상 Production Life Cycle을 더 짧게 돌리겠다는 의지 Page 14
- 15. Adobe Dreamweaver CS5.5 그렇다면 HTML5 란? Page 15
- 16. HTML5
- 17. HTML5 - 개요 W3C 제정 웹표준 기술 Canvas, Video, Audio 태그의 추가로 멀티미디어 기능 대폭 강화 Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작 가능 웹브라우저 벤더들이 빠르게 제품에 반영 데스크탑 브라우저 및 모바일 브라우저에서 모두 지원 모바일 환경에서도 응용범위가 많다 Page 17
- 18. HTML5가 나오기 까지 2004년 WHATWG에서 시작 W3C에서도 2007년 HTML5 채택 HTML5 Last Call 2009 HTML5 Last Call Finish 2011.05 HTML5 Recommandation 2014년을 목표로 진행중 WHATWG Page 18
- 19. HTML5 달라진점 <!doctype html> 의 변화 <script>, <style> 태그에서 type 생략 HTML4 HTML5 Page 19
- 20. 새롭게 추가된 태그들 <article> <aside> <footer> <header> <nav> <progress> <section> <time> 외 30개로 새로운 태그[1] 추가됨. 시맨틱 웹과 나은 문서 구조를 지향함 [1] 출처 : http://w3schools.com/html5/html5_reference.asp Page 20
- 21. 새롭게 추가된 태그들 <div class="header"></div> HTML4 <header></header> HTML5 Page 21
- 22. HTML5 코딩 HTML4 HTML5 Page 22
- 24. 새롭게 추가된 멀티미디어 요소 <canvas> <video> <audio> <source> Page 24
- 25. 새로운 폼요소들 <keygen> <datalist> <output> 새로운 <input> type • email • datetime • time • datetime-local • number • range • Color • 단, 현재 브라우저별 지원 편차가 커서 일반화 되는데 시간이 필요 Page 25
- 26. New HTML5 Javascript API <canvas> drawing API <video>, <audio> control API Local Storage API Web SQL DB API Indexed DB API Geolocation API Offline web apps API Web Socket Web Worker Drag and Drop API File API Page 26
- 27. HTML5 달라진점 정리 <doctype> 정의 변화 <!doctype html> 새로운 태그들 <header>, <footer>, <nav> 등 웹브라우저에서 멀티미디어 요소 지원 <video>, <audio>, <canvas> 새로운 폼 요소 new input type, range, calendar 등 새로운 HTML5 JavaScript API 추가 Canvas API, Video API, Web Storage API, Geolocation API 등 Page 27
- 28. Adobe Dreamweaver CS5.5 HTML5 Demo Page 28
- 30. Defining a Dreamweaver Site Defining a Dreamweaver Site Page 30
- 31. Defining a Dreamweaver Site Live Demo Page 31
- 32. Defining a Dreamweaver Site – New File File New Page 32
- 33. Defining a Dreamweaver Site – New File File New Page 33
- 34. Site New Site Defining a Dreamweaver Site – New Site Page 34
- 37. Dreamweaver UI Dreamweaver UI Page 37
- 38. Dreamweaver UI Dreamweaver UI Page 38
- 39. Dreamweaver UI Dreamweaver UI Page 39
- 42. Form Properties Dreamweaver UI Page 42
- 43. Form Properties Dreamweaver UI Page 43
- 46. Live View/Code Live View Page 46
- 47. Live View/Code Live View 기능과 Split Page 47
- 48. Live View/Code Live Code Page 48
- 49. Configuration the Workspace Configuration the Workspace Page 49
- 50. Configuration the Workspace Live Demo Page 50
- 51. Configuration the Workspace Workspace Page 51
- 52. Configuration the Workspace Configuration the Workspace Page 52
- 53. Defining a Dreamweaver Site 실제로 HTML5 사이트를 만들며 이해 하도록 한다 Page 53
- 54. PRACTICAL HTML5
- 56. Summary Adobe Dreamweaver CS5.5 - Multiscreen Preview panel - CSS3/HTML5 support - jQuery Mobile - PhoneGap (Native Application) - Adobe BrowserLab HTML5 - HTML5 개요 - HTML5 Tags - 멀티미디어 요소 - Form Elements - JavaScript API Page 56
- 57. Summary Using Dreamweaver CS5.5 - Defining a Dreamweaver Site - Dreamweaver UI - Forms Properties - Live View/Code - Configuring the Workspace Page 57
- 58. 감사합니다. 질의 응답 시간 Twitter : @jongkwang Facebook : facebook.com/kimjongkwang Page 58