<![CDATA[Статті, посібники, приклади для новачків]]> ru <![CDATA[Малюємо в CSS - посібник для початківців]]> можливості малювання на сервері - мова йшла про GD, PHP-бібліотеку для роботи з графікою, а цього разу хочу запропонувати помалювати... без малюнків. Думаєте, так не буває? Давайте спробуємо, а як помічник у нас буде CSS. У тетьей версії CSS містить досить потужні й гнучкі можливості - ми спробуємо розглянути їх використання. Єдине, що доведеться враховувати - це IE, який до 8-ої версії включно не розуміє CSS 3.

Щоб ознайомитись з діючим прикладом, достатньо розглянути іконки на моєму блозі - іконки RSS і твіттера зроблені без використання графічних зображень. Давайте зробимо таку ж саму кнопку для твіттера?

html-код у нас буде простий до неподобства, всього один параграф, в якому міститься всього одне посилання:
<p style="padding:20px;"><a class='twitter' href='http://twitter.com/webamator'>t</a></p>

Подивіться що вийшло - не дуже нагадує іконку, правда? Тож спробуємо додати стилі для класу twitter:

* { margin: 0; padding: 0;}
html { overflow-x: auto; } 
 
.twitter{
display: block;
position: relative;
width: 116px;
height: 116px;
padding: 0;
border-color: #000053;
text-align:center;
text-shadow: 0px 0px 10px #fff;
text-transform: lowercase;
font-size: 96px;
font-weight: bold;
font-family: Tahoma;
color: #fff;
background: #0c7eee;
}

Знову дивимося що вийшло. До речі зверніть увагу на ефект тіні - результат властивості text-shadow. Однак синій квадрат - не зовсім те що ми хотіли, чи не так?
Давайте додамо трохи магії CSS 3:

-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
box-shadow: 0 0 4px rgba(0,0,0,0.4);

Зверніть увагу, що box-shadow зазначено три рази (з префіксом webkit, moz і без префікса). Префікси потрібні для того, щоб дану властивість коректно розуміли старіші версії Safari, Google Chrome та Mozilla Firefox. Всі нові версії (актуальні на момент написати статті) даних браузерів, а також Opera та IE9 розуміють дані властивості без префіксів, так що використовувати їх чи ні - вирішувати тільки вам. Якщо подивитися поточний результат то можна помітити невелику тінь навколо синього квадрата - це і є результат box-shadow.

Давайте додамо ще одну властивість:

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

Про префікси вже казалося вище, а що таке border-radius, думаю знає кожен хто в 3-му класі не прогулював англійську. Підказую тим хто прогулював - перекладається як "радіус рамки". Дивимося на результат. Вже симпатичніше, вірно?

На десерт додамо градієнт (плавний перехід одного кольору в інщий):

background: -webkit-linear-gradient(top, #3faeee, #0c7ccc);
background: -moz-linear-gradient(top, #3faeee, #0c7ccc);
background: -o-linear-gradient(top, #3faeee, #0c7ccc);
background: linear-gradient(top, #3faeee, #0c7ccc);

Знову подивимось. З градієнтом на мій погляд набагато симпатичніше. Наостанок давайте додамо трохи ефектів, які будуть з'являтися при наведенні мишкою. А заодно приберемо підкреслення:

a.twitter{
text-decoration:none;
}
 
a.twitter:hover{
box-shadow: 0px 0px 10px #2e9eee;
text-shadow: 0px 0px 15px #fff;
}

І ось він - підсумковий результат. Сподіваюся що даний приклад послужить уроком, після якого ви зможете "малювати" елементи сайту за допомогою CSS 3.]]> Практика http://webamator.org.ua?id=20 Sat, 22 Oct 2011 23:14:16 GMT <![CDATA[Значення value для поля password]]>
Одним словом, потяг що прибув виглядав набагато гірше за своїх "некрасивих" побратимів. Тоді власник залізничної компанії звернувся до інженера - щоб той проконсультував найнятих художників і скульпторів.

За легендою це і був перший у світі дизайнер. Навіщо така довга передісторія? По-перше просто красива легенда smile - а по-друге за останні півтора місяця до мене вже двічі зверталися з проханням, яке можна порівняти з побажанням вищезгаданого власника залізничної компанії. Йдеться про значення value для типу поля password. Щоб краще зрозуміти про що йдеться, ось фрагмент зображення того що хоче замовник:



Слова Login та Password повинні бути прямо всередині поля, а не як зазвичай - збоку або зверху від нього. Для тих хто не бачить у такому побажанні нічого дивного, невелике пояснення. Для поля з логіном проблем не виникає, але для поля з паролем... Якщо для поля зазначений тип "password", то вміст поля буде приховано. Залежно від браузера, зірочками або кружечками. Це зроблено для того, щоб пароль, який вводить користувач, неможливо було "підглянути" стороннім людям. Для прикладу я поставив value = "Password:" - можете подивитися що виходить:



Гадаю, що тепер зрозуміло про що йде мова. Художник який малював даний макет був колегою того художника, який малював орнаменти і квіти на котлі паровоза. Він просто не знав про особливості різних типів полів - так само як і його колега не знав що нагрівання паровозного котла призводить до того, що фарба розтріскується і "облазить". Це не говорить про те що він поганий художник, але це говорить про те що він саме художник а не дизайнер.

Вважаю, що всього вишенапісанного достатньо щоб майбутнім замовникам пояснити, що деякі речі треба малювати саме так а не інакше. Але... іноді хочеться зробити те, що ніхто ніколи не робив - просто для того щоб не втрачати навики. А ще щоб зайвий раз підтвердити фразу "в програмуванні немає нічого неможливого, буває лише недоцільне". Давайте спробуємо поєднати несумісні речі - щоб в поле password стояло слово Password?

Спочатку створимо нашу форму:


<form method="post">
<input type="text" name="login" size="40" /></p>
<input type="password" name="password" /></p></form>

Нічого надзвичайного - всього два поля. У верхнього type = "text", у нижнього type = "password". Далі додамо стилі, щоб поля виглядали "як на картинці", тобто відповідали технічним завданням:


.formfield0, .formfield1{
border: 0;
height: 26px;
padding: 0 0 0 11px;
margin:0;
width: 242px;
font-family: Arial;
font-size:14px;
font-weight: bold;
}
 
.formfield0{ 
background:#fff url('pbg0.png') no-repeat;
} 
.formfield1{
background:#fff url('pbg1.png') no-repeat;
}

Уважний читач вже звернув увагу що в стилях використані два фонових зображення. В мене вони називаються pbg0.png та pbg1.png - одне у вигляді звичайної рамки для поля, інше у вигляді рамки з написаним словом Password. При завантаженні сторінки ми будемо показувати зображення зі словом Password, а якщо користувач клацне мишкою в цьому полі - просто поміняємо картинку. Для цього замінимо рядок, що описує поле з паролем ось на такий:


<input type="password" class="formfield0" name="password" onClick="this.className='formfield1'" />

Думаю тут все зрозуміло - якщо клацнути мишкою (подія onClick) то змінюється клас formfield0 на formfield1. Приклад вже практично робочий, але ... погодьтеся - буде не дуже добре якщо поле для введення пароля "очищається" по клацанню мишкою, а поле для введення логіна - ні.
Давайте додамо мініатюрну функцію, яка очищатиме поле з логіном:


function clearElem(obj){
  obj.value = ' ';
}

І змінимо відповідний рядок у нашій формі на ось такий:


<input type="text" class="formfield1" name="login" onClick='clearElem(this); return false;' value="Login:" size="40" />

Вже краще, наше рішення вже майже працює. Чому "майже"? Та тому що існує така собі фірма Microsoft, яка випускає програму Internet Explorer. Взагалі-то програма Internet Explorer потрібна лише для того, щоб єдиний раз її запустити і завантажити собі браузер, проте деякі користувачі використовують Internet Explorer замість браузера - саме у них наш приклад буде працювати трохи некоректно. Щоб "вилікувати" підробку від Microsoft, додамо невелику умову:


<!--[if lte IE 8]>
<style type="text/css">.formfield0, .formfield1{
padding-top: 6px;
}
</style>
<![endif]-->

Все, тепер наш приклад працює у всіх браузерах (Opera, Firefox, Safari, Chrome) і навіть у програмі Internet Explorer.
Можете подивіться на діючий приклад або просто завантажити готовий код на свій комп'ютер:
punbb.zip]]> Практика http://webamator.org.ua?id=19 Sat, 13 Aug 2011 22:53:05 GMT <![CDATA[Оновлено показ останніх форумних тем]]> Сьогодні я написав (а точніше переписав) плагін, що виводить останні форумні повідомлення. На мій погляд, получилося набагато краще ніж було раніше. По-перше, крім назви повідомлення показується його анонс (тобто кілька перших слів). Кількість слів можна змінити в налаштуваннях плагіну, так само можна змінити кількість повідомлень що будуть показані на сайті. По-друге, я відмовився від передачу даних з форуму через MySQL на користь RSS, на мій погляд це надає суттєві переваги - про переваги трохи нижче.

Наприклад, тепер не має значення на базі якого движка створено форум (плагін протестовано на форумах PunBB та SMF, але повинен працювати й з іншими).

Іще одна перевага - тепер не має значення домен, на якому стоїть форум. Тобто, якщо у вашого сайту немає свого форуму - ви можете показати останні повідомлення з будь-якого тематичного форуму (звичайно, якщо домовитись з йогог адміністратором). Адреса RSS-стрічки також вказується в налаштуваннях.

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

punbb.zip
]]> Новини http://webamator.org.ua?id=18 Tue, 08 Mar 2011 22:31:12 GMT <![CDATA[Малюємо в PHP - GD для початківців]]> тег hr я звернув увагу, що це єдиний тег в html, який хоч щось малює. І дійсно, в html вся графіка не малюється а вставляється за допомогою зовнішніх об'єктів. Колись давно, коли сервери були великими а процесори у них були слабенькими PHP теж не вмів малювати - адже він створювався для роботи з текстом. Проте сьогодні зросли як потужності серверів, так і потреби користувачів. Як приклад динамічно згенерованих зображень можу навести всім відому CAPTCHA. Або водяні знаки для картинок - так звані wotermark. Або динамічні юзербари для форумів. Або... а давайте напишемо невеликий скрипт, який нам послужить і уроком і прикладом одночасно?

Спершу познайомимся з теоретичними знаннями. Припустимо у нас є якийсь сайт, на якому відвідувачі можуть реєструватися і вказувати свої контактні дані (телефон, e-mail, ICQ, тощо). І ми хочемо захистити наших відвідувачів від спамерів. Адже як спамери збирають свої бази? Спамер запускає спеціальний скрипт (парсер), який шукає на сайті всі комбінації символів, серед яких є знак @. Завдання парсера - знайти все, що потрапляє під формулу ***@***.*** (замість зірочок можуть бути любі символи) - це і буде адреса електронної пошти. Спочатку від подібних парсерів захищалися, замінюючи в електронній адресі символ @ на щось інше, наприклад (a) або (at) - можливо ви зустрічали подібні "замасковані" e-mail. Але розробники парсерів не сидять на місці - адже "пояснити" скрипту що ціль парсинга замість @ може містити (a) або (at) не дуже складно.

Але якщо замість комбінації символів ***@***.*** буде зображення, то парсер не прийме його за адресу електронної пошти. Подивіться живий приклад у дії - спробуйте ввести google.com.ua і подивіться його дані. Зверніть увагу на значення e-mail. Це картинка, яку легко прочитає людина але яку пропустить програма-парсер. Давайте зробимо щось подібне собі.

З теорією розібралися, із завданням визначилися - тепер саме час приступити до практики. Для початку нам доведеться переконатися що на сервері встановлена бібліотека GD - саме вона нам знадобиться для "малювання". Впишіть в який-небудь файл

<?php
phpinfo();
?>
Перед вами з'явиться інформація про PHP - версія, встановлені розширення і т.д. Якщо ви увидіти GD Support enabled значить все в порядку. Давайте створимо файл str2img.php, в який запишемо наступний код (щоб було всім зрозуміло, кожен рядок містить коментар):

$mystr = $_GET["mystr"];// Змінна $ mystr буде містити значення, яке ми передамо в файл
$im = imagecreate (220, 16); // Створимо малюнок 220 на 16 пікселів
$bg = imagecolorallocate ($im, 245, 245, 245); // Задамо колір заднього фону (255 - білий, 0 - чорний)
 
for ($i = 0; $i < strlen($mystr); $i++) { // Запустимо цикл, що виконається стільки разів скільки символів містить наше слово
    $color = imagecolorallocate ($im, 0, 0, 0); // Задамо колір для символів (255 - білий, 0 - чорний)
    $x = 8+$i * 8; // Кожен новий символ намалюємо на 8 пікселів правіше
    $y = 0; // Оскільки пишемо в один рядок, горизонтальні координати = 0
    imagechar($im, 2, $x, $y, $mystr[$i], $color); 
} 
 
header("Content-type: image/png"); 
echo imagepng($im); // Показуємо намальоване
imagedestroy($im); // Звільняємо пам'ять

Даний файл намалює нам все, що ми йому передамо методом GET, ось приклад:

<img src="str2img.php?mystr=hosting from webamator.net" />

Замість фрази hosting from webamator.net можете передавати потрібне значення - наприклад, як і було сказано спочатку, адреси електронної пошти, які будуть "заховані" від парсерів. Можете подивитися діючий приклад даного скрипта.]]> Практика http://webamator.org.ua?id=17 Wed, 17 Nov 2010 15:16:04 GMT <![CDATA[Зміна структури сайту]]> інструменти-сервіси та форум будуть розміщені окремих на піддоменах. Це зроблено з декількох причин: по-перше, легше аналізувати та просувати три менших ресурси ніж один загальний і великий. По-друге, це дає певну гнучкість при оптимізації в майбутньому. По третє, це надасть хоч і невеличкий, але всеж-таки бонус тим хто займається в нашому гуртку. Хочете знати який?

Все дуже просто, оскільки домен та піддомен пошукові системи бачать як різні сайти, ви маєте можливість отримати цілих два посилання на свої сайти, із двох різних веб-адрес. Це додасть вашим сайтом трішечки "халявного" ТІЦ та PR, а також дасть змогу получити гарні анкори на свої сайти.

Крім того, поставив окремі лічильники - на сайт, на форум, та на самі сервіси. Крім того, ... ні, все розказувати не буду, нехай залишиться хоча б один маленький секрет. Лише скажу, що самі уважгі зможуть получити не посилання не з двох, а з трьох (!) різних веб-адрес.
]]> Новини http://webamator.org.ua?id=15 Fri, 02 Jul 2010 21:40:42 GMT <![CDATA[Генератор паролів]]> генератор паролів. Для чого він потрібен? Щоб більш-менш повно відповісти на це питання, давайте спробуєм трохи ознайомитись із теоріею. Майте на увазі, що відомості про стійкість алгоритмів чи паролів в статті лише теоретичні і сама стаття написана лише з метою попередити вживання простих паролів.

Теорія номер один
Більшість сучасних CMS вміє шифрувати паролі, найчастіше це робиться за так званим алгоритмом md5 (кому цікаво детальніше ознайомитись із md5, читаємо тут). Це робиться з кількох причин і одна з них - додатковий захист. Припустімо, що зловмисник якимось чином зміг заволодіти базою даних користувачів, він все одно не зможе побачити ваш пароль, оскільки пароль зашифровано. Наприклад, якщо пароль користувача буде secret то зловмисник побачить ось такіий набір символів: 5ebe2294ecd0e0f08eab7690d2a6ee69 - це і буде md5 хеш слова secret.

Але насправді не все так весело - даний 128-бітний метод криптографії було придумано за часів самих перших Pentium та Pentium MMX а на сучасних чотирьохядерних Core Quad або Phenom такий хеш "відкривається" за лічені хвилини. Проте чим довший пароль, тим більше часу потрібно на його розшифровку.

Теорія номер два
Саме тому склалася дуже поширена думка, що чим довший пароль тим він надійніший. Це так, але не зовсім. Ось вам для прикладу один пароль що має довжину 20 символів: 68751687462487587564 та інший що має довжину 10 символів: ?adJT}ntmV. Запущена на Athlon X2 4600 програма-брутфорсер "відкриває" перший пароль за кілька десятків хвилин. Другий пароль програма не змогла "відкрити" на протязі трьох діб, після чого тестовий комп'ютер було вимкнено.

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

Якщо вам бракує часу придумувати захищений пароль, ви завжди можете скористатися генератором паролів.
]]> Новини, Інструменти http://webamator.org.ua?id=14 Sat, 08 May 2010 21:19:49 GMT <![CDATA[Весняне оновлення]]> першим, хоча візуально він розташований посередині.
Ми обов'язково навчимося робити шаблони за допомогою negative margins (саме так це зветься англійською), а поки що хочу звернути увагу ще на деякі зміни.

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

День-два можлива так звана "шліфовка", тобто виправлення маленьких (і не дуже) неточностей, деякі незначні зміни і т.інш. Також є невирішені питання - наприклад, поки що не вирішив стосовно адаптації під застарілі браузери. Або піддомени (є думка, що форум та сервіси краще розміщувати на піддоменах).

Якщо є певні думки, поради або побажання - ласкаво просимо на форум або в коментарі.]]> Новини http://webamator.org.ua?id=13 Tue, 13 Apr 2010 12:55:50 GMT <![CDATA[Доля нашої освіти]]> webamator буде говоритися про політику... Але те що робиться з нашою освітою зараз, не дозволяє стояти осторонь і мовчки дивитися - адже завдяки відомому і одіозному "гаспадіну табачнику" рівень української освіти може бути значно знижено.
Смію завірити відвідувачів, що я чув і бачив запитання на кшалт "чого всі накинулись на табачника? Дайте йому показати на що спроможний і якщо не справиться то лише тоді вигнати". І хочу дати відповідь на такі запитання, відповім своїм запитанням.
Люди добрі, а чи ви сядете в машину, водій якої в нетверезому стані? Він же (водій) ще нікого не збив, ніяких аварій не створив, та й взагалі - доки не рушив з місця, навіть правил не порушив...

Ось така аналогія напрошуєтья з тим самим "гаспадіном табачником" - чи варто експериментувати з майбутнім наших дітей? Чи може бути так, щоб людину, яка заплямована криміналом, людину, яку навіть ії однопартійці називають клоуном і казнокрадом зробили відповідальною за навчання наших дітей?

Особисто я вже давно не студент, але мене, як і мільйони українських батьків, турбує майбутнє моїх дітей. Саме це майбутнє "гаспадін табачник" пробує в них відібрати! Офіційно нібито все добре, подивіться самі:

"гаспадін табачник" офіційно заявив, що за "антитабачні" акції молодь та студентів не будуть переслідувати...
Насправді на студентів тиснуть, і навіть з'явився небачений раніше прецендент - одного з участниуів (хоч і не студента) кинули за грати (!)

"гаспадін табачник" офіційно заявив, що бажає підняти рівень української освіти
Насправді гаспадін табачник вже зараз майже знищив ЗНО в звичному сенсі, на черзі - Болонська система? Навіщо робити кардинальні зміни за два місяці до випускних іспитів?

А на додачу трохи відео - ось думка одного із заступників "гаспадіна табачника" про тих студентів, що виступають проти його призначення.


P.S.
Особисто мені дуже хочеться попросити гаспадіна табачника... Ви не допомогаєте і це цілком природно - не чекати від влади допомоги... Живіть собі тихенько, як і раніше, крадіть тихенько, як і раніше (аж поки не спіймають на гарячому, настільки гарячому що недоторканість не допоможе)... Але не заважайте, просто не заважайте. Адже ваші діти навчаються за кордоном, а наші - в Україні. Відчуйте різницю.]]> Новини http://webamator.org.ua?id=12 Fri, 09 Apr 2010 18:10:14 GMT <![CDATA[Оновлення]]> webamator.org.ua працював на NG CMS (Next Generation CMS) версії 0.9, і лише сьогодні, як то кажуть, дійшли руки оновитися до 0.9.1. Хоча шаблон та файли локалізації для нової версії були готові ще кілька місяців тому...
Якщо в двох словах, то NG CMS - одна з найпотужніших open-source систем керування контентом у світі, один з ії головних козирів - дуже швидка робота при великій кількості даних.

Одна з причин настільки довгого переходу - відсутність нормального рішення для показу різноманітного коду. Оскільки webamator.org.ua - сайт що призначений веб-дизайну та веб-програмуванню, то цілком природно, що на ньому буде багато прикладів різноманитного html та php коду, а цей код зручніше читати, коли він гарно оформлений.

Перебравши досить варіантів, від монстроподібного GeSHi (Generic Syntax Highlighter) до code prettifier від Гугла, я так і не знайшов рішення, яке б підійшло для webamator-а. GeSHi звичайно, дуже гарна штука, але із ним сторінка генерується 40-50 мілісекунд, тоді як без нього - всього 10-15... Середня різниця в чотрири (!) рази - на мій погляд, дуже велика плата за красу... Інші варіанти, хоч і працювали швидше, мали інші недоліки.

Отже, поки що код буде виводитись приблизно так:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ua">
<head>
</head>

<body>

</body>

</html>
PHP
<?php
$geshi->set_header_type(GESHI_HEADER_DIV);
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS,1);
$rep=$geshi->parse_code();
?>

Згодом, як буде знайдено (або зроблено) більш швидкий аналог GeSHi, можливо вигляд коду змінеться.

І ще одне, якщо будуть бажаючі створювати сайти саме на цій системі, можливо буде доречним зробити розділ на форумі про NG CMS. Система молода, перспективна і дуже потужна, а також (що досить важливо для небагатих українських користувачів) цілком безкоштовна.
]]> Новини http://webamator.org.ua?id=11 Sun, 28 Feb 2010 20:43:48 GMT <![CDATA[CHMOD або атрибути файлів в Unix]]> Що це за штука і з чим ії потрібно їсти? І навіщо нам якісь атрибути?

Трохи історії із суперечок Windows чи Unix

Ви всі знаєте, що в Windows файли можить мати певні атрибути - наприклад read-only (файл тільки для читання) або hidden (прихований файл). Також всі ви знаєте, що більша частина серверів на нашій планеті стоять під Unix або Linix... Надійність цих систем не в останню чергу пов'язана із потужною системою атрибутів. Також через неї (систему атрибутів) поширино міф, що для Unix немає вірусів. Це не зовсім правда - теоретично можна написати вірус і для Unix, але... при грамотно налаштованій системі він не зможе задіяти ніякой шкоди :) Отже, оскільки наш сервер також працює під Unix, повертаємось до наших атрибутів
В Unix файли можуть мати атрибути:

execute (запуск) 1
write (запис) 2
read (читання) 4

якщо ці цифри скласти в певних комбінаціях, то вийде така табличка атрибутів:

1 = execute (запуск);
2 = write (запис);
3 = write, execute (запис, запуск);
4 = read (читання);
5 = read, execute (читання, запуск);
6 = read, write (читання, запис);
7 = read, write, execute (читання, запис, запуск);

Складно? Це ще не все :)

Можливо ви чули щось на кшалт 644, 755 або 777?

В Unix атрибути вказують не лише для файлів, але й для груп

перша цифра - для власника файлу (тобто для вас/ваших скриптів)

друга цифра - для вашої групи (потрібно для деяких скриптів)

третя цифра - для всіх інших

Думаю, що тепер цифри 644 не будуть для вас "китайською грамотою"

Якщо файл має такий атрибут, то:
1 цифра (ви) можете його читати та записувати в нього інформацію (4+2=6)
2 цифра (ваша група) можуть його лише читати (4)
3 цифра (всі інші) також можуть його лише читати (4)

Якщо ви просто переписали якийсь файл чи скрипт, зазвичай його атрибути будуть 644
Змінити їх ви можете за допомогою любого FTP-менеджера
Якщо користуєтесь ФАР-ом, для того щоб поставити необхідні атрибути треба навести курсор на потрібний файл, натиснути комбінацію Ctrl+A і вибрати потрібні атрибути.]]> Теорія http://webamator.org.ua?id=10 Tue, 05 Jan 2010 18:47:03 GMT <![CDATA[Перші досягнення]]>
Якщо хочете переглянути зображення в повному розмірі, просто клацніть по них... Але будьте обережні якщо у вас слабенький інтернет - адже "повні" дипломи мають розмір більше 3 мегабайт smile





]]> Новини http://webamator.org.ua?id=9 Fri, 25 Dec 2009 14:41:00 GMT <![CDATA[Симпатичне оформлення тегу legend]]> наші сервіси. Саме тому всі відступи і кольорова гама в коді використана така, як на сервісах. Але для себе ви можете змінити їх на будь-які інші - тут описаний лише базовий принцип подібного оформлення.

Для початку створимо ефект тіні для блоку. Для цього просто використовуємо три вкладених слоя main, shadow та fieldset.
Ось їх html-код:
<div class="main">
<div class="shadow">
<fieldset>Тут буде зміст блоку</fieldset>
</div>
</div>

А ось CSS-код:
.main{
width:432px;
}
.shadow{
position: relative;
left: 10px;
top: 10px;
background-color: #b5dbf1;
}
fieldset {
display:block;
padding:15px;
margin:0px;
border:solid #0c7eee 1px;
background-color: #fff;
position: relative;
left: -5px;
top: -5px;
width:400px;
}

Сподіваюся, особливих питань не виникне, але все-таки пару слів з приводу fieldset.
Якщо вас збентежила різниця у ширині блоків main і fieldset, то зверніть увагу на відступи і border - саме в сумі (з правого і лівого боку) виходить 32 піксела.

Тепер пропишемо CSS для legend (сам тег legend додамо між відкритим і закритим тегами fieldset)
C допомогою абсолютного позиціонування і мінусового значення top трошки "піднімимо" legend по відношенню до fieldset.
legend {
background:#b5dbf1;
border: 1px solid #0c7eee;
padding:2px;
position:absolute;
top: -12px;
left: 12px;
}

На перший погляд, ось і все. Дійсно - в IE 6, 7, 8 і Opera 9 даний приклад відмінно працює. Сюрприз на цей раз підніс Mozilla Firefox - чесно кажучи, не очікував такого від хлопців з MF.

Для Firefox ми скористаємось невеликим хаком і вкладеним тегом span. За допомогою @-moz-document url-prefix () ми можемо вказати стилі тільки для FF, інші браузери будуть його ігнорувати. Тому просто додамо CSS-код для FF:
@-moz-document url-prefix()
{
legend span {
display:block;
background:#b5dbf1;
border: 1px solid #0c7eee;
padding:2px;
position:absolute;
 
top:-30px;
left: 0px;
}
}
А між відкритим і закритим тегами legend додамо блок span:
<legend>
<span>Назва блоку:</span>
</legend>
Ось і все, а якщо щось не виходить, запитуйте в коментарях або на форумі.]]> Практика http://webamator.org.ua?id=7 Tue, 27 Oct 2009 13:28:36 GMT <![CDATA[Особистий веб-сервер]]> Apache Software License, що дає право безкоштовно використовувати веб-сервер для будь-яких цілей, вільно змінювати і поширювати змінені копії.

Колись Апач працював виключно під UNIX, але сьогодні є багато модифікацій під інші ОС, в тому числі й під Windows. Ми будемо використовувати в роботі збірку від Дмитра Котерова, відому як Денвер (Джентльменський Набір Веб-Розробника). Окрім самого Apache, вона включае в себе модулі SSL, SSI, mod_rewrite, mod_php, PHP5, GD, MySQL, sqLite, phpMyAdmin та емулятор sendmail і SMTP-сервера. При необхідності Денвер легко може навчитися додатковим можливостям (таким як ActivePerl, Python, старі версії PHP або СУБД PostgreSQL)

Якщо ви вже втомилися читати про переваги Денвера (Денвер має й недоліки, про які нижче), можемо переходити до інсталяції. Перейдіть на сторінку завантаження і натисніть кнопку "Завантажити Денвер". Введіть в поле свій e-mail - на нього буде вислане посилання для завантаження дистрибутиву. Перейдіть за цим посиланням і трохи зачекайте - почнеться завантаження пакету. Після того, як пакет завантажений, просто запустіть получений файл.

Вам буде запропоновано обрати каталог для встановлення (якщо нічого не міняти, пакет буде встановлений в C:\WebServers). Рекомендую не ставити Денвер на системний диск (тобто якщо система у вас стоїть в C:\Windows, для Денвера введіть D:\WebServers). В цьому випадку при перевстановленні або апгрейді Windows ви збережете всі свої скрипти і бази даних. Далі інсталятор запропонує обрати ім'я для віртуального диску, необхідного для роботи Апача. Дефолтне значення - Z:, але якщо у вас встановлений який небудь емулятор CD-DVD (наприклад Daemon Tools), ім'я Z: може бути зарезервоване для нього. Буває, що ім'я Z: мають деякі кард-рідери або mp3-плеєри. В цьому випадку оберіть для віртуального диску Апача любе незайняте ім'я.
Після того, як закінчеться копіювання необхідних файлів, вам буде запропоновано обрати метод запуску сервера. В першому випадку віртуальний диск буде створюватися разом із запуском Windows, а при зупинці комплекса диск відключатися не буде. В другому випадку віртуальний диск буде створюватися лише при запуску сервера, а при його зупиненні відключеться. Рекомендую обрати саме другий варіант, оскільки він дозволяе економити оперативну пам'ять в той час, коли веб-сервер не використовується.

Базовий пакет встановлений, тепер саме час перевірити чи коректно він працює. Поки що нас цікавлять лише PHP та MySQL. Для перевірки PHP перейдіть в каталог D:\WebServers\home (якщо ви ставили пакет на інший диск, замість D: введіть його), створіть каталог mysite а в середині нього створіть каталог www. В каталозі www створіть файл index.php, в якому напишіть:
<?php echo"Apache is running";?>

Повний путь до цього файлу (будемо вважати, що ви поставили пакет на диск D:) має бути таким:
D:\WebServers\home\mysite\www\
На вашому десктопі з'явилося три іконки - Start Denwer, Stop Denwer та Restart Denwer. Запустіть Start Denwer і зачекайте, доки закриються всі консолі. Тепер запустіть браузер і в ньому наберіть http://mysite/
Якщо ви побачили напис Apache is running все зроблено вірно.

Для перевіки MySQL просто наберіть в браузері http://localhost/Tools/phpMyAdmin/ - відкриється phpMyAdmin. Для зручності можете змінити мову з англійської на українську або россійську і спробуйте створити пусту базу даних. Працює? Можете себе поздоровити - все зроблене вірно.

В кінці хочу дати кілька порад.
По-перше слід пам'ятати про регістр символів. Під Windows 
include script.php

та 
include Script.php
- це одне й те саме, але в *nix системах script.php та Script.php - це абсолютно різні файли. Оскільки скоріше за все ваш сайт буде працювати під UNIX або Linux, варто не забувати, що маленькі і великі букви в назвах файлів мають значення.
По-друге слід пам'ятати, що Денвер - пакет для розробників. Повторю ще раз - тільки для розробників. Тобто він абсолютно незахищений від зовнішніх атак. Ставити на нього працюючі проекти і робити їх доступними в інтернет дуже небезпечно - для цього краще скористатися іншою збіркою Apache.
]]> Інструменти http://webamator.org.ua?id=6 Tue, 21 Apr 2009 19:14:21 GMT <![CDATA[Форум]]> форум, ласкаво просимо до дискусій. Думаю, він допоможе тим, хто з якоїсь причини пропустив заняття в гуртку, а також дасть змогу зробити заняття більш демократичними. Адже учні можуть не тільки знайомитись з інформацією, але й додавати свою - наприклад, висловлюватись, які саме теми їх цікавлять.

Проведене початкове налаштування, створені початкові розділи, адаптований дизайн. Щоб не створювати новачкам перешкод, реєстрація поки що максимально спрощена. Всі побажання щодо розвитку на наповнювання можна залишати на самому форумі]]> Новини http://webamator.org.ua?id=5 Thu, 16 Apr 2009 14:48:03 GMT <![CDATA[Браузери]]> Opera.

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

Перше - це можливість переглядати ваш макет в режимі комунікатора. За деякими даними, останніми місяцями кожний 20-ий відвідувач переглядає сайти через мобільний пристрій (телефон, смартфон, комунікатор, тощо). Це досить значна цифра, щоб нею нехтувати. Тому не забуваємо перевірити, який вигляд буде мати наш макет на екрані мобільного пристрою (View->Small Screen в головному меню Opera).
Друге - це можливість швидко вмикати та вимикати графічне оформлення сайту. Сьогодні досить значна частині користувачів переглядає сайти, використовуючи тандем ноутбук+мобільний телефон або ноутбук+GSM модем. Зазвичай вони відключають зображення для того, щоб не платити за зайві кілобайти. Грамотно спроектований сайт не повинен розпадатися як з ввімкненною так і з вимкненною графікою. Щоб краще зрозуміти, для прикладу спробуйте відключити графіку переглядаючи google.com, bigmir.net або mail.ru. А в Opera найзручніше вмикати-вимикати графіку (переключаємо праву нижню кнопку на Show Images або No Images)
Третє - це можливість швидкої валідації. Це потрібно, щоб пересвідчитись, що помилок немає (або побачити існуючі помилки). Існує багато валідаторів, але найпопулярнішим є онлайновий сервіс від W3C (консорціума, що займається стандартами для www). Саме до нього звертається Opera, якщо в контекстному меню вибрати Validate або одночасно натиснути Ctrl+Alt+Shift+U.

Firefox.

Якщо Opera просто дозволяє робити деякі речі швидше і зручніше, то Firefox претендує на роль потужного і професійного інструменту. До того ж цілком безкоштовного. Точніше, не сам Firefox а його численні додатки-плагіни. Завдяки відритій архитектурі Firefox має більше плагінів, ніж усі інші браузери, разом взяті. Я не буду описівати всі існуючі можливості - для цього мені не вистачить місця, наданного хостером :)

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

Увага! Задля вашої безпеки завантажуйти додатки лише з addons.mozilla.org!

По-перше рекомендую найвідоміший серед веб-розробників Firebug та дуже зручний тулбар Web Developer. Розповідати про них можна багато, але... Це саме той випадок, коли краще один раз побачити - сьогодні ці додатки встановлені у переважної більшості веб-дизайнерів.
По-друге Window Resizer - він допоможе швидко переглянути макет при різних налаштуваннях екрану (це набагато швидше, ніж кожен раз змінювати налаштування вручну).
По-третє, ColorZilla та MeasureIt. ColorZilla надає можливість легко визначити потрібний колір в HEX-форматі, а MeasureIt - висоту та ширину необхідних блоків в пікселях.

Opera та Firefox можуть значно допомогти в роботі, чи потрібно в такому випадку додатково ставити інші браузери? Це питання кожен вирішує по своєму, але не варто забувати що існують ще Safari, Google Chrome та IE - варто хоча би переглянути макет в цих браузерах.]]> Інструменти http://webamator.org.ua?id=4 Tue, 14 Apr 2009 19:43:03 GMT <![CDATA[Як верстають сайти]]>
Варіант 1 - фрейми.

Спробуємо створити найпростіший шаблон за допомогою фреймів. По-перше, нам знадобиться своєрідний контейнер, що буде описувати фреймову структуру. Нехай він буде зберігатися у файлі frameset.html, ось його зміст:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
<title>файл frameset.html</title>
</head>
<frameset cols="90,*" frameborder="0">
<frame src="frame_main.html" name="menu">
<frame src="frame1.html" name="content">
</frameset>
</html>
Якщо уважно переглянемо вищенаведений код (рядки 9 та 10), то побачемо, що файл frameset.html буде завантажувати ще два файли - frame_main.html, що буде відповідати за навігацію та та frame1.html, що буде містити контент. Оскільки frame_main.html відповідає за навігацію, саме він містить лінки, по яким користувачеві буде завантажуватись необхідний контент (frame1.html або frame2.html, в залежності від того, який лінк натисне користувач). Ось приклад frame_main.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл frame_main.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<a href="frame1.html" target="content">frame1.html</a>
<a href="frame2.html" target="content">frame2.html</a>
</body>
</html>
Файти frame1.html та frame2.html відповідають за контент (тобто зміст, саме те за чим користувач завітав на сайт). Ось приклад frame1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл frame1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<p align="center">зміст файлу frame1.html</p>
<p align="justify">
Тут, власне, має буде необхідний контент. 
Саме його побачить відвідувач, якщо натисне "frame1.html".
Також ви можете побачити контент другого файлу. 
Для цього просто натисніть "frame2.html"
</p></body>
</html>
І на додачу приклад frame2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл frame1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<p align="center">зміст файлу frame2.html</p>
<p align="justify">
А це зміст файлу frame2.html.
Ви можете знову повернутися до перегляду першого файлу.
Для цього просто натисніть "frame1.html"
</p>
</body>
</html>
Якщо бажаєте, можете подивитися, як виглядає цей приклад в окремому вікні браузера.

(відкриється в новому вікні)

Здавалося б все добре, приклад працює, чому б не використовувати фрейми? Років десять тому саме так і робилась досить значна частина сайтів, але сьогодні... Давайте спробуємо переглянути код наведених файлів ще раз. По-перше, зверніть увагу на досить велику кількість інформації, що дублюється (а саме теги html, head, title, meta, body в кожному файлі). По-друге, слід пам'ятати, що велика фреймова структура (кількість вкладених фреймів) створить навантаження на браузер. По-третє, зверніть увагу на назву (для цього відкрийте приклад в окремому вікні). Незалежно від того, на який лінк, frame1.html або frame2.html ви натиснете, назва не змінеться. Це дуже погано для оптимізації сайту під пошукові системи - адже без змін залишається не тільки назва, але й деякі інші важливі параметри (наприклад keywords та description).
Варіант 2 - таблиці.
Давайте спробуємо повторити наш приклад, але замість фреймів використаємо таблиці. При використанні таблиць навігація та контент знаходяться в одному файлі, а їх місце задається за допомогою рядків, колонок або вкладених таблиць. Ось приклад файлу table1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл table1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<table border="0"><tr valign="top">
<td width="90">
<a href="table1.html">table1.html</a>
<a href="table2.html">table2.html</a>
</td><td>
<p align="center">зміст файлу table1.html</p>
<p align="justify">
Тут, власне, має буде необхідний контент. 
Саме його побачить відвідувач, якщо натисне "table1.html".
Також ви можете побачити контент другого файлу. 
Для цього просто натисніть "table2.html"
</p></td>
</tr>
</table>
</body>
</html>
А це приклад файл table2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл table2.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<table border="0">
<tr valign="top">
<td width="90">
<a href="table1.html">table1.html</a>
<a href="table2.html">table2.html</a>
</td><td>
<p align="center">зміст файлу table2.html</p>
<p align="justify">
А це зміст файлу table2.html.
Ви можете знову повернутися до перегляду першого файлу.
Для цього просто натисніть "table1.html"
</p></td>
</tr>
</table>
</body>
</html>
І звичайно ж, подивимся, як виглядає оновлений приклад в окремому вікні браузера.

(відкриється в новому вікні)

Для користувача мало що змінилося - він побачить практично таку саму інформацію, як і в першому прикладі. А для нашого сайту? По-перше, зменшився код - 50 рядків в двох файлах з використанням таблиць замість 54 в чотирьох файлах з використанням фреймів (або 1 738 байт замість 2 235, якщо вимірювати в байтах). Іншими словами, цей варіант буде швидше завантажуватись і створить менше навантаження на сервер. А якщо ми уважно подивимось на приклад в окремому вікні і спробуєм натиснути лінк table1.html чи table2.html, то побачимо, що назва змінюється в залежності від того, на який лінк ви натиснете. Все працює, із SEO завдяки унікальним назвам (а також keywords та description) проблем не буде - чому б не користуватися таблицями? Досить велика кількість студій користується таблицями навіть сьогодні... Але давайте розглянемо ще один приклад.
Варіант 3 - блоки.
Для початку додамо ще один тип файлу - CSS. Він буде відповідати за розміщення та зовнішній вигляд блоків, до яких звертаються html-файли. Хай він буде називатися style.css, а ось його приклад:
.menu {
width: 90px;
float: left;
}
.content {
margin-left: 91px;
}
Далі так само, як і в прикладі з таблицями, нам знадобляться два файли - хай це будуть div1.html та div2.html. Приклад div1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл div1.html</title>
<link rel="stylesheet" href="style.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<div class="menu">
<a href="div1.html">div1.html</a>
<a href="div2.html">div2.html</a>
</div>
<div class="content">
<p align="center">
зміст файлу div1.html
</p>
<p align="justify">
Тут, власне, має буде необхідний контент.
Саме його побачить відвідувач, якщо натисне "div1.html".
Також ви можете побачити контент другого файлу. 
Для цього просто натисніть "div2.html"
</p></div>
</body>
</html>
Аналогічний приклад div2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл div2.html</title>
<link rel="stylesheet" href="style.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<div class="menu">
<a href="div1.html">div1.html</a>
<a href="div2.html">div2.html</a>
</div>
<div class="content">
<p align="center">зміст файлу div2.html</p>
<p align="justify">
А це зміст файлу div2.html.
Ви можете знову повернутися до перегляду першого файлу.
Для цього просто натисніть "div1.html"
</p></div>
</body>
</html>
І аналогічний приклад в окремому вікні браузера.

(відкриється в новому вікні)

Для користувача, що переглядає приклад знову практично все лишилося таким самим - працюючі навігація та контент, такі самі унікальні назви, як і в другому прикладі. А як поставляться до наших змін сервер та браузер користувача? Можете бути впевнені, що подякують - хоча користувач бачить те ж саме, що і в попередніх прикладах, розмір html-коду зменшився (всього 44 рядки або 1 681 байт). Щоправда, доданий ще один файл... Але він завантажується лише 1(!) раз, і згодом береться з кешу браузера.

До того ж, варто звернути увагу ще на деякі ньюанси. На практиці розміри файлів значно більші, ніж у наведених прикладах, і при використанні таблиць дуже легко заплутатись серед десятків тегів <tr> та <td>, якими позначаються рядки та колонки. Також блоки надають фантастичні можливості для маніпуляції ними за допомогою скриптів. А ті можливості, що надають блоки для SEO - це просто казка (я про position:absolute, але це тема для окремої статті).

Саме створення сайтів за допомогою блоків і буде практиківатися на цьому сайті. А як тоді бути з фреймами і таблицями? Просто використовувати їх там, де це необхідно - наприклад, за допомогою таблиць дуже зручно показувати табличні дані.]]> Теорія http://webamator.org.ua?id=3 Tue, 14 Apr 2009 15:22:31 GMT <![CDATA[Реєструємо org.ua]]> whois, що воно не зайняте. Спершу нам знадобиться e-mail. Слід взяти до уваги, що поштова скринька на безкоштовних сервісах (gmail.com, bigmir.net mail.ru, yandex.ru, rambler.ru та інших) не підійде. Дивимося, чому:

Цитата:
Для запобігання масовій реєстрації доменів з метою несумлінного вікорістання (кіберсквотингу) кількість заявок ADD, що пріймаються з одного поштового домену, не перевищує 3 заявок на добу. У задоволенні наступніх заявок ADD буде відмовлено відразу після їх розміщення в черзі.

Будьте уважні читаючи попереднє пояснення: ваш поштовій домен - це не ті саме, що Ваша поштова скринька!


Іншими словами, якщо в 00 годин 00 хвилин було відправлено 3 заявки з сервера mail.ru (вася@mail.ru, саша@mail.ru, маша@mail.ru) то все подальші заявки з цього домена ігноруватимуться. Фактично люба заявка, відправлена з адреси ваш_логін@mail.ru в 00 годин 01 хвилину проігнорується (дуже багато сквотерів), саме тому рекомендую обзавестися або дуже рідкісною адресою, або комерційним (як варіант - попросити знайомого, що має комерційну адресу, відправити заявку з свого e-mail-а).

Nic-handle. Якщо з поштовою адресою визначилися, то можна переходити до наступного кроку, тобто зареєструвати себе як реєстратора. Каламбурчик вийшов :) Насправді нічого складного тут нема - йдемо на uanic.com.ua і натискаємо “Реєстрація запису про приватну особу“. Заповнюємо необхідні поля і натискаємо “Send”. Якщо все зроблено правильно, то одержуємо лист, в тілі якого буде вказаний ваш nic-handle, саме він нам і потрібний. Як правило, він виглядає як ВАШ_ІД-UANIC

Підбираємо хостинг. Цілком природне бажання для безкоштовного домену використовувати безкоштовний хостинг. Вибір сьогодні просто величезний. Від себе можу порекомендувати, що у ayola.net сама краща технічна підтримка, яку мені довелось бачити. Проте паркування зовнішнього домена у них платне, а якщо хочете заощадити, можете скористатися пропозицією hmarka від topua.net. А ось на кого не варто звертати увагу - це ho.ua, там без усяких причин можуть прикрити ваш сайт, мотивуючи це кризою. Можливо ви маєте інший хостинг, про який я не знаю - можете скористатися ним. Все що нам необхідно знати - це ip-адреса вашого майбутнього сайту. Щоб дізнатися ip-адресу, достатньо “пропінгувати” свій новий сайт. Реєструємося на хостингу, отримуємо у хостера ім'я (наприклад на top.ua він буде виглядати ваш_нік.hmarka.net). Потім одночасно натискаємо Win+R та пишимо "ping ваш_нік.hmarka.net -t" (звичайно не в лапках). Бачимо ряд повідомлень вигляду "Відповідь від потрібного_нам_ip: число байт=32 время=130мс TTL=53". Запам'ятовуєм або записуєм цей ip, він нам знадобиться надалі.

Підбираємо сервер DNS. Сервер DNS прирівнює вказану ip-адресу до вашого домену. Всі хостери мають власні сервера DNS, але якщо ми не хочемо залежати від хостера, слід скористатися стороннім сервером. Безкоштовні сервера DNS можна знайти як в Україні (наприклад primaryns.kiev.ua) так і за кордоном (www.xname.org). Нічого складного - спочатку прохідимо процедуру реєстрації. Потім натискаємо “Create zone” і заповнюємо запропоновану форму. У полі “Zone” вписуємо наш майбутній домен, (zone type слід вказати primary, xname.org автоматично створить первинний та вторинний DNS), а в полі “server” пишемо ip-адресу нашого хостингу. Якщо все зроблено правильно, з'явиться повідомлення “zone ваш_домен.org.ua has been successfully registered on XName site DNS server. You can now use the modification interface to verify its content.”
Потім натискаємо “Modification interface” і шукаємо розділ “A-records”. Указуємо ip-адресу хостера для www і @ і чекаємо листи з підтвердженнями змін. Як тільки прийде лист із заголовком “Reloading your zone(s) on ns0.xname.org“, можна переходити до завершального етапу.

Пишимо листа для бота. А ви вважали, що доведеться спілкуватися з людиною? Ви помилилися smile Відправляємо за адресою register підкреслення query@org крапка ua (чесне слово, саме так написано в їхніх правилах, можливо ховаються від спамерів biggrin ) лист із заголовком ADD ваш_домен.org.ua і наступним змістом (як приклад, наведений домен webamator.org.ua):

domain: webamator.org.ua
descr: site for webmasters
admin-c: TPR-UANIC
tech-c: TPR-UANIC
nserver: ns0.xname.org
nserver: ns1.xname.org
changed: my_email@bigmir.net 20090315
source: UANIC

про всяк випадок пояснення:

domain - назва вашого домену
descr - короткий опис вашого сайту
admin-c - ваш nic-handle
tech-c -ваш nic-handle
nserver: ns0.xname.org
nserver: ns1.xname.org
changed: ваш email і через пропуск дата у форматі рік-місяць-день (без пропусків)
source: UANIC

Розмір листа не повинен перевищувати 4 Кб, а сам лист не повинен містити html-форматування та прикріплених файлів і бути в режимі plain text. Чекаємо трьох листів. Нас цікавить останне (те, що має заголовок ADD ваш_домен.org.ua processing approval request та починається словами "У вхідну чергу адміністратора публічного домену org.ua надійшла Заявка на делегування доменного імені ваш_домен.org.ua.
Копію заявки дивіться нижче.")

На нього необхідно дати відповідь, відправивши application, checksum та approve: Y (ваші application та checksum будуть в тому листі, вказувати потрібно саме їх)

application: 1918347
checksum: 25283
approve: Y

Чекаємо підтвердження - це повинно бути лист, в якому написано:

Створено новій запіс про доменне ім’я:
domain: ваш_домен.org.ua
descr: ***
admin-c: ***
tech-c: ***
nserver: ***
nserver: ***
changed: ***
source: ***

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

А якщо щось незрозуміло або не виходить, не соромтеся питати в коментарях.

Ця сама стаття російською]]> Практика http://webamator.org.ua?id=2 Tue, 14 Apr 2009 14:18:38 GMT <![CDATA[Привіт, світ!]]>
Тема від основного сайту майже на 100% портована. До речі, на локальному сервері валідатор показував відсутність помилок, а на цьому знайшов аж 23. Здається, що справа в рекламному блоці, що його вставляє хостер. Для початку залишилося розібратися із цією рекламою та доменом, а згодом  потихеньку заповнювати сайт контентом.
Оскільки це тестовий запис, доречно саме в ньому перевіряти всі нововведення (зміни шаблону, домену, плагінів, тощо)

Перевірка домену (DNS):
якщо при переході за цим посиланням відкривається цей сайт (webamator.org.ua), тоді все працює.]]> Новини http://webamator.org.ua?id=1 Tue, 14 Apr 2009 13:53:23 GMT