# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
без видео |
|||
На этом уроке мы познакомимся. Меня зовут Волосатов Евгений Витольдович или «Игромистр». А как зовут тебя? Открой блокнот, напиши там своё имя, фамилию и коротко о себе. Затем сделай скриншот и прикрепи к отчёту за этот урок. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 4 дня 1 час. 53 мин. [Показать отчёт] Научился: Научился с апреля здесь многому. В код смотрю уже не как баран на новые ворота. Верю в силу систематических занятий и возможность доползти до вершины Фудзиямы. (Фудзия́ма, Фу́дзи (яп. 富士山 Фудзисан (инф.)) — действующий стратовулкан на японском острове Хонсю в 90 километрах к юго-западу от Токио. Высота вулкана — 3776 м (самая высокая точка в Японии). В настоящее время вулкан считается слабо активным, последнее извержение было в 1707—1708 году.) Сложности: UPD 5 июля 2018. 9913. vip не устроило видео - удалил. Самым сложным было смотреть на экран своего ноута, когда подключенный Игромистр за 15 секунд решил ошибку, с которой я боролся 15 часов безуспешно ))) |
|||||
2 | Каким будет мой сайт |
без видео |
|||
На какую тему ты хочешь создать сайт? Что будет на этом сайте? Для кого будет этот сайт? Ответь на вопросы и нарисуй схему первой страницы своего сайта. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 5 час. 18 мин. [Показать отчёт] Научился: Тема: Гидрография реки Вятка Название: http://www.rekavyatka.su Для кого сайт: для водномоторников Кирова и области. Состояние дна реки с начала девяностых годов систематически не мониторится. Выше порта Киров (по факту одно название от некогда работающего предприятия лесосплава и пассажирских перевозок) навигации нет вообще. Кроме нас, лодочников, там никто не ходит. А в былые времена был рейс г.Вятка - Чепца - г.Слободской. Как в "Голубом океане" - непаханное поле для исследований. Эхолот Lowrance Mark 4 CHIRP до введения против России санкций замечательно подгружал треки с глубинами по Вятке в СШАшный сайт, но по приходу Барака Обамова эту лавочку для пользователей РФ прикрыли. Зайти на сайт могу, новые треки подгружать - no way! "Insight Genesis cannot process the sonar log file: "Chart 29_05_2016 [0].sl2" due to restrictions in the geographic location contained in this log. Please visit the Questions and Answers tab to see where Insight Genesis is currently available. We apologize for the inconvenience." Железо простаивает, давно была мысль самому организовать привязку треков с глубинами к картам реки. Поскольку Вятка не относится к промышленно судоходным рекам (привет от невидимой руки рынка), конкуренции не наблюдается. Надо попробовать свои силы. Сложности: Найти старые треки и учётки от Insight Genesis, заброшенные в дальний ящик после введения ограничений на загрузку. Видеообзор: IbxhYfT3AmU |
|||||
3 | Второй подход к эскизу |
без видео |
|||
Чтобы сделать хороший сайт - нужно чётко представлять, как он выглядит. Для этого нужно его нарисовать несколько раз. Сделай ещё ДЕВЯТЬ рисунков своего сайта. Каждую новую схему рисуй не подглядывая в предыдущие. Для отчёта за этот урок нужно приложить фотографию девяти рисунков своего сайта. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 3 час. 52 мин. [Показать отчёт] Научился: Ох и попыхтел елозя мышкой... Видеообзор: Xe8LqZtwhLo |
|||||
4 |
![]() |
2 теста |
|||
На этом уроке мы создадим простейший HTML документ. И сделаем это несколько раз подряд, чтобы исключить любые сложности при выполнении этого базового действия. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 2 час. 59 мин. [Показать отчёт] Научился: Две минуты, две секунды. Курс "Секундомер", снова здоров0! )) |
|||||
5 |
![]() |
|
|||
На этом уроке мы познакомимся со следующими терминами: WWW, IP-адрес, Доменное имя, DNS, Сервер, Хостинг, VDS/VPS, Прокси, FTP, Браузер, HTTP, SSL, Веб-страница, HTML, CSS, Flash, JavaScript, PHP, MySQL, Куки. На видео я даю простые, понятные, но не очень точные определения каждого термина. Более точные определения доступны в презентации: На русском языке | На литовском языке Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 58 мин. [Показать отчёт] Научился: JavaScript - язык программирования для веб-страниц без применения компиляции. Позволяет применять команды к разметке страницы без перезагрузки этой самой страницы. JavaScript исполняется на клиентской машине, не на сервере. PHP - скриптовый язык для создания веб-страниц со слабой типизацией, большой свободой для выбора средств веб-разработчиком. Объектно-ориентированное программирование прикрутили к нему в последних версиях, однако языком программирования не является. |
|||||
6 |
![]() |
без видео 2 теста |
|||
Проверим, как вы поняли значение терминов, которые мы рассмотрели на прошлом уроке. 1. Бросьте кубик, чтобы выбрать число от 1 до 4 (если выпало 5 или 6 - перебросьте). 2. Напишите, какой вариант вам выпал. 3. Сформулируйте своими словами значение каждого из 4 терминов выбранного варианта. 4. Выберите ещё один термин из других вариантов, по желанию и опишите его назначение тоже. За каждое определение вы получите от 0 до 2 баллов, максимум - 10 баллов. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 29 мин. [Показать отчёт] Научился: 1 HTML hypertext markup language - язык гипертекстовой разметки веб-страниц, применяется для создания сайтов. Отвечает за то, как выглядит страница в статичном состоянии. Веб-страница описывается в текстовом формате с расширением .html Структурируется блоками html, head, body, описывается тегами, заключаемыми в угловые скобки. Поддерживает каскадные таблицы стилей, как в теле самого файла, так и подключаемыми извне. Вывод пользователю - через браузеры. CSS каскадные таблицы стилей cascade stylesheet, текстовое описание форматирования, размерности, шрифтов, цветовой схемы сайта, применяемые к странице, описанной на HTML. Описывают элементы сайта, выделяемым по классам, идентификаторам. Может быть частью HTML-страницы, либо отдельным файлом подключаемым через тег link. JavaScript язык программирования веб-страниц, отвечающий за поведение сайта. Не имеет строгой типизации, исполняется на стороне клиента в браузере. К языку программирования Java отношения не имеет. Структурируется функциями, применяется в HTML коде с тегами <script></script>. Чтобы на странице тыкалось, кликалось, бахало, моргало, листалось, реагировало на действия пользователя - применяем скрипты JavaScript. PHP язык программирования, написанный на языке программирования Си, предназначенный для придания функциональности веб-страницам. Работает на стороне сервера, интерпретируется там же в HTML-код и после этого отправляется клиенту в браузер. Строгой типизации не имеет. Методы называются функциями. Переменные именуются со знака $. |
|||||
7 | Красивые стихи |
без видео |
|||
На этом уроке мы создадим страницу с красиво оформленным стихотворением. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 0 мин. [Показать отчёт] Научился: Вспомнил многие нетленки, применил теги к тексту. Литература у нас мощнейшая. |
|||||
8 |
![]() |
без видео 2 теста |
|||
На этом уроке мы познакомимся с тегом TABLE для организации таблиц. Самостоятельное задание - создать таблицу с расписанием своих уроков. Для создания страницы рекомендую использовать Online HTML Editor Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 59 мин. [Показать отчёт] Научился: рисовать таблицы на HTML. |
|||||
9 |
![]() |
без видео 2 теста |
|||
На этом уроке мы понакомимся с таблицами. Нужно создать 10 таблиц умножения, начиная от размера 1х1, заканчивая 10х10. Необходимо сделать скриншот каждой таблицы, чтобы потом можно было создать анимированный gif. Разместить на экране все таблицы и сделать скриншот. * Если умеешь программировать - напиши программу, * которая создаст таблицу умножения размером NxN. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 8 мин. [Показать отчёт] Научился: Задумываешься о пользе циклов при написании такой повторяющейся разметки. |
|||||
10 |
![]() |
без видео 1 тест |
|||
Сделать таблицу с ресторанным меню. Для каждого наименования вывести: №, фото, название, цену, форму для количества. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 мин. [Показать отчёт] Научился: Разметка это любопытно. |
|||||
11 |
![]() |
без видео |
|||
Проверить HTML файл с ресторанным меню на корректность, используя валидатор: https://html5.validator.nu/. Исправить все возможные ошибки. Написать в отчёте, какая ошибка была самой сложной. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 23 час. 25 мин. [Показать отчёт] Научился: Раз пять переделывал. В итоге на пятый раз "снова-да-лад0м" валидатор сменил гнев на милость. Тема вообще незнакомая, а тут ещё и видеоурока нема ) |
|||||
12 |
![]() |
без видео |
|||
На этом уроке мы нарисуем 12 разноцветных квадратов, которые разделены на прямоугольники. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 5 мин. [Показать отчёт] Научился: Елозить мышкой и копипастить уменьшенные шириной столбцы. Делал столбцы на глаз равными строкам, когда же стал выделять семь-на-семь, узрел несоответствие размеров. Гугл показал, что размерность строк и столбцов в икселе задается в разных единицах. Новость, однако! |
|||||
13 |
![]() |
без видео |
|||
На этом уроке мы нарисуем большие буквы из кубиков. Для этого нам потребуется таблица, стили, классы. Удобный онлайн HTML редактор Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 49 мин. [Показать отчёт] Научился: Благодаря отчету Tekashnik-a узнал о таком суперудобном редакторе как Brakets. С его помощью и ваял эпическое полотно с зажигающимися неоновыми огоньками. Спасибо за науку. |
|||||
14 |
![]() |
без видео 2 теста |
|||
На этом уроке необходимо создать таблицу 7х7 с объединёнными ячейками на основе любых двух квадратов из задания «Морской Бой». Приложить скриншот HTML-кода и результата для каждого из выбранных квадратов. Используйте онлайн HTML редактор Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 5 час. 25 мин. [Показать отчёт] Научился: colspan == объединяем колонки rowspan == объединяем строки |
|||||
15 |
![]() |
без видео |
|||
Используя HTML таблицы создать Аттестат успеваемости по указанному примеру. В аттестат впишите СВОИ данные. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 19 мин. [Показать отчёт] Научился: Понял суть классов (хранилища настроек), роуспан == строки в одну ячейку, но не забудь удалить сдвинутые от твоей работы локтями. Колспан - та же история, но с колонками, также если объединяешь - расползутся вширь, не забудь удалить лишние. |
|||||
16 | 5. Kurortavimas |
без видео 1 тест |
|||
Кто любит путешествовать? На этом уроке необходимо создать форму туроператора для курортной заявки. Нужно придумать и оформить форму, как полагается. Обязательно использовать следующие теги: form input type="text" input type="radio" select textarea input type="checkbox" input type="submit" Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 34 мин. [Показать отчёт] Научился: Радиокнопки, текстариа, сабмиты, селекты - всё это в теории изучалось и прежде, но применял впервые. Благодаря Валерию Владимировичу выполнил последний пункт (Загрузить работу на сервер). В моем случае сервер оказался локальным, но от этого сервером он быть не перестал. |
|||||
17 | 6. Raidės iš Varneliu |
без видео |
|||
Сформировать таблицу 7х15. В каждой ячейке разместить "checkbox" - галочку. Сделать так, чтобы из галочек были составлены ваши инициалы. Suformuoti 7x15 lentelė. Kiekviename lauke patalpinti „checkbox“ - varnelė. Padaryti taip, kad iš varnelių butų susidėtas jūsų inicialai. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 35 мин. [Показать отчёт] Научился: В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы. Попрактиковался в применении классов (которые в html являются хранилищами настроек). Получается душевно. Узнал чуть больше про Чехословакию. Непонятно, какими путями при переводе Брно трансформировалось в Varneliu. Сложности: Отопление многих домов города Брно котлами для сжигания твердого топлива значительно влияет на уровень загрязнения. На территории атомной станции Дукованы, которая находится всего в 16 км к юго-западу от Брно, находится хранилище радиоактивных веществ (сотни тонн высокорадиоактивного урана и плутония) |
|||||
18 |
![]() |
без видео 1 тест |
|||
1. Paruošti nuotraukas. 2. Sukūrti HTML maketą. 3. Užtikrinti HTML validavimą. 4. Pakrauti failą į serverį per FTP Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 14 мин. [Показать отчёт] Научился: Формат CSS — обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев Можно все стили и классы влепить в саму страницу, можно вынести в отдельный файл с расширением .css |
|||||
19 | 8. Landing page |
без видео |
|||
Создать простую посадочную страницу, на которой должно быть: 1. Таблица из 2 столбцов и 1 строки. 2. В первом столбце разместить: заголовок и рекламный текст. 3. Во втором столбце разместить: Картинку, форму для отправки данных с кнопкой. Обеспечить валидацию HTML-документа. Загрузить фотографию и HTML на сервер через FTP. Приложить к работе URL-ссылку на вашу страницу. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 23 мин. [Показать отчёт] Научился: Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model). DOM представляет документ в память компьютера и применяет к содержимому стили. Браузер отображает содержимое DOM. |
|||||
20 |
![]() |
без видео 1 тест |
|||
На этом уроке мы познакомимся со скриптовым языком JavaScript. Необходимо написать три очень маленькие программки. 1. Выводит в окно браузера сообщение. 2. Выводит всплывающее окно с сообщением. 3. Проверка заполненной формы. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 20 мин. [Показать отчёт] Научился: Кодим не в IDE,а в текстовом редакторе, кодим не для компиляции в file.exe, а для DOMа с представлением в браузер. Творить можно чего душе угодно, ограничение лишь экраном, квалификацией веб-программиста и его фантазией. Непаханное поле. |
|||||
21 |
![]() |
без видео 1 тест |
|||
Смысл программирования в обработке данных. В любом языке программирования есть возможность ввода исходных данных. На JavaScript также есть несколько вариантов получения информации от пользователя. На этом уроке мы рассмотрим два способа ввода/вывода информации: 1. Ввод через prompt(), вывод через alert() или document.write(). 2. Ввод и вывод через элементы формы. Задание. Написать программу, которая запросит два числа и найдёт их сумму и максимальное значение. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 47 мин. [Показать отчёт] Научился: JavaScript и Java имеют C-подобный синтаксис, являются объектно-ориентированными и как правило широко используются в клиентских веб-приложениях. Из важных различий можно отметить: Java реализует ООП подход, основанный на классах, JavaScript — на прототипах; Java имеет статическую типизацию, JavaScript — динамическую типизацию; Java загружается из скомпилированного байт-кода; JavaScript интерпретируется напрямую из файла |
|||||
22 |
![]() |
без видео 2 теста |
|||
На этом уроке мы создадим JavaScript, который будет открывать картинки при наведении мышки. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 0 мин. [Показать отчёт] Научился: Событие mouseover происходит, когда мышь появляется над элементом, а mouseout – когда уходит из него. |
|||||
23 |
![]() |
без видео |
|||
На этом уроке мы напишем простой калькулятор на JavaScript.
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 7 мин. [Показать отчёт] Научился: click – происходит, когда кликнули на элемент левой кнопкой мыши contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши mouseover – возникает, когда на элемент наводится мышь mousedown и mouseup – когда кнопку мыши нажали или отжали mousemove – при движении мыши |
|||||
24 |
![]() |
без видео |
|||
На этом уроке мы создадим структуру страницы, используя тег div и файл оформления style.css Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 5 мин. [Показать отчёт] Научился: <div> предназначен для выделения фрагмента документа с целью изменения вида содержимого. Cтиль выносят во внешнюю таблицу стилей, а для тега добавляют атрибут class или id с именем |
|||||
25 |
![]() |
без видео 1 тест |
|||
На этом уроке мы создадим красивое меню для сайта. * Сделайте 6 файлов, чтобы пункты меню переключались. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 24 мин. [Показать отчёт] Научился: Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный. |
|||||
26 |
![]() |
без видео |
|||
На этом уроке мы нарисуем открытку на День Космонавтики (12 апреля). Найдите в интернете картинки на чёрном фоне: 1. Земля. 2. Луна. 3. Ракета. 4. Звёздочки. Разместите их в произвольных местах страницы и напишите сопроводительный текст. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 49 мин. [Показать отчёт] Научился: Расположить объекты по пиксельной сетке несложно. Сложно оказалось реализовать движение объектов по сайту, приведенное в отчете тов. Глушкова. F12 показал код со скриптом и автоматическое изменение позиций его ракет летающих по экрану. Но что включает (запускает) исполнение скрипта пока не понял. А так, получается красиво. |
|||||
27 |
![]() |
без видео |
|||
На этом уроке мы создадим страницу с двумя колонками. Правая - фиксированной ширины, левая - динамическая. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 13 мин. [Показать отчёт] Научился: margin-right(left) определяет правый отступ для элемента. Значения меньше нуля разрешены. auto -браузер рассчитывает правый отступ. 418 - отступ в пикселях или других единицах измерения CSS. % - отступ в % отношении. inherit - значение должно быть унаследовано от элемента-родителя. |
|||||
28 |
![]() |
без видео |
|||
На этом уроке мы создадим структуру полноценного сайта. У нас будет динамическое меню и три колонки. В каждую колонку поместить реальные тексты. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 50 мин. [Показать отчёт] Научился: left (зеркально подходит и для right) - определяет расстояние от левого края родительского элемента, не включая отступ, поле, ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера. Может иметь значение меньше нуля. |
|||||
29 |
![]() |
без видео |
|||
На этом уроке мы научимся отображать и скрывать текстовый блок на экране, с использованием JavaScript. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 49 мин. [Показать отчёт] Научился: style.display='none' удаляет объект из веб-документа и не сохраняет под него область в памяти. Документ создается как будто элемента (описанного таким свойством) и нет в помине. Скриптом можно вернуть видимость объекту. |
|||||
30 |
![]() |
без видео |
|||
Написать программу, которая выводит квадрат из #. Далее, перебрать различные условия и проанализировать результат. Сделать скриншот двух самых классных квадратных узоров. * Придумать своё условие для узора. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 40 мин. [Показать отчёт] Научился: 1) Контейнер <tt> отображает текст моноширинным текстом. 2) Math.Floor округляет вниз по направлению к отрицательной бесконечности. 2а)Math.Ceiling округляет вверх по направлению к положительной бесконечности. 2б)Math.Truncate округляет вниз или вверх по направлению к нулю. Синусоида понравилась, двух квадратов показалось мало, сбацал аксетичную таблицу ради вывода в удобной для скриншота форме четырёх квадратов. Тригонометрия, как и прежде, впечатляет. |
|||||
31 | Платформа LP |
без видео |
|||
На этом уроке мы познакомимся с конструктором первоклассных одностраничников. 1. Открыть страницу gamesharp.info/webinar и просмотреть её. 2. Открыть страницу PlatformaLP.ru и зарегистрироваться. 3. Создать свою страницу, по примеру из пункта 1. 4. Сделать скриншот и приложить отчёт. 5. Приложить ссылку на полученный результат. Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 11 мин. [Показать отчёт] Научился: Лендинг может может быть восхитительным. Инструментарий ушел так далеко, насколько хватает фантазии и кругозора. Чем дальше, тем интереснее тема веб-дизайна. Надо взять лево руля в эту сторону. Наваял, впервые взявшись так: http://xza57u4o.plp7.ru/ PS Стены и цепи излишни, когда тюрьма в голове определяет границы свободы. Сложности: Примерно так. В один ненастный день, В тоске нечеловечьей, Не вынеся тягот, Под скрежет якорей, Мы всходим на корабль — И происходит встреча. Безмерности мечты С предельностью морей. |
|||||
Итого: 31 видеоурок |
49 мин. 18 тестов |
5 чел. | |||
Финалисты: Dmitry Sinitsin, Tekashnik, Andrew, Yaroslav, Tom . |