Раніше я робив кодування HTML, CSS та PHP, але я коли-небудь працював над речами, які вже були "закінчені", і я ніколи не запускав веб-сайт з нуля. Однак я нещодавно придбав домен та хостинг за дешевими, і я сподіваюся вдосконалити свої навички HTML, CSS та Javascript, щоб я міг стати трохи більш продаженим як веб-розробник / веб-майстер.

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

Мій процес, як правило, виглядає приблизно так:

1. Особливості . За допомогою олівця та паперу викладіть різні особливості / сторінки, які будуть містити сайт. Це виникає при широких питаннях обведення: чи ви створюєте простий інформаційно-графічний сайт для своєї мами? рішення електронної комерції для малого бізнесу? блог / галерея для друга фотографа? Ваша відповідь багато визначатиме про шлях збирання, який вам потрібно буде пройти. Цей етап може також включати значну дискусію з клієнтом або тим, хто веде човен (якщо це не ви).

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

3. Технологія . Після того, як етап планування буде відносно відпрацьований - виберіть свої технології. Ви робите прямий html? php cms у середовищі лампи? .net mvc storefront? Ці питання можуть вплинути на те, яке хостинг-середовище знадобиться, а також на витрати на роботу. Якщо ви займаєтесь вітриною, безпека - це головна проблема (наприклад, відповідність SSL та PCI). Переконайтеся, що у вас створено чудове середовище для тестування (localhost чи іншим чином).

4. Дизайн / макет . Коли ваш список функцій і каркас досить чітко визначені, ви можете почати думати про дизайн сайту. Знання того, що буде заповнювати сторінки, очевидно, є необхідною умовою. Мені подобається працювати у фотошопі та активно використовувати папки як аналог вашій структурі розмітки. Я йду так далеко, щоб назвати їх за допомогою призначених ідентифікаторів розмітки та css. Хоча, ймовірно, розумно зробити якийсь малюнок у вільній формі, перш ніж отримати дійсно детальну інформацію. Я схильний використовувати файли "верстки", з яких я буду витягувати елементи, і розміщую в "обробляти" файли - файли, які я використовую для виведення виробничої графіки.

5. Розмітка / CSS . Після розробки досить чистого дизайну (враховуючи, що це, безумовно, трохи згинається, коли ви переходите в режим виробництва), ви можете почати писати розмітку. Я, як правило, люблю мати стандартний макет, який вміщує весь вміст на сайті. Отже, чітка та гнучка повинна бути ключовим моментом тут. Розмітка розмітки повинна бути досить повною, перш ніж ви почнете писати CSS, але я вважаю, що вони роблять багато для інформування про інше. На цьому етапі ви також зробите багато SEO оптимізації (належне іменування зображень або тегів A, метаінформації, доктрипів тощо). Будьте ретельними.

5.1 Управління темами . Якщо ви працюєте з CMS, і ваш дизайн буде використовуватися як спеціальна тема, знайдіть підручники щодо того, як саме це зробити для вашої призначеної програми. Це може бути непростим, відверто кажучи;) Я завжди буду будувати статичну розмітку із досить повною CSS перед тим, як розбивати її на елементи теми.

6. Поведінка . Коли ваша розмітка та css виглядають досить повно, і, можливо, ваша тема стоїть на місці, ви можете почати розробляти поведінку (перекидання тощо). Ненав'язливий JavaScript важливий, якщо ви не використовуєте функції, які цього абсолютно вимагають (ajax-heavy галерея або флеш-вміст, керований даними). Загальне правило - якщо хтось відвідує ваш сайт із вимкненим javascript, що він буде бачити? Я іноді видаляю статичні елементи і замінюю тоді інтерактивні версії під час виконання.

7. Зміст . Якщо дизайн не покладається на вміст (наприклад, зображення іноді містять вміст) = Я зазвичай використовую текст / графіку заповнювача, поки дизайн та поведінка не налагодяться досить добре. Уникайте робити роботи не один раз. Якщо ви заповнюєте дані про продукт, знадобиться ретельна перевірка помилок та тестування.

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

Хммм. Я думаю, що це більше, ніж просто "як почати". Але, можливо, це допомагає, все одно. Удачі!

Створюючи веб-сайт, я починаю з питання, чому?

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

1. Чому питання.

• Розкажіть мені трохи про себе і чому ви це робите.

• Хто замовники? Яка їхня конкретна потреба / біль? Будь ласка, майте змогу надати мені - кілька конкретних прикладів різних типів клієнтів, що їм потрібно, що веб-сайт буде робити для них.

• Розкажи мені про бізнес. Що ти саме робиш?

• Що робить тебе кращим за наступного хлопця?

• Якщо ви шукали послугу, яку надає ваш бізнес, що б ви ввели в Google, щоб знайти його?

Якщо ви будуєте сайт для себе, то краще вже знаєте, що це за відповіді.

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

2. Дослідження.

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

Дізнайтеся, що потрібно замовнику. Для кого ви будете створювати цей сайт. Чи є клієнтом 60-річний пенсіонер-пенсіонер чи 16-річний прищ, який стикається з дитиною, яка цілий день грає у Farmville у Facebook.

Дізнайтеся, хто такі конкуренти. Вони можуть навіть не знати. Зробіть аналіз змагань від 5 до 10 конкурентів і з’ясуйте, в кого попку нам потрібно бити в Serps. Це етап, який потрібно знати, що таке ключове слово. Пізніше і ваш уже невдалий.

2b Пропозиція

Відмовте їх від ваших знань про їхній бізнес та придумайте угоду / пропозицію про веб-сайт та будьте готові до свого контракту, як тільки вони погоджуються. Отримайте підписаний контракт та 50% депозит, тоді перейдіть до кроку 3.

3. Місія - мати одну

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

Термін потрібно встановити, щоб кожен мав свої очікування в перспективі.

4. Робочий процес

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

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

2. Ви вже повинні мати уявлення про те, як буде виглядати сайт. Ви повинні мати вміст. Тепер вам потрібно працювати над компонуванням та загальними принципами дизайну, які дозволять досягти мети, яку ви поставили на кроці 3.

   Я ненавиджу каркаси, але розумію, що вони необхідні. Просто тому, що ви знаєте, як виглядає сайт, можливо, ваш клієнт не може. Це для вашого захисту та клієнтів. Коли всі із задоволенням змушують їх підписатись на щось, що говорить: «Це ми ми платимо вам за побудову».

3. Розробка Frontend та інтерфейс користувача - HTML, CSS та проектування в брошурі , техніка Andy Clarke Hardboiled. Мені набридло витрачати стільки часу на Photoshop, коли я знаю, що може продемонструвати більш реалістичний швидший макет, який також дає мені початок розвитку.

4б. База кодів

Ви нарешті отримуєте задоволення. Для вашої та клієнтської вигоди налаштуйте ВЕРСІЙНИЙ КОНТРОЛЬ перед тим, як розпочати роботу. З моменту керування версіями ви повинні продовжувати і налаштовувати BUG TRACKING, а ваш на цьому.

4в. Редагування копій

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

5. Бета-тестування та інтерфейс користувача

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

6. Технічне обслуговування та SEO-план

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

Через місяць поверніться до аналізу конкурентоспроможності, який ми зробили, і порівняємо наш сайт з аналогічним нами. Використовуйте ці дані для створення свого SEO плану, і НІ Я не говорю про зміїну олію SEO, я говорю про те, щоб ваш все ще генерував вміст відновлених сайтів, веб-сайти, природно, посилалися на вас (тому що вони такі приголомшливі) та ваші заголовки тегів відповідати тексту тексту. SEO - це тривалий процес, якщо ваш Steck Overflow не має 14,1 мільйонів користувачів для створення якісного контенту для вас.

Існує велика різниця між якісним вмістом та речами, які ви знайдете на "дефісі", з яким я не буду пов'язувати. (Щоб сік без сліду навіть не капав на них).

7. Запуск

Все працює? Місія побудови дивовижності була досягнута? Майте план запуску і виконайте його.

Якщо ви зробили все правильно на кроках 1 - 6, ваш запуск буде вітром, без удару, що у вас можуть виникнути проблеми. Просто будьте готові до них і виправте будь-які помилки.

Надішліть рахунок-фактуру, промийте та повторіть.

Мені подобається починати <!DOCTYPE html>

Серйозно, хоча ... перші пріоритети:

1. Дізнайтеся, чого хоче клієнт. Намалюйте приблизний ескіз для базового макета, придумайте ж / кольорову схему тощо.
2. Зробіть базовий макет навігації та компонування (статичний) і працюйте з клієнтом, щоб вдосконалити його.
3. Фактичне виробництво. Отримайте CMS та / або статичний вміст на місці. Знову проконсультуйтеся з клієнтом, щоб переконатися, що це те, що він шукає, і чи зможе він керувати CMS / CMS може відповідати їх потребам.
4. Уточнити і повторити 3, поки клієнт не буде задоволений.
5. ????
6. Прибуток!

Перш за все я намалював би основний макет і спроектував його на папері перед початком кодування. Після завершення базового дизайну на папері легко кодувати його модульним способом. Найкращим способом налаштувати його буде php & css.

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

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

Є багато фреймворків PHP, доступних там ( Кохана - мій особистий фаворит) або багато людей використовують Wordpress як основу. Крім того, ви можете використовувати рамку CSS, і знову їх багато, одна з найпопулярніших - сітка 960

Створюючи веб-сайт, як ви зазвичай починаєте ?

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

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

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

Мораль історії повинна бути актуальною. Все на вашому веб-сайті має слугувати цілі, інакше його просто непотрібний шум.