Розділ №4. Індивідуальне завдання
4.1. Постановка задачі
Створити сайт для компанії ТОВ “Пегас-СК” .
4.2. Розробка системи
Для виконання індивідуального завдання, необхідно створити сайт до компанії в якій відбувалось проходження практики.
Сайт або веб-сайт (від англ. website, місце, майданчик в інтернеті) — сукупність веб-сторінок, доступних у мережі (Інтернеті), які об'єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.
Сайтом також називають вузол мережі Інтернет, комп'ютер, за яким закріплена унікальна ІР-адреса, і взагалі будь-який об'єкт в Інтернеті, за яким закріплена адреса, що ідентифікує його в мережі (FTP-site, WWW-site тощо).
В цілому, не існує будь-якої стандартної чітко обумовленою класифікації сайтів. Поділяти сайти на типи почали самі розробники, а також досвідчені відвідувачі сайтів. Останнім часом, проте, навіть такий розподіл на типи втрачає свою актуальність, оскільки дуже важко окреслити межі будь-якого конкретного сайту: ресурс може бути одночасно інформаційним, інтернет-магазином і малої соціальною мережею або одночасно поєднувати в собі кілька інших типів.
Спробуємо все ж виділити основні різновиди сайтів і опишемо кожну з них більш докладно.
представницькі сайти — сайти, що містять основну або детальну інформацію про компанію чи людину;
інформаційні сайти — ресурси, на котрих розміщується тематична інформація чи відомості про новини;
тимчасові сайти — сайти, котрі створюються на короткий проміжок часу;
каталоги та інтернет-магазини — каталоги продукції компанії, в окремих випадках, з можливістю придбання її через інтернет;
форуми та соціальні мережи — площадки для спілкування і обміну інформаціею між людьми, які пов’язані спільними інтересами;
Для написання сайту є спеціальні програми, але я вирішив зробити сайт самостійно використовуючи свої знання таких мов як: html, CSS, JavaScript, jquery.
Веб-сайти створюються у кілька етапів: 1. Планування — визначення тематики і призначення майбутнього сайта. 2. Розробка — розробка структури сайта, добір матеріалів, вибір програмних засобів для його створення. 3. Створення окремих сторінок відповідно до структури, включення до них гіперпосилань. 4. Тестування — перевірка та редагування веб-сайта. 5. Розміщення — розміщення сайта в Інтернеті. 6. Підтримка — оновлення вмісту сайта.
Планування
Плануванням мені майже не довелось займатись, оскільки у компанії є свій сайт(Рис.4.1.), але моїм завданням було залишити головне, тому що, оригінальний сайт дуже насичений інформацією.
Рис.4.1. Головна сторінка сайту компанії.
Розробка
Для
створення сайту я обрав програму
Notepad++(Рис.4.2.).
Програма є безкоштовною і дуже зручною,
перш за все, через виділення коду.
Рис.4.2. Вигляд програми Notepad++.
Каркас програми я почав писати на html 4.1.
HTML (англ. HyperText Markup Language — Мова розмітки гіпертекстових документів) —стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.
Каркас сайту до однієї зі сторінок сайту:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Сайт</title>
<meta name="keywords" content="Пегас-СК, Склад, Оптова купівля">
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="accordeon.css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "templatemo_menu",
orientation: 'h',
classname: 'ddsmoothmenu',
contentsource: "markup"
})
</script>
<script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
<body>
<div id="templatemo_body_wrapper">
<div id="templatemo_wrapper"><span id="templatemo_wrapper_top"></span>
<div id="templatemo_header">
<div id="site_title"><a href="#">ТОВ ПЕГАС-СК</a></div>
<div id="templatemo_menu" class="ddsmoothmenu">
<ul>
<li><a href="index.html" class="selected">Головна</a></li>
<li><a href="Subsections.html">Підрозділи</a>
<ul><li><span class="top"></span><span class="bottom"></span></li>
<li><a href="#submenu1">Львів</a></li>
<li><a href="#submenu2">Київ</a></li>
<li><a href="#submenu3">Одесса</a></li>
<li><a href="#submenu3">Харьків</a></li>
</ul>
</li>
<li><a href="#submenu1">Компанія</a>
<ul><li><span class="top"></span><span class="bottom"></span></li>
<li><a href="Brend.html">Бренди</a></li>
<li><a href="#submenu2">Контакти</a></li>
<li><a href="#submenu3">Умови співпраці</a></li>
</ul>
</li>
<li><a href="price.html">Прайс</a></li>
<li><a href="#">Контакти</a></li>
</ul>
<br style="clear: left" />
</div> <!-- Кінець меню -->
</div>
<div id="templatemo_slider">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/slider/01.jpg" alt="Slider 01" title="Phasellus lobortis malesuada luctus." />
<a href="#"><img src="images/slider/02.jpg" alt="Slider 02" title="Cras fringilla libero et lacus pellentesque mattis. " /></a>
<img src="images/slider/03.jpg" alt="Slider 03" title="Proin vel dolor ut neque pulvinar laoreet sed blandit sapien." />
<img src="images/slider/04.jpg" alt="Slider 04" title="Aenean sit amet turpis a ipsum vulputate laoreet non ac nisl." />
<img src="images/slider/05.jpg" alt="Slider 05" title="Nunc nec elit sed libero rutrum ullamcorper et a lectus." />
</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
<div id="templatemo_main">
<div class="col col23">
<h2>Вітаємо вас на сайті</h2>
<p><em>Компанія ETK - пропонує купити побутову техніку оптом</em></p>
<p>Корпоративні та оптові клієнти по всій Україні, можуть купити побутову техніку оптом, в необмеженій кількості, за найкращими оптовими цінами.</p>
<p>Сьогодні, ми забезпечуємо оптові поставки побутової техніки, холодильників, пральних машин, телевізорів, аудіо / відео, домашніх кінотеатрів, CD магнітол і музичних центрів, DVD програвачів.</p>
<div class="cleaner h40"></div>
<h3>Акційні товари</h3>
<img src="images/_image_01.jpg" alt="" class="img_fl img_border" />
<h4>Окуляри LG AG-F330</h4>
<p>Використовуйте дитячі 3D-окуляри LG AG-F330 для перегляду 3D-контента на телевізорах LG Cinema 3D.
Технологія Cinema 3D відрізняється найширшим кутом огляду по горизонталі і дозволяє всім вашим рідним і друзям розташуватися навколо екрану разом.</p>
<div class="cleaner h40"></div>
<img src="images/_image_02.jpg" alt="" class="img_fl img_border" />
<h4>Праска BOSCH TDA 2630</h4>
<p>Потужність 2000 Ватт. Підошва Palladium-glissée з каналами для пари та розмежуванням на 3 зони. Вузький "носик". Постійний пар 25 г / хв. Паровий удар 90 г / хв. Вертикальний пар. Регулятор подачі пари (0/1/2). Безступінчатий регулятор температури. Cистема автоотключения "auto-shut-off. Капля-стоп. Інтегрована потрійна система 3AntiCalc проти утворення накипу і з функцією самоочищення (self-clean, calc 'n clean + аnti-calc system). Довгий кабель - 1.8 м - з фіксатором. Велика прозора ємність для води (0.29 л) - легко й швидко наповнювати. Світлодіодна індикація при роботі (LED-control). Функція спрей, чаша для води.</p>
</div>
<div class="col col13 no_margin_right">
<h2>Каталог товарів</h2>
<p><em>Товари в каталазі ви можете замовити
в відділенні м.Київ.</em></p>
<div class="container">
<div class="main clearfix">
<!-- Левый блок -->
<div class="column">
<ul class="menu collapsible">
<li><a href="#">Аудио/відео тех.</a>
<ul class="acitem">
<li><a href="#">HD-програвачі</a></li>
<li><a href="#">Відеокамери</a></li>
<li><a href="#">Домашні кінетеатри</a></li>
<li><a href="#">Музичні центри</a></li>
<li><a href="#">Програвачі DVD</a></li>
<li><a href="#">Телевізори LED</a></li>
<li><a href="#">3D окуляри</a></li>
</ul>
</li>
<li><a href="#">Вбудована техніка</a>
<ul class="acitem">
<li><a href="#">Газові поверхні</a></li>
<li><a href="#">Електричні поверхні</a></li>
<li><a href="#">Індукційні поверхні</a></li>
<li><a href="#">Посудомийні машини</a></li>
<li><a href="#">Витяжки</a></li>
<li><a href="#">Мікрохвильові печі</a></li>
<li><a href="#">Холодильники</a></li>
<li><a href="#">Кондиціонери</a></li>
<li><a href="#">Аксесуари</a></li>
</ul>
</li>
<li><a href="#">Велика побутова техніка</a>
<ul class="acitem">
<li><a href="#">Газові плити</a></li>
<li><a href="#">Електричні плити</a></li>
<li><a href="#">Посудомийні машини</a></li>
<li><a href="#">Пральні машини</a></li>
<li><a href="#">Холодильники</a></li>
</ul>
</li>
<li><a href="#">Дрібна побутова техніка</a>
<ul class="acitem">
<li><a href="#">Аксесуари ДПТ</a></li>
<li><a href="#">Блендери</a></li>
<li><a href="#">Ваги</a></li>
<li><a href="#">Випрамлячі волосся</a></li>
<li><a href="#">Зволодувачі</a></li>
<li><a href="#">Кавоварня</a></li>
<li><a href="#">Кавомолка</a></li>
<li><a href="#">Водонагрівачі</a></li>
<li><a href="#">Газові водонагрівачі</a></li>
<li><a href="#">М'ясорубки</a></li>
<li><a href="#">Ломтерізки</a></li>
<li><a href="#">Міксери</a></li>
<li><a href="#">Мультиварка</a></li>
<li><a href="#">Пароварки</a></li>
<li><a href="#">Мікрохвильові печі</a></li>
<li><a href="#">Пилососи</a></li>
<li><a href="#">Плойки</a></li>
<li><a href="#">Подрібнювачі</a></li>
<li><a href="#">Праска</a></li>
<li><a href="#">Соковижималка</a></li>
<li><a href="#">Сушилка для продуктів</a></li>
<li><a href="#">Тостери</a></li>
<li><a href="#">Тримери</a></li>
<li><a href="#">Фени</a></li>
<li><a href="#">Хлібопічка</a></li>
<li><a href="#">Чайники</a></li>
<li><a href="#">Кавомашина</a></li>
<li><a href="#">Конвектори</a></li>
<li><a href="#">Обігрівачі</a></li>
<li><a href="#">Кухонні комбайни</a></li>
<li><a href="#">Посуд</a></li>
<li><a href="#">Тепловентилятори</a></li>
</ul>
</li>
</ul>
</div>
<!-- Конец левого блока -->
</div>
</div>
<div class="cleaner h40"></div>
<div id="newsletter">
<h4>Пошук</h4>
<p>В процесі розробки</p>
<form action="#" method="get">
<input type="text" value="Введіть товар" name="keyword" id="keyword" title="keyword" onfocus="clearText(this)" onblur="clearText(this)" class="txt_field" />
<input type="submit" name="Subscribe" value=" Пошук" alt="Subscribe" id="subscribe_btn" title=" Subscribe " class="subscribe_btn" />
<div class="cleaner"></div>
</form>
<div class="cleaner"></div>
</div>
</div>
<div class="cleaner"></div>
</div>
</div>
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
Пегас-СК © 2010. Все права защищены
</div>
</div>
</div>
<script src="accordeon.js" type="text/javascript"></script>
</body>
</html>
Після чого нам потрібно створити таблицю стилів CSS
Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних.
Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.
CSS використовується авторами та відвідувачами веб-сторінок, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).
Приклад CSS коду, який використовується в сайті:
body {
margin: 0;
padding: 0;
color: #444444;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
background-image: url(../images/templatemo_main_bgr.jpg);
background-repeat: repeat-y;
background-position: center;
}
h1, h2, h3, h4, h5, h6 {
color:#000;
letter-spacing:-1px;
font-weight:400;
padding: 0;
margin: 0;
}
Для додаткових ефектів на сайті використовується JavaScript та jQuery. А саме таких як:
Перехід та перелистування фото (Рис.4)
Рис 4 Зміна фото.
Випадаючий список в меню(Рис.4).
Рис.4 Вападаючий список.
JavaScript (JS) — динамічна, об'єктно-орієнтованa мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта (такому, що виконується на пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки. Мова JavaScript також використовується для програмування на стороні серверу (подібно до таких мов програмування, як Java і C#), розробки ігор, стаціонарних та мобільних додатків, сценаріїв в прикладному ПЗ (наприклад, в програмах зі складу Adobe Creative Suite), всередині PDF-документів тощо.
jQuery — популярна JavaScript-бібліотека з відкритим сирцевим кодом. Вона була представлена у січні 2006 року у BarCamp NYC Джоном Ресіґом (John Resig). Згідно з дослідженнями організації W3Techs, JQuery використовується понад половиною від мільйона найвідвідуваніших сайтів. jQuery є найпопулярнішою бібліотекою JavaScript, яка посилено використовується на сьогоднішній день.
Створення окремих сторінок відповідно до структури, включення до них гіперпосилань.
Після створення першої сторінки(Рис.4.3.), я почав створювати інші по каркасу і стилю першої(Рис.4.4.)
Рис. 4.3. Головна web сторінка.
Рис.4.4. Web сторінка “Підрозділи”.
Тестування
Для тестування сайту я скористався допомогою друзів, знайомих та керівника практики. Після оцінки та порад, я зробив виправлення на сайті.
Тестування (англ. Testing) — це процес технічного дослідження, призначений для виявлення інформації про якість продукту відносно контексту, в якому він має використовуватись.
У процесі створення сайту, на етапі розробки, дуже важливо перевірити працездатність сайту перед його розміщенням на хостингу. Для перевірки працездатності сайту проводиться спеціальне тестування. Що ж включає тестування сайту?
Під час тестування сайт перевіряється на відповідність технічному завданню, перевіряються його технічні характеристики. Залежно від вихідного технічного завдання в процесі тестування можуть здійснюватися такі перевірки:
перегляд сайту на різних моніторах. Перегляд сайту на моніторах різних розмірів і при різному дозволі дозволяє оцінити як буде виглядати дизайн сайту на комп'ютерах потенційних відвідувачів: чи з'являється горизонтальна смуга прокручування на маленьких екранах, чи не зміщаються елементи при різному дозволі й т.д.
перегляд сайту в різних бразузерах. Перегляд сайту в різних інтернет-браузерах і їхніх версіях, дозволяє перевірити кросбраузерність сайту;
перевірка часу завантаження сайту на різній швидкості інтернет-підключення. Як швидко завантажуються сторінки сайту на мінімальній і на максимальній швидкості підключення;
перевірка працездатності гіперпосилань на сайті. Є чи на сайті «биті» посилання або посилання, що ведуть не на ті сторінки. Після виявлення таких посилань їх необхідно усунути або виправити;
перевірка коректного відображення кольорів на сайті при різних настроюваннях колірної палітри монітора. Дозволяє довідатися, як будуть відображені кольори сайту на моніторах потенційних відвідувачів;
перевірка відображення шрифтів, анімації й графічних зображень. Дозволяє знайти й усунути можливі проблеми із правильним відображенням зображень, анімаційних роликів і шрифтів на сайті;
перевірка властивостей кожної сторінки сайту: заголовків, ключових слів, описи або інших мета-тегів;
перевірка змісту кожної сторінки на відповідність вихідним матеріалам замовника й перевірка правопису на кожній сторінці.
Крім того, сайт важливо протестувати на сервері. Для цього сайт завантажується на сервер, де він багаторазово перевіряється за вищеописаними критеріями.
Для проведення різних перевірок при тестуванні сайту існує безліч спеціальних програмних інструментів. Наприклад, HTML-валідатори перевіряють html-код сторінок сайту на відповідність стандартам мови HTML. А аналізатори непрацездатних (битих) посилань і зображень, наприклад, Semonitor, дозволяють автоматизувати процес перевірки сайту на працездатність гіперпосилань і коректне відображення картинок, фотографій і т.д.
Розміщення
Для розміщення сайту в інтернеті, я скористався безкоштовним хостінгом hostinger(Рис. 4), він є дуже зручним у використанні.
Хо́стинг (англ. hosting) — послуга, що надає дисковий простір для розміщення фізичної інформації на сервері, що постійно перебуває в мережі (наприклад Internet).
Після створення акаунту на сервісі, можна помістити свою сторінку в мережу. Для свого сайту я обрав створений заздалегідь аккаунт з адресою http://fastgames.esy.es(Рис.4)
Рис.4. Сайт hostinger.
Рис.4 Мій сайт в мережі за адресою http://fastgames.esy.es/index.html
Підтримка
Складові ефективної підтримки сайту
Супровід сайту включає в себе комплекс заходів, реалізація яких дозволяє регулярно розвивати ваш веб-проект і забезпечувати якісну комунікацію з клієнтами, а також сприяє зростанню його конверсії.
1. Технічна підтримка сайтів
Обслуговування сайту включає контроль стабільності функціонування сайту, забезпечуючи його від зломів, вірусів і тривалих збоїв. Також наші програмісти за бажанням клієнта підключають нові модулі, а також додають нові розділи і сторінки на сайт.
Служба підтримки сайтів дозволяє своєчасно реагувати на зміни пошукових алгоритмів, вносити необхідні зміни для покращення індексації веб-проекту, завдяки чому підтримується хороша видимість сайту в Google і Яндекс.
2. Графічна підтримка
Обслуговування сайтів включає в себе комплекс роботи з графічним наповненням сайту. Це можуть бути як дрібні зміни в дизайні сторінок, так і розробка банерів, нових кнопок, іконок, шрифтів, або підбір нових візуальних матеріалів для каталогу, блогу, новин сайту. Крім цього, за запитом клієнта наші фахівці можуть розробити ілюстрації для сайту, а також глобальний редизайн веб-проекту.
3. Оновлення сайту
Написання нових текстів, публікація статей, фотографій, відео-матеріалів - все це входить в супровід сайту. Ведення корпоративного блогу компанії також належить до даного типу послуги. Навіть у тому випадку, якщо рід вашої діяльності не має на увазі яскраво-виражену динаміку змін, необхідно коригувати і доповнювати існуючий на сайті контент, а інакше може скластися враження, що проект заморожений і ніхто їм не займається.
Після кожної зміни в сайті, я роблю зміни і в інтернеті. Для зміни даних на сайті є багато програм, але я використовую програму FileZilla(Рис. 4).
Рис. 4 робоче вікно програми FileZilla.