Урок 24. Скоро День Победы

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

Ребята, послезавтра в 70-й раз в нашу страну приходит День Победы.

Еще живы некоторые участники Великой Отечественной Войны, «бойцы фронта и тыла»...

Уже давно выросли их дети и внуки...

Вы — представители поколения, которое родилось через 50 лет после этой страшной войны.

Что вы знаете о той войне? Как к ней относитесь? Что вам рассказали ваши родные?

Вот сейчас мы предлагаем вам остановиться, задуматься.

Творческое задание

Весной прошлого года каждый из вас создал свой блог

1. Найдите этот учебный блог, войдите в него (Сервисы Google -- Еще -- Другие сервисы -- Blogger -- Просмотреть блог)
2. За 2 урока создайте сообщение (пост) "Посвящается Дню Победы"
3. Можно создать коллаж в Gimp
4. Можно сделать обзор мероприятий, посвященных Дню Победы
5. Можно просто написать свои мысли об этом дне, о войне и мире

Задание не такое простое, как кажется. Удачи вам!

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

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

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

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

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

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

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

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

  

Приглашение на кубок КИТ

 Ребята! Вместе с результатами КИТа в этом году мы получили письмо - приглашение на дистанционное соревнование "Кубок КИТа". (Участие - бесплатное). Команда - 3 человека. Соревнование состоится (С нами или без нас) 25.04.15, в субботу с 9.30 до 11 час. Требуются смельчаки - 3 человека. Желательно: технари + гуманитарии!

Вот что пишут о Кубке его организаторы

Командный кубок "Кита" мы проецируем как неофициальный командный чемпионат России между школами Российской Федерации. Почему мы делаем столь смелое завление? Потому что к участию в этом соревновании мы приглашаем более 3000 образовательных организаций, отобранных из более чем 10000 школ, принявших участие в конкурсе "Кит", который состоялся 19 ноября 2014 года. Положение о проведении кубка можно посмотреть здесь.

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

Урок 22. Изображения на страницах сайта

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

В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, и наоборот (слайды 17 -22).
Подробнее о форматах можно прочитать ЗДЕСЬ.
Давайте теперь обратим внимание на размеры изображения (высота и ширина).Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины. 
Поэтому рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно — картинка выводится браузером с искажением. Если указание размеров вовсе опущено — на экране происходит маленькое землетрясение в момент прихода картинки из сети. Ведь, не зная размеров картинки, браузер оставляет под нее на экране стандартный прямоугольник, продолжая строить остальные элементы. Когда картинка загружена, браузеру приходится полностью перерисовывать экран. 

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

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

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

Списки

Список — форма представления объектов в виде перечисления элементов. Форматирование каждого элемента списка — одинаковое.
Объектами списка могут быть тестовые абзацы, картинки и другие списки
В HTML список оформляются как контейнер (парный тег), включающий в себя по одному тегу для каждого элемента списка

Таблицы

Таблица  - форма представления информации в виде, удобном для анализа. Таблица состоит из строк, которые разделены на ячейки.  Внешний контур таблицы и ее частей  — прямоугольный.
Язык  HTML позволяет  управлять видом  таблицы в целом, а также каждой строки, ячейки.
В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей окна браузера, выравнивания элементов в окне, многоколонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала.
Разметка таблиц
Парный тег: <table>  создает объект Таблица. Внутрь него помещаются строки – парный тег <tr>, а внутрь строки помещается нужное количество ячеек – парный тег <td>. В прямоугольной таблице число ячеек в каждой строке одинаковое. Ячейки и строки можно объединять.

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

1. В категории сайта добавить 2015-10
2. Оформить в виде списка:
   
   
   • Перечень профессий на странице Профессии
   • Перечень ссылок на веб-страницы на странице Ссылки
   
   
3. Оформить в виде таблиц
   
   
   • Главная страница - таблица 2 х 1 (Изображение + текст). Ширина - 100%.
     Сегодня ввести текст и подпись фотографии
   • ВУЗы, где этому научат - таблица 2 х N строк , где в первой ячейке  название ВУЗа, которое является ссылкой, а во второй ячейке - изображение ВУЗа.
     Ширина - 100%. Сегодня ввести текст и подпись под фотографиями.
     Таких строк - N штук
   • Портфолио - таблица 2 х M строк , где в каждой ячейке  будет находиться изображение, сделанное автором сайта во время изучения GIMP, которое является ссылкой, Ширина - 100%. Сегодня ввести текст и подпись под фотографиями. Таких строк - M штук. Про ссылки поговорим позднее
4. Подобрать иллюстрации к ВУЗам. Найти в сети фотографии соответствующих ВУЗов
   

Урок 20. Разработка веб-сайта в облачной среде

Что такое сайт

Сайт - это система электронных документов в компьютерной сети под общим адресом (доменным именем или IP-адресом). 
Первый в мире сайт info.cern.ch появился в 1991 году. Его создателем был Тим Бернерс-Ли

Ваша задача - построить свой самый первый Google - сайт. 

Тема сайта - "Перспективные профессии в одной из отраслей Российской экономики" 
Например,  "Перспективные профессии в медицине"
Перечень отраслей и перечень профессий возьмем в Атласе новых профессий  

A. Продумайте структуру и состав сайта

Что такое структура сайта?

Выберите в Атласе интересующую вас отрасль экономики. Ваш сайт должен включать следующие страницы:

1. Главная страница - характеристика выбранной отрасли экономики (текст + иллюстрация)
2. Профессии - список профессий и их краткая характеристика (список)
3. Вузы, в которых этому научат (таблица, ссылки, изображения)
4. Потенциальные работодатели (список или таблица, ссылки)
5. Ссылки на источники (список WEB-страниц)
6. Портфолио автора  (таблица с GIMP- рисунками)

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

1. URL сайта: 

• 640-10-свои-инициалы-techno,  (латинскими буквами)
• например: 640-10-AT-techno 

2. Название сайта -- придумайте сами

3. Страницы также называются латинскими буквами. К каждой странице напишите аннотацию: 1-2 предложения о том, что будет на этой странице.

B. Создайте Google - сайт

1. Для этого  в Приложениях Google (Вкладка Почта или Диск) выберите Сайты, затем нажмите красную кнопку слева - СОЗДАТЬ. 
2. Выберите пустой шаблон.
3. Название сайта, Местоположение -- в оба поля сначала введите URL сайта (Позже обязательно ИЗМЕНИТЬ Название сайта!). 
4. Выберите тему сайта (ее потом можно будет заменить)
5. Заполните Другие возможности:
• В категории сайта укажите - образование, технология, 2015-10 
• Краткое описание (аннотацию), в котором также укажите свою фамилию как автора сайта.
Сохраните сайт!

C. Измените Название сайта, Установите доступ

Выберите Дополнительные действия -- Управление сайтом -- 

• Общие: Найдите поле Название сайта и введите осмысленное название (НЕ URL )
• Общий доступ: Читать могут пользователи домена ГБОУ школы 640, обладающие ссылкой;
• Общий доступ: Учителю предоставьте доступ редактора.
• Темы, цвета и шрифты: можно их поменять

Остальные параметры настроим позже. 
Сохраните.

D. Создайте отдельные страницы в соответствии с нарисованной в тетради структурой

1. В основном меню  выберите значок  Создать страницу, 
2. Укажите название страницы + ее номер в списке страниц. (Совет: пишите номер + название русскими буквами, конструктор сам переведет название в латиницу)
3. Укажите размещение страницы -  поместить страницу на верхний уровень
4. Шаблон - веб-страница (или сознательно выберите что-то другое)
5. Внесите на каждую страницу текст аннотации

Не забывайте сохранять изменения!
Учителю пришлите письмо, в котором укажите URL - адрес своего сайта и его название

Урок 19. Итоговая работа в GIMP

В плакате объединим несколько изображений и красивый текст.
Завершенный плакат экспортируем в формат jpg.
В конце работы постарайтесь все созданные вами изображения в формате  jpg, gif, png перенести в вашу папку на облачном диске
Подготовка к работе
Практическая работа