Дизайн и Верстка Системы Организации Видео Архива (СОВА)

1. Дизайн и Верстка Системы Организации Видео Архива (СОВА)

Пашинцев Иван, С-55
МИЭМ, 16.12.08

2. Постановка задачи

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

3. Система Организации Видео Архива

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

4. Symfony

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

5. Архитектура MVC

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

6. Дизайн

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

7. Дизайн

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

8. Система Организации Видео Архива

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

9. Главная страница

http://sova.auditory.ru/video/
• Содержание:
• Новости
• Последние добавление видео
• Последние добавления событий (в разработке)
9

10. Видеокаталог

http://sova.auditory.ru/video/all
Каталог видео
Неавторизованные
пользователи
Авторизованные
пользователи
Авторизованные
пользователи
Просмотр
информации о
видеофайле
Редактирование
информации о
видеофайле
Групповое
редактирование
10

11. События

http://sova.auditory.ru/event
Список
событий
Неавторизованные
пользователи
Авторизованные
пользователи
Просмотр
информации о
видеофайле
Редактирование,
удаление и
создание событий
11

12. Поиск

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

13. Верстка

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

14. Итоги

Sova.auditory.ru
14

15. Руководство по верстке для Symfony

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

16. Глава 1. Layout и Templates

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

17. Глава 2. Помощники

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

18. Глава 3. Фрагменты кода.

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

19. Глава 4. Конфигурация представления

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

20. Глава 5. Формы

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

21.

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