42. Web-конструирование. Программа

1. Первое знакомство.
   – Простейший HTML-документ.
   – Структура документа.
   – Заголовок документа.
   – Тело документа.
   – Заголовки.
   – Горизонтальная линия.
   – Абзац.
   – Принудительный разрыв строки.
   – Как работает браузер.
   – Понятие гипертекста.
   – Как ссылка представлена в браузере.
   – Комфортная работа в Windows.
   – Динамические документы.
   
   
2. Красивые документы.
   – Структура, стиль и внешний вид документа.
   – Правила построения документа.
   – Вывод текста.
   – Цвет фона и цвет шрифта.
   – Оформление отдельных элементов текста.
   – Текстовые ссылки и цитаты.
   – Усиление текста.
   – Изменение размера шрифта.
   – Авторское редактирование.
   – Центрирование абзацев и фрагментов.
   – Специальные символы.
   – Понятие атрибута.
   – О бригадном подряде.
   – Как приобщиться к хорошему дизайну?
   
   
3. Красивые программы.
   – Структура, стиль и внешний вид HTML-кода.
   – Авторская нотация.
   – Списки и иерархия.
   – Кодирование списков.
   – Маркированный список.
   – Нумерованный список.
   – Вложенные списки.
   
   
4. Гипертекст.
   – Сказание о гипертекстах.
   – Гипертексты и браузеры.
   – URL-обозначение.
   – Абсолютные и относительные адреса.
   – Популярные протоколы сети.
   – Переход внутри одного документа.
   – Переход к другому документу.
   – Переход к метке другого документа.
   – Имена файлов и ссылки на них.
   – А если мышка сломалась?
   
   
5. Графика.
   – Графические Web-форматы.
   – Как кодировать вывод картинки.
   – Картинка в тексте.
   – Картинка как ссылка.
   – Графический инструментарий.
   – Оптимизация Web-графики.
   – О важности атрибутов width, height, alt, border.
   – Картинка для фона документа.
   
   
6. Конструктор документов.
   – Структура приложения.
   – Цепочка.
   – Иерархия.
   – Смешанные схемы.
   
   
7. Как мы жили без таблиц.
   – Что такое таблица.
   – Какие бывают таблицы.
   – Как задать таблицу.
   – Атрибуты команды TABLE.
   – Атрибуты команды TR.
   – Атрибуты команды TD (TH).
   – Многоликие таблицы.
   – Страничные отступы.
   – Многоколонная верстка.
   – Размещение информации на экране.
   – Наложение картинок.
   
   
8. Основы Web-дизайна.
   – Визуальные редакторы.
   – Академический стиль.
   – Черный костюм, белая рубашка, галстук.
   – Резиновый и жесткий дизайн.
   – Текст — основа страницы.
   – Цвет фона, текста и ссылок.
   – Кегль и гарнитура шрифта.
   – Грамматика и дизайн.
   – Выравнивание.
   – Выделения.
   – Композиция.
   – Содержание.
   – Навигация.
   – Единство стиля.
   
   
9. Основы сайтостроения.
   – Техническое задание.
   – Название сайта.
   – Цветовая палитра сайта.
   – Фон.
   – Заголовок сайта.
   – Геометрия обложки.
   – Стиль страниц сайта.
   – Навигация.
   
   
10. Назаметки Сидорова.
    – Первый закон оптимизации Web-графики.
    – Какой формат выбрать.
    – Анти-алиасинг.
    – Жесткий и резиновый.
    – Сколько весит мой сайт.
    – Очаровательные анимашки.
    – Схема навигации.
    – Универсальная схема навигации.
    – Визуальные редакторы.
    – Глоток воздуха.
    – Хитрый тег IMG: анатомия.
    – IMG-физиология: обязательные атрибуты.
    – Разведение коз в абзаце.
    – Гипертекстовая разметка картинки.
    – Авторское право.
    – Распорки+таблицы=позиционирование.
    – Тестирование.
    
    
11. Школьный сайт. Особенности и методика построения.
    

1. JavaScipt.
   – Первый скрипт.
   – Переменные, константы, выражения.
   – Ветвления, циклы.
   – Объекты языка.
   – Объекты и события браузера.
   – Формы.
   
   
2. Каскадные таблицы стилей.
   – CSS в HTML-коде.
   – Основы CSS.
   – CSS+JavaScript.
   
   
3. Конструирование динамических документов.
   – Меню.
   – Экзамен.
   – Роботландская мозаика.
   
   

Пояснительная записка

Цель курса — используя средства HTML (а также факультативно JavaScript и CSS) научиться строить полезные компьютерные приложения, которые можно было бы использовать на локальном компьютере у себя дома, в школе или на базе полученных знаний построить собственную страничку в Интернете.

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

Учитывая детскую нетерпеливость и желание «поскорее перейти к делу», курс построен как практикум. Дети уже на первом занятии пишут свою первую HTML-программу. Однако, продолжая роботландские традиции «обучая детей, докапываться до сути изучаемых явлений», практикум по ходу дела подкрепляется фундаментальными «отступлениями» и не сводится к формальному изложению конструкций языка.

Занятия на курсе базируются на интерактивных книгах:

• «HTML-конструирование»
• «HTML-конструирование-2»

• Испытательные стенды.
  Ученик может провести серию опытов по теме изучаемого материала: выбрать нужные параметры, пощелкать переключателями, подергать «веревочки» на пульте управления. Результат испытаний сразу отображается на экране, что гораздо нагляднее длинных текстовых описаний.
  
  
• Встроенный инструментарий.
  Многие задания в книге можно выполнять прямо на ее страницах. Здесь есть и окна текстового редактора с заготовками HTML-программ, и кнопка для демонстрации результата в браузере.
  
  
• Зачетные классы.
  В конце каждого урока выполняется контрольная работа. Книга следит за правильностью решений и выставляет оценку.
  
  
• Задачник.
  Автор не знает ни одного задачника по проектированию и разработке гипертекстовых документов на языке HTML для начинающих. В книге представлена довольно обширная коллекция заданий по этой теме.
  
  
• Наборы «сделай сам».
  Для выполнения тренировочных заданий обучаемому предлагаются наборы текстовых и графических заготовок. Используя эти фрагменты, можно быстро выполнить проект, не отвлекаясь от поставленной учебной цели на подбор «сырья».
  
  

Обучение распределено по учебным неделям. Предполагается, что в течение недели, в удобное для себя и детей время, учитель проводит занятие с командой. Одно занятие в неделю. Но это жесткий минимум. Более оптимально, если дети смогут собираться 2 раза в неделю. Например, один раз с учителем, а другой — с лаборантом для самостоятельных работ с книгой, выполнения заданий или работ по теме конкурсного проекта.

В подключении машин к «живому» Интернету нет необходимости. Вся работа выполняется в безсетевом режиме. Все, что нужно для работы — это браузер, гипертекстовая книга и какой-нибудь текстовый редактор, который умеет работать в кодировке Windows.

В первом семестре школьники работают с книгой «HTML-конструирование» и завершают семестр выполнением учебного проекта, цель которого продемонстрировать усвоение пройденного материала.

Если у учителя есть бумажный вариант книги «HTML-конструирование» (он был опубликован в июне 2000 года в 21 и 22 номерах газеты «Информатика»), то он, несомненно, будет хорошим дополнением к электронному учебнику.

Для второго семестра, дополнительно к книге «HTML-конструирование», предлагается книга «HTML-конструирование-2». В этой книге излагаются основы JavaScript и CSS, которые позволяют сделать гипертекстовую страницу динамической и интерактивной. Однако, эта книга рассчитана в основном на учителя, который изучает ее в рамках своих курсов повышения квалификации.

Дети во втором семестре продолжают работать с первой книгой «HTML-конструирование», повторяя и осмысливая темы, которые были пройдены в первом семестре слишком быстро, в ознакомительном порядке. Теперь меняются целевые установки обучения: центр тяжести переносится с технических аспектов освоения HTML-тегов на конструкторскую и дизайнерскую деятельность. Осмыслению этой деятельности Интернет-проектировщика в значительной степени поможет опыт учебного проекта первого семестра, его анализ и обсуждения на тему «что такое хорошо и что такое плохо» в Web-дизайне и методике создания Интернет-проектов. Эти обсуждения будут непрерывно вестись в рамках курсовой электронной конференции и в рамках обсуждения итогов первого конкурса.

С начала второго семестра школьники выбирают для себя тему проекта, над которым работают в течение всего семестра, совершенствуя проект, его дизайн и его коды. В зависимости от наклонностей детей к программированию, их способностей и наличия времени в школьном расписании, учитель может давать детям для изучения отдельные темы книги «HTML-конструирование-2». В крайнем случае, когда дети совершенно не заинтересованы в собственном программировании, но их желание строить динамические, интерактивные страницы велико, учитель может дать детям готовые скрипты с кухни Сидорова («HTML-конструирование-2», уроки 12-14) с тем, чтобы они могли использовать их в собственных HTML-кодах. В этом случае необходимо разобрать интерфейс скрипта, способы его монтирования в собственные коды, построить с детьми несколько учебных примеров.

При сильном желании, можно использовать скрипты не только с кухни Сидорова, но и из Интернета. Однако, педагогическая функция бесплатно распространяемых скриптов очень невелика, а их практическая полезность сомнительна. Как правило, Интернет забит бесплатным мусором, который не пригоден для серьезного использования. Конечно, можно покопаться на этих свалках и найти одну-две жемчужины, но КПД от таких поисков не велик. Самое лучшее для тех, кто почувствовал тягу к Интернет-программированию, в следующем учебном году пройти серьезное обучение на курсе 43.

Инструментальное обеспечение

Для работы на курсе необходимо:

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

В качестве дополнительного факультативного средства можно приветствовать наличие интернетовской on-line связи для просмотра сетевых WWW-страничек, хотя бы в демонстрационном режиме на одном компьютере.

Каждое рабочее должно быть оснащено компьютером с установленным на нем браузером.

Какой браузер необходим? Интернет-разработчик должен всегда иметь под рукой несколько браузеров, минимум два: Microsoft Internet Explorer и Netscape Navigator. Ведь пользователь сети может «заехать» на вашу страничку на любом транспорте! И вы должны знать, что он увидит. К сожалению (и большой головной боли Интернет-программиста), браузеры разных фирм интерпретируют HTML-коды и скрипты по-разному.

Для работы с гипертекстовыми книгами лучше всего подходит браузер Microsoft Internet Explorer 4 версии. Однако, работать с книгой «HTML-конструирование» можно и в браузере Netscape Navigator 3 версии (его рекомендуется устанавливать на слабые машины с процессором 386).

В подключении рабочего места к Интернет необходимости нет.

Для написания программ необходим какой-нибудь текстовый редактор. Лучше всего подходит редактор МикроМир, но можно обойтись и блокнотом Windows или другим редактором, который умеет работать в той же кодировке, что и ваш браузер.

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

Организация работы

Команды получают из RU следующие материалы:

• календарный план занятий и конкурсов;
• книгу «HTML-конструирование» с методическими рекомендациями для учителя;
• книгу «HTML-конструирование-2» с методическими рекомендациями для учителя;
• учебный сайт «Кухня Сидорова» (бесплатно).

Процесс обучения в каждом семестре строится так:

• изучение тем семестра
• общение с куратором и сокурсниками
• выполнение конкурсных проектов
• перекрестная проверка и проверка куратора
• подведение итогов, разбор решений, анализ типичных ошибок

Бумажные учебники

Издательство «БХВ-Петербург» выпускает бумажные учебники, которые удачно дополняют электронные лаборатории. Об алгоритмах покупки бумажных учебников читайте на странице Бумажные учебники Университета.

Связь с куратором

Если у вас остались вопросы, то их можно задать куратору Дуванову Александру Александровичу по адресу kurs@robotland.pereslavl.ru.