Как начать работать с HTML5? [закрыто]

42

Каков рекомендуемый рабочий процесс для изучения HTML5? Какие инструменты я должен установить? Какой SDK? Когда начать? Как проверить? Как отлаживать? Что я читаю?

Я понимаю, что то, что часто называют «разработкой HTML5», на самом деле представляет собой смесь HTML, CSS, JS и многого другого, однако я не верю, что в Notepad разрабатываются более крупные проекты. Вот почему я прошу вас раскрыть ваши советы и рекомендации по поводу вашего рабочего процесса.

daniel.sedlacek
источник
Я бы определенно посоветовал взглянуть на diveintohtml5, но также ознакомьтесь с html5rocks htm5rocks, и этот может быть неизвестен многим, но Facebook активно продвигает HTML5:
посмотрите
Сделай проворную вещь. <html>Hi</html>начинает, потому что вам не нужен DOCTYPE. Повторение.
Майкл Даррант

Ответы:

42

Если бы я сейчас начал новый HTML5-проект с нуля, я бы, вероятно, сделал что-то вроде этого:

Загрузите и используйте HTML5 Boilerplate . Это даст вам свежую страницу с большинством важных вещей, инициализированных и готовых к тестированию. Также включает в себя некоторые хорошие функции отладки, которые вы должны использовать вместе с Firebug

Просмотрите Dive in to HTML5, чтобы увидеть историю и использование кода.

На моем Mac я использую Coda, а на работе я использую Dreamweaver в представлении «Код». Они не собираются создавать страницу для вас, но завершение кода, подсказки и цветовое кодирование работают хорошо. Я уверен, что Aptana и тому подобное предлагают отличные возможности, но я всегда находил проще быть лучше, когда дело доходит до HTML.

Определенно возьмите книги HTML5 и CSS3 из «A Book Apart» (CSS3 выйдет в конце этого месяца)

И, наконец, чтобы попытаться выяснить все это, проверьте:

Сеть разработчиков Opera - 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/

Грегг Б
источник
Я бы также порекомендовал вам изучить JavaScript, а книгу, которую я бы порекомендовал для этого, - это JavaScript: исчерпывающее руководство Дэвида Фланагана, после этого jQuery просто потрясающий. Что касается редактора, Aptana и DreamWeaver, на мой взгляд, ужасны. Я бы порекомендовал использовать Emacs.
После окончательного руководства вы должны прочитать « Крокфорд» : «Хорошие детали ».
kzh
Упомянутую книгу HTML5 можно бесплатно прочитать на ее домашней странице: html5forwebdesigners.com
user16764
52

HTML5 - это не единая интегрированная вещь. Это набор расширений HTML, некоторые из которых широко реализованы и могут безопасно использоваться, некоторые из которых еще никто не реализует, и между ними много всего. Если вы попытаетесь трактовать HTML5 как единую платформу разработки и «выучить все это», у вас будет действительно трудное время.

Вместо этого вам нужно изучить веб в целом: базовый HTML, CSS, JavaScript, базовый DOM, HTML DOM, базовую объектную модель браузера. Затем вы можете добавлять функции New Web по мере необходимости, а поддержка браузера позволяет: расширения HTML5, свойства CSS3, рисование на холсте, веб-сокеты, другие расширения DOM и BOM, выделенные из работы HTML5 ...

Набор функций Интернета постоянно развивается, и нет единой точки отсчета. W3Schools (что случайно не имеет ничего общего с W3C) пытается, но переполнен ошибками. Не верьте тому, что говорится как Евангелие.

Возможно, вам придется обратиться к окончательному HTML4 , CSS2 . DOM Core и DOM HTML спецификации, чтобы убедиться. Вы также , вероятно , хотите посмотреть на ссылки DOM MDC в и ссылки DOM MSDN в течение какой поддержки Firefox и IE. Спецификация HTML5 содержит много более современных DOM-материалов, а также новые расширения HTML, но это длинный и громоздкий документ, который довольно сложно использовать даже по стандартам стандартов документов. Хотя и не так плохо, как непробиваемая спецификация ECMAScript . (К счастью, вы, вероятно, уже знакомы со многим из этого, если вы привыкли работать с ActionScript.)

Вам не нужен SDK или IDE для разработки HTML / CSS / JS. Вы можете использовать IDE, если хотите, но я очень рад делать все в моем любимом текстовом редакторе. Не нужно беспокоиться о сборке / компиляции, вы просто сохраняете файл и нажимаете перезагрузить, работа выполнена. Большинство современных веб-браузеров имеют встроенный отладчик и другие средства разработки (например, IE8) или легко доступны в виде расширений (например, Firebug ).

bobince
источник
1
Я понимаю, что то, что часто называют «разработкой HTML5», на самом деле представляет собой смесь HTML, CSS, JS и многого другого ... однако я не верю, что в Notepad можно разрабатывать более крупные проекты. Вот почему я прошу вас раскрыть ваши советы и рекомендации по поводу вашего рабочего процесса.
2
+1 «как мы все знаем, HTML5 будет завершен в 2022 году, через три года после событий, показанных в« Бегущем по лезвию ».» - tiny.cc/standards-bloat-and-html5
8
Нет, большие проекты не будут разрабатываться в блокноте. Это было бы безумно. Блокнот - это ужасный текстовый редактор. Они будут разработаны в Notepad ++. :-)
bobince
11
@daniel: По крайней мере, я думаю, что это полезный ответ, независимо от того, полезен ли он для вас. Он советует использовать (хороший) текстовый редактор; Мне также нравится Notepad ++, хотя я обычно использую Emacs (война с редактором не предназначена). Он говорит просто придерживаться часто поддерживаемых функций и создавать специфичные для HTML 5 / CSS 3 (& Co.) неологизмы поверх ваших (на тот момент уже работающих) веб-страниц. HTML 5 не совсем новая вещь; если вы можете водить автомобиль, вы можете водить новый блестящий автомобиль с гибридным двигателем, кондиционером и всеми новыми функциями, которые он имеет; тем не менее, это все еще автомобиль, и вы можете использовать его, чтобы двигаться по своему пути.
5
@daniel: Этот ответ, пожалуй, самый полезный здесь, в том числе и для вас, поскольку он содержит совет, который вам нужен, и никакие сообщения о том, что это не остановит меня, проголосуют за него.
9

Я настоятельно рекомендую WebStorm от JetBrains (или любой из их продуктов на основе IntelliJ , таких как PHPStorm, RubyMine, PyCharm, поскольку все они поддерживают HTML). Вы получаете CSS, автозаполнение HTML и живую (во время ввода) проверку на правильность. Рефакторинг поддержки Javascript (чего я не видел больше нигде) и даже возможности отладки Javascript в IDE (если вам не хватает инструментов Firebug или Chrome Developer). Он имеет поддержку проектов, а также поддержку SVN, Git, Perforce и CVS. И множество других функций, настоятельно рекомендуется ...

Крис Эриксон
источник
+1, это звучит захватывающе. Я думаю, что я попробую их 45-дневную бесплатную пробную версию.
Я использовал IntelliJ IDEA для разработки на Java, и ничто не затрагивает его с точки зрения предоставляемых им функций. Jetbrains также создает плагин ReSharper для Visual Studio. Если я искал чистую веб-среду, я бы попробовал WebStorm. Один только рефакторинг того стоит.
8

Несколько бесценных инструментов

  • FireBug - плагин разработчика для Firefox. Позволяет отлаживать JS, HTML, Styles.
  • Панель инструментов разработчика IE для более старых версий IE (6,7). Там не так много HTML5. Новый IE имеет инструмент F12.
  • Chrome имеет инструменты для разработчиков

Эти инструменты в основном предназначены для отладки Javascript и выяснения положения элементов и примененных стилей CSS.


источник
Спасибо, если я правильно понял, браузерная совместимость - это всегда проблема.
Да, это становится лучше с современными браузерами, хотя. IE 6-7 и 8 в части довольно плохо в этом отношении.
Для тестирования различных версий Internet Explorer используйте IETester ( my-debugbar.com/wiki/IETester ) или виртуальные машины, предоставленные Microsoft ( go.microsoft.com/fwlink/?LinkId=70868 )
6

Если вы ищете рекомендацию IDE, Eclipse довольно хорош. Если вы ищете инструменты Javascript, Firebug отлично подходит для отладки.

Тем не менее, вам действительно не нужны никакие «инструменты». Я думаю, что идея о том, что «большие проекты не могут / не разрабатываются в« Блокноте », просто неверна. Я использую Notepad ++ для написания всего моего HTML / CSS / Javascript, и я думаю, что это очень распространенный подход - даже для профессиональных веб-дизайнеров. Notepad ++ имеет подсветку синтаксиса для HTML, CSS и Javascript, а также автозаполнение. Если вам нужно программное обеспечение, которое предлагает больше, пожалуйста, укажите, какие функции важны для вас. (Кстати, если вы пользователь Mac, попробуйте BBEdit).

Крупные сайты часто пишутся с такими фреймворками, как Django или Ruby on Rails, но это на самом деле не имеет ничего общего с использованием или изучением HTML5.

Джефф
источник
интересно ... какой плагин Eclipse для разработки JS вы бы порекомендовали?
Никогда не использовал, но эта ссылка может быть полезной. Я считаю, что Aptana также доступна как отдельная программа (альтернатива Eclipse). Многие рекомендовали это, но я никогда не пробовал. Может быть что-то стоит посмотреть. stackoverflow.com/questions/613988/…
Джефф
Просто помните, что Notepad сильно отличается от Notepad ++, я бы тоже не стал разрабатывать сайт ( любой сайт) в Notepad.
Согласитесь, я взял комментарий для обозначения «текстовый редактор», а не строго «MS Notepad», но если это так, то вы совершенно правы
Джефф
5

Я полагаю, что Adobe (создатели Flash) на самом деле находятся в процессе выпуска инструмента преобразования Flash в HTML5, который, возможно, стоит того, чтобы на него взглянуть.

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

По сути, Flash становится инструментом для разработки HTML5.

И на этой неделе Microsoft объявила, что они движутся в аналогичном направлении с Silverlight, так что похоже, что сейчас все идет HTML5.

Единственный вопрос, который у меня есть, - насколько хорош будет код HTML5, сгенерированный этими двумя инструментами? Мы не узнаем ответ на этот вопрос, пока они не будут выпущены, но я никогда не находил сгенерированный код особенно хорошего качества. Надеюсь, мы не получим современный эквивалент MS Front Page.

Spudley
источник
7
Честно говоря, я не верю в инструменты преобразования, код будет, мягко говоря, неоптимальным. Я знаю, что Flash - отличный инструмент, если не злоупотреблять им, и он останется с нами надолго. Но я бы лучше написал JS и CSS с соответствующими инструментами :)
1
@daniel - согласился, что инструменты конвертации обычно не так хороши, и я сказал так же. Но это может быть хорошей отправной точкой для вас, если вы хотите конвертировать существующую флэш-память. Даже если вы потом будете вручную обрабатывать полученный HTML-код, по крайней мере, вам будет с чем работать.
Спудли
4
Нитпик: Adobe купила Flash (перешла через Macromedia), но не создала ее.
Корнел
4

Я настоятельно рекомендую настроить систему сборки для вашего кода Javascript и проверять ее на соответствие JSLint при каждой сборке. Я обнаружил, что это выявляет много ошибок на раннем этапе и способствует хорошему кодированию (поиграйтесь с опциями, если оно слишком строго). Посмотрите на систему сборки jQuery на GitHub для хорошего примера.

Помимо этого, я большой поклонник Notepad ++, так как мне еще не удалось найти IDE, которая бы обеспечивала полезные функции без всякой раздувания и хитрости GUI.

Вы можете взглянуть на последнюю версию Dreamweaver, хотя редактор кода неплох, и у него есть галерея виджетов с множеством виджетов HTML5, которые вы можете просто вставить.

Адам Хит
источник
2

Я не верю, что большие проекты могут быть разработаны в Notepad

Вы были бы не правы там. Я давний пользователь Notepad, и я думаю, что это лучший путь. Для отладки я использую инструменты разработчика IE, Firefox FireBug и Chrome Inspector.

Что касается HTML5, то в основном это обычный HTML с несколькими дополнительными игрушками. Кроме того, ничто не мешает вам объявить документ HTML5, а затем использовать только то, что есть в более старых версиях HTML.

Одной вещью, которую я бы рекомендовал избегать любой ценой, являются такие программы, как Dreamweaver. Они облегчают работу с помощью инструментов графического проектирования, но когда вы хотите сделать что-то свое, это становится очень сложно. (Я смотрю на других студентов на курсе, который я делаю, когда говорю это)

Сантош Кумар
источник
Определите большое. Блокнот даже не имеет подсветки синтаксиса, и обслуживание может быть проблемой с Блокнотом ... Я бы по крайней мере выбрал Блокнот ++ ... даже VIM! :)
Сейчас я использую Notepad ++ , но долгое время я просто использовал простой Блокнот. Под «большим» я подразумеваю «достаточно большой, чтобы зарабатывать достаточно денег, чтобы оплачивать свои расходы на проживание и иметь немного свободных».