Дизайн и Верстка Системы Организации Видео Архива (СОВА) МИЭМ, Пашинцев Иван, С-55

2 Постановка задачи Создать дизайн для Системы Организации Видео Архива На основе созданного дизайна сверстать веб- интерфейс СОВА Написать руководство по верстке под фреймворк Symfony

3 Система Организации Видео Архива СОВА – рабочий инструмент, предназначенный для редактирования информации о видео и связанных событиях. СОВА подразумевает ограниченный доступ для неавторизованных пользователей – им доступен лишь просмотр информации о видео и событиях. Веб-интерфейс системы написан под фреймворк Symfony

4 Symfony Symfony – фреймворк, написанный на PHP и использующий архитектуру MVC

5 Архитектура MVC MVC – Model-View-Controller Controller (Поведение) View (Представление) Model (Модель) Model (Модель)

6 Дизайн Все страницы выполнены по одной структуре: Header-Sidebar-Content-Footer Sidebar Header Footer Content Меню Логотип Поиск Авторизация Меню Логотип Поиск Авторизация Статистика архива Дополнительные меню Статистика архива Дополнительные меню Счетчики Ссылки на трекер Счетчики Ссылки на трекер Основной контент

7 Дизайн Единый для всех страниц шаблон:

8 Система Организации Видео Архива Веб-интерфейс СОВА Веб-интерфейс СОВА Видеокаталог События Главная страница Поиск

9 Главная страница Содержание: Новости Последние добавление видео Последние добавления событий (в разработке)

10 Видеокаталог Каталог видео Редактирование информации о видеофайле Групповое редактирование Просмотр информации о видеофайле Неавторизованные пользователи Авторизованные пользователи Авторизованные пользователи

11 События Список событий Редактирование, удаление и создание событий Просмотр информации о видеофайле Неавторизованные пользователи Авторизованные пользователи

12 Поиск Отображает найденные по запросу файлы

13 Верстка Для верстки была применена блочная верстка Верстка делалась с учетом особенностей фреймворка Symfony

14 Итоги Sova.auditory.ru

15 Руководство по верстке для Symfony Содержит 5 глав: 1.Layout и Templates 2.Помощники 3.Фрагменты кода 4.Конфигурация представления 5.Формы

16 Глава 1. Layout и Templates Рассматривает работу с шаблонами. 1.Layout – главный шаблон (подложка) 2. Templates – шаблоны, содержащие основной контент

17 Глава 2. Помощники Рассматривает работу с помощниками в Symfony Помощники - это PHP-функции, возвращающие HTML- код и использующиеся в шаблонах.

18 Глава 3. Фрагменты кода. Для облегчения написания кода в Symfony существуют 3 вида фрагментов: 1. Partials – обособленные фрагменты 2. Slots - слоты 3. Components - компоненты

19 Глава 4. Конфигурация представления Под представлением понимается слой view в Symfony. Благодаря гибким настройкам мы можем подключать css, javaScript и мета-теги силами Symfony.

20 Глава 5. Формы Symfony позволяет полностью изменять формы, работая с ними на уровне представления через шаблоны.

21 Ваши вопросы? Спасибо за внимание