Урок 27. Оценивание сайтов.

Тема сайтов - "Перспективные профессии в одной из отраслей Российской экономики"
Сегодня вы демонстрируете Google-сайты, над которыми работали последние 5 уроков.
Давая это задание, мы, учителя информатики, преследовали несколько целей:

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

На этом уроке вы посмотрите и оцените чужие работы. А через неделю мы вместе посмотрим лучшие сайты и послушаем разработчиков

Итак, автор сайта представляет свою работу. На выступление отводится 2-3 минуты.

Примерный план выступления

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

  Методика оценки сайта  

Давайте теперь вместе оценим, что получилось. Для оценки применим метод "6 шляп"
Для каждого из нас предназначены разные роли в зависимости от цвета "надетой" шляпы

Цель метода

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

Технология оценки сайтов приведена ЗДЕСЬ Пожелаем всем нам успеха!

Ссылки на Ваши сайты

Урок 26. Доработка сайта

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

Если Вы выполнили все задание:

Придумайте интерактив, посвященный теме Вашего сайта. Это может быть небольшой опрос, викторина, кроссворд или что-то интереснее и сложнее. Интерактив необходимо создать с помощью инструмента LearningApps.

Практическое задание:
1. Создайте еще одну страницу на своем сайте. Придумайте для нее интересное название.
2. Пройдите по ссылке и зарегистрируйтесь на сайте.

Для этого необходимо в верхнем правом углу выбрать Вход и выбрать пункт зарегистрироваться. При регистрации укажите свой логин как st640xy (где x - первая буква фамилии, y - первая буква имени).

В качестве e-mail укажите свою школьную почту.

Пароль выберите таким, чтобы его не забыть.

3. Выберите одну из возможностей LearningApps и создайте увлекательный интерактив.
4. Сохраните его.
5. Под созданным упражнением Вы можете увидеть html-код для вставки этого приложения на Ваш сайт. Скопируйте и вставьте в html-код Вашей страницы.
6. Аналогичным образом создайте временную шкалу (вариант упражнения на LearningApps) - развития Вашей отрасли.

Урок 25. Логотип и изображения на страницах сайта

На веб-странице можно размещать изображения только в тех графических форматах, которые распознаются браузером. Это форматы GIF, PNG, JPG (JPEG). Мы уже встречались с этими форматами, когда изучали графический редактор GIMP (Урок 15 этого блога)
Давайте освежим свои знания - посмотрим  слайды 16-22 презентации К.Ю.Полякова «Компьютерная графика и анимация». Часть II

В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, и наоборот (слайды 17 -22).

Подробнее о форматах можно прочитать  ЗДЕСЬ.

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

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

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

Среди всех изображений на сайте хочется обратить особое внимание на логотип.
Логотип сайта - небольшое графическое изображение, которое помещается в заголовок сайта. Логотип украшает сайт и привлекает пользователя. 
Удобно, если логотип сохранен в формате GIF или PNG на прозрачном фоне. А если вы выбрали формат JPG, то следует сделать растушевку от фона логотипа к  фону заголовка сайта

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

Практическая работа с сайтом
1. На локальном диске в своей папке по ИКТ создать папку web-img
2. Поместить в эту папку все изображения, которые вы хотите разместить на страницах сайта.
3. Подробно о том, как выполняются отдельные действия на сайте, читайте ЗДЕСЬ
4. В GIMP изменить, если требуется, размеры изображений.

Требования к каждому изображению:
Логотип не более, чем 100 х 100 пикселей
Ширина для своих изображений - не более 400 пикселей
Ширина для картинок с ВУЗами - не более 200 пикселей
Размер файла - 100 - 200 Кб
5. Показать папку с изображениями учителю
6. Установите логотип сайта:
- нажмите на кнопку Дополнительные действия (Шестеренка справа)
- изменить макет сайта
- изменить заголовок сайта
- пользовательский логотип
-выберите файл из своей папки с логотипом
7. В нести изображения в таблицы (загрузить с локального диска):
На главной странице .
Сегодня ввести текст и подпись к фотографии
На странице с ВУЗами: не менее 4-х картинок. Страница в итоге не должна занимать более 2-х экранов, лучше один экран
На странице Портфолио: 4 строки, в каждой строке по 2 изображения 
8. Показать сайт учителю


Динамика развития сайтов

Урок 24. Ссылки на страницах сайта

Итак, мы добрались до объекта, который впервые появился именно на WEB-страницах с легкой руки  Тима Бернерс-Ли, а уж потом перекочевал в другие приложения, например, в презентации и текстовые документы. Речь идет о гиперссылках.
Гиперссылка — это часть электронного документа, которая ссылается на другой элемент самого документа или на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной  сети. Посмотрите, как определяет гиперссылку наша любимая Википедия.
А вот что писал по поводу гипертекстовых документов А. А. Дуванов.
Обычный текст имеет линейную структуру. И хотя пользователь может читать любые его страницы и строчки, листая документ, автор предполагает, что текст читается по порядку. Сначала первая страница, потом вторая и так далее.
Некоторое нарушение линейности обычной книги вносят сноски, ссылки на другие страницы и ссылки на другую литературу.
Из массы линейной текстовой продукции выделяются словари, справочники, энциклопедии. Предполагается, что читатель обращается к такой книге для справки, а не читает ее всю подряд от корки до корки.
Возможности компьютера рождают принципиально новую идею: почему бы изначально не проектировать текст в расчете на возможность чтения не по-порядку, а по контексту. Такой подход позволяет разным пользователям просматривать текст, ориентируясь на свои вкусы, уровень владения темой и поставленные задачи.
Структура компьютерной книги становится существенно нелинейной, она даже перестает быть иерархической, а скорее напоминает спутанную рыболовную сеть или порцию спагетти, опрокинутую на пол.
Для навигации по такой сети предусматривается простой способ: те фрагменты документа, которые имеют переходы на другие его части, каким-то образом выделены. Простое интерфейсное действие на такой ссылке (нажатие на Enter или мышиный щелчок) перебрасывают пользователя в другой информационный узел.
Посмотрел, вернулся обратно, или, не возвращаясь, продолжил путешествие по новой ссылке.

Как отличить гиперссылку в тексте и воспользоваться ею? 

• гипертекстовые ссылки среди других элементов текста выделяются цветом (практически всегда) и подчеркиванием (иногда); 
• мышиный курсор на ссылке меняет свою форму и превращается в указующий перст (всегда!); 
• для перехода по ссылке необходимо щелкнуть по ней мышкой; 
• для возврата из ссылки можно использовать навигационную кнопку браузера Назад (Back). 
• ссылка может быть внутренней (переход внутри данного документа)
• ссылка может быть внешней (на объект вне данного документа)

Что может использоваться в качестве гиперссылки?

• фрагмент текста
• изображение

Практическая работа с сайтом

1. При создании ссылки в поле Отображаемый текст помещается тот текст, который становится ссылкой. В поле Связать с Веб-адресом помещается адрес WEB-страницы или документа. Каждая ссылка должна открываться В НОВОМ ОКНЕ
2. Перед тем, как нажать ОК, проверьте ссылку
3. На страницах ВУЗы и Потенциальные работодатели необходимо сделать ссылки на страницы соответствующих сайтов. Ссылкой может быть название вуза (Работодателя) или изображение!
4. На странице Ссылки необходимо привести ссылки на все сайты и документы, которые вы использовали при создании данного сайта. Возможно, какие-то ссылки уже встречались на ваших страницах - значит, их можно просто скопировать.
5. Оформите страницу Ссылки как список
6. Покажите работу учителю

Логотип сайта 

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