Создание сайта образовательного учрежденияСоздание сайта образовательного учреждения. - презентация

1 Создание сайта образовательного учреждения

2 Веб-страница (от англ. Web page) документ или информационный ресурс всемирной паутины, доступ к которому осуществляется с помощью браузера.

3 Веб-страницы обычно создаются на языках разметки HTML или XHTML и могут содержать гиперссылки для быстрого перехода на другие страницы. Информация на веб-странице может быть представлена в различных формах: Текст; Статические и анимированные графические изображения; Аудио; Видео; Апплеты;

4 Информационно значимое содержимое веб-страницы обычно называется контентом.

5 САЙТ или ВЕБ-САЙТ Это несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном веб-сервере.

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

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

8 Примерная классификация интернет-сайтов, условно разбитая на группы.

9 Вид сайта всегда определяется его целями и задачами. На практике сайты очень часто являются комбинированными, и могут быть приписаны к разным видам. Тем не менее, предлагаемая классификация сайтов будет полезна для понимания того, какой именно тип сайта нужен конкретно вам.

10 Сайт визитка Сайт визитка самый простой вид сайта. Сайт такого типа можно сделать даже на простом HTML, без использования системы управления сайтом. Обычно сайт-визитка содержит от 1 до 5 страниц. Сайты этого вида как правило включают в себя только общую информацию о владельце сайта и его контактные данные. Простота разработки такого вида сайта делает стоимость его создания сравнительно дешевой, что является очевидным преимуществом для заказчика.

11 Корпоративные сайты Корпоративные сайты это полнофункциональные представительства компаний в интернете. Этот тип сайта лучше всего подходит для серьёзных средних и крупных фирм. Они содержат полную информацию о компании и её деятельности. Такой тип сайта иногда называют виртуальным офисом, так как посещение такого сайта сравнимо с общением с менеджером по работе с клиентами.

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

13 Интернет-магазины Этот вид сайтов аналогичен интернет-витринам, но имеет дополнительный функционал: возможность заказать предлагаемый товар прямо через сайт.

14 Промо-сайты Сайты этого типа предназначены для раскрутки и продвижения какого-либо товара или бренда. Тематические сайты Данный тип интернет сайтов характеризуется тем, что содержит информацию по какой- либо конкретной тематике. Сюда же можно отнести интернет-энциклопедии.

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

16 Блоги Блог это тип сайтов, на которых владелец или редактор блога пишет посты со своими новостями, идеями или другой постоянно поступающей информацией. Отличительной особенностью блогов является актуальность публикуемой информации.

17 Каталоги сайтов Это вид сайтов, основным содержимым которых являются структурированные ссылки на другие сайты, а также их краткие описания. Поисковые системы Вид сайтов, предназначенных для поиска страниц в интернете по определённым запросам. Почтовые сервисы Этот тип сайтов предоставляет интерфейс для работы с электронной почтой.

18 Интернет-форумы На сайтах этого вида пользователи могут создавать темы, а также комментировать их. Как правило, форумы ограничены одной специфической тематикой, хотя встречаются и форумы «обо всём». Сайты-хостинги На сайтах этого типа реализована функция хранения каких-либо файлов. Также часто встречаются сайты-хостинги с возможностью просмотра загруженных файлов прямо через браузер.

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

20

21

22

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

24

25

26 3.2. Некоммерческие организации, за исключением указанных в пункте 3.1 настоящей статьи, обязаны ежегодно размещать в сети Интернет или предоставлять средствам массовой информации для опубликования отчет о своей деятельности в объеме сведений, представляемых в уполномоченный орган или его территориальный орган. Некоммерческие организации, указанные в пункте 3.1 настоящей статьи, обязаны ежегодно размещать в сети Интернет или предоставлять средствам массовой информации для опубликования сообщение о продолжении своей деятельности. Порядок и сроки размещения указанных отчетов и сообщений определяются уполномоченным федеральным органом исполнительной власти.

27

28 Федеральный закон «О персональных данных» 152-ФЗ от , которым регулируются отношения, связанные с обработкой персональных данных в образовательных учреждениях с использованием средств автоматизации;«О персональных данных» 152-ФЗ Федеральный закон «Об информации, информационных технологиях и защите информации» 149-ФЗ от , в котором даны определения понятий: информация, документирование информации, защита информации, обладатель информации, конфиденциальность информации, предоставление и распространение информации, электронное сообщение;«Об информации, информационных технологиях и защите информации» 149-ФЗ Трудовой кодекс Российской Федерации, определяющий требования к защите персональных данных работников образовательных учреждений; Трудовой кодекс Российской Федерации Указ Президента РФ «Об утверждении перечня сведений конфиденциального характера» 188 от , в котором к конфиденциальной информации отнесены персональные данные;«Об утверждении перечня сведений конфиденциального характера»

29 Постановление Правительства РФ от , которым утверждено Положение об обеспечении безопасности персональных данных при их обработке в информационных системах персональных данных, определяющее основные требования к указанным информационным системам; Постановление Правительства РФ Постановление Правительства РФ от , которым утверждено Положение об особенностях обработки персональных данных, осуществляемой без использования средств автоматизации. Постановление Правительства РФ Приказ от «Об утверждении образца формы Уведомления об обработке персональных данных», в котором утвержден образец названного документа, а также Рекомендации по заполнению этой формы Приказ от «Об утверждении образца формы Уведомления об обработке персональных данных»

30 Постановление Правительства Российской Федерации от «О лицензировании деятельности по технической защите конфиденциальной информации»«О лицензировании деятельности по технической защите конфиденциальной информации» Приказ ФСТЭК России, ФСБ России, Мининформсвязи России от /86/20 «Об утверждении Порядка проведения классификации информационных систем персональных данных».«Об утверждении Порядка проведения классификации информационных систем персональных данных»

31 Соглашение об использовании персональных данных и другие документы в соответствии с РД ФСТЭК (руководящие документы Федеральной службы по техническому и экспортному контролю) Соглашение между образовательным учреждением и родителями (опекуном) обучающегося является необходимым документом определяющим правомерность использования персональных сведений в документальных и электронных базах данных, обеспечивающих управление образовательным процессом и ведение учетной деятельности результатов обучения. Соглашение основывается на положениях Федерального закона от 27 июля 2006 года 152-ФЗ «О персональных данных». В соглашении указывается перечень персональных данных, которые предоставляются для всех уровней информационной системы управления. В соглашении определяется согласие родителей (опекунов) на использование фото- или видеоматериалов с изображением личности ребенка, не порочащей его достоинство, при публикации в сетях Интернет или других публичных изданиях.

32 Федеральный закон от N 231-ФЗ (ред. от ) "О введении в действие части четвертой Гражданского кодекса Российской Федерации" (принят ГД ФС РФ ) ГРАЖДАНСКИЙ КОДЕКС РОССИЙСКОЙ ФЕДЕРАЦИИ Раздел VII. ПРАВА НА РЕЗУЛЬТАТЫ ИНТЕЛЛЕКТУАЛЬНОЙ ДЕЯТЕЛЬНОСТИ И СРЕДСТВА ИНДИВИДУАЛИЗАЦИИ Глава 69. ОБЩИЕ ПОЛОЖЕНИЯ Статья Охраняемые результаты интеллектуальной деятельности и средства индивидуализации

33 ws/vopos_otvet/2010/8/ 14/copy_news/

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

35 Настоящий школьный сайт должен быть "живым". Именно здесь вы можете сообщить все, что может оказаться полезным или интересным для родителей нынешних и будущих учеников: школьные новости, объявления, правила поступления в школу, расценки коммерческих курсов и многое, многое другое. Здесь же могут быть кратко представлены региональные новости и объявления.

36 Школьный сайт может служить средством публикации: учителя имеют возможность представить здесь свои педагогические наработки, а ученики опубликовать плоды своего творчества, как в рамках школьной программы, так и в свободной форме. Сайт при этом может стать инструментом обучения для школьников, и обмена опытом для педагогов. В частности, для детей возможность публикации своих работ в Интернете является мощным педагогическим стимулом, особенно если это сочетается с проектной работой проведением конкурсов, в результате которых лучшие работы размещаются на школьном сайте.

37 Все, о чем говорилось до сих пор, представляет собой одностороннюю схему: вы размещаете на школьном сайте информацию, а пользователи (родители, ученики или другие посетители) ее читают. Но ведь Интернет годится не только для размещения информации, а еще и для общения. Школьный сайт может стать местом встречи всех заинтересованных лиц. С помощью набора не очень сложных инструментов можно дать возможность посетителям не только читать ваши объявления, но и размещать собственные, а также отвечать на ваши вопросы, обсуждать животрепещущие проблемы, принимать участие в играх и конкурсах и просто общаться друг с другом.

38

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

40

41 ru/p52aa1.html Информация получена с сайта Блок общей информации Координаты школы История школы Устав школы Правила приема Правила внутреннего школьного распорядка Программа развития школы Достижения школы БезопасностьБезопасность ВакансииВакансии ПартнерыПартнеры Страничка описывает координаты школы, банковские реквизиты, карту проезда. Страничка описывает историю школы, ее основные достижения, известных выпускников и т.п. Обычно выкладывается в HTML версии (для просмотра через Интернет) и в версии для печати – лучше в архивированном виде, чтобы уменьшить объем скачиваемой информации по низкоскоростным каналам связи. На этой страничке описываются установленные правила приема учеников – как в 1-й класс, так и в последующие классы. Правила внутреннего распорядка определяют основные моменты организации нормальной работы педагогического коллектива школы. Этот документ целесообразно размещать в версии для просмотра через Интернет и в версии для печати. Для посетителей сайта (всех категорий целевой аудитории) будет интересно узнать о планах школы. Страничка о наиболее значимых событиях в истории школы. Очень важный вопрос о том, как обеспечивается и финансируется безопасность в школе, кто отвечает за безопасность. Страничка посвящена партнерам: ВУЗам, с которыми сотрудничает школа, предприятия, где могут подрабатывать дети или пойти работать после окончания и т.п. Объявление об открытых вакансиях для школы.

42 ru/p52aa1.html Информация получена с сайта Блок администрации ДиректорДиректор Зам.директора по УВР Зам.директора по ВР Зам.директора по социальной защите Зам.директора по безопасности Социальный педагог ПсихологПсихолог Школьный врач Информация о директоре, обращение, обратная связь. Информация о зам.директора по УВР, обращение, обратная связь. Информация о зам.директора по ВР, обращение, обратная связь. Информация о зам. соц. защите, обращение, обратная связь. Информация о зам. безопасности, обращение, обратная связь. Информация социального педагога, обращение, обратная связь, литература, форум, часто задаваемые вопросы. Информация школьного психолога: обращение, обратная связь, литература, форум, часто задаваемые вопросы. Информация школьного врача: обращение, обратная связь, литература, форум, часто задаваемые вопросы.

43 ru/p52aa1.html Информация получена с сайта Блок педагогического коллектива Учителя начальной школы Учителя Учителя старших классов Учителя Педагоги и воспитатели ГПД ГПД Краткое портфолио каждого из учителей, ссылки на дополнительные курсы и занятия, проводимые педагогом.

44 ru/p52aa1.html Информация получена с сайта Блок обмена информацией ОбъявленияОбъявления Форум родителей БлогиБлоги НовостиНовости Форум учеников

45 Протокол передачи данных набор соглашений интерфейса логического уровня, которые определяют обмен данными между различными программами.

46 Сетево́й протоко́л набор правил, позволяющий осуществлять соединение и обмен данными между двумя и более включёнными в сеть устройствами.

47 Модель OSI (Open System Interconnection взаимодействие открытых систем, Является наиболее распространённой системой классификации сетевых протоколов. в соответствии с ней протоколы делятся на 7 уровней по своему назначению от физического (формирование и распознавание электрических или других сигналов) до прикладного (интерфейс программирования приложений для передачи информации приложениями).

48 Протокол HTTP (Hyper Text Transfer Protocol) Это протокол передачи гипертекста. Протокол HTTP используется при пересылке Web-страниц с одного компьютера на другой.

49 Программы-браузеры Браузеры - программы, позволяющие просматривать web- документы, т.е. обеспечивающая переходы от одного документа к другому по гиперссылкам. Название происходит от английского слова to brouse - просматривать.

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

51 Наиболее распространенные браузеры: -Microsoft Internet Explorer -Opera -Mozilla Firefox Главным плюсом браузера Mozilla считается его многооконность и скорость работы. Также очень хорошо и удобно в нем реализована функция сохранения информации из Интернета.

52 Сайты школ Школа 31 г.Владимир Школа 2 г.Владимир Школа 40 г.Владимир Сайт школы-интерната для слабовидящих г.Владимир. МОУ СОШ 8 г.Ковров Школа 77 г.Кемерово nie/0-45 Школа 534 г. Москва

53 До сих пор мы говорили о странице, как о том, что мы видим в окне браузера. На самом деле на монитор выводится изображение кода, который хранится в файлах. Вот из таких файлов и состоит любой сайт.

54 ntent-Type: multipart/related; start= ; boundary= BsVFKTgCRLfTYsoPNiEnPl Content-Location: Subject: =?utf- 8?Q?=D0=A1=D0=B0=D0=B9=D1=82=20=D1=88=D0=BA=D0=BE=D0=BB=D1=8B=20=E2=84=96=2040?= MIME-Version: 1.0 Сайт школы 40

55 Язык HTML, несмотря на столь мудреное название, весьма прост. И написать с его помощью простенькую Web- страничку с парой абзацев текста можно буквально за пять минут, причем большая часть этого времени будет потрачена на набор самого текста этой страницы, а не тегов HTML.

56 Видно, что наш HTML-код, задающий содержимое страницы, помещен в парный тег. Этот тег задает так называемую секцию тела Web- страницы т. е. видимое ее содержимое, которое показывает Web-обозреватель. Все, что мы хотим видеть в его окне, должно находиться в секции тела, т. е. быть содержимым тега. Второй незнакомый нам тег это парный тег. Эта информация не выводится Web- обозревателем на экран, а используется для его внутренних нужд, в частности, задает некоторые параметры Web-страницы.

57 Создадим нашу первую HTML страничку структура простейшего гипертекстового документа. Первая страница Владимирская область, Энский район Школа ХХХ Владимирская область, Энский район, пос.Чудный, улица Небесная, дом 100.

58 Так в чем же проблема? Проблема в том, что мы пока еще не знаем HTML. И многие его не знают, более того не хотят его изучать или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому специально для них программисты написали множество программ, предназначенных для создания Web-страниц.

59 Одна из таких программ Dreamweaver 8 Но прежде, чем мы начнем в ней работать давайте еще поговорим о файлах, которые мы будем создавать.

60 Файловая структура сайта Раньше мы говорили о навигационной структуре сайта визуальной, то сейчас мы с поговорим о структуре сайта, скрытой от глаз. То есть о той его ипостаси, которая находится непосредственно на жестких дисках компьютеров.

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

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

63 Пример организации файловой структуры сайта.

64 папка site это наша главная папка, в которой находятся все папки и файлы нашего сайта. Еще она называется корневой папкой, так как с нее подобно дереву и растет наше дерево сайта. В корневой папке сайта находятся три папки: Content с файлами статей art1.html, art2.html, art3.html Images для хранения всех файлов с изображениями Userfiles содержит служебные файлы style.css (отвечающий за дизайн сайта) и menu.js (ява-скрипт для вывода меню)

65 Ну и конечно же файл index.html, который никуда не прячется и находится в корневой папке сайта, так как является самым главным файлом сайта. Именно его содержимое выводится в браузере при наборе адреса. Именно этот файл содержит изображение главной страницы сайта.

66 Названия файлов должны содержать символы только латинского алфавита (a-z), цифры (0-9), знак подчеркивания («_») и дефис («-»). Точка («.»)используется только как разделитель между именем файла и его расширением. Названия файлов должны содержать символы только нижнего регистра. Имя файла должно начинаться с буквы. Длина имени файла не должна превышать 31 символ. На названия папок действуют те же правила. Старайся давать такие названия, чтобы они отражали тематическое содержание папки или файла. Это может быть как название на английском языке, так и транслитерация с русского. Например, файл с уроком можно назвать lesson, urok или uroc. Если придерживаться такого правила, то при существенном развитии сайта такие файлы легче будет найти.

67 Создайте нужные папки для вашего сайта.

68 Среда Dreamweaver 8 В главном окне находится строка главного меню, с помощью которого мы сможем получить доступ ко всем возможностям Dreamweaver. Кроме привычных пунктов меню: File (файл), Edit (редактирование), View(вид), Insert (вставить), Window (окно), Help (помощь), есть и характерные для Dreamweaver: Modify (модифицировать), Text (текст), Commands(команды), Site (сайт).

69 Панель объектов (Расположена под строкой меню) HTML код Крод и дизайн Дизайн страницы Содержимое тэга Контекстная подсказка по тэгам. Обмен документов на сервере. Просмотр документа в браузере. Обновление вида страницы. Установка точек прерывания при отладке. Установка просмотра неотображаемых элементов.

70 Панель свойств объекеов Propertis В ней отображаются свойства выделенного объекта. Справа могут находится еще несколько панелей. Например панель File – отображает структуру сайта.

71 При вставке объекта автоматически формируется HTML код, который можно просматривать в окне кода.

72 Создаем первую страницу и настраиваем параметры страницы Запустите программу Dreamweaver 8 (если она еще не запущена). Создайте новую страницу. Modify(изменить) - Page Properties (свойства страницы) или Page Properties внизу страницы. В открывшемся окне установить цвет фона, текста, ссылок, кодировку, заголовок. Сохранить файл: File - Save As (латинские буквы нижнего регистра index.html).

73 какую кодировку выбрать? выбираем пункт Кириллица (Windows). В противном случае выберем ту кодировку, которую требует сервер. Если мы создаем странички на английском языке, наш выбор Западноевропейская.

74 Обратите внимание При редактировании страницы меняется HTML код В тэге указана кириллическая кодировка

75 Вставьте таблицу Insert – Table. Расставьте в ячейках страницы название страницы, картинки. Сохраните страницу в предварительно созданной папке site под именем index.html Просмотрите ее в браузере. Исправьте недочеты.

76 Создайте дополнительные страницы сайта и сохраните их в папке content. Настройте гиперссылки. Не забывайте все используемые картинки храним в папке images.

77

78

79

80

81

82

83

84 Настройка Dreamweaver А сейчас самое время настроить наш Dreamweaver так, чтобы он нормально понимал русский язык и создавал именно такие Web-страницы, какие нам нужны. Вся работа будет происходить в диалоговом окне Preferences, состоящем из множества вкладок с разными элементами управления. Чтобы вызвать его, выберем в меню Edit пункт Preferences или нажмем комбинацию клавиш В левой части окна настройки отображен список категорий Category, а в правой настройки, относящиеся к выбранной в нем кате- гории. Выберем в списке категорий пункт New Document.

85 Сначала нужно выбрать в раскрывающемся списке Default Document Type (DTD) пункт HTML 4.01 Transitional. Этот пункт предписывает создавать страницы, используя разновидность языка HTML, "по- нимаемую" всеми Web-обозревателями. Все знают, что каждый символ, который вводится с клавиатуры и отображается на экране, имеет уникальный номер, называемый кодом символа. Совокупность таких кодов вместе с описанием, какой код какому символу соответствует, образует кодировку, или кодовую таблицу. Каждая кодировка имеет свое наименование, например 1251 или КОИ-8.

86