Урок открытия новых знаний, обретения новых умений и навыков по теме "Технология создания сайтов"

Технология создания сайта.

1). Для чего нужен сайт? Сайт – современный и эффективный канал коммуникации.

2)Классификация сайтов

По доступности сервисов:

• Открытые

• Полуоткрытые

• Закрытые

По природе содержимого:

• Статические

• Динамический

По схеме представления информации:

• Сайт-визитка - сайт представляет собой набор страниц, без средств интерактивного взаимодействия с пользователем. Две основные функции : коммуникация и интерактивность;

• Корпоративный веб-сайт. Функции корпоративного сайта - это создание имиджа фирмы, продвижение ее на рынке, хранение информации, коммуникация сотрудников друг с другом;

• Интернет-магазин — веб-сайт, рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, способа получения заказа и выписывающий счет на оплату;

• Информационный веб-сайт - это очень большой веб-ресурс, который предоставляет исчерпывающую информацию по определённой тематике, он привлекает только целевую аудиторию;

• Игровой портал - сложный развлекательный интерактивный проект, предусматривающий большую посещаемость и ресурсоемкость;

• Контент-проект– это сайт, как правило некоммерческой направленности, который представляет собой собрание текстов, статей и прочих файлов, основная задача которого – привлечение посетителей по определенной тематике. может представлять собой образовательный или развлекательный ресурс;

• Промо-сайт – это сайт созданный специально для продвижения какого-либо товара либо услуги или основного сайта компании, в рамках рекламной кампании и их существование регламентировано рамками самой рекламной кампании;

• Сайт-форум – это класс веб-приложений для организации общения посетителей веб-сайта. Термин соответствует смыслу исходного понятия «форум»;

• Блог – это сайт, представляющий собой интернет-дневник, или журнал, который ведется наподобие новостной ленты, при этом на каждую тему блога посетители могут оставлять свои комментарии.

3) Технологии создания сайта:

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

1. Вручную

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

Средства программирования:

1. текстовые редакторы программа для создания, отладки и редактирования программного кода приложений, написанных на языке гипертекстовой разметки и

2. специализированные редакторы программного кода редактор для программистов и разработчиков с возможностью подсветки синтаксиса, предпросмотром.

3. WYSIWYG (визуальные) редакторы хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. В основе работы визуальных web-редакторов лежит свойство WYSIWYG – What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.

Языки программирования:

• HTML(от англ.HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Язык XHTML является более строгим вариантом HTML

• CSS (Cascading Style Sheets) - это язык программирования, который используется для настройки и форматирования документов, написанных на языках разметки веб-сраниц. Каскадные таблицы стилей часто используются в паре с документами, написанными на HTML и XHTML. CSS - язык, без которого практически немыслим дизайн сайта.

• Java Script. Это язык, позволяющий писать различные скрипты, например, проверка введённых данных в форму, делать выпадающие меню, делать красивый и динамический сайт.

• PHP. Это скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. На данный момент он поддерживается практически всеми представителями хостинга, входит в «стандартный» набор для создания сайтов (LAMP – Linux, Apache, MySQL, PHP).

• MySQL. Данное программное обеспечение позволяет работать с базами данных, используя язык запросов SQL. MySQL - необходимая вещь для создания серьёзных сайтов.

• XML. Этот язык предназначен для реализации достаточно сложных корпоративных сетей.

1. С использованием конструктора сайтов

(Система управления содержимым—CMS, Сontent Management System, Content Management Software)

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

• создание динамического сайта на основе стандартного шаблона, путём добавления готовых блоков на вашу страницу.

• при помощи него можно настроить собственный дизайн или изменить внешний вид вашего сайта. 

• управление сайтом, обновление и добавление материалов без специальных знаний и навыков.

• разделение дизайнерской и текстовой частей.

• лёгкость загрузки изображений.

• оперативная публикация страниц.

• все файлы хранятся на сервере конструктора.

• некоторые конструкторы позволяют переносить готовый сайт на другой хостинг.

4).Этапы создания сайта

1. Анализ и проектирование сайта;

2. Информационное наполнение сайта;

3. Креатив, или визуальная составляющая сайта;

4. Тестирование;

5. Публикация в Интернете;

6. Раскрутка;

7. Поддержка.

Технологическая карта урока.

Учитель: Лебедева Оксана Викторовна (МКОУ СОШ №3 г. Россошь).

Предметные области: Информатика и ИКТ.

Класс: 9

Тема занятия: Технология создания сайта.

Тип занятия: Изучение и первичное закрепление новых знаний и способов деятельности.

Цель занятия: усвоение учащимися технологии создания сайта, показать технологию на конкретных примерах.

Планируемые образовательные результаты:

предметные ; общие представления о типах сайтов; технология создания сайтов; этапы создания сайтов

метапредметные – представления о компьютерных сетях распространения и обмена информацией, об использовании информационных ресурсов общества с соблюдением соответствующих правовых и этических норм, требований информационной безопасности;

личностные – умение анализировать, сопоставлять факты; воспитать уважение и умение ценить свое прошлое и людей, связанных с ним.

Решаемые учебные задачи:

1) расширить, обобщить и систематизировать представления школьников о технологиях создания web-сайтов;

2) смоделировать с учащимися основные этапы создания сайта;

3) показать на практике 1 из способов технологии создания сайта – с помощью языка разметки HTML (без изучения данного языка);

4) ответить на вопрос «Сложно создавать сайт в Интернете?»;

5) вспомнить и закрепить навыки программирования.

Оборудования и наглядные средства обучения:

персональный компьютер (ПК) учителя, мультимедийный проектор, экран; ПК учащихся, пульты для голосования..

презентация к уроку (приложение 2), заготовки для практикума – папка Мой первый сайт; компьютерный тест на компьютерах учащихся (test.exe).

Ход урока:

1. Постановка учебных задач

Приветствие учащихся.

- Что такое браузер? Приведите примеры.

- Что общего и в чем различие между такими формами сетевого коллективного взаимодействия, как телеконференция, форум и чат?

- Каково основное правило сетевого этикета?

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

- Следующая ситуация: вы обладаете важной информацией (д/з на завтра, новость или объявление и т.д.) для одноклассников. Вам необходимо сообщить ее им. Что проще сделать ? (выложить в социальных сетях)

- А если это не вы, а организация, и ей надо донести до огромного количества людей важную информацию большого объема? ( создать сайт)

Сложно это или нет - мы будем разбираться на уроке. Запишем тему урока: «Технология создания сайта».

1. Совместное исследование проблемы.

Перед учащимися ставятся вопросы, на которые совместно с учителем находятся ответы.

Прежде, чем приступить к созданию сайта, мы должны ответить на следующие вопросы:

1). Для чего нужен сайт?

Сайт – современный и эффективный канал коммуникации.

Цели и задачи создания сайта:

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

- сервисная поддержка клиентов и партнеров (Посредством интернет-сайта можно оперативно отвечать на вопросы возникающие у пользователей ваших продуктов и услуг.);

- оперативная обратная связь в любой точке мира(После создания ваш сайт становится доступным пользователям Интернет всего мира. А это значит, что ваш сайт смогут посетить люди из различных регионов. Если же создать сайт на нескольких языках, то о вас узнают посетители из других стран);

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

- предоставить информацию в любое время суток (Разместив вовремя свой сайт в сети Интернет, заинтересованный покупатель своевременно получит в полном объеме необходимую информацию);

- повышение имиджа объекта.

2)Какие типы сайтов?

Это мы узнаем, определив тип сайта. Существуют различные классификации сайтов.

По доступности сервисов:

• Открытые

• Полуоткрытые

• Закрытые

По природе содержимого:

• Статические – сайты, разработаные с помощью стандартной HTML-технологии. Обновления таких сайтов трудоемко и проблематично.

• Динамический — сайт, состоящий из динамичных страниц — шаблонов, контента, скриптов и прочего, в виде отдельных файлов. Страница сайта формируется на стороне сервера динамически, по запросу, из страницы-шаблона и отдельно хранимого содержимого. Чтобы скорректировать внешний вид сайта, достаточно отредактировать один шаблон.

По схеме представления информации:

• Сайт-визитка - сайт представляет собой набор страниц, без средств интерактивного взаимодействия с пользователем. Две основные функции : коммуникация и интерактивность;

• Корпоративный веб-сайт. Функции корпоративного сайта - это создание имиджа фирмы, продвижение ее на рынке, хранение информации, коммуникация сотрудников друг с другом;

• Интернет-магазин — веб-сайт, рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, способа получения заказа и выписывающий счет на оплату;

• Информационный веб-сайт - это очень большой веб-ресурс, который предоставляет исчерпывающую информацию по определённой тематике. он привлекает только целевую аудиторию;

• Игровой портал - сложный развлекательный интерактивный проект, предусматривающий большую посещаемость и ресурсоемкость;

• Контент-проект– это сайт, как правило некоммерческой неправленности, который представляет собой собрание текстов, статей и прочих файлов, основная задача которого – привлечение посетителей по определенной тематике. может представлять собой образовательный или развлекательный ресурс;

• Промо-сайт – это сайт созданный специально для продвижения какого-либо товара либо услуги или основного сайта компании. в рамках рекламной кампании и их существование регламентировано рамками самой рекламной кампании;

• Сайт-форум – это класс веб-приложений для организации общения посетителей веб-сайта. Термин соответствует смыслу исходного понятия «форум»;

• Блог – это сайт, представляющий собой интернет-дневник, или журнал, который ведется наподобие новостной ленты, при этом на каждую тему блога посетители могут оставлять свои комментарии.

1. Моделирование

3) Какие этапы создания сайта?

1. Анализ и проектирование сайта;

2. Информационное наполнение сайта;

3. Креатив, или визуальная составляющая сайта;

4. Тестирование;

5. Публикация в Интернете;

6. Раскрутка;

7. Поддержка.

4) Какие технологии создания сайта существуют?

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

Способы создания сайтов

1. Вручную

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

• HTML(от англ.HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Язык XHTML является более строгим вариантом HTML

• CSS (Cascading Style Sheets) - это язык программирования, который используется для настройки и форматирования документов, написанных на языках разметки веб-сраниц. Каскадные таблицы стилей часто используются в паре с документами, написанными на HTML и XHTML. CSS - язык, без которого практически немыслим дизайн сайта.

• JavaScript. Это язык, позволяющий писать различные скрипты, например, проверка введённых данных в форму, делать выпадающие меню, делать красивый и динамический сайт.

• PHP. Это скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. На данный момент он поддерживается практически всеми представителями хостинга, входит в «стандартный» набор для создания сайтов (LAMP – Linux, Apache, MySQL, PHP).

• MySQL. Данное программное обеспечение позволяет работать с базами данных, используя язык запросов SQL. MySQL - необходимая вещь для создания серьёзных сайтов.

• XML. Этот язык предназначен для реализации достаточно сложных корпоративных сетей.

1. текстовые редакторы программа для создания, отладки и редактирования программного кода приложений, написанных на языке гипертекстовой разметки и

2. специализированные редакторы программного кода редактор для программистов и разработчиков с возможностью подсветки синтаксиса, предпросмотром.

3. WYSIWYG (визуальные) редакторы хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. В основе работы визуальных web-редакторов лежит свойство WYSIWYG – What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.

1. С использованием конструктора сайтов (Система управления содержимым—CMS, Сontent Management System, Content Management Software)

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

• создание динамического сайта на основе стандартного шаблона, путём добавления готовых блоков на вашу страницу.

• при помощи него можно настроить собственный дизайн или изменить внешний вид вашего сайта. 

• управление сайтом, обновление и добавление материалов без специальных знаний и навыков.

• разделение дизайнерской и текстовой частей.

• лёгкость загрузки изображений.

• оперативная публикация страниц.

• все файлы хранятся на сервере конструктора.

• некоторые конструкторы позволяют переносить готовый сайт на другой хостинг.

1. Переход к этапу решения частных задач.

Создать сайт с помощью Конструктора сайтов на уроке не хватит времени, из-за регистрации. Посмотрите, что можно сделать.

Демонстрация скриншотов.

Теперь попробуем сами создать небольшой сайт средствами, которые доступны любому – на языке разметки HTML .

Практическая работа «Создание сайта с помощью HTML кода».

-Первый этап создания сайта я уже продумала для вас – мы будем делать сайт-открытку. Определим тему. В этом году будет юбилейная дата со Дня победы наших солдат во время ВОВ. Сколько лет уже прошло? (75) Будем поздравлять наших дорогих ветеранов с 75-летием Победы в ВОВ.

Критерии оценивания практической работы: выполнение учащимися до п.11 оценивается оценкой «4», правильное выполнение до п. 14 – оценкой «5». Желаю удачи.

1. А Контроль на этапе окончания учебной темы.

А теперь проверим усвоение вами темы урока. Запустите тест – файл Test.exe

1. Рефлексия. (выбрать карточку определенного цвета)

2. Домашнее творческое задание: создать в любом конструкторе сайт о ВОВ на тему «Я помню. Я горжусь».

3. Подведение итогов.

Вывод: Сложно создавать сайт в Интернете? И да, и нет. Вся прелесть в том, что создать сайт самому можно, даже не зная html. Достаточно найти подходящий конструктор сайтов, чтобы быстро сделать и разместить свой сайт в интернете. Тогда зачем всё остальное? Затем, что со временем нам захочется его улучшить, добавить те возможности, которых в конструкторе сайта нет. Вот тогда вам и понадобятся технологии HTML, CSS.

Хотелось бы еще сказать, что индустрия сайтостроения не стоит на месте. Представленные на уроке примеры – далеко не предел.