사용자와 대화하고 데이터가 풍부한 동적인 웹 페이지를 만들고 싶은가요? 그렇다면 이 책이 제공하는 HTML5의 핵심적인 내용을 이해하세요. 기본적인 HTML5의 새로운 API뿐만 아니라 이런 API가 여러분의 페이지와 어떤 식으로 상호작용하는지, 자바스크립트를 활용하면 얼마나 개선되는지 등 다양한 내용을 배울 수 있어요. PC뿐만 아니라 모바일 장치에 쉽게 적용할 수 있는 최신 기술을 이용하면 정말 멋질 거예요. 여러분도 위치 정보, 비디오, 2D 이미지, 웹 저장소, 웹 워커 같은 최신 HTML5 기술을 이용할 수 있다고요! 세상에, 이런 HTML5 프로그래밍 책이 있다니 믿을 수가 없어요! 이 책은 HTML5와 자바스크립트로 대화식 웹 페이지, 웹 서비스뿐만 아니라 HTML5의 새로운 API를 이용해 웹 애플리케이션을 개발할 수 있는 완벽한 지침서입니다. 지루하고 딱딱한 강의가 아닌 만화가 있는 스토리텔링으로 HTML5와 자바스크립트를 이해할 수 있지요. 같은 개념이 여러 번 반복 등장하기 때문에 이 책을 다 읽었을 때는 배운 것을 최대한 많이 기억할 수 있을 거예요! 십자 퍼즐, 브레인 파워, 연습문제 등 다양한 학습요소로 재미있게 배우세요! 대상 독자 ­ HTML, CSS 기초 내용을 이해하고 있는 학생 ­ 자바스크립트를 배우려는 개발자 및 학생 ­ 웹 애플리케이션 개발에 관심 있는 개발자

1장 HTML은 혹독한 성장기를 거쳤습니다. 미미한 마크업 언어로 출발했지만, 최근 HTML은 중요한 존재로 거듭났습니다. 이제 우리는 로컬 저장소, 2D 그래픽, 오프라인 지원, 소켓, 스레드 등을 이용해서 진정한 웹 애플리케이션을 만드는 데 최적화된 언어를 갖게 되었습니다. 항상 좋은 일만 있었던 것은 아니었지만, HTML의 과거는 한편의 드라마였습니다(그 이유는 곧 알게 될 거예요). 이 장에서는 ‘HTML5’에 관한 모든 것에 감을 잡기 위해 웹마을로 여행을 떠날 것입니다. 3.8 페이지만 읽으면 HTML5의 초보딱지를 뗄 수 있어요. 2장 자바스크립트가 여러분을 새로운 곳으로 안내할 것입니다. 여러분은 이미 HTML 마크업(구조)과 CSS 스타일(프리젠테이션)의 모든 것을 알고 있습니다. 하지만 자바스크립트(동작)가 빠졌네요. 여러분이 구조와 프리젠테이션의 모든 것을 알고 있다면(물론 그렇다고 확신합니다) 멋진 페이지를 만들 수 있겠지만, 이걸로는 단지 페이지만 만들 수 있을 뿐입니다. 자바스크립트를 이용해서 동작을 추가하면 상호작용하는 페이지뿐만 아니라 완벽한 웹 애플리케이션까지 만들 수 있습니다. 여러분의 웹 툴킷에서 가장 흥미롭고 융통성 있는 기능을 추가할 준비가 되었나요? 자바스크립트와 프로그래밍 세계에 빠져 봅시다! 3장 여러분은 아직 사용자와 접촉하지 않았습니다. 여러분은 자바스크립트의 기초를 배웠지만 이를 바탕으로 사용자와 상호작용할 수 있을까요? 페이지가 사용자의 입력에 반응할 때, 페이지는 더 이상 문서가 아니라 살아 있는 존재가 되며, 애플리케이션으로 거듭납니다. 이 장에서 여러분은 사용자가 입력한 폼을 처리하고 구식 HTML

요소를 실제 코드로 연결하는 법을 배울 것입니다. 약간 위험하면서도 강력한 기능이죠. 안전벨트를 단단히 매세요. 이 장은 전개가 빠릅니다. 백지상태에서 상호작용하는 애플리케이션까지 핵심만 골라 쏜살같이 달려갈 거예요. 4장 여러분 자신을 스크립트 작성자라고 부를 수 있나요? 그럴지도 모르죠. 여러분은 이미 자바스크립트를 잘 알고 있습니다. 프로그래머가 될 수 있는데도 굳이 스크립트 작성자가 되길 원하는 사람은 아무도 없을 겁니다. 이제는 진지하게 심혈을 기울여야 할 시간이 왔습니다. 바로 함수와 객체를 배울 때가 된 거죠. 함수와 객체는 좀 더 강력하고 구조적이며 관리가 수월한 코드를 작성하는 데 핵심적인 존재입니다. 또한 HTML5 자바스크립트 API에서도 두루두루 사용되고 있습니다. 함수와 객체의 이해도가 증가할수록 좀 더 빨리 새로운 API로 건너가서 이들을 정복할 수 있습니다. 이 장에 발을 들여놓은 이상, 혼신을 다해 파고들어야 할 겁니다. 5장 어디를 가더라도 그곳에는 여러분이 있습니다. 때로는 자신의 위치를 파악하는 것이 큰 차이를 만들어 냅니다. 특히 웹 애플리케이션에서는 더 그렇습니다. 이 장에서는 위치를 인식하는 웹 페이지를 생성하는 방법을 소개할 것입니다. 때로는 사용자들이 서 있는 곳을 모퉁이까지 정확히 짚어낼 수도 있고, 때로는 사용자들이 있는 지역이 어딘지 결정할 수 있을 겁니다(물론 어느 도시인지도 알 수 있습니다!). 하지만 기술적인 문제 때문에 또는 사용자들은 일일이 꼬치꼬치 캐묻는 것을 싫어하기 때문에 사용자들의 위치에 관해 결정하지 못하는 것이 있을 수도 있습니다. 어쨌든 이 장에서는 자바스크립트 API인 지오로케이션을 탐색해 볼 겁니다. 여러분이 가진 위치추적 장치(데스크톱 PC도 상관없습니다)를 가지고 시작해 봅시다. 6장 지금까지 페이지에만 너무 오래 머물러 있었습니다. 이제 자리에서 일어나 웹 서비스와 대화를 하고, 데이터를 가져와서, 이 모든 데이터를 섞어 더 나은 경험을 창출할 때가 되었습니다. 이 정도는 되어야 최신식 HTML5 애플리케이션이라고 할 수 있습니다. 하지만 그러기 위해서는 먼저 웹 서비스와 대화하는 방법을 알아야 합니다. 이를 위해 이 장에서는 실제 운영 중인 웹 서비스에서 데이터를 끌어와서 여러분의 페이지에 추가할 것입니다. 일단 대화하는 방법을 터득하면 여러분은 어떤 웹 서비스에도 다가갈 수 있을 것입니다. 웹 서비스와 대화할 때 사용해야 하는 최신식의 새로운 전문용어로 여러분을 무장시켜 드리죠. 자, 어서 따라오세요. 몇 가지 API를 더 배울 것입니다. 7장 HTML이 ‘마크업’ 언어에서 해방됐습니다. 이제 여러분은 HTML5에서 새로 선보인 canvas 요소로 직접 픽셀을 만들어 조작하고 파괴할 수 있는 힘을 갖게 되었습니다. 이 장에서는 canvas 요소를 사용해서 여러분 내면 깊은 곳에 있는 예술가적 기질을 끌어내 것입니다. HTML은 구조만 있을 뿐 프레젠테이션은 없다는 말은 더 이상 통하지 않습니다. 캔버스로 그림도 그리고 색도 칠할 수 있습니다. 이제는 프레젠테이션이 대세입니다. 페이지에 canvas 요소를 추가하는 방법, 텍스트나 그림을 그리는 방법(물론 자바스크립트를 사용해서), 심지어 브라우저에서 canvas 요소를 지원하지 않는 경우에도 이를 처리하는 방법도 살펴볼 것입니다. 캔버스는 히트곡이 하나뿐인 가수가 아닙니다. 앞으로 다른 장에서도 많이 등장할 겁니다. 8장 플러그인은 필요 없습니다. 비디오가 HTML 가족의 최고 구성원이 되어, 이제 페이지에 video 요소를 던져 넣기만 하면 거의 모든 장치에서 바로 비디오를 볼 수 있습니다. 하지만 비디오는 그저 단순한 요소가 아닙니다. 비디오 재생을 제어하고, 여러분만의 사용자 정의 비디오 인터페이스를 생성해서 완전히 새로운 방식으로 HTML 요소들과 통합할 수 있는 자바스크립트 API이기도 합니다. 통합에 관해서 말인데요… 이전에 비디오와 캔버스의 관계에 관해서 얘기했었죠? 이 장에서는 비디오와 캔버스가 협력해서 강력하고 새로운 방법을 통해 실시간으로 비디오를 처리하는 방법을 보게 될 겁니다. 또한 비디오를 페이지로 가져와서 재생하는 자바스크립트 API의 역량을 시험해 볼 것입니다. 어서 오세요. 약간의 마크업과, 자바스크립트, 비디오와 캔버스를 사용해서 할 수 있는 일이 무엇인지 알게 되면 깜짝 놀랄 겁니다. 9장 클라이언트 데이터를 조그마한 옷장 쿠키에 밀어 넣는 것에 지쳐버렸나요? 90년대에는 문제가 없었지만, 요즘 웹 애플리케이션은 훨씬 더 큰 용량을 필요로 하고 있습니다. 매일 모든 사용자의 브라우저에서 5메가바이트의 데이터를 받아야 한다면 어떨까요? HTML5 웹 저장소 API가 해결해 줄 겁니다! 마치 사기 치는 것처럼 들릴 수도 있겠지만, 의심할 필요는 없습니다. 이 장에서는 사용자들의 장치에 모든 객체를 저장하고 여러분의 웹 경험에서 활용하는 데 필요한 모든 것을 여러분 앞에 대령하겠습니다. 10장 브라우저가 느려졌는데도 계속 실행하고 싶나요? 웹을 검색하거나 자바스크립트와 함께 충분한 시간을 보내지 못했다면, 아마도 ‘slow script(느려진 스크립트)’라는 메시지를 본 적이 있을 것입니다. 멀티코어 프로세서가 장착된 최신 컴퓨터에서 어떻게 스크립트가 현저하게 느려진 것일까요? 그 이유는 자바스크립트는 한 번에 오직 한 가지 일만 할 수 있기 때문입니다. 하지만 HTML5, 웹 워커와 함께라면 상황이 돌변합니다. 이제 더 많은 일을 처리하기 위해 여러분 자신만의 자바스크립트 일꾼을 갖출 수 있게 되었습니다. 좀 더 즉각적으로 반응하는 애플리케이션을 설계하고 싶거나 컴퓨터 CPU의 능력을 최대로 끌어올리고 싶다면 웹 워커가 도와줄 것입니다. 이제 자바스크립트 관리자가 되어 웹 워커가 도움이 될 겁니다.

옮긴이 글 홍형경 연예계를 보면 새로운 신인이 등장해 각광을 받다 어느 틈엔가 대중의 눈앞에서 사라지는 경우가 있습니다. 반면 꾸준히 인기를 유지하며 오랫동안 생명력을 유지해 꾸준한 인기를 끌고 중요한 존재감을 발휘하는 사람도 있습니다. IT 분야의 기술도 마찬가지가 아닌가 싶습니다. 신기술이 등장하고 이 기술을 모르면 업계에서 뒤처질 것 같은 생각이 들지만, 어느새 홀연히 자취를 감추는 기술이 있는가 하면, 이 치열한 IT 생태계에서 살아남아 다른 기술과 어깨를 나란히 하며 중요한 한 부분을 차지하는 기술도 있습니다. HTML5가 소개된 지도 벌써 몇 년이 흘렀습니다. HTML5가 등장할 당시 국내외 많은 전문가는 흥분의 도가니에 휩싸였었죠. 다행히도 HTML5는 홀연히 자취를 감춘 신인 배우가 아니라 꾸준한 인기를 몰고 다니며 살아남아 진화하고 있는 기술이라 할 수 있습니다. 아직 HTML5 스펙이 완성된 것은 아니지만 이미 국내외를 막론하고 실제 현장에서 많은 사람이 사용하고 있습니다. 웹과 HTML의 발전과정을 보면 참, 말도 많고 탈도 많았습니다. 업계 간, 특히 브라우저 제작사들의 치열한 경쟁과 기싸움이 있었고, 심지어 ‘전쟁’이란 표현까지 등장했었죠. 하지만 돌이켜보면 그런 모든 과정의 산물이 바로 HTML5가 아닌가 하는 생각이 듭니다. 사실 과거 HTML와 HTML5의 발전과정상의 중요한 차이점은 바로 플랫폼의 다양화와 발전에 있습니다. 특히 스마트폰의 대중화가 큰 영향을 끼쳤죠. 기존의 핸드폰이 “전화 기능과 그 외” 기능이라고 했다면, 스마트폰은 “컴퓨터와 그 외(여기에 전화기 기능도 포함되죠)라고 말하더라도 무리가 없을 것입니다. 이러한 플랫폼의 다양화와 발전과정은 현재 HTML5의 기능과 모습을 이해하고 유추하는 데 도움이 될 것입니다. 현재, 그리고 앞으로 선보일 HTML5의 놀라운 기능은, CSS와 자바스크립트와 함께 시너지효과를 발휘할 때 배가 됩니다. HTML5 이전을 생각해보면, 프로그래밍 적인 부분은 자바스크립트, 멋진 화면은 CSS, 구조는 HTML이 담당했습니다. 물론 이것이 달라진 것은 아닙니다만, HTML5로 거듭나면서 상상하지 못했던 놀라운 기능을 선보이고 있습니다. 이런 요인 때문에 많은 전문가가 HTML5에 열광하고 있을 것입니다. 개인적으로 특히 지오로케이션, 로컬 저장소, 캔버스 등의 기술에 흥미와 애착을 느꼈습니다. 이 책은 헤드 퍼스트 시리즈의 독특한 학습방식을 통해 좀 더 이해하기 쉽고 사용하기 쉽게 HTML5의 기능을 소개하고 있습니다. 특히 헤드 퍼스트 시리즈의 열성팬이거나 이 시리즈를 통해 웹 페이지 작성, 개발을 원하시는 분이라면, 기초학습은 『Head First HTML with CSS & XHTML: 웹2.0 시대의 웹 표준 학습법』으로 출발해서, 『Head First JavaScript: 대화형 웹 애플리케이션의 시작』으로 프로그래밍적인 감을 잡고, 『Head First Web Design: 실용적이고 사용자 친화적인 웹 페이지 만들기』를 통해 심화학습을 한 뒤, 마지막으로 『Head First HTML5 Programming: 웹 표준으로 만드는 생동감 있는 웹 애플리케이션』으로 대단원의 막을 내린다면 이보다 좋을 순 없을 것 같다는 생각이 드는군요 (대단원의 막을 내린다고 했지만, 실은 마지막이 아니라 새로운 시작입니다). 이 책이 나오기까지 수고해 주신 한빛미디어 여러분께 감사 드립니다. 항상 가족 같이 친근하게 대해 준 전문서 팀 모든 분들께 감사 드립니다. 한빛과 인연을 맺으며 알게 된 송관 차장님, 꾸준히 좋은 관계로 지내며 많은 도움을 주신 우재남 저자님께 감사 드립니다. 특히 원고가 늦어졌지만 넓은 아량으로 이해해주시고 마지막까지 세심한 배려를 해주신 박은지 편집자님께 감사 드립니다. 그리고 역자에게 힘이 되는 가족에게 고마움을 전하며, 원고로 인해 시간을 많이 내지 못했지만 이해하고 배려해준 사랑하는 그녀에게 고마움을 전합니다.