Веб-розробка та дизайн 101

web_development_101Хочете знати основи веб-розробки та дизайну? Дивовижно …


Але є проблема з цією лінією думок, або їх кількістю насправді…

  • Яка мета створення веб-сайту? Чи справді потрібен кожному?
  • Якщо так, то як створити якісний веб-сайт? Або іншими словами, як ви дізнаєтесь основні веб-розробки та дизайн, які дозволять вам самостійно створити якісний веб-сайт?
  • Що ще важливіше, чи можете ви створити якісний веб-сайт у першій спробі? Або вам потрібні багаторічний досвід позаду вас, перш ніж ви зможете сподіватися на будь-який результат вище жахливого?

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

[Спойлер попередження. Так, ви можете створити якісний веб-сайт з першої спроби.]

Що стосується цього посібника?

Добре, спершу все, ми раді, що ви читали і що ви вирішили спробувати веб-розробки! Ось як це буде грати:

Глави представлені дуже просто, з основним змістом зліва та справами, що діють, праворуч. Так:

Вступ до керівництва: Глава 1

Тепер, як діяти:

  • Перебуваючи на першому читанні: Ми рекомендуємо вам прочитати всю річ зверху вниз. Це дасть вам хороший перегляд теми на 10000 футів і допоможе вам зрозуміти найважливіші її частини. Він також надасть вам основні інструменти та методи, як впоратися з окремими завданнями.
  • Перебуваючи на другому читанні і далі: Використовуйте TOC та перейдіть до тієї частини, яка вас найбільше цікавить. Також сміливо використовуйте кнопки спільного доступу поруч із кожною главою та надсилайте посилання самому собі або своїм друзям / підписникам, які можуть зацікавити.

Готові? Перейдемо до розділу 1.

Для кого це посібник?

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

Крім того, для початку роботи вам не потрібні будь-які попередні технічні знання (крім основних «веб-навичок»). Вся справа в цьому посібнику – це своєрідний курс «101» для всіх, хто зацікавлений у створенні веб-сайтів та навчанні веб-розробці.

Ось кілька загальних причин, чому ви можете бути зацікавлені:

  • 1. Вам потрібен веб-сайт для вашого бізнесу (і ви хочете побачити, чи можете ви створити його самостійно).
  • 2. Ви хочете НАВЧАЙТЕ веб-розробку з пристрасті чи тимчасового інтересу (нічого поганого в цьому немає).
  • 3. Вам потрібен веб-сайт для школи.
  • 4. Ви допомагаєте друзям або членам сім’ї, щоб отримати їх веб-сайт в Інтернеті.

Основна ідея, яка нам керує

Це важливо! І будь ласка, не зліться на нас, якщо ви просунутий веб-розробник, який читає це, але головна ідея, яка буде вести нас у всьому ресурсі веб-розробки та дизайну 101, це:

“Найменший опір”

Ось три принципи підходу до найменшого опору:

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

РОЗДІЛ 1: План

Ваша ідея, тип веб-сайту, доменне ім’я та хостинг.

Перш ніж створити веб-сайт, вам знадобиться план

Як це не іронічно – хіт-шоу 80-х “Команда” навчив нас, хороший план – це запорука успіху.

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

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

Але …

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

Замість цього подумайте про наступне:

  1. Відокремте себе від будь-яких технічних цілей, які у вас можуть бути. Як, наприклад, мета вивчення веб-технологій або певного програмного забезпечення веб-сайту.
  2. Задайте собі одне головне питання: “Для чого мені потрібен сайт?”

Це не про вас, це про ціль сайту.

Питання, які потрібно задати собі, перш ніж налаштувати веб-сайт

  1. Що призначений для досягнення сайту?
  2. Що буде головним «ділом», представленим через сайт? (наприклад, ваш бізнес, продукт, повідомлення в блозі тощо)
  3. Чи буде на веб-сайті якесь особливе призначення? (наприклад, магазин електронної комерції, портфоліо фотографа тощо)
  4. Хто є цільовою аудиторією?
  5. Чому їх цікавить тема сайту?
  6. Який біль вирішує сайт для окремих учасників аудиторії?

Про ці три останні запитання поговоримо на хвилину аудиторії…

Існує 2 основних правила для створення веб-сайтів. Ось правило №1:

 Читач / відвідувач на першому місці. Вони є головною особою, яку повинен порадувати ваш веб-сайт.

Певним чином ваш веб-сайт не ваш. Це їхнє.

(Правило №2 ми обговоримо за хвилину.)

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

“Тьфу! Люди просто не розуміють, про що йдеться на цьому веб-сайті. Як вони можуть бути такими неосвіченими ?! ” – ти закінчуєш думати. Але, як виявляється, необізнаним був ти.

Єдиний спосіб уникнути цього – це створити свій веб-сайт з врахуванням читача прямо з початку роботи.

Отже … візьміть цей аркуш паперу і дайте відповідь на всі запитання вище.

Коли ви закінчите, ви отримаєте свій остаточний набір рекомендацій, над якими ви будете діяти, працюючи на своєму веб-сайті.

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

Ви повинні зробити це * це * або * це *? Перейдіть на аркуш відповідей і дізнайтеся. Чи слід використовувати широку або вузьку бічну панель? Перейдіть до відповідей, з’ясуйте, що швидше резонує з цільовим читачем. І т.д..

Доменні імена та веб-хостинг

Якщо ви хочете бути власником веб-сайту, вам потрібно доменне ім’я та веб-хост.

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

Отже, хост і домен …

Погана новина тут полягає в тому, що вони обоє коштують грошей.

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

Але почнемо на початку.

Веб-хости:

  • Простіше кажучи, веб-хостинг – це місце, де знаходиться ваш веб-сайт, і де ваші відвідувачі можуть його знайти. Певним чином, веб-хости для веб-сайтів – це як квартири для людей. Під капотом веб-хости – це компанії, які здають свої сервери в обмін на гроші (… невеликі квартири для ваших веб-сайтів).
  • Для початку буде зроблено стандартний спільний план хостингу. Ви можете отримати їх за все, починаючи від $ 3 / місяць. Ось приємне порівняння популярних веб-хостів. Перевірте це та вирішіть, яка з цих компаній здається вам саме підходящою. Однак наші рекомендації стосуються SiteGround, A2 хостингу та Dreamhost.

Домени:

  • Якщо веб-хост – це квартира, то домен – це адреса цієї квартири. Наприклад, домен цього веб-сайту – hostingfacts.com.
  • Спосіб для початку – це вибрати бажане доменне ім’я, а потім придбати його у реєстратора. Ось вичерпний посібник із придбання доменного імені, і ось список генераторів доменних імен.

 

Пропозиції та поради щодо вибору доменного імені

Гаразд, так що звернутися до якогось реєстратора домену та фактично придбати домен – це одне, але як правильно вибрати ім’я домену?

Є кілька шкіл:

  • Фірмові доменні імена. Це домени, що складаються з неіснуючих слів. Подумайте, такі речі, як Google.com або Yahoo.com. До того, як з’явилися ці компанії, ці слова нічого не означали. Перевага брендового доменного імені полягає в тому, що він… добре, дуже фірмовий, запам’ятовується, і легко відрізнити ваш сайт від інших.
  • Назви на основі ключових слів. Вони складаються з існуючих слів, розміщених у послідовності, яка описує мету сайту. Подумайте, такі речі, як Pizza.com або StartBloggingOnline.com. Завдяки такому доменному імені, ваші відвідувачі зможуть точно передбачити тип веб-сайту, який вони збираються відвідати. Мінусом є те, що ці домени, як правило, менш торгові.
  • Комбіновані назви. Це домени фірмових та ключових ключових слів. Подумайте, Facebook.com або Copyblogger.com. Такі назви пропонують відвідувачеві “якусь” частину природи веб-сайту, але вони все ще є дуже популярною.

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

  • Зробіть домен легким для запам’ятовування.
  • Зробити це коротко і просто. Чим довше домен, тим він заплутаніший.
  • Отримайте .com (якщо можливо). .Com – головний доступний “домен верхнього рівня”. Не погоджуйся ні на що інше.
  • Намагайтеся уникати дефісів. Отримайте своє ім’я у формі з одноразовим набором типу “cakerecipes.com” замість “cake-recipes.com”

Що потрібно підготувати після цього розділу:

  • Доменне ім’я.
  • Веб-хост.
  • Ваш аркуш відповідей – цілі вашого веб-сайту та як він служить аудиторії.

Потрібна додаткова допомога? Ось подальше читання для вас:

  • Чому спільний хостинг? Порівнюються основні типи хостів
  • 10 речей, які роблять веб-хостинг хорошим
  • 12 правил вибору правильного доменного імені
  • Вичерпний посібник з планування веб-сайтів

РОЗДІЛ 2: Проектування та каркасна передача

Візьміть папір і ручку та подряпини разом зі структурою вашого веб-сайту

Гаразд, вступимо у фазу проектування.

Спершу все, ось ділова етика, яку ми збираємось пройти тут:

  • Ми користуємося ручкою та папером стільки часу, скільки зможемо, і лише потім переходимо до комп’ютера. Повірте, кожна хвилина, витрачена на роботу над дизайном на папері, – це зекономлена година, коли ви починаєте налаштовувати речі на комп’ютері.
  • Ми робимо ітеративну роботу … Ми робимо »перевірку результатів» покращення »перевірку результатів», повторюємо до завершення.

У главі 1 ми згадали щось, що ми назвали правилом №1 створення веб-сайту. Зараз час для правила №2:

Правило №2 щодо створення веб-сайту:

Спочатку продумайте вміст.

Зміст – це те, що важливо на веб-сайті. Не дизайн. Зміст.

Люди приходять за змістом. Вони не приходять для дизайну. Конструкція – це лише транспортний засіб для доставки вмісту.

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

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

“Дійсно? Вигляд справді не має значення? ” – Ви запитаєте.

Замість того, щоб ми побили це, перегляньте цю сторінку:

Простий веб-сайт

Ця проста веб-сторінка на сьогоднішній день є найкращим поясненням того, що таке дизайн та з якою метою вона використовується в Інтернеті.

Тож пам’ятайте, зміст спочатку!

Вміст та структура веб-сайтів

Гаразд, тому що зміст – це найважливіше, потрібно заздалегідь мати його (більшість). Або, принаймні, ви повинні мати гарне уявлення про те, скільки вмісту буде, і в якій формі.

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

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

Подумайте, який найефективніший спосіб організувати свій вміст на веб-сайті?

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

Приклад:

зміст-структура

Скрепіть дротяну рамку

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

Каркаси є приголомшливими! Ми використовуємо їх для більшості речей, які ми робимо для того, щоб з’являтися в Інтернеті. Наприклад, ось такий провід для цього самого посібника:

Скрепіть дротяний каркас

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

Отже, як зробити каркас?

Ну, є два підходи, якщо ви новачок:

  • Ідіть по потоку, якщо ви відчуваєте себе сильним, і просто відволіктися (не завжди ідеальне рішення).
  • Отримайте кілька швидких знань про те, як правильно встановити каркас (як правило, краще).

Для останнього заходьте сюди – чудовий путівник.

(Обов’язково створіть каркасний каркас для кожного важливого типу сторінки, який ви перерахували на попередньому кроці.)

Що потрібно підготувати після цього розділу:

  • Більшість контенту для сайту або принаймні більшість його передбачено (наприклад, якщо ви покладаєтесь на створений користувачем вміст, то важко це мати заздалегідь).
  • Структура вмісту вашого веб-сайту підготовлена ​​у вигляді графіка.
  • Каркас окремих типів сторінок, які вам знадобляться.

Подальше читання:

  • 9 кроків до планування вмісту веб-сайту
  • Нове у веб-дизайні? Починай тут.

ГЛАВА 3: UX та UI

Ніколи не варто недооцінювати важливість користувацького досвіду та інтерфейсу користувача

Як і у користувальницькому досвіді та інтерфейсі користувача.

WebDesignerDepot дає нам досить поетичне визначення двох:

UI – це сідло, стремена та панування.

UX – це відчуття, що ти можеш покататися на коні та скакати свою худобу.

Для більш практичного визначення:

  • Користувацький інтерфейс – це те, що бачить користувач, коли він переглядає ваш сайт.
  • UX – як вони ставляться до цього.

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

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

Коротше кажучи, є багато чого навчитися, якщо ви тільки починаєте свою подорож.

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

Цілі користувача

UX стосується цілей користувача … Не так багато ваших цілей … Цілі користувачів.

Гаразд, що це означає? Перш за все, поверніться до мети свого веб-сайту – над тим, над чим працювали у попередніх главах. Причина, чому ви створюєте веб-сайт, і як він допомагає користувачеві / відвідувачу.

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

Наскільки легко досягти цих цілей?

Далі, зосередимось на наступному питанні:

  • Чи може відвідувач легко досягти своєї мети? – Чи можуть вони отримати просту інформацію, до якої вони прийшли, просто?

Щоб відповісти на це, вам потрібно повернутися до вашої каркасної рамки, структури вмісту та ще раз перевірити речі.

Переконайтесь, що структура вмісту та сторінки, які ви придумали, мають сенс з точки зору користувача. Переконайтесь, що вони можуть вільно та не заплутано переходити між важливими сторінками.

По суті, тут ми гарантуємо, що веб-сайт надає вашим відвідувачам цінність.

Важко зрозуміти це все самостійно, чи не так??

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

А саме, подумайте, що вас засмучує, коли ви відвідуєте веб-сайти, схожі на той, який ви хочете створити? Можливо, є якась інформація, до якої дійсно важко дістатися, або якийсь елемент інтерфейсу, який робить сайт заплутаним.

Робіть нотатки, робіть висновки, не робіть однакових помилок зі своїм веб-сайтом.

Використання емоції як інструменту

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

Ви хочете, щоб вони відчували певний шлях, який потім переконає їх діяти певним чином. Таким чином, роблячи ваш веб-сайт справді корисним.

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

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

Отримавши декілька загальних рекомендацій щодо роботи з кольором, ви знайдете декілька загальних рекомендацій:

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

Типографія

У багатьох випадках типографія – це виграєте (або програєте) гру на створенні веб-сайтів.

Так легко легко забути про типографіку і просто використовувати Arial для всього.

Не рекомендовано.

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

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

Перегляньте цей сайт, наприклад:

боноби

Помітили щось? Так, шрифти величезні, і вони чудово виглядають!

Ось як працювати над цим:

  • Загалом, кожен дизайн веб-сайту потребує двох типів тексту: заголовки і абзаци. У більшості випадків буде лише один шрифт на кожен.
  • Перейдіть до Google Fonts – власної бібліотеки безкоштовних шрифтів Google, яку ви можете використовувати на своєму веб-сайті – і знайдіть шрифт заголовка, який вам справді подобається..
  • Потім візьміть ім’я цього шрифту та шукайте його в парі шрифту – це бібліотека заздалегідь створених пар шрифтів, які добре поєднуються.
  • Виберіть пару, який виглядає приголомшливо.
  • Запишіть назви обох шрифтів, вони знадобляться вам пізніше.

Це таким чином прискорить ваш процес і все одно дасть чудовий результат.

Наприклад, у Google Fonts ми знайшли шрифт під назвою Bree Serif:

Брі-Серіф

Потім ми взяли його до Font Pair, і сайт запропонував Bree Serif добре поєднуватися з Open Sans. Ідеально:

Bree-Serif-open-sans

Заключна структура

Нарешті, останній крок!

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

Що потрібно підготувати після цього розділу:

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

Подальше читання: 

  • Журнал UX
  • UX Будка
  • Психологія та емоція за кольором у веб-дизайні
  • Що таке дизайн досвіду користувачів? Огляд, інструменти та ресурси
  • Постановка розумних бізнес-цілей для веб-сайту
  • 8 правил створення ефективної типографії

ГЛАВА 4: WordPress, HTML або шаблони?

Вирішіть, яким маршрутом рухатись – системи управління вмістом або кодуйте його з нуля

Ось з чого починаються справжні, брудні руки, що знаходяться під кришкою!

Це також, мабуть, найстрашніша частина процесу (визнай!).

Один раз, саме час підібрати ручку та папір і почати працювати з деяким програмним забезпеченням.

І ось біля воріт виникає маса питань …

  • Чи слід вивчати HTML?
  • Як щодо CSS?
  • Чи будуть готові шаблони HTML-сайтів робити для мене хитрість?
  • Чи потрібно мені вивчати мову програмування, як PHP?
  • Я чув, що WordPress – це спосіб створити сайт сьогодні.
  • Я побачив, що Squarespace Super Bowl. Що з цим??
  • Як це називається Joomla? Або Друпал?
  • і на, і на і на.

Відповідь на все це – так.

Так, так, ви можете зробити те чи інше, і тільки ви вирішите, який шлях вибрати.

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

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

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

Відповів а)? Перейдіть до розділу 5.

Відповів b)? Перейдіть до розділу 6.

Відповів в)? Сміливо перегляньте цю статтю, а потім поверніться (це повинно допомогти вам вибрати ідеальний шлях):

  • Переглянуто 8 найкращих платформ для блогів та побудови веб-сайтів… Кожна платформа описується разом із її плюсами та мінусами, а ресурс також пропонує найкращий доступний вибір (Wix чи SB) для ваших конкретних потреб.

Ви читали це? Чудово! Отже, яка з персон, описаних вище, описує вас найкраще – а) або б)?

Інструменти, які можуть стати в нагоді на цьому шляху:

  • Графіка: Paint.NET, Gimp, Pixlr.
  • Написання коду: Блокнот ++, TextWrangler, SublimeText.
  • Управління роботою: Trello.
  • Дизайн: кольорові гами, шрифти Google, інструменти звідси.
  • Фотографія: Unsplash, AllTheFreeStock

РОЗДІЛ 5: Вступ до HTML, CSS & Javascript

Наскільки веб-сайти є вбудованою реальністю

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

HTML

HTML – це мова веб-сайтів. Кожна веб-сторінка будується або перетворюється в HTML в якийсь момент.

Наприклад, щоб побачити структуру HTML цього посібника, який ви читаєте тут, просто натисніть «Ctrl + U» на клавіатурі.

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

Щоб ефективно вивчити HTML, радимо записатись на один із (безкоштовних або платних) курсів, доступних в Інтернеті. Деякі з найкращих можна знайти в Codeacademy або Treehouse.

Наприклад, ось окремий розділ про Codeacademy, що стосується HTML та CSS.

Домашня сторінка CodeCademy

Отже, це комплексний підхід до HTML.

CSS

CSS – щоб пропустити нудні технічні деталі – відповідає за стилізацію всього, що відображається на веб-сторінці.

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

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

Для більш поглибленого навчання також перегляньте розділи CSS або на Codeacademy, або на Treehouse.

JavaScript, jQuery, Bootstrap тощо.

JavaScript – мова програмування, яка дозволяє вводити деякі динамічні дії на ваш веб-сайт. Наприклад, ви можете робити такі дії, як перевірити веб-форми або взаємодіяти з користувачем більш обтічним способом, не потребуючи перезавантаження сторінки, на якій вони перебувають. Ось приємний підручник від w3schools.

Маючи це на увазі, jQuery – це бібліотека JavaScript, яка дозволяє створювати розширені речі з меншим кодуванням. Дуже зручно для веб-розробника. Дізнайтеся більше тут.

Нарешті, Bootstrap – дуже цікавий винахід. Спочатку створений Twitter, це в основному середовище, що прискорює процес створення веб-сайту, доставляючи більшість загальноприйнятих елементів сайту, які вже створені. Це звучить складно, чи не так??

Але це не так Просто перегляньте цей початковий курс в Codeacademy (до речі, саме так ми спочатку дізналися Bootstrap).

Що потрібно підготувати після цього розділу:

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

ГЛАВА 6: Платформи побудови веб-сайтів

Налаштування вашого першого сайту? Спробуйте безкоштовні веб-майданчики, такі як WordPress, Joomla або Drupal

Глава 6: Платформи для створення веб-сайтів

  • SquareSpace
  • WordPress
  • Joomla & Друпал

Там більше розробників веб-сайтів, ніж можна потиснути палицю. (Якщо ти такий, як людина, яка трясе палицями.)

Гаразд, жарти вбік.

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

Примітка. Будь ласка, майте на увазі, що все інше, про що ми говорили у розділах 1-4, все ще стосується тут. Навіть якщо ви використовуєте рішення щодо створення веб-сайтів, яке є типовим для рук, вам потрібно бути обережними, щоб зробити кінцевий продукт дружним для користувачів та співзвучним цілям кожного. Ці інструменти для створення сайтів – це саме такі… інструменти.

Починаючи з тих, які найлегше зрозуміти:

SquareSpace

Єдина веб-платформа, яка рекламується під час Super Bowl.

Словом, дуже зручне рішення, яким може скористатися будь-хто. Попередні навички не потрібні.

Це дозволяє створювати класичні веб-сайти, блоги, навіть магазини електронної комерції, ми навіть писали відгук про них. Інтерфейс і весь процес його використання досить легко зрозуміти, плюс хлопці з Squarespace надають багато цікавих навчальних посібників. Перевірте їх тут.

WordPress

Чесно кажучи, ми любимо WordPress.

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

WordPress анімація

Також на даний момент це найпопулярніша платформа веб-сайтів із усіх. Як поділився автор WordPress – Метт Малленвег – WordPress зараз займає 25% всього Інтернету. Чи всі ці люди можуть помилятися?

Добре, тож для початку роботи з WordPress вам потрібен лише ваш домен та хостинг. Саме програмне забезпечення WordPress є абсолютно безкоштовним.

Для початку сміливо йдіть по одному з таких шляхів:

а) “Швидкий шлях старту”

  • Перейдіть сюди, щоб дізнатися про спрощений спосіб встановлення WordPress та запуску вашого сайту в другій половині дня.
  • Виберіть безкоштовну тему з офіційного каталогу – переконайтеся, що вона співзвучна цілям вашого веб-сайту, а також, щоб макет / дизайн не були далеко від бажаної структури (ви її трохи відрегулюєте).
    • Перевірте ці два ресурси, щоб дізнатися, як налаштувати існуючу тему.
    • Крім того, ви можете вибрати багатоцільову преміальну тему, яку можна регулювати за допомогою зручного інтерфейсу користувача (кодування не передбачається). Тема X – хороший приклад такої речі.
  • Установіть кілька найпопулярніших та найкращих плагінів, щоб отримати додаткові функції.

б) “Поглиблений шлях”

  • Почніть з вивчення WordPress через онлайн-курс. Treehouse пропонує приголомшливий.
  • Виберіть свою тему та плагіни так само, як вище. По черзі, будуйте власну тему з нуля.

Зрештою, WordPress – це, мабуть, найбільш універсальна платформа веб-сайтів на ринку. З його допомогою ви можете створити практично будь-який тип веб-сайту, не тільки блоги чи прості бізнес-сайти. Ось список із 47 (!) Різних способів використання WordPress, просто для того, щоб задуматися.

Joomla та Drupal

Хоча трохи відрізняються один від одного, Joomla та Drupal – це відмінна система управління контентом для більш просунутих веб-проектів.

Вони не настільки сильні для дизайну, але вони дуже налаштовані та здатні обробляти будь-який веб-сайт, який ви можете мати в плані.

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

Для більш поглибленої підготовки, на Lynda.com є чудові курси, як для Joomla, так і для Drupal.

Що потрібно підготувати після цього розділу:

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

ГЛАВА 7: Мобільний адаптивний дизайн

Понад 60% людей використовують мобільні телефони та планшети, щоб переглядати Інтернет

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

Ось про що йдеться у всьому:

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

Але є проблема.

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

Деякі поширені проблеми включають:

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

Ось тут і грає ідея мобільної чуйності.

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

Ось краще пояснення: Що таке Heck – чуйний веб-дизайн?

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

Якщо є проблеми, потрібно їх виправити.

Деякі рішення:

  • Чуйний веб-дизайн – як робити
  • Як зробити веб-сайт чуйним за приблизно 15 хвилин

РОЗДІЛ 8: Об’єднання всіх

Ви знаєте основи, тепер ваша черга

Тримайся, ми майже там!

Це остання глава нашого досить тривалого шляху.

У цей момент у вас повинен бути створений перший веб-сайт … Будьте це з WordPress, вручну побудований HTML / CSS, якийсь конструктор веб-сайтів чи будь-які інші інструменти, вибрані для роботи..

Коротше кажучи, вітаю! Але все ж є кілька справ, які варто зробити:

  • Двічі перевірте те, що ми обговорювали в розділах 1 і 2. Переконайтеся, що цілі справді працюють для кінцевого користувача та чи веб-сайт не заплутаний.
  • Перевірте структуру коду за допомогою сервісу перевірки розмітки W3C.
  • Перевірте, чи немає проблем із безпекою на сайті. Для цього використовуйте сканер Sucuri.
  • Отримайте відгуки від громади. Перевірте, що інші люди думають про вашу роботу. Форуми в Sitepoint можуть бути корисними для цього.

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

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

Нарешті, нам цікаво… яка ваша найбільша проблема, коли справа стосується створення веб-сайтів, розробки веб-сайтів чи дизайну? Будь ласка, поділіться у коментарях або через Twitter. Ми всі вуха!

Дякуємо за прочитане, ви чудові!

  • Всього116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map