вторник, 20 декабря 2016 г.

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

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

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

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

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

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

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


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

среда, 14 декабря 2016 г.

Урок 18-19. Списки на страницах сайта

Списки

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

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

  1. Оформить в виде списка:
    • Перечень профессий на странице Профессии
    • Перечень ссылок на веб-страницы на странице Ссылки
  2. Подобрать иллюстрации к ВУЗам. Найти в сети фотографии соответствующих ВУЗов, скачать их, поместить в папку на своем локальном ПК

вторник, 6 декабря 2016 г.

Урок 16-17. Разработка веб-сайта в облачной среде и первая попытка стать IT-специалистом

Дата проведения занятия 7.12.2016

ЧАСТЬ 1

Посмотрите мотивационный ролик акции “Час кода” на сайте www.часкода.рф с участием звезд и представителей отрасли информационных технологий (ИТ)

А затем познакомьтесь с сайтом Буду Гуру и узнайте, как стать настоящим интернет-профессионалом.
Обязательно пройдите тест: В меню слева --Профессии --Кем стать? --Тест на профориентацию
Познакомьтесь с Атласом профессий и с Экосистемой IT

ЧАСТЬ 2

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

Сайт - это система электронных документов в компьютерной сети под общим адресом (доменным именем или IP-адресом). 
Первый в мире сайт info.cern.ch появился в 1991 году. Его создателем был Тим Бернерс-Ли
Ваша задача - построить свой самый первый Google - сайт. 
Тема сайта - "Перспективные профессии в одной из отраслей Российской экономики
Например,  "Перспективные профессии в медицине"
17.04.2015  Агентство стратегических инициатив выпустило обновленную версию Атласа новых профессий, продемонстрировав результат масштабных исследований с участием более 2,5 тыс экспертов. Поэтому и мы перечень отраслей и перечень профессий возьмем в Атласе новых профессий-2016 

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

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

В  тетради для контрольных работ  схематично  изобразите внутреннюю структуру сайта, дайте  URL   и название сайту и отдельным страницам в соответствии с выбранной темой 
1. URL сайта: 
  • 640-10-свои-инициалы-techno,  (латинскими буквами)
  • например: 640-10-AT-techno 
2. Название сайта -- придумайте сами
3. Страницы также называются латинскими буквами. К каждой странице напишите аннотацию: 1-2 предложения о том, что будет на этой странице.

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

  1. Внимание! Мы будем работать с обновленной версией Google-сайтов, которая недавно появилась. Поэтому работаем в режиме исследования!
  2. Для создания обновленного сайта  в Приложениях Google (Вкладка Почта или Диск) выберите Сайты, затем в самой нижней строке выберите ссылку Справочный центр, вы попадете на страницу со справочной информацией по созданию обновленных сайтов
  3. Создайте обновленный сайт с вашим  URL .
  4. Выберите тему сайта (ее потом можно будет заменить)

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

Выполните эти действия в соответствии со справкой по сайтам

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

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

вторник, 29 ноября 2016 г.

среда, 23 ноября 2016 г.

Урок 12-13. Подготовка к контрольной работе

Дата проведения этого урока 23.11.16
Напоминаем: 30.11.16, в среду, состоится контрольная работа по теме Операционная система
Посмотрите, на какие вопросы надо обратить внимание и   какие  задачи решить  при подготовке к контрольной. Обратите внимание: в этом документе не только приведены примеры решения задач, но и даны задачи для самостоятельного решения
А сейчас разберем решение некоторых типов задач, которые будут на контрольной.
Найдите по ссылке Тренировочные задачи и решите их 

вторник, 8 ноября 2016 г.

Урок 10-11. Сжатие данных

  1. Избыточность данных

Приложения создают документы, обладающие избыточностью
Наиболее избыточны видеоданные, менее – графические данные, еще менее – тексты
Интересно, что документы на русском на 20-30% избыточнее документов на английском языке!
  1. Объекты сжатия

    Объект
    Цель сжатия
    Файл
    Хранение, подготовка к передаче
    Папка
    Длительное хранение
    Диск
    Повышение эффективности использования
  2. Обратимость сжатия

Уменьшения избыточности можно добиться:
  • изменением содержания данных;
  • изменением структуры данных;
  • сочетанием обоих методов.
Изменение содержания данных -
необратимое сжатие
(Методы сжатия с регулируемой потерей информации)
Обычно обеспечивают гораздо более высокую степень сжатия, чем обратимые
Изменение структуры данных -
обратимое сжатие
Применимы только для тех типов данных, для которых формальная утрата части содержания не приводит к значительному снижению потребительских свойств
Нельзя применять к текстовым документам, БД, к программному коду.
Можно применять к мультимедийным данным:
  • видеоряды;
  • музыкальные записи;
  • звукозаписи;
  • рисунки и др. графические данные

Применимы для всех типов данных
Можно применять к текстовым документам, БД, к программному коду.
Из результирующего кода можно восстановить исходный массив данных путем применения обратного метода.

Характерные форматы сжатия с потерей информации:
  • .JPG – для графических данных;
  • .MPG, .MPG4 – для видеоданных;
  • .MP3 – для звуковых данных
Характерные форматы сжатия без потери информации:
  • .GIF, .TIF,  .PNG, .PCX и др. – для графических данных;
  • .AVI – для видеоданных;
  • .ZIP, .RAR, .7Z, .ARJ, .LZH, .LH и др. – для всех типов данных

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

можно посмотреть здесь.

Практическая работа на ПК Архивация  

Во время этой работы на ПК надо создать несколько архивов с помощью архиватора 7-zip

Практическая работа разархивация

вторник, 25 октября 2016 г.

Урок 8-9. Файловая система компьютера


Часть 1. Файловая система
Файловая система — часть ОС, определяющая способ организации, хранения и именования данных на носителе информации.

Файловые системы решают следующие задачи:
  • определяют правила построения имён файлов и каталогов
  • поддерживают программный интерфейс работы с файлами для приложений
  • определяют порядок размещения файлов на диске
  • обеспечивают защиту данных в случае сбоев и ошибок
  • обеспечивают установку прав доступа к данным для каждого конкретного пользователя
  • обеспечивают совместную работу с файлами
Посмотрим презентацию, чтобы подробнее познакомиться с Файловой системой компьютера 

 Часть 2. Сравнение различных ОС

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

вторник, 11 октября 2016 г.

Урок 6-7. Операционная система компьютера

Чтобы компьютер можно было использовать, на него нужно установить программное обеспечение (ПО).
 Обычно выделяют три вида ПО: системное ПО, прикладное ПО, системы программирования.
До недавнего времени ПО было жестко привязано к определенной операционной системе (ОС). В последние годы разработано много кроссплатформенных программ, у которых есть версии для разных ОС. Например, для работы в ОС Windows и в ОС Linux.
Рассмотрим более подробно системное ПО.

Операционные системы

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

Операционная система обеспечивает:
  • взаимодействие пользователя и аппаратных средств (интерфейс пользователя);
  • обмен данными между прикладными программами и устройствами компьютера (аппаратно - программный интерфейс);
  • работу файловой системы  (хранение данных в виде файлов и папок);
  • запуск и выполнение прикладных программ;
  • обработку ошибок, контроль за работой оборудования;
  • распределение ресурсов компьютера между работающими программами (время работы процессора, память, внешние устройства)
Первые ОС появились на компьютерах второго поколения и были однозадачными.
Для увеличения загрузки процессора был разработан пакетный режим обработки заданий (В разные области памяти загружалось несколько программ, пока одна программа осуществляла ввод/вывод данных, процессор переходил к выполнению следующей программы).
На компьютерах третьего поколения часто применялся многопользовательский режим (режим разделения времени).
Хотя персональные компьютеры (ПК) относятся к пятому поколению компьютеров, ОС на первых ПК были однозадачными.
Все современные ОС - многозадачные, ОС распределяет время работы процессора между запущенными на выполнение программами, выделяя каждой из них кванты времени, так что создается впечатление одновременной работы нескольких программ.

Современные операционные системы

Самые популярные операционные системы для ПК: Windows (90%), MAC OS (5%), Linux (1%)
ОС Windows разработана фирмой Microsoft, коммерческая разработка
MAC OS устанавливается на компьютеры фирмы Apple, коммерческая разработка.
Linux - свободное ПО.  Linux  начал разрабатывать финский студент Линус Торвальдс. Сейчас в разработке Linux принимают участие сотни разработчиков.

Самые популярные операционные системы для мобильных устройств: Android, Apple iOS, Symbian‎, Windows CE (Windows Phone)
Практическая работа на ПК 

Домашнее задание
Подготовить в своем блоге не позднее 25.10.16 короткое сообщение об одной из ОС для ПК или мобильных устройств: Windows, MAC OS, Linux, Android, Apple iOS,‎  Symbian‎, BlackBerry, Windows CE (Windows Phone). Ссылки на ваши блоги находятся здесь.   Напоминаю вам темы, которые вы выбрали 

вторник, 27 сентября 2016 г.

Урок 4-5. Службы Интернет. Право и этика в сети. Электронная коммерция

Компьютеры в сети взаимодействуют по модели "Клиент-Сервер"
ПО-Клиент запрашивает  определенные услуги, ПО-Сервер предоставляет эти услуги.
ПО-Клиент и ПО-Сервер образуют службу (сервис) сети. Поскольку пользователям требуются различные услуги, то и службы в сети существуют различные.
Каждая служба работает по своему сетевому протоколу.
Под протоколом понимают правила взаимодействия компьютеров и правила формирования сообщений.
Самостоятельно прочитайте информацию о сетевых протоколах,
а также об основных сетевых службах (информация находится на сайте школы 497 Невского района Петербурга)
О компьютерной этике дополнительно можно прочесть в Википедии
Особенно важно решать правовые вопросы, когда мы касаемся темы электронной коммерции
Освоив новую информацию переходите к практике

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

вторник, 13 сентября 2016 г.

Урок 2-3. Облачные технологии. Школьный аккаунт. Школьная почта

Представление о школьной сети

Какие типы сетей вы знаете? Посмотрите презентацию Виды компьютерных сетей
  1. Назовите основные особенности этих сетей.
  2. Какое оборудование используется в сетях 
  3. Как называется наиболее известная глобальная сеть? (Интернет)
  4. Из чего образуется сеть Интернет 
  5. Допускаете ли вы возможность существования другой глобальной сети? Чем они могут отличаться? (разные, несовместимые способы представления данных).

Сетевые коммуникации. Модель «клиент-сервер»

Если люди,  удаленные друг от друга, то  для коммуникации им  нужны услуги какой-то службы (сервиса)
В сети  необходимо обеспечить обмен между компьютерами.
Если компьютер посылает запрос на обслуживание, то на этом компьютере должна быть установлена программа-клиентЕсли компьютер должен обслуживать запросы, то на нем должна быть установлена программа- сервер 
Сервер школьной локальной сети обеспечивает работу с глобальной сетью Интернет.
Для школы 640 в Интернет создана закрытая область - домен с адресом: school640.ru 

В этом домене создан официальный сайт школы 640. Чтобы попасть на школьный сайт, надо открыть программу - клиент, которая называется браузер.
Мы работаем с браузером Google Chrome.

Электронная почта

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



Рассмотрим основные возможности этой службы:

  1. Работа с письмами
  2. Маркирование писем
  3. Защита от спама
  4. Контакты и группы
  5. Ярлыки - категории писем
  6. Фильтры
  7. Настройки почты

Документ  Gmail   описывает перечисленные выше возможности, но следует учесть, что все инструменты Google очень быстро развиваются, поэтому детали содержания этого документа могут устареть...

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

вторник, 6 сентября 2016 г.

Урок 1. Техника безопасности в компьютерном классе. Медиабезопасность

Уважаемые десятиклассники! Начинаем новый учебный год.
1. Вспомним, что такое техника безопасности в компьютерном классе. Посмотрите презентацию о технике безопасности, отметьте в тетради правильные утверждения. Давайте совместно обсудим ответы, затем  вы распишетесь в журнале по технике безопасности.

2. А теперь посмотрите тесты-викторины, которые создали для вас ученики 11 класса. Выберите один тест, ответьте на вопросы, отошлите результат.

3. Кроме соблюдения правил техники безопасности по отношению к оборудованию, следует позаботиться о медиабезопасности, то есть о безопасной работе в сети Интернет. Посмотрите материал  на эту тему.

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

Домашнее задание на 14 сентября
  1. Принести тетрадь для контрольных работ (18 листов)
  2. Вспомнить  логин и пароль для входа в свой аккаунт школьной сети
  3. Вспомнить структуру школьной сети 
  4. Познакомить своих друзей и близких с Тестом словарного запаса

среда, 11 мая 2016 г.

Урок 30. Подведем итоги...

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

  • Устранить замечания, замеченные во время просмотра сайта
  • Подкорректировать пост, посвященный Дню Победы
  • Подкорректировать пост, в котором рассказывается о вашем сайте

Желаем всем удачи!

среда, 4 мая 2016 г.

Урок 29. Великой Победе посвящается...

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



Ребята, через несколько дней вся страна будет отмечать 71-й раз  День Победы.
Еще живы некоторые участники Великой Отечественной Войны, «бойцы фронта и тыла»...
Уже давно выросли их дети и внуки...
Вы — представители поколения, которое родилось через 50 - 60 лет после этой страшной войны.
Что вы знаете о той войне? Как к ней относитесь? Что вам рассказали ваши родные?
Вот сейчас мы предлагаем вам остановиться, задуматься.


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

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

среда, 27 апреля 2016 г.

Урок 27-28. Предъявляем свой сайт, оцениваем работу товарищей

Тема сайтов - "Перспективные профессии в одной из отраслей Российской экономики"
Сегодня вы демонстрируете Google-сайты, над которыми работали последние 5 уроков.
Давая это задание, мы, учителя информатики, преследовали несколько целей:
  1. Цель 1 - учебная. Эта цель состоит в том, чтобы научить вас использовать некоторые конструктивные элементы (списки, таблицы, изображения, ссылки) на страницах сайта.
  2. Цель 2 - профориентационная. Эта цель состоит в том, чтобы познакомить вас с профессиями, которые могут понадобиться стране в недалеком будущем.
  3. Цель 3 - технологическая. Эта цель состоит в том, чтобы показать вам, как можно структурировать информацию на страницах сайта  
На этом уроке вы посмотрите и оцените чужие работы. А через неделю мы вместе посмотрим лучшие сайты и послушаем разработчиков
Итак, автор сайта представляет свою работу. На выступление отводится 2-3 минуты.
Примерный план выступления
  • Показать главную страницу сайта, 
  • Назвать тему 
  • Рассказать, чем вам понравилась эта отрасль
  • Представить профессии
  • Показать наиболее интересную страницу сайта


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

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

Цель метода

Научить людей лучше понимать особенности своего мышления, контролировать свой образ мыслей и более точно соотносить его с поставленными задачами с целью более эффективного использования процесса мышления при решении проблем.
Технология оценки сайтов приведена ЗДЕСЬ Пожелаем всем нам успеха!

понедельник, 25 апреля 2016 г.

Будь готов предъявить сайт!

Ребята! Напоминаем, 28.04.16 - срок завершения работы с сайтом и предъявление сайта на всеобщее обсуждение.

  1. Посмотрите еще раз уроки с 22 по 26 и проверьте, все ли вы на сайте сделали.
  2. Затем подготовьте краткое представление своего сайта - и поместите этот текст + самую интересную иллюстрацию с сайта в свой блог
  3. Приготовьтесь защищать свою работу и оценивать чужую!
  4. Ссылки на ваши готовые сайты находятся здесь.


среда, 20 апреля 2016 г.

Урок 26. Интерактивность на страницах сайта

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

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

Практическое задание:


  1. Создайте еще одну страницу на своем сайте. Придумайте для нее интересное название.
  2. Пройдите по ссылке и зарегистрируйтесь на сайте. Для этого необходимо в верхнем правом углу выбрать Вход и выбрать пункт зарегистрироваться. При регистрации укажите свой логин как st640xy (где x - первая буква фамилии, y - первая буква имени).
  3. В качестве e-mail укажите свою школьную почту. Пароль выберите таким, чтобы его не забыть.
  4. Выберите одну из возможностей LearningApps и создайте увлекательный интерактив. Сохраните его.
  5. Под созданным упражнением Вы можете увидеть html-код для вставки этого приложения на Ваш сайт. Скопируйте и вставьте в html-код Вашей страницы.
  6. Аналогичным образом создайте временную шкалу (вариант упражнения на LearningApps) - развития Вашей отрасли.

среда, 6 апреля 2016 г.

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

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

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

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

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

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

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


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

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

На веб-странице можно размещать изображения только в тех графических форматах, которые распознаются браузером. Это форматы 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. Показать сайт учителю

среда, 30 марта 2016 г.

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

Списки

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

Таблицы

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

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

  1. Оформить в виде списка:

    • Перечень профессий на странице Профессии
    • Перечень ссылок на веб-страницы на странице Ссылки
  2. Оформить в виде таблиц

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

среда, 16 марта 2016 г.

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

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

Сайт - это система электронных документов в компьютерной сети под общим адресом (доменным именем или IP-адресом). 
Первый в мире сайт info.cern.ch появился в 1991 году. Его создателем был Тим Бернерс-Ли
Ваша задача - построить свой самый первый Google - сайт. 
Тема сайта - "Перспективные профессии в одной из отраслей Российской экономики
Например,  "Перспективные профессии в медицине"
17.04.2015  Агентство стратегических инициатив выпустило обновленную версию Атласа новых профессий, продемонстрировав результат масштабных исследований с участием более 2,5 тыс экспертов. Поэтому и мы перечень отраслей и перечень профессий возьмем в Атласе новых профессий-2015  

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. Заполните Другие возможности:
    • В категории сайта укажите - образование, технология, 2016-10 
    • Краткое описание (аннотацию), в котором также укажите свою фамилию как автора сайта.
    Сохраните сайт!

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

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

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

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

среда, 2 марта 2016 г.

Урок 20-21. GIMP. Итоговая работа


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

среда, 17 февраля 2016 г.

Урок 18-19. Специальные шрифты. Фильтры

Шрифты для заголовков

Термин «Антиквенный шрифт» в полиграфии обозначает семейство шрифтов, которые обладают общими графическими признаками: наличием серифов (засечек) в окончании штрихов и контрастом в толщинах вертикальных и горизонтальных линий, образующих графику знаков.
В конце 14 столетия в Европе зародился новый стиль письма. Прогрессивно настроенные люди раннего Возрождения, гуманисты, изучали и пропагандировали наследие Древнего Рима и Греции. В своей корреспонденции они использовали не готический стиль письма, а копировали более ранние формы начертания букв, которыми были написаны древние рукописи. Отсюда и название шрифта – «антиква», то есть, древний.

Акцидентный набор - Изготовление наборных печатных форм для печатания бланков, аттестатов, грамот, пригласительных билетов, свидетельств, меню, различных объявлений.

Гротески, Гротесковые шрифты, Рубленые шрифты (Sans Serif, Gothic)

Собирательное название шрифтов без засечек. В Англии и Франции они чаще называются Sans Serif, в Америке Gothic, в Германии Grotesk. Первый известный гротеск появился в Англии в 1816 г. в образцах шрифтов лондонского словолитчика Уильяма Кэзлона IV (William Caslon IV, 1780–1869).

Фильтры


По теории смотрим презентацию «Компьютерная графика и анимация». Часть I  (слайды 46 - 48)
Фильтры в GIMP – специальные процедуры обработки изображений, которые проводят с активным фрагментом (слоем, выделением) различные математические преобразования. В результате получается измененное изображение.Доступ к фильтрам: Меню — Фильтры
Фильтры разделены на группы, каждая из которых включает несколько процедур.
Домашняя работа
Готовиться к контрольной работе .  Здесь вопросы для контрольной.

среда, 10 февраля 2016 г.

Урок 17. GIMP. Работа с текстом

Создание и редактирование текста

Смотрим презентацию К.Ю.Полякова 
В графическом редакторе можно вводить текстовую надпись с помощью инструмента
Текст (А).
Текст появляется в виде отдельного слоя в диалоговом окне Слои. Этот слой помечен буквой Т.

К этому слою нельзя применить инструменты растрового рисования, т.к. шрифты являются одним из видов векторной графики. Зато текст на этом слое можно редактировать, а также применяются разные режимы освещенности, яркости, контрастности, прозрачность.
Текст имеет жесткие четко определенные границы, т.к .при его создании и изменении текста используется векторный контур. В то же время текст является растровым и имеет то же разрешение, что и обыкновенное изображение.
Диалоговая панель инструмента Текст позволяет устанавливать параметры текста: гарнитура, начертание, кегль, цвет
В GIMP можно использовать как имеющиеся в системе гарнитуры, так и семейства гарнитур Serif (для шрифтов с засечкам) и Sans (для шрифтов без засечек). Режим Антиалиасинг отвечает за сглаживание границ символов и его лучше включать. Чтобы закончить работу с текущим текстом, надо поставить птичку рядом с  «Использовать выбранный шрифт» и Закрыть окно.
Для создания декоративного текста отдельные слова или даже буквы лучше располагать в разных  слоях, что позволит перемещать их независимо друг от друга.
Для преобразования текста в  графический вид используются инструменты графического преобразования — поворот, перемещение, градиент, фильтры... При этом текст теряет свойства текста и становится графическим объектом.
Если вы проводите операции на текстовом слое, и затем позже пытаетесь редактировать текст, возникнет всплывающее сообщение, предупреждающее о том, что изменения будут отменены, и вам будет предложено три варианта:
  • создать новый текстовый слой с текстом существующего слоя, оставив существующий слой неизмененным.
  • отмена;
  • всё равно редактировать текст;
После того, как вы завершите редактировать текст, инструмент перерисует слой, удалив результат предыдущего действия.

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