Как составить сайт предметный

Мастер-класс: « Создание и ведение персонального
сайта как составляющая часть информационной культуры учителя».

В том году мне
посчастливилось принять участие в конкурсе «Самый классный классный».   И на
первом этапе учителям нужно было предоставить ссылку на свой сайт.  Естественно
сайта у меня не было. И нужно было в крайчайшие сроки его создать.

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

Поэтому
это тема мне показалась актуальной для сегодняшнего выступления.

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

Сайт (от англ. website: web — «паутина, сеть» и site —
«место», буквально «место, сегмент, часть в сети») — совокупность электронных
документов (файлов) частного лица или организации в компьютерной сети,
объединённых под одним адресом (доменным именем или IP-адресом).

Типы
сайтов

1.
Сайт-визитка наиболее удачно представляет имидж учителя

2.
Сайт-портфолио, общие сведения об учителе

3.
Предметный сайт наполняется разнообразной информацией по предмету (видео,
аудио, мультимедийной.

4.
Сайт «Учитель – ученику» (образовательный сайт

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

Таким
образом, учителю-предметнику все
же стоит определиться относительно того, какой сайт он будет создавать: либо
это будет сайт для делового общения с коллегами (предметный сайт); либо сайт,
служащий средством обучения и воспитания школьников (сайт «Учитель – ученику»).

Структура
и содержание сайта

Содержание
сайта – важнейший его
элемент. Распространенной ошибкой является стремление сделать сайт
«всеобъемлющим», самым интересным и ярким по содержанию. Важно представить себя
на месте учеников, родителей, коллег и размещать

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

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

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

На
страницу «Нормативные документы» обычно помещают
устав школы, примерную программу по предмету, рабочую программу учителя,
тематическое планирование и другие. Как правило, размещаемые здесь материалы
представляют собой текстовые файлы большого объема. Их целесообразно предлагать
в виде заархивированных файлов, удобных для скачивания, либо размещать
материалы на сторонних сервисах Интернет (например, DocMe), предоставляя
пользователям сайта лишь ссылки.

Методическая копилка может
включать два раздела: урочная деятельность и внеклассная работа. В раздел
«Урочная деятельность» следует поместить конспекты уроков; авторские цифровые
образовательные ресурсы, в том числе и презентации; ссылки на внешние ресурсы
Интернет и другое. Раздел «Внеклассная работа» может отражать работу с
одаренными детьми, например, участие в олимпиадном движении; участие в
научно-практических конференциях; включать план работы предметного кружка;
отчет о проведенных мероприятиях, акциях, КТД и другое.

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

Достижения учащихся:
исследовательские и проектные работы, эссе, дипломы, грамоты, сертификаты
учащихся и многое другое.

Фотогалерея обычно
пополняется фотографиями, поэтому заранее следует предусмотреть её
многоступенчатую структуру, т. е. список в виде набора гиперссылок. Со
временем, пополняясь все новыми фотографиями, фотогалерея сможет стать своего
рода информационным источником о жизни ученического сообщества.

«Гостевая книга» необходима для организации обратной связи с пользователями
Интернет-ресурса. Важно отметить, что владелец сайта должен быстро реагировать
на каждое сообщение пользователей. Только так можно поддерживать «живое»
общение, и тогда у сайта появятся новые посетители, он приобретет
единомышленников или оппонентов.

Конструкторы
сайтов

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

Наиболее
популярные бесплатные конструкторы сайтов:

Основные
преимущества конструктор сайтов:

·        
Они просты в использовании. Всё
делается пошагово и легко.

·        
Разделение дизайнерской и
текстовой частей: макет хранится отдельно от текста. Захотите сменить дизайн –
без проблем, несколько кликов и всё готово!

·        
Наличие готовых шаблонов
макетов, для создания которых вне конструктора требуется знание языка
программирования HTML.

·        
Лёгкость загрузки изображений.
Картинки можно добавлять, не выходя из браузера и сразу размещать на страницах,
создавать галереи либо делать их частью дизайна макета.

·        
Богатый набор дизайнерских
шаблонов на любой вкус.

·        
Оперативная публикация страниц.
Изменения отображаются сразу же после их внесения.

·        
Надёжность – все файлы хранятся
на сервере конструктора. Поэтому Вам не стоит беспокоиться о создании резервных
копий данных или о возможности взлома — обо всём этом заботится персонал по
обслуживанию серверов выбранного конструктора сайтов.

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

Недостатки:

·        
Недостаточно запоминающийся
адрес страницы в бесплатной версии;

·        
Довольно слабый раздел
«помощь», для детального освоения возможностей его явно мало;

·        
Реклама в нижнем левом углу,
которую можно убрать, лишь оплатив платный пакет.

Технология
создания сайта учителя в Nsportal.ru

·        
Сайт nsportal.ru представляет
собой социальную сеть для работников образования, то есть для воспитателей
детских садов и учителей в школе. Сайт очень грамотный и приятно оформленный,
сайт также содержит очень много полезной общей информации и имеет очень много
постоянных посетителей. Меню сайта имеет семь главных разделов расположенных
сверху, от информации по детским садам до разделов школы и ВУЗов. Также на
сайте есть еще 12 разделов, включая разделы новостей, раздел библиотека и
другие. В разделе меню Школа есть 18 подразделов касающихся информации по
основным предметам обучения в школе

Создать
свой персональный мини-сайт на nsportal.ru очень просто. Достаточно
зарегистрироваться и мини-сайт создастся автоматически.

На
мини-сайте можно разместить свое портфолио. Если у Вас уже есть готовые тексты
и фотографии, то это займет не более часа.

И,
разумеется, Вы сможете получить Свидетельство о публикации и Сертификат о
создании сайта!

Сайт
школы, детского сада, класса, кружка…

Зарегистрированные
пользователи могут создавать сайты образовательных учреждений, где можно
рассказать о своей работе, добавлять новости и объявления, создавать обсуждения
и фотоальбомы.
На сайтах образовательных учреждений можно создавать сайты классов, групп,
кружков и т.д. Для этого надо на главной странице сайта образовательного
учреждения нажать ссылку «Создать сайт класса, группы, кружка…». Сотрудники,
создавшие мини-сайты в нашей социальной сети, могут добавить свой мини-сайт в
список сайтов сотрудников школы.

11
слайд:

I.           
Набираем в строке
адреса http://nsportal.ru

12
слайд:

II.           
II. Выбираем «Мой мини-сайт»
и Заполняем форму регистрации

13 слайд:

III.           
Заходим на email,
в полученном письме проходим по ссылке наnsportal

14 слайд:

IV.           
Заполняем данные

15
слайд:

V.           
Последующие действия

·        
Ваш сайт готов. Посмотрите как
отображаются введенные вами данные.

·        
Для изменения данных
нажмите Редактировать:

·        
Чтобы проверить наличие сайта,
в нижнем правом углу выберите Выйти:

·        
Для последующих входов на свой
сайт, на Главной странице проходите на Мой мини-сайт:

·        
Выбираете Войти, входите,
введя регистрационные данные.

16,17
слайды:

Мой
сайт – демонстрация сайта.

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

Достоинства сайта в
системе uCoz:

1.     
Интересный и профессиональный дизайн.

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

3.     
Рейтинг.

4.     
Возможность загружать большие файлы в хранилище, а на своём сайте
делать ссылку на этот материал.

Недостатки:

1.     
Сложный вебтоп пароль;

2.     
Реклама;

3.     
Панель управления находится на отдельной вкладке, чтобы попасть в
неё со своего сайта, надо вводить пароль, но, если мы оставим страницу с
вкладкой «Управление сайтами», то никаких неудобств ощущать не будем. Просто
нажмём рядом с названием сайта вкладку ПУ (панель управления).

4.     
Очень часто сайты учителя, созданные на uCozе, похожи руг на
друга:

1.            
 небольшой выбор дизайнов на школьную тему;

2.            
 одинаковая навигация.

Тем не менее есть учителя, которые смогли преодолеть эти минусы и
превратить их в плюсы – пример такого сайта – сайт Гвоздиковой Елены Ивановны.

Итак, попробуем создать свой сайт:

1.     
В адресную строку забиваем www.uCoz.ru

2.     
Регистрируемся.

3.     
Нажимаем на значок «Мои сайты» — появляется панель «Управление
сайтами»

4.     
Нажимаем вкладку «Создание сайта», заполняем строку «Адрес сайта»,
вводим код безопасности, ставим галочку, что согласны с правилами и нажимаем
«Продолжить».

5.     
Далее выбираем дизайн сайта. Следующий этап – выбираем модули,
необходимые для вашего сайта.

Заключение

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

В сети
Интернет можно найти различные по степени подробности инструкции по работе с
бесплатными конструкторами сайтов, например:

1.     
«Создать сайт в
системе uCoz: пошаговая инструкция» по адресу:http://manual.ucoz.net/board/16-1-0-363

2.     
«Как сделать свой сайт самому?
(конструктор Jimdo)», адрес: http://onservis.ru/kak-sdelat-svoy-sait.html

3.     
«Как создать свой сайт
на Google бесплатно?», адрес:http://www.instructing.ru/hosting/google.html

4.     
«Как создать сайт на народе
(narod.ru)?», адрес: http://free-doxod.ucoz.ru/index/site_na_narod_ru/0-18

5.     
«Создать сайт в
конструкторе Okis.ru, адрес http://okis.ru/reg..html

6.     
«WIX: Создать сайт бесплатно»,
адрес: http://ru.wix.com/

7.     
«Создай и раскрути свой сайт
бесплатно», адрес http://www.setup.ru/

8.     
«Создать сайт на a5.ru»,
адрес: http://www.a5.ru/

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

Открытость образования может быть обеспечена за счёт размещения на сайте

• учебных программ,
• авторских разработок педагога,
• некоторого дидактического материала,
• творческих работ учеников,
• информацию по используемым учебно-методическим комплектам,
• дополнительную информацию (планы работы, конкурсы, мероприятия, …).

Доступность образования заключается в размещении на предметном сайте учителя

1. учебных материалов, которыми ученик может воспользоваться в любое удобное для него время;
2. ссылок на образовательные порталы, для
   • поиска дополнительного материала,
   • подготовки докладов или рефератов по предмету,
   • проведения исследовательской или проектной работы,
   • отработки приобретенных навыков и умений,
   • подготовки к проверочным и диагностическим работам;
3. домашнего задания;
4. контактных данных учителя, что позволит оперативно связаться в учителем, по средствам телефона, электронной почты или других средств коммуникаций, особенно это полезно классным руководителям, например, выяснить причину отсутствия ребёнка на занятиях или передать срочное сообщение родителям.

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

Структура сайта

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

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

• учебные материалы в различной форме,
• методические разработки учителя,
• творческие работы учителей,
• весёлые задания (занимательные задачи)
• фотоальбом
• контактные данные.

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

По форме изложения учебный материал может быть представлен в виде

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

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

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

Творческие работы учеников – любой продукт их деятельности, в том числе исследовательской и проектной: рисунки, презентации, видеоролики, брошюры, буклеты, …

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

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

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

Методика использования предметного сайта учителя в образовательном процессе

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

Использование предметного сайта учителя на уроке

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

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

Основной принцип учителя на уроке должен заключаться в том, что ученик обязательно должен почерпнуть что-то новое для себя. Усреднённую схему урока можно представить следующим образом (Рисунок 1):

Рассмотрим возможность использования предметного сайта на каждом этапе урока.

На этапе «Актуализация знаний» учитель “подталкивает” ученика к активации знаний, полученные им на прошедших уроках или при изучении предыдущих тем предмета, которые понадобятся ему для работы на уроке.

Это может быть сделано в виде опроса, решения кроссворда или задачи (поставленной проблемы) и т.д. Предметный сайт здесь может заменить опрос, если его представить в виде теста для самоконтроля. Кроссворд, выполненный, например, в виде flesh-приложения, так же может быть размещён на сайте.

Ученик, выполнивший задания первым, комментирует ответы на вопросы и получает оценку. Остальные учащиеся класса имеют возможность дополнить или скорректировать ответ.

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

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

Конспект, представленный в виде презентации, более наглядный, смена слайдов снимает проблему монотонности. Динамика объектов на слайде позволит сконцентрировать внимание на конкретном объекте. Здесь главное не переборщить, иначе ученик перестанет воспринимать учебный материал, а сосредоточится на анимации объектов, например, будет рассматривать как появляется, передвигается или исчезает объект, но не будет понимать зачем всё это происходит, смысловая линия будет утеряна.

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

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

Этап «Закрепление изученного материала» так же может проходить с использованием предметного сайта. Небольшая самостоятельная работа в виде теста для самопроверки, позволит сделать акцент на наиболее важных деталях изученной темы. Ученикам, справившимся с тестом с первого раза, необходимо поставить оценку. Ученики, испытавшие трудности при ответе на вопросы теста могут получить помощь педагога, обратиться к материалу учебника или рабочей тетради.

Эту же роль может выполнить интерактивный кроссворд, размещённый на сайте.

Методика использования сайта учителя на этапе «Обобщение материала» совпадает с методикой использования сайта предыдущего этапа. Отличия будут заключаться в качестве вопросов. Они должны составляться таким образом, чтобы отражать место этого конкретного урока во всей изучаемой теме или предмета в целом.

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

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

Использование предметного сайта учителя во внеурочной деятельности

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

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

Можно предложить некоторое командное состязание. На предметном сайте учителя размещаются тестовые вопросы одного конкурса, например, конкурса интеллектуалов, команда или представитель команды (капитан) отвечает на них. Результаты могут быть доступны сразу, если используется тест для самопроверки, или отправляются на адрес электронной почты учителя, если используется контролирующий тест. Учитель подводит итоги во время проведения следующих конкурсов, после чего оглашает их.

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

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

Использования предметного сайта учителя в домашних условиях

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

Просмотр странички «Домашнее задание» позволит ученику не оказаться в “неудобном положении”, когда к уроку не готов, а тебя спросили. Это же не позволит прибегнуть к популярной отговорке учеников: «Я не знал, что задано» или «Мне сказали, что ничего не задано». Однако с внедрением электронного дневника учащегося, актуальность размещать домашнее задание на сайте уменьшилась.

Просмотр учебного материала урока поможет как отсутствующим на уроке ученикам, так и присутствующим в качестве повторения. Особенно часто обращаться к этому ресурсу будут в случае интересного представления этого материала.

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

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

И, наконец, саморазвитие. Занимательные задачи, задачи повышенной сложности, кроссворды способствую развитию ученика. Мотивированное решение задачи с объяснением – возможность получения дополнительной оценки.

Предметный сайт учителя – Портфолио достижений

Современные требования к учителю становятся более жёсткими. Всё время приходится доказывать, что учитель не ограничивается проведением уроков, а ведёт всестороннюю работу:

1. активно участвует в районных методических объединениях;
2. выступает на семинарах разного уровня;
3. участвует в работе круглых столов;
4. принимает участие в жюри олимпиад и конкурсов;
5. имеет победителей конкурсов по предмету;
6. участвует в профессиональных конкурсах разного уровня;
7. имеет авторские разработки уроков и внеурочных мероприятий;
8. активно участвует в совершенствовании методики преподавания;
9. распространяет опыт работы (наличие печатных работ);
10. участвует в мероприятиях по развитию предмета;
11. является участников педагогических сетевых сообществ.

Всё это можно отразить на предметном сайте учителя. Фотогалерея покажет насколько интересно проходят мероприятия и передаст их атмосферу. Тогда ни у какого проверяющего не возникнет вопрос: «Соответствует ли учитель заявленной категории?»

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

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

Сайт будет статическим. Это означает, что на сайте не будет системы управления содержимым (CMS) типа WordPress или Joomla: всё содержимое и HTML-код оформления сайта будет находиться в отдельных файлах. Для небольшого сайта этого вполне достаточно, и для просмотра такого сайта не потребуется никакого дополнительного программного обеспечения, кроме стандартного веб-браузера.

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

Что потребуется для создания сайта

1. Любой веб-браузер (Google Chrome, Opera, Mozilla Firefox и пр.). Тот, которым вы обычно пользуетесь. В нём мы будем просматривать страницы будущего сайта.
2. Доступ к сети Интернет. Наш сайт будет использовать современные шрифты и библиотеки, которые будут загружены из Интернет. Если устройство, на котором будет просматриваться сайт, не имеет выхода в Интернет, то сайт может отображаться неправильно.
3. Бесплатный текстовый редактор Notepad++. Скачать можно с официального сайта https://notepad-plus-plus.org/downloads/. Этот редактор похож на обычный Блокнот из стандартного набора программ Windows, но удобнее и функциональнее.
4. Знать и уметь копировать и переименовывать файлы, работать с архивами (распаковывать файлы из архива). Готовые HTML-шаблоны публикуются в Интернет в виде ZIP-архивов, которые надо распаковать на свой компьютер.
5. Потребуются лишь поверхностные знания языка разметки HTML.

Как будем делать сайт

Общий план работ по созданию сайта будет следующим:

1. Будем использовать готовый и бесплатный HTML-шаблон для многостраничного сайта. Это, во-первых, существенно сэкономит время создания сайта и, во-вторых, гарантирует его презентабельный внешний вид и адаптивность к разным типам устройств: от обычных компьютеров до смартфонов.
2. Продумаем структуру сайта: количество страниц, их названия и содержание. От этого этапа зависит набор пунктов меню на сайте.
3. Обычно в архиве с шаблоном присутствует несколько HTML-файлов. Каждый из них — отдельная страница сайта. Всё, что повторяется на всех страницах (заголовок сайта, слоган, логотип, меню и пр.), должно быть одинаково оформлено в соответствующих HTML-файлах. Чтобы не выполнять одну и ту же работу несколько раз, будем менять код только в одном файле (index.html). Затем этот файл скопируем и вставим в папку с сайтом столько раз, сколько у нас останется страниц для оформления.

Выбираем и скачиваем шаблон

Выбрать бесплатный шаблон для сайта можно на сервисе https://www.free-css.com/ (пункт меню Free CSS Templates).

Выберем https://www.free-css.com/free-css-templates/page269/diagoona и посмотрим его «в действии» (кнопка LIVE DEMO):

Скачайте архив с шаблоном на свой компьютер с помощью кнопки DOWNLOAD.

Перейдите в каталог со скачанным архивом шаблона и распакуйте его в свою рабочую папку. Перейдите в эту папку (templatemo_550_diagoona):

Откройте файл index.html в браузере и проверьте шаблон сайта. Если всё в порядке, то переходим к следующему этапу.

Проектируем структуру

Структура вашего конкретного проекта может быть другой, но для примера используем следующий набор разделов сайта:

• Главная страница. Здесь будут размещены основные сведения об экологии, термины и определения. Файл страницы — index.html.
• Кризисы и проблемы. Описание основных экологических проблем и причин, к ним приводящим. Файл страницы — problems.html.
• Экология моего города. Состояние экологии в вашем городе. Файл страницы — mycity.html.

Каждый раздел сайта — это отдельная страница и отдельный HTML-файл. Имена будущим файлам можно дать другие, но следует помнить правила:

• Имя файла для главной страницы должно быть index.html.
• Имена файлов должны быть записаны английскими буквами. Можно использовать символы подчёркивания или дефис для разделения отдельных слов в составе имени файла (при желании).

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

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

Удаляем лишнее из шаблона

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

Откройте папку с сайтом и удалите все html-файлы, кроме файла index.html:

Заголовок сайта (тег title)

Правой кнопкой мыши кликните на файле index.html и выберите пункт Edit with Notepad++.

Находим следующий код в файле:

<title>Diagoona HTML CSS Template</title>

И меняем его на другой:

<title>Экология города</title>

Текст из тега title будет отображаться в названиях вкладок браузера при просмотре веб-страниц сайта:

«Шапка» сайта

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

Заголовок и слоган

Если вы ещё раз откроете шаблон сайта в браузере, то увидите, что его название (DIAGOONA) и слоган (new bootstrap template) расположены друг под другом:

В файле index.html нам надо найти вот этот код:

<div class="media-body">
	<h1 class="tm-sitename text-uppercase">diagoona</h1>
	<p class="tm-slogon">new bootstrap template</p>
</div>

И изменить его следующим образом (при этом теги и их атрибуты мы не удаляем):

<div class="media-body">
	<h1 class="tm-sitename text-uppercase">Экология города</h1>
	<p class="tm-slogon">сайт об экологии моего города</p>
</div>        

Сохраните файл, откройте его в браузере и проверьте внесённые в файл изменения:

Основное меню

В меню шаблона сайта присутствует следующее меню:

В файле index.html нам надо найти код, отвечающий за вывод этого меню:

<ul class="navbar-nav text-uppercase">
	<li class="nav-item active">
		<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="about.html">About</a>
	</li>
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="services.html">Services</a>
	</li>                            
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
	</li>
</ul>                            

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

Все эти названия и имена файлов мы определили при проектировании сайта. Названия пунктов меню — это то, что находится до закрывающего тега </a>. Имена файлов для страниц — то, что находится в атрибуте href.

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

<ul class="navbar-nav text-uppercase">
	<li class="nav-item active">
		<a class="nav-link tm-nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="problems.html">Кризисы и проблемы</a>
	</li>
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="mycity.html">Экология моего города</a>
	</li>                            
	<!--<li class="nav-item">
		<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
	</li>-->
</ul>            

Если для вашего проекта требуется, наоборот, больше пунктов, то просто скопируйте фрагмент кода какого-нибудь пункта из меню, вставьте в общий список и точно так же замените его название и имя файла.

Сохраните изменения в файле и откройте его в браузере:

Если кликнуть на любом пункте меню, кроме Главная, то вы увидите сообщение об ошибке в браузере:

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

«Подвал» сайта

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

Находим место в файле index.html, где присутствует этот текст:

<footer class="tm-site-footer text-right">
	<p class="mb-0">Copyright 2020 Diagoona Co. 
	
	| Design: <a rel="nofollow" target="_parent" href="https://templatemo.com" class="tm-text-link">TemplateMo</a></p>
</footer>

Заменим этот текст на свой собственный. Мы указали название сайта, а вы можете вставить своё имя и/или адрес электронной почты:

<footer class="tm-site-footer text-right">
	<p class="mb-0">Copyright 2021 Экология моего города</p>
</footer>

Откройте страницу в браузере и проверьте, всё ли правильно:

Добавляем контент

Посмотрим на текст главной страницы в браузере:

Найдём код в файле index.html, который включает данный текст:

<section class="tm-content">
	<h2 class="mb-5 tm-content-title">Diagoona HTML Template</h2>
	<p class="mb-5">Diagoona is provided by TemplateMo website. You are allowed to use this template for your websites. You are NOT allowed to redistribute this template ZIP file for a download purpose on any template collection website.</p>
	<hr class="mb-5">
	<p class="mb-5">Diagoona is Bootstrap v4.4.1 layout. This BG is 50% transparent. You can set the background images auto play settings (true or false in line number 33) in templatemo-script.js file in js folder.</p>                        
	<a href="about.html" class="btn btn-primary">Continue...</a>
</section>

В данном коде нам надо изменить:

1. Заголовок: текст, который находится внутри тега h2. Сам тег h2 и его атрибуты не меняем.
2. Текст страницы: код, который находится после заголовка и до закрывающего тега section. При этом после вставки нового текста разметить его на абзацы необходимо при помощи тегов <p class=»mb-5″> и </p>, чтобы новый текст выглядел так, как это задумано автором шаблона.

Элемент <hr class=»mb-5″> служит для отображения горизонтальной черты на странице. Вы можете или удалить этот элемент, или использовать в своём тексте столько раз, сколько хотите. Для этого просто выделите этот код, скопируйте и вставьте туда, куда необходимо.

После замены текста должно получиться что-то наподобие:

<section class="tm-content">
	<h2 class="mb-5 tm-content-title">Экология</h2>
	<p class="mb-5">Экология —  наука о взаимодействиях живых организмов между собой и с их средой обитания.</p>
	<hr class="mb-5">
	<p class="mb-5">Экология, как комплекс наук, тесно связана со всеми естественными науками.</p>
	<hr class="mb-5">
	<p class="mb-5">В настоящее время всё чаще под экологическими проблемами понимаются вопросы охраны окружающей среды.</p>
</section>

Посмотрим на страницу в браузере:

Поздравляем! Основная работа по созданию сайта уже сделана, и осталось совсем-совсем немного!

Создание остальных страниц сайта

Остальные страницы нашего сайта будут выглядеть точно так же, как и главная страница (файл index.html). Единственное отличие состоит в том, что контент будет другим.

Поэтому нам просто надо скопировать файл index.html столько раз, сколько у нас осталось разделов, переименовать их и заменить текст для контента в каждой странице.

Создание файлов

Скопируйте файл index.html два раза (столько разделов-страниц у нас осталось):

Переименуйте добавленные файлы в соответствии с проектом сайта (problems.html и mycity.html):

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

Редактирование контента

Но для завершения работ над созданием сайта нам надо заменить контент у созданных страниц.

Для этого открываем файлы problems.html и mycity.html в редакторе Notepad++, ищем места, где находится контент и заменяем его на новый.

Фрагмент кода для файла problems.html:

<section class="tm-content">
	<h2 class="mb-5 tm-content-title">Кризисы и проблемы</h2>
	<p class="mb-5">Текст о кризисах и проблемах...</p>
	<p class="mb-5">Ещё текст о кризисах и проблемах...</p>
</section>

Фрагмент кода для файла mycity.html:

<section class="tm-content">
	<h2 class="mb-5 tm-content-title">Экология моего города</h2>
	<p class="mb-5">Текст про экологию моего города...</p>
	<hr class="mb-5">
	<p class="mb-5">Ещё текст про экологию моего города...</p>
	<p class="mb-5">И заключение...</p>
</section>

Всё! Теперь если вы посмотрите на созданный сайт в браузере, то все страницы должны открываться.

Последние штрихи для отличников и перфекционистов 🙂

Когда вы просматривали созданный сайт в браузере, то, наверное, обратили внимание на то, что на какой бы пункт вы не кликнули, всегда подсвечивается пункт меню для Главной страницы:

Чтобы всегда подсвечивался активный пункт, надо кое-что изменить в коде для меню сайта. Эти изменения необходимо сделать в каждом из двух файлов. Файл index.html не трогаем, так как там всё в порядке.

Как можно заметить, за подсветку активного пункта меню отвечает класс active в коде гиперссылки:

<li class="nav-item active">
	<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

В других пунктах меню такого класса нет. Поэтому для каждой из двух страниц (файлы problems.html и mycity.html) добавим класс active в код соответствующего пункта и удалим этот класс из ссылки на страницу Главная.

Код для меню файла problems.html:

<ul class="navbar-nav text-uppercase">
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item active">
		<a class="nav-link tm-nav-link" href="problems.html">Кризисы и проблемы</a>
	</li>
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="mycity.html">Экология моего города</a>
	</li>                            
	<!--<li class="nav-item">
		<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
	</li>-->
</ul> 

Код для меню файла mycity.html:

<ul class="navbar-nav text-uppercase">
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="index.html">Главная <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">
		<a class="nav-link tm-nav-link" href="problems.html">Кризисы и проблемы</a>
	</li>
	<li class="nav-item active">
		<a class="nav-link tm-nav-link" href="mycity.html">Экология моего города</a>
	</li>                            
	<!--<li class="nav-item">
		<a class="nav-link tm-nav-link" href="contact.html">Contact</a>
	</li>-->
</ul>           

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

Теперь вы знаете, как можно самостоятельно сделать сайт для проекта, связанного с экологией и климатом. Возможно, этот же шаблон подойдёт и для других тем.

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

Чтобы отправить этот сайт по электронной почте, упакуйте его в ZIP-архив (или любой другой) и прикрепите архив к письму. Получателю останется только распаковать этот архив и запустить файл index.html в браузере.

Этапы создания сайта преподавателя

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

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

Цели персональных сайтов педагогов:

• Систематизировать накопленные в процессе педагогической деятельности электронные образовательные ресурсы.
• Обобщить педагогический опыт с использованием системы Интернет.
• Открыть дополнительные возможности общения в режимах online, offline с коллегами, учащимися и их родителями.
• Рассказать о личности педагога, его достижениях и успехах его учеников.
• Использовать электронные образовательные ресурсы сайта в образовательном процессе школы.

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

Для чего нужен персональный сайт педагогу?

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

Для учеников.

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

Для родителей.

Через свой сайт учителю будет проще наладить процесс общения с родителями учеников. Например, можно создать специальный раздел для родителей, куда периодически добавлять новости или обращения к родителям. Родители могли бы вам давать обратную связь в комментариях или вам лично, например, на ваш e-mail, ICQ, скайп и другие средства связи.

Копилка своих наработок.

На созданном персональном сайте учитель может делать свою подборку образовательных материалов в самых различных видах. Будь то обычные файлы WORD, EXCEL, PowerPoint с конспектами уроков для скачивания (которыми могли бы воспользоваться как ваши ученики, так и коллеги) или сделанные лично вами видео или аудио уроки. Конечно, можно размещать и чужие наработки при полученном разрешении их автора.

Выражение собственного мнения.

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

Общение с коллегами.

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

Каким должен быть сайт?

• Уникальным — материалы, представленные на сайте, показывают, насколько компетентен учитель.
• Удобным в работе: грамотная навигация облегчит работу с сайтом и привлечёт к нему посетителей. Фон, размер и цвет шрифта, заголовки, общее расположение материалов – всё должно быть выдержано в едином стиле, соответствовать друг другу, в противном случае будет нарушена целостность восприятия.
• Сайт должен быть грамотным с точки зрения русского языка. Пусть чистота нашего языка будет заботой каждого человека! Грамматические, стилистические и иные ошибки в текстовом наполнении сайта влияют не только на восприятие информации, но и дискредитируют самого автора.
• Не загруженным ненужной информацией и различными эффектами. Это связано с достаточно низкой реальной скоростью каналов Интернет у большинства пользователей.
• Не должно быть пустых страниц, а иначе, зачем вы их создавали?
• Главная страница сайта обязательно должна быть оформлена – именно на этой странице расположена основная информация, чтобы посетитель заинтересовался и отправился дальше.
• Систематически обновляющимся. Постоянная работа на сайте – стремление к самообразованию, росту профессиональной компетентности.

Где можно создать сайт?

1. Создание сайта в системе uCoz

Достоинства сайта в системе uCoz:

1. Интересный и профессиональный дизайн.
2. Возможность добавлять комментарии.
3. Рейтинг.
4. Возможность загружать большие файлы в хранилище.

Недостатки:

1. Реклама;
2. Панель управления находится на отдельной вкладке, чтобы попасть в неё со своего сайта, надо вводить пароль. (Но, если мы оставим страницу с вкладкой «Управление сайтами», то никаких неудобств ощущать не будем. Просто нажмём рядом с названием сайта вкладку ПУ (панель управления).
3. Очень часто сайты учителя, созданные на uCozе, похожи руг на друга:

1. небольшой выбор дизайнов на школьную тему;
2. одинаковая навигация.

Но есть возможность сделать сайт более индивидуальным.

Для того, чтобы создать сайт на uCozе:

1. В адресную строку забиваем www.uCoz.ru
2. Регистрируемся. Проходим по ссылке в письме электронной почты.
3. Нажимаем на значок «Создать сайт», заполняем строку «Адрес сайта», вводим код безопасности, ставим галочку, что согласны с правилами и нажимаем «Создать сайт!».
4. Далее выбираем дизайн сайта. Следующий этап – выбираем модули, необходимые для вашего сайта.
5. И вот мы уже находимся в панели управления вашего сайта.
6. Во вкладке «Редактор страниц» на панели управления мы можем осмотреть или удалить модуль и страницы сайта.
7. С помощью вкладки «Файловый менеджер» мы можем управлять материалами страницы и категориями.
8. Для того чтобы изменить дизайн сайта, в панели управления надо нажать на вкладку «Настройки», «Общие настройки».
9. Нажав на гиперссылку во вкладке «Общее» (пример http://masyluktatyana.ucoz.ru/), мы попадаем на свой сайт.
10. На сайте нажимаем вкладку «Вход», вводим пароль и входим на него как администратор.
11. Теперь мы можем работать на сайте. Для того чтобы что-то изменить на странице, надо нажать вкладку с глазом – называется она «Редактировать в визуальном редакторе».
12. Работать с сайтом также можно при помощи панели администратора. Рассмотрим её.
13. Добавить новую страницу можно с помощью вкладки «Добавление» →

«Редактор страниц». С помощью этой же вкладки можно добавить новые файлы и фотографии.

Более подробное описание создания сайта в системе uCoz.ru можно найти здесь — http://manual.ucoz.net/board/40-1-0-363

1. Создание сайта на Google Sites.

Основные достоинства Google Sites:

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

Этапы создания сайта в Google Sites (https://sites.google.com/site/abcsaitg/).

1. Зарегистрируйтесь (введите логин и пароль) в Google Accounts.
2. Перейдите на http://sites.google.com/ и нажмите «Создать».

1. Выбирете шаблон для сайта.
2. Введите название сайта.
3. Посмотрите не занят ли web-адрес. Если занят, то введите на латинице новое название сайта (http://sites.google.com/site/ не меняется, если нет своего платного места в сети, но мы то говорим про бесплатный сайт).
4. Выбирете тему оформления страницы.
5. Наберите указанный код – антибот.
6. Нажмите на кнопку “Cоздать” вверху страницы. Технически наш бесплатный сайт готов. Теперь необходимо наполнить его содержимым: текстами, картинками и т. д.

Как редактировать сайт в Google Sites

Начнем с главной страницы.

1. Нажмите на кнопку в виде карандаша «Изменить      страницу» в верху.
2. Выбирете поле для редактирования и внесите изменения.
3. Нажмите на кнопку «Сохранить» в верху.

Теперь изменения внесены. Аналогичные действия доступны и для других страниц.

Как вставить картинку на страницу созданную в Google Sites

Добавить на страницу картинку или другое содержание можно так: выбрать меню сверху пункт меню «вставить»

Для того что бы меню вставки и форматирования отобразилось нужно перейти в режим редактирования, то есть нажать кнопку «Редактировать». Далее Google Sites предложит стандартный диалог выбора картинки.

Как добавить страницы на сайт созданный в Google Sites:

1. Нажмите на кнопку «Создать страницу» в правом        верхнем углу.
2. В открывшемся окне впишите название страницы, шаблон, положение относительно других страниц.
3. Нажмите «Создать».
4. Отредактируйте и сохраните страницу.

Обзор бесплатных сервисов для создания сайта:

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

A5 (http://www.a5.ru/) — это специальный ресурс, с помощью которого даже человек, не имеющий особых навыков в программировании, сможет создать собственный сайт, достойный внимания посетителей. На базе платформы мощная флеш-система, с её помощью происходит процесс конструирования.

Jimdo (http://ru.jimdo.com/) — один из популярных онлайн-конструкторов сайта, который позволяет с легкостью создать бесплатный сайт. Сервис Jimdo — это широкие возможности для создания многофункционального сайта, простота настройки, управления дизайном и контентом, на сайте имеются подробные подсказки для каждого Вашего действия.

FOXI BIZzz (http://foxi.biz/index.html) — это бесплатная SaaS система, позволяющая создавать сайты и управлять ими без специальных знаний и навыков. Готовый конструктор сайтов позволит быстро настроить дизайн и функциональность сайта, без программного обеспечения.

Wix.com (http://www.wix.com/my-account/sites/) — бесплатный уникальный онлайн-конструктор, где есть всё для создания высококачественного, эксклюзивного и индивидуального Flash-сайта любой сложности, различного дизайна и с различными возможностями без знания языка программирования. В помощь пользователям есть обучающий видеоурок по создания Flash-сайта. Вы можете создавать сайт с нуля или с помощью уже готовых шаблонов. Возможности: можно вставлять разные мультимедийные фрагменты (аудио, анимацию, фотографии, картинки, видео, иконки, виджеты и многое другое).

Okis.ru (http://okis.ru/) — бесплатный хостинг с очень дружелюбным интерфейсом. Данный сервис предоставляет возможность бесплатно создать свой сайт. Качественная техподдержка и обширный форум (в отличии от большинства других сервисов бесплатного хостинга), всегда поможет получить ответ на любой ваш вопрос.

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

• http://a2b2.ru/besplatniy_site_uchitelya/
• Мини-сайт        «Социальная        сеть        работников        образования» http://nsportal.ru
• http://www.webstolica.ru/customers/free-site/personal и т.д.

Рекомендации и замечания при создании сайта

• Структура сайта должна быть понятной, не содержать логических противоречий, позволять посетителю сайта легко найти всю опубликованную информацию.
• Не увлекайтесь фотографиями. Они должны быть тщательно отобраны и оптимизированы (в первую очередь по размеру). Посмотрите на презентации, которые вы публикуете. Если они действительно необходимы, и их нельзя заменить текстовым документом или PDF, то хотя бы уменьшите их вес за счет оптимизации вставляемой в них графики.
• Придерживайтесь одного стиля! Необходимо помнить, что единая цветовая гамма способствует полному и быстрому восприятию информации. Количество основных используемых цветов не должно быть более трех. Используйте спокойные для восприятия цвета.
• Большое количество разных шрифтов разного цвета отвлекает от содержания. Размер шрифта должен быть достаточным для комфортного чтения, не более того!
• Не следует злоупотреблять выделением полужирным и курсивным начертанием (желательно не чаще одного-двух раз на странице).
• Не следует лишний раз применять такие приемы, как подчеркивание или перечеркивание текста, т.к. подобные текстовые эффекты могут ассоциироваться у пользователей с гипертекстовой ссылкой.
• Для лучшего восприятия текстовой информации все заголовки на страницах должны быть одинаковыми по размеру шрифта и иметь одинаковый цвет.
• На каждой странице в верхней части должно быть указано название сайта.
• Проверяйте грамматику!
• Не увлекайтесь необычными фонами — они часто затрудняют чтение текста.
• Следите, чтобы не появлялась горизонтальная полоса прокрутки (т.е. страница с текстом шире разрешения экрана), такой текст трудно читать!
• Старайтесь, чтобы верхний колонтитул страницы не занимал половину экрана.
• Не рекомендуется использование java-скриптов, которые могут затруднить просмотр сайта. Это может быть неудачное сочетание цвета фона и текста, использование пестрого фона, java скрипты типа «Вращающиеся ссылки меню”, «Переливающиеся ссылки”, «Летающий текст”, блокирующие правую кнопку мыши, окошки типа alert при загрузке страницы, или при переходе по ссылке.

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

Главное меню — на каждой странице, внешние ссылки — открываться в отдельном «окне» для того, чтобы посетитель сайта не ушел далеко с рассматриваемого информационного ресурса.

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

Обращайте внимание на адресную направленность. Школьные сайты обычно рекомендуются учителям, родителям и детям — это должно быть отмечено. Обязательно наличие интерактивных элементов — гостевая книга, где посетители сайта могли бы выразить свое мнение, задать вопросы. Но сообщения в Гостевой книге необходимо постоянно прочитывать, т.к. там может быть размещен негативный спам.

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

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

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

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

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

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

Еще один момент связан с количеством знаков в строке. Это также вопрос психологии восприятия. Строка книжного текста, как правило, состоит из 200-250 знаков. Но для чтения с монитора такая ширина строки неудобна: здесь предпочтительно не более 120-150 символов, т.е. текст как бы растягивается сверху вниз, потому что глаз в процессе чтения утомляется больше при движении по горизонтали, чем при движении по вертикали.

Важнейшее правило, связанное с размещением текста на странице сайта, – обязательное дробление его на небольшие абзацы с расстоянием между ними, превышающим расстояние между строчками. Такое размещение текста делает его более удобным для быстрого чтения. А чтение в Сети – это, как правило, именно быстрое, «просмотровое» чтение.

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

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

фотографий до текста и альтернативные подписи для каждого графического изображения.

Желательно, чтобы содержание страницы по размеру в длину было не больше, чем один, максимум два экрана. Большой текст лучше разбить на две или несколько страниц (например, по главам).

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

Структура и содержание сайта

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

Вот некоторые из наиболее часто встречающихся типов персональных сайтов учителя:

1. Сайт-визитка наиболее удачно представляет имидж учителя и сообщает общие сведения о нем: образование, стаж работы, основные направления деятельности, грамоты и благодарности за педагогическую работу, публикации и т. д. Такой сайт хорошее подспорье при составлении резюме учителя.
2. Сайт-портфолио может включать следующие разделы: 1) общие сведения об учителе: образование, трудовой стаж, курсы повышения квалификации, награды, грамоты, благодарственные письма и другое; 2) результаты педагогической деятельности, представление научно-методической работы, презентацию педагогического опыта, разработки уроков, материалы по внеурочной деятельности по предмету и другое.
3. Предметный сайт наполняется разнообразной информацией по предмету (видео, аудио, мультимедийной). Обычно структура сайта определяется или предметными линиями курса, или классно-урочной системой. Информация, как правило, предназначенная для учителей, может быть не только прочитана, но и скачана.

В настоящее время структура и содержание материалов персональных сайтов педагогов не регламентируется никакими нормативными документами. Однако размещаемые материалы должны иметь образовательный характер и не противоречить общепризнанным научным фактам, этическим нормам и не идти в разрез с законодательством РФ. Содержание сайта – важнейший его элемент. Распространенной ошибкой является стремление сделать сайт «всеобъемлющим», самым интересным и ярким по содержанию. Невозможно объять необъятное, следует работать на ту аудиторию, с которой учитель собирается общаться на страницах своего сайта. Здесь важно представить себя на месте учеников, родителей, коллег и размещать на персональном сайте ту информацию, которая будет им интересна и полезна.

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

Некоторые персональные сайты педагогов в сети Интернет:

1. Персональный сайт учителя-логопеда С. Е. Соколовой http://svetozar.15- ozr.edusite.ru/p1aa1.html
2. Сайт учителя-логопеда Т. С. Матейкович http://mtas.ucoz.ru/
3. Персональный сайт учителя-логопеда Л. С. Пановой «Логос» http://www.podolsklogos.ru/
4. Сайт Г.Ф. Полушкиной, учителя английского языка http://www.pgfenglish.ru/
5. Персональный сайт И.С. Агаповой, учителя физики http://ingaagapova.ucoz.ru/index/8_kl_vy_propustili_urok/0-64
6. Персональный сайт педагога-психолога Н.С. Окуневой http://natokuneva.my1.ru/load/dokumenty/struktura_psikhologicheskogo_zakljuc henija_i_ego_osobennosti/2-1-0-23
7. Персональный сайт педагога-психолога Н. Н. Панкратовой http://nnpankratova.narod.ru/
8. Сайт О.Н. Безноговой, учителя географии «География и ИКТ» http://bongeo.ru/p52aa1.html
9. Информационный сайт Галины Степяк для учителей русского языка и литературы и их учеников «Портфель для словесника» http://slovesnic.ru/

Заключение

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

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

Источники:

1. Создание персонального сайта учителя. Е. О. Мархасева http://nsportal.ru/shkola/raznoe/library/2013/01/20/sozdanie-personalnogo-sayta- uchitelya
2. Создание        персонального        сайта        учителя        http://sitepapa.ru/sozdanie- personalnogo-sajta-uchitelya.html
3. Лучшие решения для создания персонального сайта педагога. Электронный журнал «Образцовая школа». http://obrazshkola.ru/?page_id=637
4. Сайт учителя начальной школы Н. В. Свирида http://nsportal.ru/svirida- natalya-viktorovna
5. Использование персонального интернет сайта педагога в процессе обучения истории. Н. А. Позднякова http://pozdnyakova.ucoz.ru/publ/stati_mezhdunarodnykh_konferencij_po_pedago gike/sajt_kak_novaja_forma_obshhenija_shkoly_i_semi/ispolzovanie_personalno go_internet_sajta_pedagoga_v_processe_obuchenija_istorii/5-1-0-2
6. Сапожкова Ю.А. Создание и развитие персонального сайта учителя. Методические        рекомендации,        Вологда,        2012г. http://viro.edu.ru/attachments/article/3861/Pers_sajt.pdf
7. Требования        к        школьным        сайтам        http://school- 001.ucoz.ru/publ/trebovanija_k_shkolnym_sajtam/1-1-0-1
8. Рекомендации по созданию сайта. CMS.S3 Сервис управления сайтом. http://cms-megagroup.ru/rekom
9. Трофимова Ю.Е. Методические рекомендации. Структура, содержание и дизайн сайта образовательного учреждения. Нефтекамск, 2012г. http://gcpi.neftekamsk.ru/dokument/rekomendacii/sait%20OU.pdf
10. Как избавиться от рекламы на uCoz http://uguide.ru/news/kak_izbavitsja_ot_reklamy_na_ucoz/2012-12-11-33

Содержание:

ВВЕДЕНИЕ

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

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

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

Сегодня во всемирной паутине размещается огромное количество сайтов и их число постоянно растет.

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

Web-технологии это концепция работы с информацией. Она отличается следующими особенностями:

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

Привлекательность Web-технологий как средства доставки информации во многом определяет универсальный интерфейс между человеком и компьютером. Веб-интерфейс как средство доступа к информации интуитивно понятен. Следствием простоты веб-интерфейса является широкая употребимость Интернета как канала коммуникации.

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

Объектом исследования в данной работе являются web-технологии.

Предметом исследования является технологии разработки web-сайтов.

Цель разработка промо сайта для телефона OnePlus5.

Для достижения указанной цели необходимо решить следующие задачи:

• Рассмотреть технологии разработки web-сайтов
• Обосновать выбор инструментов для разработки.
• Спроектировать сайт
• Разработать спроектированный сайт.

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

ОБЗОР ПРЕДМЕТНОЙ ОБЛАСТИ

Типы сайтов

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

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

По цели создания выделяют следующие типы сайтов:

• Некоммерческие
• Коммерческие

По доступности пользователям их условно можно разделить на:

• Закрытые (недоступны для людей, не входящих в определенный круг)
• Полузакрытые (для доступа потребуется пройти процедуру регистрации)
• Открытые (доступны каждому пользователю)

По стилю оформления и функциональности выделяют следующие типы сайтов:

• Флэш-сайты
• Динамические
• Статические

В зависимости от размера аудитории выделяют следующие типы сайтов:

• Узконаправленные и тематические
• Интернет-порталы
• Простые (визитки, домашние страницы и т. д.)

Также делят сайты на типы по их физическому расположению:

• Локальные
• Общедоступные

Основные виды сайтов и их категории

Информационный сайты

Информационные сайты являются одними из самых популярных в сети интернет, они предназначены для донесения до пользователя совершенно любой информации. Рассмотрим существующие типы сайтов информационной направленности.

Существуют разно тематические и одно тематические тематические информационные сайты [3].

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

Новостные сайты

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

Блоги.

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

Условно блоги можно разделить на два вида – личные блоги и корпоративные.

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

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

Условно блоги можно разделить на 2 категории исходя из того, какое количество тем они затрагивают:

• Узко тематические (несколько тем, которые имеют тесную взаимосвязь между собой);
• Обще тематические (могут затрагивать совершенно разные темы).

Сайты имеющие корпоративную направленность.

1. Корпоративные сайты.

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

Можно выделить следующую классификацию корпоративных сайтов- информационный и имиджевый.

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

Для таких сайтов характерным является наличие оригинального яркого дизайна, нестандартных запоминающихся решений в оформлении и структуре [6].

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

2. Сайты-визитки.

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

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

• Быстрота разработки
• Краткость и содержательность при изложении информации
• Привлечение новых клиентов и партнеров
• Малые затраты на разработку
• Удобство и простота управления.

3. Сайты-портфолио.

Сайты-портфолио создаются для привлечения внимания большого количества людей посредством распространения информации об успешно выполненных работах. Часто вместе с информацией размещаются и отзывы клиентов, это позволяет повысить доверие со стороны потенциальных клиентов, так как они могут сами увидеть результат работы и услышать мнение тех, кто этими результатами пользуется. Такие сайты стали наиболее популярными среди веб-студий, фотосалонов, разработчиков са йтов и т. п. [8].

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

3 группа. Коммерческие сайты.

Коммерческие сайты

Основное предназначение корпоративных сайтов это продажа товаров. Коммерческие сайты можно разделить на несколько подкатегорий, в наибольшей степени распространенными из которых, в свою очередь, являются:

• Сайт-витрина;
• Промо-сайты;
• Интернет-магазины;
• Сайты-визитки.

1. Сайт-витрина.

Сайт витрина отличается тем, что их основная цель это реклама продукции. Для реализации механизмов заказа и оплаты эти сайты обычно не предназначены. Чаще всего такие сайты делают производители той или иной продукции. Так как розничной реализацией производители не занимаются, а им нужно найти потенциальных покупателей, то такими сайтами они и поднимают популярность своей продукции среди обычных людей и находят оптовых покупателей. И иногда на таких сайтах указываются компании, у которых можно приобрести тот или иной товар. То есть по сути производитель предлагает уже разрекламированную продукцию для реализации и кроме того еще и предлагает рекламу компании, которая будет заниматься реализацией [15].

2. Промо-сайты.

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

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

3. Интернет-магазины.

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

Чаще всего компании предлагают все свои товары на одном ресурсе, достаточно редко создаются различные сайты для разных категорий товаров [18].

Интернет-магазины могут создаваться любыми организациями и компаниями. Основная цель создания подобных ресурсов это расширение спроса и возможностей сервиса продаж.

4 группа. Социальные проекты.

Социальные проекты

К социальным проектам относятся специальные социальные сети либо сети общей тематики, сайты-сообщества, форумы и т. д. [13]

1. Форумы.

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

Узконаправленные, на которых обсуждаются вопросы тесно связанные какой то одной темой или направлением;

Общей направленности. На таких форумах обсуждаются самые разные вопросы, которые могут быть абсолютно не связаны между собой [9].

2. Социальные сети.

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

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

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

3. группа. Разные веб-сервисы.

Веб-сервисы

Широкое распространение на сегодняшний день получили веб-сервисы:

1. Каталоги – сайты, на которых, в свою очередь, содержатся структурированные ссылки, ведущие на иные веб-ресурсы, и их краткое описание.

2. Почтовые сервисы – предоставляют возможность отправлять и просматривать письма электронной почты.

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

4. Доски объявлений представляют собой ресурсы на которых могут размещаться различные объявления [16]

Языки разметки и таблицы стилей

Основа любой web-страницы это разметка. Применение таких технологий как XHTML, XML и HTML, позволяет задавать структуру веб-страниц. Оформление внешнего вида задается таблицами стилей.

HTML (англ. HyperText Markup Language, язык гипертекстовой разметки) это основная технология разметки, которая используется на всех web-страницах. Браузеры интерпретируют язык html и представляют информацию в удобной для человеческого понимания форме.

Традиционный HTML существует в трех главных версиях (HTML 2, HTML 3.2 и HTML 4 На сегодняшний день Консорциум Всемирной паутины разработал HTML версии 5. Черновая спецификация языка выпущена в 2007 году.

С 2004 года осуществляется разработка HTML 5, которая, в свою очередь, значительно расширяет возможности HTML.

Развитие технологий осуществляется настолько быстро, что стандарты не успевают за этим развитием. Не смотря на то, что HTML достаточно строго описан, браузеры постоянно внедряют поддержу собственных тегов, это несколько мешает платформонезависимой разработке, но задает в какой-то степени направления, в которых должны развиваться стандарты, в том числе Html [18].

XHTML (eXtensible Markup Language, расширяемый язык разметки) позволяет найти решение двух основных проблем, которые связаны с HTML. XHTML более требователен к соблюдения правил разметки, кроме того его использование способствует продвижению идеи разделения внешнего вида документа от его структуры.

Синтаксическая строгость это одновременно и преимущество и недостаток XHTML. Правильно составленными страницы легче заменять и управлять их содержимым при помощи программы, но человеку тяжелее разрабатывать такие страницы. Строгость XHTML затрудняет переход на применение этой технологии. Отсутствие гибкости XHTML превращает эту технологии в менее удобную, чем HTML, который, в свою очередь, намного проще для освоения неопытными пользователями. Таким образом основным языком разметки является HTML и эта тенденция будет сохраняться в ближайшем будущем [15].

XML это разновидность SGML (Standard Generalized Markup Language — стандартный обобщённый язык разметки), который был модифицирован для Web; Использование данной технологии позволяет разработчикам создавать собственные языки разметки. То есть XML позволяет создавать YML (Your Markup Language, собственный язык разметки).

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

Каскадные таблицы стилей ( CSS ) — это язык таблиц стилей, используемый для описания презентации документа, написанного на языке разметки . [1] Хотя чаще всего используется для установки визуального стиля веб-страниц и пользовательских интерфейсов, написанных в HTML и XHTML , язык может быть применен к любому XML- документу, включая простой XML , SVG и XUL , и применим к рендерингу в речи , или на других носителях. Наряду с HTML и JavaScript, CSS — это краеугольная технология, используемая большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений. [2]

CSS разработан в первую очередь для обеспечения разделения представления и контента, включая такие аспекты, как макет , цвета и шрифты . [3] Это разделение может улучшить доступность контента , обеспечить большую гибкость и контроль в спецификации характеристик презентации, позволить нескольким страницам HTML делиться форматированием, указывая соответствующий CSS в отдельном файле .css и уменьшая сложность и повторение в структурном контенте ,

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

Изменения в графическом дизайне документа (или сотнях документов) могут быть применены быстро и легко, путем редактирования нескольких строк в файле CSS, которые они используют, а не путем изменения разметки в документах.

Спецификация CSS описывает схему приоритета, чтобы определить, какие правила стиля применяются, если несколько правил соответствуют конкретному элементу. В этом так называемом каскаде приоритеты (или веса ) вычисляются и присваиваются правилам, поэтому результаты предсказуемы.

Спецификации CSS поддерживаются консорциумом World Wide Web (W3C). Тип интернет-медиа (тип MIME ) text/cssзарегистрирован для использования с CSS по RFC 2318 (март 1998 г.). W3C использует бесплатную службу проверки CSS для документов CSS. [4]

Обзор популярных технологий разработки

Сайт может быть создан с помощью применения таких языков и технологий как:

JavaScript

JavaScript, часто сокращенно JS, является высокоуровневым, интерпретируемым языком программирования. Это язык, который также характеризуется как динамический, слабо типизированный. Наряду с HTML и CSS, JavaScript является одной из трех основных технологий World Wide Web content engineering. Он используется, чтобы сделать динамические веб-страницы интерактивными и предоставлять онлайн-программы, включая видеоигры. Большинство веб-сайтов используют его, и все современные веб-браузеры поддерживают его без необходимости подключаемых модулей с помощью встроенного движка JavaScript. Каждый из многих движков JavaScript представляет собой различную реализацию JavaScript, основанную на спецификации ECMAScript, с некоторыми движками, не поддерживающими спецификацию полностью, и со многими движками, поддерживающими дополнительные функции за пределами ECMA.

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

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

Хотя между JavaScript и Java существует сильное внешнее сходство, включая имя языка, синтаксис и соответствующие стандартные библиотеки, эти два языка различны и сильно различаются по дизайну; на JavaScript повлияли такие языки программирования, как Self и Scheme.[7]

PHP

PHP-это язык сценариев на стороне сервера, предназначенный для веб-разработки, но также используемый в качестве языка программирования общего назначения. Он был первоначально создан Rasmus Lerdorf в 1994 году, [3] PHP reference реализация теперь производится группой PHP.[4] PHP изначально стоял за персональную домашнюю страницу, [3] но теперь он обозначает рекурсивную аббревиатуру PHP: Hypertext Preprocessor[5]

PHP-код может быть встроен в HTML-код или использоваться в сочетании с различными системами веб-шаблонов, системами управления веб-контентом и веб-фреймворками. PHP-код обычно обрабатывается интерпретатором PHP, реализованным в виде модуля на веб-сервере или в виде исполняемого файла интерфейса общего шлюза (CGI). Веб-сервер объединяет результаты интерпретируемого и выполняемого PHP-кода, который может быть любым типом данных, включая изображения, с генерируемой веб-страницей. PHP код также может быть выполнен с интерфейсом командной строки (CLI) и может быть использован для реализации автономных графических приложений.[6]

Стандартный интерпретатор PHP, работающий на движке Zend, является свободным программным обеспечением, выпущенным под лицензией PHP. PHP был широко портирован и может быть развернут на большинстве веб-серверов практически на всех операционных системах и платформах бесплатно.[7]

Язык PHP развивался без письменной формальной спецификации или стандарта до 2014 года, оставляя канонический интерпретатор PHP стандартом де-факто. С 2014 года ведется работа по созданию формальной спецификации PHP.[8]

В течение 2010-х годов активизировались усилия по стандартизации и совместному использованию кода в PHP-приложениях такими проектами, как PHP-FIG в виде PSR-инициатив, а также Composer dependency manager и packagist repository. PHP содержит широкий спектр веб-фреймворков, требующих специфичных для фреймворка знаний, а Laravel недавно стал популярным вариантом, включив идеи, ставшие популярными из других конкурирующих не PHP веб-фреймворков, таких как Ruby on Rails.

AJAX

Ajax (также AJAX; / attracte/; сокращенно «асинхронный JavaScript + XML») [1][2] представляет собой набор методов веб-разработки с использованием многих веб-технологий на стороне клиента для создания асинхронных веб-приложений. С помощью Ajax веб-приложения могут отправлять и извлекать данные с сервера асинхронно (в фоновом режиме), не мешая отображению и поведению существующей страницы. Отделив слой обмена данными от уровня представления, Ajax позволяет веб-страницам, а также веб-приложениям, динамически изменять содержимое без необходимости перезагрузки всей страницы.[3] на практике современные реализации обычно используют JSON вместо XML из-за преимуществ того, что JSON является родным для JavaScript.[4]

Ajax — это не Единая технология, а скорее группа технологий. HTML и CSS могут быть использованы в комбинации для разметки и стилей. Затем Веб-страница может быть изменена с помощью JavaScript для динамического отображения и предоставления пользователю возможности взаимодействовать с новой информацией. Встроенный объект XMLHttpRequest в JavaScript обычно используется для выполнения Ajax на веб-страницах, позволяя веб-сайтам загружать содержимое на экран без обновления страницы. Ajax-это не новая технология, не другой язык, просто существующие технологии, используемые по-новому..

CMS

Система управления контентом (CMS)[1][2][3] это компьютерное приложение, которое поддерживает создание и модификация цифрового контента. Обычно он поддерживает несколько пользователей в среде совместной работы.[4]

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

Система управления веб-контентом (WCM или WCMS) — это CMS, предназначенная для поддержки управления содержимым веб-страниц. Самые популярные CMSs также WCMSs. Веб-контент включает в себя текстовую и встроенную графику, фотографии, видео, аудио, карты и программный код (например, для приложений), который отображает контент или взаимодействует с пользователем.

Такая система управления контентом (CMS) обычно имеет два основных компонента:

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

Приложение доставки содержимого (CDA) компилирует эту информацию и обновляет веб-сайт.

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

Основываясь на статистике доли рынка, наиболее популярной системой управления контентом является WordPress, которой пользуются более 28% всех веб-сайтов в интернете и 59% всех веб-сайтов, использующих известную систему управления контентом.[5] [требуется лучший источник] другие популярные системы управления контентом включают Joomla и Drupal.

CMF

Content Management Framework (CMF) — это инфраструктура (фреймворк-программного обеспечения системы) для проектирования систем управления контентом. На их основе создаются системы управления контентом (CMS) и веб-приложения.

Если главная цель универсальных CMS – простота и легкость создания сайтов, не требующая специфических знаний в сфере разработки, дизайна, безопасности, то CMF — это дизайнер CMS. При применении хорошо разработанной CMF и готовых модулей, программисту остается лишь сборка модулей в единое пространство и создание выходных данных согласно с пожеланиями клиентов, иными словами разработка сайта на базе CMF сопоставима по трудности с разработкой веб-сайта в универсальной CMS [1].

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

Подавляющее большинство современных CMF — это реализация архитектуры Model-View-Controller. Web-фреймворк обеспечивает тесную интеграцию всех трех слоев MVC-архитектуры. Инфраструктуры скрывают от программиста детали подключения к базе данных и формирование web-страниц при помощи представлений, шаблонов, позволяют программисту сосредоточиться на реализации бизнес-логики[2].

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

Многие веб-фреймворки предлагают полуавтоматическое формирование прототипа web-приложения, который выполняет основные операции (CRUD-операции на данных методом скаффолдинга).

Производительность это важная особенность web-фреймворков. [2].

Многие современные системы управления контентом созданы с применением MVC. Примерами использования этой идеологии являются: Joomla! (от версии 1.5), Битрикс (версия 6), MODx Revolution (от версии 2.0), SilverStripe, Contao.

Достаточно активно развиваются конструкторы сайтов

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

Актуальность проблемы

На сегодняшний день, ни одно предприятие, организация или частный бизнес не могут быть успешными, если они не представлены в глобальной сети. Интернет сайты и приложения становятся неотъемлемым и обязательным атрибутом любой общественной деятельности. Так как это удобно, просто и доступно для всех категорий потенциальных клиентов [4].

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

Необходимо предусмотреть затраты не только разработку, но и поддержку и обслуживание, которые могут в долгосрочной перспективе составлять основную стоимость решения [5].

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

Постановка задачи

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

Выводы

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

ПОДГОТОВКА К РАЗРАБОТКЕ САЙТА

Планирование

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

1) Составить техническое задание

2) Изучить существующие сайты схожей тематики

3) Выбрать технологии разработки

4) Разработать сайт

5) расположить сайт в сети интернет

Техническое задание

Необходимо разработать информационный сайт салона красоты. Сайт должен иметь привлекательный красочный вид и удобный интерфейс.

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

Необходимо реализовать возможность записи клиентов и складской учет.

Должна быть размещена информация о контактах и расположении салона.

У сайта должно быть простое и соответствующее тематике доменное имя.

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

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

Необходимо обеспечить бесперебойную работу сайта в режиме 24/7.

Выбор технологии разработки

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

Необходимо определиться с использованием СМS/CMF или конструктора сайтов. Подобные системы позволяют на качественно ином уровне абстракции осуществлять разработку и управление ресурсами. Но, как и у любого инструмента у них есть свои преимущества и недостатки.

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

Кроме того, существует большое количество потенциальных уязвимостей, которые обнаруживаются чаще всего в дополнительных расширениях к CMS. Открытость кода и общедоступность являются не только способом повышения безопасности и качества продукции, но и повышенной опасностью использования обнаруживаемых уязвимостей [12].

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

Системы CMF, лишены многих недостатков систем CMS. Но они значительно сложнее. Так называемый «Порог вхождения» в них значительно выше. Для использования фреймворков, нужно обладать определенным уровнем знаний как в области технологий web-разработки начиная от html до php и ajaх, так и в устройстве и логике самого фреймворка.

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

Но с течением времени появляются технологии которые позволяют использовать их практически не имея опыта разработки.

Одной из наиболее популярных технологий разработки интерфейсов является bootstrap.

Bootstrap — фреймворк, набор HTML+CSS инструментов и шаблонов для верстки и более эффективного и быстрого создания сайтов и веб-приложений более эффективно и быстро.

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

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

В нем есть следующие шаблоны:

• Шрифты
• Кнопки
• Формы
• Метки
• Навигация
• Сетка
• JavaScript-расширения
• Прочее (расскажу ниже)

Таким образом для разработки промо-сайта использование bootstrap будет чрезвычайно эффективным.

Механизмы размещения сайта в Интернете

Для того чтобы сайт был доступен всем пользователям Интернета нужно выполнить две задачи:

1) Присвоить сайту адрес – домен

2) расположить сайт на сервере

Чтобы решить первую задачу необходимо знать несколько вещей: придумать имя для сайта, выбрать зону для домена и зарегистрировать домен. Так как необходимо создать сайт для телефона oneplus, соответственно и сайт будет называться oneplus. Такой домен был свободен в зоне net, поэтому сайт будет иметь адрес oneplus.net. Для того чтобы зарегистрировать домен необходимо обратиться к аккредитованным регистраторам.

Для решения второй задачи есть два способа: создать собственный сервер или обратиться к услугам хостинг-провайдера. Собственный сервер — это обычный компьютер, который постоянно подключен к Интернету и имеет специальное программное обеспечение. Но не каждый компьютер может быть сервером, для этого должны выполняться некоторые условия: во-первых, сервер должен бесперебойно работать, а это значит, что он должен иметь бесперебойное и альтернативное питание, надежные комлектующие и его качественное обслуживание. Во — вторых сервер должен обеспечивать хранение огромного объёма информации, обрабатывать тысячи запросов пользователей, что в свою очередь ставит высокие требования к производительности данного компьютера. В — третьих сервер должен быть надежно защищён от вирусов, хакерских атак, и, следовательно, этот компьютер должен иметь систему резервного копирования. Услуги хостинг-провайдера – это предоставление ресурсов для размещения информации на сервере, то есть для размещения сайта в Интернете не требуется собственный сервер, это место предоставляет провайдер.

Для размещения сайта проще всего воспользоваться услугами хостинг провайдера.

Выводы

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

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

Необходимо также решить вопрос с размещением сайта в сети интернет.

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

РАЗРАБОТКА ПРОМО-САЙТА

Приобретение домена

Зарегистрировать домен можно у аккредитованных регистраторов, или у их партнёров — реселлеров доменов.

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

С 1 июня 2001 года услуги по регистрации доменных имен конечным пользователям в России оказывают аккредитованные Координационным центром регистраторы. Это компании, находящиеся в Москве, Московской области, Санкт-Петербурге, Самаре, Калининграде и Новосибирске; многие из регистраторов активно развивают собственные партнерские сети (в партнерских программах регистраторов обычно участвуют интернет- и хостинг-провайдеры, веб-студии), которые предоставляют услуги по всей стране. Таким образом, любой заинтересованный в регистрации доменного имени пользователь сможет легко воспользоваться данной услугой.

Координационный центр администрирует национальные домены верхнего уровня .RU/.РФ, т.е. выполняет функции национальной регистратуры. Национальная регистратура осуществляет ведение базы данных зарегистрированных доменных имен второго уровня и поддержку функционирования этих имен в интернете. Координационный центр не является регистратором и прямая регистрация доменных имен через него невозможна, он лишь определяет политику регистрации доменных имен в администрируемых им доменах верхнего уровня.

Наиболее крупный регистратор на этом рынке Ru-Center (nic.ru). Поэтому он и был выбран для приобретения домена.

Домен разрабатываемого сайта http://www.oneplus.net.

Настройка платформы

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

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

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

Как таковой настройки больше не требуется, далее все действия в той или иной степени будут относиться уже и к разработке сайта.

Создание сайта

Есть два способа для подключения bootstrap:

• Через скачивание файлов.

Для этого нужно зайти на официальный сайт выбрать компоненты которые понадобятся для работы и в самом конце скачайть нажав на кнопку «Compile and Download». Далее распаковать архив у себя на компьютере.

Для базовой работы понадобится лишь подключить один файл в <head> — bootstrap.min.css.

• Или через cdn

Но он требует подключение к интернету во время работы с фреймворком.
Для подключения bootstrap.min.css необходимо добавать эту строчку кода в <head> —

bootstrap.min.js —

Бутстрап имеет широкий список инструментов, облегчающих жизнь разработчика:

1. Сетка — адаптивная 12-колоночная сетка с фиксированными размерами колонок.

1. Адаптивная сетка

2. Шаблон — может быть резиновым или фиксированным.

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

При этом на странице можно не только разместить один раз <h1>H1 Заголовок</h1>, но сделать это несколько раз вот так <div class=»h1″>H1 Заголовок</div>, сохранив одинаковое стилистическое оформление.

1. Типографика

4. Медиа — позволяет красиво оформлять картинки и видео.

1. медиа

5. Таблицы — можно оформить таблицу, в том числе добавив возможность сортировки.

1. Таблица

6. Навигация — для создания крутой навигационного меню на сайте. Обычно с навигацией возникают разного рода проблемы — будь то с элементами навигации или просто верстке «как надо», в общем задача не из легких. И Bootstrap упрощает ее, предлагая табы, постраничную навигацию, хлебные крошки, вкладки, боковое и главное меню, навигационный тулбар и пр.

1. Навигация

7. Формы — позволяет создавать различные формы: в одну или несколько строк, с подсказками и валидацией полей, с радио- или чекбоксами, лейблами и выпадающими кнопками. При этом вы сможете подсвечивать неправильно заполненную часть формы, давая предупреждение пользователю при возникновении ошибки в заполнении.

1. формы

8. Алерты — для оформления диалоговых окон. В основном это всплывающие окна или подсказки — ошибка (danger), предупреждение (warning), успех (success), подсказка (info). И использовать просто, просто дописываете необходимый класс и все готово.

1. Алерты

9. Кнопки — в т.ч. «выпадающие» кнопки.

1. Кнопки

10. Прогресс-бары

1. Прогрессбары

11. Шрифт из иконок —возможность добавить красивых элементов в оформлении сайта. Можно даже отказаться от формирования и использования иконочных спрайтов! Правда с ограничениями: у исходной копии иконки может быть только один цвет.

1. Иконки

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

Бутстрап позволяет пользоваться готовым решением, творить на основе понятного и очень продуманного инструмента. Вместо того чтобы собирать все свои решения, хаки и наработки в одну коробку, достаточно пользоваться фреймворком. И Бутстрап — один из лидеров среди них.

Руководство пользователя

На главной странице сайта размещена информация рекламного характера о телефоне OnePlus 5.

1. Главная страница

На вкладке oneplus 5T размещена более подробная и конкретная информация о телефоне.

1. Страница OnePlus 5T

На странице аксессуары можно подобрать различные аксессуары

1. Страница аксессуары

На странице поддержка размещена информация о поддержке

1. Страница поддержка

На странице сообщество размещена информация о ресурсах, посвященных продукции компании и форум.

1. Страница сообщества

Выводы

В данной работе была осуществлена разработка промо-сайта OnePlus 5. Разработанный сайт включает несколько страниц и подстраниц. На нем размещена основная информация о продукции и предоставляемых услугах.

Сайт размещен в сети интернет и доступен по привязанному к нему доменному имени.

Разработано руководство пользователя.

ЗАКЛЮЧЕНИЕ

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

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

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

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

Согласно техническому заданию к данной работе необходимо было разработать web-сайт салона красоты.

В результате выполнения данной работы был разработан промо-сайт OnePlus 5, рассмотрены технологии разработки web-сайтов, обоснован выбор инструментов для разработки.

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

СПИСОК ЛИТЕРАТУРЫ

1. Андерсон, С.   Приманка для пользователей: создаем привлекательный сайт / С. Андерсон; [пер. с англ. С. Силинский]. — Москва: Питер, 2013. — 234 с.
2. Вин, Ч. Как спроектировать современный сайт: профессиональный веб-дизайн на основе сетки / Ч. Вин. — Москва [и др.]: Питер, 2011. — 192 с.
3. Вукс, Т. Наполнение сайта и авторское право / Т. Вукс // Интеллектуальная собственность. Авторское право и смежные права. — 2009. — № 6. — С. 49-56.
4. Вычислительные системы, сети и телекоммуникации / Пятибратов и др. — ФИС, 2009.
5. 100% самоучитель по созданию Web-страниц и Web-сайтов: HTML и JavaScript / А. Ю. Гаевский, В. А. Романовский. — Москва: Технолоджи — 3000: Триумф, 2008. — 457 с.
6. Грачев, А. Создаем свой сайт на WorldPress: работа с CMS WorldPress 3 / А. Грачев. — Санкт-Петербург [и др.]: Питер, 2011. — 282 с.
7. Как сделать идеальный сайт // Фотомастерская. — 2012. — № 12. — С. 58-60.
8. Коммутация и маршрутизация IP/IPX трафика / М. В. Кульгин, АйТи. — М.: Компьютер-пресс, 2009.
9. Никсон, Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон; [пер. с англ. Н. Вильчинский]. — Санкт-Петербург [и др.]: Питер, 2013. — 496 с.
10. Компьютерные сети. Принципы, технологии, протоколы / Олифер В.Г., Олифер Н.А. — Учебник для вузов – СПб. Питер, 2012. – 943 с.
11. Персональные компьютеры в сетях TCP/IP. Крейг Хант; пер. с англ. — BHV-Киев, 2009.
12. Протоколы Internet. С. Золотов. — СПб. BHV — Санкт-Петербург, 2009.
13. Профессиональная разработка сайтов на Drupal 7 / Б. Мелансон [и др.; пер. с англ. И. Размайкина]. — Москва [и др.]: Питер, 2013. — 687 с.
14. Рязанцева, Л. Что нам стоит сайт построить / Л. Рязанцева // Библиополе. — 2008. — № 5. — С. 25-27.
15. Рязанцева, Л. Что нам стоит сайт построить / Л. Рязанцева // Библиополе. — 2008. — № 6. — С. 27-29.
16. Рязанцева, Л. Что нам стоит сайт построить / Л. Рязанцева // Библиополе. — 2008. — № 8. — С. 20-21.
17. Рязанцева, Л. Что нам стоит сайт построить: как писать для веб-сайта / Л. Рязанцева // Библиополе. — 2008. — № 7. — С. 27-29.
18. Сетевые средства Microsoft Windows NT Server 4.0 / пер. с англ. — СПб. — BHV — Санкт-Петербург, 2009.
19. Соколинский, К. Е. Создание современного сайта библиотеки с помощью модуля J-ИРБИС / К. Е. Соколинский // Научные и технические библиотеки. — 2009. — № 1. — С. 76-80.
20. PHP. 75 готовых решений для вашего web-сайта / У. Стейнмец, Брайан Вард. — Санкт-Петербург: Наука и Техника, 2009. — 243 с.
21. Суслова, О. А. Как создать качественный сайт учреждения культуры / О. А. Суслова // Справочник руководителя учреждения культуры. — 2011. — № 9. — С. 67-74.
22. Компьютерные сети. / Таненбаум Э., Уэзеролл Д. 5-е изд. — СПб.: Питер, 2012. — 960 с.
23. Титоров, Д. Ю. Технология создания интерактивных сайтов / Д. Ю. Титоров // Информатика: [газ. Изд. дома «Первое сентября»]. — 2010. — № 3 (февр.). — С. 13-18.
24. Филиппова, Л. Я. Создание контента (содержания) библиотечных веб-сайтов учебных заведений: из зарубежного опыта / Л. Я. Филиппова // Научные и технические библиотеки. — 2009.- № 2. — С.55-58.
25. Фрэйн, Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрэйн; [перевод с английского В. Черник]. — Санкт-Петербург [и др.]: Питер, 2014. — 298 с.
26. Халворсон, К. Контентная стратегия управления сайтом / К. Халворсон, М. Рэч; [пер. с англ. Е. Матвеева]. — 2-е изд. — Санкт-Петербург [и др.]: Питер, 2013. — 224 с.
27.  Создание библиотечного веб-сайта / Т. Н. Харыбина, Н. А. Слащева, Ю. В. Мохначева // Библиотека. — 2009. — № 4. — С. 44-45.
28. Хворостьянова, С. В. Веб-сайт: требования к информационной структуре и наполнению / С. В. Хворостьянова // Современная библиотека. — 2011. — № 1. — С. 68-73.
29. Шляхтина, С. Джентльменский набор для быстрого создания сайта / С. Шляхтина // КомпьютерПресс. — 2007. — № 2. — С. 83-88.