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

Как правило, какой процесс вы используете для запуска сайта? Вы рисуете макет на бумаге, а затем делаете код? Или вы просто начинаете кодировать и настраиваете вывод по своему вкусу?

Мой процесс обычно выглядит примерно так:

1. Особенности . С карандашом и бумагой выложите отличительные особенности / страницы, которые будут составлять сайт. Это касается общих вопросов - вы создаете простой информационный и графический сайт для своей мамы? решение для электронной коммерции для малого бизнеса? блог / галерея для друга-фотографа? Ваш ответ во многом определит путь сборки, которому вы должны будете следовать. Эта стадия может также включать в себя значительную дискуссию с клиентом или кем бы то ни было за рулем (если это не вы).

2. Каркас . Со всеми необходимыми функциями выложите каркас. Либо на бумаге, либо с помощью такого инструмента, как фейерверк, который позволит вам встроить очень простые навигационные функции. Если вы работаете с CMS, такой как WordPress, как будет обрабатываться ваш статический контент? Это также может быть хорошим временем, чтобы начать думать о файловой структуре. Если вашему проекту понадобится настраиваемая база данных, сейчас также самое время приступить к планированию ее разработки и реализации. Это критический этап, так как интеллектуальное планирование сэкономит много времени на откат и доработку, если будут допущены ошибки или произойдет срыв проекта.

3. Технология . Как только стадия планирования относительно проработана - выберите ваши технологии. Вы делаете прямой HTML? php cms в ламповой среде? .net MVC магазин? Эти вопросы могут повлиять на то, какая хостинговая среда потребуется, а также на затраты на ее запуск. Если вы работаете в магазине, безопасность здесь является главной задачей (например, соответствие SSL и PCI). Убедитесь, что у вас установлена ​​отличная среда тестирования (локальный или другой).

4. Дизайн / Верстка . Когда ваш список функций и каркас хорошо определены, вы можете задуматься о дизайне сайта. Знание того, что будет заполнять страницы, очевидно, является обязательным условием. Мне нравится работать в фотошопе и интенсивно использовать папки как аналог вашей структуры разметки. Я зашел так далеко, что назвал их предполагаемой разметкой и идентификаторами CSS. Хотя, вероятно, было бы целесообразно сделать несколько свободных рисунков, прежде чем вы будете действительно подробно. Я склонен использовать файлы «макета», из которых я буду извлекать элементы, и помещать в «файлы процесса» - файлы, которые я использую для вывода производственной графики.

5. Разметка / CSS . После того, как будет разработан довольно чистый дизайн (учитывая, что он будет немного сгибаться при переходе в рабочий режим), вы можете начать писать разметку. Как правило, мне нравится иметь стандартный макет, который будет вмещать весь контент на сайте. Так что - чистота и гибкость должны быть ключевым моментом здесь. Разметка макета должна быть достаточно полной до того, как вы начнете писать CSS, но я считаю, что они многое делают для того, чтобы информировать друг друга. На этом этапе вы также будете выполнять большую часть SEO-оптимизации (правильное именование изображений или тегов A, метаинформация, типы документов и т. Д.).

5.1 Управление темами . Если вы работаете с CMS, и ваш дизайн будет использоваться в качестве настраиваемой темы, найдите несколько учебных пособий о том, как именно это сделать для предполагаемого приложения. Откровенно говоря, это может быть пугающим;) Я всегда буду создавать статический макет разметки с довольно полным CSS, прежде чем разделить его на элементы темы.

6. Поведение . Когда ваша разметка и CSS выглядят довольно завершенными, и, возможно, ваша тема на месте, вы можете начать разработку поведения (ролловеры и т. Д.). Ненавязчивый javascript важен, если вы не используете функции, которые ему абсолютно необходимы (ajax-heavy). галерея или флэш-контент, управляемый данными). Общее правило: если кто-то заходит на ваш сайт с отключенным javascript, что он увидит? Иногда я удаляю статические элементы и заменяю их интерактивными версиями во время выполнения.

7. Содержание . Если дизайн не зависит от контента (например, изображения иногда являются контентом) = Я обычно использую текст / графику-заполнитель, пока дизайн и поведение не будут достаточно хорошо установлены. Избегайте делать работу более одного раза. Если вы заполняете данные о продукте, потребуется тщательная проверка ошибок и тестирование.

На этом этапе, кажется, всегда есть период переделки, ремонта и полировки. Но, по сути, пришло время заставить его жить. Тогда иди перекусить.

Хммм. Я думаю, это больше, чем просто «как начать». Но, возможно, это все равно поможет. Удачи!

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

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

1. Почему вопросы.

• Расскажите мне немного о себе и о том, почему вы это делаете.

• Кто клиенты? Какова их конкретная потребность / боль? Пожалуйста, предоставьте мне несколько конкретных примеров различных типов клиентов, что им нужно, что сайт сделает для них.

• Расскажи мне о бизнесе. Что именно вы делаете?

• Что делает тебя лучше, чем следующий парень?

• Если бы вы искали услугу, которую предоставляет ваша компания, что бы вы набрали в Google, чтобы найти ее?

Если вы создаете сайт для себя, то вам лучше знать, что это за ответы.

Если вы определите на основе ответов на поставленные выше вопросы, что эти люди серьезны и на самом деле имеют хорошую идею. Затем продолжайте (Помните, что вам еще не платят, но лучше снимайте их носки, если хотите, чтобы они вас наняли).

2. Исследование.

Потратьте некоторое время на изучение клиента и его бизнеса. Узнайте их прошлые успехи и любые проблемы, с которыми они столкнулись. Вы третий разработчик, которого они наняли? Что случилось с двумя другими парнями?

Узнайте, что нужно клиенту. Для кого вы будете создавать этот сайт. Является ли клиент 60-летним пенсионером или 16-летним ребенком с лицом прыща, который весь день играет в Farmville на Facebook.

Узнайте, кто конкуренты. Они могут даже не знать. Проведите конкурентный анализ от 5 до 10 конкурентов и выясните, кому задницу нужно отбить в серпах. На этом этапе вам необходимо знать, какое ключевое слово имеет цель. Немного позже, и вы уже терпите неудачу.

2b Предложение

Ударьте их своим знанием их бизнеса и придумайте соглашение / предложение веб-сайта и будьте готовы с вашим контрактом, как только они согласятся. Получите подписанный договор и 50% -ый депозит, затем перейдите к шагу 3.

3. Миссия - есть один

Здесь есть общая тема: во всех этих случаях миссия не о продукте как таковом. Миссия «просто» - это то, что, если вы действительно серьезно относитесь к этому, требует, чтобы продукт стал совершенно потрясающим, чтобы вы это сделали. Если вы предпочитаете: все эти миссии являются ответом, почему мы просто добавили эту новую функцию? А не какую новую функцию мы добавили? - Бенджамин Поллак.

Сроки должны быть установлены, чтобы у каждого были свои ожидания в перспективе.

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

Именно с этого и начинается большинство людей, поэтому я объясню свой процесс, но вам придется решить, какой рабочий процесс лучше всего подходит для вашей ситуации, команды, клиента и т. Д.

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

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

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

3. Развитие Frontend и UI - HTML, CSS и ПРОЕКТИРОВАНИЕ в Браузер , техник Hardboiled Энди Кларка. Я устал тратить так много времени в Photoshop, когда я знаю, что могу продемонстрировать более реалистичный и быстрый макет, который также дает мне преимущество в разработке.

4b. Кодовая база

Вы наконец можете повеселиться. Для вашей пользы и пользы клиентов настройте VERSION CONTROL перед началом работы. Так как вы делаете контроль версий, вы должны пойти дальше и настроить отслеживание ошибок, пока вы на нем.

4c. Редактирование копии

Помните, что у нас есть контент? Теперь, когда это должно быть отредактировано копией. Я сосу это, поэтому пытаюсь нанять кого-то другого или убедиться, что многие люди читают это. Проверьте и убедитесь, что те ключевые слова, о которых мы говорили на шаге 2, оптимизированы для SEO. Если наш контент великолепен и на самом деле о тех ключевых словах, это должно быть естественно.

5. Бета-тестирование и тестирование пользовательского интерфейса

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

6. Техническое обслуживание и план SEO

Убедитесь, что все знают, кто отвечает за борьбу с серверными зверями .

Через месяц вернитесь к проведенному нами конкурентному анализу и сравните наш сайт с теми, которые мы проанализировали. Используйте эти данные, чтобы создать свой план SEO, и НЕТ, я не говорю о SEO змеиной нефти, я говорю о том, чтобы убедиться, что вы все еще генерируете релевантный контент, сайты естественным образом ссылаются на вас (потому что вы такие крутые) и ваши теги заголовков соответствовать основному тексту. SEO - это долгий процесс, если у вас нет переполнения стека, и у вас есть армия из 14,1 миллионов пользователей для создания качественного контента для вас.

Существует большая разница между качественным контентом и тем, что вы найдете на «сайте с переносами», на который я не буду ссылаться. (Чтобы не допустить попадания на них сока без следа).

7. Запуск

Все работает? Миссия построения удивительности была достигнута? Иметь план запуска и выполнить его.

Если вы сделали все правильно в шагах 1 - 6, ваш запуск будет легким, но у вас могут возникнуть проблемы. Просто будьте к ним готовы и исправьте любые ошибки.

Отправить счет, промыть и повторить.

Мне нравится начинать с <!DOCTYPE html>

Серьезно, хотя ... первые приоритеты:

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

Прежде всего, я бы нарисовал базовый макет и спроектировал его на бумаге, прежде чем начать кодирование. После завершения базового дизайна на бумаге, его легко закодировать модульным способом. Лучший способ настроить его - использовать php & css.

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

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

Есть много PHP-фреймворков ( Kohana - мой личный фаворит), или многие люди используют Wordpress в качестве основы. Также вы можете использовать CSS-фреймворк, опять же, есть много других, одна из самых популярных - сетка 960.

При разработке сайта, как вы обычно начинаете ?

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

Как только я получил это понимание, процесс проектирования стал намного понятнее. Это позволило мне записать элементы моей домашней страницы и последующих страниц, которые будут сообщать эти элементы.

Например, я очень хотел, чтобы мое резюме было легко найти и загрузить. Поэтому, когда я создавал свой сайт, я позаботился о том, чтобы информация о моем резюме и где его можно было найти там, где он был доступен

Мораль этой истории должна быть актуальной. Все на вашем сайте должно служить цели, иначе это просто ненужный шум.