15 практика

Практическое занятие 15 Тема: Сервисы интернета

Задание 1.

• 1. Структура сборки web-сервера XAMPP. Запишите кратко в отчете следующую информацию:

     1. • Для чего предназначено ПО XAMPP?

        • Какие аналоги XAMPP существуют?

        • Запишите перечень программ-компонентов, из которых состоит XAMPP.

        • Для чего предназначен каждый компонент XAMPP?

  2. Локальный Web-узел в сборке web-сервера XAMPP. Создайте папку с названием вашего сайта, на английском языке, без пробелов на диске C: в папке:

  3. D:\xampp\htdocs\

  4. Например, для сайта test1 должна быть создана папка

  5. D:\xampp\htdocs\test1\

  6. Проверьте доступ к Вашему локальному сайту, набрав в адресной строке браузера, вместо test1 - название Вашего сайта:

  7. http://localhost/test1

  8. Снимок экрана с браузером поместите в презентацию. На снимках с окном браузера должен быть адрес сайта в адресной строке браузера.

  9. Главная страница локального Web-узла. Создайте в папке сайта главную страницу

  10. index.htm

  11. Проверьте доступ к Вашему локальному сайту. Снимок экрана поместите в презентацию. На снимках с окном браузера должен быть адрес сайта в адресной строке браузера.

  12. Второй домен локального Web-узла. Создайте второй локальный сайт в XAMPP. Например, для сайта test2 должна быть создана папка

  13. D:\xampp\htdocs\test2\

  14. Создайте в этой папке главную страницу

  15. index.php

  16. по примеру:

  17. Перейти

  18. Проверьте доступ к Вашему локальному сайту.

  19. Исходный код главной страницы в форматах php и htm, загруженной в браузер, разместите в отчете. Сравните эти коды и выводы запишите в отчет.

  20. Для вывода в браузере исходного кода Web-страницы нажмите сочетание клавиш Ctrl+U.

  21. На снимках с окном браузера должен быть адрес сайта в адресной строке браузера.

  22. На втором локальном сайте опубликуйте выполненные на предыдущих занятиях упражнения по Web-дизайну.

  23. Для каждого упражнения отведите отдельную страницу. На главной странице сайта создайте оглавление сайта с гиперссылками. Исходный код главной страницы в формате php и htm, загруженной в браузер, разместите в отчете. Сравните эти коды и выводы запишите в отчет.

  24. На снимках с окном браузера должен быть адрес сайта в адресной строке браузера.

  25. Пример оглавления сайта:

• • 1. 01 dogs  02 lists  03 anchors  04 text  05 text css 06 cats 07 music  08 html5 audio video  09 tables  10 blocks  11 javascript 

Задание 2. 

• 1. Практическая работа 6. Использование CSS в шаблоне документа cats.htm

  2. Перейти. Веб-дизайн: практикум

  3. Скачать. Шаблоны сайтов для практикума по веб-дизайну.

  4. Опубликовать сайт на Web-хостинге. Организовать систему навигации с главной страницей сайта.

План занятий 16 - 19 1. Эффект параллакса 2. Интеллект-карта 3. codepen.io 4. Canvas: http://ifizmat.000webhostapp.com/canvas/lab-01.htm 5. FlexBox 6. CSS: template

Источники

Основные

• 1. sourceforge.net: XAMPP - Browse /XAMPP Windows at SourceForge.net

  2. apachefriends.org: Download XAMPP

  3. ipipe.ru: Установка XAMPP. Пошагово: скачивание, установка, запуск.

  4. artlebedev.ru: .ру/Ководство — студия дизайна Артемия Лебедева

  5. html5book.ru: HTML, CSS, JavaScript и jQuery

  6. htmlbook.ru: Для тех, кто делает сайты

  7. Роботландский университет: Дуванов А.А.

  8. robotlandia.ru: Роботландский университет Дуванов А.А.

  9. ucoz.ru: Роботландский университет Дуванов А.А.

  10. css.manual.ru: HTML, CSS

  11. codepen.io: Онлайн-редактор кода HTML, CSS, JavaScript

  12. jsfiddle.net: Онлайн-редактор кода HTML, CSS, JavaScript

  13. nic.ru: Whois сервис

  14. reg.ru: Регистрация доменов

Дополнительные

• 1. w3schools.com: W3.CSS Template. Примеры дизайна сайтов.

  2. ruseller.com: Топ 10 бесплатных хостингов

  3. ruseller.com: 20 ресурсов для прототипирования

  4. ruseller.com: Простая техника эффекта параллакса

  5. ruseller.com: 28 сайтов с эффектом параллакса

  6. thisstartupdoesnotexist.com: Neural network web designer

  7. thiscatdoesnotexist.com: Neural network cats photo-artist

  8. thispersondoesnotexist.com: Neural network people photo-artist

  9. hi-tech.mail.ru: Нейросеть начала создавать «фейковые» сайты

  10. hi-tech.mail.ru: Нейросеть научилась создавать фотографии фейковых котов

  11. hi-tech.mail.ru: Нейросеть научилась создавать фотографии несуществующих людей

  12. emosurf.com: Мы готовим детей к позавчерашнему миру

  13. pravmir.ru: Людмила Петрановская: Мы готовим детей к позавчерашнему миру