Лекція №3. Модель стандартів Web - html, css і JavaScript
Для чого потрібно разділяти?
Розмітка – основа кожної сторінки
Що таке XHTML?
Валідація – что це таке?
CSS – давайте додамо трохи стилю
JavaScript – додавання поведінки на сторінки Web
Приклад сторінки
index.html
styles.css
1. Для чого потрібно разділяти?
Це звичайно перше питання, що задають про Web-стандарти. Можна успішно реалізувати контент, стильове оформлення й компонування використовуючи тільки HTML — елементи шрифту для стилю й таблиці HTML для компонування, тому навіщо турбуватися про XHTML/CSS? Таблиці для компонування раніше використовувалися Web-дизайну, і багато хто і зараз це використовують (хоча не повинні б цього робити). Нижче представлені найбільш очевидні причини використання CSS і HTML замість застарілих методів:
Ефективність коду: Чим більшими стають ваші файли, тим більше потрібно часу для їх завантаження, і тим дорожче це буде для деяких людей (які все ще сплачують за завантаження кожного мегабайта). Тому було б небажано попусту займати смугу пропускання більшими сторінками, захаращеними інформацією про оформлення й компонування в кожному файлі HTML. Значно кращою альтернативою є створення простих і охайних файлів HTML, і включення інформації про оформлення й компонування тільки один раз в окремі файли CSS.
Легкість обслуговування: слідує з попереднього пункту, тому що якщо інформація про оформлення й компонування визначається тільки в одному місці, то відновлення потрібно зробити теж тільки в одному місці, якщо буде потрібно змінити зовнішній вигляд сайту. Зволіли б ви обновляти цю інформацію на кожній сторінці сайту? У це важко повірити.
Доступність: Web-користувачі зі слабким зором можуть використовувати програму, що називається "зчитувач екрану", для доступу до інформації за допомогою слуху, а не зору — вона для них дослівно читає сторінку. Крім того, програмне забезпечення голосового внесення, використовуване людьми з обмеженою рухливістю, також виграє від добре спроектованої семантики Web-сторінок. Як і у випадку зчитувача екрану користувач використовує клавіатурні команди для переміщення по заголовках, посиланням і формам, так і користувач голосового введення буде використовувати голосові команди. Web-документи, розмічені семантично, а не з точки зору їх подання, можуть бути простіше для навігації, а інформацію в них користувач знаходить легше. Інакше кажучи, чим швидше ви "доберетеся до місця" (контента), тим краще. Зчитувачі екрану не можуть прочитати текст схований у зображеннях, і іноді не можуть зрозуміти дії JavaScrіpt. Робіть так, щоб ваш критично важливий контент був доступний кожному.
Сумісність із пристроями: Тому що сторінка XHTML є просто звичайною розміткою, що не містить інформації про стилі оформлення, її можна переформатувати для різних пристроїв із зовсім різними атрибутами (наприклад, розмір екрану), застосовуючи просто альтернативну таблицю стилів — це можна зробити декількома різними. CSS також з самого початку дозволяє визначити різні таблиці стилів для різних типів середовища/методів подання (наприклад, перегляду на екрані, друку на принтері, перегляду на мобільному пристрої).
Web-роботи/пошукові системи: Цілком імовірно, що ви захочете, щоб ваші сторінки можна було легко знайти за допомогою Google або інших пошукових систем. Пошукова система використовує спеціальну "програму-робот", що зчитує вміст сторінок на сайтах і потім їх індексує. Якщо ця програма не зможе прочитати вміст сторінки або неправильно інтерпретує важливі речі, тому що заголовки не були визначені як заголовки і т.д., то ймовірність того, що в результатах пошуку ви виявитеся на верхніх позиціях, істотно зменшиться.
Це просто гарна методика: Це трохи нагадує аргумент "тому що я так сказав", але поговоріть з будь-яким професійним розробником або дизайнером, які мають уявлення про стандарти, і вони скажуть вам, що поділ на контент, стильове оформлення і поведінку є кращим способом розробки застосувань.