Проект курса
Курс будет состоять из триместров. Каждый будет заканчивается
конкурсной работой. Тем, кто уже занимался на курсе 42 Роботландского
университета эти работы знакомы. Но в них меняются цели и содержание.
Планируемый курс
-
Электронный текст.
-
Задача: понять, что компьютер экономит завтрашнее время.
-
Компьютер и электронный текст. Набор текста, символы пробела и конца абзаца.
-
Использование клавиатурных аккордов — действия выполняются
быстрее и точнее.
-
Комбинированные действия редактирования: клавиатура + мышь.
Эта тема факультативная. Её стоит рассматривать до 1 октября —
до официального начала учёбы на курсе 42. В дальнейшем это сэкономит время
на практических занятиях для «погружения» в теорию, выполнения практических
экспериментальных задач, и исправления ошибок в структруе кода,
которых будет меньше.
В любой профессии, а тем более в учёбе, неоспоримую ценность имеет
единое оформление, быстрый набор текста.
-
Страница курсового альбома.
-
Проба пера.
-
Задача: Выполнение ряда контрольных работ.
-
Используемые технологии: HTML 5 + CSS 2.
-
Основные элементы проверки:
те же, что и в предыдущей работе;
cемантическое структурирование контента HTML 5;
форматирование только средствами CSS;
правильное использование стилей контекстных, встроенных
и селекторов;
Контрольные работ факультативны и их выполнение необязательно.
Но желательно, так как они будут включать в себя построение
отдельных элементов будущих страниц сайта.
-
Не тегом единым.
-
Задача: создание сайта с дизанерским решениями.
-
Используемые технологии: HTML 5 + CSS 3.
-
Основные элементы проверки:
те же, что и в предыдущих работах;
соответствие рассмотренным правилам дизайна (пока четыре);
нарушения других правил дизайна только фиксируются, но баллы не снимаются;
За использование технологий, выходящих за пределы требований
к работам, например JS и др. (для практики это полезно)
хвалить, но баллы не начислять. Это для того, чтобы уравнять
работы и студентов колледжа, и пятиклассников.
В плане отражены некоторые подробности и примерный поурочный объём.
Если с планом плана вы уже знакомы, можете внести предложения
по его корректировке. Эстафет привязан в правом нижнем углу
рабочей области браузера. Хотя это и не принципиально. Он запускается
при выделении фрагмента текста по клавиатурному аккорду
Ctrl + Enter.
Вы можете в комментариях к темам уточнить их содержание:
о чём стоит поговорить, добавить к обсуждению свой или предложить
к исключению несущественный материал.
Подготовительный этап
Перечень рссматриваемых тем и уроков.
-
Электронный текст.
Компьютер экономит завтрашнее время (2-4 урока).
-
Модель набора электронного текста. Компьтер реагирует на любое
нажатие любой клавиши.
-
Символы пробела и конца абзаца. Разрабтка 4-ёх правил набора
электронного текста.
-
Клавиатурные аккорды. При использовании клавиатурных аккордов действия
выполняются быстрее и точнее.
-
Комбинированные действия редактирования. Использование клавиатуры
вместе с мышью.
Понимая принципы и правила работы с электронным текстом,
можно в профессиональных текстовых редакторах кода искать возможности,
автоматического выполнения ряда действий. Это уменьшит как количество ошибок
в коде, так и ускорит набор текста. А это дополнительное время в учёбе.
Ускорение набора кода и уменьшение ошибок —
дополнительное время для обсуждения новых идей, практики и экспериментов.
Первый триместр
-
Структура.
Быстрый поиск расположенных в ней элементов (2-3 урока).
-
Виды и использование древовидных структур. Особенность отображения
структуры каталогов (папок) в Проводнике. Пути доступа к файлам:
абсолютный и относительный.
-
Обязательные элементы документа HTML и древовидное строение кода.
Проект «голого» шаблона для будущих документов.
-
Объекты, системы и системный подход. Система — элемент,
имеющий свою подструктуру.
Форма записи древовидной структуры неразрывно связана с пробелами
и их ролью (как её «понимает» компьютер).
Правильная структура помогает искать и исправлять ошибки
при разработке и при проверке кода соперниками.
-
Семантика HTML 5.
Строчные элементы. Создание личного справочника по строчным
элементам HTML 5 (2-3 урока).
-
Семантические роли элементов.
-
Машинный язык. Правила записи кода HTML.
-
Таблица юникода. Кодирование часто используемых специальных символов.
С машиной тоже нужно общаться осмысленно, иначе она нас не поймёт.
Хотя на самом деле мы общаемся не с машиной, а с читателем.
И код пишем не ради кода, а для того, чтобы машина на экране читателя
сформировала текст в том виде, в каком мы его задумали.
Машина «по честному» выполнит неправильную команду…
Но результат будет не тот, который ожидается.
-
Контейнеры. Блочные элементы.
Системный подход и семантика. Создание личного справочника
по блочным элементам HTML 5 (2-3 урока).
-
Объекты контейнерные и простые. Разделение между ними условное.
Контейнерные — системы, простые — её элементы.
-
Блочные элементы — основа структуры. Семантические роли
блочных элементов. Абзац как младший контейнер.
Не смотря на то, что деление на контейнерные и простые элементы условное,
лучше его придерживаться. Иначе хаос в голове разработчика и в коде
чреват ошибками. А после них хаос будет, и при выполнении кода,
и на странице в браузере.
Компьютер выполняет не желания разработчика, а код написанный им.
-
Одностраничный документ.
(1-2 урока).
-
Стили. Атрибут и контекстные стили.
-
Форматирование одностраничного документа. Разработка электронной открытки,
визитной карточки, личной страницы (обтекание).
-
Элемент STYLE и встроенные стили.
Форматирование одностраничного объёмного документа.
Плохо оформленный документ никогда не будет прочитан — «встречают по одёжке».
Второй триместр
-
Таблицы стилей CSS.
(? уроков).
-
Элемент [STYLE], стилевое правило, селекторы.
-
Макет страницы (шаблон).
(? уроков).
-
Разработка шаблона. Произвольное размещение элементов на странице
(плавающие блоки, позиционирование, вывод на экран).
-
Элемент [LINK] и внешние стили.
(? уроков).
-
Сайт. Многостраничный документ.
(? уроков).
-
Ссылки. Внутри страницы, внутри сайта и внешние.
Третий триместр
-
Дизайн.
(? уроков).
-
Приближение.
-
Выравнивание.
-
Повтор.
-
Контраст.
-
Инфографика.
(? уроков).
-
Динамика на странице.
(? уроков).
-
Преобразование.
-
Трансформация.
-
Анимация.