Створення веб-сайту. Курс молодого бійця

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

Умовно процес створення сайту (web-проекту) можна розділити на 3 етапи:

Планування
Даний етап можна розділити на декілька підетапів:

  • Створення ідеї
  • Розробка структури проекту
  • Опрацювання макету проекту
Створення ідеї
На даному етапі нам необхідно визначитися з тематикою проекту (сайту, сервісу). Далі, у відповідності з обраною темою, необхідно зібрати відповідні матеріали: текстові, графічні.

Розробка структури проекту
Коли ми визначилися з темою проекту, підібрали необхідний матеріал, наступним етапом буде розробка структури проекту. Структура проекту передбачає під собою розділи сайту, у відповідності з якими буде формуватися навігаційне меню і будуватися дизайн проекту. На даному етапі можна класифікувати матеріал за темами та розділами.

Опрацювання макету проекту
Після того, як ми визначилися зі структурою проекту можна скласти макет проекту (схематично).

Для відтворення начерку можна використовувати папір і ручку, Photoshop, будь-який інший редактор графіки (раніше часто використовували Adobe Fireworks). Важливо відзначити, що даний етап – це не відтворення готового дизайн-макету, а всього лише схематичний начерк, виконаний для розуміння того, як на сайті будуть розташовуватися основні інформаційні блоки, графіка та інші елементи дизайну.



Основні елементи сторінки
Найчастіше основними елементами сторінки є: містить блок (wrapper, container), логотип, навігація, вміст, футер (нижній колонтитул), вільний простір (по суті вільний простір — це не елемент дизайну, але поняття, пам'ятаючи про який при складанні макета сторінки, наш проект не буде виглядати як нагромадження блоків).



Містить блок (контейнер)

Роль контейнера на сторінці може виконувати безпосередньо елемент body або ж div. Ширина містить блоку може бути гумовою (fluid), а може бути фіксованою (fixed).

Логотип

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

Навігація

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

Вміст

Контент – це основна складова веб-сторінки. Він займає чільну роль в дизайні сторінки, тому займає більший простір, підкріплений, крім тексту, графікою.

Нижній колонтитул (footer)

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

Гумовий і фіксований макет


Фіксований макет

Фіксований макет має на увазі під собою, що в незалежності від дозволу екрану користувача ваш сайт завжди буде займати однакову ширину.

Гумовий макет

«Гумовий» макет передбачає, що сторінка сайту буде намагатися зайняти весь доступний їй простір на екрані користувача, підлаштовуючись під дозвіл.

В даному контексті варто усвідомити такі поняття, як чуйний веб-дизайн (Responsive Web Design aka. RWD) і адаптивний веб-дизайн (Adaptive Web Desing aka. AWD). Перше поняття вкладається в концепцію «гумового» і означає, що при зміні розміру екрана ваш сайт підлаштовується під нього, друге поняття передбачає, що при розробці ви визначаєте основні дозволу (розміри екрану), під які буде пристосовуватися (адаптуватися) ваш контент. В обох випадках слід розробляти не один, а кілька макетів, які будуть відповідати різними дозволами екрану. Часто створюється 3 макета під дозволу iPhone (Android Phone), iPad (Android Tablet) і Desktop.



На даному зображенні показані обидва підходи. Зверху блок «відгукується» на будь-які зміни розміру контейнера, знизу «адаптується» під певну ширину

Корисні посилання по темі:

Чому при «гумовому» дизайні створюється кілька макетів, а не один?
При розробці макета мобільної версії сайту намагаються на перший план виносити основний контент, тому навігаційне меню часто ховається, ховаються великі банери та декоративні елементи, блоки контенту зазвичай розташовують один під одним. На заздалегідь складеному макеті можна визначитися, які елементи ми залишаємо на мобільному, а які ховаємо.

Модульна сітка
Перед складанням схеми проекту так само необхідно усвідомити поняття модульної сітки. Модульна сітка має на увазі під собою поділ сторінки на окремі колонки по вертикалі і створення контенту, при розробці дизайн макету, саме по цій сітці.

Найбільш популярною системою є модульна сітка 960 Grid System (http://960.gs), яка максимально ділить сторінку на 12, 16 і 24 колонки. Максимум в ширині сітка має 960 пікселів. Дане рішення засноване на тому, що більшість сучасних моніторів мають дозвіл не менше 1024 на 768 пікселів. Створення макету на основі даної сітки, в подальшому, допоможе прискорити процес розробки (верстання).





Так само варто відзначити, що при розробці «гумового» макета сторінки існує поняття максимальної ширини. Дане твердження ґрунтується на зручності сприйняття інформації. Якщо припустити, що наш сайт не має максимального значення по ширині, то на великих моніторах інформація буде сильно розтягуватися і її незручно буде читати. Найчастіше обмежуються шириною в 1280 пікселів.

Модульна сітка 960GS відповідає концепції «фіксованого» дизайну, для «гумового» дизайну можна звернути увагу на адаптацію цієї сітки на сайті http://www.designinfluences.com/fluid960gs/ або скористатися сіткою, яку пропонує фреймворк Bootstrap (http://getbootstrap.com/css/#grid).

Завдяки модульній сітці блоки контенту і елементи будуть розташовуватися на певній відстані один від одного, будуть мати пристойну ширину, що надалі візуально буде приємно користувачеві і не буде викликати у нього які-небудь незручності в сприйнятті сайту.

Модульна сітка, по суті, – це якась візуальна абстракція, візуальне поділ сторінки на рівні по ширині стовпці з рівними відступами між ними. Візуалізувати дану модель можна за допомогою направляючих або окремого шару, на якому будуть зображені ці стовпці. Саме таке рішення ви знайдете в шаблонах сітки 960gs.

Патерни адаптивної сітки: http://bradfrost.github.io/this-is-responsive/patterns.html

Макети веб-сторінок
Серед усього різноманіття складання макета веб-сторінки можна виділити чотири найбільш поширених:

  • Навігація в лівому стовпці



  • Навігація в правому стовпці



  • Навігація в трьох стовпцях



  • Горизонтальна навігація. На даному етапі сайти з таким типом навігації становлять більшість. Зручність такого підходу легко пояснити тим, що в даному випадку у нас залишається більше простору для контенту, що становить наш сайт.



Але цей список типів макетів не можна назвати вичерпним, тому перед розробкою макету та дизайну сторінки так само можна погуляти по різним сайтам з прикладами інших робіт, а так само для сайтів схожої з вашою тематикою:

На перших двох сайтах можна подивитися які кольори використовувалися в дизайні.

Mobile First
З урахуванням тенденцій останніх років даний підхід щільно займає свою нішу в розробці і дизайні сайтів. Тенденція така, що практично близько 60% користувачів інтернету використовують для доступу в мережу мобільні пристрої, тому правилом хорошого тону стає розробка не тільки десктопної версії сайту, але і мобільної версії. При використанні даного підходу розробка макету сайту, дизайну і верстки починається з мобільної версії, а потім вже опрацьовуються макети для інших дозволів: додаються блоки, банери, додаткові елементи дизайну тощо

Даний підхід враховує практично весь цикл розробки, тому ми ще повернемося до нього.

Засвоївши все вищесказане можна переходити до наступного етапу – Дизайн.

Дизайн
Після створення макета проекту можна переходити безпосередньо до створення дизайн-макету. На даному етапі почати варто з визначення колірної гами проекту.

Один із способів визначення основного кольору в проекті – це складання mood board. Для цього необхідно виписати собі всі синоніми, пов'язані з темою проекту, а потім кожен синонім набрати в пошуку по картинках Google або Yandex. На основі знайдених зображень виписати собі кольори, які найчастіше зустрічаються на них (яких кольорів більше). Знайдені кольору будуть складати візуальне сприйняття нашого проекту і викликати у користувача відповідні почуття.



Для роботи з обраним кольором і складанням палітри кольорів нашого сайту можна використовувати наступні інструменти:

  • Color Scheme Designer 3 http://colorschemedesigner.com/csd-3.5/). Крім вибору колірної схеми даний сервіс дозволяє подивитися приклад того, як вибрані кольори будуть виглядати на сайті



  • Adobe Color CC https://color.adobe.com/ru/). Даний ресурс, на відміну від Color Scheme Designer 3, дозволяє створювати панелі ще і на основі завантажених зображень (які, наприклад, могли з'явитися у нас на етапі складання mood board). Так само даний сервіс володіє великим архівом палітр інших користувачів.



  • COLORlovers http://www.colourlovers.com/). Велике співтовариство, де можна підібрати різні панелі.
Важливо зазначити, що при підборі кольорів для палітри завжди варто вибирати як мінімум 2 контрастних кольору. Досягнення потрібного контрасту між кольорами – необхідна умова для того, щоб у вас вийшов хороший інтерактивний дизайн.

При роботі над дизайном головної і внутрішніх сторінок варто пам'ятати про деяких основних принципах.

Елементи Call to Action
Поняття призову до дії відноситься до інтерактивних елементів сайту: кнопки, банери і інші Дані елементи оформляються таким чином, що користувачеві повинно хотітися неодмінно на них натиснути. Наприклад, це може бути кнопка з закликом до дії (Натисни, Купи, Зеконом), яскравий банер з принадною пропозицією, яскравою картинкою і тощо

Дане поняття добре вписується в принцип AIDA (Attraction Interest Desire Action).

AIDA
Дане поняття застосовується найчастіше при дизайні головних сторінок, сторінок акцій тощо, де необхідно підштовхнути користувача до того чи іншого дії: передплата, купівля та ін. Якщо перевести цей акронім на російську, то ми отримаємо наступні поняття:

  • Привернення уваги
  • Інтерес
  • Бажання
  • Дія


Таким чином стає зрозумілим принцип побудови дизайну, що спирається на дане поняття: наприклад, яскрава картинка, банер повинні привернути увагу користувача, супутній посилання в тексті повинен викликати в нього інтерес і бажання, а завершальним акордом мала стати, наприклад, кнопка з закликом до дії.

Але і цей принцип не працює сам по собі без деяких інших: схема переглянути сторінки (найбільш природний шлях руху очей по сторінці), візуальні направляючі.

Схема переглянути сторінки
Досить часто зустрічається Z-схема перегляду сторінки. У відповідності з цим елементи сторінки зазвичай розташовують наступним чином: логотип зліва вгорі, меню праворуч вгорі, інформаційні блоки, картинки зліва внизу, кнопка з закликом до дії праворуч внизу.



Візуальні направляючі
Візуальними направляючими називають декоративні елементи сторінки, які перенаправляють погляд користувача на ті чи інші елементи дизайну, форми, кнопки та ін В якості візуальних направляючих можуть виступати стрілка, напрям погляду людини на зображенні, напрямок вказівного пальця, в загальному все, що може якось вказувати в ту або іншу сторону.





На першому зображенні погляд мимоволі слід за вказівним пальцем чоловіка, а його прямий погляд мимоволі привертає увагу до себе при першому погляді на сторінку.

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

Фрэймворки
Варто так само відзначити, що іноді, при розробці дизайну сторінки, використовують фрэймворки Bootstrap, Foundation, Material Design Lite, які, крім готових елементів дизайну (кнопки, форми введення і ін), пропонують свою модульну сітку, CSS фрагменти (частина коду розмітки, яка може неодноразово використовуватися) для вставки елементів сторінку (тих же кнопок, елементів, форм тощо) та класи розмітки, а так само JS скрипти для відповідних інтерактивних елементів.

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


Готові елементи дизайну з Bootstrap, Foundation і Material Design Lite (MDL)

Трэнды
Не можна не згадати про деякі майбутні тренди останнього часу в якості компонування і дизайну сторінок.

По-перше, варто згадати про так званих лэндинговых сторінках, які мають на увазі під собою довгу сторінку, розділену на відповідні секції і знайомлять користувача з основним контентом сайту. Часто лэндинг є єдиною сторінкою, на якій відразу вдається показати всю необхідну інформацію, не змушуючи користувача переходити по сторінках. Лэндингам зазвичай супроводжує гарний дизайн, вивірена і продумана подача інформації, елементи call-to-action, інтерактивність (лічильники, анімація тощо).



Варто так само сказати про зовнішньому вигляді сторінок і згадати такі поняття як скевоморфизм і плоский дизайн.

Скевоморфизм
Скевоморфизм вже тривалий час поступається свої позиції плоскому дизайну. Дане поняття означає наділення інтерактивних елементів якостями реальних. Наприклад, оформлення сторінки з книгами у вигляді книжкової полиці, оформлення кнопки на подобі цієї з відповідною імітацією натискання, використання реальних текстур і пр. Даний принцип активно використовувався при створенні сторінок буквально пару років тому, але потім тенденції змінилися і на перший план вийшов плоский дизайн (Flat, Material).



Плоский дизайн
Плоский дизайн використовує мінімум текстур і оформлення, створення дизайну базується на поняттях контрасту, співвідношення кольорів і розмірів.



Не маловажну роль на тренди у веб-дизайні зробило розвиток мобільних операційних систем. Найчастіше двигуном прогресу стають рішення від компанії Apple, яка в своїх дизайн-рішення iOS спочатку використовувала імітацію реальних об'єктів, а потім все спростила до плоского дизайну (Flat UI). Зараз в інтернеті панує Flat дизайн і Material дизайн, який активно розвиває Google.

Непоганий сайт-порівняння двох концепцій: http://www.flatvsrealism.com/

З основ веб-дизайну і прототипированию непоганою підмогою може стати дана книга:Джейсон Берд: Веб-дизайн. Керівництво розробника.

Розробка
Отже, процес дизайну макета сторінки плавно перетікає в процес «оживлення» зробленого на попередніх етапах. Перш ніж відразу починати писати HTML, CSS і JS варто небагато поговорити про редакторах коду та структурі проекту.

Редактори коду
З найбільш популярних редакторів коду на сьогодні можна виділити три:



Від частини, всі ці редактори схожі за принципом роботи, коли при установці ми отримуємо редактор, який потім можемо «доставити» необхідні модулі і плагіни, так би мовити, «редактори на стероїдах». Різниця лише в технологіях, які були використані при написанні редакторів, якщо Sublime Text написаний за допомогою C++ і Python, 2 інших використовують JavaScript, HTML, CSS (Less). За рахунок цієї різниці Sublime Text може працювати трохи швидше своїх колег.

Існують також більш просунуті IDE (студії) такі, як Web Storm, PHP Storm тощо, але для верстки проекту цілком підійде редактор коду, а не ціла студія (IDE).

Щоб визначитися, що підходить особисто вам для розробки, варто самим покопатися в різноманітті засобів і вибрати те, що найбільше відповідає вашим потребам.

Огляди текстових редакторів:

Структура проекту
Під структурою проекту розуміється зберігання файлів проекту в його директорії. Часто доводиться бачити, коли всі файли «звалені» разом, назви файлів дано «капсом», цифрами або українськими літерами і пр. По-перше, це банальне неповагу до того, хто буде працювати з вашим проектом далі, по-друге, чим більше буде ваш проект, тим більше буде ставати файлів і, в кінці кінців, ви просто заплутаєтеся, що до чого відноситься і що потрібно, а що ні.

Найкраще окремі категорії файлів поміщати в свої папки: картинки в папку images або img, css в папку css, javascript в папку js. У корені буде лежати тільки index.html і сторінки сайту, або тільки index.html, а сторінок в окремій папці pages. Дотримуючись цих правил ви ніколи не заплутаєтеся в проекті.



Так само варто сказати і про іменуванні файлів проекту. Найчастіше застосовуються наступні імена: головна сторінка – це index.html, стилі проекту styles.css, скрипти scripts.js або app.js, мінімізовані версії файлів мають префікс .min, картинки носять не розлогі назви російською мовою або набору цифр, а відображають те, що на них зображено, наприклад, button.png, download-icon.png, logo.png і т. д.

Робота над проектом
Отже, визначившись з редактором коду, структурою ми можемо приступати до розробки. Насамперед варто відзначити, що верстання сторінки робиться поетапно: спочатку пишеться HTML-структура (HTML код), потім додаються стилі, а після, якщо необхідно, пишуться скрипти (BAT), додаються необхідні плагіни і бібліотеки.

Враховуючи вищесказане, ми можемо умовно розділити роботу над проектом на наступні етапи:

Написання HTML
Зараз при написанні HTML коду вже сміливо можна використовувати теги й елементи розмітки, які з'явилися разом із стандартом HTML5, якщо вам необхідно підтримувати старі браузери, то можна використовувати, наприклад, плагін html5shiv (https://github.com/afarkas/html5shiv), який забезпечує підтримку нових стандартів в старих браузерах або бібліотеку Modernizr (https://modernizr.com/) (html5shiv входить в збірку Modernizr), яка визначає можливості браузера, за допомогою якого проглядається сайт.

При верстці сайтів в даний час, апріорі, використовується блоковий підхід, ніяких таблиць, iframe'ів та ін. Таблиці виконують лише свою пряму роль – подання інформації у вигляді таблиці. У верстці таблиці використовуються лише при роботі з електронними листами.

На етапі написання HTML-ми, як би, створюємо скелет сторінки, її абстрактну модель за допомогою тегів (мови розмітки HTML). Варто відзначити, що структуру може бути простіше написати, якщо у нас є прототип, складений на першому етапі або ж, якщо ми самі, дивлячись на дизайн-макет, на папері схематично розмалювали собі всі блоки сторінки.

При написанні розмітки ми відразу можемо прописувати елементів класи і ідентифікатори.

Правила іменування класів

В проекті у всьому повинен бути порядок: від структури проекту до імен класів, розмітки і написання коду. Якщо при розмітці важливо стежити за типом інформації та розміщенням її у відповідних блоках (заголовок, список, посилання, рядковий елемент, параграф тощо), то при іменуванні класів та ідентифікаторів важливо дотримуватися здоровий глузд. Класи повинні давати абстрактне поняття про блок, до якого вони відносяться, щоб код було легше читати, а потім і писати стилі. В принципі тут не повинно бути нічого складного, якщо ми розмічаємо меню, то логічно містить блоку дати клас .nav або .navigation, якщо це блок з текстом, то можна дати йому клас .block-text і т. д.

БЕМ
На сьогоднішній день є один популярний підхід, який стосується принципів побудови проекту в цілому, але на даному етапі нас цікавить саме іменування класів. Підхід називається БЕМ і розшифровується, як Блок Елемент Модифікатор.

Коротко можна описати даний підхід, як якесь угоду щодо іменування класів і поданням розмітки сторінки. Кожен елемент сторінки являє собою сутність, яка може існувати незалежно від контексту, тоді ми говоримо про Блок (.block), або ж тільки в контексті іншої сутності, тоді ми говоримо про Елемент (.block__element). Кожен Блок або Елемент можуть мати різні моделі подання: колір, форму, прозорість та ін. За подібні властивості відповідатиме Модифікатор (.block__element_mod).

Таким чином ми представляємо наш код, як композицію блоків, елементів і їх модифікацій.

Більш повна інформація про методології: https://ru.bem.info/

SMACSS
Так само існує підхід SMACSS (розшифровується цей акронім як Scalable and Modular Architecture for CSS – Масштабована і Модульна Архитерктура для CSS), який розділяє поняття про класи і розмітці на кілька рівнів: базовий, макет, модуль, стан, тема.

  • До базового рівня буде ставитися усе, що стосується безпосередньо тегів html.
  • До рівня макета ми будемо відносити все, що стосується основних складових сторінки: секції.
  • До рівня модуль ми будемо відносити все, що стосується переиспользуемых елементів сторінки: банери, навігація, списки, блоки інформації та ін
  • Рівень Стан описує як будуть виглядати модулі та секції в тому чи іншому стані: відображено або не відображено, стислі або розкриті, активні чи неактивні та ін
  • Рівень теми чимось схожий з рівнем Стану і відображає як модулі або секції можуть виглядати.
У даному підході використовуються наступні угоди по іменування. Рівні визначаються за допомогою префіксів та відповідного літерного позначення:

  • Макет: .l- або .layout-
  • Так як модулі складають основну частину проекту іменувати їх, використовуючи префікс module — надмірно. Тому для них використовуються імена як є, наприклад: .example {}, .afisha {} та ін
  • Стани мають префікс .is-, наприклад .is-hidden {}
  • Рівень Теми іменується подібно модулів.
При даному підході часто буває зручно кожен рівень абстракції і його класи тримати в окремому файлі.

Інформація про методології та онлайн книга: https://smacss.com/
Російськомовний переклад книги по SMACSS: https://github.com/andrew--r/smacss

Важливо пам'ятати, що будь-яка угода з іменування покликане створити певний рівень абстракції, завдяки якому працювати з проектом буде зручно і він не буде перевантажений зайвою кодом та іншими артефактами.

Невеликий курс з основ HTML: Дивитися

Написання CSS
Правила іменування класів підводять нас до наступного етапу. Коли написана html структура проекту, визначені класи можна переходити до написання стилів CSS і нарізці макета.

Варто згадати про 2-х CSS файли доповнення: normalize.css reset.css.

Reset.css
Спочатку в проектах повсюдно використовувався reset.css, написаний Еріком Мейером. Мета даного зводу правил – скинути стилі браузера, які він використовує для відображення елементів розмітки. Таким чином при використанні reset.css нам не потрібно переписувати стилі браузера, по суті ми працюємо з «чистим аркушем» і можемо зосередитися на написанні власних стилів з нуля.

Normalize.css
Normalize.css навпаки, не скидає всі стилі «в нуль», а нормалізує їх, призводить відображення стилів проекту до більш-менш одноманітності у всіх сучасних браузерах.

В обох зводів правил є свої плюси і мінуси, на даний момент популярний normalize.css. Популярність даного зводу правил обумовлена ще й тим, що вам не доводиться при розробці заново прописувати основні властивості для базових елементів сторінок, а лише модифікувати їх за необхідності.

Так само варто згадати про, так званому, «швидкому скиданні», коли ми абсолютно для всіх елементів сторінки за допомогою селектора * прописуємо властивості {margin: 0; padding: 0}. Таким чином ми скидаємо всі внутрішні і зовнішні відступи для всіх елементів сторінки. Але цю техніку не рекомендується використовувати, так як вона уповільнює процес відтворення сторінки, так і по суті має мало сенсу (на мій погляд).

Так само варто відзначити, що всі розміри і відступи беруться безпосередньо з дизайн-макету. Для отримання даних значень нам необхідно використовувати інструмент «лінійка» і напрямні (мова про інструментарій програми Adobe Photoshop), а потім переносити отримані значення в код. Якщо ми працюємо з фіксованим макетом, то значення переносяться в пікселях як є, якщо ж у нас «гумовий», то значення потрібно перевести у відсотки. Основна формула – це ширина елемента, поділена на ширину контексту (ширина містить блоку). Наприклад, якщо блок, що містить текст і графіку має на макеті ширину 400px, а блок з текстом в ньому повинен мати ширину 340px, то в процентному вираженні це буде (340 / 400) * 100%, 85% буде займати блок з текстом.



Не варто перевантажувати стилі надмірної специфічністю, наприклад, якщо ми хочемо, щоб посилання всередині списку мала червоний колір, то не обов'язково записувати всю лінійку класів і тегів: .main –nav ul li a, достатньо просто вказати .main-nav a. Дуже «специфічні» правила роблять правила контекстно залежним і змушують вас писати зайвий код, а так само впливають на швидкість відтворення сторінок, так як при розборі правил CSS парсер читає їх справа наліво і йому спочатку, якщо брати описаний вище приклад, потрібно взяти всі посилання (a), потім відкинути всі посилання, які не лежать в li і т. д. поки він не дістанеться до містить класу.

Специфічність коду, так само означає надмірне прив'язання до базових тегах. Наприклад, якщо ми хочемо, щоб елемент всередині .block був синім і при розмітці використовували елемент span (у правилах ми написали .block span {background-color: blue}), то при заміні його на div, наприклад, нам потрібно буде написати нове правило вже для div всередині .block. Таким чином наш код буде обростати непотрібними правилами, які по суті дублюють один одного. Набагато простіше визначити лише один клас (клас елемента), який при визначенні внутрішніх елементів буде приводити нас до бажаного результату.

Ще один приклад контекстної залежності коду – це використання імен тегів разом з іменами класів, наприклад, div.block {display: block}. Якщо ми захочемо той же клас застосувати до span, то нам доведеться написати знову span.block {display: block} або span.block, div.block {display: block}, що в будь-якому разі призведе до збільшення коду на зайву рядок.

Чому це важливо? По-перше, ви не робите зайву роботу, по-друге, вам не потрібно потім серед 10000 рядків шукати потрібне правило і, нарешті, чим більше рядків коду, тим більше розмір файлу, а великі за обсягом файли повільніше передаються по мережі, що у свою чергу може бути причиною довгого завантаження, а зайва специфічність причиною довгої відтворення вашої сторінки.

Якщо, ви використовуєте правила, що відносяться до специфікації CSS3, то не полінуйтеся перевірити необхідність використання браузерних префіксів на сайті http://caniuse.com.

Повертаючись до Mobile First, варто сказати, що при роботі в даній концепції написання стилів варто починати з мобільної версії, а потім за допомогою медіа запитів додавати правила, які будуть працювати на інших дозволах. Найчастіше, при розширенні правил від мобільної версії до десктопної, доводиться писати набагато менше коду, ніж при роботі навпаки: від десктопної версії до мобільного.

Корисні посилання та матеріали:

Написання JS
Отже, заключним етапом є написання скриптів JS. При створенні веб сторінок стала, практично, стандартом використання бібліотеки jQuery, яка дозволяє з легкістю маніпулювати елементами web-сторінки (DOM вузлами), навішувати прослуховування подій, відправляти запити на сервер, обробляти результат виконання, тощо, Але не варто сліпо довіряти трендам, на сьогоднішній день нативний JavaScript досяг такого рівня, що вам, можливо, вже не потрібен jQuery. Тому, перш ніж сліпо прикріплювати jQuery, варто задуматися, чи так він потрібний для ваших завдань і не досить вбудованих можливостей мови JavaScript.

Є непоганий ресурс, який призводить альтернативи одних і тих же маніпуляцій на мові JavaScript і з допомогою бібліотеки jQuery: http://youmightnotneedjquery.com/, так само непоганою підмогою є сайт https://developer.mozilla.org/ru/, на якому, крім опису методів і властивостей JavaScript, можна знайти полифиллы для тих або інших методів (бібліотека або частину коду, яка додає в старі браузери підтримку можливостей сучасних функцій і методів JavaScript).

Важливо відзначити, що не рекомендується використовувати JavaScript для стилізації, тобто не варто для того або іншого об'єкту DOM (елемента сторінки) додавати онучу CSS властивості за допомогою JavaScript, щоб виділити його стан і пр. Рекомендується використовувати класи, тобто заздалегідь в CSS визначити класи-стану (активний, не активний, прихований, використаний тощо) і при маніпуляції елементами просто додавати або прибирати відповідні класи.

Наприклад, у нас є елемент списку з класом .list__item, для того, щоб показати активний елемент в даний момент (обраний користувачем) чи ні, можна просто додати клас (.list__item--active), а не прописувати всі стилі, властиві цьому класу в JS:
document.querySelector('.list__item').style.color = 'red';
і т. д.
Невеликий приклад з можливими способами привласнення класу (привласнення модифікатора відбувається при натисканні на зелений квадрат): http://jsbin.com/.

Не рекомендується вирішувати завдання, які явно відносяться до рівня CSS JavaScript, намагаючись якось вирівняти об'єкт або додати йому стилі при наведенні тощо

Знову-таки, повертаючись до теми Mobile First, не можна не згадати про 2-х концепціях, які корелюють з даною технікою. Progressive Enhacement і Graceful Degradation, що перекладається як прогресивне поліпшення і послідовне погіршення. Дані принципи описують 2 різних підходи до розробки: в першому випадку ми розробляємо наш сайт, пишемо сценарії з урахуванням старих браузерів і систем або ж визначаємо поведінка при неможливості запуску скриптів, а потім поступово покращуємо скрипт, запроваджуючи сучасні функції та методи, таким чином ми отримуємо сайт, який буде однаково добре працювати в старих і нових браузерах і середовищах (те ж стосується і css).

При Graceful Degradation підхід протилежний – ми розробляємо для сучасних браузерів і лише потім починаємо вносити доопрацювання і зміни з урахуванням старих версій.

Підхід Mobile First чимось схожий з Progressive Enhacement.

Перевірка коду
Після написання html, css і js для нашої сторінки необхідно перевірити чи все зроблено вірно. Для цього можна використовувати порівняйте засоби:

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

Статті з рекомендаціями щодо написання PHP, HTML і CSS:

Засоби автоматизації
На сьогоднішній день практично всі рутинні процеси розробки (за винятком дизайну) можна в тій чи іншій мірі автоматизувати.

960GS
Ми вже говорили про це засобі розробки в розділі про модульні сітки і дизайн. Потрібно сказати, що 960GS пропонує не тільки макети для створення дизайну, але і свою систему іменування класів. Використовуючи запропоновані класи при верстці і при підключенні css файлу системи в проект, блоки сайту будуть вибудувані по цій сітці, що заощадить час на написання практично того ж самого самостійно.

<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...
</div>
<div class="grid_3">
...
</div>
<div class="grid_2 omega">
...
</div>
</div>
<div class="grid_3 suffix_1">
...
</div>
</div>

Emmet
Emmet – це засіб роботи з html і css (http://emmet.io/). Плагін для роботи з даними засобом можна встановити, наприклад, в Sublime Text, тоді у вас з'являється можливість не писати громіздкі шматки коду html і css, а записувати їх в рядок, розкриваючи потім в повноцінну розмітку. Наприклад, рядок .block>ul.list>li.list__item*3, може бути розкрита в повноцінний код:

<div class="block">
<ul class="list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</div>

Потім вам просто необхідно вписати текстові значення на елементи списку. Те ж стосується і css: рядок w:100px+h:150px+bgc:#ff0 розкривається в:

width: 100px;
height: 150px;
background-color: #ff0;

Завдяки цим засобам писати код стає швидше і приємніше, так як ви менше часу витрачаєте на написання закривають блоків, переходах по рядках, а так само зменшується можливість, стосовно html, не закрити той чи інший елемент розмітки. У плані CSS, наприклад, стає легше працювати з браузерних префіксами, так як одна строчка з CSS3 властивістю може бути розкрита в кілька з додаванням необхідних префіксів.

Jade
Далі варто згадати і про такий мовою роботи з шаблонами, jade (http://jade-lang.com/). Знову-таки, з допомогою jade писати html стає швидше і зручніше, а так само з'являється можливість створення переиспользуемых блоків коду і миксинов, передаючи яким на вхід ті чи інші параметри ми буде отримувати потрібну нам розмітку. Завдяки jade в проекті, щодо розмітки і написання сторінок, може підтримуватися модульність, а часто використовуються назви та блоки коду можуть виноситися в якості змінних (назви, імена сторінок тощо) або миксинов в окремі файли та файли налаштувань, відповідно. Для роботи з нефриту, а точніше для перетворення написаного коду з jade в html, необхідно використовувати командний рядок, а так само встановити на ваш комп'ютер платформу nodejs (https://nodejs.org/en/, http://nodejs.ru/).

Командний рядок
Робота в командному рядку так само може прискорити деякі етапи роботи над проектом, наприклад, створення папок і файлів. Запустивши консоль в директорії проекту і набравши в ній лише один рядок:

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

Після натискання enter ми отримаємо папку project в якій будуть знаходитися папки css, images, js, в папках css і js файли styles.css і app.js, відповідно, а в корені project лежати файл index.html. Таким чином ми зекономили час на створення папки, написання її назви, створення файлів та ін. Так само командний рядок використовується для роботи з іншими засобами автоматизації.

Sass
Далі варто поговорити про таке мовою як Sass (http://sass-lang.com/). Даний мову спрощує роботу з css. Завдяки Sass можна записувати вкладені класи, проводити математичні обчислення прямо в коді, виносити переиспользуемые величини в якості змінних в окремі файли або в початок файлу, що значною мірою спрощує подальшу роботу зі стилями і спрощує зміну тих чи інших величин, так як вони всі будуть зберігатися в одному місці і не потрібно буде «ходити» по всьому проектом і вносити відповідні правки. Так само, завдяки Sass у проекті можна дотримуватися принципу модульності, зберігаючи частини розмітки у відповідних файлах і підключати їх в основний, потім з допомогою консольної команди можна зібрати весь код в один css файл, так само підтримується збірка результуючого файлу на льоту по мірі написання стилів. Знову-таки для роботи з Sass потрібно командний рядок. Процес установки пакета можна переглянути тут: http://sass-lang.com/install.

HTML5Boilerplate
HTML5Boilerplate (https://html5boilerplate.com/) являє собою заздалегідь скомпонований проект, в якому вже є index.html, normalize.css та ін. index.html наприклад, вже заздалегідь прописані основні шматки коду, які необхідні при написанні html сторінки. Проект дозволяє завантажити архів з усіма файлами або ж використовувати кастомний складання: http://www.initializr.com/. Знову-таки, принцип простий: навіщо витрачати час на написання одних і тих же рядків або на виконання одних і тих же маніпуляцій, якщо ми відразу можемо зосередитися на роботі з проектом.

Gulp і Grunt
Gulp (http://gulpjs.com/) і Grunt (http://gruntjs.com/) являють собою сервіси запуску задач, які описуються в основних файлах даних сервісів, виконуються з допомогою сумісних модулів і запускаються на виконання за допомогою консолі.

Дані сервіси допомагають використовувати в розробці, наприклад, вищеописані кошти Jade і Sass, автоматично перетворювати їх у відповідні файли html і css, стискати їх, якщо необхідно, а так само перевіряти, наприклад css властивості, на необхідність використання браузерних префіксів і підставляти їх в автоматичному режимі.

Обидва сервісу використовують різний підхід в описі виконання завдань, але суть їх роботи однакова. Корисним буде дане порівняння: http://frontender.info/gulp-grunt-whatever/

Так само багато сервіси на зразок autoprefixer (автоматичне проставляння браузерних префіксів), jshint (перевірка JS коду на валідність) можуть бути встановлені як сторонні плагіни в текстовому редакторі (Sumblime Text, Atom, Brackets) і ініціалізується при натисканні певної комбінації клавіш.

Bootrstrap, Foundation, Material Design Lite
Дані фрэймворки вже згадувались у розділі про дизайн. Але варто знову згадати про них, так як вони, певною мірою, допомагають автоматизувати процес розмітки веб-сторінок і роботи з нею.

При підключенні файлів фрэймворков в проекті ми можемо використовувати визначені в них класи і фрагменти розмітки, які будуть працювати за вже описаним правилам і мати встановлений зовнішній вигляд (наприклад, кнопки, поля введення, таблиці тощо). Таким чином ми економимо час, наприклад, на опис розташування блоків дизайну, їх розмірів залежно від дозволу, зовнішній вигляд полів форми, кнопок і їх стану.

З усіма можливостями і прикладами можна ознайомитися на сайтах:

Даний опис не є вичерпним і являє собою лише поверхневий погляд на деякі технології. Але перш ніж пускатися у всі тяжкі, використовуючи засоби автоматизації, бібліотеки, framework'і, готовий код та інше, варто, все-таки, вивчити основи роботи з html, css і js.

Сподіваюся, що всі описані речі будуть корисні вам у вивченні теми веб-дизайну і фронтенд розробки.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.