Авторский сайт учителя – предметника.
Анализ ситуации с точки зрения учителя:
· В руках учителя находится большое количество дидактического и методического материала, нуждающегося в систематизации;
· необходимость безбумажного общения родителей и учителей, учителя и ученика;
· Дистанционное обучение и экстернат вскоре придет в школу, при этом обмен заданиями между учеником и учителем возможно осуществлять при помощи компьютера;
· Свои странички в Интернете имеют все: государственные учреждения, большие компании, мелкие предприниматели, магазины, библиотеки, Президент России. Учителю, как представителю системы ОБРАЗОВАНИЯ, вполне возможно, а наверное и необходимо иметь свой сайт.
Ожидаемые результаты для вас как учителя:
· Во-первых, это интересно учителю. Стоит только начать - и уже трудно оторваться.
· Развитие интереса учащихся («А наш учитель сайт имеет в Интернете!») в познавательный («Я тоже хочу!»)
· Ваша методическая копилка постепенно приобретает электронный вид. В любой момент с помощью компьютера вы сможете воспользоваться своими наработками, не начиная судорожно искать («А в кабинете или дома я оставил прошлым августом планирование на 8-ой класс?») по полкам, папкам и папочкам необходимую бумагу («Где-то оно тут было!?»).
· Собирая материал для наполнения сайта, узнаёшь много нового, к тому же пользователям Интернета доступна научная и культурная информация музеев, выставок, электронных библиотек.
· Сайт, помещенный в Интернете прочитает намного больше человек, чем статью в любом журнале или газете.
· При помощи сайта можно найти единомышленников, наладить общение с учителями из других регионов.
· Для сбора интересующей информации можно поместить на сайте анкету с вопросами, предназначенными какой-либо аудитории, находящейся в любом месте земного шара.
· Привлечение интереса к деятельности вашей школы, к работам и проектам учащихся; виртуальное привлечение родителей. С помощью авторского сайта можно проводить сетевые проекты.
· Сейчас проводится много различных конкурсов, на которые можно выставить свои работы
У педагога выбор есть, хотя он и не велик.
1. Использовать школьный сайт
a. Есть возможность разместить на школьном сайте личную страницу учителя.
b. На школьном сайте можно разместить ссылку на сетевой проект.
2. Научиться создавать сайты и на школьном сайте ставить ссылку на ваш личный сайт
В первом случае вы ограничены возможностями школьного сайта и вынуждены принимать структуру и функционал школьного сайта. Однако и здесь имеются возможности для творческой подачи материала, индивидуального оформления собственной страницы. Плюс поддержка администратора сайта, практически исключается потеря информации и т. д. Самый главный минус в этой ситуации, что это не ваш сайт, а страница на сайте школы.
Во втором случае вы свободны, но, следовательно, берете на себя все риски. Какие во втором случае варианты действий?
1. Изучить редактор сайтов (FrontPage, Dreamw и другое). Создать и разместить сайт на бесплатном или платном хостинге.
· Если хостинг бесплатный, то значит, владелец получает выгоду с вашего сайта другим способом. Например, с помощью рекламы на вашем сайте. Причем ни каких претензий вы предъявлять не имеете права, даже если все исчезнет, рухнет. Удалять ваш аккаунд имею право без объяснения причин и т. д. Использовать бесплатный хостинг можно и нужно для временных проектов. Помните, если вы размещаете сайт бесплатно, ваша задача самому заботиться о сохранности данных. Храните локальную версию сайта.
· Если вы платите за хостинг, то владельцы отвечают за сохранность вашей информации размещенной у них на сервере. К тому скорость платного хостинга значительно выше и значит, сайт будет грузиться быстрее.
2. Выбрать бесплатный конструктор с системой управления контентом. Например, конструктор с системой управления сайтом Ucoz. Владельцы хостингов предлагают конструктор+ размещение(платное, бесплатное). На сервере ТОИПКРО размещение платное.
Плюсы конструкторов сайтов
· Легче создавать сайт
· Проще обновлять информацию
Минусы конструкторов сайтов
· Конструктор привязан к серверу, нет возможности иметь локальную версию сайта, то есть, чтобы использовать свой сайт должно быть подключение к интернету
· Ограничение рамками шаблона
Как построить хороший сайт?
• Четко сформулируйте назначение вашего сайта.
• Подумайте, достаточно ли у вас методических и дидактических материалов?
• Есть ли у вас идеи, используя которые можно привлечь аудиторию?
• Готовы ли вы проводить сетевые проекты и не только для учеников, но и для учителей?
Примеры авторских учительских сайтов в сети интернет.
Рассмотрим авторские сайты созданные на бесплатном хостинге http://narod. *****/
- http://mir-predmetov. *****
- http://*****
(химия) - http://*****
(физика) - http://kaverinyua. *****
(география) - http://olga-beznogowa. *****/
(география) - http://irin-kugu. *****
(начальная школа)- http://www. vneklassa. *****
http://www. origami-school. *****
авторские сайты созданные с помощью системы управления сайтом на бесплатном хостинге http://ucoz.ru/
http://vesnuchki. *****/ Cайт учителя начальных классов
http://karmanform. *****/ Сайт учителя математики Каратановой Марины Николаевны
http://tana. ***** Сайт учителя биологии Карповой Татьяны Александровны
http://stepanenkoo. *****/ Cайт учителя информатики Степаненко Ольги Владимировны
http://*****/ Cайт учителя информатики Егоровой Марины Викторовны
http://po4emu4ki. *****/ Сайт учителя начальных классов
http://fizecl. ***** - Сайт учителей физики МБОУ "Экономический лицей" г. Новосибирска
http://physis. ***** Сайт учителя физики Гагиной Валентины Викторовны
http://*****/ Сайт учителя физики, химии, информатики и ИКТ МОУ «Иштанская CОШ» Кривошеинского района Томской области Жуковского Андрея Николаевича.
http://elena-zelenskaj. *****/ Сайт учителя физики и математики Зеленской Елены Владимировны
http://deminae. *****/ Сайт учителя информатики и ИКТ Деминой Евгении Викторовны МОУ «СОШ №89» г. Северска
http://www. kontren. *****/rass/ikt-f. html Сайты учителей химии, созданные в рамках мастер-класса сетевого сообщество "Химоза"
http://sachkovy. *****/ Сайт учителя начальных классов Сачковой Натальи Алексеевны МОУ "Леботерская ООШ" Чаинского района Томской области
http://sozykina. *****/ Сайт директора Созыкиной Галины Витальевне МОУ "Леботерская ООШ" Чаинского района Томской области
http://jazykowed. *****/ Сайт учителя русского языка Афанасьевой Галины Николаевны МОУ "Леботерская ООШ" Чаинского района Томской области
http://gvozdikova. *****/ Сайт учителя русского языка и литературы Гвоздиковой Елены Ивановны
авторские сайты-портфолио
http://tombasova. *****/ Сайт-портфолио учителя биологии Томбасовой Татьяны Сергеевны
http://prokinana. *****/ Сайт-портфолио учителя Прокиной Натальи Александровны
http://donial. *****/ Сайт-портфолио учителя математики Догадовой Нины Александровны
http://fizika-zaharova. ***** Сайт-портфолио учителя физики Захаровой Олеси Николаевны
http://*****/ Сайт-портфолио учителя русского языка и литературы Агаковой Аллы Владимировны
http://glinkaln. *****/ Сайт-портфолио учителя математики Глинкиной Лидии Николаевны
http://tomilova. *****/ Сайт-портфолио учителя информатики Томиловой Елены Анатольевны
http://semivel-eo. uuo-tiksi. *****/p1aa1.html сайт-электронный портфолио Семивеличенко Елены Оливертовны
Образовательно-информационные сайты
http://www. radik. ***** Сайт учителя физики Рахматуллина Радика Акрамовича
http://ugorka. ***** Сайт МО учителей начальной школы "Пяминской средней общеобразовательной школы-интернат"
Разработка структуры сайта. Структура Личной страницы учителя на сайте школы
Визитка – краткая информация о педагоге
– Фото
– этапы педагогической деятельности
Достижения педагога
– Грамоты
– Дипломы
– Сертификаты
– Свидетельства
Разработки уроков
Для ученика
– Задания
– Дополнительная литература (что прочитать к уроку)
– Если пропустил занятие
– Рекомендации по подготовке к экзаменам
– Дистанционное обучение
– Вопрос-ответ (в виде гостевой книги)
Сетевые проекты
– разработанные учителем сетевые проекты
– участие в сетевых проектах (впечатления, рекомендации, пожелания)
Для личной странице на сайте школы учителю достаточно предоставить администратору сайта материалы в электронном виде и те разделы на странице, которые вы себе запланировали.
Но если мы задумали свой сайт, то не важно, сами будем его писать с помощью редактора или воспользуемся готовыми системами управления сайтом (CMS), нам необходимо создать структуру сайта. Можно нарисовать на листке бумаги, а затем перенести в электронный вид (таблица, список, рисунок) и только затем задуматься о способе реализации проекта.
Что же такое структура сайта? Внешняя структура. внутренняя структура.
внутренняя структура.
Давайте для начала, поговорим о внутренней структуре сайта. Она зависит от того, какую информацию вы будете размещать, какие у вас есть материалы. Вам предстоит решить, какие у вас будут на сайте разделы, подразделы - вам предстоит продумать дерево сайта. Рассмотрим разработку внутренней структуры сайта на примере структуры личной страницы учителя на сайте школы.
Главная страница (фото, рассказ о себе)
Мои достижения
Разработки уроков
Для ученика
– Задания
– Дополнительная литература (что прочитать к уроку)
– Если пропустил занятие
– Рекомендации по подготовке к экзаменам
– Дистанционное обучение
– Вопрос-ответ (в виде гостевой книги)
Сетевые проекты
– разработанные учителем сетевые проекты
– участие в сетевых проектах (впечатления, рекомендации, пожелания)
Авторская мастерская
Мои увлечения
Когда у нас перед глазами такой план внутренней структуры, можно смело продолжать работу над сайтом, не боясь чего-то забыть или упустить.
Внешняя структура.
Это расположение основных значимых элементов на каждой странице. Вам надо решить, где и как будут располагаться элементы сайта. Ваши баннеры, если вы их будете внедрять на сайт, счетчик, меню, поиск, основное содержание, какие-то анонсы о новых разделах сайта, обновлениях, и т. д.
Например
Шапка сайта
| ||||||
| ||||||
Низ сайта(счетчики, информация об авторе сайта, копирайт и т. д.) |
При разработке внешней и внутренней структуры ваша главная задача сделать так, чтобы в будущем посетителю было легко ориентироваться на вашем сайте, чтобы важная и нужная информация легко находилась.
Что такое хорошая структура сайта? |
Удачный Web-дизайн означает, что пользователи без особого труда могут находить и использовать нужную информацию. Должна быть понятна схема сайта и взаимосвязь между отдельными страницами.
Хорошая навигация сайта означает, что пользователи точно знают, где они находятся, где расположены элементы сайта и как использовать эти элементы. Правильная структура информации позволяет пользователям без опаски продолжать исследование сайта, оставаясь уверенными в том, что они всегда смогут без труда вернуться к ранее просмотренным страницам.
На удачно организованных сайтах посетители могут свободно перемещаться в поисках нужной информации, не беспокоясь о структуре сайта. Заботиться о структуре сайта — задача разработчика, а не пользователей.
Что такое эффективная навигация? |
Навигация является средством, с помощью которого посетители могут быстро перейти в нужное им место на сайте. Чем более эффективной будет навигация, тем вероятнее, что больше людей заинтересуются сайтом.
Основные пункты системы навигации должны оставаться неизменными и отображаться прежде других элементов сайта, чтобы посетители быстрее могли сделать выбор и перейти на нужную страничку.
Подчеркнутый текст — это гиперссылка … |
Когда пользователи не знают, на каких элементах страницы можно щелкнуть, им приходится догадываться. Пользователи могут просто не увидеть интересующий элемент, прекратить поиски раньше времени или посчитать, что они уже исследовали все опции, хотя это далеко не так.
Не следует использовать надписи голубого цвета для обычного текста, поскольку голубой цвет четко ассоциируется с тем, на чем можно щелкнуть, т. е. на гиперссылку.
Выделите гиперссылки с помощью стандартных методов: цветного текста и подчеркивания.
Не полагайтесь на указатель мыши как на средство по выделению гиперссылок. Даже опытные пользователи не всегда замечают, когда обычный указатель превращается в указатель в виде руки, а для новичков эти два указателя вообще ничем не отличаются.
Прямые гиперссылки с главной страницы … |
Одной из наиболее успешных стратегий дизайна, заключается в размещении непосредственных гиперссылок на главной странице. Они позволяют выполнить ограниченное количество наиболее важных операций.
Неважно, как структурирована информация или насколько понятной является система навигации, пользователи могут потерять терпение, если им придется проходить по множеству страниц. Прямые ссылки упрощают дело и дают возможность непосредственно перейти к нужной странице.
К сожалению, на главной странице невозможно разместить большое количество гиперссылок. Если их будет слишком много, цель не будет достигнута из-за большей вероятности того, что пользователи щелкнут не на той гиперссылке.
Постарайтесь на главной странице сайта размещать прямые гиперссылки только для решения небольшого количества задач. Для каждой области страницы число прямых гиперссылок должно находиться в пределах от трех до пяти.
Оптимизация графических изображений
Основные этапы оптимизации изображений перед размещением в сети Интернет:
1. Выбор программы или графического редактора для работы с графическими файлами.
2. Методы обработки изображения.
3. Уменьшение размера графического изображения до заданного размера и сохранение с минимальными потерями качества.
Программы для обработки графических изображений.
Существует множество программ для работы с графикой. Все они отличаются друг от друга по размеру, функциям и возможностям (например, PhotoShop - редактор растровой графики или CorelDRAW-редактор векторной графики).
Когда мы открываем страницу сайта или получаем почту, мы перекачиваем к себе на компьютер все содержимое и желательно чтобы картинки и фотографии были не более 30-40 килобайт. Уменьшение размеров достигается применением специальных программ, так называемых оптимизаторов. По качеству оптимизации все программы примерно равноценны, основную задачу - сжатие графических файлов без видимого ухудшения качества картинок, они выполняют примерно одинаково.
Графические редакторы – специальные программы, которые позволяют корректировать графическое изображение, начиная от обычного увеличения/уменьшения яркости или контрастности отдельного цвета или общего тона картинки, изменения ее размера и заканчивая сложными преобразованиями, созданиями коллажей, ликвидацией ненужных деталей с фотографии, наложением фильтров.
Наиболее распространен Adobe Photoshop - графический редактор и для обычного домашнего пользования, и для серьёзной графики. Его возможности огромны, но чаще всего обычные пользователи не использует и десятой доли того, что Photoshop позволяет делать.
Уменьшение размера графического изображения до 30 Кб и сохранение с минимальными потерями качества в формате JPEG с помощью Photoshop
Откройте картинку > 1Mб с помощью Photoshop (правая кнопка мыши - открыть с помощью –выбрать Photoshop) Выберите File (Файл) —> Save For Web (Сохранить для Web) В центре открывшегося окна размещается оптимизируемая картинка. Щелкните на заголовок Optimized (Оптимизация) в верхней части окна (зачастую окно с заголовком открывается Optimized по умолчанию). Уменьшим геометрические размеры изображения. Щелкните на заголовке Image Size (Размер Изображения) в правой части экрана. В полях Width (Ширина) или Heigth (Высота) изменяем значения. По самой длинной стороне выставляете цифру 600 или 800. Включаете (или если включено, оставляете включенной) галку около Constrain Proportions для сохранения пропорций изображения. Установив размер, щелкните кнопку Apply (Применить) чтобы применить новый размер. Если размеры ширины или высоты картинки уже меньше 800-600 точек, то менять ничего не нужно. Обратим внимание на правый верхний угол окна Save for Web. В поле формат из выпадающего списка выберем тип выходного файла JPEG. В поле ввода Quality (Качество) ставим цифру 50. Чем эта цифра больше, тем лучше будет фотография. Выберем качество сжатия (компрессии) изображения: щелкните на круглую кнопку со стрелкой . Затем в появившемся меню нужно выбрать строку Optimize for file size (Оптимизировать по размеру файла). Откроется диалоговое окно. В поле Desired File Size введите с клавиатуры цифру 30. Щелкните кнопку OK. Программа автоматически оптимизировала изображение до 30Кб. В левом нижнем углу окна Save for Web указан наиболее важный параметр всего процесса уменьшения изображения — размер файла, который не должен превышать установленный лимит в 30 Кб. После манипуляций обращайте на этот параметр, возможно, что на каком-то этапе вы уже добились требуемого значения, без существенной потери качества. Если качество изображения значительно «упало», а размер еще велик, уменьшим геометрические размеры картинки еще раз (п. 3). Уменьшите большую из сторон сначала на 100 пикселей (вместо "800" поставьте сначала 700, а если тоже будет большой размер, то поставьте 600) и повторите пункт 5. Повторите его необходимое число раз, контролируя «вес» файла и качество изображения. Если «вес» файла не превышает 30Кб и качество вполне приемлемо, то щелкните на кнопке Ok (справа вверху окна Save for Web) и, выбрав имя файла и путь к нему, сохраните его на диск.Цветовая гамма сайта
Цветовая гамма страницы дает возможность выделить такие наиболее важные части страницы как навигационные элементы, содержательные блоки, акценты, взаимосвязи и т. д. По этой причине, цвет - крайне важный элемент дизайна web-сайта.
Комбинации цветов
Комбинация цветов очень важная часть теории цвета и дизайна, но в то же время самая сложная. Эта теория постоянно будет противоречить вашим собственным взглядам на сочетание цветов. Однако существуют специальные руководства, которые помогут вам разобраться в хитросплетениях создания цветовых комбинаций, которые будут интересны и приятны глазу.
Сколько цветов стоит использовать?
Сложно дать однозначный ответ на этот вопрос, но лучше использовать меньше цветов, чем излишне перегружать страницу разноцветьем. Обычно человеку становится тяжелее найти информацию на пестрящей цветами странице, кроме того, на такой странице, у него быстрее устают глаза.
С другой стороны, страница со слишком малым количеством цветов, может показаться слишком скучной, но не всегда так.
Одно из основных правил в этой области – использовать три цвета.
1. Главный цвет - это главный цвет страницы. Он з аймет самую большую площадь и придаст основной тон в сей странице.
2. Вторичный цвет - это второй цвет страницы, он дополняет основной цвет. Второй цвет достаточно близок к основному.
3. Цвет подсвечивания - этот цвет используется для выделения определенных областей на web-страницы. Обычно этот цвет более контрастен основному и вторичному цвету и должен использоваться в умеренных количествах. Обычно, в качестве этого цвета используют противосторонний цвет
Цветовой круг
Использование цветового круга поможет вам при комбинировании цветов. Ниже вы увидите несколько самых распространенных способов для комбинации цветов с помощью цветового круга.
Соседние (аналоговые) цвета
Соседние цвета те, которые лежат по обе стороны от какого-то определенного цвета.
Часто эта цветовая схема используется в природе.
На сайте, где используются соседние цвета, чувствуется гармония.
Вторичный цвет, который был описан выше, может быть как раз из оперы соседних цветов.
Дополняющие цвета
Дополняющие цвета те, которые располагаются прямо напротив друг друга в цветовом кольце.
Эти цвета полная противоположность друг другу.
Но это не помешает вам использовать такие цвета в качестве цвета подсветки, как было указано выше.
Дополняющие совмещенные цвета
Дополняющие совмещенные цвета те, которые являются соседними цветами противостороннего цвета.
Использование таких цветов поможет вам создать дизайн с высоким уровнем контраста, но все же не такой экстремальный, как при использовании чисто противостороннего цвета.
К тому же вы получите хорошие гармоничные сочетания.
Тройки цветов
Тройки цветов – это три цвета равноудаленные друг от друга на цветовом колесе.
Если вы хотите создать яркий, но сбалансированный дизайн, то схема с цветными тройками то, что вам нужно.
Другие цветовые сочетания
Кроме цветовых сочетаний основанных на цветовом колесе, которые были описаны выше, существует еще несколько способов комбинирования.
Монохромная цветная окраска
Схема монохромной цветной окраски – это один основной цвет и различные вариации насыщенности этого цвета. Эта схема будет хорошо смотреться, но все же, здесь присутствует риск получить скучные однотонный сайт. Если вы решили использовать однотонные цвета, то разбавляйте их чисто белым или чисто черным.
Монохромная черно-белая окраска
Схема монохромной черно-белой окраски включает в себя только нейтральные цвета в промежутке от белого до черного. Эта схема достаточно эффективная, но может выглядеть скучно. Такой «серый» вариант будет здорово смотреться с применением одного яркого цвета для создания акцента.
С теорией мы познакомились, теперь я дам Вам ссылку на инструмент, который позволит подобрать Вам цвета для сайта в автоматическом режиме.
Перейти к инструменту http://www. /colorwizard. asp
В область для ввода Enter hex code #, вводите значение цвета, который Вы хотите использовать в качестве основного и жмите Set. После этого скрипт выдаст Вам все подходящие цвета. Если нажимать по кнопкам Monocromatic, Analogous и т. д., то Вам будут выдаваться цвета в соответствии с тем, что было описано в теории.
Логотипы. Типы логотипов
Существует 3 основных типа логотипов, которые могут быть использованы как самостоятельно, так и в сочетании:
· Иллюстративные
· графические
· Текстовые
Стратегия создания логотипа
Передача образа. Кем Вы хотите быть для посетителей сайта, какую информацию, отношение и настрой хотите донести до них.
Индивидуальность. Ваш логотип должен быть уникальным, а значит, не напоминать что-то уже существующее и знакомое.
Если Вы используете в комплексе с логотипом некоторую речевку, то необходимо, чтобы они сочетались, были связанны по смыслу и легко запоминались
Простота. Визуальный образ должен быть понятным и не сложным.
Практическое задание:
Разработайте внещнюю и внутреннюю структуру будущего сайта. Подберите цветовую гамму самостоятельно(используя цветовые круги) или с помощью предложенного инструмента.
