The Taiji of Web Development

Вступ

У цьому записі мова піде про першу українську конференцію веб-розробників UA Web 2008. Цей захід мав на меті зібрати усіх професіоналів сфери веб-розробки, познайомити їх і розказати щось цікаве. Одразу скажу, що організаторам все вдалось - вони просто молодці, за що їм величезний респект (особливо Юрію Артюху, який всіх знайшов і зібрав) Не дивлячись, на відносно високу (для наших країв) ціну за участь, конференц-зали Президент Готелю, де і проводилась конференція, були заповнені вщент. Це говорить в першу чергу про те, що у нас просто не вистачало такого заходу, необхідність у ньому довго назрівала і вибухнула у потребу вдовольнити той інформаційний голод, який замучив українських професіоналів веб-розробки. Єдиний (але вимушений) мінус - проведення різних доповідей паралельно у двох залах. Більшість доповідей були цікавими для мене, і нажаль, всі відвідати не зміг. Але весь час проводилась відео-зйомка (трансляцію можна було побачити в реальному часі в он-лайні), і організатори обіцяють надати матеріали всіх доповідей учасникам конференції. Деякі доповіді можна вже побачити в он-лайні на сайтах їх авторів. Отже хочу привести на ваш розсуд своє резюме цього дводенного дійства.

День перший

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

Професійний верстувальник. Хто він? _{(Вадим Макішвілі - Яндекс)}

Ця, як і багато інших доповідей хлопців (і дівчат) з Яндекса були дуже цікавими. Тут йшлося про основні факти і прийоми для верстувальників. Було розказано про три режими рендерингу брузерами: Quirks mode, Standard mode, Almost Standard mode. Якщо перші два відрізняються в основному підтримкою боксової моделі (box model) W3C у режимі сумісності зі стандартами, то третій, виявляється, існує тільки у рушії Gecko (на якому працює Firefox) для того, щоб прибрати дірку з-під ін-лайнових картинок, забезпечуючи таким чином сумісність у вигляді із IE. Далі ми почули про 3 типи вибудовування вигляду сторінки:

1. Flow (потік) - це таблиці і все, що має не абсолютне (чи відносне) позиціонування
2. Float (обтікання) - елементи, що використовують властивість обтікання текстом (CSS властивість float)
3. Absolute positioning (абсолютне позиціонування) - єдина рекомендована W3C модель, але не передбачає залежності між елементами, як у перших двох

Фактично перші дві є вигаданими (очевидно, через брак інших варіантів у часи зародження вебу). Це дає можливість судити про верстку як презентаційну (скеровану на зовнішній вигляд) і семантичну (доступність).

Окремо слід згадати пару прикольних і дуже екзотичних багів всіми улюбленого браузера IE, які показав автор. Це просто перли

@import url(..);
@import url(..);
....
@import url(..); /* працює */
@import url(..); /* не працює*/

Виявляється, ІЕ не може читати імпорти CSS далі 36го (магічне число, чи що) Звичайно, не часто доводиться вставляти стільки файлів, але сам факт цікавий. Друга штука ще веселіша.

* html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= 'name.png');
}
 
[class].header {
color: green
}

Друге правило працювати у ІЕ не буде. Як думаєте, чому? А тому, що у попередньому правилі у фільтрі після src= є пробіл Так, так… ІЕ не розуміє нічого, що йде після цього пробілу. Всі інші комбінації з пробілами до і після знаку “=” працюють, а це ні. Все-таки індуси цікавий народ
Основною тезою доповіді, на мою думку, стало те, що кожен браузер має помилки і мета професійного верстувальника - знати ці помилки і вміти знаходити для них обхідні шляхи.

Семантична верстка _{(Вадим Макєєв - Яндекс)}

У цій доповіді Вадим пояснив основні принципи семантичної верстки і на прикладах показав, як просто мінімізувати громіздкий презентаційний код у чіткий, зрозумілий як для розробників, так і для машин. Така верстка привчає не фігачити сайти (як заведено у багатьох вітчизняних конторах), а думати про те, що робиш. Окремим пунктом було сказано про мікроформати і їх застосування (hCard, hResume і т.п.) - простий код дає неймовірні можливості як для пошуку так і для перенесення (мобільності) інформації. До речі, дізнався новий buzzword - POSH (Plain Old Semantic HTML)

JavaScript та доступність веб-сайтів _{(Володимир Агафонкін - XHTMLized)}

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

1. Семантична верстка
2. Коректна робота при вимкненому JavaScript
3. Максимально доступний JavaScript

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

• Всі важливі дії мають бути закріплені лише за тими елементами, які приймають фокус - це посилання (<a>) + елементи форм.
• Не використовувати пристроє-залежних подій (тобто тих, які потребують підключеного пристрою, як наприклад миші чи клавіатури), себто onclick, onmouseover і т.п.
• Якщо цього зробити неможливо, комбінувати їх із пристроє-незалежними подіями - onfocus, onblur і т.п.
• Обробляти властивість location.hash - частина посилання після знаку “#”, тобто елементи, які закріплені за тією самою сторінкою
• Дотримання історії сторінок при використанні AJAX. Для цього існує вже досить багато відомих рішень, наприклад jQuery history plugin.
• Уникати вікон, що виринають
• Уникати динамічну функціональність, яка базується виключно на CSS, адже CSS-селектори не можуть у повній мірі обробляти onfocus події.

Також кількома словами були згадані підходи у проектуванні програм на JavaScript: graceful degradation та unobtrusive JavaScript.
Іншими словами, дякую Володимиру за цю доповідь - сам не знав багато з цього.

Верстка незалежними блоками _{(Віталій Харисов - Яндекс)}

Це була досить цікава доповідь ще одного представника Яндекса (керівника всього напрямку верстки компанії) про проектування верстки за допомогою максимально незалежних блоків. Суть цього підходу у визначенні мінімальних елементів у документі і визначення стилів лише під них. Тобто класів поза блоками не існує, окрім винятку у вигляді глобальних стилів, які можна застосувати до будь-яких інших. Інша теза - потрібно розподіляти блоки на контентні та layout-блоки. Ще були проведені гарні аналогії із ООП:

• Модифікація класу постфіксом - це наслідування
• Модифікація абстрактним блоком (який сам по собі ніде не використовується, тільки у комбінації із іншими) - наслідування від абстрактного класу

Були визначені основні типи блоків із їх префіксами:

• b - базовий блок
• h - обв’язка
• l - layout - повністю незалежні складені блоки
• g - глобальні

Сесія питань і відповідей Ігорю Сисоєву - розробнику nginx

Ігор Сисоєв був представлений одним із організаторів як мега-гуру, адже він є тою людиною, яка розбирається у низькорівневих операціях мабуть краще за будь-кого іншого, що дозволяє йому створювати справжні дива, яким є його надлегкий веб-сервер nginx. Визначена Ігорем мета nginx є швидко взяти відповідь від бекенду (наприклад важкого Apache) і віддати її клієнту, поки бекенд може займатись іншими запитами. Таким чином nginx виступає як проксі між клієнтом і важкою начинкою сервера. Загалом, питання були цікаві переважно тим, хто безпосередньо займається серверним забезпеченням, тому деяка частина залу почувалася трохи не на місці. Щоправда від мега-гуру прозвучала фраза, що на скорому РІТ-2008 може відбутись презентація довгоочікуваної можливості кешування на стороні nginx.

Використання прихованих психофізичних можливостей веб-розробників для успішного створення і застосування сучасних Інтернет-проектів _{(Валерій Юріков - KAPE)}

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

Rich Internet Application у перспективі Flex _{(Сергій Ковальов, Олексій Затворницький)}

Двоє досить кумедних молодих розробників розповідали про плюси та сфери використання технології Adobe Flex. Мені, як людині досить далекій від технологій Adobe, було цікаво послухати про те, що це взагалі з себе представляє і як може використовуватись. Для себе зазначив, що Flex можна застосовувати як додаток до основної веб-функціональності. Це такий собі альтернативний браузеру клієнт для роботи із конкретним сервісом. Хлопці показали гарний живий приклад у вигляді Flex-засобу для інтеграції із Google SocialGraph API. Буквально в кілька десятків строк опису MXML та коду на ActionScript 3.0 була вкладена функціональність пошуку та анімованого відображення соціальних взаємозв’язків будь-якої сторінки - дуже гарний і видовищний приклад.

Запрос - відповідь? Це не наш метод! _{(Олександр Костюченко - Ukr.net)}

Цей працівник компанії Ukr.net освітив тему, на яку зараз існує відносно небагато інформації - це персистентні з’єднання на основі технології Comet. Суть технології у тому, щоб (в ідеалі) утворити нерозривне з’єднання браузера із сервером для передачі даних за вимогою (наприклад для застосування у чатах чи тікерах). Нажаль ідеального рішення зараз не існує, оскільки рівень підтримки цього різний поміж браузерами. Були названі різні методи (деякі кращі - деякі гірші), але на практиці підходять лише три з них:

1. Page streaming - використання iframe для завантаження контенту. Але всі ми знаємо, що фрейми - це зло
2. Limited server streaming (або long poll) - XHR-запрос, який повертається лише після того, як надійдуть потрібні дані, після чого надсилається новий запит.
3. Flash sockets - найгнучкіше і кросплатформове рішення, Flash має чудові інструменти роботи із сокетами, що дозволяє без проблем використовувати персистентні з’єднання.

Все це має деякі мінуси: використання JavaScript, постійна витрата пам’яті, 1не (з 2ох для одного домену) постійно зайняте з’єднання.
З плюсів (перспективних) - виключення із звичайного ланцюжка запиту-відповіді веб-сервера та місця збереження даних (БД зазвичай). Але це має обмеження на мову програмування - наприклад, на PHP це дуже складно реалізувати (фактично потрібно дописувати модуль на C). Хоча для інших мов, таких як Perl та Python, існують вже готові рішення.
Іншими словами - цікава інформація, якої явно бракує в мережі.

Інтеркаса - система прийому Інтернет-платіжок _{(Павло Сидєлєв - Unicom Systems)}

Ще один спонсорський виступ. Людина розповідала про систему-агрегатор відомих систем Інтернет-грошей для уніфікованої оплати послуг, наприклад у Інтернет-магазинах. Беруть всі проблеми з платіжними системами на себе, за що хочуть невелику комісію - 3%. У присутніх виникло досить багато питань, щодо організації всього цього бізнесу - на всіх них була дана адекватна відповідь.

Підсумок Дня 1

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

Схожі замітки

• Схожого матеріалу поки не підібрано.

Сторінки: 1 2