Файл: Создания сайта.pdf

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

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

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

Оформление Web-сайта.

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

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

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

Использование стилей.

Технология таблиц каскадных стилей (CSS) – это набор правил оформления и формирования, которых может быть применен к различным элементам Web-страницы. В стандартном языке HTML для присвоения какому-либо элементу определенных свойств, – таких как цвет, размер и тому подобное – приходится каждый раз их заново описывать. Применяя технологию CSS, достаточно будет один раз описать свойства элементов и определить это описание как стиль.

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

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

2.4 Выбор и обоснование среды программирования

Для создания сайта может быть использовано несколько методов. Наиболее распространенные – текстовый редактор (блокнот), язык описания гипертекстовых документов HTML, программа Brackets, специальные программы – скрипты, написанные на таких языках Microsoft VBScript или JavaScript.

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

В HTML для определения содержания и формата гипертекстовых документов используются команды, называемые тегами (tags). Web-броузер преобразует эти команды в текст и графические изображения и располагает их нужным образом на экране компьютера.

Кроме описания формата текста и положения графики на странице язык HTML используется и для других целей. Гиперссылка дает команду Web-браузеру перейти к новой странице в Internet и отобразить ее содержимое на экране.

Данный сайт разработан с помощью программы WordPress.

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

WordPress позволяет не только легко создавать Web-страницы и Web-сайты, но и управлять ими.

При помощи ярлычков можно выбирать различные режимы просмотра и редактирования Web-страниц.

Используя средства WordPress, можно отобразить Web-сайт в нескольких режимах просмотра. На панели Views (режимы просмотра) расположены значки, позволяющие выбрать тот или иной способ отображения или редактирования сайта.

В списке папок отображаются все папки и файлы, относящиеся к текущему Web-сайту, а в окне просмотра страниц Page отображается выбранная Web-страница.

Brackets – это симпатичный и сравнительно простой html редактор, который позволяет многое делать руками. Включает множество заранее подготовленных Java-апплетов. Есть практически все, что надо для нормальной работы. Удобная настройка интерфейса позволяет включать только те меню и функции, которыми приходится часто пользоваться.

2.5 Тестирование сайта

2.5.1 Понятие тестирования

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

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

Порядок проведения испытаний:

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

2.5.2 Виды и методы тестирования

Что бы проверить, как на самом деле выглядит созданная страница, имеет смысл воспользоваться Web-браузером. Почти любой из них может загружать Web-страницу с жесткого диска точно так же, как из Internet. Необходимо в меню браузера найти команды типа File (файл), Open File (открыть файл). Диалоговое окно команды Open File позволяет открыть нужный файл.

Для тестирования документа в браузере:

1. выберите File → Save File, чтобы сохранить все изменения в редакторе. Перейдите на окно браузера и выберите File → Open File, чтобы открыть сохраненный элемент.
2. документ должен появиться в браузере. Проверьте его на наличие ошибок, опечаток, гиперссылок.
3. перейдите обратно в окно текстового редактора и внесите все необходимые коррективы. Отредактированный файл необходимо сохранить.
4. если страница уже открыта в браузере, то для того, чтобы увидеть проделанные изменения, нужно щелкнуть на кнопке «Обновить».

2.5.3 Процесс тестирования

Процесс тестирования проходит в несколько этапов:

1. сохранение данных в редакторе с расширением html (расширение для просмотра Web-сайтов) и открытие этого документа в Internet Explorer (окно браузера).
2. выбранный документ появился в окне браузера. Проверка орфографических ошибок, опечаток, работы гиперссылок, нажатия кнопок, интерфейс (достаточно прост ли он для пользователя, совместимость цветов, размер изображений, текста).
3. в процессе проверки орфографии были допущены ошибки. Изменения были внесены в окно текстового редактора и сохранены в этом же текстовом редакторе с тем же именем.
4. для просмотра изменений снова вернулись в окно браузера и нажали «Обновить». Если снова обнаружились недочеты необходимо вернуться к пункту 3.

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

Работа гиперссылок:

1. С главной страницы можно перейти на страницы:

1. «Конкурсы»

2. «Новости»

3. «Профиль»

Работа ссылок:

1. При нажатии на перечисленные выше ссылки можно перейти на интересующую страницу со страницы «Главная».

2.6 Программная документация

2.6.1 Руководство оператора

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

Назначение

Программа предназначена для наглядности получения данных через всемирную паутину. Основными функциями сайта являются: получение информации и переход по гиперссылкам.

Условия выполнения программы

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

• центральный процессор класса Pentium III 433 МГц;
• объём оперативной памяти не менее 128 Mb (т.к. при меньшем объеме скорость загрузки страниц будет меньше);
• стандартный манипулятор «мышь»;
• стандартный SVGA монитор;
• операционная система типа Windows;

Выполнение программы

Для просмотра сайта «МАШАЛЛАХ.РФ» может использоваться файл «главная» на дискете, либо файл с таким же названием на жестком диске компьютера. Так же можно вызвать программу, открыв приложение Brackets и среди представленного списка Web-страниц выбрать главная.

При открытии файла «Главная» появляется диалоговое окно Internet Explorer. В этом окне можно перейти на интересующую страницу щелкнув по соответствующим названиям.

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

• кнопка «на главную» (позволяет, перейти на страницу с именем главная);

Кнопка «на главную»

При нажатии на кнопку «на главную» должен осуществляться переход со страницы, содержащей эту кнопку на главную страницу.

Сообщения оператору

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

2.6.2 Руководство программиста

Назначение и условия применения программы

Программа предназначена для наглядности получения данных через всемирную паутину. Основными функциями сайта являются: получение информации и переход по гиперссылкам.

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

• центральный процессор класса Pentium III 433 МГц;
• объём оперативной памяти не менее 128 Mb;
• стандартный манипулятор «мышь»;
• стандартный SVGA монитор;
• программа Internet Explorer;
• операционная система типа Windows;
• модем.

Обращение к программе

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

Входные и выходные данные

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

Сообщения

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

Руководство технического обслуживания

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

• центральный процессор класса Pentium III 433 МГц;
• объём оперативной памяти не менее 128 Mb (т.к. при меньшем объеме скорость загрузки страниц будет меньше);
• стандартный манипулятор «мышь»;
• стандартный SVGA монитор;
• программа Internet Explorer;
• операционная система типа Windows;
• модем.

Заключение

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

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