МИНОБРНАУКИ РОССИИ
федеральное государственное автономное образовательное учреждение
высшего образования
«Санкт-Петербургский политехнический университет Петра Великого»
(ФГАОУ ВО «СПбПУ»)
Университетский политехнический колледж
Утверждаю
Зам. директора по УР
М.Г. Рождественская ___________
«___» ____ 201_ г.
ОТЧЕТ
по учебной практике
Технология публикации цифровой мультимедийной информации
По профессиональному модулю ПМ 03 Выполнение работ по профессии «Оператор электронно-вычислительных и вычислительных машин»
Специальность 09.02.03. «Информационные системы (по отраслям)»
Студента II курса 2293/22 группы
_____________________Петровой Анастасии Сергеевны_________________
(Фамилия, имя, отчество)
Место прохождения практики: УПК, пр. Энгельса д.23
Период прохождения практики
с «10» мая 2016 г. по «04» июня 2016 г.
Руководитель(и) практики:
______________ Клименко Д.Н.
(подпись) (расшифровка подписи)
Итоговая оценка по практике ____________________
Санкт-Петербург
2016 г.
Содержани
федеральное государственное автономное образовательное учреждение 1
высшего образования 1
«Санкт-Петербургский политехнический университет Петра Великого» 1
1. Выбор темы. Сбор материала. Актуализация темы. 3
2. Создание структуры сайта 5
3. Создание макета страниц 6
4. Реализация поиска по сайту 7
6. Добавление видео контента на сайт 9
7. Добавление ссылок 12
8. Медиа-запросы 13
9. Создание выпадающего меню навигации 17
10. Создание Слайдера 22
11. Добавление формы регистрации 26
12. Проверка валидности сайта 30
13. Поисковая оптимизация сайта 33
14. Публикация сайта 34
15. Тестирование сайта в различных браузерах 35
1. Выбор темы. Сбор материала. Актуализация темы. 3
2. Создание структуры сайта 5
3. Создание макета страниц 6
4. Реализация поиска по сайту 7
5. Добавление аудио контента на сайт 8
6. Добавление видео контента на сайт 9
7. Добавление ссылок 12
8. Медиа-запросы 13
9. Создание выпадающего меню навигации 17
10. Создание Слайдера 22
11. Добавление формы регистрации 27
12. Проверка валидности сайта 31
13. Поисковая оптимизация сайта 34
14. Публикация сайта 35
15. Тестирование сайта в различных браузерах 36
Выбор темы. Сбор материала. Актуализация темы.
Сейчас интернет-магазины очень популярны. Поэтому меня заинтересовала эта тема.
Посмотрев запросы на эту тему – можно заметить, что интернет-рестораны довольно востребованы.
Действительно, ведь с использованием Интернет-ресторана можно доставлять еду в два раза быстрее, а люди смогут провести это время с большей пользой.
По моему запросу «Заказ суши» конкурентность не очень большая. (Рис. 1.1)
Рис. 1.1- Список сайтов конкурентов по запросу «Заказать суши»
Создание структуры сайта
При разработке сайта сначала была создана внутренняя структура сайта. (рис. 2.1) Куда в последствии были помещены файлы и материалы (изображения, видео и аудио).
Рис. 2.1 - Внутренняя структура сайта.
А так же прилагается древовидная структура сайта (рис. 2.2).
Рис. 2.2 - Древовидная структура
Создание макета страниц
Все страницы сайта имеют одинаковый дизайн, поэтому макет был создан только для главной страницы (рис. 3.1)
Рис. 3.1 – Макет главной страницы сайта.
Реализация поиска по сайту
Реализация поиска была добавлена на всех страницах сайта (Кроме на страницах регистрации и авторизации на сайте). (рис. 4.1)
Рис. 4.1 - Поиск по сайту
Ниже показан HTML код:
<input type="search" name="q" placeholder="Поиск по сайту" /><input type="submit" value="Поиск" />
Добавление аудио контента на сайт
Аудиозапись под именем «music.mp3» была размещена на странице «Контакты» из локальной папки (рис. 5.1)
Рис. 5.1 - Добавление аудио на странице «Контакты»
Ниже показан HTML код аудио:
<audio controls> <source src="other/music.mp3" type="audio/mp3"> <a href="music.mp3"></a></audio>
Добавление видео контента на сайт
Для сайта было создано небольшое видео (рис. 6.1).
Рис. 6.1 - Видео реклама сайта.
На YouTube был зарегистрирован канал, создан плейлист и конечно же добавлено видео (рис. 6.2, 6. 3, 6. 4).
Рис. 6.2 - создание канала на YouTube.
Рис. 6.3 - создание плейлиста.
Рис. 6.4 - Добавленное видео
С помощью тега <iframe> была добавлена видеозапись на странице «Контакты» (рис. 6.5)
Рис. 6.5 - Добавление видео на странице «Контакты»
Ниже показан код HTML:
<iframe width="560" height="315" src="https://www.youtube.com/embed/lr_6r9JYSxU" frameborder="0" allowfullscreen></iframe>
Добавление ссылок
На страницу «Контакты» были добавлены ссылки на Вконтакте, Почту, YouTube и Facebook (рис. 7.1).
Рис. 7.1 - Ссылки на соц. сети.
Код HTML:
<a class="gif" href="https://vk.com/neein"><img alt="Контакты" src="pics/kontakty/vk.gif"></a>
<a class="gif" href="mailto:nowdoktah@gmail.com"><img alt="Контакты" src="pics/kontakty/gmail.gif"></a>
<a class="gif" href="https://www.youtube.com/channel/UCMUGhBuUF32ZrXOzAxru61w"><img alt="Контакты" src="pics/kontakty/ut.gif"></a>
<a class="gif" href="https://www.facebook.com/profile.php?id=100007476783629"><img alt="Контакты" src="pics/kontakty/fb.gif"></a>
Код CSS:
.gif{width:60%}
Медиа-запросы
Изменено меню и размер текста.
Код CSS:
/* ------------- МЕДИА - ЗАПРОСЫ -----------*/
@media screen and (max-device-width:480px){
/* -------------НАСТРОЙКА ТЕКСТА----------------*/
.y{color:#FFD800;font-size:20px;}
.white-text{font-family:palatino linotype; color:#FFFFFF; font-size:25px;}
.white-text2{color:#FFFFFF;font-size:12px;}
.red-menu{font-size:25px;color:red; }
/* -------------НАСТРОЙКА ТАБЛИЦ----------------*/
table{margin: 10% auto; /* Размещение сайта и его содержимого по середине в 700пикселей */
vertical-align: middle;
width: 800px;}
.table2{ /*Содежимое*/
height: 700px;
vertical-align: middle;
text-align:center;}
.table1{ /*Шапка*/
height: 70px;
text-align:center;
vertical-align: middle
}
.table3{ /*Подвал*/
height: 40px;
vertical-align: middle;
text-align:center;}
#block-top{
width:500px;
height:150px;
margin: 30% auto 0 auto ;
float:top;
border: 1px solid #000;
background-color:#222;
padding: 0px 10px 30px 10px;
vertical-align: middle;
text-align:center;
}
#block-center{
width:500px;
height:400px;
margin: 0 auto 3% auto;
float:center;
border: 1px solid #000;
background-color:#777;
padding: 0px 10px 10px 10px;
vertical-align: middle;
text-align:center;
}