- •Выпускная квалификационная работа бакалавра Морошкина Андрея Викторовича
- •Проектирование и разработка мобильной версии сайта для новостного портала
- •Задание на выпускную квалификационную работу бакалавра
- •Факультет прикладной математики и информатики
- •План-график выполнения работы
- •18 Марта 2015 г.
- •1. Постановка задачи
- •2. Понятие мобильного сайта
- •3. Осовные типы мобильных сайтов
- •3.1. Адаптивный дизайн
- •3.2. Отдельная мобильная версия сайта
- •4. Обзор и анализ прочих мобильных сайтов
- •5. Создание прототипа
- •6. Разработка мобильной версии сайта
- •7. Заключение
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;
}
