Главная » Блог » Проекты » Создание сайта для АПОУ УР Техникум строительных технологий

Создание сайта для АПОУ УР Техникум строительных технологий

Автор статьи
Аватар
Полночь
Цифровой Волк
Дата публикации:28.06.2018

Содержание проекта

  1. Проблема
  2. Задача
  3. Процесс выполнения работ
  4. Разработка проекта и инструменты
  5. Методология разработки
  6. Полученный результат
Проблема

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

Задача

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

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

Разработать альтернативный сайт для презентации 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 для корректно отображения на десктопных устройствах.
Хотите быть в курсе последних новостей?

Присоединяйтесь к нам в социальных сетях

Достигайте своих целей вместе с Цифровым Волком

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

89635434643 (Нажмите на номер для вызова)
hello@digitalwolf.org 8 963 543 46 43