Основное направление деятельности нашей компании – это создание сайтов . Разработка сайта – процесс трудоемкий, в котором обычно участвуют несколько специалистов. Чтобы проект был успешным, необходимо как минимум определить:
- какие задачи возлагаются на сайт,
- на каких посетителей веб-сайт рассчитан,
- какую информацию нужно до них донести,
- какую функциональность стоит заложить в свой веб-сайт, т.е. как он будет работать;
- кто и как будет поддерживать нормальное функционирование сайта, обновление информации, как планируется его расширение?
Процесс разработки веб-сайта можно разделить на следующие этапы:
- анализ задач, которые должен решать сайт, определение целевой аудитории,
- регистрация доменного имени сайта (например, www.сайт),
- планирование структуры будущего сайта (разделы, навигация и т.д.),
- разработка дизайна сайта (как правило, от 1 до 3 эскизов, в зависимости от бюджета проекта),
- верстка разработанного макета,
- интеграция сверстаннного макета в систему управления сайтом Joomla, установка программных компонентов и модулей, отвечающих за расширенную функциональность сайта,
- наполнение сайта текстами и изображениями, файлами и др. (наполнение контентом).
- тестирование сайта на соответствие техническому заданию и выкладывание готового проекта в интернет,
- хостинг сайта,
- поисковая оптимизация (продвижение) сайта
Давайте теперь рассмотрим каждый из этих этапов подробнее.
1. Анализ
На этом этапе выясняются сами основы создаваемого сайта . Что сайт должен делать? Каковы его главные задачи? Чего вы хотите достичь с его помощью? Что вы хотите этим сайтом донести до ваших посетителей? Эти и другие многочисленные вопросы помогают определить, каким будет сайт.
2. Регистрация доменного имени
Имя сайта должно быть простым, звучным и запоминающимся. В этом случае пользователи без колебаний и долгих поисков будут заходить на Ваш сайт и рассказывать о нем своим друзьям. Мы поможем Вам подобрать название сайту и зарегистрировать его в соответствии с правилами, принятыми в сети Интернет. В ситуациях, когда подходящее имя в одной доменной зоне кем-то занято, самым простым решением оказывается регистрация сайта с тем же названием, но в другом домене (например, если www.firma.ru не свободно, можно зарегистрировать www.firma.com или www.firma.net), но предпочтительнее использовать все-таки домен в зоне RU.
3. Техническое планирование
Разработка технического задания - это этап, которым часто незаслуженно пренебрегают (Особенно если поджимают сроки или ограничен бюджет ). А ведь давно известно - каждый потраченный на планирование час позволит сэкономить три-четыре часа на этапе разработки. Здесь стоит особое внимание уделить тому, как должна работать навигация (Как посетитель попадет на эту страницу с главной? ). Не забудьте и о программных функциях (Пользователь нажал на вот эту кнопку – что при этом должно произойти? ). Очень важно уже на этом этапе понять, какой будет ваша карта сайта и как будет работать тот или иной программный компонент. Для любого сайта сложнее чем сайт-визитка важно создавать ТЗ.
4. Дизайн сайта
Один из наиболее сложных этапов. Прежде всего потому, что большинство из нас привыкло оценивать дизайн отдельно от самого сайта - картинка нравится или не нравится. Здесь стоит вспомнить о целях, которые вы поставили перед сайтом (Цель поразить всех красивой картинкой? ). Говорит ли дизайн о том, что предлагает ваша компания? Соответствует ли он вашему корпоративному стилю (У вас ведь есть корпоративный стиль? ). Четко ли он показывает ваше отличие от конкурентов? Не помешает ли дизайн в дальнейшем эффективно подвигать сайт? И это только часть вопросов, которые надо себе задать. Дизайн должен обязательно учитывать специфику той группы пользователей, на которую он расчитан, но при этом не должен приниматься в штыки и остальными (например, на "женские" сайты заходят и мужчины, и им тоже должно нравится находиться на сайте)
5. Верстка
Верстка – это перевод дизайна, до сего момента существующего в виде картинки, в HTML-код. Здесь есть свои особенности. Хорошо сверстанный сайт будет одинаково работать во всех основных веб-броузерах и на наиболее распространенных разрешениях (Или вы можете позволить себе терять клиентов? ) и его загрузка не будет заставлять клиентов иди за очередной чашкой кофе.
6. Система управления сайтом (CMS)
Серьезной задачей является выбор программного «движка», позволяющего обновлять информацию на сайте без лишних сложностей . (Если вы можете поручить задачу обновления своей секретарше, и она с этим справится без помощи вашего программиста – значит все ок ). Кроме того, иногда приходится изменять структуру сайта – например, переместить раздел или создать новый. Этот процесс тоже не должен вызывать трудности. Следование открытым стандартам также очень важно – не стоит «приковывать» себя к чьей-то закрытой технологии.
7. Наполнение сайта
В случае использования CMS процесс наполнения становится довольно прост. Конечно, он все же занимает некоторое время. Единственное, на что стоит обратить внимание – это готовность самих текстов. Очень часто именно этот этап является причиной наиболее значительных задержек, так что лучше всего позаботится об этом заранее. Обычно сайт получается запустить в срок в том случае, если и заказчик и исполнитель делают сайт параллельными курсами - разработчики делают дизайн, верстку и программную часть, а заказчик подбирает контент, готовит изображения для сайта.
8. Тестирование и выкладывание
Несмотря на то, что тестирование происходит на каждой из стадий реализации проекта , окончательное тестирование необходимо. Что надо проверить? Вот несколько самых важных моментов. Во всех ли современных броузерах работает сайт? Все ли необходимые материалы размещены? Все ли программные компоненты работают слаженно и четко?
И вот, когда тестирование закончено, наступает момент размещения сайта.
9. Хостинг
Хостинг - это услуга предоставления дискового пространства, физическое размещение файлов сайта на компьютере, постоянно находящемся в сети. Сайт - это набор файлов, которые должны быть всегда доступны посетителям, иначе потенциальные клиенты и партнеры просто не смогут посмотреть запрашиваемые страницы и не получат интересующую информацию. Иными словами, хост-сервер (компьютер, на котором размещен ваш сайт) должен работать без перебоев, несмотря на отключение электроэнергии, пожары и наводнения. Резервные копии сайта должны делаться регулярно и часто, чтобы, в случае аварийного сбоя или взлома сайта, можно было быстро восстановить работоспособность ресурса.
10. Поисковая оптимизация сайта
Поисковая оптимизация сайта – основа продвижения и раскрутки сайта в сети. С помощью раскрутки сайта можно привлечь на веб-ресурс значительное количество целевых посетителей, причем “цена за переход” у них будет очень небольшой. Поисковая оптимизация сайта (раскрутка сайта) – это стратегическая инвестиция в бизнес. Даже супер красивый и удобный сайт не сможет привлечь к себе должного внимания, если о нем никто не узнает.
Вопреки расхожему мнению, после того как сайт выложен, работа с ним не заканчивается. Если ваша цель – превратить свой сайт в инструмент маркетинга, то приготовьтесь к тому, что надо будет:
- выкладывать новые материалы
- продвигать сайт в интернете
- опрашивать посетителей и добавлять новую необходимую им функциональность
Это не всегда просто, но оно того стоит - сайт это один из наиболее эффективных инструментов в современном бизнесе.
Итак, при разработке интернет-ресурса необходимо вести работу в строгой последовательности.
Давайте рассмотрим основные этапы:
1-й этап - проектирование
2-й этап - дизайн
3-й этап - программирование и отладка
Проектирование
Это важный этап по созданию подробной документации для дальнейшей разработки интернет-ресурса. В документацию входят, как принципиальные, концептуальные вопросы, такие как проработка спектра услуг, техническая и функциональная их реализация, так и вопросы, связанные с юзабилити (степень удобства и комфорта использования интерфейса с точки зрения пользователя), с административной панелью (управление сайтом для всех типов пользователей) и многие-многие другие важные аспекты для корректной работы интернет-ресурса.
Создание хорошей документации для интернет-ресурса также необходимо, как подготовка документации при строительстве дома или производстве автомобиля.
Дизайн
Дизайн - это наиболее творческая часть работы! При разработке дизайна очень сложно сохранить баланс между эстетичностью и функциональностью. Именно для этого и делается проектирование будущего ресурса. Когда понятен весь функционал сайта, когда ясно, какие меню, с какими пунктами находятся на тех или иных страницах, когда заранее очевидно, какие формы и какого размера должны находиться на страницах, когда известно, что должен видеть пользователь и как он этим будет пользоваться…. Именно тогда поиск эстетического решения становится максимально творческим и при этом остается функциональным.
Дизайн - это не просто рисование красивых картинок! Это - удобство пользования чем-либо, будь то чайник, автомобиль или интернет-сайт! А удобство не может быть рождено исключительно из художественных вкусов. В первую очередь, это - приведение конструктива к эстетике.
Программирование
С программированием всё намного проще с точки зрения заказчика, но значительно сложнее с точки зрения исполнителя! Программирование нельзя увидеть или пощупать! Плодами работы программистов становится уже готовый к использованию сайт и, как правило, это кажется само собой разумеющимся окончанием работ.
Но на самом деле, зачастую, для реализации функционала какой-нибудь, кажущейся на первый взгляд простой функции, может уйти времени больше, чем на всю остальную работу.
Пользователь видит сайт лишь снаружи и ему кажется, что это очень простой сайт. В то время как, внешняя сторона сайта, это только верхушка айсберга. Самое сложное таится внутри сайта. Эту часть видят только администраторы интернет-ресурсов. Это часть называется административной панелью. Она и является подводной частью.
Для изменения пунктов меню, полей в онлайн-формах, изменения контента сайта, настройки ограничения прав пользователей при наличии разных типов пользователей и многого другого нужна удобная, практичная административная панель!
Мы разработали совершенно уникальную административную панель, позволяющую настроить её под любые функции по требованию заказчика!
Благодаря модульной сетке блоки контента и элементы будут располагаться на определённом расстоянии друг от друга, будут иметь удобоваримую ширину, что в дальнейшем визуально будет приятно пользователю и не будет вызывать у него какие-либо неудобства в восприятии сайта.
Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 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/
Надеюсь, что все описанные вещи будут полезны вам в изучении темы веб-дизайна и фронтенд разработки.
Теги:
- html
- css
- веб-дизайн
Разработка сайта — это процесс, состоящий из нескольких последовательных этапов. Заказчик может выбрать любого исполнителя для определенных этапов создания сайта. Впрочем, некоторые фрилансеры или студии предлагают полный пакет своих услуг. Что лучше — решать только заказчику. Можно оплатить полностью всю работу за раз и в итоге получить готовый, функционирующий сайт. А можно заказать работу по частям, то есть один человек делает макет, другой верстает, третий размещает в сети, четвертый раскручивает.
Работу по созданию можно разделить на такие этапы:
— Подготовительный;
— Разработка макета;
— Верстка;
— Программирование;
— Наполнение контентом;
— Раскрутка сайта;
— Администрирование (поддержка) сайта.
К каждому пункту надо подходить со всей ответственностью, ведь от этого будет зависеть качество и посещаемость сайта. Остановимся на этих этапах подробнее:
1. Подготовительный этап
На этом этапе необходимо сформировать основную идею будущего сайта.
- Нужно определить какая цель будет у сайта, например, цель может быть такая: обучение, развлечение, интернет-магазин, продажа каких либо услуг, бизнес сайт, или просто заработок на сайте.
- Затем определяем целевую аудиторию (пол, возраст, образование), то есть для кого будет этот сайт.
- Так же необходимо выяснить какую информацию ожидают посетители, это поможет с определением контента (текстовой информацией) на сайте.
- Затем нужно определиться с технической стороной. Важно учитывать среднее подключение к сети, а так же программным обеспечением.
- Навигация — важный пункт. Все должно быть интуитивно понятно, где и что находится, чтобы пользователь не бродил в поисках нужной информации, а сразу ориентировался на сайте.
Чтобы продумать все информационное наполнение, подобрать материалы, придумать навигацию, можно взять листок бумаги с ручкой, и по пунктам расписать все, что планируется сделать на сайте.
На этом же этапе составляется ТЗ (Техническое задание).
2. Разработка макета
После постановки задач будущего сайта, наступает следующий этап — разработка макета. Ориентируясь по пунктам ТЗ разрабатывается будущий шаблон, или шаблоны, из которых можно выбрать нужный вариант. На данном этапе определяется как будет выглядеть дизайн в целом, какие графические элементы будут использованы, а так же какая структура будет у страниц и какие цветовые решения будут на нем присутствовать.
После чего предоставляется в формате PSD (со всеми слоями) и в виде картинке, тут можно использовать любой формат (JPEG, PNG), чтобы в дальнейшем передать работу в руки верстальщика. Разработка дизайна сайта обычно занимает от нескольких дней, до нескольких недель, очень сложные работы могут проводиться даже месяц.
3. Верстка
Чтобы нарезать готовый макет на части, и в дальнейшем прикрепить на сайт, потребуется верстальщик. Что такое верстка? Это процесс написания HTML и CSS кодов для веб-страниц. Каждый код отвечает за то, чтобы все элементы на странице размещались там, где нужно. Верстальщик должен знать все особенности браузеров, так как для каждого браузера необходим свой подход верстки.
Виды верстки при создании сайта:
- Блочная. Преимущества блочной верстки заключается в том, что она правильно отображает все элементы сайта на разных устройствах (например, на мобильных телефонах). Компактный код, все элементы весят меньше, а значит страница будет загружаться быстро. Из недостатков можно отметить, что при использовании разных браузеров верстка может поплыть.
- Табличная. В табличной верстке можно создавать колонки, таблицы в браузерах выглядят почти одинаково. Недостатки: индексация такого сайта очень медленная, долго загружаются страницы и код такой верстки слишком большой.
4. Программирование
На этом этапе идет разработка механизмов системы администрирования сайта, которая в будущем позволит сотрудникам компании менять/обновлять информацию на сайте. То есть создается рабочая версия сайта, готовая к наполнению текстов и графических материалов.
Язык программирования представляет собой знаковую систему,которая предназначена для описания алгоритмов. Самые популярные языки программирования: Java, C, C++, Delphi, Basic, PHP, Perl, Ruby и др.
После всех этих действий сайт публикуется в сети.
5. Наполнение сайта контентом
Эффективность работы сайта связана с понятием контента, то есть текстовой и графической информации. Иногда материалы для заполнения есть у заказчика, если нет, то он обращается к фрилансерам, для того, чтобы они написали необходимые статьи.
Обычно на сайтах используют SEO-копирайтинг, эта техника создания текстов для сайта, которая учитывается не только особенностью восприятия пользователем, но и необходима для продвижения в поисковой системе. Такие работы имеют свою цену исходя из объема требуемых материалов.
6. Раскрутка сайта
Полностью готовый и наполненный информацией сайт не будет гарантировать приток пользователей. Для того, чтобы на ваш сайт заходили посетители, о нем в первую очередь надо заявить. Большинство пользователей заходят на сайты через поисковые системы, следовательно популярность ресурса будет зависеть от его позиции в рейтинге результата поиска.
Чтобы повысить посещаемость сайта, его в первую очередь надо зарегистрировать в поисковых системах, так же можно сделать обмен ссылками, или баннерами. Чтобы не возится с этим самому, обычно заказывают раскрутку у тех же фрилансеров, которые профи своего дела, они уже прогонят сайт по базам каталогов и сделают все необходимое.
7. Поддержка сайта
Тут следует учесть каким образом будут добавляться или редактироваться материалы и разделы сайта. Возможно потребуется сделать архив статей, куда будут попадать не актуальные новости. Для таких целей выделяется сотрудник, который будет следить за частотой обновления, предоставлять свежую информацию, убирать старую.
Ресурс можно обновлять как самостоятельно, так и при помощи поддержки специалистов, разумеется на платной основе.
