Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
_Bakalavrskaya_rabota.docx
Скачиваний:
0
Добавлен:
01.07.2025
Размер:
124.42 Кб
Скачать

7. Заключение

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

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

Список использованной литературы

1) Для тех, кто делает сайты [Электронный ресурс]. – Режим доступа: http://htmlbook.ru/.

2) Разработчик Bitrix Framework [Электронный ресурс]. – Режим доступа: https://dev.1c-bitrix.ru/learning/course/.

3) Интересные публикации – Хабрахабр [Электронный ресурс]:http://habrahabr.ru/

4) Блог 1С-Битрикс программиста [Электронный ресурс]: www.thisis-blog.ru

5) Тренинги и программирование [Электронный ресурс]: http://scientes.tmweb.ru

6) HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок. – 3-еизд., перераб. и доп.. – СПб. : БХВ-Петербург, 2010.

7) Разработка мобильных приложений: с чего начать [Электронный ресурс]. – Режим доступа: http://habrahabr.ru/company/mailru/blog/179113/.

Приложение А.

Файл шаблона /bitrix/templates/mobile/template.php

<html>

<head>

<title><?$APPLICATION->ShowTitle();?> - Гимнастика ПРО - всё о художественной гимнастике!</title> <meta charset="utf-8" />

<?$APPLICATION->ShowHead();?>

<?$APPLICATION->SetAdditionalCSS('/styles/screen.css');?>

<?$APPLICATION->SetAdditionalCSS('/styles/jquery.fancybox.css');?>

<?

if (CModule::IncludeModule("iblock")):

endif;

?>

<body>

<?$APPLICATION->ShowPanel();?>

<div class=top>

<img src = "/upload/iblock/7df/7df5b1a540bae1b5692773cdc1af37a4.png">

</br><a href=?mob=N>Перейти к полной версии</a>

</div>

<div class="mheader_social">

<span class="msocial_style">

<?$APPLICATION->IncludeComponent("bitrix:main.include", ".default", array(

"AREA_FILE_SHOW" => "sect",

"AREA_FILE_SUFFIX" => "log_soc",

"AREA_FILE_RECURSIVE" => "Y",

"EDIT_TEMPLATE" => ""

),

false

);?>

</span>

</div>

<?$APPLICATION->IncludeComponent(

"bitrix:menu",

"mobile-top1",

array(

"ROOT_MENU_TYPE" => "mobile",

"MAX_LEVEL" => "4",

"CHILD_MENU_TYPE" => "left",

"USE_EXT" => "N",

"ALLOW_MULTI_SELECT" => "N",

"COMPONENT_TEMPLATE" => "mobile-top1",

"MENU_CACHE_TYPE" => "N",

"MENU_CACHE_TIME" => "3600",

"MENU_CACHE_USE_GROUPS" => "Y",

"MENU_CACHE_GET_VARS" => array(

),

"DELAY" => "N"

),

false,

array(

"ACTIVE_COMPONENT" => "Y"

)

);?>

<div>

<?$APPLICATION->IncludeComponent(

"bitrix:menu",

"grey_tabs",

array(

"ROOT_MENU_TYPE" => "top-2",

"MAX_LEVEL" => "1",

"CHILD_MENU_TYPE" => "top-2",

"USE_EXT" => "N",

"COMPONENT_TEMPLATE" => "grey_tabs",

"MENU_CACHE_TYPE" => "N",

"MENU_CACHE_TIME" => "3600",

"MENU_CACHE_USE_GROUPS" => "Y",

"MENU_CACHE_GET_VARS" => array(

),

"DELAY" => "N",

"ALLOW_MULTI_SELECT" => "N"

),

false

);?>

</div>#WORK_AREA#

<div class=footer>

<?\Bitrix\Main\Page\Frame::getInstance()->startDynamicWithID("soc_buttons");?>

<?$APPLICATION->IncludeComponent("bitrix:main.include", ".default", array(

"AREA_FILE_SHOW" => "sect",

"AREA_FILE_SUFFIX" => "soc_foot",

"AREA_FILE_RECURSIVE" => "Y",

"EDIT_TEMPLATE" => ""

),

false

);?>

<?\Bitrix\Main\Page\Frame::getInstance()->finishDynamicWithID("soc_buttons", "");?>

</div>

<div class=contacts>

© Роман Петров, 2012 - 2015

</div>

</body>

</html>

Файл стилей шаблона /bitrix/templates/mobile/style.css

<?

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

$APPLICATION->SetTitle("template_styles");

?>body {

font-family:Tahoma, sans-serif;

font-size:120%;

line-height:1.5;

}

.top{

position:relative;

margin-top:5px;

left:50%;

margin-left:-117px;

}

.top a{

color:#1A0A0A;

text-decoration:none;

font-weight:bold;

font-size:110%;

text-align:center;

}

.top a:visited{

color:#1A0A0A

}

.msocial_style {

position: relative;

display: inline-block;

left:50%;

margin-left:-50px;

}

.msocial_style .b-share {

position: relative;

padding: 0 !important;

display: inline-block;

vertical-align: middle;

}

.msocial_style .b-share__handle {

width: 16px;

height: 16px;

margin: 0 10px 0 0;

padding: 0 !important;

float: left;

}

.msocial_style .b-share-counter {

}

.msocial_style .b-share-icon {

width: 16px;

height: 16px;

float: left;

background: url('/styles/../images/social_mini.png') no-repeat;

}

.msocial_style .b-share-icon.b-share-icon_vkontakte {

background-position: 0 0;

}

.msocial_style .b-share-icon.b-share-icon_facebook {

background-position: 0 -17px;

}

.msocial_style .b-share-icon.b-share-icon_odnoklassniki {

background-position: 0 -34px;

}

.msocial_style .b-share-icon.b-share-icon_twitter {

background-position: 0 -51px;

}

.main-menu{

padding:0;

margin:0;

list-style:none;

border:1px solid #E5E5E5;

}

.main-menu>li{

position:relative;

display:inline-block;

margin-right:-4px;

width:100%;

height:25px;

text-align:center;

vertical-align:middle;

background:rgba(0,0,0,0.8);

color:WHITE;

font-size:16px;

}

.main-menu a{

display:block;

padding:8px 10px;

margin-left:-1px;

color:#0088CC;

border-left:1px solid #E5E5E5

}

.main-menu a:hover{

background:#f5f5f5;

}

.main-menu .sub-menu{

position:absolute;

padding:0;

margin:0;

list-style:none;

background:#E3FcFC;

display:none;

width:100%;

text-align:center;

}

.main-menu>li:hover .sub-menu{

display:block;

}

.main-menu .sub-menu a{

border:1px solid #E5E5E5;

margin-bottom:-1px;

text-decoration:none;

}

.menu2{

padding:0;

margin:0;

list-style:none;

margin-right:-4px;

font-size:17px;

background:rgba(60,60,60,0.25);

}

.menu2 li{

display:inline-block;

width:33%;

text-align:center;

}

.menu2 a{

color:#1A0A0A;

text-decoration:none;

font-weght:bold;

}

.menu2 a:hover{

background:#F5F5F5;

}

.menu2 a:visited{

color:#1A0A0A;

}

.workplace{

}

.workplace li{

margin:5px;

margin-left:10px;

border-bottom:2px solid #CCCCCC;

font-size:12px;

font-weight:bold;

color:rgba(40,40,40,0.55);

}

.workplace a{

color:rgba(40,40,40,0.85);

font-size:14px;

}

.workplace a:visited{

color:rgba(40,40,40,0.85);

}

.contacts{

width:150px;

padding:5px;

font-size:10px;

text-align:center;

background:rgba(0,0,0,0.8);

color:WHITE;

font-weight:bold;

margin:5px auto;

}

.mfooter{

position:relative;

display:inline;

}

/*.footer_social {

position: relative;

top:-15px;

left: 40%;

width: 20%;

text-align: center;

}

.footer_social .social_item {

display: inline;

margin: 5px 0;

}*/

Файл menu/template.php:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<ul class="main"><li>Меню</li></ul>

<?if (!empty($arResult)):?>

<ul id="mobile-top1">

<?

$previousLevel = 0;

foreach($arResult as $arItem):?>

<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>

<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>

<?endif?>

<?if ($arItem["IS_PARENT"]):?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>

<li><?=$arItem["TEXT"]?>

<ul>

<?else:?>

<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?> class="parent"><?=$arItem["TEXT"]?>

<ul>

<?endif?>

<?else:?>

<?if ($arItem["PERMISSION"] > "D"):?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>

<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li>

<?else:?>

<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>

<?endif?>

<?else:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>

<li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>

<?else:?>

<li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>

<?endif?>

<?endif?>

<?endif?>

<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>

<?=str_repeat("</ul></li>", ($previousLevel-1) );?>

<?endif?>

</ul>

<?endif?>

Файл стилей меню:

#mobile-top1

{

padding:0;

margin:5px 0 -10px 0;

list-style:none;

border:1px solid #E5E5E5;

}

#mobile-top1 ul.main li

{

position:relative;

display:inline-block;

margin-right:-4px;

width:100%;

height:25px;

text-align:center;

vertical-align:middle;

background:rgba(0,0,0,0.8);

color:WHITE;

font-size:125%;

display:block;

}

#mobile-top1 li

{

position:relative;

display:inline-block;

margin-right:-4px;

width:100%;

height:25px;

text-align:center;

vertical-align:middle;

background:rgba(0,0,0,0.8);

color:WHITE;

font-size:125%;

display:block;

}

#mobile-top1 :hover li

{

position:relative;

display:inline-block;

margin-right:-4px;

width:100%;

height:25px;

text-align:center;

vertical-align:middle;

background:rgba(0,0,0,0.8);

color:WHITE;

font-size:125%;

display:block;

}

#mobile-top1 a

{

display:block;

margin-left:-1px;

color:#0088CC;

border-left:1px solid #E5E5E5;

text-decoration:none;

color:WHITE;

font-weight: bold;

}

#mobile-top1 a:hover

{

background:rgb(90,90,90);

}

#mobile-top1 li ul

{

position:relative;

padding:0;

margin:0;

list-style:none;

background:#E3FCFC;

display:none;

width:100%;

text-align:center;

}

#mobile-top1 li:hover ul

{

z-index:1000;

top:auto;

display:block;

}

#mobile-top1 li:hover li

{

border-top:1px solid #E5E5E5;

}

#mobile-top1 li:hover li a

{

border-top:1px solid #E5E5E5;

text-decoration:none;

color:WHITE;

font-size:70%;

font-weight: bold;

}

#mobile-top1 li:hover li ul

{

position:relative;

padding:0;

margin:0;

list-style:none;

background:#E3FCFC;

display:none;

width:100%;

text-align:center;

}

#mobile-top1 li:hover li:hover ul

{

z-index:1000;

top:auto;

display:block;

}

#mobile-top1 li:hover li:hover li

{

}

#mobile-top1 li:hover li:hover li a

{

border-top:1px solid #E5E5E5;

text-decoration:none;

color:WHITE;

font-size:70%;

font-weight: bold;

}

1