Огляд можливостей нової специфікації CSS3 (зараз використовується CSS2.1) від популярного сайту smashingmagazine.com. Автор – Chris Spooner

В хитросплетінні Каскадних Таблиць Стилів (CSS) є чимало хвилюючих особливостей, котрі буквально спричинять вибух креативу в інтернеті. Ці нові деталі включають в себе правила стилів CSS, які будуть реалізовані у майбутній специфікації CSS3. Якщо глянути реалістично, то ви навряд чи зможете використовувати їх на повну силу у найближчі кілька років для своїх проектів, але для дизанерських блогів та сайтів, ці можливості допоможуть вийти за рамки сучасного вебу вже сьогодні, додаючи ту саму "ізюминку" у ваш дизайн та рухаючи дизайн-індустрію вперед.

Наведемо 5 технік, взяті з майбутнього, які ви можете практикувати на своєму сайті прямо тепер.

Border radius

Мабуть, це найзагальніша особливість CSS3, яка зараз використовується, – border-radius. Стандартні HTML-блоки мають квадратну форму з кутами у 90 градусів. Правило CSS3 дозволяє використовувати заокруглені кути.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Border-radius також може бути використаний для стилізації будь-якого окремого кута, хоча синтаксис для -moz- i -webkit- дещо відмінний:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Підтримується у браузерах Firefox, Safari i Google Chrome.

Використовується у Твіттері.

Border image

Border-image, як стає зрозуміло із назви, дозволяє файлу зображення бути використаним у якості границі об"єкта. Картинка спочатку створюється відносно кожної сторони об"єкта, де кожна сторона зображення відповідає стороні об"єкта HTML. Після чого воно здійснюється з наступним синтаксисом:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

Атрибут {border: 5px} конкретизує повну ширину границі, і потім правило border-image з цільовим файлом каже браузеру, скільки зображення використовувати, щоб заповнити ті 5px області границі.

Зображення для границі також можуть бути вказані на посторонній основі, дозволяючи різним зображенням бути використаними для кожної з чотирьох сторін, так само як і для кутів.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Підтримується у Firefox 3.1, Safari, Chrome.

Використовується у Blog.SpoonGraphics.

Тіні для блоків і тексту

Тіні: хіба ви їх лише не любите? Вони можуть легко як створити, так і зруйнувати ваш дизайн. Тепер, за допомогою CSS3 вам навіть не потрібен Photoshop. Використання, яке ви бачите на зображенні (тінь від блоку з датою та тінь від слів Making Modular…), вже чудово використовується на сайті 24 Ways.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

Два перші атрибути визначають відходження (offset) тіні від елементу, в нашому випадку це 10 пікселів по x та y осям. Третій атрибут призначає рівень розмивання (blur) тіні. Ну, і насамкінець, колір.

Атрибут text-shadow використовується для тіні від текстового контенту:

text-shadow: 2px 2px 5px #ccc;

Підтримується у Firefox 3.1, Safari, Chrome (box-shadow лише) та Opera (text-shadow).

Проста прозорість з RGBA та opacity

Використання PNG файлів у веб-дизайні зробило прозорість однією з його ключових властивостей. Зараз показник alpha або правило непрозорості можуть бути вказані безпосередньо у CSS.

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

Перші три числа посилаються на червоний, зелений, синій кольорові канали, а останнє число – на альфа-канал, що викликає ефект прозорості.

В якості альтернативи, разом з правилом непрозорості колір може бути вказаний як зазвичай, а саме правило – як окреме.

color: #000;
opacity: 0.5;

Підтримується у Firefox, Safari, Chrome, Opera (непрозорість), IE7 (непрозорість, з виправленнями).

Використовується у 24 Ways (RGBA).

Власні шрифти з @font-face

Завжди існував набір т.зв. безпечних шрифтів, які могли вільно використовуватись у вебі, як ви знаєте: Arial, Helvetica, Verdana, Georgia, Comic Sans, та інші. CSS3-правило @font-face дозволяє включати шрифт з будь-якого шрифтового файлу, розміщеного у вас на сервері. Це певною мірою приносить проблеми, пов"язані з авторським правом, адже є не так багато шрифтів, котрі можуть бути використані для @font-face включень.

Стилізація на практиці виглядає ось так:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Решта шрифтових опцій викликається як зазвичай:

h1 { font-family: 'Anivers', Helvetica, Sans-Serif;

Підтримується у Firefox 3.1, Safari, Opera 10, IE7 (з силою-силенною виправлень, якщо ви хоробрі, то зможете змусити працювати обраний шрифт у ІЕ7)

Використовується у TapTapTap.

Хоча CSS3 все ще перебуває на стадії розвитку, правила, описані тут, вже зараз підтримуються у деяких браузерах. Safari, зокрема, має обширну підтримку цих нових особливостей. Але на жаль, будучи високоякісним браузером, він має досить малу аудиторію, тому можливо, ці додаткові особливості CSS3 не є важливими для його групи користувачів. Але з комп"ютерами Mac від Apple, котрі впроваджуються у життя, використання Safari також зростатиме.

Firefox, з іншого боку, зараз має значно більше користувачів. Більше того, наступний його реліз, Firefox 3.1, додав підтримку властивостей CSS3. Беручи до уваги те, що більшість юзерів Firefox одразу ж оновлять свій браузер, скоро з"явиться велика група людей, котра матиме підтримку цих нових стильових правил.

Google Chrome був випущений минулого року. Базований на двигуні WebKit, цей браузер має майже все те саме, що і у Safari. Поки Safari додає численну пропорцію Mac-користувачів, Chrome надає пропорцію прихильників Windows.

Якщо ми глянемо на статистику використання браузерів від W3C за листопад 2008 року, то 44,2% користувачів подорожували в інтернеті з Firefox, 3,1% з Google Chrome, 2,7% – з Safari. Це означає, що близько 50% всіх інтернет-користувачів матимуть можливість побачити ці нові властивості. А в межах веб-дизайнерської спільноти, котра є значно свідоміша щодо вибору браузера, відсоток юзерів з підтримкою CSS3 зросте до рівня 70%.

Зворотній бік медалі

Ваш сайт тепер має широкий діапазон нових можливостей, але є кілька негативних моментів, що завадять цьому:

• Internet Explorer. 46% інтернет-користувачів не зможуть побачити нові можливості. Тому не використовуйте їх як критичну частину вашого дизайну. Впевніться, що має місце і другорядний вибір, наприклад, стандартна границя замість border-image.
• Непрацездатні таблиці стилів. Нові властивості CSS3 не були випущені в якості фінального релізу. Вони зараз виконуюються з ознаками, котрі є різними для різних браузерів. Тому вони можуть зробити недійсною вашу таблицю стилів.
• Додатковий код. Звертаючи увагу на попередній пункт, бачимо, що ми мусимо додавати різні теги для різних браузерів, щоб описати одне правило. Це додає багато рядків до вашого CSS-коду.
• Потенційна небезпека використання. Так само, як це робиться з стандартними фільтрами у Photoshop, використання цих нових стильових властивостей може призвести до появи болісно-страхітливих дизайнів. Тому будь ласка, краще не зловживайте ефектом тіні!

Про автора

Кріс Спунер – фрілансер, графічний та веб-дизайнер з Великобританії. Він живе темою дизайну і насолоджується тим, що йде нога-в-ногу з цією сферою. Кріс також публікує статті по дизайну, різноманітні туторіали на своєму блозі Blog.SpoonGraphics.

Посилання по темі:

• CSS3 Preview
• CSS3 и блочная модель
• Краткий обзор CSS3
• Безпечні шрифти для Всемережжя

Оригінал статті – Push your web design into the future with CSS3

Переклад на українську мову – Блогорідер

Спонсори запису: недорогой хостинг    дать объявления в запорожье    городской сайт одессы   А може вас зацікавлять інформаційні технології?

1. 2 нові сайти від HWC
2. 10 ознак хорошого HTML-коду
3. Світовий рекорд разом з Firefox 3

Щоб код HTML, який ви пишете на своєму сайті, був хороший, недостатньо однієї тільки його валідності (validation – відповідність стандартам W3C – всесвітнього інтернет-консорціума). Щоб сайт виглядав професійно, код теж має бути гарно написаний і структурований, а не "зліплений, із того що було". Розглянемо головні ознаки, котрі відрізняють хороший HTML код.

1. Правильно прописаний <!DOCTYPE html PUBLIC…..>. Хоч ця громіздка конструкція в самому верху сторінки і здається вам дивною, вона дає браузеру завдання – як правильно рендерувати (відображати) вашу сторінку, а також робить код валідним. Тому простим <html> не обмежитись.

2. Цілісна head секція. Тут також не обійтись одним <title>. CSS-стилі та Javascript мають бути в окремих папках, і викликатись у head як звичайне посилання.

<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />

І стилі не просто викликаються, а й задається тип їх відображення – або звичайний стиль, або ж стиль для роздрукування сторінки (media="print"). Favicon необов’язковий, але все ж потрібний елемент сайту, як я нещодавно писав. В блоці head також варто розмістити meta-теги, якщо ви вирішили їх використовувати. І одна з найважливіших деталей – якщо ви ведете статистику RSS за допомогою сервісу Feedburner, то в head обовязково треба прописати адресу вашого RSS, котра вже розміщена на Feedburner’i. Інакше картина ваших читачів буде дуже неповна.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/feed/" />

3. Унікальні стилі для окремих елементів. Наприклад, якщо ви хочете, щоб теги <h2> мали різні властивості, то можна зробити так: #home h2 {}. Тобто для кожної сторінки буде створено окремий стиль.

Те ж саме стосується лінків – не обов’язково, щоб вони всюди були лише жорстко синіми з підкресленням. Для меню створіть один стиль, для тексту – інший, і так далі, для кожного виду посилань: .menu a {}; .footer a {};

4. Семантичність. Семантичність -це коли код зрозумілий людині насамперед, а не машині. Саме тому слід створювати семантичний код, розмітка якого буде зрозуміла в першу чергу вам. Адже вам, як адміністратору, цим кодом потім управляти. Погодьтесь, що набагато легше керувати меню, коли воно має наступний вид:

<div id=”menu”>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</div>

5. Загальний DIV для всього контенту. Вам буде набагато легше організовувати контент на сторінці, якщо всі блоки поміщені всередину одного загального DIV-тега, його зазвичай називають <div id="wrap">, <div id="container">. Особливо, якщо ширина сайту фіксована.

6. Найважливіший контент – в першу чергу. Якщо ваш сайдбар є лише навігацією або ж ще менш важливим контентом, то краще в коді помістити його нижче. А найважливішу інформацію – таку як новини, статті, події – наверх. Це стане ще одним, хоча й невеликим плюсом до SEO-оптимізації вашого коду.

7. Контент по частинам. Виокреміть контент, що часто повторюється на сторінках (header, footer, різні блоки) в окремі файли, і потім просто включайте їх у вигляді файлів. <?php include_once("menu.html") ?>

Саме за таким принципом працює відома CMS WordPress – сама сторінка index.php складається з набора функцій, що викликають певні розділи, такі як header.php, sidebar.php, footer.php, bottom.php, та інші в один кінцевий файл, котрий ви бачите.

8. Код з відступами. Набагато приємніше читати і редагувати код, котрий розділений ієрархічно – з відступами, так як у пункті № 4. Код. вирівняний align left жахливо читати ч швидко знайти потрібний вам рядок.

9. Ніяких стилів. Ваш HTML-код має створюватись для контенту, для інформації, а не для стилю. о можливості виключайте теги, котрі редагують стиль, з HTML-документу. Всі ваші стилі повинні знаходитись в окремому CSS-файлі та імпортовані в блоці <head>. Забудьте про <font>.

10. Правильний код – шлях до валідності. Насамкінець закривайте всі <img /> <br /> на кінці. Використовуйте © для значка ©, та аналогічні коди для інших символів. Не забувайте позакрвиати всі теги на сторінці, що ви відкрили.

І тоді все буде ОК

Оригінал (англ.): CSS Tricks – What beautiful HTML code looks like

Переклад з доповненнями: hellveen, спеціально для Блогорідера.

1. HTML-верстка і Web-програмування сайту. З чого почати?
2. Як зробити сайт легким та зручним у користуванні

Останнім часом мережа Internet стала для багатьох засобом заробітку грошей, який має значні переваги в порівнянні з традиційними сферами бізнесу. Відносно легкий спосіб розпочати власну справу часто вводить в оману, через яку початківці погано представляють собі, як ці можливості правильно використовувати. Одним із найбільш популярних аспектів мережі Internet і в той же час найдешевшим є розробка Web-сайтів.

В цій статті ми спробуємо розібратись, що потрібно врахувати, щоб розробити успішний сайт. Також Ви дізнаєтесь: чому для того, щоб створити хороший ресурс, недостатньо знань декількох графічних редакторів, основ програмування чи розкрутки Web-сайтів та, сподіватимемося, зрозумієте наскільки складно стати в даній області спеціалістом пристойного рівня.

Підготовчий етап створення сайту

Які сайти варто робити?

Спочатку спробуємо розібратись, які сайти слід створювати. Тенденції в українському сегменті Internet свідчать, що цікавими для відвідувачів є вузькопрофільні, спеціалізовані ресурси. Як і в будь-якому іншому бізнесі тут важливо передбачити, що потребуватимуть Internet-користувачі в майбутньому. Проте, в будь-якому випадку корпоративний сайт слід робити обов’язково! Навіть у випадку мінімальної віддачі. Створювати загально популярні сайти (ресурси, які охоплюють багато сфер людської діяльності), а тим більше отримувати помітну грошову віддачу, дуже важко. Не забувайте також, що на стороні Ваших конкурентів – досвід і авторитет. Ситуація загострюється ще й тим, що в Уарнеті зі зростанням користувачів мережі з’явилися великі гроші (по-українських мірках). Варто пробувати себе у вузькоспеціалізованих проектах. Наприклад, якщо створити якісний ресурс по філателії (наука про марки), то завдяки відносно невеликій конкуренції, можна досить швидко бути зауваженим спеціалістами в цій області. Примітка. Під «якістю сайту» розуміється сукупність властивостей Web-ресурсу, які визначають його здатність задовольняти конкретні потреби користувачів. Але вгадувати – справа невдячна! Більш правильно буде подивитися, що відвідувачі шукають в пошукових системах найчастіше і головне – не знаходять. Та зайняти вільну нішу.

Інновації

Інновація сайту має не останнє значення серед заходів щодо забезпечення тривалості життєвого циклу сайту і його рентабельності. Дослідіть, куди «йде» прогрес. Ви повинні розуміти, що створення кінцевого продукту (сайту) займе певний час. Чим складніший сайт, тим більше часу потрібно на втілення всіх задумів. Не забувайте також про людський фактор. Адже, те, що Ви запланували «здати» сайт до Нового року, зовсім не означає, що так буде. І на момент завершення робіт може виявитися, що проект є не настільки інноваційним, як Ви задумували, або гірше – на ринку вже є аналоги. Тому спробуйте випередити час.

Бізнес-план – план розвитку Web-сайту

Робити сайт, не замислюючись, припустимо лише для любительських сайтів. Для комерційних сайтів цей підхід – неприпустимий! Важливо на початковому етапі остаточно розібратись з тим, як Ваш сайт планує заробляти гроші. Це положення відносно якого Ви повинні розраховувати все інше. Не менш важливо правильно поставити цілі і завдання, заздалегідь вирішити: що, чому і як. Фраза «Кадри вирішують все» є ключовою для комерційно-успішного сайту. Непрофесійний дизайн, слабкий рівень програмування, початківець SEO-спеціаліст можуть «запороти» будь-які хороші починання. Неодноразово траплялося, що конкуренти запозичували чужу ідею, реалізовували її на більш високому рівні і в кінцевому результаті сайт-джерело залишається біля розбитого корита. Який звідси висновок?

Не економте гроші на спеціалістах, особливо, коли ці гроші у Вас є! Зробіть сайт, покращити який – не можливо або дуже важко, і недоброзичливці не зможуть Вам нашкодити. А якщо спробують, то у Вас вже авторитет і час на Вашому боці, адже, Ви – перші.

Навіщо сайту якісний дизайн?

Дизайн сайту – обличчя особи/компанії в Internet. Якщо сайт зроблено не якісно, то виникає очевидне запитання: чи варто довіряти власнику такого Web-ресурсу? Де гарантія, що це не черговий аферист. Справедливо буде припустити, що особа/компанія, яка не приділяє належної уваги дизайну, легковажно ставиться до потенційного клієнта (або їй бракує грошей). Про яку довіру тоді йдеться?!

Ваш сайт не тримається в пам’яті – Ви втрачаєте!

Дизайн повинен відкластися у підсвідомості людини, яка відвідала сайт. Важливу роль тут відіграє логотип (назва фірми, виконана в певному стилі, і/або знак, якесь стилізоване зображення), гасло, кольорова гамма, графіка, стиль викладення і ще багато чого. Будь-яка дрібниця, навіть на перший погляд незначна, може зіпсувати загальне враження. На Web-ресурс, який запам’ятовується, є більша вірогідність повернення відвідувачів. Звичайно ці спогади мають бути позитивними. Уявімо собі ситуацію. Власник невеличкої фірми загорівся ідеєю мати сайт. Він переглядає в пошуковій системі з десяток ресурсів по цій темі і розуміє, що умови практично однакові. Куди він повернеться? Напевне, на сайт, який справив на нього позитивне враження і «сидить» в його голові. З сайтами компаній справа трохи легша. Оскільки, скоріш за все, в неї вже є фірмовий стиль, за яким її впізнають. В такому випадку на нього Вам і слід орієнтуватися, щоб зайшовши на сайт, відвідувач зрозумів: він не помилився адресою, а потрапив туди, куди прагнув.

Слідкуйте за розмірами Вашого сайту

Ви орієнтуєтесь на заможного відвідувача і тому навішали на свій сайт багато графіки, flash-анімацію з розрахунку: людина, яка не спроможна закачати Ваш сайт, буде не спроможна купити продукт, який Ви пропонуєте (т. з. ефект «відсіювання»). Це один бік медалі. Але є й інший! Що найважливіше для забезпеченої людини? Мабуть, не останнє місце займає час. Коли в неї зазвичай сторінка завантажується секунду-дві, а Ваша – п’ять. Чи дочекається завершення процесу вибагливий відвідувач? Не забувайте, час – це гроші! Кому, як не людині, яка ці гроші має, знати про це. Тому, закладайте в свій сайт піклування про потенційного клієнта незалежно від його статків.

Будьте консервативними!

Що чекає від сайту вчитель? Інформації! Що чекає від сайту банкір? Надійності! Що чекає… І так далі. Вивчіть свою потенційну аудиторію. Дайте відвідувачам відчути, що вони на сайті, який спроможний дати те, за чим вони прийшли. Як?! Атмосферою, наповненням, функціональністю,… Уявіть собі: молодіжний розважальний ресурс, оформлений в темних тонах, в класичному стилі, який чимось нагадує музей. Це трохи не те, чого від нього чекають. Чи не так?

Догадки – згубні для Вашого сайту!

Засновники сайтів часто вважають, що велика кількість відвідувачів автоматично перетвориться на купу грошей. Але це найчастіше не так. Запитайте себе: «скільки з відвідувачів, які вперше прийшли на Ваш сайт, мають хоча б мінімальні здогади про що він?». Якщо Ваш бренд недостатньо відомий, то на головній сторінці має бути видно, чим Ви займаєтесь. Не заставляйте відвідувача вгадувати. Дайте чітку однозначну відповідь. Але не перестарайтесь. Останнім, що хоче бачити користувач, є величезний анімаційний логотип. Проте цього недостатньо! Підготуйте відвідувача до зустрічі з Вашим сайтом, підкажіть йому, куди він потрапить: англійською назвою домену, назвою сайту, коротким описом біля гіперпосилання на Ваш ресурс, якісно продуманими банерами на чужих сайтах, тощо. Як Вам, мабуть, відомо заголовок на кожній сторінці сайту (текст в тезі <title>) використовується пошуковими системами для представлення інформації про Ваш сайт, текст заголовка виводиться в гіперпосиланні на сторінці результатів пошуку, в каталогах, дошках оголошень. Не легковажте цим. Приділіть належну увагу заголовкам.

Проектування

Швидкість завантаження, навігація і функціональність є основними початковими складовими, які повинні бути на високому рівні. У користувачів має бути можливість знайти те, що вони шукають, в стислі строки. Якщо Ви не можете забезпечити їх цим, то це зробить Ваш конкурент! Перша сторінка, яку перегляне користувач на Вашому сайті, має зацікавити його Вашим продуктом (контент, товар, послуга, тощо). Наприклад, якістю товару, найнижчими цінами, оригінальним контентом, швидкою доставкою, тощо. Інформація на сайті має бути:

• Цікавою, тобто розважальною або пізнавальною. Припустимо, Ви створюєте сайт, який пропонує екскурсії по Львову. В такому випадку недостатньо буде просто вивісити на сторінці список екскурсій, час проведення і їх вартість. Варто також розмістити захоплюючі розповіді, факти, байки з історії міста та життя його мешканців і підкреслити це все цікавими ілюстраціями.
• Переконливою. Вона має налаштовувати відвідувача на потрібний настрій. І тоді користувач почне Вам довіряти.
• Постарайтесь поставити себе на місце користувача, зрозуміти, що саме він хоче знайти на Вашому сайті. І запропонувати йому це.
• Коротко ознайомте відвідувача з Вашими перевагами і досягненнями (якщо такі є). Витягніть зі свого продукту всі можливі переваги для клієнта і запишіть їх у вигляді списку.
• Користувач має Вас розуміти. Ваша мова повинна бути простою і доступною. Уникайте вузькоспеціалізованих термінів, сленгу, тощо.

Розробка і тестування

Перенасичення сторінки аплетами, різного роду плагінами, flash-анімацією, тощо, може бути негативним фактором для Ваших користувачів, оскільки відвідувачі, які не можуть переглянути сайт швидко і легко (без завантаження додаткового софту), зазвичай починають нервувати і покидають Ваш, технічно вимогливий, ресурс. Ахіллесовою п’ятою багатьох сайтів є:

• Мертві посилання на сайті;
• Javascript’ові помилки;
• Відсутність картинок;
• Орієнтація на один браузер (наприклад, Internet Explorer).

Не повторюйте чужих помилок. Ретельно перевіряйте всі без виключення сторінки на сайті.

Експлуатація сайту

Декілька слів про рекламу

Відкриття сайту вимагає набагато більше, ніж прес реліз на популярних порталах та реєстрація в пошукових системах і каталогах. Великий об’єм планування необхідний в цьому випадку. Часткове фінансування рекламних заходів – неприпустиме. Адже в силу миттєво вступає т. з. закон Мерфі, який говорить: «недостатні рекламні витрати приводять до безглуздої трати грошей, тобто економія на рекламі – безглузда». Окрім звичайної реклами використовуйте також приховану рекламу. Що це таке? Це – позитивна, комерційно важлива для Вас інформація, яка явно не вказує на те, хто її замовив. Це – відгуки Ваших клієнтів поза Вашим сайтом, статті авторитетних незалежних авторів про те, які Ви хороші, тощо. Така тактика дозволить створити позитивний імідж швидше, ніж традиційна реклама.

Кількість переважає над якістю

Якщо основою Вашого сайту є корисний контент, то помилкою буде використання виключно чужого матеріалу (винятком може бути переклад матеріалів з іноземної мови). Досить часто нові сайти намагаються здобути контент за будь-яку ціну. Неправильно буде вважати, що велика кількість неоригінальної інформації є обов’язково негативним явищем, проте запорука успіху – власний ексклюзивний контент. Це прямо впливає на конкурентну спроможність Вашого ресурсу, тобто на здатність сайту бути першим відвіданим серед аналогічних Web-ресурсів. Дозволяйте іншим використовувати Ваш матеріал. Лише просіть поставити посилання на джерело. Недоброзичливці (любителі поживитися за рахунок іншого) завжди знайдуться і Ваші заборони їм не перешкода, а для решти погрози є радше проявом недовіри з Вашого боку до користувача. Шукайте в пошукових системах запити з Вашої тематики, по яких нічого путнього не знаходиться. Створюйте контент, якого ніде нема, і Ви обов’язково знайдете свого читача.

Висновок

Розробка успішного сайту – важкий та тривалий процес, і підходити до нього потрібно серйозно. Web-ресурс в кінцевому результаті має бути добре відлагодженим механізмом, виконувати певну мету і поставлені перед ним завдання. Ця стаття поверхнева та оглядова, і Ви повинні розуміти, що для цілісного, більш повного бачення, Вам не достатньо вивчення спеціальної літератури, навчальних курсів, статей. Важливу роль також матиме стажуванням під керівництвом професіоналів і власний досвід, який Ви набудете з часом. Успіхів Вам у всіх Ваших починаннях! Автор – Ігор Виспянський. Читайте всі статті в рубриці "Інші автори".

1. HTML-верстка і Web-програмування сайту. З чого почати?
2. Як зробити сайт легким та зручним у користуванні
3. Бліц:Історія вашого імені

Отож, сьогоднішнє питання: Яка історія виникнення вашого ніку (nickname) ? Для нас погодились сказати кілька слів electric, ribel i masterpiecer. За що їм величезна шана.

Tарас (electric): елементарно просто: я вчився на електроенергетичному факультеті, котрий тепер вже став інститутом енергетики та систем керування, закінчив кафедру чи т оспеціальність електричні системи і мережі, магістр електротехніки, робив як інженером-ЕЛЕКТРИКОМ, так і інженером-енергетиком. Оскільки енергетика для простої людини штуказагадкова, то було використано слово електрика. Кожна людина знає хто такий ЕЛЕКТРИК )) так і пояився нік electric

Тарас (ribel): Мій нік мені не “пришили” мої друзі, чи знайомі. Я його придумав сам.
У реальному житті мене звати Тарас. Це слово з грецької означає
бунтівник. Я взяв українсько-англійський словник, знайшов там слово
бунтівник, по англійськи воно буде Rebel, змінив другу букву на “i”,
от і вийшов Ribel.

Олександр (masterpiecer): Нікнейм придумав сам, коли набрид старий. Версія перша. Моя. Походить від слова “masterpiecer” (шедевр) +”r” Версія друга, мого друга – все те саме, але “r” має означати якусь вебдванульну фічу Версія третя від Сергія Ласкавого – “master” (повелитель) і “piecer” (подрібнювач на шматки). Вийшло щось на зразок “шматувальник рабів” )) Ну і четверта, бонусна, від одного з учасників БлогКемпу – “master” + “piece” (співзвучно зі словом “мир”) + “r” ^)

1. Історія Webby Awards
2. Інтерв’ю з Ribel’ом
3. БлоґоТиждень. Version 2.0

Що потрібно знати для того, щоб створити сучасний сайт власними руками

Дана стаття написана для тих, хто самостійно намагається розібратися в програмуванні Web-сайтів. Вона показує шлях по якому може рухатися початківець, який розгубився в різноманітності сучасних мов програмування для Web, а також вона намагається обґрунтувати даний вибір. Кроки запропоновані в цій статті не варто вважати абсолютно правильними. Це лише авторське бачення можливого розвитку Web-програміста.

Сьогодні існує чимало програм, які дозволяють створювати власні Web-сайти не вникаючи в код сторінок. Крім того Інтернет рясніє сайтами, які пропонують готові шаблони для сайтів. Ми орієнтуватимемося на те, що Ви не шукаєте легких шляхів і бажаєте здобути достатній обсяг знань з метою самостійного створення Web-сайтів, якісного редагування готових шаблонів, тощо. Отже, з чого слід почати. Без чого подальше вивчення Web-програмування неможливе? Щоб створити сайт потрібно знати хоча б мову розмітки. Найлегшою і найпопулярнішою є мова HTML. Що таке HTML? Термін HTML (HyperText Markup Language) означає "мова маркування гіпертексту". З часу створення першої версії (специфікації) HTML зазнав деяких змін. Поточну специфікацію HTML можна знайти на сайті www.w3.org. Що вам знадобиться для освоєння HTML?

1. браузер;
2. редактор текстових файлів.

HTML-сторінка – це звичайний текстовий файл. Свої перші HTML-файли Ви будете розробляти в себе на локальному диску. При вивченні нового матеріалу слід дотримуватися таких нескладних порад:

• не використовуйте старих книг, статей, тощо;
• звертайте увагу на автора матеріалу.

Для більш-менш якісного створення HTML-документів Вам необов’язково досконало вивчати грубезні посібники, але Ви повинні знати основні можливості, які забезпечує HTML і де можна знайти потрібну інформацію. Що далі? А далі – CSS . Тут слід зауважити, що після вивчення HTML Ви маєте достатній багаж знань для того, щоб створювати повноцінні статичні сайти. Більше того, на цьому Ви можете зупинитись… Але в такому випадку Ви втратите величезні додаткові можливості для зручної роботи. CSS (Cascading Style Sheets) – каскадні таблиці стилів, які застосовуються для візуального форматування документу в мовах розмітки, крім того в CSS є можливості створювати стилі для друкованої версії сторінки і для управління звуком. CSS найчастіше зменшує об’єм коду, дозволяє виносити стилі в окремий файл, який можна повторно використовувати і ще багато іншого. З вище сказаного можна зробити висновок, що як HTML, так і CSS не є мовами програмування. Вони дозволяють лише змінювати оформлення елементів Web-документів. Але, як же бути з опрацюванням даних на сайті? Вам потрібно рухатися далі. Зазвичай, наступний крок дається не всім, бо, далі треба вивчати програмування.

JavaScript – мова опису сценаріїв. Являє собою скріпт-мову для www, засновану на Java. Код JavaScript може бути вбудований безпосередньо в текст сторінки HTML. JavaScript – мова програмування, за допомогою якої Ви можете створювати інтерактивні Web-сторінки. Величезною перевагою JavaScript перед іншими мовами програмування є те, що їй не потрібно ніяких інтерпретаторів і Web-серверів, а достатньо тільки одного браузера. Зауваження! Не слід плутати JavaScript з Java, чи з JScript. Це різні мови програмування. Як! Ви успішно впоралися і з цим кроком? Тоді Ви досягли неабиякого рівня. Під словом "впоралися" не варто розуміти досконалого вивчення JavaScript. Лише з практикою Ви зрозумієте, що багато-чого не знаєте, багато автор книги, яку Ви читали для знайомства з JavaScript, Вам не розказав.

Зауваження! Кожен по-своєму розуміє словосполучення "достатній рівень знань". Але погане вивчення матеріалу призведе або може призвести до помилок в коді, які важко виявити, бо Ви впевнені в своїй правоті і шукаєте не там, де слід.

Наступний крок – це PHP. Хоча необов’язково наступний. Він сміло може йти перед вивченням JavaScript, а може взагалі не бути виконаним. Але ж Ви бажаєте вдосконалюватися. Можна довго сперечатись про те, яку мову програмування обрати. Тут і ASP, і Perl, і Java, … Але ми зупинимо свій вибір на PHP. PHP вибраний з-поміж інших аналогічних мов програмування через свою простоту в освоєнні, популярність серед програмістів і безкоштовність. Навіщо Вам PHP? Сучасний сайт повинен підтримувати пошук інформації, продаж продуктів, гостьову книгу, тощо. А це і не тільки це можна реалізувати на PHP. Відмінність PHP від JavaScript полягає в тому, що PHP-скрипт виконується на сервері, а клієнту передається результат роботи, тоді як JavaScript-код повністю передається на клієнтську машину і тільки там виконується. Наведу найбільш популярні можливості мови:

• інтеграція Web з базами даних;
• робота з файлами і папками;
• · легка робота з формами;
• робота з растровими зображеннями (бібліотека GD);
• скрипти можна "вклеїти" прямо в HTML-код;
• робота з FTP;
• шифрування;
• підтримка PDF (Adobe).

Для початку можу порадити Вам сайт www.php.net. На ньому Ви зможете скачати свіжу версію PHP, документацію, FAQ, приклади скриптів, тощо. Порада: не завантажуйте найсвіжіші версії, оскільки вони можуть бути нестабільні. Краще трохи почекати і скачати нормальний стабільний реліз. Для того, щоб всі ваші скрипти написані на PHP працювали, необхідно мати або доступ до вже налаштованого сервера, або (найпростіший варіант) поставити собі пакет "Denver" (http://denwer.ru). Там всі операції по налаштуванні виконані за вас. Такий варіант цілком підійде для роботи зі скриптами вдома.

Якщо Ви вже розібрались з PHP, то, як тут не скористатись можливістю роботи з базами даних. MySQL – це одна з найпопулярніших і найпоширеніших СУБД (система управління базами даних) в Інтернеті завдяки вдалому поєднанні користувацьких властивостей, відкритому коду і добрій технічній підтримці. Офіційний сайт – www.mysql.com. MySQL розглядається як основа для не надто складних проектів, які не вимагають високого рівня збереження даних, як то: форуми, системи ведення статистики, електронні магазини, тощо. В якості альтернативи MySQL можна розглянути: Oracle, PostgreSQL, mSQL. Переваги MySQL:

•  маленький;
• швидкий;
•  легкий в установці і використанні;
• є безкоштовним для некомерційного використання;
• написаний під десятки видів ОС.

Для мови PHP MySQL виступає як стандарт де-факто, і бібліотека для звернення до MySQL скомпільована в ядро PHP. Мабуть, все. Ні, ні… Звичайно не все, але цього має бути достатньо, щоб успішно створювати сучасні, зручні, конкурентні Web-сайти. Як бачите, дана дорога нелегка. І тому перш ніж розпочати вивчення потрібно добре подумати, чи Вам дійсно це потрібно. Адже, час – безцінний і його не повернути. Автор – Ігор Виспянський, спеціально для Блогорідера.

1. Як зробити сайт легким та зручним у користуванні

В цій статті ми розглянемо загальні принципи проектування зручного Web-сайту. Тобто, спробуємо розібратись, як організувати Web-сторінку так, щоб вона була максимально зручною для відвідувача.

1. Як правильно організувати загальний шаблон сторінки

Перш ніж приступити до роботи потрібно обрати один із способів верстки (гумовий дизайн, дизайн з фіксованою шириною). Розглянемо трохи детальніше ці дві можливості. Т. з. " гумові " сайти не мають сталої ширини. Цей вид верстки є найбільш популярним.

Перевагою таких сайтів є 100%-ве використання робочої області браузера. До недоліку гумової верстки відносять те, що рядки (на моніторах з великим розрішенням екрану або великою діагоналлю) занадто довгі і очі втомлюються по ним бігати. З цією ж проблемою зіштовхуються редактори газет і щоб уникнути її розбивають всі рядки на колонки. З Web-сайтами ситуація дещо простіша. Адже, ширину браузера при потребі можна зменшити і тим самим полегшити процес читання. Але чи всі користувачі захочуть це робити? Тому намагайтесь продумати такого роду ситуації. Сайти з фіксованою шириною. Чи будь-яка ширина підходить? Ні. Поясню чому. Більшість Web-програмістів вважає, що оптимальною має бути ширина приблизно в діапазоні 760-780 пікселів. Це пов’язане з тим, що така ширина дає змогу уникнути появи горизонтальної полоси прокрутки (правило поганого тону) навіть для моніторів з розрішенням 800×600. Недолік сайту з фіксованою шириною макету, як Ви уже напевне здогадались, – недостатньо ефективне використання вільної площі. З цим розібрались. Рухаємося далі. Перед створенням сайту Ви повинні також продумати:

• що буде знаходитися на сайті;
• яким буде стиль дизайну;
• як різні блоки інформації будуть пов’язані між собою.

Велику увагу слід приділити наповненню головної сторінки (home page), бо саме на ній опиняється відвідувач, ввівши в браузері адресу Вашого Web-ресурсу. Це не означає, що її дизайн мусить якось відрізнятися від дизайну решти сторінок. Відмінність полягає в інформації, яку містить головна сторінка. На цій сторінці рекомендується розмістити:

• стислу інформацію про сайт;
• стислий зміст (посилання на головні розділи ресурсу);
• якщо сайт змінюється досить часто, то також там має бути список оновлених сторінок (хоча при можливості під цей список найкраще виділити окреме місце на сайті для того, щоб з будь-якого місця сайту до нього (списку) був доступ).

2. Легка навігація на сайті – ще один крок до успіху

В процесі проектування структури сайту важливим є вибір зручної навігації по Web-ресурсі. Класичним варіантом для розміщення меню і відповідно знайомим кожному відвідувачу є верхня частина робочої області браузера або ж верхня ліва, рідше – верхня права частина. Розташування навігації справа має визначені переваги з погляду зручності, тому що курсор миші частіше за все знаходиться саме в правій частині вікна браузера. Web-ресурси, які містять великі обсяги даних, для кращої навігації по сайті часто комбінують ці варіанти. Якщо при проектуванні сайту Ви очікуєте, що сторінка міститиме багато інформації, то найкраще в такому випадку зробити додаткове нижнє меню. Найчастіше нижнє меню дублює верхнє або ж є скороченим варіантом верхнього. Таке меню при потребі дозволяє, перебуваючи внизу сторінки, швидко перейти на інший розділ. Тут же, внизу, можна розмістити посилання "Наверх" ("Return To Top"), яке б переводило відвідувача до верхнього головного меню. Це посилання можна реалізувати, як за допомогою HTML, так і за допомогою JavaScript. Звичайно, якщо Ваш сайт не передбачає великого обсягу контенту, то і нижнє меню і посилання "Наверх" будуть зайвими. Якщо навігація по сайті – заплутана, то ситуацію може покращити верхнє меню, що випадає. Найчастіше таке меню візуально нагадує стандартне верхнє меню більшості програм ОС Windows. При складній навігації часто неподалік від головного меню розміщують ланцюжок з гіперпосилань, які дозволяють зорієнтуватися про місце перебування і швидко повернутися в ту точку, в якій Ви вже були. Цей ланцюжок може виглядати якось так:

Програмування / Web-програмування / PHP / Робота з файлами і каталогами

Де кожен підпункт ланцюжка – це посилання на окрему сторінку. Якщо Web-ресурс є невеликим, тобто має всього декілька розділів, то достатньо якось виділити, виокремити поточний розділ, для того щоб дати знати відвідувачу, де він знаходиться. Наприклад, посилання можна виділити іншим кольором. Але навігація цим не обмежується. Крім того, Ви повинні забезпечити відвідувачів можливістю з будь-якої сторінки сайту перейти на домашню (головну) сторінку, а також незайвим було б посилання на мапу (карту) Вашого сайту (сторінка, що містить список всіх доступних користувачам сторінок сайту). Найчастіше ці два посилання роблять у вигляді двох малюнків-іконок у верхній частині робочої області браузера або ж додають до головного меню як підпункти. Ідеальним для Вашого сайту буде ситуація, коли до будь-якого місця на сайті відвідувач зможе потрапити максимум за три кліки миші (при умові, якщо сайт не надто великий).

3. Поради по оформленню тексту на сайті

Оскільки текстове наповнення для більшості сайтів відіграє важливу роль, то оформленню тексту слід приділяти належну увагу. Тому наведу деякі поради.

• Не забувайте, колір тексту не повинен бути близьким з кольором фону. Він має контрастувати з тлом сторінки. Чим простіше читати ваше повідомлення, тим більша ймовірність, що його прочитають до кінця. Класичним вважається варіант: чорний текст, білий задній фон.
• Не забувайте розділяти тексти на абзаци. При цьому доцільно було б робити невеликий відступ між сусідніми абзацами. Так зване " Правило пустого простору ". Саме на цих ділянках очі читача відпочивають.
• Ніщо так не прикрашає текст, як грамотність його автора. Я маю на увазі не лише по темі матеріалу, але й грамотності його мови (коментар автора: написав цю фразу і стало страшно, а я грамотно пишу?). Мало кому приємно читати текст в якому що не слово, то помилка. Після прочитання першого абзацу такого творіння відпадає бажання читати далі. Тому, ретельно перевіряйте текст на наявність граматичних помилок. Текст повинен містити більш-менш закінчену думку і якимось чином поєднуватися з наступним абзацом.
• Розмір шрифту не повинен бути надто малим. Особливо, якщо Ви зафіксуєте його і відвідувачі не зможуть змінювати розмір за допомогою браузера. Хоча, заради справедливості, слід зауважити, що такі браузери, як Firefox (так, наприклад, збільшити розмір шрифту можна за допомогою комбінації <Ctrl>+<+>) і Opera, навіть в цьому випадку дозволяють підібрати потрібний розмір.
• Не забувайте про заголовки, про їх виділення на фоні загального тексту. Як показує статистика користувачі звертають увагу перш за все на заголовки і вже в off-line режимі читають сам текст. Тому не буде зайвим, якщо заголовком Вам вдасться зацікавити потенційного читача.
• Одноманітний текст – це, як на мене, недолік. Що я маю на увазі? Ви коли-небудь читали звичайний текстовий файл (наприклад, для користувачів ОС Windows – це файли з розширенням txt)? Ніяких тобі виділень, виокремлень важливих слів, виділення тексту кольором. Але ж HTML має стільки можливостей! Гарно оформлений текст покращує сприйняття і розуміння суті викладено матеріалу. Каскадні таблиці стилів (CSS), наприклад, дозволяють виділити першу букву кожного абзацу. Цим можна скористатись для візуального оформлення сайту. А, якщо обмежитися засобами HTML, то слід виокремлювати важливі фрагменти тексту жирним шрифтом, іншими кольорами, тощо.

4. Додаткові сервіси або не текстом єдиним

Звичними для нас вже стали статті, поряд із якими є: надпис, що засвідчує авторство, дата публікації, лічильник переглядів, …. Так, відвідувач може відмовитися читати статтю через недовіру до автора, або ж "несвіжість" матеріалу, чи не стане читати її, бо індикатор кількості переглядів стоїть на низькому рівні. Але цим можна не обмежуватися. Не завадили б також: можливість переглянути версію для друку, можливість проголосувати за статтю (оцінити матеріал). Стаття розміщена на сервері і автор забуває про неї. А між тим в ній можуть бути неточності, грубі помилки, логічні діри, … Якось змінити ситуацію на краще можна дозволивши відвідувачам залишати коментарі до статті. Боятись негативних відгуків не варто. Знаючи про помилки в тексті Ви завжди зможете їх при бажанні виправити. Але пам’ятайте, якщо Ви гадаєте, що стаття негідна бути підписана Вашим ім’ям, то краще не публікувати її на сайті.

5. Висновок

Звичайно цим список порад по створенню зручного Web-сайту не обмежується. Ви повинні розуміти, що зручний сайт збільшує ймовірність повернення відвідувача в майбутньому і, отже, як ніхто інший маєте бути зацікавлені в цьому. Успіхів Вам у всіх Ваших починаннях! Автор – Ігор Виспянський, для Блогорідера Джерело – http://it.ridne.net/node/296

1. UA Webstar – окремий сайт