Проекты web – Лучшие проекты, в которых стоит поучаствовать, чтобы примкнуть к Open Source движению и развить свои навыки. Часть первая. Веб-разработка

Содержание

Концепция web-проекта или почему мы убиваем свои идеи? / Habr

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

Для начала немного статистики…

Важный момент: В статье речь идёт о первых или «зелёных» проектах, которые делают люди не имеющие должного опыта в их реализации.
Сразу скажу, откуда Я взял эти цифры – это моя личная статистика за 1,5 года. Я сам ранее занимался разработкой и реализацией крупных web-проектов для одной российской корпорации, поэтому испытываю профессиональный интерес ко всем новым идеям, которые можно встретить на просторах сети.
В анализе участвовало на момент написания данной статьи 54 проекта. Среди идей проектов встречаются и банальные социальные сети и браузерные MMORPG, ничем не отличающиеся от других, и действительно стоящие и инновационные экземпляры. Но давайте перейдём к цифрам, они сами скажут за себя.
Замечание: доли округлены, статистика представлена в виде среза по 54 проектам, мой собственный проект в статистике не участвует.

Какое состояние проекта на текущий момент?

Активно развивающихся проектов, с более-менее сложенной командой, ровно один (2%). Данный проект существует около года.
Проектов, которые, то работают, то простаивают по тем или иным причинам – 3 (6%). Один из них в таком «вялом» режиме находится уже почти полтора года. Несмотря на низкую скорость развития этих проектов, сказать, что они провалены и не развиваются, нельзя.
Остальные полсотни проектов (92%) «умерли» (проект не реализовался или у него нулевая посещаемость) по разным причинам.

По какой причине был закрыт проект?

4 проекта (7%) действуют. Я привел их в этой диаграмме для получения среза по всем проектам.
У 12 проектов (22%) нет своей идеи. Эти проекты копируют существующие web-проекты с некоторыми изменениями. Среди них социальные сети, много браузерных игр и несколько онлайн-сервисов.

15 проектов (28%) не сумели создать команду или автор проекта не сумел найти людей готовых воплотить задумку в жизнь. Максимальное развитие данных проектов заканчивалось на организации сайта проекта, обычно очень корявого.
5 проектов (9%) были закрыты по причине отсутствия денег на развитие. По крайне мере, так уверяют авторы.
Остальные 18 web-проектов (34%) «канули в лету» по неизвестной мне причине. Авторы этих проектов на попытки связаться с ними никак не реагируют.
В принципе всё предсказуемо, но перейдём к следующему вопросу.

Имеется ли у проекта адекватно оформленная концепция?

Адекватно оформленная концепция есть только у 1 проекта (2%). И угадайте, в каком состоянии находится этот проект? Он активно развивается.
У остальных концепция либо крутится в уме автора, либо выражена в 5-10 предложениях.
Думаю тут и без комментариев всё понятно. Корень зла найден… Теперь предстоит обрубить его и рассказать, что же такое концепция проекта.

Что такое концепция?

Концепция (от лат. conceptio — понимание, система) — определённый способ понимания (трактовки, восприятия) какого-либо предмета, явления или процесса; основная точка зрения на предмет; руководящая идея для их систематического освещения. (Wikipedia)
Говоря по-простому, концепция ­– это система опорных точек построения готового продукта, документально описанная и позволяющая достичь результата без дополнительных данных. Это идея проекта и инструкция, как воплотить эту идею в жизнь, записанная на бумаге или другом носителе информации.
Что бы избежать лишней писанины, Я подготовил шаблон концепции web-проекта. Естественно, Вы можете изменить его под свои нужды. Я, лично, оформляю концепцию по старинке, то есть на бумаге. Например, текущий мой проект выглядит так:

Конечно, концепция проекта — это понятие абстрактное, строящиеся на уровне структуры и идей. Концепция, по своей природе, не должна содержать ничего лишнего, но она тесно переплетена с технической реализацией. Для работы с такой идеальной концепцией нужно хорошее знание технической базы. У людей, которые впервые решили создать свой web-проект, таких знаний обычно нет, поэтому в моём варианте концепции Вы встретите многие критические технические моменты, на которые следует обратить внимание.
Содержание концепции web-проекта с описанием отдельных пунктов

Название проекта
Тут всё понятно. Как корабль назовёшь, так он и поплывёт.

Цель проекта
Вспоминаем дипломную работу в институте и пишем нечто подобное. Это необходимо для четкого понимания того, для чего этот проект затевался. Напомню, цель отображает желаемый результат. Например: создание и реализация браузерной MMORPG «Кирпичи», получения дохода от рекламы и продажа проекта.

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

Участники проекта
В этом пункте ФИО всех, кто участвует в создании проекта. Совет на будущее: используйте свои реальные ФИО, так как иначе потом трудно доказать, что, например, «Зафорд Библброкс», который писал программный код это Вы.

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

Логотип и девиз
Тут тоже всё понятно.

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

Отличительные особенности проекта
Все особенности вашего проекта. Если Вам нечего сюда писать, кроме как — «этот проект лучший, так как мой», то можете на этом заканчивать свою деятельность web-разработчика.

Целевая аудитория
Опишите людей, для которых пишется проект. Например: продавцы леса города Биробиджан.

Техническая часть

  • Сервер и расширения. Например, Apache 2.2+
  • Серверный язык и расширения. Например, PHP 5+
  • СУБД. Например, MySQL 5+
  • Ожидаемая посещаемость. Надо четко понимать, сколько народа сможет обслуживать ваш сервис без тормозов. Например, 3000 человек в день.
  • Трафик. Тут всё просто. Количество людей в день умножаем на средний вес страницы и получаем объём трафика в день.

Общая часть

  • Кодировка. Опишите основные кодировки, используемые в вашем проекте. Совет: используйте кодировку utf-8.
  • Сжатие. Будут ли файлы сжиматься при отправке клиенту.
  • Минимизация. Будут ли файлы минимизироваться (вырезаться лишние пробелы и комментарии) при перенесения на рабочий сервер.
  • Фильтр входящих данных. Очень важно определить в начале какие данные мы будем принимать от клиента. Например, только буквы русского и латинского алфавита, цифры, знаки =_&
  • Ограничение доступа. Опишите директории проекта, к которым доступ пользователям запрещен. Например, доступ к директории scripts запрещён для всех пользователей, кроме root.
  • Правила названий. Даже если Вы пишете проект один, то вначале определите, как будете называть модули, файлы, функции и переменные. Например, для функций использовать нижнее подчеркивание, для переменных выделение заглавными буквами.
  • Правила комментирования. Например, заголовок функции в /* */, разделение функций при помощи /--/
  • Способы взаимодействия разработчиков. Например, icq.

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

Серверная часть
В этом пункте описываются все критические настройки серверной части. Я выделяю следующие:

  • magic_quotes
  • register_globals
  • allow_files

Клиентская часть:

  • Фреймворки и плагины. Например, JQuery
  • Doctype. Например, strict
  • Поддерживаемые браузеры. Например, IE7+, Opera 9+, FF 3.5+
  • Поддерживаемые ОС. Например, только Windows
  • Поддержка телефонов
  • CSS. Например, всё до css3
  • Разрешение экрана клиента. Например, выше чем 1024*768. Прошу обратить внимание на этот пункт. О нём обычно вспоминают в конце работы, когда видят свой «разъехавшийся» сайт.
  • Тип изображений. Например, Jpeg и Gif. Благодаря IE, этот пункт нужно тоже учитывать.

Следующие пункты можете не заполнять, если не понимаете, что это значит.
  • Ajax
  • Делегирование событий
  • CSS Sprites
  • CSS3PIE

СУБД
Относительно СУБД, Я выделяю только одну критическую настройку:
  • Доступность InnoDB

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

Концепт-арт проекта
Здесь приводятся эскизы всех страниц проекта, а не только первой. У меня это выглядит примерно так:

Остальное
Конечно, концепция web-проекта не ограничивается только приведёнными мной пунктами. Сюда нужно добавить детальное описание каждого момента и функциональности проекта.

В заключение

Может получиться, что документации будет не один листок бумаги (у моего текущего проекта 38 листов А4) и писать Вы её будете очень долго (Я писал 2 месяца), но оно этого стоит. Концепция – это ваша опора на пути к реализации вашего проекта. Помните: отсутствие концепции ­– это «убийство» вашей идеи.
И напоследок, общие советы и дополнительные статьи по тематике управления проектами:
Общие советы по написанию концепции:

  • Используйте уникальную идею.
  • Не копируйте и не пользуйтесь ресурсами конкурентов. Иначе получите клон чужого проекта.
  • Используйте свои настоящие ФИО. Почему – описано выше.
  • Пишите по-русски, правильно, с соблюдением семантики языка. Особенно, пункты с описанием проекта. Помните: незнание русского языка очень отрицательно сказывается на бизнесе.
  • Общайтесь с людьми, представляющими интерес для Вас и вашего проекта. Собирайте их контакты, наводите про них справки. Возможно, Вам придётся воспользоваться их услугами.
  • Читайте необходимую литературу, расширяйте свой кругозор. Совет: читайте «с маркером», то есть выделяйте важные части.
  • Составьте дневник проделанной работы. Он позволит четко осознать скорость выполнения работы.
  • Составьте журнал сделанных ошибок. Сэкономит время от повторного наступания на одни и те же грабли.
  • Составьте журнал найденных «багов». Записывайте туда всё, что Вам не нравиться в проекте, а потом исправляйте.
  • Составьте журнал идей. Записывайте туда все, даже безумные, идеи относительно проекта.
  • Тестируйте проект на целевой аудитории.
Дополнительные статьи по тематике «Управление проектами»

Если моё видение концепции web-проекта показалось Вам несколько сумбурным, то можете ознакомиться с несколькими статьями по близкой тематике. Статьи посоветованны хабраюзерами TheFaSTeR, seorez, Napolsky — большое им спасибо.

Update 09.01.11 1:53 Для избежания лишних споров, добавил абзац текста с ответом почему мой шаблон концепции в такой форме.
Update 09.01.11 9:10 В конце статьи добавил абзац текста с ссылками на статьи по управлению проектами. Спасибо хаброюзерам за комменты.

Этапы разработки веб-проекта: сайт и приложение

Основные этапы разработки веб-проекта

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

Основные этапы разработки веб-проекта

Индивидуальность с опорой на шаблон

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

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

Посоветуйся с заказчиком: определение задач

Как правило, веб-разработчик выполняет разработку не для себя и своего бизнеса, а по заказу. Потому важно понимать, какого результата от него ожидают. Как правило, предприниматель, которому нужен веб-продукт, уже давно нарисовал его у себя в воображении (или даже сделал текстовые и графические наброски). Потому стоит выяснить, чего именно он хочет.

Основные этапы разработки веб-проекта

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Как подать материал пользователю?

С этим вопросом подходят к созданию структуры сайта или приложения. В случае если страницы будут связаны нелогично, а UI не будет «дружить» с пользователем — та информация, которую нужно донести, не найдет своего адресата. Чтобы разработчику было легче на этом этапе, были сформированы определенные правила:

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

покажите роботу. Если вашу страницу не найдет поисковая система, то и пользователи не переходят по ней. Потому, важно создавать продукт, максимально видимый для кроулеров. Если структура будет сложной, а путь к основной информации извилистым, то ИИ от Google посчитает сайт плохим. Пусть даже контент и дизайн будут на высшем уровне;

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

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

Этап чистого творчества

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

Основные этапы разработки веб-проекта

Как правило, девелопер работает в одном из профессиональных графических редакторов, например, Adobe Photoshop. Он позволяет создавать на высоком уровне все необходимые составляющие финального UI. Разнообразие графических и декоративных элементов ограничено лишь фантазией автора и требованиями заказчика.

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

Пора верстать!

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

Верстка — это превращение рисунка будущего сайта в код, понятный браузерам — HTML/CSS. Она требует специальных знаний и понимания современных тенденций процесса. Например, сегодня никто не верстает так, как это делали пятнадцать лет назад. Разнообразие девайсов заставляет создавать адаптивный дизайн, который одинаково хорошо отображается на разных устройствах. Это дополнительная задача для верстальщика, ведь он должен учитывать множество аспектов, таких как минимальная/максимальная ширина, пользовательские шрифты, плагины воспроизведения и прочие.

Программирование — и сайты «оживают»

Даже обычный лэндинг будет выглядеть невзрачно в 2018 году, если сделать его статическим. При таком подходе вам никогда не стать девелопером, который выполняет дорогие заказы известных компаний. А делать обычные странички сейчас умеют даже новички, настолько это тривиальная вещь. Статические сайты — это просто страницы, размещенные на сервере, которые полностью загружаются при запросе браузера. Они имеют свои преимущества: не требуют много ресурсов, быстро загружаются, а их разработка не отбирает много средств у заказчика.

Основные этапы разработки веб-проекта

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Сценарий поведения сайта на машине пользователя зависит от скриптов, выполняемых на машине пользователя и на серверной стороне. В первом случае, используются JavaScript технологии, а во втором, один из «серверных» языков. Такая страница реагирует на различные факторы: дата, время, поведение пользователя, различные события. Например, изменение логотипа Google и автоматический выбор языка интерфейса, являются ярким примером динамически построенного сайта.

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

Управление контентом

…производится с помощью специального программного обеспечения — CMS, или Content Management System. Это программы, на которые «натягивают» сайты, чтобы обеспечить быстрое размещение статей, рисунков и видеозаписей. Их разнообразие впечатляет: от сложных систем, то решений для новичка.

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

Например, всем известный WordPress позволяет работать даже тем, кто недавно освоил работу с компьютером. В то же время, программа способна выполнять весьма сложные задачи, которые требуют определенной компетентности. К недостаткам WP, как правило, относят его увесистость. Из-за этого, программа часто тормозит на пользовательских машинах. Но все баги, как правило, быстро исправляются, ведь новые версии выходят регулярно. Последняя, под названием Типтон, вышла чуть меньше года назад.

Более «легковесным» вариантом является CMS Joomla, которую значительно легче освоить. Но и на нее ругаются: низкую функциональность можно исправить лишь бесконечным добавлением плагинов, что неудобно для разработки и создает захламленность компьютера.

Альтернатив очень много, но их обзор — тем для отдельной статьи.

Работа с версиями

Программирование — долгий процесс, для которого нормально ошибаться и исправлять. Но если делать это непосредственно в текстовом редакторе или IDE, то можно быстро потерять основное направление и не узнать причин «лага». Однако, если постоянно создавать версии приложения или сайта, можно продолжить разработку с любого места.

Самой популярным софтом для управления версиями в веб-разработке, является программа Git. Ее преимущества трудно описать в масштабах одного раздела статьи, но опыт девелоперов по всему миру — яркое подтверждение качества.

Время старта

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

Основные этапы разработки веб-проекта

Например, нужно обеспечить защиту сайта от атак (вы же сделали хороший продукт — кто-то захочет его разрушить :) ). Самым известным способом атаки является произвольный запрос злоумышленника в СУБД. Такой способ получил название SQL-инъекция и, несмотря на возраст, до сих пор активно используется.

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

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

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

Этот процесс называется SEO-оптимизацией и включает:

семантическую составляющую. Ключевые слова на сайте, правильность оформления;

внешние факторы: то, насколько страница посещаема, и как часто пользователи сети делятся ссылками на представленный там контент.

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

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

Основные этапы разработки веб-проекта

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее :)

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Смотреть

WebProject — бесплатная программа для создания и сопровождения html-сайтов / Habr

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

Программа представляет из себя некое подобие оффлайновой CMS и собирает html-сайт из описанной структуры страниц и разделов по заданному шаблону, а так же позволяет залить готовый сайт на ftp-сервер.

Кратко перечислю, что позволяет программа:

  • создать несколько html сайтов в рамках одного проекта
  • быстро создать структуру html сайта
  • наполнить страницы сайта используя как html так и упрощенный язык разметки
  • самостоятельно либо автоматически задавать имена для создаваемых html страниц
  • задавать ссылки на страницы в структуре сайта для использования в меню и боковой панели
  • задать заголовок страницы и определить теги META-Description и META-Keywords
  • выбрать дизайн сайта используя доступные шаблоны или создать свой шаблон
  • самостоятельно вносить изменения в html шаблон сайта
  • автоматически создавать меню сайта и боковую панель навигации
  • автоматически создавать html-карту сайта
  • выполнить предварительный просмотр созданного сайта
  • выгрузить созданный сайт на FTP сервер

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

Было бы неуважением к сообществу не поделится некоторыми техническими деталями проекта. Проект написан на Delphi XE, для оформления использовал свои компоненты основанные на библиотеке GR32. Особый интерес был в разработке шаблонизатора. Шаблон сначала парсится и разбивается на блоки в соответствии со структурой дизайна сайта: menu, content, sidebar и внутри определяются блоки для итерации элементов и места для вставок содержания элементов типа {name}, {url} и т.п. По сути это возможности макроподстановки, что иногда позволяет значительно уменьшить количество дублирующегося текста и количество связанных с этим ошибок. В программе есть возможность задать макросы для всего проекта, так и для отдельного сайта. Помимо этого есть возможность делать условные вставки: {?!isLast} | {/?} Все это позволило сделать систему шаблонов легкой для адаптации к уже готовым css-шаблонам.

Хотел бы так же сказать пару слов про аплоад на FTP. В проекте можно держать несколько сайтов, у каждого можно указать свой сервер для публикации. А опубликовать все одной кнопкой. Причем по умолчанию публикуются только изменения, а файлы которые были уже опубликованы, но затем удалены так же удаляются и с FTP-сервера.

Для каждого сайта можно настроить папку куда будет генерироваться сайт и это позволяет провести следующий трюк с созданием отдельной части сайта со своим шаблоном: создаем основной сайт, затем сайт который будет разделом большого сайта, а затем настраиваем папку для генерации сайта-раздела на подпапку основного сайта. Тогда сайт подраздел можно исключить из публикации, при публикации основного сайта файлы подраздела будут выгружены на FTP автоматически. Так у меня сделано на сайте программы с основным доменом bytexpert.ru и разделом bytexpert.ru/webproject

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

Сайт программы: bytexpert.ru/webproject
Прямая ссылка на загрузку программы: bytexpert.ru/webproject/WebProjectSetup.exe

8 идей проектов для практики веб-разработки

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

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

https://codepen.io/freeCodeCamp/pen/aNyxXR

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

https://codepen.io/hezag/pen/ZGxOLX

Классический пример для практики – калькулятор. Только на этот раз совсем как настоящий.

https://codepen.io/freeCodeCamp/pen/rLJZrA

Классическая игра крестики-нолики с режимами игры против компьютера и против другого игрока. Игрок имеет возможность выбрать для игры крестики, либо нолики. Проект поможет для практики с различными алгоритмами, которые нужно реализовывать для ботов.

https://codepen.io/freeCodeCamp/pen/KzXQgy

Небольшой браузер статей для Вики с поиском. Проект поможет для практики работы со сторонними api, алгоритмами и паттернами.

https://codepen.io/freeCodeCamp/pen/wGqEga

Легкая страница, показывающая данные о погоде в регионе пользователя. Этот веб-проект поможет для практики работы со сторонними api и геолокацией. После создания анализа погоды, можно добавить множество других полезных функций для практики.

http://codepen.io/freeCodeCamp/pen/bELRjV

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

https://codepen.io/freeCodeCamp/pen/Myvqmo

Маркетинг вашего проекта: большая подборка полезных сервисов

164 крутых опенсорс проекта для новичков

проекты от А до Я

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

  • Собственное поисковое ядро

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

    Автор/переводчик: Павлов Александр

  • PHP исключения

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

    Автор/переводчик: Сергей Фастунов

  • Пишем высококачественный JavaScript код

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

    Автор/переводчик: Сергей Фастунов

  • Создание регистрации на сайте на PHP + MySQL

    Здесь мы попробуем реализовать самую простую регистрацию на сайте с помощью PHP + MySQL.

    Автор/переводчик: Евгений

  • Небольшое введение в использование плагина jQuery Template

    Наверняка многие читатели знакомы с какой-нибудь серверной системой шаблонов, например, Smarty или Cheetah. Но есть шаблон, который выполняется на стороне клиента - плагин jQuery Template, созданный в недрах Microsoft. В современных условиях усложнения веб приложений его использование имеет ясный практический смысл.

    Автор/переводчик: Сергей Фастунов

  • AJAX с помощью jQuery: Руководство для начинающих

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

    Автор/переводчик: Сергей Фастунов

  • Аспектно-ориентированное программирование в CodeIgniter

    Вы уже слышали о аспектно-ориентированном программировании (AOP)? Данная концепция широко используется при разработке больших систем. Но при применении PHP она редко встречается. Цикл из 3 статей представляет AOP для PHP разработчиков.

    Автор/переводчик: Сергей Фастунов

  • Используем LESS

    CSS - простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой. Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), но в данных уроках мы рассмотрим LESS.

    Автор/переводчик: Сергей Фастунов

  • Строим свою CMS на PHP и MySQL

    Задача построения системы управления содержанием (CMS) может привести в замешательство новичка разработчика PHP. Но не так страшен черт, как его малюют! В данной серии уроков мы построим простую, но полностью работоспособную систему с нуля. В ходе процесса вы научитесь создавать базы и таблицы MySQL, работать с объектами, константами, включениями, сессиями и прочими инструментами PHP. Кроме того мы покажем, как отделять логику приложения от презента

    Автор/переводчик: Евгений

  • Масштабируемая векторная графика

    Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic - масштабируемая векторная графика). В соответствии со спецификацией W3.org SVG определяется как: Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (например, пути, состоящие из прямых линий и кривых), изображения и текст. Несмотря на то, с августа 2011 года SVG вкл

    Автор/переводчик: Евгений

  • От новичка до профи в OpenCart

    Автор/переводчик: Станислав Протасевич

  • Разбираем Underscore.js по косточкам

    Серия уроков по Underscore.js

    Автор/переводчик: Станислав Протасевич

  • Работа с Google Docs средствами PHP

    Сегодня я бы хотел начать серию уроков, где я собрал свои наработки по взаимодействию с Google Docs. В первой части мы рассмотрим как подключиться к Google Docs через PHP и вывести список документов.

    Автор/переводчик: Станислав Протасевич

  • Глобальные переменные WordPress

    Серия статей по глобальные переменные в WordPress.

    Автор/переводчик: Станислав Протасевич

  • Рефакторинг унаследованного кода

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

    Автор/переводчик: Станислав Протасевич

  • Работа с SVG

    Автор/переводчик: Станислав Протасевич

  • Практикум ООП: частная реализация DataMapper

    Практикум ООП: частная реализация DataMapper

    Автор/переводчик: Станислав Протасевич

  • 10 компонент ZendFramework 2, которые пригодятся каждому PHP-разработчику

    10 компонент ZendFramework 2, которые пригодятся каждому PHP-разработчику

    Автор/переводчик: Станислав Протасевич

  • Создание приложения на AngularJS и Firebase

    В данной серии уроков мы задействуем AngularJS и Firebase в создании простого веб приложения. Это будет простая блог-платформа, в которой каждый сможет зарегистрироваться и опубликовать свой пост.

    Автор/переводчик: Станислав Протасевич

  • PHP ООП: Теория

    Теория по PHP ООП

    Автор/переводчик: Станислав Протасевич

  • Основы Ajax + PHP

    Разбор основ Ajax + PHP

    Автор/переводчик: Станислав Протасевич

  • Работа с WP_Query

    Работа с WP_Query для создания собственных запросов.

    Автор/переводчик: Станислав Протасевич

  • Современный PHP: Быстрый старт с PHP 7

    Автор/переводчик: Станислав Протасевич

  • Навстречу Bootstrap 4. Основы работы

    Курс по основам работы с Bootstrap 4.

    Автор/переводчик: Станислав Протасевич

  • Веб-разработка — Википедия

    Материал из Википедии — свободной энциклопедии

    Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 4 февраля 2018; проверки требуют 17 правок. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 4 февраля 2018; проверки требуют 17 правок.

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

    На сегодняшний день существуют несколько этапов разработки веб-сайта:

    В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.

    Создание технического задания
    Составлением технического задания могут заниматься проектировщик, аналитик, веб-архитектор, менеджер проекта вместе или по отдельности.:В случае, когда сайт разрабатывается фрилансером, техническое задание может быть составлено со стороны компании заказчика).
    Работа с заказчиком начинается с заполнения брифа, в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объём сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.:В результате в документе, где описано техническое задание, могут быть следующие основные разделы:
    1. Цели и назначение сайта.   
    2. Аудитория сайта.
    3. Технические характеристики.
    4. Содержание сайта (структура сайта с подробным описанием элементов и функций каждой страницы).
    5. Интерактивные элементы и сервисы (формы обратной связи, поиск на сайте, форум на сайте).
    6. Формы (отправки на почту, подписки на рассылку, обратной связи).
    7. Система управления содержимым (контентом).
    8. Требования к материалам.
    9. Перенос на хостинг.
    Дизайн основной и типовых страниц сайта
    Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
    При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash-дизайн.
    Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Также менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком.
    HTML-верстка
    Утверждённый дизайн передаётся HTML-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает HTML-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.
    Программирование
    Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».
    В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS — должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».
    При программировании сайта специалисту назначаются контрольные точки сроков.
    Завершающим этапом разработки сайта является тестирование
    Процесс тестирования может включать в себя самые разнообразные проверки: вид страницы с увеличенными шрифтами, при разных размерах окна браузера[1], при отсутствии флэш-плеера и многие другие. Также — юзабилити-тестирование.
    Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены. Сроки контролирует менеджер проекта. Также, на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор.
    Размещение сайта в Интернет
    Файлы сайта размещают на сервере провайдера (хостинга) и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.
    Наполнение контентом и публикация
    Сайт наполняют содержимым (контентом) — текстами, изображениями, файлами для скачивания и так далее. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае, если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта. На каждой странице находятся текстовые блоки, они могут быть типовыми (стандартные) и не типовыми. Как правило нетиповой текстовый блок расположен на странице 404.
    К стандартным текстовым блокам относятся:
    • header сайта;
    • footer сайта;
    • навигационная цепочка, или "хлебные крошки".
    Основные элементы текстового блока:
    1. заголовки 1, 2 и 3 уровней;
    2. изображения;
    3. изображения в тексте;
    4. галереи;
    5. текст;
    6. раскрывающийся блок текста, который содержит заголовок;
    7. нумерованные и ненумерованные списки;
    8. таблицы;
    9. файлы для скачивания;
    10. видео.
    Внутренняя SEO-оптимизация
    Связана с некоторыми изменениями самого сайта. SEO-оптимизация начинается с определения семантического ядра. Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, чтобы поисковые системы могли их успешно находить по ключевым словам.
    Внешняя SEO-оптимизация
    Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка сайта. К разработке сайта внешняя SEO-оптимизация не имеет отношения. SEO-оптимизация классифицируется на «белую» и «черную» (такую, после которой сайт за две недели попадает в топ, а потом в бан поисковиков). Настоящая, «белая» SEO-оптимизация, это трудоёмкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.
    Сдача проекта
    Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
    Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

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

    1. ↑ Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.
      Ранее Internet Explorer (версии 6) по-своему трактовал HTML-стандарты (отголоски старой борьбы за лидерство с Netscape). Этот морально устаревший браузер создавал много проблем для веб-дизайнеров. Многие разработчики даже предлагали отказаться от верстки под IE 6, однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутствие на многих пользовательских компьютерах, вынуждало веб-дизайнеров тестировать свои проекты в нём.
    • Марко Беллиньясо. Разработка Web-приложений в среде ASP.NET 2.0: задача — проект — решение = ASP.NET 2.0 Website Programming: Problem - Design - Solution. — М.: «Диалектика», 2007. — С. 640. — ISBN 0-7645-8464-2.
    • Олищук Андрей Владимирович. Разработка Web-приложений на PHP 5. Профессиональная работа. — М.: «Вильямс», 2006. — С. 352. — ISBN 5-8459-0944-9.
    • Гото Келли, Котлер Эмили. Веб-редизайн, 2-е издание. — СПб.: «Символ-Плюс», 2006. — С. 416. — ISBN 5-93286-082-0.

    Как сделать удачный web-проект?! - студия Клондайк

    Частично использовал тезисы с конференции по управлению проектами «Whale Rider 2012» и тенденции сайтостороения с «Сайт 2012», а также мероприятия, сопряжённые с разработкой: YaC 2012, Russian Affiliate Days и другие.

    Михаил БолдыревГен. Директор студии Клондайк

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

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

    Перед тем как начать разбираться с этапами и нюансами разработки проекта, понимаем, что сайт действительно нужен. Многие ошибочно думают — сайт будет приносить прибыль! А вот и не будет! Если нужны продажи, а денег нет — возьмите свой аккаунт в соц. сети, начните выкладывать описание своей услуги или продукции, фотографии и получите больше заказов, чем с простенького сайта, а читать дальше и разбираться тогда уже не обязательно.

    Если вы делаете первый сайт и нечего не понимаете в WEB разработке — приготовьтесь попрощаться со своими вложениями. Поэтому если хотим удачного проекта, первой инвестицией должно стать ваше время.

    Этапы разработки web-проекта

    1. Идея.

    Бизнес идея. Необязательно делать что-то новое, любая идея может быть эффективна, достаточно просто сделать хорошо — чуть лучше, чем у других. Одной идеи не достаточно для успеха проекта. Идея — это ничего, ровно «0» от стоимости проекта.

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

    При e-commerce проектах, чтобы оформить идею, напишите мини бизнес-план. В нём нужно отразить структуру расходов и спрогнозировать будущие доходы. Ключевым моментом будет расчет точки безубыточности. Здесь самое сложное, это определение переменных расходов (рекламная составляющая затрат на одну продажу) — если товар недорогой, возьмите 500р. на один заказ, если дороже 200 $ — 1000р. на продажу.

    2. Подбор компетентной команды разработчиков, которая может реализовать проект в заданные сроки.

    Заказчики сайтов ищут команду для проекта исходя из имеющегося бюджета. Для дешевых сайтов разработчиков ищут по рекомендации. Для дорогих проектов ищут разработчиков по ссылкам с проектов, в тематических рейтингах. Чем больше заказчик, тем больше внимание обращают на «пузомерки». Для средних проектов очень часто важно наличие в портфолио аналогичных проектов. Качество коммерческого предложения является тоже важно. А вот цена не сильно важна.

    50% всей разработки ведется небольшими компаниями, маленькими web-студиями (до 10 человек), но средние компании делают дорогие сайты. Обратите внимание, что 80% сайтов делаются в своем регионе.

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

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

    Команда с хорошими программистами (исполнителями) и плохим менеджером имеет большие шансы на успех, чем наоборот. Партизаны — мешают выполнению проекта, надо их находить и обходить.

    В самом начале нужно понять чего боится заказчик — плохого качества, упущенных сроков или ещё чего. Это должен понимать исполнитель и тогда можно обойти неудачный результат.

    Методологии «скрам», «аджайл», «водопадная модель» или другие не имеют значение, главное цель на результат. В сложных проектах подключается корпоративный архитектор, он устанавливает стандарты и проверяет качество.

    В последующих этапах, на каждом этапе нужно обсуждать с командой результаты и дальнейшее планы.

    3. Подготовка проектной документации.

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

    А после разработки должен быть составлен «протокол несоответствия», это документ с описанием несоответствий договору — почему не уложились в сроки, почему это не сделали и т. п.

    Цитата: Чем больше бумаги, тем чище ж…!

    На заметку:

    • Обязательно закладываем срок на корректировку дизайна!
    • Документацию надо делать совместно с заказчиком, тогда экономим время на согласование. Также в дальнейшем нужно включать заказчика на каждом этапе, общаться на каждом шаге, если возможно, особенно при разработке интерфейса.
    • Чтобы понять заказчика, нужно с ним сблизится и понять что он хочет. Разработка — это игра, а для игры можно пригласить заказчика «попить пива».

    4. Проектирование интерфейса, архитектура проекта

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

    В идеале нужно построить диаграмму пользователей и услуг, и после этого уже можно визуализировать карту путей по сайту. На основании этого можно скорректировать техническое задание.

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

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

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

    5. Начало разработки

    Тезисы:

    • Чем позже нашли ошибку, тем дороже ее исправлять. Иногда компания утрачивает людей для исправления. Свобода действий существует только в начале.
    • Нужно подробно разбирать дальнейшую задачу с исполнителем после каждого действия. Нужна оптимальная критика.
    • У каждого есть свои тараканы — пусть все их покажут вначале. Нужно перед постановкой задачи полностью выслушать исполнителя.

    6. Дизайн

    Тут отдельная и большая история. Если ваш проект не промо-сайт, тогда не заморачивайтесь над дизайном, ибо всё равно не получится — лучше доверьтесь профессионалам. Посмотрите портфолио того дизайнера, кто занимается вашим проектом, с большой долей вероятности у него получится проект, похожий на его предыдущие работы — не хуже и не лучше.

    Подробнее можете почитать тут — основные тенденции дизайна 2012–2013 года.

    7. Вёрстка

    Это процесс превращения дизайн макета в html вёрстку. Как правило на этом этапе уже ничего не меняют, всё решено до этого — на этапе проектирования и дизайна.

    Проверить качество вёрстки тяжело — нужно смотреть после следующего пункта (привязка вёрстки к CMS). Также надо понимать, что вёрстка и реальный сайт могут отличаться, и доводка этапа вёрстки останется на этап тестирования.

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

    Здесь вечный вопрос: ЧТО ВЫБРАТЬ? CMS, фреймворк или с «нуля». Каждое решение для разных проектов.

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

    Мы обычно предлагаем выбрать из ТОП10 CMS, а работаем с лидером из платных CMS — 1 °C-Битрикс, и лидером из бесплатных — CMS Joomla. Если вам предлагают работать на собственной CMS, то бегите оттуда.

    Если ваш проект разрабатывается на фреймворке или с «нуля», то скорее всего вы уже опытный заказчик и работаете с профессиональной командой и то, что здесь написано — вы уже знаете. В общем эту часть не буду описывать.

    9. Наполнение контентом

    Самая важная часть для корпоративных сайтов и интернет магазинов — собственно это и есть сайт в понимании заказчиков. Нужна разработка контентной политики как будущая инструкция — как правильно верстать контент. Иначе сайт через время развалится.

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

    На этом этапе проверяется качество дизайна и вёрстки. Не так важно как выглядит главная страница, важно как выглядит текст на конечной текстовой странице или как выглядит карточка товара.

    10. Пуско-наладочные работы

    Собственно на этом этапе сайт переносится с локального компьютера разработчика на реальный сервер и домен.

    Много зависит от сервера. Если говорить о коробочных CMS и обычных хостингах, то здесь как правило всё либо нормально, либо плохо (бывает хостинг не подходит под требования CMS) — попросите от разработчиков сравнить требования программного продукта и текущие настройки на web-сервере.

    11. Тестирование и исправление багов по результатам тестирования.

    Тестирование начинается на ранних стадиях с прототипов, это позволяет вовремя править ошибки без тяжелых последствий.

    Основной тезис: Нельзя экономить на фазу завершения проекта — тестирование, доводка, документация.

    12. Эксплуатация проекта

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

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

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

    13. Маркетинг, аналитика и поиск эффективности

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

    Воспользуйтесь следующим распределением бюджета на проект: 10% — разработка, 90% — маркетинг.

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

    Поиск эффективности, технологии и новые тенденции:

    • А/В тестирование в web-аналитике. Расширенный функционал visual website optimizer
    • Ассоциированные конверсии = синергия каналов.
    • Надо анализировать на какие страницы уходили пользователи с корзины — и инфо нужно перенести в корзину.
    • Надо делать опросники пользователей: нравится ли наш сайт. Опросники могут быть на уровне страницы или на уровне сессии. Правильный опросник: спросить в начале сессии, а потом в конце дать опрос.

    Меняем контент, в зависимости от человека. Надо на сайте смотреть демографию пришедших и купивших.

    14. Итерационный подход к проекту.

    У сайта нет никогда готовой стадии, сайт никогда не заканчивается. Готовый сайт, это мертвый сайт.

    Проект и продукт. Проект — часть web-продукта с измеримыми сроками и результатом. Продукт — это законченная на определённом этапе разработка, автономно работающая с необходимыми показателями эффективности (KPI)


    ИТОГ: Думаю, по прочитанному объёму вы видите, что необходимых знаний достаточно много, и изучать глубже — это не необходимость. Желаю удачи в разработке. С Уважением Болдырев Михаил.

    Михаил БолдыревГен. Директор студии Клондайк
    Я и моя команда в поисках тенденций 2012-2013 года Сайт 2012

    Отправить ответ

    avatar
      Подписаться  
    Уведомление о