|
|
|

42. Web-конструирование. Программа
-
Первое знакомство.
Простейший HTML-документ.
Структура документа.
Заголовок документа.
Тело документа.
Заголовки.
Горизонтальная линия.
Абзац.
Принудительный разрыв строки.
Как работает браузер.
Понятие гипертекста.
Как ссылка представлена в браузере.
Комфортная работа в Windows.
Динамические документы.
-
Красивые документы.
Структура, стиль и внешний вид документа.
Правила построения документа.
Вывод текста.
Цвет фона и цвет шрифта.
Оформление отдельных элементов текста.
Текстовые ссылки и цитаты.
Усиление текста.
Изменение размера шрифта.
Авторское редактирование.
Центрирование абзацев и фрагментов.
Специальные символы.
Понятие атрибута.
О бригадном подряде.
Как приобщиться к хорошему дизайну?
-
Красивые программы.
Структура, стиль и внешний вид HTML-кода.
Авторская нотация.
Списки и иерархия.
Кодирование списков.
Маркированный список.
Нумерованный список.
Вложенные списки.
-
Гипертекст.
Сказание о гипертекстах.
Гипертексты и браузеры.
URL-обозначение.
Абсолютные и относительные адреса.
Популярные протоколы сети.
Переход внутри одного документа.
Переход к другому документу.
Переход к метке другого документа.
Имена файлов и ссылки на них.
А если мышка сломалась?
-
Графика.
Графические Web-форматы.
Как кодировать вывод картинки.
Картинка в тексте.
Картинка как ссылка.
Графический инструментарий.
Оптимизация Web-графики.
О важности атрибутов width, height, alt, border.
Картинка для фона документа.
-
Конструктор документов.
Структура приложения.
Цепочка.
Иерархия.
Смешанные схемы.
-
Как мы жили без таблиц.
Что такое таблица.
Какие бывают таблицы.
Как задать таблицу.
Атрибуты команды TABLE.
Атрибуты команды TR.
Атрибуты команды TD (TH).
Многоликие таблицы.
Страничные отступы.
Многоколонная верстка.
Размещение информации на экране.
Наложение картинок.
-
Основы Web-дизайна.
Визуальные редакторы.
Академический стиль.
Черный костюм, белая рубашка, галстук.
Резиновый и жесткий дизайн.
Текст основа страницы.
Цвет фона, текста и ссылок.
Кегль и гарнитура шрифта.
Грамматика и дизайн.
Выравнивание.
Выделения.
Композиция.
Содержание.
Навигация.
Единство стиля.
-
Основы сайтостроения.
Техническое задание.
Название сайта.
Цветовая палитра сайта.
Фон.
Заголовок сайта.
Геометрия обложки.
Стиль страниц сайта.
Навигация.
-
Назаметки Сидорова.
Первый закон оптимизации Web-графики.
Какой формат выбрать.
Анти-алиасинг.
Жесткий и резиновый.
Сколько весит мой сайт.
Очаровательные анимашки.
Схема навигации.
Универсальная схема навигации.
Визуальные редакторы.
Глоток воздуха.
Хитрый тег IMG: анатомия.
IMG-физиология: обязательные атрибуты.
Разведение коз в абзаце.
Гипертекстовая разметка картинки.
Авторское право.
Распорки+таблицы=позиционирование.
Тестирование.
-
Школьный сайт. Особенности и методика построения.
Дополнительные (факультативные) темы:
-
JavaScipt.
Первый скрипт.
Переменные, константы, выражения.
Ветвления, циклы.
Объекты языка.
Объекты и события браузера.
Формы.
-
Каскадные таблицы стилей.
CSS в HTML-коде.
Основы CSS.
CSS+JavaScript.
-
Конструирование динамических документов.
Меню.
Экзамен.
Роботландская мозаика.
Пояснительная записка
Цель курса используя средства 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.botik.ru.
|