Как начать работать с 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 ++ , но долгое время я просто использовал простой Блокнот. Под «большим» я подразумеваю «достаточно большой, чтобы зарабатывать достаточно денег, чтобы оплачивать свои расходы на проживание и иметь немного свободных».