Проект курса

Веб-конструирование

Курс будет состоять из триместров. Каждый будет заканчивается конкурсной работой. Тем, кто уже занимался на курсе 42 Роботландского университета эти работы знакомы. Но в них меняются цели и содержание.

Планируемый курс

  1. Электронный текст.
    • Задача: понять, что компьютер экономит завтрашнее время.
    • Компьютер и электронный текст. Набор текста, символы пробела и конца абзаца.
    • Использование клавиатурных аккордов — действия выполняются быстрее и точнее.
    • Комбинированные действия редактирования: клавиатура + мышь.

    Эта тема факультативная. Её стоит рассматривать до 1 октября — до официального начала учёбы на курсе 42. В дальнейшем это сэкономит время на практических занятиях для «погружения» в теорию, выполнения практических экспериментальных задач, и исправления ошибок в структруе кода, которых будет меньше.

В любой профессии, а тем более в учёбе, неоспоримую ценность имеет единое оформление, быстрый набор текста.

  1. Страница курсового альбома.
    • Задача: Наполнение контентом шаблона.
    • Используемые технологии: HTML 5.
    • Основные элементы проверки:

      синтаксис записи кода;

      структурирование кода;

      использование семантических элементов;

      использование шаблона в создании фрагмента документа.

  2. Проба пера.
    • Задача: Выполнение ряда контрольных работ.
    • Используемые технологии: HTML 5 + CSS 2.
    • Основные элементы проверки:

      те же, что и в предыдущей работе;

      cемантическое структурирование контента HTML 5;

      форматирование только средствами CSS;

      правильное использование стилей контекстных, встроенных и селекторов;

    Контрольные работ факультативны и их выполнение необязательно. Но желательно, так как они будут включать в себя построение отдельных элементов будущих страниц сайта.

  3. Не тегом единым.
    • Задача: создание сайта с дизанерским решениями.
    • Используемые технологии: HTML 5 + CSS 3.
    • Основные элементы проверки:

      те же, что и в предыдущих работах;

      соответствие рассмотренным правилам дизайна (пока четыре);

      нарушения других правил дизайна только фиксируются, но баллы не снимаются;

    За использование технологий, выходящих за пределы требований к работам, например JS и др. (для практики это полезно) хвалить, но баллы не начислять. Это для того, чтобы уравнять работы и студентов колледжа, и пятиклассников.

План учебного плана

В плане отражены некоторые подробности и примерный поурочный объём. Если с планом плана вы уже знакомы, можете внести предложения по его корректировке. Эстафет привязан к каждой веб-странице. Запустить его можно, выделив заинтересовавший фрагмент текста и нажав клавиатурный аккорд Ctrl + Enter.

Вы можете в комментариях к темам уточнять их содержание: задавать вопросы, добавлять к обсуждению свой или предлагать к исключению несущественный материал.

Подготовительный этап

Перечень рссматриваемых тем и уроков.

  1. Электронный текст.
    Компьютер экономит завтрашнее время (2-4 урока).
    • Модель набора электронного текста. Компьтер реагирует на любое нажатие любой клавиши.
    • Символы пробела и конца абзаца. Разрабтка чктырёх правил набора электронного текста.
    • Клавиатурные аккорды. При использовании клавиатурных аккордов действия выполняются быстрее и точнее.
    • Комбинированные действия редактирования. Использование клавиатуры вместе с мышью.

    Понимая принципы и правила работы с электронным текстом, можно в профессиональных текстовых редакторах кода искать возможности, автоматического выполнения ряда действий. Это уменьшит как количество ошибок в коде, так и ускорит набор текста. А это дополнительное время в учёбе.

Ускорение набора кода и уменьшение ошибок — дополнительное время для обсуждения новых идей, практики и экспериментов.

Первый триместр

  1. Структура.
    Быстрый поиск расположенных в ней элементов (2-3 урока).
    • Виды и использование древовидных структур. Особенность отображения структуры каталогов (папок) в Проводнике. Пути доступа к файлам: абсолютный и относительный.
    • Обязательные элементы документа HTML и древовидное строение кода. Проект «голого» шаблона для будущих документов.
    • Объекты, системы и системный подход. Система — элемент, имеющий свою подструктуру.

    Форма записи древовидной структуры неразрывно связана с пробелами и их ролью (как её «понимает» компьютер).

Правильная структура помогает искать и исправлять ошибки при разработке и при проверке кода соперниками.

  1. Семантика HTML 5.
    Строчные элементы. Создание личного справочника по строчным элементам HTML 5 (2-3 урока).
    • Семантические роли элементов.
    • Машинный язык. Правила записи кода HTML.
    • Таблица юникода. Кодирование часто используемых специальных символов.

    С машиной тоже нужно общаться осмысленно, иначе она нас не поймёт. Хотя на самом деле мы общаемся не с машиной, а с читателем. И код пишем не ради кода, а для того, чтобы машина на экране читателя сформировала текст в том виде, в каком мы его задумали.

Машина «по честному» выполнит неправильную команду… Но результат будет не тот, который ожидается.

  1. Контейнеры. Блочные элементы.
    Системный подход и семантика. Создание личного справочника по блочным элементам HTML 5 (2-3 урока).
    • Объекты контейнерные и простые. Разделение между ними условное. Контейнерные — системы, простые — её элементы.
    • Блочные элементы — основа структуры. Семантические роли блочных элементов. Абзац как младший контейнер.

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

Компьютер выполняет не желания разработчика, а код написанный им.

  1. Одностраничный документ.
    (1-2 урока).
    • Стили. Атрибут и контекстные стили.
    • Форматирование одностраничного документа. Разработка электронной открытки, визитной карточки, личной страницы (обтекание).
    • Элемент STYLE и встроенные стили. Форматирование одностраничного объёмного документа.

Плохо оформленный документ никогда не будет прочитан — «встречают по одёжке».

Второй триместр

  1. Таблицы стилей CSS.
    (? уроков).
    • Элемент [STYLE], стилевое правило, селекторы.
  2. Макет страницы (шаблон).
    (? уроков).
    • Разработка шаблона. Произвольное размещение элементов на странице (плавающие блоки, позиционирование, вывод на экран).
  3. Элемент [LINK] и внешние стили.
    (? уроков).
  4. Сайт. Многостраничный документ.
    (? уроков).
    • Ссылки. Внутри страницы, внутри сайта и внешние.

Третий триместр

  1. Дизайн.
    (? уроков).
    • Приближение.
    • Выравнивание.
    • Повтор.
    • Контраст.
  2. Инфографика.
    (? уроков).
  3. Динамика на странице.
    (? уроков).
    • Преобразование.
    • Трансформация.
    • Анимация.