Информационные технологии

 

Понятие сервера и клиента. Модель взаимодействия. Порядок создания сайта. Подготовка   сайта на основе WORD, EXCEL, WebBuilder.

 

 

Адрес документа:

http://90.189.213.191:4422/temp/kafedra_sapr_2017_gruppa_mpp78/lek6/lek6.doc       инд: 2-118-1-3    Каталог_программ   Дубль

 

Напоминание!:

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

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

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

 

Разделы лекции:

 

Понятие сервер и клиент

 

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

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

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

·         Далее представлено несколько схем в рисунках, поясняющих данный термин.

  

    

 

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

·         Все сайты в интернете расположены на серверах.

·         Если сайт содержит небольшое количество страниц и данных, то таких сайтов на одном сервере может быть очень много.

·         Если же сайт содержит и обрабатывает огромное количество данных, то он находится на отдельном сервере и, по сути, сам является сервером.

·         Так, например, это поисковые системы (Yandex, Google, Mail.ru и т.д.). Можно сказать, что все страницы всех сайтов в интернете находятся на серверах этих компаний. В данном случае понятие сервер  представляет собой большое количество компьютеров (серверов), связанных между собой и работающих параллельно, для того, чтобы обеспечить быструю обработку поискового запроса и выдачу результата.

 

Модель взаимодействия

·         Уточним  взаимодействие  работы сайтов с помощью модели взаимодействия сервер-клиент.

·         Ниже на рисунке показана модель построения сайта на одном  компьютере и обращение  к сайту на другом.

·         Один является сервером, а второй клиентом. На одном сайт "содержится", на втором "обслуживается" или "смотрится".

Эти два компьютера совершенно одинаковые, установлены одинаковые операционные системы, например Windows7.

Но, на одном компьютере работает программа сервер сайта, а второй обращается и читает этот сайт.

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

Таким образом, надо иметь:

 

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

 

Начнем с создания сайта в заданном каталоге (папке).

 

Порядок создания сайта

    

·         Откройте свой saytus.htm файл браузером и увидите свой сайт.

 

Но это получается  очень простой, и даже скучный сайт. Приведем некоторые приемы "украшательств"  и "читабельности", доступные в Microsoft Word

Построим сайт с графическими изображениями типа gif. Это "живые" картинки, которые позволяют  усилить внимание  или наоборот, ослабить.

 

В каталоге лекции представлен подкаталог gif- картинок на тему физических явлений природы. Используем эти картинки. Последовательность действий:

Сайт готов, откройте его браузером и проконтролируйте отображение.

 

Подобный подготовленный  файл Sayter_shabr.doc (архив zip) с картинками по теме механики и техники и сформированная соответствующая страница index.html находятся   в каталоге лекции.

 

Внимание!  Файл для автозапуска в расположении каталога  должен иметь название index.htm     Соответственно и подкаталог работы  будет index.

 

Редактор Microsoft Excel  обладает теми же возможностями по формированию сайта. Принцип все такой же - создать и сохранить в формате html.  Нового в методике нет. Есть особенности Excel,  где более удобно оформлять таблицы.

 

Разработано достаточно много программного обеспечения, позволяющего создавать сайты.

Основная задача этих  редакторов - максимально предоставить оформительские возможности, ввести "красоты" и "удобства". Обеспечить "привыкание" к определенному стилю оформления.

Рассмотрим применение редакторов сайтов на примере WYSIWYG Web Builder . Будем использовать "портабельную" 30-дневную версию и, соответственно, с меньшими возможностями.

Необходимо знать, что существует авторское право разработчика на свой программный продукт.

Незнание закона не освобождает от ответственности.

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

 

Повторим формирование  сайта  из файла  Sayter_shabr.doc, но в другом редакторе.

Далее представлены сканы основных действий на экране компьютера. 

1.    Вначале необходимо подготовить адресное пространство для создания сайта.

                                         i.    Создать каталог, например  Redactor_www. В нем будет работать редактор сайтов WYSIWYG Web Builder

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

                                      iii.    Создать каталог, например  Sayt_var1 .  В нем будут находиться файлы сайта и файл, с которого начинается сайт - index.html

                                       iv.    Внимание! Каталог файлов сайта в практическом задании должен  состоять из адреса почты до знака @ и через дефис номера по порядку в списке группы, например polivit0605-9 . Для отчета отправлять архив сайта в формате zip,  т.е.  отчет состоит из файла *.doc и файла *.zip.   Рекомендуется сразу создать  свой каталог для отчета. 

 

2.    Скопировать файл архива версии WYSIWYG Web Builder в созданный каталог Redactor_www. Распаковать, выполнить запускающий файл WebBuilder.exe .На рисунке ниже он выделен цветовым овалом.

3.     После выполнения запускающего файла откроется окно WYSIWYG Web Builder.  Далее требуется указать русский язык и настройки сохранения файлов проекта и файлов сайта. Показано на рисунках стрелками и цветовыми овалами ниже.

  

4.     Указать и путь сохранения проекта, для этого выбрать в меню  "сохранить как" и сохранить  в папку Proekt_www

5.    Подготовлены пути сохранения сайта и проекта сайта. Далее, приступаем к работе по формированию сайта.  Текст делаем более выразительным и увеличиваем в размерах. Повторяем содержание сайта  Sayter_shabr.doc  по теме "опасные технические решения" 

 

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

 

a.    Ссылка, которая направлена на адресное пространство внутри каталога сайта, называется "короткой" или по другому "внутренней". Если Вы измените расположение основного каталога т.е. измените название Вашей папки Sayt_var1 , то ссылки "короткого" типа будут работать и "посылать" без изменений, т.к. они работают внутри Вашей папки (сайта).

 

b.    Ссылка, которая направлена на адресное пространство за пределы каталога, называется "длинной" или по другому "внешней". Она может и не выполниться, т.к. возможно отсутствие сайта или к нему  нет связи.

7.    Подписываем свои текстовые  данные  и сохраняем проект в ранее определенный каталог. Вид подготовленного проекта ниже на рисунке.

8.     Нажать правую клавишу мышки, откроется  вкладка "свойства страницы".  Редактируем "свойства страницы": делаем фоновый  цвет, определяем заголовок сайта.

 

9.      Выполняем публикацию в заданный каталог (папку).  Внимание! Необходимо следить за путями сохранения, т.к. в портабельной версии некоторые переменные сохранения не сохраняются после повторного открытия редактора.

 

10.  Открываем полученный сайт или отдельным кликом, или из редактора. Анализируем и редактируем созданный сайт.

 

 

Пример музыкального оформления в index-html

Для представления сайтов с музыкальным оформление, приведем пример воспроизведения файлов формата mp3 , которые "оживлены" рисунками gif.  Скачать  архив музыкальное_оформление_сайтов_в_html_пример.zip    

Открыть для просмотра  и просмотра2

 

Порядок модернизации:

 

·         Откройте каталог audioplayerengine   и замените файл mpp78.gif  на свой вариант рисунка. Т.е. свой файл переименуйте в файл  mpp78.gif и скопируйте в каталог с "заменой" . Можно воспользоваться примерами из каталога лекции gif_prroda

·         Замените в файле index.html  надпись    <title> Гений никогда не скажет, что он гений, по себе знаю.  </title>     на свою. Это заголовок сайта. Он виден в поисковике  и определяет тему и название сайта . Менять надо то, что внутри <title> ****  </title>

·         Специфические команды в < > называются теги. Они определяют вид, цвет и другие режимы оформления . Это "ассемблерный язык" гипертекста и поэтому его использование не всегда интересно.  И самое  важное - в них легко запутаться. Но знать про них надо. Ознакомиться с основными тэгами по адресу.

·         Укажите на своем сайте ссылку на каталог с музыкальным отображением.  Проверьте работу.

·         Примечание. Для работы с файлами html  удобнее  использовать  другие редакторы, чем Блокнот. Например AkelPad.zip , находиться в каталоге лекции.

Выводы по разделу:

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

·         Восприятие информации в большей мере зависит от ее "красочного" и "понятного" представления, чем от размеров файлов или мощности компьютера;

·         Таким образом, создание сайтов - это больше задача художественная, чем задача техническая.

 

Практические занятия

·         Подготовить сайт  в редакторе Microsoft Word  табличного представления графической информации. За прототип взять вариант сайта данной лекции. Разместить тему "Опасные природные явления" и использовать рисунки-gif из каталога лекции;

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

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

·         Проект сайта для любого используемого редактора не оценивается! Это Ваш "интеллектуальный багаж" и храните его самостоятельно. Оценивается только результат, т.е. сам сайт;

Оценка 4:

·         Подготовить сайт в редакторе WYSIWYG Web Builder,  аналогичный  сайту лекции,  и с той же  темой  "Опасные природные (технические -искусственные) явления". Использовать рисунки-gif из каталога лекции и в свободном доступе из интернета. Основной сценарий и задача создаваемого сайта  – показать, в чем опасность и методы предупреждения или снижения опасности.

Темы явлений по варианту списка группы:

 1.  Наводнение.

  2.  Радиационное заражение, аварии на АЭС.

  3.  Извержение вулканов.

  4.  Цунами.

  5.  Землетрясение

  6.  Большая волна от тайфуна или шторма.

  7.  Торнадо и сильный ветер.

  8.  Молнии и атмосферное электричество.

  9.  Пожары. Защита жилых здания.

  10. Космический =Мусор= метеориты и болиды.

  11. Оползни.

  12. Лавины.

  13. Пыльные (Песчаные) бури.

  14. Таяние ледников и последующие события природы

  15. Ледниковый период природы на Земле.

Дополнительные условия оценки =4:

-      Размер всех файлов сайта не более  10 мб; ( определяется по размещаемому каталогу)

-      4 варианта форматного вывода текста или таблиц или графики или рисунков или видео.

-      Не должно присутствовать признаков рекламы или скрытой рекламы (т.е. данных и ссылок  не по теме создаваемого сайта).

-      Должны присутствовать реквизиты студента ( фио, группа, ВВУЗ и дата создания. Другие данные по личному решению без ущерба для личной информации)

-      Приветствуются ссылки на личные сайты по теме задания.

-      Приветствуются игровые сюжеты, gif-анимация, и т.п. варианты раскрытия темы сайта.

Оценка 5:  

·         Выполняются условия для оценки =4 и дополнительно

·         Подготовить сайт в редакторе WYSIWYG Web Builder по теме "мое портфолио".

o   Предполагается размещение данного сайта для представления своих возможностей возможному работодателю. 

o   Приветствуется  использование архивных или других фото - видео - материалов для представления соискателя максимально подробно.

o   Рекомендуется указать свои увлечения, достижения или хобби;

o   Можно указать и  свои основные  физические параметры,  предоставить фотографии, которые максимально Вас характеризуют как сильного, спокойного и достойного человека. Например,  в туристическом походе.

o   Если у Вас есть публикации или достижения в какой-либо сфере деятельности, их изложить кратко и дать ссылку на эти материалы.

o   Дать "координаты" для связи. Например, сотовый телефон и  электронную почту.

o   Оставить "резерв" адресного пространства сайта  для возможных исправлений или добавлений;

o   Пример портфолио взять для анализа. Пример_2   Пример_3

 

Внимание!   Все материалы, которые  Вы будете представлять, должны пройти ВАШУ ЦЕНЗУРУ!  

·         Запрещается!  приводить материалы  вызывающие злобу, ненависть,  различные состояния  унижения и обид, или призывающие  к национальной вражде!

·         Запрещается! приводить материалы категории +18;

·         Запрещается! Приводить любые материалы относящиеся к вероисповеданию или любым конфессиям!

·         Запрещается!  Приводить любые сведения о наркотических, психоделических или алкогольных препаратах.  Употребление алкоголя есть добровольное сумасшествие!

·         Запрещается! Любая комментирующая сопроводительная информация. Только факты и источники получения данных!

·         Список не полный, основная заповедь "... не навреди своим сайтом самому себе! "

 

Помните, что зачитывают  при задержании полицией! - Вы имеете право выражать свое мнение о работе сотрудников полиции, однако все вами сказанное может быть использовано нами против вас;

 

А так же, приведем выражение классика  Некрасова Н. А. из его  произведения " Осторожность "

 

- Оправдаться есть возможность!

- Но не спросят! Вот беда!

- Осторожность, осторожность

- Осторожность , господа!

«Симона» в поисках мата и порно

Контрольные вопросы

·         Достоинства и  недостатки  модели "клиент-сервер". Привести примеры использования модели.

·         Перечислить минимально необходимые  программные продукты  для модели "клиент-сервер";

·         Пояснить порядок создания сайта на примере редактора Microsoft Word;

·         Что такое "адресное пространство" сайта?  Привести примеры "длинных" и "коротких" ссылок;

 

Литература и адреса электронных документов:

 

·         Сайты на редакторе WORD http://wordexpert.ru/category/saytyi

·         Cайт на редакторе WORD https://nsportal.ru/shkola/informatika-i-ikt/library/2014/01/28/urok-sozdanie-web-sayta-s-pomoshchyu-microsoft-word

·         Программы для создания сайтов https://uguide.ru/luchshie-programmy-dlya-sozdaniya-sajtov

·         Уроки WYSIWYG_Web_Builde  http://htmleditors.ru/List3A/WYSIWYG_Web_Builde_Help/Newtopic68.html

 

 

И философский анекдот про учебу:

 

Будда с учениками сидел у реки и ждал лодочника.

 Появился йог, который перешел несколько раз по воде, и с пафосом обратился к Будде с вопросом:

- Ну, а ты, Просветленный, так можешь?

    На что Будда спросил:

- Сколько времени ты затратил на то, чтобы достичь этого?

- Почти всю жизнь я затратил на то, чтобы научиться, провел много времени в суровых аскезах.

Пришел лодочник и Будда спросил его:

- Сколько стоит переправа?

- Три гроша, - ответил лодочник.

Будда, повернувшись к йогу, сказал:

- Слышал? Вот столько стоит вся твоя жизнь.

 

 

 

 

Ред.2023-2-28-

Подготовил Шабронов А.А.  тс 913-905-8839  shabronov@ngs.ru