Проблема

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

Задача

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

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

Разработать альтернативный сайт для презентации 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 для корректно отображения на десктопных устройствах.
Антон Чураков - Руководитель ИТ-компании Цифровой Волк
Антон Чураков
Автор публикации Об авторе

Получил образование по специальности «Информационные системы (по отраслям)». Работал программистом в компании, занимающейся разработкой и внедрением системы BPM для автоматизации бизнес-процессов. Опыт работы разработчким ПО с 2016 года по направлениям PHP/Laravel и .NET

ВКонтакте Telegram