16 практика

Практическое занятие 16 Тема: Поисковые системы. Почтовые серверы. Облачные технологии 

Задание 1. Создайте логотип компании или программного продукта. Для рисования используйте векторный графический формат SVG.

• 1. Изучите примеры оформления SVG-иллюстраций на Web-документах.

  2. Перейти. SVG — Scalable Vector Graphics.

  3. Перейти. Структура SVG-файла.

  4. Дополнительные ссылки смотрите в списке источников.

  5. Разместите рисунок и код к нему на отдельной странице сайта.

  6. Опубликуйте SVG-рисунок в 4-х вариантах: 1) встроенным в HTML-код страницы сайта, 2) в виде ссылки на внешний SVG-файл, 3) как фоновый элемент в CSS, 4) сконвертированный в растровый формат.

  7. Сравните качество рисунков в растровом и векторном формате при различных масштабах, от минимального до максимального возможных, Web-страницы в браузере. Запишите выводы в отчете.

Пример 1.   <svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     viewBox="0 0 500 500">     <!-- SVG code here  -->     <circle cx="25" cy="45" r="22" fill="rgba(255, 255, 0, 0.5)" stroke="orange" stroke-width="5"/> </svg>

Задание 2. 

• 1. Практическая работа 7. Использование CSS в шаблоне документа img.htm «Музыка XX века»

  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 7. SVG 8. MAnim

Дополнительное задание

Изучите систему математической анимации по следующим ссылкам. Создайте несколько примеров анимации математических понятий, законов или решений задач.

• 1. youtube.com. Manim tutorial | Introduction: What is Manim?

  2. Скачать. tutorial_english.zip

1. github.com. AnimationsWithManim

Источники

Основные

• 1. Перейти. SVG Visual Cheat Sheet.

  2. Перейти. SVG cheat sheet.

  3. Перейти. SVG — Scalable Vector Graphics.

  4. Перейти. Структура SVG-файла.

  5. Перейти. SVG – Scalable Vector Graphics.

  6. Перейти. Рисунки SVG чистым кодом.

  7. Перейти. SVG: группировка и переиспользование элементов.

  8. Перейти. Рисуем стрелки при помощи Marker.

  9. sourceforge.net: XAMPP - Browse /XAMPP Windows at SourceForge.net

  10. apachefriends.org: Download XAMPP

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

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

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

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

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

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

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

  18. css.manual.ru: HTML, CSS

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

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

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

  22. 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: Людмила Петрановская: Мы готовим детей к позавчерашнему миру