W3C 온라인 트레이닝 ‘HTML5 웹 개발 기본기 다지기’




HTML5를 배우고 오픈 웹을 만들어 보세요.

HTML5는 월드와이드웹(WWW)의 핵심 언어인 HTML의 다섯 번째 주요 수정사항이 반영된 명세서입니다. HTML5는 디바이스 성능, 비디오와 애니메이션, 그래픽, 스타일, 타이포그래피 및 기타 디지털 퍼블리싱 툴, 확장형 네트워크 기능 등을 사용할 수 있는 크로스 플랫폼 애플리케이션을 위한 완전한 프로그래밍 환경이라고 할 수 있는 오픈 웹 플랫폼(Open Web Platform)의 초석입니다.

W3C에서 주관하는 HTML5 강좌는 웹 애플리케이션 저작자가 간단하지만 강력한 방식으로 멋진 웹 사이트를 만들 수 있도록 모든 새로운 기능을 알려줍니다. HTML5가 바로 여기에 있습니다! W3C HTML5 온라인 강좌를 듣는 웹 개발자와 디자이너는 많은 인터랙티브 예제와 4개의 실습 과제를 통해 새로운 기술을 테스트해 볼 수 있습니다.

본 강좌에서 업데이트 된 점은 다음과 같습니다. :

  • 이번 강좌에는 자바스크립트에 자신 없어 하는 수강생에게 도움을 주기 위해 자바스크립트 특강을 넣었습니다. 이 특강에서 자바스크립트에 대한 모든 내용을 다루지는 않지만, 처음 시작하는 분들에게는 큰 도움이 될 것입니다.
  • 이번 HTML5 캔버스 강좌에는 애니메이션, 고해상도 타이머, 타임스탬프 매개변수 옵션 기반의 시간 관련 고급 정보가 추가되었습니다. 많은 예제를 통해 애니메이션의 프레임률을 설정하고 시간 기반의 애니메이션을 처리하는 방법을 설명합니다.
  • 또한 canvas 엘리먼트에서 사용할 수 있는 2D 기하학적 변환에 대한 내용도 자세하게 다루고 있습니다.
  • 이번 강좌에서는 게임이나 음악 애플리케이션에 유용하게 쓰이는 API인 웹 오디오 API에 대한 내용도 추가되었습니다.
  • 파일 API, 드래그앤드롭 API, 새 XHR2 API와 함께 사용하는 HTML5 폼의 예제가 추가되었습니다. 이 예제는 여러 개의 파일 업로드 방법과 함께 Ajax를 사용하는 HTML5 폼 처리 방법을 보여줍니다. 예제에는 업로드하는 동안 프로그레스 바를 표시하는 등 클라이언트 및 서버 측 소스 코드 전체(PHP, Java)가 포함됩니다.

2013년 8월 6일, W3C HTML 워킹 그룹이 마침내 두 개의 권고 후보안을 업데이트했습니다.

  • HTML5는 월드와이드웹(WWW)의 핵심언어인 HTML의 다섯 번째 수정 버전을 정의한 것입니다. 이 버전에는 웹 애플리케이션 저작자에게 도움이 될만한 새 기능과 풍부한 예제를 통해 연구한 새 엘리먼트를 도입하고, 특별히 상호운용성을 향상시키기 위한 노력의 일환으로 사용자 에이전트를 위한 명확한 범위를 정의했습니다.
  • HTML Canvas 2D Context는 HTML 캔버스 엘리먼트에 대한 2D 컨텍스트를 정의합니다. 2D 컨텍스트를 이용하면 객체, 메서드, 프로퍼티로 캔버스 드로잉 영역에 그림을 그리고 수정할 수 있습니다.

이 수업을 들어야 하는 이유

본 HTML5 강좌는 다음 사항을 포함해 멋진 웹 페이지와 앱을 만들기 위해 알아야 할 모든 기술을 다룹니다.

  • 본 HTML5 강좌는 다음 사항을 포함해 멋진 웹 페이지와 앱을 만들기 위해 알아야 할 모든 기술을 다룹니다.
  • HTML5 멀티미디어: 비디오와 오디오
  • canvas 엘리먼트로 그래픽 드로잉 및 애니메이션 처리, 비디오와의 인터랙션
  • HTML5 폼
  • 자바스크립트 API: DOM, geolocation, orientation 등
  • 지속성: DOM 스토리지, 캐시, 인덱스DB

본 과정은 6주 과정입니다. 매주 새 학습자료가 올라가고(대부분 과제도 같이 나감), 토론 포럼을 통해 강사나 다른 학생들과 지속적으로 교류할 기회가 많이 있습니다.

아래에 ‘이 강의를 들어야 할 사람’과 ‘수강 전 준비사항’ 내용을 확인하여 이 강좌의 주 타깃층과 사전 준비사항을 확인하세요.

강의를 듣는 데는 주당 6~8시간이 소요됩니다. 주 별로 강의 내용이 많은 경우도 있지만 평균적으로 7시간 정도 된다고 보면 됩니다.

수업 내용

  • 단순해진 새 HTML5 태그 사용법
  • <audio>와 <video> 엘리먼트 가지고 놀기
  • 재미있는 웹 그래픽 드로잉과 애니메이션 처리
  • 최신 HTML5 폼 기능 알아보기
  • geolocation 및 orientation를 비롯한 다양한 API 테스트
  • HTML5 오프라인 기능 이해

강좌 상세 소개

1주차: HTML5 소개, 새로운 구조적 엘리먼트와 시맨틱 엘리먼트

이 강좌는 HTML5에서 정의한 새로운 구조적 태그와 시맨틱 태그가 무엇인지 설명하고 보여주는 것으로 시작합니다.

  • 문서의 아웃라인을 생성하는 새 구조적 엘리먼트
  • 시맨틱이 추가된 다른 엘리먼트(time, summary, details, mark 등)
  • 새 어트리뷰트: data-*, download, translate 등
  • 마이크로데이터와 마이크로데이터 API

1주차 강의의 마지막에는 HTML5 구조적 태그와 시맨틱 태그를 연습할 수 있는 과제가 나갑니다.

2주차: HTML5 멀티미디어 비디오와 오디오

2주차 강의의 목적은 수강생들을 HTML5 미디어와 그 기능을 충분히 다뤄봄으로써 자신이 만든 웹 페이지와 애플리케이션에서 HTML5 미디어를 사용하고 조작할 수 있게 하는 것입니다. 주로 다룰 내용은 다음과 같습니다.

  • HTML5 이전의 오디오와 비디오 기술 상태에 대한 대략적 설명
  • video 엘리먼트: 사용법, 어트리뷰트, 코덱 지원 등
  • video 엘리먼트 DOM API: 프로퍼티, 메서드, 이벤트
  • CSS3와 video 엘리먼트: 변환, 이미지 필터 등
  • 비디오와 캔버스 인터랙션: 스냅샷 찍기, 실시간으로 비디오 콘텐츠 수정하기, 비디오 화면 입히기(video incrustation) 등
  • 라이브 비디오 스트림: getUsermedia API(웹캠 컨트롤)
  • track 엘리먼트로 자막 추가
  • audio 엘리먼트: 개요, 어트리뷰트, 코덱 지원 등
  • audio 엘리먼트 DOM API: 프로퍼티, 메서드, 이벤트 – 많은 예제와 함께 제공
  • 웹 오디오 API 소개(음악인을 위한 실시간 오디오, 게임, 웹 애플리케이션 용)

 

3주차: HTML5 캔버스로 그래픽 드로잉 및 애니메이션 다루기

<canvas> 태그는 HTML5가 플래시를 대체하기 위해 제공하는 기능 중 하나입니다. 3주차 강의에서는 다음 내용을 중점적으로 다룹니다.

  • 손쉽게 시작하는 캔버스 자바스크립트 API 기본 사용법
  • 직선, 호, 경로, 곡선, 이미지 그리기
  • 색상, 그레이디언트, 패턴, 쉐도우 및 다른 드로잉 어트리뷰트 설정
  • 이미지 그리기, 실시간으로 비디오에서 이미지 캡처, 클리핑
  • 고급 기술: 기하학적 변환, 컨텍스트 저장 및 복원
  • 픽셀 단위의 캔버스 콘텐츠 제어, 드로잉 모드 등
  • 캔버스 여러 겹 쌓기, 캔버스 이벤트, 캔버스 콘텐츠 애니메이션 처리

본 강의 마지막에는 드로잉과 애니메이션을 처리해 볼 수 있는 과제가 나갑니다.

4주차: HTML5 폼

4주차 강의에서는 HTML5 폼에 대해 알아봅니다. 폼은 1997년 이래 개선된 적이 없습니다. HTML5에서는 13가지 새로운 입력 필드, 어트리뷰트, 여러 폼 관련 엘리먼트 뿐만 아니라 자바스크립트 validation API도 새로 도입되었습니다. 이번 주에는 이 기능을 전부 다룰 것입니다.

  • 새 입력 타입: color, date, range 등
  • 새 어트리뷰트: required, pattern, placeholder, formnovalidate 등
  • 새로운 폼 관련 엘리먼트: datalist, output, meter, progress 등
  • 유효성 검사: 시각적 피드백을 위한 CSS 가상 클래스, 폼 validation API 등

 

5주차: 새로 도입된 HTML5 API – DOM, geolocation, WebWorkers, orientation, deviceMotion API

5주차 강의에서는 특정 HTML5 엘리먼트에 종속되지 않는 API 몇 가지를 소개합니다.

  • 새로운 메서드인 getElementsByClassName, querySelector, querySelectorAll, matches와 classlist 인터페이스 등과 함께 확장하고 업데이트하는 DOM API
  • 최신 웹 브라우저에서 구현되는 geolocation API. 위치 데이터는 GPS, GSM/3G 삼각측량법, Wifi, IP 주소 등 다양한 방법으로 수집된다.
  • 모바일 기기를 대상으로 한 orientation API와 deviceMotion API
  • HTML5 웹 애플리케이션에서 자바스크립트에 멀티스레딩을 추가하기 위한 WebWorker API

본 강의 마지막에는 HTML5 폼과 geolocation API를 실습할 수 있는 과제가 나갑니다.

6주차: 드래그앤드롭과 지속성

마지막 주 강좌에는 File API와 함께 자주 사용되는 드래그앤드롭 API에 대해 설명합니다. 또한 로컬 스토리지, 세션 스토리지, 캐시 API, 인덱스DB 데이터베이스 같은 다른 지속성 API도 살펴봅니다.

  • DOM 스토리지 API: 로컬 스토리지와 세션 스토리지
  • 새로운 캐시 API: 개요와 예제
  • 인덱스DB: 개요, 기본 개념, 데이터로 작업

본 강좌의 마지막에는 지속성에 관한 과제가 나갑니다.

어떻게 하면 수료증을 받을 수 있나요?:

본 강좌의 수료증을 받기 위해서는 강사가 내주는 4개의 실습 과제를 성공적으로 수행해야 합니다.

이 강의를 들어야 할 사람

  • HTML5로 자신이 보유한 기술을 업데이트하고자 하는 웹 개발자와 콘텐츠 저작자
  • 웹 디자이너
  • 모바일 웹 개발자
  • 웹에 대한 기본 지식을 갖고 있으면서 새 기술을 배우고자 하는 중급 프로그래머

 

HTML5에 시간을 투자할 가치가 있는 이유

  • HTML5, CSS, 자바스크립트는 개발자와 디자이너가 기본적으로 갖춰야 할 3요소입니다.
  • HTML5는 순수 HTML + 새 엘리먼트와 어트리뷰트 + 다양한 자바스크립트 API + CSS3의 조합이라고 할 수 있습니다.

수강 전 준비 사항

최상의 상태에서 수업을 들으려면 데스크톱이나 노트북 컴퓨터 외에 다음에 나열한 것들이 있어야 합니다.

  • HTML, CSS, 자바스크립트 용 텍스트 편집기. 여러분이 좋아하는 툴로 아무거나 사용해도 되지만, 본 강의 저작자는 ‘서브라임 텍스트sublime text’라는 편집기를 선호합니다.
  • 문서를 온라인에 올릴 수 있는 시설. 이 강좌에 나오는 대부분의 예제는 소형 웹 앱의 테스트/개발/호스트 서비스를 제공하는 온라인 HTML/CSS/자바스크립트 IDE인 http://jsbin.com라는 웹사이트에서 호스트 서비스를 제공합니다(또는 http://jsfiddle.net 같은 온라인 IDE를 사용할 수도 있습니다).
    그것도 아니면 그 밖의 아무 호스팅 서비스나 사용해도 상관 없습니다. x10hosting이나 Free Web Hosting Area처럼 흔한 무료 호스팅 서비스 중 하나를 사용할 것을 추천합니다(그 외에도 선택의 여지는 많이 있습니다). 사용에 제한이 있기는 하지만(그래도 무료입니다!), 이 과정을 끝내기에는 충분한 수준의 서비스가 제공될 것입니다.

본 강좌의 수강생은 다음의 요건을 갖추어야 합니다.

  • HTML: HTML 문서를 통합하거나 ID나 클래스를 할당하거나 기타 그러한 기본 작업을 편안하게 할 수 있는 수준의 기술을 보유해야 합니다.
  • CSS: 이 강좌를 듣는 데는 CSS에 대해 최소한의 정보만 알고 있어도 됩니다. 그래픽 디자이너 수준의 지식을 요하지는 않습니다.
  • DOM: DOM에 관해서도 많이 알 필요는 없지만, 몇 가지 기본 메서드(getElementById, appendChild 등)는 사용할 줄 알아야 합니다.
  • JavaScript: JS 코드를 웹 페이지에 넣는다거나 이벤트 처리, 기본 DOM 프로세싱 다루기 등 기본적인 지식만 알면 충분합니다. 2013년 11월 강좌에는 자바스크립트 특강이 포함되어 있으니 잘 활용하기 바랍니다.

상세정보는 이용안내를 참고하세요.

약관

  • W3C는 본 강좌를 공시된 수강료로 수업자료와 함께 제공한다.
  • 수강료는 등록과 함께 완납해야 한다.
  • 수강료 납부는 신용카드나 페이팔(PayPal)을 이용해 할 수 있다.
  • 환불은 첫 주 강의가 끝나기 전에 취소를 신청했을 때만 가능하다.
  • W3C는 강좌 종료 후 최소 2개월 동안 등록한 수강생에게 강의 자료를 제공한다.
  • 수강생이 과제나 기타 활동으로 제출한 모든 자료는 임의로 복사/복제하거나, 다른 웹 사이트에 옮겨 담을 수 없으며, 원저자의 동의 없이 사용해서도 안 된다. 강의 중에 나눈 대화나 메시지는 사적인 것으로, 복사/복제하거나 제삼자에게 전달하거나 원저자의 허락 없이 유통할 수 없다.

 

수강료 안내(6주 과정)

USD 480, 한화 약 520,000원(환율에 따라 변동 가능)

W3DevCampus 한국 런칭을 기념하며 특별히 이번 11월 코스 등록자에 한해 10만원 상품권을 지급합니다!

 

 

Posted by 미래웹 / Posted on 23 Oct
  • Post Comments 0