Разработка интерфейса web-сайта

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

Рисунок 1 - Пример работы в Adobe Photoshop CS6

 

Разработка структуры и дизайна web-сайта

На главной странице сайта должны быть расположены:

- меню (главная, услуги, контакты);

- слайдер с фотографиями с их автовоспроизведением;

- блок с информацией об автосервисе.

Рисунок 2 - Страница Главная

 

Страница Услуги:

- меню (главная, услуги, контакты);

- таблица со списком услуг;

- ссылка с возможностью скачать список услуг в формате Excel файла.

Рисунок 3 – Страница услуги

Страница Контакты:

- меню (главная, услуги, контакты);

- информация о местонахождении автосервиса и времени его работы;

- яндекс карта с отметкой.

- окно с возможностью оставить комментарий.

Рисунок 4 - Страница Контакты

 

Загрузка шаблона

После запуска Open Server необходимо открыть проект WordPress. Далее откроется консоль в которой необходимо выбрать Внешний вид – Темы. Здесь можно выбрать же имеющийся шаблон либо добавить новый.

Рисунок 5 - Выбор шаблона

В окне «Внешний вид» можно изменить выбранный шаблон. Это можно сделать, выбрав пункт меню «Настроить».

Рисунок 6 - Изменение шаблона

 

В окне настроек можно выбрать:

- название и описание сайта;

- цвета;

- изображение заголовка;

- навигация;

- виждеты;

- статическая главная страница.

Рисунок 7 - Настройка шаблона

 

После настройки шаблона можно переходить к созданию страниц.

 

Создание страниц

Для создания страницы необходимо выбрать Страницы – Добавить новую.

Рисунок 8 - Создание страницы

 

При создании главной страницы был выполнен слайдер с помощью плагина Huge IT Slider.

Рисунок 9- Создание слайдера

На странице Услуги в виде таблицы представлен список с услугами.

 

Рисунок 10- Создание таблицы с услугами

Яндекс карта на страницу Контакты была создана с помощью плагина Oi Yandex.Maps

Рисунок 11 - Создание Яндекс карты

 

Заключение

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

При разработке web-сайта были проанализированы современные web-технологии, позволяющие создавать интерактивные web-страницы. Наиболее подходящими для выполнения поставленной задачи оказались OpenServer и WordPress.

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

Список литературы

1. Кириллов В.В. Структурированный язык запросов (SQL). – СПб.: ИТМО, 2011. – 80 с.

2. Маклаков С.В. BPWin и ERWin. CASE – средства разработки информационных систем. – М.: ДИАЛОГ – МИФИ, 2012. – 256с.

3. Маклаков С.В. Создание информационных систем с AllFusion Modeling Suite. – М.: ДИАЛОГ – МИФИ, 2010. – 224с.

4. Цикритизис Д., Лоховски Ф. Модели данных. – М.: Финансы и статистика, 2011. – 344 с.

 

Приложение

Листинг

<?

// Date: 25.04.2014 - make code as a single plugin from other big project

// Date: 20.05.2014 - Stretchy Icons support added

// Date: 21.07.2014 - 2.0 release

// Date: 22.07.2014 - 2.1 fix html in placemark; center parametr added; curl enable check

// Date: 16.09.2014 - 2.2 fix error when coordinates used; added shortcode button; localization

// Date: 08.12.2014 - 2.3 fix showmap coordinates missing; map center; added custom image; placemarks;

 

include "include/init.php";

add_action('init', 'oi_yamaps');

function oi_yamaps() // localization

{

load_plugin_textdomain( 'oiyamaps', false, plugin_basename( dirname( __FILE__ ) ) . '/lang' );

add_action('admin_footer', 'oi_yamaps_thickbox');

add_action('media_buttons','oi_yamaps_button',11);

}

// do something on plugin activation

register_activation_hook( __FILE__, 'oi_yamaps_activation' );

function oi_yamaps_defaults() // create table

{

$defaults = array(

'height' => '400px',

'width' => '100%',

'zoom' => '16',

'placemark' => 'twirl#blueDotIcon',

'author_link' => '1',

);

return $defaults;

}

 

function oi_yamaps_activation() // set default variables on plugin activation

{

if( !get_option( OIYM_PREFIX.'options' ) ) // if we don't have any settengs

{

update_option( OIYM_PREFIX.'options' , oi_yamaps_defaults() );

}

}

 

class Ya_map_connected // check, if maps packege is loaded

{

public static $id = 0; // default value - packege not loaded yet

public static $pid = 0; // default value - packege not loaded yet

 

public function staticValue() {

return self::$id; // return actual value

}

public function staticValue1() {

return self::$pid; // return actual value

}

}

function _isCurl(){

return function_exists('curl_version');

}

 

function coordinates($address) // get coordinates of a given address

{

$address = urlencode($address);

$url = "http://geocode-maps.yandex.ru/1.x/?geocode=".$address;

if(!_isCurl)

{

print __('To show the map cURL must be enabled.', 'oiyamaps');

}else

{

$callback = @file_get_contents($url);

$content = $callback;

preg_match('/<pos>(.*?)<\/pos>/',$content,$point);

return implode(',',array_reverse(split(' ',trim(strip_tags($point[1])))));

}

}

function showyamap( $atts, $content=null ) // show block with the map on a page

{

$options = get_option( OIYM_PREFIX.'options' );

foreach($options as $k=>$v) // get variables from DB

{

if($$k==''){$$k = $v;}

}

extract( shortcode_atts( array(

'address' => '',

'center' => '',

'header' => '',

'body' => '',

'footer' => '',

'hint' => '',

'coordinates' => '',

'height' => $height,

'width' => $width,

'zoom' => $zoom,

'iconcontent' => '',

'placemark' => $placemark,

'iconimage' => $iconimage,

'iconsize' => '',

'iconoffset' => '',

'iconrect' => '',

'zoomcontrol' => 1,

'typeselector' => 1,

'maptools' => 1,

'trafficcontrol'=> 1,

'routeeditor' => 1,

), $atts, 'showyamap' ) );

$output = '';

$placemarks = array();

 

if( $zoomcontrol == 1 || $typeselector == 1 || $maptools == 1 || $trafficcontrol == 1 || $routeeditor == 1 )

{

if( $zoomcontrol == 1 ){$zoomcontrol = '.add("zoomControl")';}else{$zoomcontrol = '';}

if( $typeselector == 1 ){$typeselector = '.add("typeSelector")';}else{$typeselector = '';}

if( $maptools == 1 ){$maptools = '.add("mapTools")';}else{$maptools = '';}

if( $trafficcontrol == 1 ){$trafficcontrol = '.add("trafficControl")';}else{$trafficcontrol = '';}

if( $routeeditor == 1 ){$routeeditor = '.add("routeEditor")';}else{$routeeditor = '';}

$controls = '

myMap.controls' .

$zoomcontrol .

$typeselector.

$maptools .

$trafficcontrol .

$routeeditor .

';

 

';

}else

{

$controls = '';

}

 

foreach(oi_yamaps_defaults() as $k=>$v) // set empty variables from defaults

{

if($$k==''&&$k<>'author_link'){$$k = $v;}

}

$id = Ya_map_connected::$id; // set id of map block

if( $coordinates == '' ) // if coordinates not set...

{

if($address<>'') // if we have an address, then...

{

$coordinates = coordinates($address); // take coordinates

}else // if we don't...

{

$latitude = get_post_meta( get_the_ID(), 'latitude', true ); // get latitude from post meta

$longitude = get_post_meta( get_the_ID(), 'longitude', true ); // get longitude from post meta

if($latitude&&$longitude) // if we have coordinates...

{

$coordinates = $latitude . ',' . $longitude; // split theme

}else

{

$coordinates = '';

}

}

}

 

if( $coordinates <> '' )

{

$placemarks[] = array(

'pid' => $id,

'header' => $header,

'body' => $body,

'footer' => $footer,

'hint' => $hint,

'coordinates' => $coordinates,

'iconcontent' => $iconcontent,

'placemark' => $placemark,

'iconimage' => $iconimage,

'iconsize' => '',

'iconoffset' => '',

'iconrect' => '',

);

}

 

// delete all not necessary simbols from $content

$record = false; // shortcode not started flag

$out7 = ''; // shortcode container

for($i=0;$i<strlen($content);$i++) // going thru $content

{

if($content[$i]=='['){$record = true;} // shortcode started

if($record==true){$out7 .= $content[$i];} // make shortcode string

if($content[$i]==']') // shortcode ended

{

$record = false; // set flag

$placemarks[] = json_decode( do_shortcode( $out7 ), true ); // add array of vars to $placemarks array

$out7 = '';

}

}

 

$center = trim($center);

if( $center <> '' ) // if we have a center, then...

{

if( !is_int( $center[0] ) ) // if it's not coordinates, then...

{

$center = coordinates( $center ); // get coordinates

}

}

 

if( !empty( $placemarks ) )

{

// make placemarks string, for adding to code

$placemark_code = '';

$lat = array();

$lon = array();

foreach( $placemarks as $k=>$v )

{

if( $v['placemark'] == '' ) // set placemark if it's not...

{

$v['placemark'] = $placemark;

}

if( $center == '' )

{

list($lat[],$lon[]) = explode(',', $v['coordinates'] );

}

$placemark_code .= placemark_code( $v );

}

if( $center == '' )

{

$center = io_ya_map_center( $lat, $lon ); // center betwin all placemarks

}

 

if($author_link==1)

$author_link = '<a class="author_link" href="http://easywebsite.ru/">' . __('OYM', 'oi_ya_maps') . '</a>';

 

$output .= '

<div id="YMaps_'.$id.'" class="YMaps" style="width:'.$width.';height:'.$height.'">'. $author_link .'</div>

<script type="text/javascript">

ymaps.ready(init);

 

function init () {

var myMap = new ymaps.Map("YMaps_'.$id.'", {

center: ['.$center.'],

zoom: '.$zoom.'

});

'.$controls.'

'.$placemark_code.'

}

</script>

';

Ya_map_connected::$id++; // set new id

if($id==0) // if no maps on a page...

{

return '<script type="text/javascript" src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>'.

'<style>.YMaps {position: relative;} .YMaps .author_link {position: absolute;bottom: 9px; right:330px; z-index: 999;padding:0;display: table!important;line-height:12px;text-decoration:underline!important;white-space: nowrap!important;font-family: Verdana,serif!important;font-size: 10px!important;padding-left: 2px!important;color: #000!important;background-color: rgba(255, 255, 255, 0.7)!important;border:none;}</style>'.

"\n".$output; // ...and show the map

}else{return $output;} // show the map

}

}

add_shortcode('showyamap', 'showyamap');

 

function io_ya_map_center( $lat, $lon )

{

// searching center betwin all placemarks

$la = 0;

$lo = 0;

for($i=0;$i < sizeof( $lat );$i++)

{

if( $la == 0 )

{

$la_min = (float) $lat[$i];

$la_max = (float) $lat[$i];

$lo_min = (float) $lon[$i];

$lo_max = (float) $lon[$i];

}

$la = (float) $lat[$i];

$lo = (float) $lon[$i];

if( $la_min > $la ){$la_min = $la;}

if( $la_max < $la ){$la_max = $la;}

if( $lo_min > $lo ){$lo_min = $lo;}

if( $lo_max < $lo ){$lo_max = $lo;}

 

}

$la = ( $la_min + $la_max ) / 2;

$lo = ( $lo_min + $lo_max ) / 2;

$center = $la . ',' . $lo;

return $center;

}

function oi_ya_map_brackets( $s )

{

return str_replace( ')', ']', str_replace( '(','[',$s ) );

}

 

function placemark_code( $atts )

{

extract( shortcode_atts( array(

'pid' => '',

'header' => '',

'body' => '',

'footer' => '',

'hint' => '',

'coordinates' => '',

'iconcontent' => '',

'placemark' => '',

'iconimage' => '',

'iconsize' => '',

'iconoffset' => '',

'iconrect' => '',

), $atts ) );

 

// if content for placemark given, make placemark stretch

if($iconcontent<>''){$placemark = str_replace('Icon','StretchyIcon',str_replace('Dot','',$placemark));}

 

if( $iconcontent ){$iconcontent = 'iconContent: "'.$iconcontent.'",';}

if( $header ){$header = 'balloonContentHeader: "'.$header.'",';}

if( $body ){$body = 'balloonContentBody: "'.$body.'",';}

if( $footer ){$footer = 'balloonContentFooter: "'.$footer.'",';}

if( $hint ){$hint = 'hintContent: "'.$hint.'"';}

 

if( $iconimage ){$iconimage = 'iconImageHref: "'.$iconimage.'", ';}

if( $iconsize ){$iconsize = 'iconImageSize: '.oi_ya_map_brackets( $iconsize ).', ';}

if( $iconoffset ){$iconoffset = 'iconImageOffset: '.oi_ya_map_brackets( $iconoffset ).' ';}

if( $iconrect ){$iconrect = 'iconImageClipRect: '.oi_ya_map_brackets( $iconrect ).' ';}

if( $placemark && !$iconimage ){$placemark = 'preset: "'.$placemark.'"';}else{$placemark = '';}

 

$output = '

myPlacemark_'.$pid.' = new ymaps.Placemark(['.$coordinates.'], {'.

$iconcontent.

$header.

$body.

$footer.

$hint.

'},

{'.

$placemark.

$iconimage.

$iconsize.

$iconoffset.

$iconrect.

'}

);

myMap.geoObjects.add(myPlacemark_'.$pid.');

 

';

return $output;

 

 

}

 

function placemark( $atts )

{

extract( shortcode_atts( array(

'address' => '',

'header' => '',

'body' => '',

'footer' => '',

'hint' => '',

'coordinates' => '',

'iconcontent' => '',

'placemark' => '',

'iconimage' => '',

'iconsize' => '',

'iconoffset' => '',

'iconrect' => '',

), $atts ) );

if( $coordinates == '' ) // get coordinates, if it's not set

{

$coordinates = coordinates( $address );

}

 

if( $coordinates )

{

Ya_map_connected::$pid++;

$pid = Ya_map_connected::$pid;

$placemark = array(

'pid' => $pid,

'header' => $header,

'body' => $body,

'footer' => $footer,

'hint' => $hint,

'coordinates' => $coordinates,

'iconcontent' => $iconcontent,

'placemark' => $placemark,

'iconimage' => $iconimage,

'iconsize' => $iconsize,

'iconoffset' => $iconoffset,

'iconrect' => $iconrect,

);

return json_encode( $placemark );

}

}

add_shortcode('placemark', 'placemark');

?>