2011년 5월 25일

웹앱을 만들며 배우는 HTML5 – 강의목차(예정)





  1. HTML5와의 첫만남
    1. 강의에 들어가기 앞서..
    2. HTML5 소개
    3. HTML5를 테스트하기 위한 시뮬레이터 세팅
  2. 트위터 웹앱을 만듭시다.
    1. 새로운 HTML5의 시멘틱 테그
    2. 뷰포트와 CSS 리셋
    3. CSS를 통한 모바일에 최적화된 웹앱
    4. 그레디에이션
    5. 네비게이션 아이콘
    6. 트윗 리스트의 간단한 스타일링
    7. 웹앱을 웹앱답게! 아이폰에 최적화된 웹앱 메타정의
  3. Ajax와의 통신
    1. Ajax와 통신 만들기
    2. 트윗들을 JSON형식을 받아보자.
    3. CSS3 변환
    4. 웹 폰트
  4. 위치정보, 오리엔테이션 감지 그리고 CSS3 미디어 쿼리
    1. CSS3 미디어 쿼리
    2. 자바스크립트로 오리엔테이션을 감지해보자.
    3. 위치정보
  5. HTML5 오프라인 저장소 데이터베이스 활용
    1. HTML5 오프라인 저장소 데이터베이스 사용하기
    2. 트윗들을 캐시해보자.
    3. 캐시들의 명시(Manifest)
    4. 온/오프라인 상태 감지
  6. HTML5 폼(form)을 활용한 주소록 웹앱 만들기
    1. 웹 SQL DB 만들기
    2. HTML5의 새로운 폼 입력 유형
    3. CSS3의 애니메이션
  7. <Audio> 와 <Video> 테그로 영화 트레일러 만들기
    1. <Audio> <Video> 테그
    2. 커스톰 오디오 플레이어
    3. 재생 상태바 추가하기
    4. 오디오 바꾸기
  8. 자바스크립트와 캔버스로 그림그리기
    1. <canvas> 요소 알아보기
    2. 그려진 그림을 회전하고 크기조절
    3. 이미지 회전하기
    4. 애니메이션을 해보자!
  9. 캔버스에 그려진 그림을 애니메이션 해보기

    사실 이 과정은 강의라 하긴 좀 그렇고, Oreilly사의 Mobile Web Development 인터넷 동영상 강의를 보고 정리한 것을 한글화 시키고 튜토리얼 방식으로 만들 예정이다. 아직 시작도 하지 않았지만 국내에 HTML5 관련된 자료가 많이 없어서 이렇게 좋은 자료가 많이 알려지지 않아서 아쉬운 마음에 내 블로그와 향후 html5korea.co.kr로 옮겨올 자료를 일단 여기에 포스팅할 예정이다.

    html5가 아직까지 많은 사람들이 대체 이걸 왜 사용하고 써야하는지 모르는 사람들이 대부분일 것이다. 그리고 사실 이 기술이 표준으로 제정될 것인지에 대한 의문도 남아있다. 하지만, 확실한 것은 웹 표준 제정기구에서 표준화에 대해 계속 제정중이고, 대부분의 웹 브라우저가 HTML5 기술을 채택하고 있다.

    때문에 우리는 HTML5를 익힘으로써 미래의 웹에 대해 알 수 있고 더 나아가 사용자들이 과연 HTML5가 표출되는 스마트폰이나 컴퓨터를 통해 어떤 것을 할 것인가, 그리고 웹서비스의 미래는 어떠할 것인가에 대해 알 수 있을 것이다.

    이 강의의 모든 내용은 오픈시킬 예정이고, 라이센스는 CCL(Creative Common License)로 제공될 예정이다. 출처만 있으면 전문을 가져가도 상관없다. 어차피 나도 외국 강의듣고 정리할 예정이라서.. 여튼 중요한건 하루라도 빨리 컨텐츠를 만드는 것이니깐. 일단 업데이트는 1주일에 한 챕터씩 업데이트 될 예정이다. 필자가 회사원인지라 주중에는 간단히 오레일리 인강 듣고 주말에 정리를 할 예정이라서.. 여하튼 빠른 업데이트를! 실시할 수 있도록 노력해 보겠다.. ^^