Проблема

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

Задача

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

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

Разработать альтернативный сайт для презентации 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-компании "Цифровой Волк"
Разработчик на C# и .NET Core

Да, эта статья уже закончилась. Но ничего страшного, для тебя у нас есть еще пара статей

Ответы на вопросы
Как научиться видеть проблемы в многопоточном коде ПО используемых С#
01.08.2021 Антон Чураков  21 Просмотров

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

Технологии
Что входит в инфраструктуру SaaS. И в чем отличия между SaaS, IaaS и PaaS
31.07.2021 Антон Чураков  80 Просмотров

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

Ответы на вопросы
Нравится мобильная разработка, но боюсь что не найду работу. Стоит ли начать с JS в вебе
30.07.2021 Антон Чураков  20 Просмотров

Вопрос. Мне нравится мобильная разработка на Swift или Kotlin. Но боюсь, что не смогу найти работу когда изучу одну...

Ответы на вопросы
Как научиться правильно проектировать архитектуру будущего приложения
27.07.2021 Антон Чураков  30 Просмотров

Вопрос. Как правильно проектировать грамотную и легко поддерживаемую архитектуру приложения? Ответ....

Ответы на вопросы
Почему принято изначально разрабатывать проект с закрытым кодом
24.07.2021 Антон Чураков  40 Просмотров

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

Технологии
Что такое облачный SaaS сервис и какую пользу он может принести бизнесу
23.07.2021 Антон Чураков  132 Просмотров

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