Разработка фрагмента сайта

11^’ класс

Тема: Разработка фрагмента сайта.

Цели:

1. Обобщить сформированные знания и умения по разработке и созданию сайтов.

2. Создавать условия для развития наблюдательности, умения выделять главное, существенное в материале, познавательного интереса к дисциплине.

3. Формирование и развитие коммуникативных навыков при работе в группеВоспитывать творческий подход в выполняемой работе

1. Знакомство (2 минуты)

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

Любая наука или предметная область деятельности человека, да и сам человек начинается с основания. Что является механической опорой человеческого тела?

Правильно - скелет. (Открываю скелет)

А что тогда является основанием для действия любого исполнителя, для написания любой программы в информатике?

Правильно - алгоритм.

Что такое алгоритм?

Ответ: определенная последовательность действий (открыть на доске только слово)

Пусть наш Вася постоит сегодня рядом с доской и будет нам постоянно напоминать об алгоритме, так как с этим понятием мы будем работать весь урок.

Я уверенна, что у нас с вами со скелетом и с другими органами все в порядке. И если здоровье нас не беспокоит, что же для человека остается очень важным в жизни?

Правильно - общение. Трудно представить человека 21 века без общения с помощью чего?

(Интернет)

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

Но прежде чем мы определим с вами, что такое Интернет, я попрошу вас заполнить листы знаний. (30 сек)

Базовый лист знаний

Знания	В начале урока		В конце урока
	Первичные	Глубокие	Первичные	Глубокие
Алгоритм
Блок-схема
Линейный алгоритм
Разветвляющийся алгоритм
Интернет
Сайт
Гипертекст
Счетчик
Электронная почта
Анализ
Синтез
Планирование
Что такое проект

4. (3 минуты)

Что же такое Интернет?

Ответ: Интернет - мировая компьютерная сеть (открыть на доске новое слово)

Для каких целей люди пользуются услугами Интернета? Ваше мнение?

(Информация открывается на доске):

• самый массовый и оперативный источник информации

• крупнейший в мире источник развлечений

• самое прогрессивное средство общения и коммуникации

• самое благоприятное пространство для бизнеса

• идеальный инструмент для рекламы

• громадный простор для творчества.

Я для вас сделала информационные листы, где Вы можете познакомиться с историей создания Интернета.

Какая услуга, предоставляемой пользователям Интернет, является самой интересной?

Возможность работать с информационной системой WorldWideWeb. (открыть на доске новых слов)

Это словосочетание можно перевести как всемирная паутина. Очень трудно дать определение WWW. Эту систему можно сравнить с огромной энциклопедией, страницы которой разбросаны по всему миру. Чтобы пользователь мог получить необходимую информацию, он должен добраться до соответствующей страницы. Основной информационной единицей WWW является Web-страница (открыть определение из новых определений)

Информация на Web-странице может быть разной: текст, рисунок, фотография, анимация, звук, видео, таблица.

А теперь представьте, что энциклопедия состоит из большого кол-ва томов. Один том содержит несколько страниц (Web-страниц). Причем, каждая страничка имеет ссылки, которые выделяются отличным от всего текста цветом или подчеркиванием. Выбрав такую ссылку, мы попадаем на другую страничку. Такая ссылка называется гиперссылкой. Давайте посмотрим на определения новых понятий (Открыть сайт, гиперссылка)

Перемещаться пользователю по "паутине" помогает специальная программа, которая называется Web-браузер. Браузер в переводе с англ.яз. означает осматривать, изучать) (открыть на доске определение браузера)

Теперь мы начинам разбираться в Интернете и можем поговорить о творчестве.

Что мы может сотворить? (ответ - сайт)

4. Какие таланты нам нужны, чтобы создать свой сайт?

(Ответы открываются на доске: дизайнеры, художники, программисты, рекламисты)

5. Впереди нас ждет проектная работа. Давайте посмотрим на алгоритм выполнения проектной работы, который предстанет перед вами в виде блок-схемы.

Что такое блок-схема ? (Ответ - графическое изображение алгоритма открыть на доске только слово)

Выбор

Темы (планирование)

Сбор материала

(анализ)

Анализ- перевод с греч.

Разложение, расчленение

Д

Подготовка

Проекта

(синтез)

етально изучить

Материал, разобрать

факты

синтез (пер. с греч. Соединение, сочетание) нам необходимо обобщить

и соединить все знаний и умения

Защита проекта

(активная деятельность)

Здесь представлен какой вид алгоритма? Правильно - линейный алгоритм, в котором все действия идут друг за другом. (открыть на доске только слово)

Первый шаг - определение общей темы.

Тема "Разработка макета web-сайта для всех знатоков и любителей информатики." Наверное, самая заветная мечта многих людей - это открыть новую звезду, новую планету. Вот и мы с вами давайте назовем сайт "Планета информатики - 7". 7 - потому, что вы ученики седьмого класса. И на этот сайт мы поместим всю информацию, которая необходима семикласснику, чтобы хорошо знать предмет информатика. И постоянно будем добавлять и обновлять информацию по мере необходимости.

Алгоритм создания сайта закрыт паролем. Чтобы его снять, необходимо решить одну логическую задачу

Задача из ТРИЗ.

У старика спросили: "Сколько Вам лет?". Он ответил :" 104 года, а вот дней рождения ыбло всего 25." Может такое быть? Объясните свой ответ.

Сегодня тема нашего урока "Алгоритм создания сайта"

Алгоритм открывается. Прошу заполнить эту блок-схему в ваших конспектах.

Работа дизайнера, художника

Работа программиста

Работа рекламиста

Шаг второй "Сбор информации". Информация необходима для всех групп, участников проекта.

Начнем с информации, которую необходимо знать каждому.

Определимся с тем, что мы хотим создавать. Четкой классификации WWW-страничек еще никто не создавал. Давайте создадим собственную классификацию персональных WWW-страничек. Для этого нам необходимо по некоторым признакам (цели, задачи, назначение, краткие характеристики) выбрать названия для классификации.

Рассматриваем вопросник (сделать таблицу-вопросник).

АНКЕТА неизвестного сайта

Вопросы	Классификация сайтов
1. Простой, доступный всем	Да	Нет	Нет
2. Персональный	Да	Да	Да
3. Не более 4-5 страниц	Да	Да	Нет
4. Можно назвать крохотным сетевым досье	Да	Нет	Нет
5. Его называют WWW-обозрением	Нет	Да	Нет
6. Информация на нем посвящена увлечениям группы людей	Нет	Нет	Да

Даем название "Домашняя страница", "Интернет-стенгазета," "Виртуальный фэн-клуб". Эта классификация применима для персональных страничек, которые создаются одним человеком. Есть еще и коллективные мощные сайты, такие как сайты издательств или сайты представительств организаций.

Наш сайт скорее подходит по классификации к Виртуальном фэн-клубу"

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

Показываю на компьютере:

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

Теперь давайте разберемся со "скелетом" нашего сайта, с его структурой

1. Кол-во страниц: 4

2. Заголовки страниц:

Титульный лист "Планета Информатика-7"

Страница №2 "Мир компьютера"

Страница №3 "Программному обеспечению посвящается"

Страница №4 "Авторская страница"

Структура сайта

Титульный лист

"Информатика-7"

(страница №1)

"Мир компьютера"

Страница №2

"Программному обеспечению посвящается"

Страница №3

"Авторская страничка"

Страница №4

Необходимо знать основные правила создания сайта:

1. Содержимое является одной из самых главных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимость существования такого сайта.

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

3. Скорость загрузки страниц. Оптимальное время загрузки странички не должно превышать 5-7 секунд, а ее объем следовательно ,желательно ограничить 15-20 секундами. Поэтому разбивки материала на разделы не избежать. Главное, грамотно разработать структура сайта. Не более 2-х картинок

Определим алгоритм работы дизайнера .

Алгоритм создания сайта.

Работа дизайнера, художника

Работа программиста

Работа рекламиста

Дизайнеры получают технической задание и приступают к работе. Время работы - 10 минут.

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

Техническое задание группе дизайнеров №1.

Вам необходимо разработать и оформить титульный лист сайта.

Алгоритм Вашей работы

Правила оформления страницы:

1.Страница начинается с основного заголовка (самый большой размер)

2.Заголовки разделов - средний шрифт

3. Текст - самый маленький шрифт

4. Для оформления макета страницы используйте: цветные карандаши (фон страницы), фломастеры (заголовки), ручки (текст), картинки, клей.

5.Все для оформления макета Вы можете найти на столике консультанта.

6. На защите четко в течении 1 минуты расскажите о макете вашей страницы

7. Время выполнения макета - 5 минут.

Познакомьтесь с правилами оформления страницы

Познакомьтесь с паспортом Вашей страницы

Определите размер шрифтов заголовков и текста на странице

Определите и разместите разделы и гиперссылки на Вашей странице

Определите цветовое оформление страницы

Определите графические объекты на Вашей странице

Заполните паспорт Вашей страницы. Укажите названия разделов, гиперссылки, названия графических объектов.

Паспорт страницы №1 -Титульного листа

• Основной заголовок:

"Планета Информатика - 7"

• Гиперссылки :

Мир компьютера

Программному обеспечению посвящается

Авторская страничка

Полезные ссылки

• Разделы:

1. Новости

2. ________________________________________

• Графика:

1. ____________________________________

1. ____________________________________

ФИ авторов страницы:

________________________________

________________________________

Оформите на листе бумаге макет вашей страницы

Разместите свой макет на доске на указанном месте

Расскажите о своей странице. Будьте готовы ответить на вопросы.

Техническое задание группе дизайнеров №2

Вам необходимо разработать и оформить страницу №2 "Мир компьютера"

Алгоритм Вашей работы

Правила оформления страницы:

1.Страница начинается с основного заголовка (самый большой размер)

2.Заголовки разделов - средний шрифт

3. Текст - самый маленький шрифт

4. Для оформления макета страницы используйте: цветные карандаши (фон страницы), фломастеры (заголовки), ручки (текст), картинки, клей.

5.Все для оформления макета Вы можете найти на столике консультанта.

6. На защите четко в течении 1 минуты расскажите о макете вашей страницы

7. Время выполнения макета - 5 минут.

Познакомьтесь с правилами оформления страницы

Познакомьтесь с паспортом Вашей страницы

Определите размер шрифтов заголовков и текста на странице

Определите и разместите разделы и гиперссылки на Вашей странице

Определите цветовое оформление страницы

Определите графические объекты на Вашей странице

Заполните паспорт Вашей страницы. Укажите названия разделов, гиперссылки, названия графических объектов.

Паспорт страницы №3

• Основной заголовок:

"Мир компьютера"

• Гиперссылки :

Главная

Программному обеспечению посвящается

Авторская страничка

Полезные ссылки

• Разделы:

1. _____________________________________

2. ________________________________________

• Графика:

1. ____________________________________

1. ____________________________________

ФИ авторов страницы:

________________________________

________________________________

Оформите на листе бумаге макет вашей страницы

Разместите свой макет на доске на указанном месте

Расскажите о своей странице. Будьте готовы ответить на вопросы.

Техническое задание группе дизайнеров №3

Вам необходимо разработать и оформить страницу №3 "Программному обеспечению посвящается"

Алгоритм Вашей работы

Правила оформления страницы:

1.Страница начинается с основного заголовка (самый большой размер)

2.Заголовки разделов - средний шрифт

3. Текст - самый маленький шрифт

4. Для оформления макета страницы используйте: цветные карандаши (фон страницы), фломастеры (заголовки), ручки (текст), картинки, клей.

5.Все для оформления макета Вы можете найти на столике консультанта.

6. На защите четко в течении 1 минуты расскажите о макете вашей страницы

7. Время выполнения макета - 5 минут.

Познакомьтесь с правилами оформления страницы

Познакомьтесь с паспортом Вашей страницы

Определите размер шрифтов заголовков и текста на странице

Определите и разместите разделы и гиперссылки на Вашей странице

Определите цветовое оформление страницы

Определите графические объекты на Вашей странице

Заполните паспорт Вашей страницы. Укажите названия разделов, гиперссылки, названия графических объектов.

Паспорт страницы №3

• Основной заголовок:

"Программному обеспечению посвящается"

• Гиперссылки :

Главная

Мир компьютера

Авторская страничка

Полезные ссылки

• Разделы:

1. ____________________________________

2. ________________________________________

• Графика:

1. ____________________________________

1. ____________________________________

ФИ авторов страницы:

________________________________

________________________________

Оформите на листе бумаге макет вашей страницы

Разместите свой макет на доске на указанном месте

Расскажите о своей странице. Будьте готовы ответить на вопросы.

Техническое задание группе дизайнеров №4

Вам необходимо разработать и оформить страницу №2 "Авторская страница"

Алгоритм Вашей работы

Правила оформления страницы:

1.Страница начинается с основного заголовка (самый большой размер)

2.Заголовки разделов - средний шрифт

3. Текст - самый маленький шрифт

4. Для оформления макета страницы используйте: цветные карандаши (фон страницы), фломастеры (заголовки), ручки (текст), картинки, клей.

5.Все для оформления макета Вы можете найти на столике консультанта.

6. На защите четко в течении 1 минуты расскажите о макете вашей страницы

7. Время выполнения макета - 5 минут.

Познакомьтесь с правилами оформления страницы

Познакомьтесь с паспортом Вашей страницы

Определите размер шрифтов заголовков и текста на странице

Определите и разместите разделы и гиперссылки на Вашей странице

Определите цветовое оформление страницы

Определите графические объекты на Вашей странице

Заполните паспорт Вашей страницы. Укажите названия разделов, гиперссылки, названия графических объектов.

Паспорт страницы №4

• Основной заголовок:

"Авторская страница"

• Гиперссылки :

Главная

Мир компьютера

Программному обеспечению посвящается

Полезные ссылки

• Разделы:

1. Гостевая книга

2.Письмо автору

3.Счетчик посещений

• Графика:

1. ____________________________________

1. ____________________________________

ФИ авторов страницы:

________________________________

________________________________

Оформите на листе бумаге макет вашей страницы

Разместите свой макет на доске на указанном месте

Расскажите о своей странице. Будьте готовы ответить на вопросы.

А мы переходим к алгоритму работы рекламистов.

Следующая ответственная работа. Оповестить о Вашем сайте всю сетевую общественность. Каким способом это можно сделать?

Как это можно сделать?

АЛГОРИТМ РАБОТЫ РЕКЛАМИСТОВ по "раскрутке" сайта

Определить способ рекламы: объявление по группам новостей, объявление на "доске объявлений", реклама в поисковых системах

Подготовить мини-рецензию на сайт

Зарегистрировать сайт: самостоятельно, через систему бесплатной регистрации сайтов

Рассказывать по алгоритму работы.

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

2. Разместить объявление на специальных "Досках объявлений". Но здесь есть минус рекламировать сайт новичка захочет далеко не каждый раскрученный сайт, а доски объявления живут не долго.

3. Самый лучший способ - это подружиться с поисковыми системами. (дать определение поисковой системе, привести пример). Для этого необходимо заполнить регистрационный лист.

(техническое задание для рекламистов)

Техническое задание группе рекламистов

Алгоритм Вашей работы

Рекламист №1 заполняет регистрационный лист сайта и сдает его консультанту (учителю)

Рекламист №2 готовит рекламное сообщение о сайте

(2-3предложения)

Рекламист №1 после выступления дизайнеров

задает один вопрос дизайнерам любой страницы по их работе

Рекламист №2 выступает с рекламным сообщением перед аудиторией

Рекламист №1 вносит одно предложение о возможности улучшения сайта

Мы переходим к работе программиста.

Что делает хороший мастер перед тем как начинает работать? Раскладывает инструменты. Составим и мы с вами реестр программ, которые могут нам понадобиться в работе.

1. Мы должны тщательно выбрать редактор WWW-страниц:

Нам нужно будет выбирать между программами, которые решают одну и ту же задачу совершенно по-разному.

Алгоритм работы программиста

выбор

редактора

• Macromedia Dream Weaver 2.0

Более профессиональный

• HTML-редакторы

Орудие профессионалов

Программирование на специальном языке

Визуальные

• Word, PageMaker. Работают по принципу, что видим, то и пишем

• Microsoft FRONTPAGE 98/2000

• Front Page Express интерфейс похож на Word.

Работа с графикой

Дополнения:

• Музыка

• Спецэффекты

• Фреймы

• Счетчики

Для размещения графики необходим графический редактор.

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

Приятные дополнения.

- Музыка.

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

• Счетчики. С помощью них можно отслеживать кол-во посещений сайта.

• Фреймы (форточки). С их помощью можно разделить экран на несколько частей и каждая часть будет жить своей неповторимой жизнью.

Теперь вы, уважаемые программисты, обладаете тем набором знаний, которые вам помогут выполнить тест, по результатам которого вы будете допущены или пока не допущены к работе по реализации макета сайта в жизнь

Время выполнения: 5 минут

(выполняют тест, сделать тест - 3 человека)

Переходим к защите макета сайта. Время - по 1 минуте на доклад по каждой странице.

И зачитываете технический паспорт вашей страницы

Слово рекламистам. Время - 30 секунд на рекламу. Проводят голосование

Программисты докладывают о выполнении теста

Показать сайт, который был сделан по разобранному алгоритму (на компьютере)

Рефлексия

Заполняем базовые листы знаний.

Домашнее задание

Домашнее задание

1. Выбрать тему сайта

1. Создать алгоритм сайта в виде блок-схемы

2. Требования к создателям: знать определения ,определение под (*) знать по желанию, знать алгоритм проекта, алгоритм создания сайта, алгоритмы дизайнера.

3. Требования к проекту: тема должна быть интересна всем, кол-во страниц на сайте не больше пяти.

4. Поощряется, если алгоритм сайта будет отличаться от алгоритма, который бал рассмотрен на уроке.

Желая успеха. Наталья Николаевна.

Итоги урока: наметки на будущий урок (компьютерные сети)

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

Чувства не подвластны алгоритму

Современный человек должен научиться мыслить рационально, а чувствовать безгранично.

15