Проблема

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

Задача

В связи с этим, руководство «Техникума строительных технологий» обратилось ко мне за созданием сайта.

И была поставлена задача:

Разработать альтернативный сайт для презентации 9 перспективных направлений подготовки

 

Процесс выполнения работ

Для достижения поставленной задачи я определил следующий план работ:

  1. Изучить материалы по всем направлениям подготовки, которые опубликованы на официальном сайте
  2. Придумать, разработать и сверстать дизайн сайта
  3. Адаптировать сверстанный дизайн под библиотеку fullPage.js
  4. Разработать отдельную мобильную версию сайта

 

Разработка проекта и инструменты

Для разработки проекта были выбраны следующие инструменты:

  1. Язык программирования PHP — для серверной части проекта
  2. Библиотеку JQuery — для клиентской части
  3. Bootstrap 4 — для использования заготовок компонентов (кнопок, сетки, полей и других элементов)
  4. Asana — менеджер для управления задачами по проекту
  5. fullPage.js — библиотека для постраничной прокрутки сайта

 

Первый блок сайта

Нажмите на изображение, чтобы увеличить его

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

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

 

Блок «Информация о техникуме»

Видео презентация «Техникума строительных технологий»

Блок «Информация о техникуме»

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

 

Блок выбора специальности

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

Специальности ТСТ - Цифровой Волк

Выбор направления подготовки

 

Меню сайта

Основное меню сайта

Меню сайта

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

При создании меню необходимо сделать так, чтобы оно не занимало верхнюю часть экрана. Поэтому его разместил в левом углу в виде «гамбургера»

 

Блоки с описанием каждой профессии

При составление технического задание одним из требований было: разделить каждый блок специальности на дополнительные разделы

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

Было 2 решения для разделения на блоки:

  1. Сделать дополнительные блоки «Чему научат» и «Кем работать» под основным (описание специальности), но тогда сайт получился бы слишком длинным и неудобным.
  2. Используя возможность библиотеки fullPage.js решил реализовать горизонтальную прокрутку для дополнительных блоков. Благодаря этому, сайт стал более «компактным» по длине и удобным в навигации по дополнительной информации о каждой профессии. Навигация по горизонтальным блокам, осуществляется с помощью стрелок слева и справа.

Без сомнений нами был выбран второй вариант.

Отдельная специальность - Цифровой Волк

Описание специальности

Кем работать ТСТ - Цифровой Волк

Раздел «Кем работать»

 

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

Заказчик попросил, чтобы мы ушли от «прямолинейности», и мы предложили данный вариант дизайна

 

Мобильная версия сайта

Так же отдельно разработал мобильную версию сайта и разместили на поддомене m.tstudm.ru

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

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

 

Взаимодействие с Клиентом

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

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

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

 

Отзыв о работе

Кейс: Создание презентационного сайта для АПОУ УР «Техникум строительных технологий», изображение №8

Отзыв директора АПОУ УР «ТСТ»

Полученный результат

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

  1. Изучил всю необходимую информацию. Не только по направлениям подготовки, но и сопутствующую документацию о техникуме.
  2. Придумал и разработал дизайн основной версии сайта и мобильной версии сайта
  3. Адаптировал дизайн под библиотеку fullPage.js для корректно отображения на десктопных устройствах.


Антон Чураков
Автор публикации
Антон Чураков
Руководитель IT-компании "Цифровой Волк"

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

Нужна разработка похожего проекта?

Узнайте, какие преимущества и выгоды получите при сотрудничестве с моей командой, и какой финальный результат ожидает Вас после разработки и запуска проекта

Подробнее о разработке

Еще материалы из данной категории

Стоит ли внедрять и использовать KPI компаниям в 2021 году
Система KPI известна в любой компании, которая думает о своем будущем. И в любой компании, где она внедрена и применяется, найдутся скептики, сомневающиеся в ее эффективности. Особенно сегодня, когда COVID 19 негативно повлиял на все стороны нашей...
Участие в бизнес-премии Magic People IT-Channel Awards 2020
В начале года, мы вместе с командой впервые принимали участие в бизнес-премии Magic People 2020 проводимой компаний Axoft. Презентовали проект для регионального заказчика — сети АЗС. С новой онлайн системой по работе с топливными картами, в номинации...
В чем заключается сила и слабость свободного программного обеспечения
30 лет назад студент Хельсинкского университета Линус Торвальдс выпустил ядро Linux с открытым кодом и привлек помощников для разработки своей операционной системы. С годами свободное и открытое ПО уверенно завоевало место под солнцем...
Станут ли CIO влиятельней CFO, COO, CMO или нет
Как наша жизнь заметно изменилась во время распространения COVID-19, так и приоритеты в бизнесе не остались прежними. Среди тех, чей профессионализм помог компаниям удержаться на плаву, оказались ИТ-директора (CIO) – технологические лидеры. Будет ли...