Розробка сайту 'Портал Новин' як віртуальна подія в інформаційному суспільстві
Міністерство
освіти і науки України
Школа
Комп'ютерної
Майстерності
Дипломна
робота
на
тему: “Розробка сайту "Портал Новин" як віртуальна подія в
інформаційному суспільстві”
Виконала учениця
групи 2007-3 П'янтковська Н.О.
Керівник Латишева О.Л.
Кривий
Ріг, 2011
План
Вступ
Розділ 1. Новинний портал. Види
сайтів, види «віртуальних подій»
.1 Сайт-візитка
.2 Сайт-магазин
1.3 Портал новин
.4 Соціальна мережа
Розділ 2. HTML
та CSS
- основа шаблону сайту та стилю оформлення
Розділ 3. Реалізація проекту
.1 Структура та вибір дизайну
Література
Введення
У процесі життя людини рівень її
свідомості виражався в моделюванні як творчості. У суспільстві поступово
розвивалася творчість від матеріальних об'єктів до інформаційних.
При появі нових технологій на перших
порах вони зазвичай були спрямовані на те, щоб спрощувати і полегшувати
існування людини в тій реальності, модель якої відповідає, її уявленню. Але
потім на новому етапі технології виходять за межі суто практичної допомоги - і
тоді походить черговий культурний «вибух», зміна - парадизм. Так, вдосконалення
технологічної бази наукових вишукувань зростає до новітніх відкриттів у
відповідній області.
Суспільства, в яких моделювалися
матеріальні об'єкти:
. Первіснообщинний
.Рабовласницьке
. Феодальне
. Індустріальне
На даному етапі розвитку,
суспільство прийшло до створення культурного простору нового виду. Це
суспільство відрізняється від матеріального глобальністю відмінності матерії та
інформації.
У наш час комп'ютери давно вже не
сприймаються масовою свідомістю лише як машини, що прискорюють і спрощують
деякі технічні процедури. Сьогодні світ переживає нову могутню революцію,
здатну принципово змінити життя людей - їх роботу, дозвілля, способи об'єднання
в співтовариства і навіть ставлення до самих себе. На відміну від попередніх
технологічних революцій, заснованих на матерії і енергії, ця фундаментальна
зміна зачіпає наше розуміння часу, простору, відстані і знання. В основі
інформаційної революції лежить вибуховий розвиток інформаційних технологій
(IT), різноманітність і можливість, вживання яких лімітовані лише
винахідливістю самої людини. Сьогодні стала очевидною перевага інформаційної
складової діяльності людей над всіма іншими її формами і компонентами. Стався
інформаційний скачок, зміна світобачення - і в цьому, по-новому розуміючому
світі, комп'ютер - помічник перетворився ще й у комп'ютер - вікно, крізь яке
можна заглянути в незнайому реальність. Сучасне суспільство наповнене і
пронизане потоками інформації, які потребують обробки, що характеризує процес
інформатизації.
Інформатизація суспільства -
це глобальний соціальний процес, особливість якого полягає в тому, що
домінуючим видом діяльності в сфері суспільного виробництва є збір,
накопичення, продукування, обробка, зберігання, передача та використання
інформації, здійснювані на основі сучасних засобів мікропроцесорної та
обчислювальної техніки, а також на базі різноманітних засобів інформаційного
обміну.
Основні риси сучасних ІТ:
· комп'ютерна обробка
інформації по заданим алгоритмам;
· зберігання великих
обсягів інформації на машинних носіях;
· передача інформації
на значні відстані в обмежений час.
Як відомо, людині доступні три
простору - об'єктивний простір - це зовнішній світ, фактично це світ за
межами нашого тіла, суб'єктивний простір - це наша свідомість, це всі
наші відчуття, представлені в дану конкретну секунду і віртуальний простір
- це наш внутрішній світ, наша "підсвідомість".
За кілька десятиліть світ
змінився кардинально. Якщо раніше людське життя протікало в тривимірній системі
координат, що визначає чотиривимірний простір, то зараз простір як мінімум
п’ятивимерний і в системі координат до часу і протяжності додалася нова
координата, що відмірюють біти. Людина почала спілкуватись та відтворювати
“нитки спілкування” у віртуальному просторі, завдяки таким можливостям з'явився
ще один засіб спілкування - так зване віртуальне спілкування. Це спілкування з
віртуальним співрозмовником у віртуальному просторі за допомогою електронних
засобів.
Сьогодні можна мати доступ до
мільйонів документів, натиснувши кілька разів на кнопку "миші".
Інтернет дав змогу людині значно розширити межі свого спілкування. Слід
зазначити, що Інтернет сприяє розвитку особистості і включення її у процес
спілкування навіть тоді, коли в реальному житті людина може мати певні бар'єри
для спілкування. Інтернет об’єднує реальне і віртуальне середовище за допомогою
Інтернету - одиниць - сайтів.
Створення сайтів та розкрутка
- це робота по організації Інтернет-простору, спрямована на залучення великої
кількості цільових відвідувачів, зростання популярності товарів і послуг,
множення числа продажів і прибутків. Створення сайтів та розкрутка виробляються
відпрацьованими методами і в більшості випадків забезпечують 100% бажаний
результат.
Інтернет існує вже кілька десятиліть
і за цей час від невеликої локальної мережі доріс до всесвітньої павутини, яка
увібрала в себе, наче губка, всю доступну інформацію. Сьогодні працюють десятки
мільярдів сайтів будь-яких видів і тематик. І більшість з них знаходяться на
задвірках Інтернету, залишаючись відомими лише для невеликої групи постійних
відвідувачів.
Розділ 1. Новинний
портал. Види сайтів, види «віртуальних подій»
У наш час, високих технологічних
рішень і винаходів, слова: комп'ютер, Інтернет, електронна пошта для багатьох
людей стали невід'ємною частиною життєвого процесу. У той же час виникає
проблема впливу інформаційних технологій на життя, здоров'я і психіку людини,
що з відривом людини від реального світу і переходом у віртуальний світ. Ця
проблема хвилює не тільки "технарів" - розробників програм,
споживачів їхнього продукту, але вже і педагогів і особливо психологів.
Уміння працювати з комп'ютером з
роду окремих умінь перетворилося в норму для поважаючого себе фахівця
будь-якого напрямку діяльності. Завдяки появі Інтернету людям стали доступні
такі можливості, про які раніше було складно навіть припустити. Найголовніша і
основна можливість - це доступ до колосальні обсягами інформації. Теоретично,
наявність комп'ютера підключеного до Інтернету, і електронного рахунку в банку,
може дозволити людині прожити життя не виходячи з квартири, при цьому він буде
не менше за інших людей обізнаний про події відбуваються в світі, утворений у
всіх дисциплінах, в яких побажає вдосконалюватися, буде мати вільне спілкування
з величезним колом людей по всьому світу і багато чого іншого ...
Можна сказати, «всесвітня павутина»
перебирає на себе все більше і більше функцій в життєвих процесах, стає
віртуальним відображенням нашого реального життя. Ні для кого не секрет, що
емоційний стан людини формується під впливом суміші різного роду гормонів,
кожен з яких виробляється в певних умовах. Яскравими прикладами будуть:
вироблення адреналіну в умовах небезпеки, сплеск ендорфінів у разі виграшу.
Різні комбінації гормонів здатні викликати різні стани, які, відповідно, можуть
бути, як приємними людині, так і викликати негативні відчуття. Дані емоційні
стани і те як вони переносяться і сприймаються людиною, є явища, індивідуальні
для кожного. Якщо узагальнити вище сказане, то вийде, що людина, витрачаючи час
на розваги, прагне всього лише до досягнення стану, який є для нього найбільш
комфортним. В процесі роботи та повсякденному житті ми рідко отримуємо достатню
кількість бажаних емоцій, тому прагнемо заповнити їх дефіцит під час подорожі в
Інетрнеті.
Інтернет- сайти можна поправу
назвати одним з видів популярних розваг, при цьому, з появою Інтернету, вони
отримали новий поштовх у своєму розвитку. Для розробників дана сфера є досить
прибутковим напрямком діяльності, що робить розвиток даної галузі інтенсивним.
Перше, що пропонує сайт- це
захопливий світ повний різних сюрпризів і знахідок, а найголовніше -
надзвичайну свободу дій. Спочатку-важливим є те, що будь-який новий користувач,
незалежно від того, ким він є в реальному житті, отримує рівні з усіма іншими
новачками можливості, а то ким він стане, залежить виключно від його
здібностей, як члена нового суспільства , яке формується у віртуальному світі.
Бажання людини до осягнення нового і незвіданого - ось один із основних
козирів, на які розраховують розробники при створенні таких проектів.
Самим небезпечним і малопомітним
моментом являється той, коли інтернет- павутина стає частиною життя людини, при
цьому на підсвідомому рівні виникає боротьба і може статися підміна життєвих
цінностей і цілей людини. Коли бажання досягти чогось перекриває прагнення
людини до розвитку в реальному житті.
Тому, для того, щоб віртуальне
середовище більш-менш відхилялося від захоплення людини, віртуальність змінює
свою діяльність. Розрізняючи та класифікуючи сайти є можливість моделювати
поведінку людини по-різному.
Інтернету притаманний імідж
«середовища безмежних можливостей». Однак у ньому зовсім небагато напрямків, де
можна по-справжньому заробляти гроші.
Щодо типів або видів сайтів виникла
термінологічна плутанина. Говоримо портал, маємо на увазі типовий бізнес-сайт і
т.п. Завдання ресурсів - хоча б приблизно розставити все по своїх місцях, і
допомогти вибрати нам саме той тип або вид сайту, який буде ефективно
вирішувати поставлені завдання.
Види сайтів:
·
Сайт-візитка
·
Корпоративний сайт
·
Інтернет-магазин
·
Сайт контент-проект
·
Промо-сайт
·
Сайт-форум
·
Новинне інтернет-видання
·
Сайт-фотогалерея
·
Блог
·
Інтернет-портал
Сайт-візитка
- невеликий сайт, як правило, складається з
декількох веб-сторінок, і містить основну інформацію про комерційну або
некомерційну організацію, приватну особу, компанію, товари або послуги,
прайс-листи, контактні дані та форму зворотного зв'язку.
Інтернет- магазин-
дозволяє без великих витрат
збільшити число покупців, запропонувавши їм можливості дистанційного замовлення
й доставки товарів за місцем вимоги. Потенційні
власники онлайнових магазинів - ті компанії, які теоретично здатні продавати
свої товари за каталогами, тобто з організацією доставки.
Портал новин
- це досить великий сайт, виконаний у формі порталу, який висвітлює основні
події, що відбуваються в політиці, економіці, спорті, культурі, і регулярно, не
менше разу на день, оновлюються. Новинне інтернет-видання в пошуку нової
інформації діє, як правило, оперативніше традиційних ЗМІ, чим і привертають
дедалі більшу кількість відвідувачів. Так відвідуваність
великих інтернет-видань сягає кілька десятків тисяч
людей в день.
Соціальна мережа -
це структура, що базується на людських зв’язках або ж взаємних інтересах. В
якості інтернет-сервісу соцмережа може розглядатися як платформа, за допомогою
люди можуть здійснювати зв’язок між собою та групування за специфічними
інтересами. Завдання такого сайту полягає у тому, щоб забезпечити користувачів
всіма можливим шляхами для взаємодії один з одним - відео, чати, зображення,
музика, блоги та інше.
Правильна розробка Інтернет - сайту
Останнім часом мережа Internet стала
для багатьох засобом заробітку грошей, який має значні переваги в порівнянні з
традиційними сферами бізнесу. Відносно легкий спосіб розпочати власну справу
часто вводить в оману, через яку початківці погано представляють собі, як ці
можливості правильно використовувати. Одним із найбільш популярних аспектів
мережі Internet і в той же час найдешевшим є розробка Web-сайтів.
Підготовчий етап створення сайту
Тенденції в українському сегменті
Internet свідчать, що цікавими для відвідувачів є вузькопрофільні,
спеціалізовані ресурси. Як і в будь-якому іншому бізнесі тут важливо
передбачити, що потребуватимуть Internet-користувачі в майбутньому. Проте, в
будь-якому випадку корпоративний сайт слід робити обов’язково! Навіть у
випадку мінімальної віддачі. Створювати загально популярні сайти (ресурси, які
охоплюють багато сфер людської діяльності), а тим більше отримувати помітну
грошову віддачу, дуже важко. Ситуація загострюється ще й тим, що в Уарнеті зі
зростанням користувачів мережі з’явилися великі гроші (по-українських мірках).
Варто пробувати себе у вузькоспеціалізованих проектах. Примітка. Під
«якістю сайту» розуміється сукупність властивостей Web-ресурсу, які визначають
його здатність задовольняти конкретні потреби користувачів. Але вгадувати -
справа невдячна! Більш правильно буде подивитися, що відвідувачі шукають в
пошукових системах найчастіше і головне - не знаходять. Та зайняти вільну нішу.
Інновації
Інновація сайту має не останнє
значення серед заходів щодо забезпечення
тривалості життєвого циклу сайту і його рентабельності. Дослідіть, куди «йде»
прогрес. Створення кінцевого продукту (сайту) займе певний час. Чим складніший
сайт, тим більше часу потрібно на втілення всіх задумів.
Бізнес-план - план розвитку
Web-сайту
Робити сайт, не замислюючись,
припустимо лише для любительських сайтів. Для комерційних сайтів цей підхід -
неприпустимий! Важливо на початковому етапі остаточно розібратись з тим, як
сайт планує заробляти гроші. Це положення відносно якого повинно
розраховуватися все інше. Не менш важливо правильно поставити цілі і завдання,
заздалегідь вирішити: що, чому і як. Фраза «Кадри вирішують все» є
ключовою для комерційно-успішного сайту. Непрофесійний дизайн, слабкий рівень
програмування, початківець SEO-спеціаліст можуть «запороти» будь-які хороші
починання. Неодноразово траплялося, що конкуренти запозичували чужу ідею,
реалізовували її на більш високому рівні і в кінцевому результаті сайт-джерело
залишається біля розбитого корита. Який звідси висновок?
Навіщо сайту якісний дизайн?
Дизайн сайту - обличчя
особи/компанії в Internet. Якщо сайт зроблено не якісно, то виникає очевидне
запитання: чи варто довіряти власнику такого Web-ресурсу? Де гарантія, що це не
черговий аферист. Справедливо буде припустити, що www.ot.ua/free - Сохраненная
копия - Похожиеособа/компанія, яка не приділяє належної уваги дизайну,
легковажно ставиться до потенційного клієнта (або їй бракує грошей). Про яку
довіру тоді йдеться?!
Ваш сайт не тримається в пам’яті -
Ви втрачаєте!
Дизайн повинен відкластися у
підсвідомості людини, яка відвідала
сайт. Важливу роль тут відіграє логотип (назва фірми, виконана в певному стилі,
і/або знак, якесь стилізоване зображення), гасло, кольорова гамма, графіка,
стиль викладення і ще багато чого. Будь-яка дрібниця, навіть на перший погляд
незначна, може зіпсувати загальне враження. На Web-ресурс, який
запам’ятовується, є більша вірогідність повернення відвідувачів. Звичайно ці
спогади мають бути позитивними. Уявімо собі ситуацію. Власник невеличкої фірми
загорівся ідеєю мати сайт. Він переглядає в пошуковій системі з десяток
ресурсів по цій темі і розуміє, що умови практично однакові. Куди він
повернеться? Напевне, на сайт, який справив на нього позитивне враження і
«сидить» в його голові. З сайтами компаній справа трохи легша. Оскільки, скоріш
за все, в неї вже є фірмовий стиль, за яким її впізнають. В такому випадку на
нього Вам і слід орієнтуватися, щоб зайшовши на сайт, відвідувач зрозумів: він
не помилився адресою, а потрапив туди, куди прагнув.
Слідкуйте за розмірами Вашого сайту
Що найважливіше для забезпеченої
людини? Мабуть, не останнє місце займає час. Коли в неї зазвичай сторінка
завантажується секунду-дві, а вами запропонований - п’ять. Чи дочекається
завершення процесу вибагливий відвідувач? Не забувайте, час - це гроші! Кому,
як не людині, яка ці гроші має, знати про це. Тому, закладати в свій сайт
піклування про потенційного клієнта незалежно від його статків.
Будьте консервативними!
Що чекає від сайту вчитель?
Інформації! Що чекає від сайту банкір? Надійності! Що чекає… І так далі. Вивчіть
свою потенційну аудиторію. Дайте відвідувачам відчути, що вони на сайті,
який спроможний дати те, за чим вони прийшли. Як?! Атмосферою, наповненням,
функціональністю,… Уявіть собі: молодіжний розважальний ресурс, оформлений в
темних тонах, в класичному стилі, який чимось нагадує музей. Це трохи не те,
чого від нього чекають. Чи не так?
Догадки - згубні для Вашого сайту!
Засновники сайтів часто вважають, що
велика кількість відвідувачів автоматично перетвориться на купу грошей. Але це
найчастіше не так. Запитайте себе: «скільки з відвідувачів, які вперше прийшли
на Ваш сайт, мають хоча б мінімальні здогади про що він?». Якщо Ваш бренд
недостатньо відомий, то на головній сторінці має бути видно, чим сайт може
зацікавити. Не заставляйте відвідувача вгадувати. Дайте чітку однозначну
відповідь. Останнім, що хоче бачити користувач, є величезний анімаційний
логотип. Проте цього недостатньо! Підготуйте відвідувача до зустрічі з
сайтом, підкажіть йому, куди він потрапить: англійською назвою домену,
назвою сайту, коротким описом біля гіперпосилання на Ваш ресурс, якісно
продуманими банерами на чужих сайтах, тощо. Як Вам, мабуть, відомо заголовок на
кожній сторінці сайту (текст в тезі <title>) використовується пошуковими
системами для представлення інформації про Ваш сайт, текст заголовка виводиться
в гіперпосиланні на сторінці результатів пошуку, в каталогах, дошках оголошень.
Не легковажте цим. Приділіть належну увагу заголовкам.
Проектування
Швидкість завантаження, навігація і
функціональність є основними початковими
складовими, які повинні бути на високому рівні. У користувачів має бути можливість
знайти те, що вони шукають, в стислі строки. Якщо Ви не можете забезпечити їх
цим, то це зробить Ваш конкурент! Перша сторінка, яку перегляне користувач на
Вашому сайті, має зацікавити його Вашим продуктом (контент, товар, послуга,
тощо). Наприклад, якістю товару, найнижчими цінами, оригінальним контентом,
швидкою доставкою, тощо.
Інформація на сайті має бути:
· Цікавою,
тобто розважальною або пізнавальною. Припустимо, Ви створюєте сайт, який
пропонує екскурсії по Львову. В такому випадку недостатньо буде просто вивісити
на сторінці список екскурсій, час проведення і їх вартість. Варто також
розмістити захоплюючі розповіді, факти, байки з історії міста та життя його
мешканців і підкреслити це все цікавими ілюстраціями.
· Переконливою.
Вона має налаштовувати відвідувача на потрібний настрій. І тоді користувач
почне Вам довіряти.
· Постарайтесь
поставити себе на місце користувача, зрозуміти,
що саме він хоче знайти на Вашому сайті. І запропонувати йому це.
· Коротко ознайомте
відвідувача з Вашими перевагами і досягненнями (якщо такі є). Витягніть зі
свого продукту всі можливі переваги для клієнта і запишіть їх у вигляді списку.
· Користувач
має Вас розуміти. Ваша мова повинна бути
простою і доступною. Уникайте вузькоспеціалізованих термінів, сленгу, тощо.
Розробка і тестування
Перенасичення сторінки аплетами,
різного роду плагінwww.ot.ua/free - Сохраненная копия - Похожиеами,
flash-анімацією, тощо, може бути негативним фактором для Ваших користувачів,
оскільки відвідувачі, які не можуть переглянути сайт швидко і легко (без
завантаження додаткового софту), зазвичай починають нервувати і покидають Ваш,
технічно вимогливий, ресурс.
Ахіллесовою п’ятою багатьох сайтів
є:
· Мертві посилання на
сайті;
· Javascript’ові
помилки;
· Відсутність
картинок;
· Орієнтація на один
браузер (наприклад, Internet Explorer).
Не повторюйте чужих помилок. Ретельно
перевіряйте всі без виключення сторінки на сайті.
Експлуатація сайту
Декілька слів про рекламу
Відкриття сайту вимагає набагато
більше, ніж прес реліз на популярних порталах та реєстрація в пошукових
системах і каталогах. Великий об’єм планування необхідний в цьому випадку.
Часткове фінансування рекламних
заходів - неприпустиме. Адже в силу миттєво
вступає т. з. закон Мерфі, який говорить: «недостатні рекламні витрати приводять
до безглуздої трати грошей, тобто економія на рекламі - безглузда». Окрім
звичайної реклами використовуйте також приховану рекламу. Що це таке? Це
- позитивна, комерційно важлива для Вас інформація, яка явно не вказує на те,
хто її замовив. Це - відгуки Ваших клієнтів поза Вашим сайтом, статті
авторитетних незалежних авторів про те, які Ви хороші, тощо. Така тактика
дозволить створити позитивний імідж швидше, ніж традиційна реклама.
Кількість переважає над якістю
Якщо основою Вашого сайту є корисний
контент, то помилкою буде використання виключно чужого матеріалу (винятком може
бути переклад матеріалів з іноземної мови). Досить часто нові сайти намагаються
здобути контент за будь-яку ціну. Неправильно буде вважати, що велика кількість
неоригінальної інформації є обов’язково негативним явищем, проте запорука
успіху - власний ексклюзивний контент. Це прямо впливає на конкурентну
спроможність Вашого ресурсу, тобто на здатність сайту бути першим відвіданим
серед аналогічних Web-ресурсів. Дозволяйте іншим використовувати Ваш матеріал.
Лише просіть поставити посилання на джерело. Недоброзичливці (любителі
поживитися за рахунок іншого) завжди знайдуться і Ваші заборони їм не
перешкода, а для решти погрози є радше проявом недовіри з Вашого боку до
користувача. Шукайте в пошукових системах запити з Вашої тематики, по яких
нічого путнього не знаходиться. Створюйте контент, якого ніде нема, і Ви
обов’язково знайдете свого читача.
Висновок
Розробка успішного сайту - важкий та
тривалий процес, і підходити до нього потрібно серйозно. Web-ресурс в кінцевому
результаті має бути добре налагодженим механізмом, виконувати певну мету і
поставлені перед ним завдання.
1.1 Сайт -візитка
Усі фірми потребують реклами і свого
представлення клієнтам. Для цього використовуються різні методи, наприклад,
перетяжки, рекламні щити, телебачення і т.д. Але не всі компанії, особливо
початківці, можуть собі дозволити ці види реклами. Є дешевші способи дати про
себе знати: рекламні листки в поштову скриньку, фірмовий бланк, буклет або
візитка, але це реклама найчастіше одноразовий, так як люди часто викидають
всякі папірці.
Тому в сучасний століття розвитку
комунікаційних технологій, особливим попитом і великий, постійно зростаючої
користувальницької аудиторією, є подання фірми чи компанії за допомогою
Інтернет сайту. Великі компанії, можливо вже відомі, мають великий дохід і
займають міцні позиції на ринку, обзаводяться ефектним корпоративним сайтом.
Організації ж поменше і початківці фірми, вперше зіткнулися із завданням
створення свого сайту, часто звертаються до сайтів-візиток - найбільш
підходящий варіант відкриття свого on-line представництва. На такому сайті
зазвичай розміщують загальну інформацію про себе, контактні дані, пропоновані
товари або послуги, прайс-листи, новини фірми. Також часто в сайті візитці
поміщають фотогалерею, різні форми з відправлення e-mail повідомлень, рекламу
та додаткові статті. Дана інформація може бути представлена як звичайні дані,
або ж у вигляді спеціальних статей з фотографіями та малюнками.
Сайт-візитка - це не завжди
маленький сайт. Сайт-візитка, всупереч сформованій думці, може складатися з
необмеженої кількості сторінок. Хоча часто такі сайти мають до 20 сторінок, але
зустрічаються й Інтернет-ресурси в 70 і більше сторінок.
Під «візиткою» мається на увазі не
формат, а призначення сайту - давати необхідну інформацію про фірму і чим вона
займається. До сайтів - візиток вдаються не тільки приватні підприємці, новачки
ринку, невеликі компанії, але і великі підприємства та організації, яким не
потрібна розміщення і часте оновлення великих обсягів інформації. Важливо
знати, що такий сайт не менш ефективний, ніж інші види web-ресурсів, однак він
набагато простіше і зручніше у використанні, до того ж на їх створення і
підтримку не потрібні значні фінансові та часові витрати. Робимо логічний
висновок: якісно створений професіоналами сайт-візитка - це гарна, недорога
реклама компанії або приватній особі, яка працює цілодобово і привертає відвідувачів
з самих різних сфер діяльності і різного доходу.
Переваги web сайту візитки:
1. Він дає можливість компанії
знаходити нових клієнтів і партнерів за допомогою Інтернету.
2. Велика економія фінансів, У
порівнянні з традиційними видами реклами.
. На будь-яких рекламних
матеріалах компанія тепер може залишати свою адресу в Інтернеті, куди будь-який
зацікавлений споживач завжди може звернутися і отримати більш повну та детальну
інформацію.
. У вашої фірми з'являється
можливість якіснішого сервісу при роботі з клієнтом, тому що на відміну від
того ж офісу, до сайту можна звернутися в будь-який час доби і отримати всю
необхідну інформацію.
. Різноманітні графічні
елементи (прайс-листи або логотипи на фірмових бланках) виглядають набагато
привабливіші, ніж на екрані, ніж при ксерокопіюванні або при передачі за
допомогою факсу.
. Можливість оперативного
редагування інформації. Це робиться легко і просто, не потрібно навіть мати
спеціальні знання і звертаючись до допомоги ззовні. Наприклад, компанія «RUBIX»
пропонує недорогі сайти, в яких будь-який користувач, завдяки зручному і
грамотно продуманому механізму, не маючи спеціальних знань може опублікувати
або відредагувати тестові матеріали, фотографії та малюнки, контактну
інформацію і будь-які інші файли (прайс-листи, комерційні пропозиції,
презентації тощо).Ви економите на послугах програмістів і інших фахівців.
. Сайт-візитка - це
можливість проводити рекламні кампанії в Мережі, а також можливість отримувати
прибуток: при високій відвідуваності власник web-сайту може продавати місце на
ньому під банер рекламу або обмін.
Вимоги до сайту-«візитка»
Замовляючи сайт-візитку слід знати
вимоги, яким повинен відповідати ефективний інтернет-ресурс даного формату.
Сайт-«візитка» повинен:
·
Містити чітку і зрозумілу для відвідувачів
інформацію;
·
Працювати на движку (системі
управління сайтом), який дозволяє легко модифікувати сайт;
·
Мати просту навігацію, щоб
відвідувач легко переміщався по сторінках сайту і міг знайти потрібну
інформацію;
·
Бути доступним для пошукових систем;
·
Бути легким в управлінні,щоб при
необхідності власник сайту міг редагувати або додавати основні матеріали;
·
Швидко завантажуватися;
·
Крім контактів мати форму зворотного
зв'язку, щоб відвідувач міг поставити запитання або зробити заявку онлайн;
·
Мати інформативний лічильник обліку
відвідувачів,щоб власник міг контролювати ефективність свого сайту.
Приклади сайту-візитка:
1) #"656827.files/image005.jpg"> <#"656827.files/image006.jpg">
3) #"656827.files/image007.jpg">
4) #"656827.files/image008.jpg">
5) <#"656827.files/image009.jpg">
Мінімальна
функціональність інтернет-магазину:
·
Обов'язково повинні бути присутніми
основні сторінки: «Про магазин», «Гарантії», «Оплата», «Доставка», «Контакти».
Наявність таких сторінок, а в першу чергу їх коректне наповнення, допоможе
зробити відвідувача більш лояльним, оскільки він зрозуміє, що існує реальний
продавець, а не просто сторінка сайту.
·
Також повинен бути «Каталог
продукції», розділений на рубрики. Якщо надаються товаром мало, то поділ на
рубрики не обов'язково.
·
Кожна одиниця товару наявна на сайті
повинна мати назву, опис, фотографію і ціну на неї.
·
Ще має бути присутня кнопка «Купити»
або «Замовити», в описі товару, яка дозволить класти товари в «Кошику».
·
Повинен бути розділ «Мій кошик», що
містить в собі можливість зручної роботи з «Кошиком» до оформлення покупки:
міняти число товарів, видаляти товари з корзини, перераховувати сумарну
вартість.
·
Необхідний розділ з формою
оформлення замовлення.
·
Відправлення контактних даних
менеджеру, після заповнення їх користувачем, відбувається на сторінці розділу
«Мої замовлення».
Наповнення та візуальне оформлення
інтернет-магазину має бути збалансованим. Не повинно бути такого, що дизайн
перевантажений прикрасами Flash і всілякими графічними прикрасами. Всі
надмірності такого роду роблять магазин «важким» для сприйняття і заважають
навігації. Всього має бути в міру. Завдання інтернет-магазину - продавати, а не
дивувати відвідувачів своїм дизайном!
|
1)http://www.nestle.ru/Pages/nestle.aspx
|
|
|
2)#"656827.files/image011.jpg">
|
|
3)#"656827.files/image012.jpg">
|
|
4)#"656827.files/image013.jpg">
|
|
5)
#"656827.files/image014.jpg">
|
1.3 Портал новин
Портал - це, перш за все, один з
існуючих видів сайтів. Його головні і відмінні риси - це широка
функціональність, а також великий спектр пропонованих послуг і сервісів.
Портали, як правило, представляють собою багаторівневу систему взаємодіючих між
собою скриптів.
Особливе значення варто приділити
розробці та реалізації елементів дизайну, з допомогою яких користувач ресурсу
здійснює навігацію по порталу. Сукупність подібних програмних рішень називається
англомовним словом «юзабіліті», тобто зручність використання. Якщо у випадку з
сайтами, що складаються з декількох сторінок, це не так важливо, то зручне і
інтуїтивно передбачуване переміщення від одного розділу до іншого в порталах
має першорядне значення.
Новинний портал - це веб-сайт, на
якому періодично і постійно оновлюється вміст інформаційного характеру на певну
тематику або ж на певну групу тем.
З розвитком технологій світ усе
більше прагне до максимальної електронізації, коли все створюється на базі
електронних технологій. Наприклад, якщо раніше журнал виходив у друкованому
вигляді, то тепер на його базі виходить інтернет-сайт з періодичним
відновленням всіх матеріалів. І якщо раніше це була просто копія в мережі
інтернет - зараз це повноцінна структура, яка включає в себе блоги, форуми,
періодику, платну і безкоштовну частину для перегляду і багато чого іншого, що
навіть не перетинається з паперовим виданням.
Створити новинний ресурс в мережі
набагато простіше, ніж займатися організацією друкованого видання. Для
мережевого джерела інформації не потрібна серйозна апаратура, велика кількість
обслуговуючого персоналу, немає необхідності оплачувати дорогу рекламу (тому
наша компанія пропонує послуги з розкручування), а також відсутня проблема з реалізацією
газет / журналів та їх друку. Створення новинного порталу в мережі зажадає від
вас тільки наявності співробітників, які будуть займатися написанням статей
(журналісти і редактори).
На жаль, створення новинного порталу
має свої труднощі: якщо запроваджене інтернет-видання буде відвідуваних (до 100
унікальних відвідувачів в день), безкоштовні електронні системи використовувати
можна, але як тільки кількість відвідувачів перевалить за 1000 - безкоштовні
рішення не зможуть впоратися з таким напливом, почавши сильно гальмувати, і та,
насилу завойована аудиторія, регулярно відвідувала ваш ресурс, перейде на інші
новинні портали.
Комерційні системи управління
сайтами здатні справлятися з 1000 унікальних відвідувачів на день, але як
тільки їх кількість перевищить 5000 осіб - 70% комерційних систем не зможуть
нормально функціонувати. А коли відмітка дійде до 10 000 відвідувачів в день -
практично всі продукти "зійдуть з рейок", тому що вони не розраховані
на сайти з таким великим відвідуванням. Це не означає, що сайт з такою
комерційною системою відразу ж стане погано працювати і гальмувати, але з
додаванням на сайт відвідувачів і матеріалів пошук буде проводитися довше,
матеріали важко завантажуватися і в цілому в системі буде спостерігатися
нестабільна робота.
Такі сайти приваблюють величезну
відвідуваність, незважаючи на велику конкуренцію. Кількість користувачів
новинних сайтів з кожним днем зростає.
Новинні сайти використовують для
наповнення інформації, часто створюються як додаток до основного корпоративного
сайту. Доступ до сайту може бути закритим або напівзакритих. В іншому випадку
новинний сайт служить постачальником інформації і різних подій у світі
економіки, політики, культури та інших сфер.
Являє собою інтернет-видання з
тематичними розділами.
Для створення новинного сайту
необхідно звертатися тільки до професіоналів, оскільки розробка його дуже
складна робота, а переглядати його буде величезна кількість відвідувачів.
Веб-дизайн сайту новин, звичайно,
грає велику роль в розкручуванні, але спершу треба добре продумати тематику,
зміст. На сайті, крім тематичних новин, бажано розміщувати різні фотографії -
це допоможе вам зайняти місце також в сервісі гугла з картинками. Відмінне
джерело доходу - це розміщення реклами товарів і послуг. Ну і найголовніше, це,
звичайно ж, свіжа інформація.
Дизайн такого порталу не повинен
бути помітним, акцент тут в першу чергу на тематичному змісті. Навігація
повинна бути максимально зручною. Все має бути на виду, щоб користувач в пару
кліків знайшов потрібний йому матеріал.
Дизайн такого сайту переважно
повинен бути строгим, але зручним для сприйняття інформації. Тому не варто
обтяжувати новинний сайт складним графічним наповненням.
Кожна дрібниця в веб-дизайні сайту
грає важливу роль. Але головне - це функціональність і зручність. Сайт повинен
притягувати відвідувачів і залишатися у них в пам'яті, але не набридати.
1.4 Соціальна мережа
Соціальна мережа - це найбільший на
сьогоднішній день вид інтернет-ресурсу. Він характеризується всіма видами
взаємодії користувачів: К-С (користувач до сайту), К-К (користувач до
користувача), С-К (сайт до користувача). Соціальна мережа, як правило, містить
безліч різний функціональних сторінок. Тому розробка соціальної мережі - це
дуже довгий і трудомісткий процес.
Сенс соціальних мереж в тому, що за
допомогою Інтернету можна досить швидко знайти практично будь-якої людини, якщо
вміти правильно їх використовувати. Соцмережі мають масу унікальних
властивостей: оперативний обмін інформацією між однодумцями; встановлення нових
зв'язків; неформальне спілкування (наприклад, начальники-підлеглі,
фахівці-новачки). Соціальні мережі сьогодні на хвилі величезної
популярності,яка з кожним днем тільки наростає. Популярність у свою чергу
неминуче призводить до швидкого росту. Після своєї появи соціальні мережі
розвивалися в основному кількісни мшляхом, охоплюючи все більше користувачів,
сьогодні ж соціальні мережі переходять в стадію якісного розвитку, придумуючи
все нові інструменти взаємодії з користувачами. Тому технологічний
розвиток у найближчі 3-5 років стане необхідною умовою для виживання в
конкурентному середовищі. Розвиток технологій буде багатогранним, однак вже
можна виділити ряд ключових тенденцій.
Дизайн соціальних мереж: передові
тенденції:
Привернути увагу:
Що потрібно?
Відповідь на це питання читач повинен отримати
відразу. Ваша головна сторінка повинна сказати відвідувачеві про те, що це за
ресурс і які його цілі, за допомогою тегів, рубрик, графіки і т. д.
Що ви можете дати?
На самому видному місці вашого сайту - звичайно, реєстрація. Але перш за все ви
повинні показати читачеві, навіщо йому реєструватися у вас. Наприклад, дайте
можливість побачити і уявити, що їх чекає слідом за реєстрацією (екскурсія по
сайту) або ж знайти вже зареєстрованих друзів.
Загальні інтереси.
Надавайте юзерам можливість слідкувати за інтересами своїх друзів - кого додали
вони, які публічні поновлення у них з'явилися.
Друзі.
Пропонуйте якісний пошук з великим функціоналом - адже соціальні мережі - це
насамперед друзі.
Дати заявити про себе:
Профіль.
Мало того, що він повинен бути наповнений всілякими опціями для персоналізації,
профіль повинен допомагати висловлювати свою індивідуальність. Тому краще
додати можливості зміни дизайну, кольору, інтерфейсу персональної сторінки.
Програми.
Включіть в опції соціальної мережі створення різних додатків - опитувань,
галерей, рейтингів і т. д. (приклад - створення власної кіноколекцій). Це
дозволяє користувачеві розповісти про те, що він любить, чим займається.
Додати динаміки:
Оновлення.
На сайті повинна бути ідеально налагоджена система оповіщення про оновлення
сайту: новини, додані опції, друзі і т. д.
Оновлення в реальному часі.
Рідко хто додає таку кнопку на сайт, і абсолютно даремно. Дуже зручно
отримувати відомості про погоду, курси, телепередачах, фільми, музику, новинах
по одному кліку.
Керувати контактами:
Угруповання
друзів. Користувач може сам створювати групи, а також угруповання може
бути автоматичною, припустимо, з можливістю перейменовувати групи. Також для
кожної групи повинна бути можливість налаштувати оповіщення, приватність тощо,
для зручності диференціації суспільних, робочих, особистих контактів.
Профілі
соціальних мереж. Подбайте про OpenSocial на вашому сайті, а
також про те, щоб ваш значок можна було додати на сторінку в будь-якому іншому
соціальному профілі, і навпаки.
Зробіть спілкування легким:
Розширюйте канали спілкування.
Чим більше можливостей для спілкування (ЛС, коментарі на стіні, у
повідомленнях, в обговореннях, у фотоальбомах) - тим зручніше користуватися
сайтом.
Громадські
обговорення. Крім можливостей розмови зі своїми друзями, дозволите
можливість обговорень у тематичних групах та залучення людей з боку.
Надавайте інформацію:
Самі по собі соціальні мережі
містять величезну кількість різноманітної інформації. Зробіть її пошук для
користувачів максимально різнорівневим і релевантним. Пам'ятайте про те, що
персональну сторінку можна перевантажувати інформацією - зробіть новинну або
рекламну стрічку настроюваної, або ж максимально короткою. Фільтр новин і
реклами - ідеальний варіант для будь-якої поважаючої себе соціалки.
Візуалізуйте:
Особа має значення.
Налаштуйте ваш сайт так, щоб аватар завжди був виведений поруч з ім'ям - люди
хочуть бачити того, з ким розмовляють.
Каталогізація контактів.
За місцем проживання, навчання, спеціальності.
Розділ 2. HTML
та CSS - основа
шаблону сайту та стилю оформлення
Шаблони сайтів представляють собою
універсальний набір web-сторінок, який підійде до будь-якої необхідної
тематики. Використовуючи Шаблони сайтів, можна значно заощадити час і отримати
готовий дизайн, в який за бажанням, можна підставити потрібні дані, логотипи
компанії або позначити необхідні розділи. Навіть користувачі, що не мають
великого досвіду роботи в глобальній мережі, зможуть оцінити зручність
шаблонів. Шаблони сайтів можна оновлювати і проводити різні модифікації,
залежно від потреб. Власник, знайомий з web-дизайном, має можливість додати
бажані графічні об'єкти, фотографії або інший потрібний контент. Якщо Ви
вирішили професійно зайнятися бізнесом в інтернеті, Вам буде потрібно грамотно
складений професійний сайт, який представляє Вашу діяльність. Шаблони
допоможуть почати роботу в мережі набагато продуктивніше і швидше, так як
досвідчені фахівці складуть готовий проект Вашого представництва на популярних
мережевих майданчиках.
Шаблони сайтів - це своєрідна
заготовка (болванка) для створення і просування Вашого професійного
Інтернет-ресурсу. До його складу входять розроблені формати графічного або
текстового змісту, складені досвідченими і кваліфікованими програмістами.
Верстаючи Шаблони сайтів,
професіонали наповнять їх якісним контентом, а розробники дизайну подбають про
те, щоб Ваш сайт мав оригінальну колірну гамму і відповідну графіку, яка
надається на вибір. Головною перевагою шаблонів, є складений макет готового
сайту, в якому вже є исходники форматів небудь. Psd або. Fla. Оригінальне
дизайнерське рішення і зверстані сторінки, з набором необхідних форматів -
складають колекцію шаблонів самого різного призначення.
Новачкам, що розвиває свій бізнес в
мережі, буде цікаво і пізнавально дізнатися про готовий шаблоні, який можна
доопрацювати, переробити або модифікувати. На вибір замовника, досвідчені
майстри надалі створять шаблон з різним набором необхідних інструментів і
функцій. Шаблон дає можливість зберегти час, витрачений на створення сайту «з
нуля», це готовий образ Вашої майбутньої професійної діяльності. Від того,
наскільки грамотним і професійним буде Ваш ресурс, залежить результат всієї
подальшої роботи. Від якісного шаблону також у великій мірі залежить і Шаблони
сайтів - це мережевий інструмент, що допомагає плідному розвитку бізнесу в
інтернеті. Створення web-сайтів - це кропітка праця програмістів, дизайнерів і
модераторів, спрямований на вдосконалення Вашого бізнесу в локальній мережі або
в мережі інтернет на успішну співпрацю з усім світом. Дизайн сайту повинен бути
унікальним. Якісне сайтобудування - стало важливим кроком на шляху до успішного
розвитку будь-якого бізнесу в Інтернет. Шаблон для сайту - це самий розумний і
оптимальний метод створення власного ресурса. Кожен веб-майстер може підібрати
відповідний дизайн і спробувати створити щось подібне для себе, з урахуванням
всіх необхідних вимог, шляхом аналізу структури і верстки дизайну ґрунтуючись
на скріншотах.
З кожним роком кількість
користувачів інтернету збільшується мінімум 10-20 мільйонів осіб. Усього, за
різними даними, так чи інакше, інтернетом користуються понад 2 мільярди людей.
Як же зробити так, щоб користувач з Нової Зеландії і Норильська при
відображенні сайту бачив одну і ту ж картинку? Відповідь проста: необхідний
єдиний мову, зрозумілий різними комп'ютерами. Як такої мови в даний момент
виступає HTML.
HTML (HyperText Markup
Language) - мова розмітки (маркування)
гіпертексту. Гіпертекст своїм розвитком зобов'язаний інтернету, хоч і
створювався він зовсім не для того. HTML дає можливість виробляти перехід від
однієї частини тексту до іншої, і, що чудово, ці частини можуть зберігатися на
абсолютно різних комп'ютерах.не варто плутати з мовами програмування, він
створений спеціально для розмітки веб-сторінок. Саме мова розмітки дає браузеру
необхідні інструкції про те, як відображати тексти та інші елементи сторінки на
моніторі.Важливо зауважити, що не тільки різні браузери, а й різні їх версії
можуть по-різному сприймати і відображати на екрані код. Отже, деякі елементи
коректно виглядають в браузері Operа можуть виглядати інакше в Internet
Explorer та інших браузерах.
При верстці (грубо кажучи, створенні
сторінок) HTML-сторінок це необхідно пам'ятати, і переглядати їх в самих
популярних браузерах типу Mozilla Firefox, Internet Explorer і Operа.
Вимоги
до
HTML-верстки
ñ коректно відображатися в найбільш
використовуваних браузерах
ñ дотримуватися стандартів W3C
ñ сприяти просуванню сайту
ñ враховувати можливість розширення
функціональності сайту
ñ містити оптимізовану графіку
ñ мати поділ оформлення та вмісту
ñ містити стилі для використовуваних
елементів вмісту
ñ містити необхідні активні елементи
(посилання, меню іт.д.)
CSS шаблон для веб - сайту створено
з використанням Cascading Style Sheets (CSS) технології. Ця технологія дозволяє
веб-розробникам легко форматувати стиль всіх сторінок сайту за один раз. CSS
буде використовуватися далі навіть більше, тому що його видно у всіх браузерах (99,98%).шаблон
дозволяє поліпшити сумісність браузерів і платформ. Це означає, що сайт буде
виглядати бездоганно в Windows, Unix, Mac, Linux, Netscape, Internet Explorer,
Firefox та інших браузерах. Кожен шаблон CSS тестується на декількох
платформах, щоб забезпечити кращу відповідність за всіма вимогами.
Дана технологія забезпечує
найпростіший спосіб розробки стилю для HTML. Таким чином, можна змінити весь
текст і посилання кольору на всіх сторінках в режимі редагування тільки в
одному CSS файлі! CSS також робить процес кодування набагато легше, тому не
доведеться повторно прописувати кожен з тегів форматування. Цей модернізований
код робить набагато швидше час завантаження і запобігає зниження пропускної
здатності каналу. CSS шаблони мають 100% сумісність з Macromedia Dreamweaver і
Microsoft FrontPage, а також з багатьма іншими редакторами. Ця технологія
простіше і швидше у використанні, ніж HTML код.
Замість таблиць в шаблонах CSS
використовуються блоки. Крім того, ці теги краще зрозумілі для JavaScript і
іншим мовам веб-програмування.технологія є великим кроком вперед у
веб-розробці. Ця технологія додає більше гнучкості для вашого сайту. Ви не
будете мати ніяких проблем з майбутніми змінами сайту. Всі шаблони засновані на
таких технологіях і стандартах роблять сайт більш зручним для користувачів.
Таблиця
стилів
Набір виразів, що визначають
уявлення документа. Таблиці стилів мають три різних джерела походження, що
відносяться до розробника, користувачеві й агенту користувача. Взаємодія цих
трьох джерел описано в розділі про каскадах і спадкування.
Коректна таблиця стилів
Коректність таблиці стилів залежить
від рівня CSS, використовуваного для її створення. Так, коректність таблиць
стилів, написаних в CSS1, не зміниться при переході до CSS2. Але через внесення
деяких змін до CSS2 з'являються відмінності в семантиці написання ряду таблиць
в CSS1 і CSS2.
Коректна таблиця стилів, створена за
допомогою CSS2, повинна розроблятися відповідно до граматикою CSS2. Більш того,
вона повинна містити тільки ті правила at, імена властивостей і прийняті ними
значення, які визначені в даній специфікації. Неприпустиме правило at, ім'я
властивості або його значення є приватним прикладом некоректності таблиці.
Оригінальний
документ
Документ, до якого відносяться одна
або кілька таблиць стилів. З використанням певної системи кодування даний
документ представляється у вигляді дерева елементів. Кожен елемент
представлений своїм ім'ям, що ідентифікує його тип; числом його атрибутів (це
число не є обов'язковим) і своїм, можливо порожнім, вмістом.
Мова
документу
Система кодування, що
використовується для представлення вихідного документа (наприклад, HTML або
XML). Примітивна синтаксична конструкція мови документа. Більшість правил,
використовуваних в таблицях стилів CSS, використовують імена елементів
(наприклад, "P", "TABLE" або "OL" для HTML) для
визначення інформації про їх поданні.
Замінний
елемент
Елемент, щодо якого компілятору CSS
відома тільки його внутрішня розмірність. У HTML прикладами замінних елементів
можуть служити елементи IMG, INPUT, TEXTAREA, SELECT і OBJECT. Наприклад, вміст
елемента IMG часто замінюється зображенням, яке задає атрибут "src".
У CSS не вказується спосіб визначення внутрішніх розмірностей.
Внутрішня
розмірність
Ширина і висота, зумовлені самим
елементом, а не його оточенням. В CSS2 передбачається, що всі замінні елементи
і тільки вони мають внутрішню розмірність.
Атрибут
Значення, пов'язане з елементом і
складається з імені і пов'язаного з ним (текстового) значення.
Вміст
Вміст, пов'язане з елементом у вихідному
документі. Не у всіх елементів є вміст. Елементи можуть бути порожніми. В
якості вмісту деякого елемента може виступати текст або безліч вкладених
елементів, щодо яких вихідний елемент називається батьківським.
Генерується
вміст
Вміст елемента, що було пов'язано з
ним в результаті використання відповідних таблиць стилів. Генерується вміст
замінного елемента надходить не з вихідного документа. Це може бути додатковий
текст для елемента (наприклад, значення атрибута "alt" в HTML) і
елементи, явно чи неявно вноситься таблицею стилів, наприклад, маркери, номери
та інші.
Дерево
документа
Дерево елементів, закодоване у
вихідному документі. Кожен елемент в цьому дереві має тільки один батьківський
елемент, за винятком кореневого елемента, у якого його немає.
Дочірній
елемент
Елемент А називається дочірнім по
відношенню до елементу B, якщо і тільки якщо B є батьківським елементом
елемента А.
Нащадок
Елемент А називається нащадком
елемента B, якщо виконується одна з таких умов:
А є дочірнім елементом елемента B;
А є дочірнім елементом елемента C,
який, у свою чергу, є нащадком B.
Предок
Елемент А називається предком
елемента B, якщо і тільки якщо B є нащадком елемента А.
Сестринський елемент
Елемент А називається сестринським
елементом елемента B, якщо і тільки якщо елементи А і B є дочірніми елементами
одного і того ж елементу. Елемент А є попереднім сестринським елементом, якщо в
дереві документа він знаходиться перед елементом B. Елемент A є наступним
сестринським елементом, якщо в дереві документа він знаходиться після елемента
B.
Попередній елемент
Елемент А називається попереднім
елементу B, якщо і тільки якщо (1) А є предком B або (2) А є попереднім
сестринським елементом елемента B.
Наступний елемент
Елемент А називається наступним за
елементом B, якщо і тільки якщо B передує елементу А.
Розробник
Розробник - це людина, яка створює
документи та пов'язані з ними таблиці стилів. Документи та асоційовані з ними
таблиці стилів генеруються засобом розробки.
Користувач
Користувач - це людина, що взаємодіє
з агентом користувача з метою перегляду, прослуховування чи іншого використання
документа і пов'язаних з ним таблиць стилів. Користувач може створити
персональну таблицю стилів, в якій будуть закодовані персональні налаштування.
Агент користувача
Агент користувача - це довільна
програма, яка інтерпретує документ, написаний на деякій мові структуризації, і
застосовує пов'язані з ним таблиці стилів у відповідності з правилами даної
специфікації. Агент користувача може виводити документ на екран, здійснювати
його звукове відтворення, виводити на друк, конвертувати в інший формат і т.д.
Розділ 3. Реалізація проекту
Проаналізувавши результати вивчених
історичних та сучасних особливостей розвитку суспільства нами було зроблено
висновок, що інформаційна потреба сьогодні є головною потребою кожного індивіда
як складової інформаційного суспільства. Можливість вдовольнити цю потребу
шляхом відображення у віртуальному просторі подій батьківської реальності є
мережа Інтернет. Розглянувши Інтернет простір, як інструмент впливу на
свідомість сучасної людини ми визначили, що актуальним на сьогодні являється
знання технологій для створення віртуальної реальності, тобто технологій
розробки сайтів. Тому в даному розділі будуть розглянуті особливості
організації сайту як віртуальної події в інформаційному суспільстві.
Новини стали одним з перших
глобальних продуктів, що користуються стабільним попитом у різних країнах світу
впродовж розвитку усього суспільства. Саме тим, що новини є безперечним лідером
серед безлічі форм подачі інформації, обумовлена актуальність вибраного виду
сайту - Портал новин.
В ході роботи над сайтом були
визначені наступні етапи його розробки:
1. Культурно-соціологічне
обгрунтування проекту
2. Технічне завдання
3. Дізайн сайту у вигляді
графічного файлу
. Вибір технології вирішення
поставленого завдання відповідно до ТЗ і дизайном (HTML + CSS, Joomla)
. Разработка шаблону сайту
(блоковий і сторінковий) (HTML + CSS), меню (переходи за посиланнями)
6. Верстка макета
. Меню (навигация)
. Заготовки сторінок для кожного пункта
меню
. Наповнення сторінок контентом +стилі
редагування в декількох варіантах (в соответствии с назначением сайта
(соціо-культурна составляющая), с возрастной категорией пользователей, с
функциональностью сайта)
. Тестирование (под разные АО, ПО
пользователей)
. Описание алгоритма администрирования
сайта
. План развития сайта, графики обновлений
. Публикация сайта в интернет
. Раскрутка, продвижение, поддержка
. Установка счетчика посещений сайта
3.1 Структура та вибір дизайну
У цьому розділі ми розглянемо більш
детально, етапи, що були описані вище. На першому етапі найголовнішу роль
відіграє - створення структури сайту. Структура сайту відображена у наступній
схемі.
Схема 3.1.1. Структура сайту
"Портал новин"
Проаналізувавши певні данні, можна
виділити чотири основні напрями у нашому “Порталі новин” : “Екологія”,
“Культура”, “Освіта”, “Дозвілля”.
Посилаючись на особливості
технічного завдання нами був розроблений шаблон сайту з використанням
технології HTML та CSS. Всі сторінки були виконані на основі технології “легкий
дизайн”.
Структуру шаблону кожної сторінки
сайту можна представити у вигляді схеми (Схема 3.1.2.):
1. Назва сайту
2. Головне навігаційне меню
3. Основний логотип сайту
. Головне меню в колонці зліва
. Меню розділу в колонці зліва
. Блок регістрації відвідувачів
. Контент
. Заголовок статьи
. Текст статьи
. Столбец справа с тремя одинаковыми блоками
. Подвал
. Служебная информация
. Ссылки на сайты разработчиков
Для організації вище структури сторінок
необхідно використовувати технологію HTML для семантичної розмітки (Схема
3.1.3.).
#container
#top
#topmenu
#osnov
#logo
#left
#leftmenu
#razdelmenu
#schet
#right
#news
#news1
#foto
#content
#clear
#footer
Результат семантичної розмітки з
використанням HTML має наступний вигляд:
<html>
<head>
<title>Новостной
партал</title>
<link
rel="stylesheet" type="text/css"
href="style/style.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
</head>
<body>
<div id
="container">
<div id
="top"></div>
<div
id ="topmenu">
<div
id ="osnov">
</div>
</div>
<div id
="logo"><img src="">
</div>
<div
id ="left">
<div
id ="leftmenu">
<ul>
</div>
<div
id ="schet">
</div>
</div>
<div
id ="right">
<div
id ="news"><h3></h3>
</div>
<div
id ="news1"><h3></h3>
</div>
<div
id ="foto"><h3></h3>
</div>
</div>
<div
id ="clear">
</div>
</div>
</div>
<div
id ="footer">
</div>
</body>
</html>
Результат запрограмованної сотрінки у web-
браузері виглядає так:
Рис. 3.1.1. Структура сторінки
Для надання сторінці вигляду до
шаблону необхідно за допомогою конструкцій CSS,
прописати
правила до кожного елементу сторінки. Кожен з правил відповідає технічним
вимогам:
1. Внутрішня
організація:
· Обнуляємо зовнішні
і внутрішні відступи у всіх елементів сторінки
· колір фону сторінки
відповідає шаблону
2. Блок
володіє наступними характеристиками:
має ширину 790px,
· відцентрован по
горизонталі
· блок #top
(1) розташований на всю ширину контейнера
· назва сайту
знаходиться в блоці (1) є заголовком першого рівня і має 24 розмір
· шрифт Garamond,
колір #0079b6, поля шириною 6em :
3. Верхнє
меню (#topmenu) (2) також займає всю ширину контейнера, а висоту
30p, колір фону залежить від шаблону:
4. в
блоці меню (#osnov) застосовуємо наступне форматування:
· видаляємо маркери в
списку,
· до пунктів меню
застосовуємо обтікання зліва,
· шрифт тексту
12px/30px Times New Roman напівжирного накреслення
· кожен пункт меню є
блоковим елементом і містить посилання відповідного шаблону кольору вирівняну
по центру, ширина якої 91px, висота - 28px, колір фону за зразком
· видаляємо
підкреслення гіперпосилання і встановлюємо кордон справа товщиною 1 px,
суцільну за кольором, відповідно макету.
· кожне
гіперпосилання при наведенні покажчика миші повинне змінювати колір фону і
тексту на протилежний йогог звичайного стану
5. Логотип
сайту (# logo) (3)
займає всю ширину контейнера, а по
висоті дорівнює 230px
ліва колонка по ширині 160px з
обтіканням зліва
6. Блок
Основного меню (#left)
по ширині 140px, з верхнім, правим і
нижнім полем рівним 8px і внутрішніми відступами 5px
7. Головне
меню (#leftmenu) (4)
· у колонці зліва має
назву у вигляді заголовка 3-го рівня у якого нульові поля, напівжирне
накреслення, ширина 25px, 14 розмір, Times New Roman, вирівнювання по
центру.
· Колір фону
відповідає шаблону
· кожен пункт меню є
блоковим елементом і містить посилання відповідно шаблону кольору вирівняну по
центру з нульовими полями, відсутністю маркерів і підкреслень.
· кожен елемент
списку має тільки нижню межу товщиною в 1px. Саме посилання має внутрішній
відступ зліва в 5px, шрифт 12px/30px Times New Roman.
· кожна
гіперпосилання при наведенні покажчика миші повинна змінювати колір фону і
тексту на протилежний його звичайного стану
8. Меню
розділу (# razdelmenu) (5)
у колонці зліва має всі властивості
відповідне за описом назвою головного меню
9. Блок
реєстрації відвідувань (# schet) (6) аналогічно оформлений попереднім
блокам і
містить скрипт, для фіксації
відвідувачів сайту
10. Колонка
справа (#right) (10) по ширині 180px, внутрішніми відступами 5px, полем
зверху 8px, вирівняна по правому краю осяжний блоку
11. Всі
три блоки #news, #news1, #foto оформлені однаково:
заголовки блоків відповідають блоку #leftmenu, ширина блоків 150px,
вірніше та нижнє поле 8px, внутрішній відступ 5px, кордон з усіх сторін 1px
блок
12. Контент
(#content) (7)
· в ширину 410px,
· поле зверху 8px,
· внутрішні відступи
5px 10px,
· вирівняний по
лівому краю
· Заголовки новин (8)
в цьому блоці представлені заголовками першого рівня, розміром 18px, шрифтом Arial
Black, з відступом зліва 30px
13. Абзаци
(9): внутрішній відступ 0 20px, поле зверху 10px, вирівнювання по ширині,
відступ першого рядка 0.8em, кордон знизу товщиною 2px
14. Підвал
(9) щодо позиційований основного вікна, займає всю ширину екрану монітора, по
висоті 40px, текст в ньому (12, 13) вирівняний по центру, шрифт тексту Garamond,
розмір тексту 13px. Колір тексту відповідає шаблоном .
Враховуючи описані вище вимоги
розглянемо більш детально кожну складову шаблону сторінки:
1. Головне
навігаційне меню
Для реалізації структури сторнінки
ми використовували такі властивості:
Обнуляємо зовнішні і внутрішні
відступи у всіх елементів сторінки
колір фону сторінки відповідає
шаблону.
.1. Блок володіє наступними
характеристиками:
· має ширину 790px,
· відцентрован по
горизонталі
.2. Блок #top (1)
розташований на всю ширину контейнера
· назва сайту
знаходиться в блоці (1) є заголовком першого рівня і має 24 розмір
· шрифт Garamond,
колір #0079b6, поля шириною 6em :
.3. Верхнє меню (#topmenu) (2)
також займає всю ширину контейнера, а висоту 30p, колір фону залежить від
шаблону:
· в блоці меню (#osnov)
застосовуємо наступне форматування:
· видаляємо маркери в
списку,
· до пунктів меню
застосовуємо обтікання зліва,
· шрифт тексту
12px/30px Times New Roman напівжирного накреслення
· кожен пункт меню є
блоковим елементом і містить посилання відповідного шаблону кольору вирівняну
по центру, ширина якої 91px, висота - 28px, колір фону за зразком
· видаляємо
підкреслення гіперпосилання і встановлюємо кордон справа товщиною 1 px,
суцільну за кольором, відповідно макету.
· кожне
гіперпосилання при наведенні покажчика миші повинне змінювати колір фону і
тексту на протилежний його звичайного стану
Код CSS:
*{ margin:0px;
padding:0px;
}{ background-color:#333399;
}
#container{width:790px;
margin:auto;
}
#top{width:100%;
}{font-size:24px;
font-family:garamond;
color:#0079B6;
margin:.6em;
}
#topmenu{width:100%;
height:30px;
background:#1C86EE;
}
#osnov li{float:left;
font-weight:bold;
font:12px/30px Times New
Ruman;
list-style:none;
}
#osnov li a{display:block;
width:91px;
height:28px;
border-right:1px
solid#333399;
text-decoration:none;
color:white;
text-align:center;
}
В браузері це виглядає так:
2. Основний
логотип сайту
Банер відображає годинник, картинку,
що відповідає назві порталу. Має такі властивості:
· Логотип сайту (# logo)
(3)
· займає всю ширину
контейнера, а по висоті дорівнює 230px
· ліва колонка по
ширині 160px з обтіканням зліва
HTML :
<img
src="img/education.png" width="100%">:
#logo{position: relative;
width:100%; height:230px;
}
В браузері банер відображається в
наступному вигляді:
3. Головне
меню в колонці зліва, меню розділу
Меню сайту містить в собі чотири
розділи нашого порталу і має такі властивості:
.1. Блок Основного меню (#left)
· по ширині 140px, з
верхнім, правим і нижнім полем рівним 8px і внутрішніми відступами 5px
3.2. Головне меню (#leftmenu)
(4)
· у колонці зліва має
назву у вигляді заголовка 3-го рівня у якого нульові поля, напівжирне
накреслення, ширина 25px, 14 розмір, Times New Roman, вирівнювання по
центру.
· Колір фону відповідає
шаблону
· кожен пункт меню є
блоковим елементом і містить посилання відповідно шаблону кольору вирівняну по
центру з нульовими полями, відсутністю маркерів і підкреслень.
· кожен елемент
списку має тільки нижню межу товщиною в 1px. Саме посилання має внутрішній
відступ зліва в 5px, шрифт 12px/30px Times New Roman.
· кожна
гіперпосилання при наведенні покажчика миші повинна змінювати колір фону і
тексту на протилежний його звичайного стану
.3. Меню розділу (# razdelmenu)
(5)
сайт новинний html css
· у колонці зліва має
всі властивості відповідне за описом назвою головного меню
Властивості цього блоку прописані в
CSS так:
#left{width: 160px;: left;
},
#razdelmenu{width:140px;:5px;top:8px;bottom:8px;right:8px; color:
#1C86EE;
}
#leftmenu ul, #razdelmenu ul{list-style:none;
}
#leftmenu ul li,#razdelmenu ul
li{display:block;
border-bottom:1px solid
#333399;
}
#leftmenu ul li a,#razdelmenu ul li
a {text-decoration:none;
font: 12px/30px Times New
Roman ;
color:white; padding-left:
5px;
}
#leftmenu ul li a:hover,#razdelmenu
ul li a:hover{color: #1A1917;
background-color: white;
}
Вигляд браузера:
4. Контент
В блоці контент ми розташували
основні новини, які відредаговані наступним чином:
.1. Контент (#content) (7)
· в ширину 410px,
· поле зверху 8px,
· внутрішні відступи
5px 10px,
· вирівняний по
лівому краю
.2. Заголовки новин (8) в цьому
блоці представлені заголовками першого рівня, розміром 18px, шрифтом Arial
Black, з відступом зліва 30px
.3. Абзаци (9): внутрішній відступ 0
20px, поле зверху 10px, вирівнювання по ширині, відступ першого рядка 0.8em,
кордон знизу товщиною 2px
В CSS відповідно цим вимогам
прописан код:
#content{width: 410px;
margin-top: 8px;
padding: 5px 10px;
float: left;
background-color: white;
}
Браузер відображає код:
5. Стовбець
справа з трьома однаковими блоками
З правої сторони веб-сторінки
знаходиться допоміжний стовбець, що відображає випадкове фото, новини, та
випадкову статтю. В CSS
код цього блоку має такий вигляд:
#right{ width:180px;: 5px;top: 8px;:
right;color: white;
}{margin:0;weight: bold;:25px;size:
14px;family: Times New Roman;align:center;color: white;align: middle;
}
#news, #news1,
#foto{width:150px;:5px;top: 8px;bottom:8px;:1px solid #B0C4DE;
}
Браузер при зчитуванні CSS
відображає
наступне:
6. Колонтитул
сайту
Оскільки наш портал ліцензійний та
легальний безумовно ми маємо авторські права. Вся інформація щодо створення
сайту та про розробників сайту знаходиться знизу сторінки.
Прописаний код виглядає такий:
#clear{clear: both;
}
#footer{ width:100%;
height:45px;
clear:both;
text-align: center;
font: 13px Garamond;
background-color: #0079B6;
position:relative;
font-weight: normal;
}
#footer a {color: yellow;
}
#footer a:hover{color: #333399;
Написаний вище код при застосуванні
до блока відображається таким чином:
В результаті застосування правила
“один до всіх” вийшов наступний шаблон сторінки:
Окрім головно сторінки наш портал
містить щ декілька розгалужень - рубрик новин.
Я відповідала за рубрику “Освіта”.
Щоб організувати сторінки цього напряму потрібно було придумати інший вигляд
сторінки по даному шаблону за правилами підбору кольорів для таких сторінок та
щоб дизайн співпадав з основним шаблоном і був подібний зі всіма сторінками
порталу.
Література
1. http://buklib.net/component/option,com_jbook/task,view/Itemid,99999999/catid,203/id,9554/
. http://sitenet.com.ua/
. http://www.hmx.ru/sozdanieiraskrutka.html
. http://www.analytic.com.ua/Main/labs/assorti/article-site-types
. http://blogoreader.org.ua/2007/11/23/creating-good-site/
. http://uk.wikipedia.org/wiki/Соціальна_мережа
. http://webstudio2u.net/webdesign/
. http://yaneznal.ru/facts/3039
. http://blogwork.ru/chto-takoe-html/
. http://www.artima.ru/offer/html-verstka.html