 |
Фоновая картинка. Лого сайта.
|
|
|
|
Фоновая картинка и лого сайта должны соответствовать теме. Для этого были выбраны некоторые картинки и обработаны в Adobe Photoshop CS6, которые представлены на рисунке 1.
| Рисунок 1.1 – Лого сайта |
Photoshop тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady (программа упразднена в версии CS3), Adobe Illustrator, Adobe Premiere,Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т. д. для телевидения, кинематографа и всемирной паутины. Photoshop также прижился в кругах разработчиков компьютерных игр.
Основной формат Photoshop, PSD, может быть экспортирован и импортирован всеми программными продуктами, перечисленными выше. Photoshop CS поддерживает создание меню для DVD. Совместно с Adobe Encore DVD Photoshop позволяет создавать меню или кнопки DVD. Photoshop CS3 в версии Extended поддерживает также работу с трёхмерными слоями.
|
|
|
Из-за высокой популярности Photoshop поддержка специфического для неё формата PSD была реализована во многих графических программах, таких, как Adobe Fireworks, Photo-Paint, WinImages, GIMP, PaintShop Pro и других.
Photoshop поддерживает следующие цветовые модели или способы описания цветов изображения (в аннотации самой программы — режим изображения):
· RGB
· LAB
· CMYK
· В градациях серого
· Черно-белые
· Duotone[en]
· С 256-цветовой палитрой (Indexed)
· Многоканальные (Multichannel)
Поддерживается обработка изображений, с глубиной цвета 8 бит (256 градаций на один канал), 16 бит (используется 15 битов плюс один уровень, то есть 32769 уровней) и 32 бит (используются числа одинарной точности с плавающей запятой). Возможно сохранение в файле дополнительных элементов, как то: направляющих (Guide), каналов (например, канала прозрачности — Alpha channel), путей обтравки (Clipping path), слоёв, содержащих векторные и текстовые объекты. Файл может включать цветовые профили (ICC), функции преобразования цвета (transfer functions). Допускаются неквадратные пиксели (Pixel Aspect Ratio).
Само лого состоит из других картинок соединенных вместе с форматом png.
PNG — растровый формат хранения графической информации, использующий сжатие без потерь по алгоритму Deflate. PNG спроектирован для замены устаревшего и более простого формата GIF, а также, в некоторой степени, для замены значительно более сложного формата TIFF. Формат PNG позиционируется прежде всего для использования в Интернете и редактирования графики. Также является хорошим форматом для редактирования изображений, даже для хранения промежуточных стадий редактирования, так как восстановление и пересохранение изображения проходят без потерь в качестве. Также, в отличие, например, от TIFF, спецификация PNG не позволяет авторам реализаций выбирать, какие возможности они собираются реализовать. Поэтому любое сохранённое изображение PNG может быть прочитано в любом другом приложении, поддерживающем PNG.
|
|
|
Данный формат был сделан с помощью инструмента «Волшебная палочка», который удаляет фон.
Верстка сайта
При создании сайта был использован HTML и CSS код, JavaScript для меню, а также Skeleton и jQuery.
HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.
Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.
CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.
|
|
|
Skeleton – это фреймворк, основанный на CSS. Он позволяет верстать сайты таким образом, чтобы они одинаково удобно и красиво выглядели на мониторе 17 дюймов, так и на дисплее смартфонов и планшетах.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.
Сам HTML состоит из head(головы) и body(тела). В head подключались css, javascript, Skeleton и jQuery файлы. В body создавались блоки (div), меню и текстовая информация (content).
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Создание меню сайта
При создании меню задумывалось сделать 5 блоков основного меню и в 2 блоках по 2 подменю. Все это было сделано с помощью тегов <ul>, <li>, <a href="#">(сами блоки). К каждому блоку добавлялась ссылка на отдельный HTML файл, чтобы пользователь мог переходить на нужную ему страницу (рисунок 2).
· Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега < li >. Если к тегу < ul > применяется таблица стилей, то элементы < li > наследуют эти свойства.
· Тег <li> определяет отдельный элемент списка. Внешний тег < ul > или < ol > устанавливает тип списка — маркированный или нумерованный.
· <a href="#"> — задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.
Рисунок 2 - меню
|
|
|
Главная страница
Главная страница – это информация, которая предстаёт перед пользователем при переходе его по адресу сайта. Другими словами, главная страница – это первое, с чем сталкивается посетитель, оказываясь на сайте. Правилу этому подчиняются все сайты в Интернете – контент-провайдеры, модные интернет-магазины, мощные порталы и многолюдные форумы. Предназначение главной страницы любого сайта – это обеспечение такого «приёма» посетителя, чтобы, в идеале, он стал пользователем. Или, по крайней мере, чтобы задержался на сайте в течение длительного времени.
На главной странице должна быть информация о той теме к которой принадлежит сайт. Для визуальной красоты была добавлена картинка с помощью тега <img src="/", и еле заметная линия <hr> отделяющая текстовую информацию от графической.
· Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег < img > в контейнер < a >. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег < img >.
· < hr > Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег < hr > относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
После линии посередине, с помощью тега <center> был добавлен контент поясняющий к чему принадлежит сайт и что на нем можно найти. Для выравнивания текста добавлен тег <p align="justify">.
В конце главной страницы, по центру (<center>) добавлено видео. Это было сделано с помощью копирования HTML кода с другого сайта. Так и получилось главная страница сайта, она представлена на рисунке 3,4.
| Рисунок 1.4 – главная страница |
| Рисунок 1.3 – главная страница |
Второстепенные страницы
| Рисунок 1.5 - блоки |
На второстепенных страницах пользователь должен найти ту информацию, к которой принадлежит сайт (видео, текстовой материал, картинки и т.д.). Для этого было сделано несколько блоков для текста и внутри этих блоков блок для картинки (сама картинка должна относиться к тексту)(Рисунок 5).
Тестирование сайта
Тестирование сайта обычно используют перед запуском большого проекта, чтобы получить гарантии правильной работоспособности или уже на существующем проекте, чтобы повысить его эффективность. Чем сложнее сайт, тем больше он нуждается в тестировании. Довольно многие разработчики и заказчики упускают этап тестирования сайта, в результате это может привести к серьёзным финансовым потерям, дополнительным трудозатратам и недовольству пользователей.
|
|
|
Тестирование — это отклонение фактического результата от ожидаемого, другими словами — это процесс поиска багов (ошибок).
Основные правила тестирования веб-сайтов — это шаги, которые показывают пользователю, насколько удобен и логичен будет проект, насколько просто и возможно найти ту или иную информацию. Хорошо ли воспринимается человеческому взгляду и правильно ли работает весь функционал данного сайта, который был поставлен по ТЗ или брифу — это основные показатели для тестировщика.
Тестирование может происходить самыми разными способами, однако не стоит забывать о самом процессе и стратегии тестирования. От него зависит последовательность ваших действий. На сегодняшний день, специалисты по тестированию веб-сайтов применяют такие виды как:
· Функциональное тестирование
· Тестирования удобства пользования (юзабилити)
· Тестирование производительности
· Тестирование интерфейса пользователя (UI testing)
· Тестирование безопасности.
Функциональное тестирование одно из важных и незаменимых видов тестирование. Самое главное правило функционального тестирования является правильные расчеты функций. К примеру, возьмем интернет магазин, у которого есть не только скидки на товар, но и множество статусов при покупке, n кол-во товаров. Все эти варианты следует учитывать. Ведь если функционал проекта не работает в определенном браузере, то он не будет работать нигде. Если брать определенный функционал для веб проектов, то в основном проверяется:
· поиск и покупка товара, оформление заказа
· навигация
· формы аутентификация
· добавление, удаление, редактирование товара, заказа и т.д.
Тестирование удобства пользования (юзабилити) – это вид тестирования, который делает для сайта удобство и практичность в использовании. Основная цель показать пользователю:
· Понятен ли ваш сайт для окружающих и удобен ли?
· Удобная навигация?
· Какое впечатление создается у пользователя?
· Что может быть лишним или не нужным.
Основная задача тестироания юзабилити сайта — это дизайн того, что пользователь хочет найти и приобрести, что он ищет необходимую информацию и для этого ему ничего не мешает.
Тестирование производительности — в основном это нагрузочное тестирование. Нагрузочное тестирование сайта проверяется в большинстве случаев автоматом, то есть специальными программами. Это дает шанс проверить, насколько он будет работать под определенной нагрузкой.
Цель этого тестирования, заключается в кол-ве виртуальных пользователей, которые задают n кол-во запросов, в одно время (будь это секунды даже). Тем самым результат дает то, смог ли наш проект выдержать, к примеру, 100 пользователей, которые одновременно покупали товар или авторизовались на сайте, ответ показывает, реально ли выдержать сайт такую нагрузку.
UI testing- это тестирование графического интерфейса пользователя, которая предполагает проверить сайт на соответствия требованиям к графическому интерфейсу, профессионально ли оно выглядит, выполнено ли оно в едином стиле.
В большинстве случаев, тестирование интерфейса пользователя, осуществляется вместе со следующими видами тестирования(UI):
· Тестирование на соответствие стандартам графических интерфейсов
· Тестирование с различными разрешениями экрана
· Тестирование кроссбраузерности, или совместимости с разными интернет браузерами и их версиями
· Тестирование локализованных версий: точность перевода (мультиязычность, мультивалютность), проверка длины названий элементов интерфейса и т.д.
· Тестирование графического интерфейса пользователя на целевых устройствах (смартфоны, кпп, планшеты).
Тестирование сайта на уязвимости — это ключ к надежности веб-сайтов. Основные правила этого тестирования — это проверка на уязвимость разных видов атак. Если это интернет-магазин, то, скорее всего, следует проверять запросы на Sql инъекцию (запросы к базе данных).
SQL-инъекции — это вредоносный код в запросах базы данных — наиболее опасный вид атак. Если это различные формы общественные (гостевая книга), то проверка на XSS инъекции. Дает возможность внедрить произвольный код, и атаковать компьютер пользователей, просматривающих зараженные страницы.
Главная задача тестирования заключается в том, чтобы заказчику, как и пользователю, было предоставлено качество продукта. Для этого перед началом любого сайта следует составить чек-лист для тестирования:
· проверки веб-форм;
· проверки правильности данных;
· тестирования интерфейса пользователя
· тестирования оплаты
· тестирования версий для печати
· тестирования отчетов.
|
|
|
