Разработка сайта семейного клуба Продленка

---

для любителей видео - ссылка на презентацию https://www.youtube.com/watch?v=vknynIWkMu8

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

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

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

Типология сайта

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

Система управления сайтом и конструирование

Для того чтобы в дальнейшем клиенты могли без посторонней помощи самостоятельно обновлять, редактировать и управлять контентом на сайте будет нужна система управления сайтом, так называемая CSM, и я предлагаю Modx Revo последней версии. Выбор за ней я оставляю, так как именно этот вариант позволяет в наибольшей степени контролировать исходный HTML код.

Функционал сайта

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

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

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

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

Обратная связь может быть организована через чат или же через почту с помощью ссылки или формы обратной связи…

Стилевое решение

светлый фон, строгий, хорошо читаемый шрифт основного текста, яркие акценты. Шаблоны страниц – дизайн и оформление на усмотрение разработчика.

Адаптивность.

Сайт использует адаптивную сетку Bootstrap для возможности «подстройки контента» под мобильное устройство, на котором его просматривают.

Контент сайта

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

Этапы разработки сайта

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

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

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

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

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

---

Просмотров: