Веб‑конструирование и дизайн

Роботландский университет для школьников

Ваш браузер не поддерживает SVG

Курс по созданию сайтов и гипертекстовых продуктов. Если вы впервые решили разобраться в том, как создаются сайты, то это отличная возможность попробовать всё своими руками.

Вы уже создавали сайты? На курсе вы сможете научиться оценивать работу: искать ошибки, исправлять их и не допускать более. Убедитесь, что всё, что вы делаете, не нарушает стандарты W3C, соответствует требованиям современных технологий и юзабилити.

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

Иллюстрация к теме «WEB и HTML»

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

Поисковые роботы Яндекса, Гугла и др. должны подбирать статьи, соответствующие запросу. О чём документ и какова его структура первыми должны понимать роботы. Для них важна семантическая разметка правильно построенного кода на язке разметки контента HTML.

Результат. Проверка куратора. Создание веб-страницы группового альбома по типовому шаблону (октябрь-ноябрь).

Иллюстрация к теме «Форматирование»

Ориентируйтесь на заголовки и ключевые фразы, на выделенные правила и определения в абзацах, параграфах. Читая только их можно быстро принять решение: если всё понятно — читаем дальше; не понятно — перечитываем или даже возвращаемся к предыдущим темам.

Основная часть всего курса это знакомство и практика с языком таблиц стилей CSS. Он позволяет и форматировать контент, и оформлять структуру веб-страницы для читателя.

Результат. Конкурс с перекрёстной проверкой. Индивидуальное создание одностраничного сайта (ноябрь-декабрь).

Иллюстрация к теме «Макетирование»

Макетирование начинается с проектирования: размещение блоков с текстом и изображениями на странице. Положение блоков в макете должно учитывать их связь между страницами сайта и возможными действиями пользователя.

Самый длительный и ответственный период курсовой учёбы. Макет, как итоговая цель, начинается с эскиза веб-страницы. Эскиз «подскажет», что нужно делать. С ним проще строить код HTML, выбирать технологии CSS для разметки макета и его блоков, экономить время на подбор свойств для правил CSS. Без него трудно ответить на вопрос, получилось ли то, что хотелось? А хотелось-то что?

Результат. Конкурс с перекрёстной проверкой. Групповая работа по созданию полномасштабного сайта размером не менее 5 полноценных страниц (январь-апрель).

Иллюстрация к теме «Дизайн»

Будущую веб-страницу создают в обычном текстовом документе. Язык HTML позволяет грамотно размечать материал и для роботов, и для читателей. Фрагменты кода браузер отображает на экране визуальными блоками. Оформление каждого из них и веб-страницы в целом задают в правилах языка CSS.

Язык HTML 5.2 содержит много семантических элементов. Язык CSS уровня 2.2 обладает обширным набором свойств для управления внешним видом веб-страницы. А в CSS уровня 3.0 уже имеются свойства анимации «оживления» объектов без использования JavaScript. Не за горами и его версия 4.0. Как же быть со всеми языками? Найти и прочитать, понять и применять.

Результат. Оживление блоков страницы свойствами CSS (апрель-май).

Иллюстрация к теме «Набор текста»

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

Если вы уже подали заявку на обучение, то не дожидаясь официального начала курса можете приступать к разбору темы «Набор текста» во фрагментах учебника и проекта учебной программы рекламного раздела сайта РУЛИК . Эта тема находится за пределами программы. Тем не менее, она важна для работы и не только на курсе.