Практическое занятие 16 Тема: Поисковые системы. Почтовые серверы. Облачные технологии
Задание 1. Создайте логотип компании или программного продукта. Для рисования используйте векторный графический формат SVG.
Изучите примеры оформления SVG-иллюстраций на Web-документах.
Перейти. SVG — Scalable Vector Graphics.
Перейти. Структура SVG-файла.
Дополнительные ссылки смотрите в списке источников.
Разместите рисунок и код к нему на отдельной странице сайта.
Опубликуйте SVG-рисунок в 4-х вариантах: 1) встроенным в HTML-код страницы сайта, 2) в виде ссылки на внешний SVG-файл, 3) как фоновый элемент в CSS, 4) сконвертированный в растровый формат.
Сравните качество рисунков в растровом и векторном формате при различных масштабах, от минимального до максимального возможных, 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.
План занятий 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
Изучите систему математической анимации по следующим ссылкам. Создайте несколько примеров анимации математических понятий, законов или решений задач.
youtube.com. Manim tutorial | Introduction: What is Manim?
Скачать. tutorial_english.zip
github.com. AnimationsWithManim
Источники
Основные
Перейти. SVG Visual Cheat Sheet.
Перейти. SVG cheat sheet.
Перейти. SVG — Scalable Vector Graphics.
Перейти. Структура SVG-файла.
Перейти. SVG – Scalable Vector Graphics.
Перейти. Рисунки SVG чистым кодом.
Перейти. SVG: группировка и переиспользование элементов.
Перейти. Рисуем стрелки при помощи Marker.
sourceforge.net: XAMPP - Browse /XAMPP Windows at SourceForge.net
apachefriends.org: Download XAMPP
ipipe.ru: Установка XAMPP. Пошагово: скачивание, установка, запуск.
artlebedev.ru: .ру/Ководство студия дизайна Артемия Лебедева
html5book.ru: HTML, CSS, JavaScript и jQuery
htmlbook.ru: Для тех, кто делает сайты
Роботландский университет: Дуванов А.А.
robotlandia.ru: Роботландский университет Дуванов А.А.
ucoz.ru: Роботландский университет Дуванов А.А.
css.manual.ru: HTML, CSS
codepen.io: Онлайн-редактор кода HTML, CSS, JavaScript
jsfiddle.net: Онлайн-редактор кода HTML, CSS, JavaScript
nic.ru: Whois сервис
reg.ru: Регистрация доменов
Дополнительные
w3schools.com: W3.CSS Template. Примеры дизайна сайтов.
ruseller.com: Топ 10 бесплатных хостингов
ruseller.com: 20 ресурсов для прототипирования
ruseller.com: Простая техника эффекта параллакса
ruseller.com: 28 сайтов с эффектом параллакса
thisstartupdoesnotexist.com: Neural network web designer
thiscatdoesnotexist.com: Neural network cats photo-artist
thispersondoesnotexist.com: Neural network people photo-artist
hi-tech.mail.ru: Нейросеть начала создавать «фейковые» сайты
hi-tech.mail.ru: Нейросеть научилась создавать фотографии фейковых котов
hi-tech.mail.ru: Нейросеть научилась создавать фотографии несуществующих людей
emosurf.com: Мы готовим детей к позавчерашнему миру
pravmir.ru: Людмила Петрановская: Мы готовим детей к позавчерашнему миру