Слайд 1Московский технологический институт
Проектирование и разработка интернет-приложений № 9-10
(Графика в PHP.
Web – сервисы.
Дизайн web-интерфейсов )
Кафедра: Информатики и автоматизации
Автор:
к.т.н., доцент Долин Георгий Аркадьевич
Контакты: dolin1974@gmail.com
Москва - 2016
Слайд 2Рекомендуемая литература
«PHP5. Полное руководство»
Джон Коггзолл. Диалектика. 2006 г.
«Разработка
Web-приложений с помощью PHP и MySQL»
Люк Веллинг, Лаура Томсон. Вильямс.
2007 г.
«AJAX и PHP. Разработка динамических веб-приложений»
Кристиан Дари, Богдан Бринзаре, Филип Черчез-Тоза, Михай Бусика. Символ-Плюс. 2006 г.
«PHP, MySQL, XML. Программирование для Интернета»
Елена Бенкен. БХВ-Петербург. 2007 г.
«Профессиональное программирование на PHP»
Джордж Шлосснейгл. Вильямс. 2006 г.
Слайд 4Графика в PHP
С помощью PHP можно генерировать изображения «на
лету»
Поддерживаются форматы JPEG, GIF, PNG
Для работы с графикой
используется библиотека GD 2
Слайд 5Графика в PHP
Создание холста (256 цветов)
resource imagecreate ( int x_size,
int y_size )
Создает новое изображение на основе палитры (256
цветов)
В параметрах x_size и y_size указываются ширина и высота изображения
$img = imagecreate(640, 480);
Слайд 6Графика в PHP
Создание холста (17 млн. цветов)
resource imagecreatetruecolor ( int
x_size, int y_size )
Создает новое изображение true-color (17 миллионов
цветов)
В параметрах x_size и y_size указываются ширина и высота изображения
Поддерживается начиная с версии GD 2.0.1
Не работает с форматом изображения GIF
$img = imagecreatetruecolor(640, 480);
Слайд 7Графика в PHP
Создание JPEG-изображения
bool imagejpeg (resource image[, string filename[, int
quality]])
Выводит JPEG-изображение в броузер
В параметре image указывается
ресурс выводимого изображения
Если указан параметр filename, изображение будет сохранено во внешний файл, а не выведено в броузер
Параметр quality характеризует степень сжатия изображения (0 - 100). Чем больше значение, тем лучше качество изображения. По-умолчанию — 75.
imagejpeg($img);
Слайд 8Графика в PHP
Создание PNG-изображения
bool imagepng (resource image[, string filename ])
Выводит PNG-изображение в браузер.
В параметре image указывается ресурс
выводимого изображения
Если указан параметр filename, изображение будет сохранено во внешний файл, а не выведено в браузер.
imagepng($img);
Слайд 9Графика в PHP
Создание GIF-изображения
bool imagegif ( resource image [, string
filename ] )
Выводит GIF-изображение в браузер
В параметре
image указывается ресурс выводимого изображения
Если указан параметр filename, изображение будет сохранено во внешний файл, а не выведено в браузер
imagegif($img);
Слайд 10Графика в PHP
Отправка MIME-типа изображения
При генерации графики с помощью сценариев
PHP перед выводом изображения в браузер необходимо отправить соответствующий HTTP-заголовок,
обозначающий MIME-тип изображения, чтобы клиентский браузер смог правильно интерпретировать посланные ему данные.
header("Content-type: image/gif");
imagegif($img);
header("Content-type: image/jpeg");
imagejpeg($img);
header("Content-type: image/png");
imagepng($img);
Слайд 11Графика в PHP
Сглаживание
bool imageantialias (resource im, bool on)
Включает/выключает
сглаживание (antialiasing)
В параметре im указывается ресурс используемого изображения
Параметр
on управляет включением/выключением сглаживания
Работает только с true-color изображениями
imageantialias($img, true);
Слайд 12Графика в PHP
Определение используемых цветов
int imagecolorallocate ( resource image,
int red,
int
green,
int blue )
Задает цвет для использования в изображении и
возвращает его идентификатор.
В параметре image указывается ресурс используемого изображения.
В параметрах red, green и blue указываются RGB-составляющие цвета.
$red = imagecolorallocate($img, 255, 0, 0);
Слайд 13Графика в PHP
Рисование линии
bool imageline ( resource image,
int x1, int
y1,
int x2, int y2,
int color )
В параметре image
указывается ресурс используемого изображения
В параметрах x1, y1, x2, y2 указываются координаты начальной и конечной точек линии (координаты верхнего левого угла изображения - 0,0)
В параметре color указывается цвет линии
imageline($img, 20, 20, 620, 460, $red);
Слайд 14Графика в PHP
Рисование прямоугольника
bool imagerectangle ( resource image,
int x1, int
y1,
int x2, int y2,
int color )
В параметре image
указывается ресурс используемого изображения
В параметрах x1, y1, x2, y2 указываются координаты верхней левой и нижней правой точек прямоугольника
В параметре color указывается цвет границы прямоугольника
imagerectangle($img, 20, 20, 620, 460, $red);
Слайд 15Графика в PHP
Рисование прямоугольника с заливкой
bool imagefilledrectangle ( resource image,
int
x1, int y1,
int x2, int y2,
int color )
В параметре
image указывается ресурс используемого изображения
В параметрах x1, y1, x2, y2 указываются координаты верхней левой и нижней правой точек прямоугольника
В параметре color указывается цвет границы и заливки прямоугольника
imagefilledrectangle ($img, 20, 20, 620, 460, $red);
Слайд 16Графика в PHP
Рисование многоугольника
bool imagepolygon ( resource image,
array points,
int num_points,
int
color )
В параметре image указывается ресурс используемого изображения
В
параметре points указываются массив координат точек многоугольника в формате array(x0, y0, x1, y1, ... , xn, yn)
В параметре num_points указывается количество точек многоугольника
В параметре color указывается цвет границы многоугольника
$points = array(320, 40, 180, 100, 120, 240, 180, 400,
320, 440, 460, 400, 520, 240, 460, 100);
imagepolygon($img, $points, 8, $red);
Слайд 17Графика в PHP
Рисование многоугольника с заливкой
bool imagefilledpolygon ( resource image,
array
points,
int num_points,
int color )
В параметре image указывается ресурс используемого
изображения
В параметре points указываются массив координат точек многоугольника в формате array(x0, y0, x1, y1, ... , xn, yn)
В параметре num_points указывается количество точек многоугольника
В параметре color указывается цвет границы и заливки многоугольника
$points = array(320, 40, 180, 100, 120, 240, 180, 400,
320, 440, 460, 400, 520, 240, 460, 100);
imagefilledpolygon($img, $points, 8, $red);
Слайд 18Графика в PHP
Рисование эллипса / окружности
bool imageellipse ( resource image,
int
cx, int cy,
int w, int h,
int color )
В
параметре image указывается ресурс используемого изображения
В параметрах cx и cy указываются координаты центра эллипса
В параметрах w и h указываются ширина и высота эллипса
В параметре color указывается цвет границы эллипса
imageellipse ($img ,200, 150, 300, 200, $red);
Слайд 19Графика в PHP
Рисование эллипса / окружности с заливкой
bool imagefilledellipse (
resource image,
int cx, int cy,
int w, int h,
int color )
В параметре image указывается ресурс используемого изображения
В параметрах cx и cy указываются координаты центра эллипса
В параметрах w и h указываются ширина и высота эллипса
В параметре color указывается цвет границы и заливки эллипса
imagefilledellipse($img ,200, 150, 300, 200, $red);
Слайд 20Графика в PHP
Рисование сектора эллипса / окружности
bool imagearc ( resource
image,
int cx, int cy,
int w, int h,
int s, int e,
int
color )
В параметре image указывается ресурс используемого изображения
В параметрах cx и cy указываются координаты центра эллипса
В параметрах w и h указываются ширина и высота эллипса
В параметрах s и e указываются начало и конец сектора в градусах, отрисовка идет по часовой стрелке
В параметре color указывается цвет границы сектора
imagearc($img,200,150,300,200,0,40,$red);
Слайд 21Графика в PHP
Рисование сектора эллипса с заливкой
bool imagefilledarc ( resource
image,
int cx, int cy,
int w, int h,
int s, int e,
int
color,
int style )
В параметре image указывается ресурс используемого изображения
В параметрах cx и cy указываются координаты центра эллипса
В параметрах w и h указываются ширина и высота эллипса
В параметрах s и e указываются начало и конец сектора в градусах
В параметре color указывается цвет границы и заливки сектора
В параметре style указывается стиль отрисовки сектора эллипса, возможные варианты: IMG_ARC_PIE, IMG_ARC_CHORD, IMG_ARC_NOFILL, IMG_ARC_EDGED
imagefilledarc ($img,200,150,300,200,0,40,$red,IMG_ARC_PIE);
Слайд 22Графика в PHP
Рисование строки текста
bool imagestring ( resource image,
int font,
int x,
int y, string s,
int color )
В параметре image
указывается ресурс используемого изображения
В параметре font указывается номер шрифта (1 - 5)
В параметрах x и y указываются координаты верхнего левого угла строки текста
В параметре s указывается строка текста
В параметре color указывается цвет текста
Используются стандартные шрифты (всегда доступные), но возникают проблемы с русским текстом
imagestring ($img, 3, 150, 300, ”Hello, world!”, $red);
Слайд 23Графика в PHP
Рисование строки текста TrueType-шрифтом
bool imagettftext ( resource image,
float
size, float angle,
int x, int y,
int color, string fontfile, string
text )
В параметре image указывается ресурс используемого изображения
В параметре size указывается размер шрифта в пикселях (GD1) или точках (GD2)
В параметре angle указывается угол наклона в градусах
В параметрах x и y указываются координаты нижнего левого угла строки текста
В параметре color указывается цвет текста
В параметре fontfile указывается ссылка на TrueType-шрифт
В параметре text указывается строка текста
imagettftext($img, 30, 10, 300, 150, $red, "bellb.ttf", "PHP5");
Слайд 24Графика в PHP
Создание изображения на базе существующего
Можно создать новое изображение
на базе уже существующего:
resource imagecreatefromgif (string filename)
resource imagecreatefromjpeg (string filename)
resource
imagecreatefrompng (string filename)
$img = imageCreateFromJPEG("image.jpg");
Слайд 25Графика в PHP
Уничтожение изображения
bool imagedestroy ( resource $image )
В
параметре image указывается ресурс используемого изображения
imagedestroy($img);
Слайд 26Графика в PHP
Пример
255);
$red = imagecolorallocate($img, 255, 0, 0);
$green =
imagecolorallocate($img, 0, 255, 0);
$blue = imagecolorallocate($img, 0, 0, 255);
imagearc($img, 100, 100, 200, 200, 0, 360, $white);
imagearc($img, 100, 100, 150, 150, 25, 155, $red);
imagearc($img, 60, 75, 50, 50, 0, 360, $green);
imagearc($img, 140, 75, 50, 50, 0, 360, $blue);
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
?>
Слайд 27Графика в PHP
Практическая работа
1. Создайте изображение True Color и включте
сглаживание. Определите набор цветов. Отправьте соответствующий HTTP-заголовок и выведите изображение
на страницу.
2. Создайте изображение на базе любого другого изображения. Отрисуйте на нем произвольные объекты и подпишите его строкой текста при помощи TrueType-шрифта bellb.ttf
0, 255, 0);
imagerectangle($img, 20,20,200,200,$green);
imagejpeg($img);
?>
Слайд 30Web - сервисы
Web - сервисы — это программы, доступ к
которым осуществляется по протоколу HTTP, а обмен данными происходит в
формате XML.
HTTP-запрос
HTTP-ответ
XML-запрос по HTTP
XML-ответ по HTTP
Клиент
HTTP-сервер: клиент web-службы
HTTP-сервер: сервер web-службы
Слайд 31Web - сервисы
WSDL (Web Service Description Language)
WSDL расшифровывается как
Язык Описания Web-сервисов
WSDL написан на XML
WSDL является XML-документом
WSDL используется для описания web-сервисов
WSDL также используется для определения расположения web-сервисов
WSDL не является стандартом W3C
Слайд 32Web - сервисы
WSDL. Структура документа
В документе WSDL определяется web-сервис с
помощью следующих основных элементов:
- Методы, предоставляемые web-сервисом
- Сообщения,
используемые web-сервисом
- Типы данных, используемые web-сервисом
- Протоколы связи, используемые web-сервисом
Слайд 33Web - сервисы
WSDL. Пример
message="getTermRequest"/>
В этом примере элемент portType определяет "glossaryTerms" как имя порта, и "getTerm" как имя операции. Операция "getTerm" имеет входящее сообщение "getTermRequest" и исходящее - "getTermResponse".
Элементы message определяют части каждого сообщения и ассоциированные типы данных.
Слайд 34Web - сервисы
Порты WSDL
Элемент --- самый важный элемент
WSDL.
Он определяет web-сервис, выполняемые им операции и допустимые сообщения
Порт определяет
точку монтирования к web-сервису. Его можно сравнить с библиотекой функций (модулем, классом) в традиционном языке программирования, а каждую операцию можно сравнить с функцией в традиционном языке программирования.
Слайд 35Web - сервисы
Типы операций WSDL
Однонаправленная (One-way) - Операция может
принимать сообщение, но не будет возвращать ответ.
Запрос-ответ (Request-response) - Операция
может принимать запрос и возвратит ответ.
Вопрос-ответ (Solicit-response) - Операция может послать запрос и будет ждать ответ.
Извещение (Notification) - Операция может послать сообщение, но не будет ожидать ответ.
Слайд 38Web - сервисы
SOAP (Simple Object Access Protocol)
PHP предоставляет простой интерфейс
для работы с web-сервисами посредством расширения SOAP.
SOAP — Простой протокол
доступа к объектам.
Позволяет создавать сценарии, обменивающиеся информацией с другими приложениями при помощи XML-пакетов, поверх существующих протоколов (например HTTP)
Класс SoapClient – создание SOAP-клиента
Класс SoapServer – создание SOAP-сервера
Класс SoapFault – информация об ошибках
Слайд 39Web - сервисы
Создание SOAP-клиента
class SoapClient {
__construct ( mixed wsdl [,
array options] )
}
Создает новый объект класса SoapClient
В параметре
wsdl указывается URI WSDL-документа Web-сервиса
Методы веб-сервиса становятся методами созданного объекта
$link ='http://www.webservicex.net/CurrencyConvertor.asmx?wsdl';
$client = new SoapClient ($link);
$usd = $client->ConversionRate(array('FromCurrency' => 'USD',
'ToCurrency' => 'RUB'));
$euro = $client->ConversionRate(array('FromCurrency' => 'EUR', 'ToCurrency' => 'RUB'));
echo 'USD: '.$usd->ConversionRateResult .
'
EUR: '.$euro->ConversionRateResult;
?>
Слайд 40Web - сервисы
Получение списка SOAP-функций
class SoapClient {
array __getFunctions ( void
)
}
Возвращает список SOAP-функций, поддерживаемых web-сервисом
($client->__getFunctions() as $type){
echo $type . '
';
}
?>
Слайд 41Web - сервисы
Получение последнего SOAP-запроса
class SoapClient {
string __getLastRequest ( void
)
}
Возвращает последний SOAP-запрос
Работает только если SOAP-клиент был создан со
включенной опцией trace
$client = SoapClient ("some.wsdl",array('trace' => 1));
$result = $client->SomeFunction();
echo "Запрос: " . $client->__getLastRequest();
?>
Слайд 42Web - сервисы
Получение последнего SOAP-ответа
class SoapClient {
string __getLastResponse ( void
)
}
Возвращает последний SOAP-ответ
Работает только если SOAP-клиент был создан со
включенной опцией trace
$client = SoapClient ("some.wsdl",array('trace' => 1));
$result = $client->SomeFunction();
echo "Ответ: " . $client->__getLastResponse();
?>
Слайд 43Web - сервисы
Кэширование WSDL-документов
По-умолчанию WSDL-документы кэшируются на 1 сутки
Включение/выключение кэширования WSDL-документов – директива soap_wsdl_cache_enabled (допустимые значения: 0 или
1)
ini_set ('soap_wsdl_cache_enabled','0');
Слайд 44Web - сервисы
Создание SOAP-сервера
class SoapServer {
__construct ( mixed wsdl [,
array options] )
}
Создает новый объект класса SoapServer
В параметре
wsdl указывается URI WSDL-документа используемого для создания Web-сервиса
$server = new SoapServer ("stock.wsdl");
Слайд 45Web - сервисы
Добавление метода SOAP-сервера
class SoapServer {
void addFunction (mixed functions)
}
Регистрирует пользовательские функции на SOAP-сервере
В параметре functions указывается имя
регистрируемой функции, или массив, содержащий имена нескольких регистрируемых функций
$server->addFunction("getStock");
Слайд 46Web - сервисы
Регистрация обработчика SOAP-запросов
class SoapServer {
void setClass(string class_name [,mixed
args [, mixed ...]] )
}
Регистрирует на SOAP-сервере класс для
обработки SOAP-запросов
В параметре class_name указывается имя регистрируемого класса
$server->setClass("StockService");
Слайд 47Web - сервисы
Обработка SOAP-запроса
class SoapServer {
void handle ( [string soap_request]
)
}
Обрабатывает SOAP-запрос
В параметре soap_request указывается SOAP-запрос для обработки
Если параметр soap_request опущен, используется значение предопределенной переменной $HTTP_RAW_POST_DATA
$server->handle();
Слайд 48Web - сервисы
Создание SOAP-сервера. Пример
{
$stock = array("1" => 50,
"2" => 150,
"3" => 11,
"4" =>
27,
"5" => 500);
if (isset($stock[$id])) {
$quantity = $stock[$id];
return $quantity;
} else {
throw new SoapFault("Server","Несуществующий id");
}
}
}
ini_set("soap_wsdl_cache_enabled", "0");
$server = new SoapServer("stock.wsdl");
$server->setClass("StockService");
$server->handle();
?>
Слайд 49Web - сервисы
Класс SoapFault
class SoapFault {
__construct (
string faultcode,
string faultstring
[, string faultactor
[, mixed detail
[, string
faultname
[, SoapHeader headerfault]]]] )
}
Класс на основе класса Exception
Создан для обработки ошибок при работе с SOAP
В параметре faultcode указывается код ошибки
В параметре faultstring указывается сообщение об ошибке
Слайд 50Web - сервисы
Класс SoapFault. Пример
Серверная часть
...
throw new SoapFault("Server", "Несуществующий id
товара");
...
Клиентская часть
try {
$client = new SoapClient("stock.wsdl");
$result = $client->getStock("7");
echo "Текущий запас: ", $result;
} catch (SoapFault $exception) {
echo $exception;
}
Слайд 51Web - сервисы
Ресурсы с web-сервисами
http://www.xmethods.net
http://www.webservicex.net
http://www.webserviceresource.com
Слайд 53Принципы дизайна web-интерфейса
Клиент – это не пользователь
Клиент может думать, что
он знает, что нужно его пользователям, но это не так.
Все дело в том, что клиент не является пользователем.
Не спрашивайте клиента, что он думает по поводу того, что нужно пользователям
Если клиент не знает, что пользователям на самом деле нужно, а вы делаете то, что говорит клиент, то все закончится печально.
Вы тоже не знаете, что нужно пользователям
Именно тем пользователям, которые будут пользоваться разрабатываемым приложением. Потому что каждое приложение уникально.
Слайд 54Принципы дизайна web-интерфейса
Только пользователи знают, что им нужно
Только пользователи вашего
приложения знают, что работает, а что – нет. Обычно, наиболее
простой решение при возникновении сложностей – спросить пользователей, что они об этом думают.
Тестируйте, тестируйте и еще раз тестируйте
На самом деле это очень простая процедура. Вам всего лишь нужно посадить пользователя за компьютер с вашей программой и проанализировать его действия.
Говорите на одном языке
Всегда должна быть единственная трактовка любого термина или фразы, используемых при работе с приложением. Специальными терминами могут обозначаться понятия, бизнес-функции или задачи, виджеты или даже отдельные элементы интерфейса.
Слайд 55Принципы дизайна web-интерфейса
Улучшайте отношения с пользователями
Попытайтесь уменьшить физический труд пользователя
при работе с вашим приложением. Туннельный синдром становится неотъемлемой частью
сегодняшней жизни и мы, как разработчики, должны позаботиться об эргономике своих приложений.
Принимайте трудные решения
Это ваша работа, как дизайнера интерфейсов, быть экраном для пользователя и принимать сложные решения относительно организации интерфейса. Не оставляйте эти решения пользователю, даже если это сделает вашу жизнь легче. Если в вашем приложении огромное количество настроек, посмотрите внимательней, может какие-то решения вы сможете не перекладывать на плечи пользователей?
Слайд 56Принципы дизайна web-интерфейса
Не мешайте пользователям работать
Обеспечьте простой доступ к часто
используемым и наиболее важным функциям без дополнительных препятствий. Например, при
работе с SMS такими функциями будут чтение, ответ и пересылка.
Оберегайте, но не ругайте
Там, где это возможно, интерфейс должен помешать пользователю совершить ошибку, вместо того, чтобы выводить сообщение, когда ошибка уже произошла.
Обеспечивайте обратную связь
Интерфейс должен обеспечивать достаточную обратную связь – пользователь должен получать реакцию от программы на свои действия. Пользователь никогда не должен задумываться, сработало его действие или нет (Стивен Круг, «Не заставляйте меня думать»).
Слайд 57Принципы дизайна web-интерфейса
Показывайте, а не рассказывайте
По возможности используйте понятные визуальные
образы вместо длительных описаний.
Не дайте пользователю потеряться
Интерфейс должен давать пользователю
возможность определить свое текущее положение. Пользователь не должен «заблудиться» в приложении.
Используйте знакомое пользователю окружение
Не заставляйте пользователя работать с незнакомыми элементами управления. По возможности используйте элементы, с которыми пользователь уже встречался на других сайтах или при работе с операционной системой
Слайд 58Принципы дизайна web-интерфейса
Не заставляйте пользователя ждать
Приложение должно выполняться достаточно быстро,
чтобы пользователи сочли его пригодным к использованию.
Презумпция невиновности
Пользователь должен получать
сообщения об ошибках только относительно тех полей, с которыми он взаимодействовал. Другими словами, не нужно сообщать пользователю, что в поле введено неверное значение, если он в него вообще ничего не вводил.
Сделайте приложение доступным
Рассчитывайте на то, что с вашей программой будут работать люди со слабым зрением, слухом, нарушенной или ослабленной координацией. Вы существенно расширите круг потенциальных пользователей и улучшите свой опыт, если будете учитывать таких пользователей.
Слайд 59Использование паттернов в web-дизайне
Самая большая проблема для web-дизайнера состоит в
том, что существует огромное количество вариантов решения любой задачи. Обычно
мы об этом не задумываемся и выбираем решение, основываясь на своих привычках и предыдущем опыте.
Однако, существует более эффективный способ поиска хороших решений, чем угадывание или перебор. Чтобы создавать лучшие сайты – сайты, которые будут функциональными, красивыми и удобными в использовании – нам нужно разделить проблему дизайна на небольшие, независимые проблемы, соотносящиеся с реальными потребностями пользователей. Кристофер Александр, придумавший этот метод, называет их паттернами.
Слайд 60Использование паттернов в web-дизайне
Шаг 1. Составьте список бит
Сначала нужно составить
список бит, которые должны быть на странице, чтобы она решала
поставленную задачу. Под битами понимаются все информационные и функциональные элементы. Итак, какая информация должна находиться на странице, какие действия должен выполнить пользователь и т.д. Не расставляйте приоритеты, не группируйте и не классифицируйте эти элементы.
Шаг 2. Выясните, как биты соотносятся друг с другом
Некоторые биты влияют друг на друга, другие довольно независимы. Некоторые биты будут лучше работать в связке с другими, некоторые могут работать автономно. Разделите биты на группы с учетом того, как они влияют друг на друга (не отталкивайтесь от какой-либо концепции или графической идеи).
Слайд 61Использование паттернов в web-дизайне
Шаг 3. Расставьте приоритеты
Определите, какие элементы наиболее
важны для большинства пользователей.
Нет необходимости точно высчитывать приоритеты, достаточно разделить
элементы на группы по важности
Шаг 4. Разработайте дизайн каждого элемента
Поскольку элементы независимы друг от друга, мы можем разработать дизайн для каждого в отдельности.
Шаг 5. Соедините части вместе
После того, как созданы эскизы всех элементов, необходимо соединить их вместе. Я выделяю две фазы. Сначала делается каркас, затем в каркас подставляются готовые эскизы элементов
Шаг 6. Воплотите макет в реальность.
Слайд 62Способы ориентирования пользователей на сайте
Заголовки страниц
На каждой странице сайта нужен
уникальный, краткий и содержательный заголовок. Разумеется, названия ссылок, ведущих на
страницу, должны соответствовать заголовку страницы.
Заголовок позволяет пользователям сориентироваться и подсказывает им, что можно найти на этой странице. Чтобы заголовки работали эффективнее:
Убедитесь, что шрифт заголовка хотя бы на два пикселя больше шрифта основного текста.
Используйте другой цвет шрифта или фона для дополнительного выделения.
Оставьте побольше свободного пространства сверху и снизу от заголовка.
Слайд 63Способы ориентирования пользователей на сайте
Хлебные крошки (цепочки ссылок)
Хлебные крошки (обычно
они располагаются непосредственно над заголовком страницы) показывают, как текущая страница
соотносится с главной.
Например: Главная > О компании > Контактная информация
Преимущества использования хлебных крошек в том, что они:
Показываю пользователям их текущее положение во вселенной (особенно, если пользователи начинаю работу на сайте с внутренних страниц).
Помогают пользователям узнать о структуре и иерархии сайта.
Показывают пользователям, как они попали на текущую страницу.
Позволяют пользователям вернуться сразу на несколько шагов назад.
При этом, хлебные крошки должны показывать реальную структуру сайта, а не последовательность страниц, по которым прошел пользователь.
Слайд 64Способы ориентирования пользователей на сайте
Первичная навигация
Это может быть очевидным, но
все равно напомним еще раз: правильное использование первичной навигации может
быть одним из самых мощных инструментов для ориентирования пользователей.
Четко выделите выбранный элемент навигации с помощью другого цвета фона.
Убедитесь, что названия элементов навигации четко соответствуют заголовкам страниц.
Вторичная навигация
Опять таки, хоть это и очевидно, напомним еще раз: точно так же, как первичная навигация ведет пользователя в разделы сайта, вторичная навигация ведет пользователя к конкретным страницам.
Слайд 65Способы ориентирования пользователей на сайте
Ссылки
Ссылки должны четко сообщать, куда они
приведут пользователя. Текст ссылки должен быть понятным, чтобы пользователю не
пришлось гадать, где он окажется после нажатия на нее.
Пользователь с большей вероятностью пройдет по ссылке, если будет понимать, куда она ведет. Следует избегать ссылок с бессмысленными подписями, вроде «нажмите здесь».
Как и у других элементов навигации, название ссылки должно соответствовать заголовку на целевой странице.
Слайд 66Способы ориентирования пользователей на сайте
Структура страницы
При проектировании структуры страницы, не
забывайте, что:
Пользователи обычно знакомы со стандартными структурами (например, вариант
из трех колонок – навигация, область с основной информацией и правая колонка), поэтому смогут быстрее сориентироваться, если элементы навигации будут располагаться там, где пользователи ожидают их увидеть. Избегайте «навороченного» дизайна.
Пользователь сможет быстрее принять решение о том, куда дальше двигаться, если будет видеть ссылки на одном экране. Располагайте ключевые элементы рядом.
Слайд 67Способы ориентирования пользователей на сайте
Прогресс
Прогресс показывает пользователям, на каком этапе
находится процедура, которую они совершают на сайте (это касается процедур,
требующих последовательного перехода по нескольким страницам – например, заказ товара в электронном магазине).
Сделайте его легко заметным.
Используйте простой для понимания язык.
Выделите текущее положение пользователя, пройденные и предстоящие этапы.
Придайте ему вид потока или последовательности (например, с помощью цифр).
Слайд 68Способы ориентирования пользователей на сайте
Название страницы
Название страницы – текст, располагающийся
в строке заголовка браузера. При составлении названия помните, что:
Меньше
– значит больше. Чем короче будет название, тем проще понять его смысл.
Расположите важную информацию вначале. Часто для пользователей имеют значение только первые несколько слов.
Ясность без контекста. Пользователи будут просматривать названия в истории посещений, в списке избранных страниц, поэтому смысл названия должен быть понятен, даже если сама страница не видна.
Слайд 69Способы ориентирования пользователей на сайте
Карта сайта
Карта важна для сайтов с
большим количеством страниц.
Пользователь может обратиться к карте сайта, если он
не нашел нужную информацию просматривая страницы или с помощью поиска. Поэтому карта сайта должна быть ясной и действительно отражать структуру сайта.
Слоган
Пользователи, как правило, тратят мало времени на сайты, которые не позволят быстро понять, есть ли на них то, что нужно пользователю. Короткий и понятный слоган позволит пользователю понять, что ожидает его на сайте (при первом посещении).
![Графика в PHP Создание JPEG-изображенияbool imagejpeg (resource image[, string filename[, int quality]]) Выводит JPEG-изображение в броузер](/img/thumbs/e658a5bb46fa9116bb94efcfa8c1731c-800x.jpg "Московский технологический институт Проектирование и разработка Графика в PHP Создание JPEG-изображенияbool imagejpeg (resource image[, string filename[, int")
![Графика в PHP Создание PNG-изображенияbool imagepng (resource image[, string filename ]) Выводит PNG-изображение в браузер. В](/img/tmb/3/261633/3d4f5fb63b10e3642c6944ecf1f0b386-800x.jpg "Московский технологический институт Проектирование и разработка Графика в PHP Создание PNG-изображенияbool imagepng (resource image[, string filename ])")
![Графика в PHP Создание GIF-изображенияbool imagegif ( resource image [, string filename ] ) Выводит GIF-изображение](/img/tmb/3/261633/fe72b1bb2527459f6766497af8a238e1-800x.jpg "Московский технологический институт Проектирование и разработка Графика в PHP Создание GIF-изображенияbool imagegif ( resource image [, string")
![Web - сервисы Создание SOAP-клиентаclass SoapClient { __construct ( mixed wsdl [, array options] )} Создает новый объект](/img/thumbs/a2214caa85f49f598ed13d3d501717f7-800x.jpg "Московский технологический институт Проектирование и разработка Web - сервисы Создание SOAP-клиентаclass SoapClient { __construct ( mixed wsdl [,")
![Web - сервисы Создание SOAP-сервераclass SoapServer { __construct ( mixed wsdl [, array options] )} Создает новый объект](/img/thumbs/9b86279d85c56a198814e5daa96cdf16-800x.jpg "Московский технологический институт Проектирование и разработка Web - сервисы Создание SOAP-сервераclass SoapServer { __construct ( mixed wsdl [,")
![Web - сервисы Регистрация обработчика SOAP-запросовclass SoapServer { void setClass(string class_name [,mixed args [, mixed ...]] )} Регистрирует](/img/thumbs/231782782486e139d77265ef887ee217-800x.jpg "Московский технологический институт Проектирование и разработка Web - сервисы Регистрация обработчика SOAP-запросовclass SoapServer { void setClass(string class_name [,mixed")
![Web - сервисы Обработка SOAP-запросаclass SoapServer { void handle ( [string soap_request] )} Обрабатывает SOAP-запрос В параметре soap_request](/img/thumbs/28928c41d5ae5ed9dbd266a8f8b5a61b-800x.jpg "Московский технологический институт Проектирование и разработка Web - сервисы Обработка SOAP-запросаclass SoapServer { void handle ( [string soap_request]")
