Сайт "Молодежный хор Brevis"

По желанию заказчика, в названии сайта «Молодежный хор Brevis» обязательно должно фигурировать слово «Brevis».

Таким образом, изучив все имеющиеся свободные варианты доменных имен, был выбран домен в зоне WS (Web Site). Этот домен подходит для различных по тематике сайтов, не привязывая к какому-либо определенному виду. В результате получилось краткое, лаконичное, запоминающееся название - brevis.ws.

Учитывая особенности структуры сайта, его объем (внушительный объем сайта получился из-за большой фотогалереи, а также аудиоархива хора), технологии реализации, был необходим хостинг, поддерживающий PHP 5, MySQL 5, с дисковым пространством не менее 90 MB. В результате этого, было решено воспользоваться платными услугами хостинг-провайдера Advanta.org. Наиболее оптимальным и приемлемым оказался тариф «Бизнес», предоставляющий дисковое пространство 100MB, а также следующие услуги:

неограниченное количество СубДоменов, FTP Аккаунтов, баз данных MySQL;

5 дополнительных доменов;

техническую поддержу по E-Mail, ICQ, на форуме;

POP3, SMTP;

неограниченное количество почтовых ящиков;

спам фильтры;

2 вида почтового Web-Интерфейса;

панель Управления Сайтом cPanel 11 PRO (Rus или En);

еженедельный BackUp Аккаунта на Второй Диск;

BackUp Данных Сайта и MySQL Пользователем;

персональный cgi-bin каталог;

PERL 5,PHP 5, SSI, WAP, Parser, CronJobs, PhpMyAdmin, Логи Ошибок, IP Блокиратор, Zend Optimizer, Менеджер Файлов, Доступ к Логам Сервера, Доступ к Файлу .htaccess, Парольная Защита Каталогов, Обработчики Apache (Handlers);

Анализатор Статистики (WebAlizer);

Круглосуточный Мониторинг Состояния Серверов;

Чат, Форум, Гостевая Книга;

Отсчет Времени, Счетчик Посещений, Электронный Магазин;

Система Прокрутки Баннерной Рекламы.

Корневой каталог сайта был перенесен по HTTP протоколу через предоставленную панель управления на хост в папку public_html.

Для корректного функционирования сайта выставлены следующие атрибуты:

для папок - CHMOD 755;

для файлов и изображений, скриптов - CHMOD 644;

для файла settings.php - CHMOD 444.

4.3 Регистрация в поисковых системах и каталогах

Поисковая машина (система) - программно-аппаратный комплекс, предназначенный для осуществления поиска в Интернете и реагирующий на запрос пользователя, задаваемый текстовой фразой, выдачей набора ссылок на страницы и сайты, соответствующего запросу (по мнению поисковой машины).

Поисковый робот - это программа, являющаяся составной частью поисковой машины, и предназначенная для обхода страниц Интернета с целью занесения их в базу поисковика. Порядок обхода страниц, частота визитов регулируется алгоритмами поисковой машины. Редактирование поиска можно с помощью файла robots.txt (хранящийся в корневом каталоге сайта), содержащего инструкции для поисковых роботов.

Для эффективной регистрации сайта в поисковых машинах сети Интернет необходимо осуществить соответствующую оптимизацию HTML кода (SEO). Для этого в файле рage.tpl.php были сделаны определенные записи (ключевые слова) в дескрипторах <meta>.

<meta name="keywords" content=" молодежный хор Brevis музыка искусство пение эстрада обучение минский государственный колледж искусств Беларусь хоровое творчество гастроли концерты дирижер Ольга Крипец" />

<meta name="robots" content="index, follow" />

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

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

По желанию заказчика, следуя задаче охватить целевую аудиторию не только зон RU и BY- нета, но и за их пределами, было решено зарегистрировать сайт в поисковых системах Yandex, Rambler, Yahoo, TUT.by, ALL.by, Google.

Заполнив соответствующие формы, предоставленные поисковиками, были указаны слова и выражения, максимально содержащие суть семантического ядра сайта: «молодежный хор Brevis, хор, музыка, минский государственный колледж искусств, хоровая культура Беларуси, гастроли, концерты, дирижер Ольга Крипец, эстрада, пение и т.д. ».

ЗАКЛЮЧЕНИЕ

В ходе дипломного проектирования был разработан информационный сайт, являющийся официальным представителем молодежного хора «»Brevis, функционирующего на базе Минского Государственного колледжа Искусств. Сайт размещен в сети Интернет по адресу: http://www.brevis.ws

Исходя из основных задач, была проведена детальная работа над структурой сайта, макетами web-страниц, навигацией по сайту, выполнена HTML-верстка. Шаблоны заполнены содержимым, в них внедрены динамические элементы и графическое наполнение, написаны PHP-скрипты и JavaScript-сценарии для реализации функциональных возможностей сайта.

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

Из всего вышесказанного можно отметить, что средствами CMF Drupal создан объемный функциональный сайт, содержащий уникальную информацию о белорусском хоровом коллективе, включая разностороннюю коллекцию фотографий и аудиоархив. Сайт будет полезен для учащихся хорового отделения МГКИ, абитуриентов, исследователей хоровой культуры Беларуси, для лиц, изучающих музыкальное творчество молодого поколения музыкантов.

Своевременность и необходимость создания данного сайта подтверждена актом о внедрении материалов web-разработок в учебном процессе Минского Государственного колледжа Искусств.

Сайт создан с целью дальнейших перспектив и совершенствования. Со временем возможны следующие видоизменения и дополнения:

обновление фотогалереи;

добавление новых аудиофайлов;

разработка видеоархива;

обновление тем для голосований;

реализация гостевой книги;

регулярное обновление и актуализация содержимого;

принятие участия в партнерских программах.

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

Д.Вандюк, М.Вестгейт, CMS Drupal руководство по разработке системы управления сайтом. Москва-Спб-Киев, 2008.

Д.Кирсанов. Веб-дизайн. Спб: Символ-Плюс, 1999.

Л.Миронова. Основы цветоведения. Мн., «Вышэйшая школа», 1984.

http://www.drupal.ru

http://www.setegnom.com

http://www.advanta.org

http://www.frod.ru/optim/2.htm

http://www.ifont.ru

http://www.ru.wikipedia.org/wiki/Хостинг

http://www.hostingmaster.ru/content/blogcategory/16/34/

ПРИЛОЖЕНИЕ №1

Пример №1. page.tpl.php

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title><?php print $head_title ?></title>

<?php print $head ?>

<?php print $styles ?>

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="<?php print base_path(). path_to_theme(); ?>/iestyles/ie6.css" />

<![endif]-->

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="<?php print base_path(). path_to_theme(); ?>/iestyles/ie7.css" />

<![endif]-->

<?php print $scripts ?>

</head>

<body>

<div id="utilities">

<?php print $search_box ?>

</div>

<div id="page">

<div id="header"> </div>

<div class="content">

<div id="primary" style=<?php print '"width:'.marinelli_width( $left, $right).'px;">' ?>

<div class="singlepage">

<?php print $breadcrumb; ?>

<?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>

<?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>

<?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>

<!--<div class="drdot"></div>-->

<?php print $content ?>

</div> </div>

<?php print $left ?>

</div><?php } ?>

<?php if ($right) { ?><div class="rsidebar"> <?php print $right ?>

</div><?php } ?>

<div class="clear"></div>

</div>

<br class="clear" />

</div>

<div id="footer">

<?php //print $footer ?>

<?php print $footer_message ?>

</div>

<?php print $closure ?>

</body>

</html>

Пример №2. node.tpl.php

<?php if ($picture) {

print $picture;

}?>

<div class="node<?php if ($sticky) { print " sticky"; } ?>

<?php if (!$status) { print " node-unpublished"; } ?>">

<?php if ($page == 0) { ?><h2 class="nodeTitle"><a href="<?php print $node_url?>">

<?php print $title?></a>

<?php global $base_url;

if ($sticky) { print '<img src="'.base_path(). path_to_theme().'/img/sticky.gif" alt="sticky icon" class="sticky" />'; } ?>

</h2><?php }; ?>

<?php if (!$teaser): ?>

<?php if ($submitted): ?>

<div class="metanode">

<p><?php print t('By ') .'<span class="author">'. theme('username', $node).'</span>' . t(' - Posted on ') . '<span class="date">'.format_date($node->created, 'custom', "d F Y").'</span>'; ?></p> </div>

<?php endif; ?>

<?php endif; ?>

<div class="content"><?php print $content?></div>

<?php if (!$teaser): ?>

<?php if ($links) { ?><div class="links"><?php print $links?></div><?php }; ?>

<?php endif; ?>

<?php if ($teaser): ?>

<?php if ($links) { ?><div class="linksteaser"><div class="links"><?php print $links?></div></div><?php }; ?>

<?php endif; ?>

<?php if (!$teaser): ?>

<?php if ($terms) { ?><div class="taxonomy"><span>Tags</span> <?php print $terms?></div><?php } ?>

<?php endif; ?>

</div>

Пример №3. block.tpl.php

<div class="defaultblock">

<h2><?php print $block->subject; ?></h2><!--block title-->

<div class="blockcontent"><?php print $block->content; ?></div>

</div>

Пример №4. comment.tpl.php

<div class="comment<?php if ($comment->status == COMMENT_NOT_PUBLISHED) print ' comment-unpublished'; ?>">

<?php if ($picture) {

print $picture;

} ?>

<div class="commentTitle"><?php print $title; ?></div>

<div class="submitted"><?php print $submitted; ?></div>

<div class="content"><?php print $content; ?></div>

<div class="firma">

<?php print $signature ?>

</div>

<div class="links"><?php print $links; ?></div>

</div>

Пример №5. gallery.js (выборочная функция)

function show_pic1() {

var new_Window;

new_Window=window.open('','','statusbar=yes, menubar=yes, scrollbar=yes, left=200, top=0, width=670, height=500');

new_Window.document.write('<html>');

new_Window.document.write('<head><title></title></head>');

new_Window.document.write('<body align="center" topmargin="0">');

new_Window.document.write('<table align="center" border="0"><tr><td><img src="image/our_life1b.jpg"></td></tr></table>');

new_Window.document.write('</body></html>');

new_Window.document.close();

}

ПРИЛОЖЕНИЕ 2

Пример №1

Таблица стилей styles.css

img {border: 0;}

.text_left{float: left;text-align: left;clear: both;}

body {font-family: tahoma;line-height:19px; font-size: 13px; color: #333; letter-spacing:1px; background: #EDEDED url(img/body.gif); text-align: center; margin: 40px 0 20px 0;}

#center {text-align: center;}

#hand{cursor: hand;}

.bg{background:url(img/bgblock.gif) repeat-x; width:auto; border: 1px solid white; margin-right: 8px; padding-left: 10px; padding-right: 15px; }

.bg_small{ background:url(img/bgblock.gif) repeat-x; width:auto; height:auto; border: 1px solid white; }

.bg ol{font-size: 14px;}

.categor_gallery{width: 550px; text-align: center;}

.categor_gallery tr{margin-top: 5px; }

.categor_gallery td{padding: 10px;}

.categor_gallery img{border: 13px solid #E0E2E7;}

.greenblock{width: 226px; float: left; margin-left: 12px;}

#greenhead{background:url(img/flag3.gif) no-repeat; padding-left: 15px; border: none; width: 226px; }

#greenbody{background:url(img/greenblock.gif) no-repeat; width: 226px; height:260px; padding-right: 10px; padding-left: 10px; text-align: left; font-size: 16px; border: none;}

.blueblock {width: 226px; float: left; margin-left: 12px;}

.redblock{width: 226px; float: left; margin-left: 5px;}

#bluehead{background: url(img/flag.gif) no-repeat; padding-left: 15px; border: none;}

#bluebody{background: url(img/blueblock.gif) no-repeat; height: 260px; padding-right: 10px; padding-left: 10px; text-align:left; font-size: 15px; border: none;}

#redhead{ background:url(img/flag2.gif) no-repeat; padding-left: 15px; border: none; width: 226px;

}

#redbody{background:url(img/redblock.gif) no-repeat; width: 226px; height:260px; padding-right: 10px; padding-left: 10px; text-align: left; font-size: 15px; border: none;}

.flag{background:url(img/flag3.gif) no-repeat; width: 700px; color: white; font-weight: bold; padding-left: 5px; margin-top: 15px; margin-bottom: 10px; float: left; }

.flag2{background:url(img/flag2.gif) no-repeat; width: 700px; color: white; font-weight: bold; padding-left: 10px; margin-bottom: 10px; margin-top:15px; float: left; clear: both;}

.flag3{background:url(img/flag.gif) no-repeat; width: 700px; color: white; font-weight: bold; padding-left: 10px; margin-bottom: 10px; margin-top:15px; float: left; clear: both;}

.vypusk td{padding: 5px 0 5px 5px; border-top: 1px solid #cccccc; vertical-align: top; }

#white{color: white; font-weight: bold;}

#white a:hover{color: #FFFF99;}

.flag_big{background:url(img/flag3.gif) repeat-x; margin-bottom: 15px; color: white; margin-top: 15px; font-weight: bold; padding-left: 10px; padding-right: 10px; float: left; clear: both; }

.flag2_big{background:url(img/flag2.gif) repeat-x; margin-bottom: 15px; margin-top: 15px; color: white; font-weight: bold; padding-left: 10px; padding-right: 10px; float: left; clear: both;}

.flag3_big{background:url(img/flag.gif) repeat-x; margin-bottom: 15px; margin-top: 15px; color: white; font-weight: bold; padding-left: 10px; float: left; clear: both;}

table{border-top: none; }

.gallery{width:auto; float: left; text-align: center; margin-left: 25px; margin: 0 0 30px 30px; font-size:13px; color:#666666;}

.gallery img{border: 13px solid #E0E2E7; padding:10px; cursor: hand;}

.photo_conteiner b{margin-bottom: 5px;}

.photo_conteiner{float: left; margin:5px 3px 5px 5px; width: auto; text-align: center; }

#gray_box{border: 1px solid red; background: url(img/bgblock.gif) repeat-x top; width: auto;}

.ped{float: left; margin:5px 0 5px 0; width: auto; text-align: center; padding: 0;}

.photo_ped{ border: 13px solid #E0E2E7; }

.ped_left{float: left; margin:0; width: auto; text-align: left;}

.photo{margin: 5px 5px 5px 10px; float: left; }

.photo img{ border: 13px solid #E0E2E7; }

.photo_hand{margin: 5px 5px 5px 10px; float: left; cursor: hand;}

.photo_hand img{ border: 13px solid #E0E2E7;}

.up{float: right; clear: both; text-align:center; }

.up a{color:#333399;}

.map{vertical-align:text-top; width: 700px; text-align:center; margin-left: 10px;}

.map tr{border-top: 1px solid #D1D1D1; }

.map_link{color:#003399; font-weight: bold;}

li a.active {color: #FF6600; font-weight: bold;}

.path p span{font: bold 0.75em tahoma; padding: 5px; background:#e1e0e0; margin-right:10px;}

#utilities input.form-submit{ border:none; font-weight: bold; font-size: 11px; background:#FF6600;margin:10px 4px 0px 4px; color:#ffffff; padding: 1px 4px 1px 4px;}

#utilities input.form-text{font-size:0.75em; font-weight: bold; background:#054B81; border:none;

color:white; padding:2px;}

#page {background: white; text-align: left; margin: 0px auto; position: relative;width: 970px; border:12px solid #054b81;}

* html #page { width: 970px; } /* IE hack */

#utilities { padding: 0; margin: 0px auto; width:970px; height:25px; position:relative; }

#header { padding: 0; margin: 0; height: 180px; border-bottom: 12px solid #054b81; background: url(img/head.jpg) no-repeat 0px 0px; position:relative;}

.main_title { text-align: center; font-size: 18px;}

#main_title{ text-align: center; }

.blockcontent li{ font-size: 13px; text-align:justify; list-style:square; margin-left: 20px; }

.menu li{ font-size: 13px; }

.path{padding-bottom:3px; width: 100%; }

.desc{ width: 160px; }

label{ font-size: 13px; }

#edit-name{width: 700px; background:#F4F4F4; }

#edit-mail{ width: 700px; background:#F4F4F4; }

#edit-subject{ width: 700px; background:#F4F4F4; }

#edit-message{ width: 700px; background:#F4F4F4; }

#primary { float: left; margin: 0 5px 0 8px !important; margin: 0 5px 0 4px; padding-left:7px; }

#primary .singlepage { text-align: left; margin: 0; padding:0 0 15px 4px; background-color:#FFFFFF; }

#utilities form { position:absolute; right:0; bottom:2px; }

rsidebar{ margin-top:0; padding-top: 39px; width: 200px; float: left; margin-left:8px!important;

margin-left:10px}

.defaultblock{ background: url(img/bgblock.gif) repeat-x top; padding:5px 10px 20px 5px ; margin-right: 15px; margin-left: -5px; width: auto; height: auto;}

.defaultblock .blockcontent{ font-size: 13px; margin:0 0 10px 0; }

.defaultblock p{ padding-left: 5px; font-size: 13px; }

.blockcontent b{ font-size: 13px; color:#FF6600; }

.blockcontent font{ font-size: 13px; }

#primary .node .content h1 a,#primary .node .content h2 a,#primary .node .content h3 a,#primary .node .content h4 a,#primary .node .content h5 a,#primary .node .content h6 a{font-family:tahoma;font-weight:normal;color:#333;letter-spacing:-1.2px;text-align:left;text-transform:none;margin:10px 0 15px 0;padding:0;}

#footer { width: 970px; margin: 0 auto; padding:15px 0; text-align: center; color:#FFFFFF; background:none; font-size:11px; font-weight:normal; }

#footer a:hover{text-decoration: none;}

.node .content a{text-decoration:none;font-weight:normal; color:#666699;}

.node .content a:hover{color:#FF6600;}

.defaultblock a:hover{text-decoration:none; color:#FF6600;}

strong{ color:#666666; }

.rsidebar ul.menu li{padding: .15em 0 .15em 1.5em; list-style-type: none; list-style-image: none;

background: transparent url('img/leaf.gif') no-repeat; }

.poll_title{ font-weight: bold; color: #FF6600; text-align: center; }

#primary .singlepage .search-results dt{font-size:12px; background:url(img/result.gif) no-repeat;

margin-top:10px;background-color:#F2F2F2;}

#primary .singlepage .search-results p{font-size:10px;}

#primary .singlepage .search-results p strong{ background: #FFFF99}

#primary .singlepage .search-results p.search-info{font-style:italic;}

Размещено на www.allbest.