Семантична мережа, яка заснована на мікроформатах

Багато розробників чули про концепцію «семантична мережа», що пропагується консорціумом W3C і особисто Тімом Бернерсом-Лі (що носить титул «Батько WWW»). Незважаючи на детальне опрацювання концепції, її просування йде з великим скрипом, принаймні, в споживчому сегменті інтернету. Складовими частинами семантичної мережі є, зокрема, формати RDF, XML, OWL. З їх допомогою можна детально описати сенс даних в структурованому вигляді так, що одну й ту ж інформацію можна використовувати в масі контекстів. Наприклад, будувати сервіси на базі доступного контенту, будувати нові сервіси на базі наявних сервісів і навіть Читати повністю

Мікроформати тут і зараз

Багато хто з читачів журналів, подібних Digital Web, вже знайомі з терміном мікроформати, або навіть встигли «пограти» з hCards і тегами. Фактично, якщо подумки повернутися в листопад 2005, можна сказати, що Digital Web був одним із перших журналів, що торкнулися цю тему – тоді була опублікована чудова стаття для ознайомлення, написана Гарретом Дімоном (Garrett Dimon). Читати повністю

Мікроформати

Нещодавно відкрився сайт microformats.org, на якому зібрані й будуть розвиватися мікроформати, які набирають нині моду. Їх придумав дядько на ім’я Тантек Селик, який, до речі, свого часу зробив двигун макінтошного IE, самий інноваційний для свого часу. Мікроформати – ідея геніальна, хочу написати про них детально. Читати повністю

XHTML + CSS. Переваги очевидні

Останнім часом на всіх форумах тільки й чути: стандарти, «валідність», CSS-верстка, XHTML. Більш того, не затихають суперечки прихильників двох шкіл вебдизайну: класичної табличної і нової CSS-верстки, про те, що є верстка і що кому здається більш логічним і зручним. Цією статтею я не хотів би почати новий виток цієї «священної війни», більше того її метою навіть не є перепереконання «табличників» до переходу на стандарти. Я хочу лише ознайомити читача з тими незаперечними перевагами, які має CSS-верстка. А вже висновки кожен повинен зробити для себе сам. Читати повністю

CSS. Друкуємо зі стилем

Часто на інтернет-сторінках зустрічаються посилання з текстом «версія для друку». Це словосполучення говорить саме за себе. Такі посилання ведуть на сторінки з ідентичним змістом першочергово матеріалу оригінальної сторінки, але тільки призначені вони для того, щоб виводити вміст на папір. Відмінний спосіб це робити – використовувати CSS, який відмінно справляється з виведенням веб-сторінок вашого сайту на друк. Читати повністю

Гумова розкладка

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

Відповіді на типові запитання про XHTML і HTML

Навіщо потрібен XHTML? Чи не досить HTML?
У чому переваги XHTML перед HTML?
Як найпростіше перетворити документи HTML в XHTML? Читати повністю

Різне відображення HTML документів в браузері залежить від оголошеного Doctype

При використанні одних і тих же HTML-тегів в старих кривих браузерах і сучасних, які дотримуються стандартів (Mozilla і браузери на його основі, Mac IE 5, Windows IE 6, Safari, Opera 7 + і Konqueror 3.2) можна виявити два основні режими відображення web -сторінки. В одному випадку браузер намагається представити сторінку відповідно до рекомендацій CSS і (X)HTML. В іншому випадку відображення сторінки відбувається як в старих, далеких від стандартів браузерах. У Mozilla ці два стани відомі як «the Standards mode» і «the Quirks mode», тобто як стандартний режим і невизначений відповідно. Читати повністю

Чим відрізняються id та class

Одне з найбільш частіших питань у процесі знайомства з новими стандартами – в чому різниця між атрибутами HTML-елементів «id» і «class». Адже ефект, начебто, однаковий.

Однаковий ефект у них тільки в найпростіших випадках використання в CSS. Насправді відмінностей багато. Читати повністю

Приклад верстки CSS

Настав час після довгої нудної теорії верстки CSS’ом нарешті вже що-небудь осмислене зверстати. У цій статті я покажу від початку до кінця один з варіантів верстки трьохколоночної сторінки.

Приклад спирається на попередні статті «Підручника», і якщо в цій статті будуть якісь неясності, відповіді треба шукати в них. І хоча приклад може бути корисний і сам по собі як просто готовий шаблон, головна його мета – показати в дії всі механізми CSS, про які я писав раніше, дати їх відчути, щоб ви могли їх вільно застосовувати так, як це потрібно вам. Читати повністю

XHTML, кажете?

Одна із самих сумних речей, яку я помічаю, коли наштовхуюся на російськомовні веб-розробницькі спільноти – це повне небажання розбиратися в суті питань. Коли щось у когось не виходить, він спочатку запитує це у форумі, де купа самозваних «гуру» починає йому розповідати нісенітницю. Потім, якщо пощастить, хто-небудь дасть посилання на яку-небудь більш-менш адекватну статтю, яка може частково стосуватися питання. Порада почитати першоджерело (наприклад специфікацію мови) зазвичай сприймається як знущання, тому що по-англійськи всі «вільно розмовляють» тільки у своїх резюме. Читати повністю

Semantic web. Замітка щодо логічної і нелогічної верстки

У минулих матеріалах ми розглядали загальні питання розробки веб-сайтів – планування веб-сайту, аналіз цілей і завдань, розробка інформаційної архітектури веб-проекту, базові навігаційні елементи і т.д. А зараз – тема для веб-розробників, дизайнерів, верстальників, усіх, хто створює веб-сторінки, веб-сайти – для себе, для користувачів, для замовників чи, для пошукових машин … Невелика замітка про логічною і нелогічною верстці. Читати повністю

Розкладка в CSS: float

Довга епопея з написанням статті про властивість «float» завершена. Нехай часу пішло багато, але мені здається, що мені вдалося максимально дохідливо звести все різноманіття поводжень цієї потужної й трохи дивної властивості в одну загальну систему.

Доля властивості «float» в CSS злегка схожа на долю тега «table» в HTML: ні те, ні інше взагалі не замислювалося як засіб створення колонок і взагалі розкладки елементів. Однак через певні недосконалості механізму позиціонування, float використовується для цієї мети дуже широко. А те, що придумувався він для іншого, частенько виявляється різними неочевидними ефектами. Однак перед тим, як їх показати, я все ж розповім, як float можна застосовувати для розкладки. Читати повністю

Межі і відступи в потоці

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

Розкладка в CSS: потік

У попередній статті я вже пару раз згадував прямий потік – той порядок, в якому розташовуються бокси, якщо їм не давати якогось спеціального позиціонування. І порядок цей, треба сказати, не такий вже й простий.

Типи боксів

Бокси, які беруть участь в потоці, бувають двох принципово різних типів: рядкові та блочні («inline» і «block» в термінлогіі CSS). Читати повністю

Розкладка в CSS: позиціювання

У CSS існує, за великим рахунком, чотири способи розкладати бокси по сторінці: прямий потік, позиціонування, float’и і таблиці. На жаль, жоден з них не дає повного набору засобів, якими можна було б зверстати що-небудь реальне. Тому використовуються вони зазвичай всі разом, та ще й з неабиякою часткою хаків для обходу несумісності в реалізаціях стандарту.

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

CSS’ні бокси

Перед тим, як починати поширюватися про те, як CSS’ом розкладати на екрані частини веб-сторінки, я хочу обов’язково розповісти, з чого складається базова екранна одиниця, якою оперує CSS – бокс.

Сутність боксу

Всі елементи веб-сторінки – фактично все, що обмежене будь-якими тегами – представляється в CSS прямокутними областями, які якраз і називаються боксами. Наприклад, у такій ось сторінці: Читати повністю

Будь-який шрифт на вашому сайті. sIFR

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

Відвідані посилання. Visited links

Все в гіперпросторі пов’язано між собою гіперпосиланнями. Майже кожен перехід з однієї сторінки на іншу сторінку має на увазі попереднє клацання мишею по певному посиланню. Як дати відвідувачеві сайту знати про те, що він уже відвідував сторінку, на яку веде певне посилання?

Відомо досить багато методів для того, щоб дати користувачеві знати про те, що він уже відвідував конкретну сторінку в інтернеті. Який з цих методів найбільш підходящий? Кольорове визначення посилань? Підкреслення? Картинка? При відповіді на це питання не варто забувати про дальтоніка, про кишенькові комп’ютери, і, звичайно ж, не варто забувати про браузери, вірніше, браузері – всіма улюблений ослик – Internet Explorer. Сьому версію цього браузера, яка з’явилася, можна називати вже солідніше – осел. Але ця тема для окремої статті. Читати повністю

Організація CSS-файлів: Порада 1 – Прапори

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

Охайний HTML

Будь-яка робота повинна бути виконана охайно і красиво. Особливо якщо її можуть побачити багато людей. А це безпосередньо стосується розробки сайтів, і, зокрема, деяких технологій, що використовуються при цьому – HTML і CSS.

Переглядаючи сторінки в Інтернеті ми, як правило, не дивимося в код HTML. Та й навіщо це потрібно звичайному користувачеві? Але часто буває важливо поглянути на код, щоб скласти деяке враження про творців цього веб-сайту. Код HTML, це як дзеркало умінь, можливостей і бажань розробника сайту. Читати повністю

«Компот» і «мухи» веб-розробки

Російський інтернет (вже нарешті) щосили освоює «дизайн через CSS», але багато хто все одно не розуміє, чому саме треба дизайнити так, а не по-старому, через таблиці. Керуються, як часто буває, тим, що це модно. А багато хто, взагалі-то, і не поспішає йти від таблиць, не вважаючи, що в них є щось погане. Я збираюся написати довгий цикл статей про веб-розробки новими методами. Головна моя мета – структурувати ті знання, яких багато в розрізненому вигляді по всій мережі. Читати повністю

Друкуємо по-розумному або ще один спосіб захисту інформації

Сьогодні ми поговоримо про те, як зробити так, щоб виводити на екран одну web-сторінку, а при друку цієї сторінки на принтері результат був трохи іншим. А робиться це за допомогою CSS.

У CSS є одна дуже корисна функція: Ви можете для одного і того ж HTML-елемента вказати різні способи відображення при друку і при показі в браузері. Для кращого розуміння розглянемо наступний приклад: Читати повністю

Кожному браузеру свій стиль

Незважаючи на те, що сучасні браузери поступово наближаються один до одного за своїми можливостями і підтримкою специфікації CSS, між ними все ще є відмінності в підходах. Кожен браузер інтерпретує на свій розсуд код HTML і стилі особливо. При цьому можна довго сперечатися, який з браузерів «більш правильний», суть залишається одна – поки існують кілька браузерів і люди їх застосовують, сайт треба робити так, щоб він коректно і без помилок у них відображався. Більшість користувачів просто байдуже ставляться до всяких стандартів і специфікацій, хоча б тому, що і не підозрюють про їх існування. Багато хто навіть не знають, що таке HTML і користуються браузером, який встановлений в системі за замовчуванням. Люди приходять на сайти, за інформацією і зацікавлені в тому, щоб отримати її швидко і без проблем. Якщо улюблений браузер «криво» відображає сайт, то простіше не розбиратися в чому справа, а закрити сайт і перейти на інший, добре, що їх тепер багато по будь-якій темі. Читати повністю

Навігація і меню. Створення вкладок

Вкладки – один з елементів навігації, улюблений як користувачами сайту за їх наочність і очевидність дії, так і дизайнерами за те, що вкладкам можна надавати будь-який відповідний вид, без втрати їх функціональності. До того ж, цей елемент добре виділяється на веб-сторінці й відразу стає зрозуміло, що вкладки потрібні для переходу між розділами сайту. На рис. 1 показаний один із можливих варіантів створення вкладок. Читати повністю

CSS: врізка до статті

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

Влада народу – відносні розміри шрифтів

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

Дизайн для портативних пристроїв: ваш веб-сайт на маленькому екрані

Лише невелика частина існуючих нині веб-сайтів слідує стандартам. Серед цих небагатьох лише жменька перейнялася написанням стилів для портативних пристроїв. А з тих, хто застосовує стилі для «надолонників», мало хто може похвалитися тим, що віддають користувачеві «картинку» з низькою роздільною здатністю, без головного жаху для всіх надолонників – горизонтальної прокрутки. Читати повністю

Ховаємо і показуємо поля форми

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

Хіба не було б чудово дати користувачам можливість ховати на свій розсуд поля необов’язкові для заповнення. Ми можемо зробити це, з розумом застосувавши JavaScript, DOM і трохи CSS. Читати повністю

«Гумова верстка»: використовуємо негативні поля

Я нещодавно зіткнувся із завданням, в якому треба було створити двухколоночний макет сторінки з «шапкою» і «підвалом», причому в коді сторінки контент повинен був бути розташований перед блоком бічної колонки. Я вирішив скористатися можливістю продемонструвати маловідомий прийом CSS-верстки: негативні поля (negative margins). Негативні поля дозволяють нам змістити область контенту за межі вікна браузера, звільнивши місце для бічної колонки. Читати повністю

Посилання а-ля комірки в HTML таблицях

Свого часу http://razetdinov.inc.ru/ писав замітку про посилання в комірках у розділі JavaScript. Запропонований метод, звичайно, дуже хороший, але нещодавно на своєму улюбленому сайті anfrax.ru я зіткнувся із абсолютно чудовим CSS трюком, який, по-перше, в точності відтворює JavaScipt’овий метод, а по-друге, дуже лаконічний і гарний. Дивно, я зустрічав подібне рішення (перевизначення властивості display) раніше, але не взяв до уваги, що воно може стати в нагоді й в даній ситуації… Читати повністю

<DIV> штовхає <TABLE>

Статтю про використання можливостей шарів (<div>) в дизайні я хотів би почати з розповіді про те, як нещодавно збирався замінити сотовий телефон: (розповідь опущена з поваги до читачів). Отже, в результаті сам телефон я не поміняв, але із задоволенням дізнався, що в наші дні на невеликому екрані мобільного засобу комунікації цілком можливо переглянути будь-який сайт в інтернеті. Навіть той, який і не чув про WAP і подібні речі. Перевіряючи цю можливість, я зайшов на деякі часто відвідувані мною сторінки в інтернеті. Результат виявився, м’яко кажучи, незадовільним: в 160 пікселів на екрані не вмістилося жодного творіння шанованих мною дизайнерів. Справедливості заради варто помітити, що і мої сайти при перевірці були аж ніяк не на висоті. Читати повністю

Випадаючі меню за допомогою CSS

Кожен, кому доводилося створювати меню, що випадають, знайомий з тим, яку кількість скриптів потрібно для цього. Між тим, використовуючи грамотно структурований HTML-код і нескладні CSS-правила, можна створити симпатичне меню, що випадає, яке легко змінювати і доповнювати, і при цьому воно буде працювати в безлічі браузерів, в тому числі і в Internet Explorer. І найголовніше для вас, шанувальники «чистого» коду – ніякого JavaScript! (Насправді, невеликий скрипт все ж таки необхідний, але зовсім не для того, про що ви подумали.) Читати повністю

Пам’ятка по CSS

При верстці сайту за допомогою CSS ви обов’язково натрапите на безліч проблем. І кожного разу ви будете битися головою об стіну в спробах обійти черговий глюк. Даний документ покликаний полегшити вам процес розробки, і служить коротким довідником, до якого ви можете звертатися щоразу, коли зіткнетеся з непереборною перешкодою.

Якщо у вас є що додати до цього документа, залиште свій коментар тут. Читати повністю

Лінійки в таблицях

До появи цифрових документів і OCR-сканування введення інформації було досить нудним процесом, який припускав рутинний набір величезних текстів вручну. Вам давали гору роздруківок і вимагали набрати їх на комп’ютері рядок за рядком. Якщо ж ви втомлювалися або хоч на секунду відволікалися, то знайти місце, де ви перервали роботу, було дуже не просто.

Доводилося проявляти чудеса винахідливості. У хід йшла металева лінійка, яку, щоб не збитися, прикладали до роздруківки і підсували нижче, коли додруковували рядок. Читати повністю

CSS-дизайн: нестандартне підкреслення посилань

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

Такий «збагачений» вид посилань дозволяє внести деяку різноманітність, що, безумовно, може бути корисно. Цей прийом так само може бути використаний для розмежування різних типів посилань усередині самого сайту. Читати повністю

Трюк з блочною моделлю CSS

Boxtest

Ось типовий <div> блок, якому присвоєно клас «boxtest».

Блок має кордон в 20 px, відступ в 30 px і ширину в 300 px. Читати повністю

CSS Design: Приборкання списків

Пам’ятаю як у липні 1999 року я просвіщав людей в мейл-листах про чарівність стильової верстки. З тих пір мало що змінилося.

Втім, дещо змінилося. Змінився мій погляд на CSS і на (X)HTML, який виступає в ролі каркаса для стилів. Наприклад, я виявив, що більшість сторінок містять панель навігації. Найчастіше вона оформляється як простий текстовий рядок з посиланнями, розділеними тегами <DIV> або <P>. Структурно ж вони представляють собою списки посилань, і, отже, повинні оформлятися як такі. Читати повністю

Розсувні двері CSS

Коротко: Кожен рік приносить нові помилки. У 2002 році деякі з найгірших помилок у веб-дизайні пов’язані з поганою інтеграцією з електронною поштою. Все ж таки, помилка номер один – це відсутність на сайтах інформації про ціни, і за нею – надмірно буквальні пошукові системи.

Серед рідко обговорюваних переваг CSS-можливість накладення фонових зображень з метою отримання різних ефектів. У відповідності зі стандартом CSS2 для кожного фонового зображення потрібно окремий HTML елемент. У більшості випадків – типовий код, що описує загальноприйняті компоненти інтерфейсу, надає в наше розпорядження кілька HTML елементів. Читати повністю

Обтікання картинки текстом

Обтікання картинки текстом – один з популярних прийомів верстки веб-сторінок, коли зображення розташовується по краю вікна браузера, а текст обходить його з інших сторін. Для створення обтікання зображення текстом існує кілька способів, пов’язаних, як з можливістю тегів HTML, так й із застосуванням стилів. Читати повністю