Интернет - технологии - Новосибирский государственный

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение
высшего образования
«Новосибирский национальный исследовательский государственный университет»
Структурное подразделение Новосибирского государственного университета – Высший колледж информатики Университета
Дополнительная образовательная программа
по курсу «ИНТЕРНЕТ-ТЕХНОЛОГИИ»
Автор: Мерзляков М.А. - ст. преподаватель каф. «Информатика»
Рецензент: Минак А.Г. - доцент каф. «Информатика»
Новосибирск - 2015
1
Общие положения
Категория слушателей: учащиеся 5-11-ых классов общеобразовательных учреждений
Форма обучения: очная
Срок обучения: 72 академических часа
Режим занятий: 5 часов в день
Выдаваемый итоговый документ: по завершении обучения выдается удостоверение установленного образца
1. ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
1.1.
Актуальность программы
Благодаря бурному развитию Интернет-технологий и глобализации информационных ресурсов, веб-строительство стало отдельной специальностью, широко востребованной на рынке труда. Процесс веб-строительства сейчас утратил первоначальную простоту
и доступность сайтостроительства, благодаря которым Интернет появился, вырос и завоевал мир. Современные веб-страницы являются сплавом трех технологий, определяющих
логическую структуру документа (HTML), его представление (CSS) и поведение (JavaScript). Профессиональное создание веб-сайтов требует умения владеть в совершенстве
этими технологиями и быть готовыми к восприятию новых разработок, динамично внедряемых производителями браузеров задолго до утверждения стандартов. Сохранение
преемственности при отображении старого контента привело к сосуществованию различных, часто противоречащих стандартов. Требуется кросс-платформенность веб-страниц и
приложений, выросла роль программирования задач реального времени в распределенных
системах клиент-сервер. Ужесточились требования к информационной безопасности.
Коммерциализация сетевой активности, взрывной рост социальных сетей и революция
веб-приложений, война корпораций за мобильный сегмент сопровождаются жесточайшей
конкуренцией. Выживут и добьются успеха только те, кто способен ―поймать волну‖ и оставаться на переднем крае прогресса в этой бурно развивающейся отрасли.
Расцвет предложений инструментов быстрого создания веб-страниц, порождает у
новичков иллюзию простоты и легкой доступности, склоняет к бездумному использованию набора шаблонов. Настоящий курс призван оградить учащихся от такого поверхностного потребительского подхода, заинтересовать глубоким пониманием основных идей и
принципов и дать базовые знания, позволяющие свободно ориентироваться в этом бурлящем и изменчивом Интернете и творчески самовыражаться, создавая интересные высокопрофессиональные сайты.
Цель программы: Теоретическое изучение и практическое освоение технологии проектирования, наполнения и поддержки сайта.
1.2.
1.3.
Задачи программы:
Формирование понимания преимуществ цифровых технологий, а также
причин появления и принципов построения и функционирования локальных сетей и глобальной сети Интернет;
Изучение основных приемов эффективного использования информационных ресурсов. Знакомство с основными поисковыми системами Интернета и их возможностями,
Формирование умения создавать и редактировать собственные рисунки,
изображения, текстовую и числовую информацию;
Изучение основ веб-дизайна;
2
освоение языка гипертекстовой разметки HTML и технологии CSS
управления отображением с помощью каскадных таблиц стилей;
формирование представления об объектной модели документа DOM,
объектной модели браузера BOM и динамическом изменении страницы
без ее перезагрузки;
овладение основами объектно-ориентированного программирования на
примере языка JavaScript.
1.4.
Ожидаемые результаты освоения программы.
В результате освоения курса слушатель должен знать:
преимущества цифровых технологий;
принципы функционирования локальных сетей и глобальной информационной сети Интернет;
основные поисковые системы и их возможности;
язык гипертекстовой разметки HTML;
технологию визуализации веб-страниц с использованием каскадных таблиц стилей CSS;
основы веб-дизайна;
основы программирования на языке JavaScript;
иметь представление об объектной модели документа DOM, объектной
модели браузера BOM и взаимодействии JavaScript с ними;
иметь представление об объектно-ориентированном стиле программирования, о программировании в распределенных системах.
В результате освоения курса слушатель должен уметь:
практически использовать технологии проектирования, наполнения и
поддержки сайта;
готовить текст и иллюстрационный материал для сайта;
провести поиск информации в Интернете и сохранить ее в необходимом
формате;
с помощью Adobe Photoshop создавать, редактировать и оптимизировать
для WWW графические изображения, включая анимацию;
создать, разместить в сети Интернет и поддерживать сайт, спроектированный и созданный им на занятиях.
2. СТРУКТУРА И СОДЕРЖАНИЕ УЧЕБНОЙ ДИСЦИПЛИНЫ
2.1. Учебно-тематический план
3
Количество часов
Всего
часов
Наименование раздела
1. История развития, основные идеи и принципы
2. Локальные сети. Интернет. Ресурсы и службы Интернета
3. HTML - язык гипертекстовой разметки страниц.
4. Объектная модель документа.
5. Каскадные таблицы стилей
6. Объектно-ориентированное
программирование.
Практическое освоение языка JavaScript.
Итого:
Лекции
Практические
занятия
2
2
0
8
3
5
22
2
8
8
1
3
14
1
5
30
8
22
72
25
47
2.2. Содержание курса
Тема 1.
История развития, основные идеи и принципы.
Локальные сети. Устойчивость к повреждению каналов связи. Коммутация каналов
и коммутация пакетов. Топология сетей. Маршрутизаторы. Модемы. Сеть сетей Интернет.
Надѐжность связи, отношение сигнал/шум и цифровые технологии. Двоичная система. Цифровая и аналоговая связь вокруг нас. Дискретизация звука, сканирование
изображения, оцифровка видео. Шифрование. Электронная подпись.
Стандартизация общения разнородных программ, операционных систем и компьютеров. Сетевые протоколы.
Тема 2.
Локальные сети. Интернет. Ресурсы и службы Интернета
Сеть класса, колледжа, рабочая станция, сервер, прокси-сервер.
Ресурсы и службы Интернет.
Адресация. URL и name-сервер. Команды ping и tracert.
Web-узел и web-страница.
Сетевое общение. Преодоление языковых барьеров. Сетевые переводчики и словари.
Освоение работы с электронной почтой. Проблема кодировок. Участие в работе
дискуссионных групп. Подписка на листы рассылок. Форумы. Chat. Интернетпейджер. Сетевое радио- и телевещание. IP-телефония, социальные сети.
Работа на удаленном компьютере через Интернет по протоколу Telnet.
4
Поиск текстовой информации, изображений, музыки, фильмов. Поиск файлов и программ. FTP-протокол и FTP-сервер. Сжатие файлов и распаковка. Принципы сжатия
текстовой информации, звука, изображения, видео.
Путешествие по Сети. Покупки в web-магазинах. Электронные книги, журналы,
библиотеки. Web-музеи. Миллионы web-камер – круглосуточно. Учеба, работа и
развлечения.
Сетевой этикет. Авторское право.
Вирусы и защита от них. Хакерство и уголовная ответственность.
Тема 3.
HTML - язык гипертекстовой разметки страниц.
Основы HTML, особенности HTML5. Структура HTML-документа. Контейнеры.
Форматирование текста. Физические и логические стили. Создание списков. Шрифты. Управление цветом.
Гиперссылки. Ссылки внутри текущего документа, на файлы в других директориях,
на другие компьютеры Сети.
Графика. Форматы. Вставка изображений. Фон. Анимация.
Графическое изображение в качестве гиперссылки.
Навигационные карты. HTML5. Основы Canvas.
Звуковое оформление. Форматы звуковых файлов.
"Плавающие" фреймы. Внешний вид и функциональность.
Создание навигационного меню.
Модель таблиц HTML.Упорядочивание данных (текст, форматированный текст,
изображения, ссылки, формы, поля форм, таблицы в таблицах).
Наследование свойств и их переопределение.
Использование таблиц в дизайне страницы.
Формы как средство общения с посетителями. Отправка данных формы.
Работа с изображениями. Векторная и растровая графика. Графические форматы Интернета. Сжатие без потерь и с потерями. Качество изображения и размер файла.
Adobe Photoshop, создание и редактирование изображений, оптимизация для публикации в Сети.
Хостинг. Публикация страницы в Интернете. Поддержка и развитие сайта.
Создание динамических страниц, интерактивность, спецэффекты.
Мультипликация.
Тема 4.
Объектная модель документа и браузера. Введение.
5
DOM- и BOM-элементы.
Дерево документа.
Динамическое изменение страниц.
Тема 5.
Каскадные таблицы стилей
Эффективность разделения логики (HTML), отображения (CSS) и поведения (JavaScript) документа.
Базовый синтаксис CSS. Селекторы.
Способы задания правил отображения. Конфликты правил и их разрешение. Приоритеты правил.
Наследование, каскадирование.
Классы и псевдоклассы.
Позиционирование. Управление видимостью.
Тема 6.
Объектно-ориентированное программирование.
Особенности веб-программирования и проблемы совместимости.
Распределенные системы. Модель ―клиент-сервер‖; ядро, серверная и клиентская составляющие JavaScript; интерактивное взаимодействие с HTML-документом, JavaScript;
Практическое освоение языка JavaScript
Синтаксис языка JavaScript. Документ, сценарии, функции; переменные, типы данных, выражения, основные операторы языка.
Встраивание в HTML-документ.
Объектная модель JavaScript:
Иерархия объектов, свойства объектов, методы объектов, наследование;
некоторые встроенные объекты и их свойства.
События, обработчики событий;
3. УСЛОВИЯ РЕАЛИЗАЦИИ ПРОГРАММЫ
3.1.
Требования к минимальному материально-техническому обеспечению
Реализация программы дисциплины требует наличия аудитории и компьютерного класса с
доступом в Интернет.
Программное обеспечение:
Firefox, Opera, Internet Explorer, Chrome
Adobe Photoshop
3.2.
Информационное обеспечение обучения
Перечень рекомендуемых учебных изданий, интернет-ресурсов, дополнительной литературы
6
Основные источники:
1. П. Лабберс, HTML5 для профессионалов. М.: ООО "И.Д. Вильямс», 2011.
2. Введение в HTML5 : http://www.intuit.ru/studies/courses/679/535/info
3. HTML5. Основы клиентской разработки:
http://www.intuit.ru/studies/courses/3734/976/info
4. Введение в HTML и CSS: http://www.intuit.ru/studies/courses/1005/276/info
Справочник Javascript: http://javascript.ru/manual
5. Б. Лоусон, Р. Шарп. Изучаем HTML5. Библиотека специалиста. СПб.: Питер, 2011.
6. Б. Хенник. HTML и CSS. Путь к совершенству, СПб.: Питер, 2011.
7. В. Дронов. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. СПб.:
БХВ-Петербург, 2011.
Дополнительные источники:
1. Э.Бадд, К.Молл, С.Коллизон. Мастерская CSS: профессиональное применение
Web-стандартов. Пер. с англ. –М.: ООО ―И.Д. Вильямс‖, 2007. -272 с.
2. А.И.Сурин, Александр Русак, С.А.Брик, Павел Храмцов. Основы WEBтехнологий. М.: ИТУИТ.РУ, 2003. – 512 с.
3. David Flanagan. JavaScript: Подробное руководство. 2008
4. Д. Гудман, М. Моррисон. JavaScript. Библия пользователя. , 5-е издание. -2006,
1184 с
5. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. СПб.: Символ-Плюс, 2001. 376 с.
6. Хамбракен Д., Компьютерные сети: Пер. с англ., М.: ДМК Пресс, 2004. — 448 с.
7. Олифер В.Г. Олифер Н.А. "Основы сетей передачи данных" М., ИнтернетУниверситет Информационных Технологий. 2003г.
4.
КОНТРОЛЬ И ОЦЕНКА РЕЗУЛЬТАТОВ ОСВОЕНИЯ ДИСЦИПЛИНЫ
Контроль и оценка результатов освоения дисциплины осуществляется преподавателем в процессе проведения практических занятий, тестирования, а также выполнения
обучающимся индивидуальных заданий, проектов.
Результаты обучения
Формы и методы контроля
(освоенные умения,
и оценки результатов обучения
усвоенные знания)
Знание основных принципов
Тестирование и практическая работа
цифровой связи, устройства и
функционирования сетей, умение
использовать информационные
ресурсы Интернета.
Знание языка гипертекстовой раз- Практическая работа
метки HTML
Владение технологией визуализа- Тестирование и практическая работа
ции веб-страниц с использованием
каскадных таблиц стилей CSS
Умение управлять интерактивным Практическая работа
поведением веб-страниц на основе
DOM, BOM и JavaScript.
7
Умение спроектировать свой сайт, Защита проекта.
наполнить его содержимым и разместить в сети Интернет
5. ОЦЕНОЧНЫЕ СРЕДСТВА
Вопросы для тестирования
Организации связей между ресурсами с помощью гипертекстовых ссылок
Формы и ввод данных.
Каскадные таблицы стилей, их предназначение и область применения.
Управление видимостью, положением и позиционированием элементов.
CSS представление текстовой информации
Спецификации таблиц стилей, зависимых от типа носителя
Блочные и строковые элементы
Основные конструкции языка JavaScript. Управление потоком выполнения.
Объектная модель документа
Примеры упражнений
1. Найти в Интернете изображение елочки. Используя это единственное изображение, создать страничку с первым куплетом песни ―В лесу родилась елочка…‖, заменив слово ―лес‖ изображением трех елочек, слово ―елочка‖изображением маленькой елочки, ―росла‖ – тремя картинками: маленькой елочки, побольше и выросшей, ―стройная‖ – изображением вертикально вытянутой
елочки, слово ―зеленая‖ отобразить зеленым цветом, а ―была‖ – зачеркнуть.
2. Создать в Adobe Photoshop изображения мигающего светофора, часов с вращающимися стрелками.
3. Реализовать при первом посещении странички запрос имени посетителя и сохранение ответа на его же компьютере, при последующих посещениях приветствовать посетителя, называя его по имени.
Примеры задач
1. Найти спутниковое изображение своего дома и оценить время последнего обновления изображения.
2. Предположим, что сегодня в г.Томске в 10 часов произошел аварийный выброс
атмосферных загрязнений. Есть ли угроза Новосибирску? Когда облако ждать в
Новосибирске, если ветер изменит направление (но не скорость) и будет дуть
точно в нашу сторону?
3. Создать в Adobe Photoshop изображение лодки, плывущей по экрану навстречу
бегущим волнам.
4. Создать страничку с шахматной доской, белым конем на поле b1 и черной пешкой на c3. При клике мышкой на фигуре коня он должен переместиться на поле
c3, а пешка оказаться радом с доской.
5. Без использования JavaScript создать страничку с фотографией группы людей и
списком изображенных. При наведении курсора на лицо должна в списке подсвечиваться его фамилия. При наведении курсора на фамилию вокруг соответствующего лица должна появляться тонкая рамка.
8
6. Создать страничку, позволяющую читателю по дате рождения узнать в какой
день недели он родился.
9