HTML5를 시작하려면 어떻게해야합니까? [닫은]

HTML5를 배우는 데 권장되는 워크 플로는 무엇입니까? 어떤 도구를 설치해야합니까? 어떤 SDK? 어디서 시작하나요? 테스트하는 방법? 디버깅하는 방법? 무엇을 읽습니까?

"HTML5 개발"이라는 레이블이 붙은 것은 사실 HTML, CSS, JS 등이 혼합되어 있다는 것을 이해하지만 더 큰 프로젝트가 메모장에서 개발되었다고 생각하지 않습니다. 그렇기 때문에 워크 플로에 대한 팁과 요령을 공개하도록 요청합니다.

새로운 HTML5 프로젝트를 처음부터 시작한다면 다음과 같이 할 것입니다.

HTML5 상용구를 다운로드하여 사용하십시오 . 이렇게하면 대부분의 중요한 것들이 초기화되고 테스트 준비가 된 새로운 페이지가 나타납니다. Firebug와 함께 사용해야하는 멋진 디버깅 기능도 포함되어 있습니다.

코드의 기록과 사용법을 보려면 HTML5 에 대해 자세히 살펴보십시오 .

Mac에서는 Coda를 사용하고 직장에서는 코드보기에서 Dreamweaver를 사용합니다. 그들은 당신을 위해 페이지를 만들지 않을 것이지만, 코드 완성, 힌트 및 색상 코딩은 잘 작동합니다. Aptana 등이 훌륭한 기능을 제공한다고 확신하지만 html과 관련하여 더 나은 것이 항상 더 간단하다는 것을 알았습니다.

"A Book Apart"에서 HTML5 및 CSS3 책을 확실하게 선택하십시오 (CSS3는 이달 말에 나옵니다).

그리고 마지막으로-이 모든 것을 알아 내려고 시도하십시오.

오페라 개발자 네트워크 -http : //dev.opera.com/articles/view/html-5-canvas-the-basics/

캔버스 치트 시트-http: //blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

HTML5 Canvas로 그리는 방법 http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5는 하나의 통합 된 것이 아닙니다. HTML에 대한 확장 모음으로, 일부는 널리 구현되어 안전하게 사용할 수 있으며, 일부는 아직 구현되지 않았으며 그 사이에 많은 부분이 있습니다. HTML5를 일관된 단일 개발 플랫폼으로 취급하고 '모두 학습'하면 정말 어려운 시간이 될 것입니다.

대신 기본 HTML, CSS, JavaScript, 핵심 DOM, HTML DOM, 기본 브라우저 객체 모델 등 웹 전체를 배워야합니다. 그런 다음 새 웹의 기능을 필요한 위치에 추가 할 수 있으며 HTML5 확장, CSS3 속성, 캔버스 그리기, 웹 소켓, HTML5 작업에서 분리 된 다른 DOM 및 BOM 확장 등 브라우저 지원이 가능합니다 ...

웹의 기능 세트는 지속적으로 발전하고 있으며 단일 참조 지점이 없습니다. W3Schools ( 우연히 W3C와 관련 이 없음 )는 시도하지만 오류가 가득합니다. 그것이 복음이라고 말하는 것을 믿지 마십시오.

결정적인 HTML4 , CSS2 를 참조해야 할 수도 있습니다 . DOM Core 및 DOM HTML 사양을 확인하십시오. Firefox 및 IE가 지원하는 것에 대한 MDC의 DOM 참조 및 MSDN의 DOM 참조 를 살펴볼 수도 있습니다 . HTML5 스펙은 너무 더 최신의 DOM의 물건을 많이뿐만 아니라 새로운 HTML 확장을 포함하지만, 표준 문서의 기준으로도 사용하는 것은 매우 어려운, 길고 다루기 힘든 문서입니다. 뚫을 수없는 ECMAScript 사양 만큼이나 나쁘지는 않습니다 . 고맙게도 ActionScript 작업에 익숙하다면 이미 많은 내용에 익숙 할 것입니다.

HTML / CSS / JS를 개발하기 위해 SDK 또는 IDE가 필요하지 않습니다. 원하는 경우 IDE를 사용할 수 있지만 가장 좋아하는 텍스트 편집기에서 모든 작업을 수행하게되어 기쁩니다. 걱정할 빌드 / 컴파일 단계가 없으므로 파일을 저장하고 다시로드 작업을 완료하면됩니다. 대부분의 최신 웹 브라우저에는 디버거 및 기타 개발 도구가 내장되어 있거나 (예 : IE8) 확장으로 쉽게 구할 수 있습니다 (예 : Firebug ).

JetBrains (또는 PHPStorm, RubyMine, PyCharm과 같은 IntelliJ 기반 제품은 모두 HTML을 지원하므로 WebStorm )를 강력히 권장 합니다. CSS, HTML 자동 완성 및 입력하는 동안 정확성을 검사하는 라이브를 얻습니다. Javascript (다른 곳에서는 보지 못했던)에 대한 리팩토링 지원, 심지어 IDE에서 Javascript를 디버깅하는 기능 (Firebug 또는 Chrome 개발자 도구가 부족한 경우). SVN, Git, Perforce 및 CVS 지원뿐만 아니라 프로젝트 지원도 제공합니다. 그리고 다른 많은 기능들, 적극 권장됩니다 ...

몇 가지 귀중한 도구

• FireBug-Firefox 용 개발자 플러그인. JS, HTML, 스타일을 디버깅 할 수 있습니다.
• 이전 버전의 IE (6,7) 용 IE 개발자 도구 모음. 그래도 HTML5는 많지 않습니다. 새로운 IE에는 F12 도구가 있습니다.
• Chrome에는 개발자 도구가 있습니다.

이러한 도구는 주로 자바 스크립트 디버깅을위한 것이며 요소 위치 지정 및 적용된 CSS 스타일과 관련된 사항을 파악하는 데 사용됩니다.

IDE 권장 사항을 찾고 있다면 Eclipse가 좋습니다. Javascript 도구를 찾고 있다면 Firebug는 디버깅에 좋습니다.

그러나 실제로는 "도구"가 필요하지 않습니다. "더 큰 프로젝트를 메모장에서 개발할 수 없거나 개발할 수 없다"는 개념은 단순히 잘못된 것이라고 생각합니다. 메모장 ++을 사용하여 모든 HTML / CSS / Javascript를 작성하고 이것이 전문 웹 디자이너에게조차 매우 일반적인 접근법이라고 생각합니다. Notepad ++에는 HTML, CSS 및 Javascript에 대한 구문 강조 표시 기능과 자동 완성 기능이 있습니다. 그 이상을 제공하는 소프트웨어를 원하는 경우 어떤 기능이 중요한지 구체적으로 알려주십시오. (BTW, Mac 사용자 인 경우 BBEdit을 사용해보십시오).

더 큰 사이트는 종종 Django 또는 Ruby on Rails와 같은 프레임 워크로 작성되지만 HTML5를 사용하거나 배우는 것과는 아무런 관련이 없습니다.

Adobe (Flash 제작자)는 실제로 Flash to HTML5 변환 도구를 출시하는 과정에 있다고 생각합니다.

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

효과적으로 Flash는 HTML5를 개발하기위한 도구가됩니다.

이번 주 현재 Microsoft는 Silverlight와 비슷한 방향으로 가고 있다고 발표했으며 이제 모든 것이 HTML5로 가고있는 것처럼 보입니다.

내가 가지고있는 한 가지 질문은이 두 도구로 생성 된 HTML5 코드가 얼마나 좋을까요? 실제로 릴리스 될 때까지는 그에 대한 답을 알지 못하지만 생성 된 코드가 특히 좋은 품질 인 것은 결코 없습니다. 바라건대 우리는 현대의 MS Front Page에 해당하지 않을 것입니다.

Javascript 코드에 대한 빌드 시스템을 설정하고 모든 빌드마다 JSLint를 검사하도록하는 것이 좋습니다 . 나는 이것이 초기에 많은 오류를 선택하고 좋은 코딩을 촉진한다는 것을 알았습니다 (너무 엄격한 경우 옵션으로 재생). 좋은 예 는 GitHub 에서 jQuery의 빌드 시스템을 참조하십시오 .

편집을위한 것 이외에도 메모장 ++의 큰 팬이며 아직 부풀어 오르고 GUI 속임수가없는 유용한 기능을 제공하는 IDE를 찾지 못했습니다.

최신 Dreamweaver를 볼 수 있지만 코드 편집기는 나쁘지 않으며 여러 HTML5 위젯 이 포함 된 위젯 갤러리가 있습니다.

더 큰 프로젝트가 메모장에서 개발 될 수 있다고 생각하지 않습니다.

당신은 거기 잘못되었을 것입니다. 나는 오랫동안 메모장 사용자이며, 그것이 가장 좋은 방법이라고 생각합니다. 디버깅을 위해 IE의 개발자 도구, Firefox의 FireBug 및 Chrome의 검사기를 사용합니다.

HTML5에 관한 한, 기본적으로 몇 가지 추가 장난감이있는 일반 HTML입니다. 게다가 HTML5 문서를 선언하는 데 방해가되지 않으며 이전 버전의 HTML에있는 것만 사용하십시오.

모든 비용을 피하는 것이 좋습니다 한 가지는 Dreamweaver와 같은 프로그램입니다. 그래픽 디자인 도구를 사용하면 작업이 쉬워 지지만 자신이 원하는 작업은 매우 어려워집니다. (나는 이것을 말할 때하고있는 과정에서 다른 학생들을보고 있습니다)