Як почати роботу з HTML5? [зачинено]

Який рекомендований робочий процес для вивчення HTML5? Які інструменти слід встановити? Що SDK? З чого почати? Як перевірити? Як налагодити? Що я читаю?

Я розумію, що те, що часто позначають як "розробка HTML5", насправді є сумішшю HTML, CSS, JS та іншого, проте я не вірю, що більші проекти розробляються в Notepad. Саме тому я прошу розкрити свої поради та рекомендації щодо вашого робочого процесу.

Якби я зараз почав новий проект HTML5 з нуля, я, мабуть, зробив би щось подібне:

Завантажте та використовуйте котельну панель HTML5 . Це дасть вам нову сторінку з більшістю важливих речей, ініціалізованих та готових до тестування. Також включає деякі приємні функції налагодження, які ви повинні використовувати разом з firebug

Перегляньте занурення у HTML5, щоб переглянути історію та використання коду.

На своєму mac я використовую Coda, а на роботі використовую Dreamweaver у режимі перегляду Code. Вони не збираються створювати сторінку для вас, але доповнення коду, підказки та кольорове кодування добре працюють. Я впевнений, що Аптана і подібні пропонують чудові функції, але я завжди вважав простішим, щоб бути кращим, коли мова йде про HTML.

Defintiely забрати книги HTML5 та CSS3 з "A Book apart " (CSS3 вийде пізніше цього місяця)

І наостанок - спробувати і з'ясувати всю цю справу:

Мережа розробників Opera - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Sheet Sheet - 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, малювання полотна, веб-розетки, інші розширення DOM і BOM відкручуються від роботи HTML5 ...

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

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

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

Я настійно рекомендую WebStorm від JetBrains (або будь-яких їх продуктів на базі IntelliJ , таких як PHPStorm, RubyMine, PyCharm, оскільки всі вони підтримують HTML). Ви отримуєте CSS, HTML автоматичне завершення та живі (під час введення) перевірки на правильність. Підтримка Refactoring для Javascript (чогось я ще ніде не бачив), і навіть можливість налагодження Javascript у IDE (якщо бракує Firebug чи інструментів для розробників Chrome). Він має підтримку проекту, а також підтримку SVN, Git, Perforce та CVS. І безліч інших функцій, дуже рекомендується ...

Кілька безцінних інструментів

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

Ці інструменти в основному для налагодження Javascript та для з'ясування речей щодо позиціонування елементів та застосованих стилів CSS.

Якщо ви шукаєте рекомендацію IDE, Eclipse досить хороший. Якщо ви шукаєте інструменти Javascript, Firebug чудово підходить для налагодження.

Однак вам справді не потрібні будь-які «інструменти». Я думаю, що поняття, що "більші проекти не можуть бути / не розробляються в" Блокноті ", є просто помилковим. Я використовую Notepad ++ для написання всіх моїх HTML / CSS / Javascript, і я думаю, що це дуже поширений підхід - навіть для професійних веб-дизайнерів. У блокноті ++ є підсвічування синтаксису для HTML, CSS та Javascript, а також автоматичне завершення. Якщо ви хочете програмного забезпечення, яке пропонує більше, будь ласка, уточнюйте, які функції вам важливі. (BTW, якщо ви користувач Mac, спробуйте BBEdit).

Більші сайти часто пишуться з такими рамками, як Django або Ruby on Rails, але це дійсно не має нічого спільного з використанням або вивченням HTML5.

Я вважаю, що 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.

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

Крім редагування, я є великим шанувальником Notepad ++, оскільки мені ще не вдалося знайти IDE, який надає корисні функції без цілого навантаження та хитрості GUI.

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

Я не вірю, що більші проекти можуть бути / розробляються в «Блокноті»

Ви помилитесь там. Я давній користувач Notepad, і я думаю, що це найкращий шлях. Для налагодження я використовую Інструменти для розробників IE, FireBug Firefox та Інспектор Chrome.

Що стосується HTML5, це в основному звичайний HTML з кількома додатковими іграшками. Крім того, ніщо не заважає вам оголосити документ HTML5, а потім використовувати лише ті речі, які є у старих версіях HTML.

Я б рекомендував уникати будь-якої ціни такі програми, як Dreamweaver. За допомогою графічних інструментів для дизайну все виглядає просто, але коли ви хочете робити власні речі, це стає дуже важким. (Я дивлюся на інших студентів курсу, який я роблю, коли говорю це)