Несмотря на общепринятое мнение, центральное место в процессе дизайна и разработки веб-сайтов не всегда занимает фаза написания кода. В первую очередь приходящие на ум технологии, такие как HTML, CSS и JavaScript, и в самом деле создают образ Сети, к которому мы привыкли и определяют способы нашего взаимодействия с информацией. Что обычно остается вне поля зрения, но в то же время является едва ли не самой важной частью процесса разработки, так это стадии предварительного сбора информации, тщательного планирования, а также поддержки уже после запуска сайта. В этой статье мы поговорим о том, как может выглядеть типичный процесс разработки веб-сайта. Можно выделить разное количество этапов, из которых состоит процесс разработки. Обычно это число от пяти до восьми, но в каждом случае общая картина остается примерно одинаковой. Давайте остановимся на среднем значении. Итак, семь основных этапов разработки: 1) Сбор информации, 2) Планирование, 3) Дизайн, 4) Создание контента, 5) Разработка, 6) Тестирование, обзор и запуск 7) Поддержка.

График разработки

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

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

Жизненный цикл разработки веб-сайта

Этап 1. Сбор информации: назначение, основные цели и целевая аудитория

Этап предварительного исследования и сбора информации определяет то, как будут протекать все последующие стадии разработки. Самое важное на этом этапе — получить ясное и полное понимание того, каким будет назначение вашего будущего сайта, каких целей вы хотите достичь с его помощью, а также какова целевая аудитория, которую вы хотите на него привлечь. Такая своеобразная анкета веб-разработки позволит определить наилучшую стратегию дальнейшего развития проекта. Новостные порталы отличаются от развлекательных сайтов, а сайты для подростков отличаются от таковых для взрослой аудитории. Разные сайты предоставляют посетителям разную функциональность, а значит разные технологии должны использоваться в том или ином случае. Детально составленный план, созданный на основе данных, полученных на этом этапе, может предотвратить вас от затраты дополнительных ресурсов на решение непредвиденных трудностей, таких как смена дизайна или добавление функционала, не предусмотренного изначально.

Приблизительное время: от 1 до 2 недель

Этап 2. Планирование: создание карты сайта и макета

На этой стадии разработки заказчик уже может получить представление о том, каким будет будущий сайт. На основе информации, собранной на предыдущей стадии, создается карта сайта (sitemap) . Так, например, выглядит карта сайта XB Software:

Карта сайта описывает взаимосвязь между различными частями вашего сайта. Это помогает понять, насколько удобным в использовании он будет. По карте сайта можно определить «расстояние» от главной страницы до других страниц, что помогает судить о том, насколько просто пользователю будет добраться до интересующей его информации. Основная цель создания карты сайта — создать легкий с точки зрения навигации и дружественный к пользователю продукт. Это позволяет понять внутреннюю структуру будущего сайта, но не описывает то, как сайт будет выглядеть. Иногда, прежде чем приступить к написанию кода или к разработке дизайна, может быть важным получить одобрение заказчика. В этом случае создается макет (wireframe или mock-up) . Макет представляет из себя визуальное представление будущего интерфейса сайта. Но, в отличие например, от шаблона, о котором мы поговорим далее, он не содержит элементов дизайна, таких как цвет, логотипы, и т.п. Он только описывает, какие элементы будут помещены на страницу и как они будут расположены. Макет представляет собой своего рода набросок будущего сайта. Вы можете использовать один из доступных онлайн-сервисов для создания макетов. Обычно мы используем Moqups .

Также на этом этапе стоит определиться с тем, какой стек технологий (язык программирования, фреймворки, CMS) будет использован.

Приблизительное время: от 2 до 6 недель

Этап 3. Дизайн: шаблон страницы, обзор и утверждение

На этом этапе веб-сайт становится еще ближе к своей окончательной форме. Весь визуальный контент, такой как изображения, фото и видео, создается именно сейчас. И опять-таки вся информация, которая была собрана на самой первой стадии проекта, крайне важна на этом шагу. Интересы заказчика, а также целевая аудитория должны учитываться в первую очередь во время работы над дизайном. Дизайнером на данном этапе создается шаблон страницы (page layout) . Основное назначение шаблона — визуализировать структуру страницы, ее содержимое, а также отобразить основной функционал. На этот раз, в отличие от макета, используются элементы дизайна. Шаблон содержит цвета, логотипы и изображения. Он дает возможность судить о том, как в конечном результате будет выглядеть готовый сайт. После создания шаблон может быть отправлен заказчику. После обзора заказчиком проделанной работы, он присылает свой отзыв. Если его не устраивают какие-то аспекты дизайна, вы должны изменить существующий шаблон и снова отправить его заказчику. Этот цикл повторяется до тех пор, пока заказчик не будет полностью удовлетворен результатом.

Приблизительное время: от 4 до 12 недель

Этап 4. Создание контента

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

Приблизительное время: от 5 до 15 недель

Этап 5. Верстка и разработка

Теперь вы наконец-то можете перейти непосредственно к верстке сайта. Все графические элементы, разработанные ранее, используются на данной стадии. Обычно в первую очередь создается домашняя страница, а затем к ней добавляются остальные страницы в соответствии с иерархией, разработанной на этапе создания карты сайта. Также на этом этапе происходит установка CMS. Все статичные элементы веб-сайта, дизайн которых был разработан ранее при создании шаблона, превращаются в реальные динамические интерактивные элементы веб-страницы. Немаловажная задача — проведение SEO-оптимизации (Search Engine Optimization), которая представляет собой оптимизацию элементов веб-страницы (заголовков, описания, ключевых слов) с целью поднятия позиций сайта в результатах выдачи поисковых систем. Валидность кода является крайне важной в этом случае.

Приблизительное время: от 6 до 15 недель

Этап 6. Тестирование и запуск

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

Приблизительное время: от 2 до 4 недель

Этап 7. Поддержка: отзывы пользователей и регулярные обновления

Важно понимать, что веб-сайт представляет из себя скорее сервис, чем продукт. Недостаточно просто «доставить» его потребителю. Также важно быть уверенным в том, что все работает, как и было запланировано, а пользователи удовлетворены конечным продуктом. Нужно также быть готовым быстро вносить изменения, если это будет необходимо. Система отзывов позволит вам выявлять возникшие проблемы, с которыми сталкиваются посетители сайта. Самой критичной задачей в подобных случаях будет решение возникших проблем настолько быстро, насколько это возможно. В противном случае, ваши пользователи скорее предпочтут другой ресурс, чем будут мириться с неудобствами. Также не следует забывать о регулярном обновлении CMS. Регулярные обновления избавят вас от ошибок и проблем с безопасностью.

Непрерывный процесс

Бонус. Чек-лист основных этапов разработки

Чтобы быть уверенным в том, что вы ничего не пропустили и завершать всю запланированную работу вовремя, забирайте себе этот чек-лист:

Заключение

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

The following two tabs change content below.

Итак, при разработке интернет-ресурса необходимо вести работу в строгой последовательности.

Давайте рассмотрим основные этапы:

1-й этап - проектирование
2-й этап - дизайн
3-й этап - программирование и отладка

Проектирование

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

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

Дизайн

Дизайн - это наиболее творческая часть работы! При разработке дизайна очень сложно сохранить баланс между эстетичностью и функциональностью. Именно для этого и делается проектирование будущего ресурса. Когда понятен весь функционал сайта, когда ясно, какие меню, с какими пунктами находятся на тех или иных страницах, когда заранее очевидно, какие формы и какого размера должны находиться на страницах, когда известно, что должен видеть пользователь и как он этим будет пользоваться…. Именно тогда поиск эстетического решения становится максимально творческим и при этом остается функциональным.

Дизайн - это не просто рисование красивых картинок! Это - удобство пользования чем-либо, будь то чайник, автомобиль или интернет-сайт! А удобство не может быть рождено исключительно из художественных вкусов. В первую очередь, это - приведение конструктива к эстетике.

Программирование

С программированием всё намного проще с точки зрения заказчика, но значительно сложнее с точки зрения исполнителя! Программирование нельзя увидеть или пощупать! Плодами работы программистов становится уже готовый к использованию сайт и, как правило, это кажется само собой разумеющимся окончанием работ.

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

Пользователь видит сайт лишь снаружи и ему кажется, что это очень простой сайт. В то время как, внешняя сторона сайта, это только верхушка айсберга. Самое сложное таится внутри сайта. Эту часть видят только администраторы интернет-ресурсов. Это часть называется административной панелью. Она и является подводной частью.

Для изменения пунктов меню, полей в онлайн-формах, изменения контента сайта, настройки ограничения прав пользователей при наличии разных типов пользователей и многого другого нужна удобная, практичная административная панель!

Мы разработали совершенно уникальную административную панель, позволяющую настроить её под любые функции по требованию заказчика!

Основное направление деятельности нашей компании – это создание сайтов . Разработка сайта – процесс трудоемкий, в котором обычно участвуют несколько специалистов. Чтобы проект был успешным, необходимо как минимум определить:

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

Процесс разработки веб-сайта можно разделить на следующие этапы:

1. анализ задач, которые должен решать сайт, определение целевой аудитории,
2. регистрация доменного имени сайта (например, www.сайт),
3. планирование структуры будущего сайта (разделы, навигация и т.д.),
4. разработка дизайна сайта (как правило, от 1 до 3 эскизов, в зависимости от бюджета проекта),
5. верстка разработанного макета,
6. интеграция сверстаннного макета в систему управления сайтом Joomla, установка программных компонентов и модулей, отвечающих за расширенную функциональность сайта,
7. наполнение сайта текстами и изображениями, файлами и др. (наполнение контентом).
8. тестирование сайта на соответствие техническому заданию и выкладывание готового проекта в интернет,
9. хостинг сайта,
10. поисковая оптимизация (продвижение) сайта

Давайте теперь рассмотрим каждый из этих этапов подробнее.

1. Анализ

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

2. Регистрация доменного имени

Имя сайта должно быть простым, звучным и запоминающимся. В этом случае пользователи без колебаний и долгих поисков будут заходить на Ваш сайт и рассказывать о нем своим друзьям. Мы поможем Вам подобрать название сайту и зарегистрировать его в соответствии с правилами, принятыми в сети Интернет. В ситуациях, когда подходящее имя в одной доменной зоне кем-то занято, самым простым решением оказывается регистрация сайта с тем же названием, но в другом домене (например, если www.firma.ru не свободно, можно зарегистрировать www.firma.com или www.firma.net), но предпочтительнее использовать все-таки домен в зоне RU.

3. Техническое планирование

Разработка технического задания - это этап, которым часто незаслуженно пренебрегают (Особенно если поджимают сроки или ограничен бюджет ). А ведь давно известно - каждый потраченный на планирование час позволит сэкономить три-четыре часа на этапе разработки. Здесь стоит особое внимание уделить тому, как должна работать навигация (Как посетитель попадет на эту страницу с главной? ). Не забудьте и о программных функциях (Пользователь нажал на вот эту кнопку – что при этом должно произойти? ). Очень важно уже на этом этапе понять, какой будет ваша карта сайта и как будет работать тот или иной программный компонент. Для любого сайта сложнее чем сайт-визитка важно создавать ТЗ.

4. Дизайн сайта

Один из наиболее сложных этапов. Прежде всего потому, что большинство из нас привыкло оценивать дизайн отдельно от самого сайта - картинка нравится или не нравится. Здесь стоит вспомнить о целях, которые вы поставили перед сайтом (Цель поразить всех красивой картинкой? ). Говорит ли дизайн о том, что предлагает ваша компания? Соответствует ли он вашему корпоративному стилю (У вас ведь есть корпоративный стиль? ). Четко ли он показывает ваше отличие от конкурентов? Не помешает ли дизайн в дальнейшем эффективно подвигать сайт? И это только часть вопросов, которые надо себе задать. Дизайн должен обязательно учитывать специфику той группы пользователей, на которую он расчитан, но при этом не должен приниматься в штыки и остальными (например, на "женские" сайты заходят и мужчины, и им тоже должно нравится находиться на сайте)

5. Верстка

Верстка – это перевод дизайна, до сего момента существующего в виде картинки, в HTML-код. Здесь есть свои особенности. Хорошо сверстанный сайт будет одинаково работать во всех основных веб-броузерах и на наиболее распространенных разрешениях (Или вы можете позволить себе терять клиентов? ) и его загрузка не будет заставлять клиентов иди за очередной чашкой кофе.

6. Система управления сайтом (CMS)

Серьезной задачей является выбор программного «движка», позволяющего обновлять информацию на сайте без лишних сложностей . (Если вы можете поручить задачу обновления своей секретарше, и она с этим справится без помощи вашего программиста – значит все ок ). Кроме того, иногда приходится изменять структуру сайта – например, переместить раздел или создать новый. Этот процесс тоже не должен вызывать трудности. Следование открытым стандартам также очень важно – не стоит «приковывать» себя к чьей-то закрытой технологии.

7. Наполнение сайта

В случае использования CMS процесс наполнения становится довольно прост. Конечно, он все же занимает некоторое время. Единственное, на что стоит обратить внимание – это готовность самих текстов. Очень часто именно этот этап является причиной наиболее значительных задержек, так что лучше всего позаботится об этом заранее. Обычно сайт получается запустить в срок в том случае, если и заказчик и исполнитель делают сайт параллельными курсами - разработчики делают дизайн, верстку и программную часть, а заказчик подбирает контент, готовит изображения для сайта.

8. Тестирование и выкладывание

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

И вот, когда тестирование закончено, наступает момент размещения сайта.

9. Хостинг

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

10. Поисковая оптимизация сайта

Поисковая оптимизация сайта – основа продвижения и раскрутки сайта в сети. С помощью раскрутки сайта можно привлечь на веб-ресурс значительное количество целевых посетителей, причем “цена за переход” у них будет очень небольшой. Поисковая оптимизация сайта (раскрутка сайта) – это стратегическая инвестиция в бизнес. Даже супер красивый и удобный сайт не сможет привлечь к себе должного внимания, если о нем никто не узнает.

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

• выкладывать новые материалы
• продвигать сайт в интернете
• опрашивать посетителей и добавлять новую необходимую им функциональность

Это не всегда просто, но оно того стоит - сайт это один из наиболее эффективных инструментов в современном бизнесе.

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

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

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика .

Разработка

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

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 нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

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

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

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

Командная строка

Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

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. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

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

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

• Bootstrap: http://getbootstrap.com/
• Foundation: http://foundation.zurb.com/
• Material Design Lite: http://www.getmdl.io/

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework"и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

Теги:

• html
• css
• веб-дизайн

Добавить метки

Происходит в несколько стадий. В каждой стадии участвуют специалисты, необходимые для этого. И тот кто говорит, что сайт сможешь создать всего лишь один человек является неправильным. По правде говоря в разработке веб-страничку принимают порядка 8-10 человек, сюда входят: проект-менеджер, web-дизайнер, верстальщик, программист, специалист по продвижению и при необходимости копирайтер. Такое больше участие специалистов применяется при крупных коммерческих проектов, где поставлены большие цели. А вот сделать небольшой простой сайт по силам, наверно, каждому, у кого есть желание учиться и немного навыков и умений. Да и в таком случае требуется четкое выполнение определенных действий.

Этапы :

1. Проектирование . На этапе проектирования указываются определенные требования от заказчика, описывается идея веб ресурса, рассматривается структура, какие будут разделы. Далее после всех этих требований идет выбор «движка», на котором будет установлен сайт. Все это описывается в техническом задании проекта. Поэтому данный этап является очень важным, от успеха которого зависит дальнейшая жизнь ресурса.
2. Дизайн . В этап этап входит: придумывание всех элементов сайта, как будет выглядеть сайт. В дизайне должен быть учтен стиль компании заказчика, его лого, корпоративная цветовая гамма. Так же могут быть предложены разные виды уже готового шаблонного дизайна.
3. Верстка . Верстка делается по макету, выполненному дизайнерами и придает ему завершенный вид, такой, какой его видят пользователи Интернета.
4. Программирование . Здесь создается весь функционал, что как и зачем должно работать. Привязываются определенные модули: обратная связь, поиск, ссылки, все то, что может облегчить пользователям найти нужную информацию на сайте.
5. Наполнение . Здесь идет заполнение контента, вставка картинок. Стоит уделить особое внимание наполнению страниц, т.к. от этого будет зависеть найдет ли пользователь нужную информацию у вас на страничке и останется дальше, либо закроет и забудет. И такое положение не исправит красивый внешний вид сайта, его функционал, удобная структура.
6. Тестирование . Это завершающий этап создания сайта. Прежде чем отдать заказ, каждый проект должен обязательно протестирован, обнаружены и убраны все ошибки в коде и тексте сайта.
7. Продвижение . Этап является нужным, но не обязательном. Но как пользователь найдет ваш сайт из миллиона других в интернете? Для этого как раз и нужно продвижение. Это ряд мероприятий, которые позволят вывести ваш web-ресурс в ТОП поисковых систем.
8. Поддержка . В будущем может появится необходимость в доработках сайта. Создание новых страниц, разработка новых функций и так далее. Ведь без изменений сайт может наскучить пользователям.