Целта не е просто да си “съблечем” CSS стиловете и да си покажем сайтовете/блоговете без никакъв дизайн! ;-) Целта е да се покаже, че Уеб стандартите не са нещо абстрактно, а нещо, което помага на хората (а и на машините, но това е друга тема) да получават по-лесен достъп до информацията, публикувана в Интернет.

Един добре написан сайт ще бъде почти еднакво достъпен за хора, които не виждат достатъчно добре или не виждат изобщо; за хора, които имат проблем при използването на мишка (използват само клавиатура)… но той ще бъде и също толкова достъпен и за всички останали! Тоест, със съвсем малко усилие от наша страна, ние можем да направим нашия сайт достъпен за почти всички!

Изключвайки CSS стиловете, ние виждаме сайта така, както биха го “видяли” (прочели) повечето от незрящите хора, които сърфират в Интернет; също и така приблизително ще изглежда сайтът върху браузър от малко по-старо поколение мобилен телефон или PDA (тоест, основно текст).

А не е ли Интернет осново средство за предаване на информация, и не е ли текстът основният начин, по който човечеството предава знанията си от поколение на поколение от векове? :-)

Уеб достъпността и iPhone

iPhone, този мобилен телефон на Apple от съвсем ново поколение нашумя много. Включително с прекрасния си мобилен браузър (Safari), голям екран 640×480 пиксела… а също и с революционния начин, по който се осъществява комуникацията между потребителя и телефона — а именно, само чрез touch screen.

Малцина от тези, които превъзнасяха Steve Jobs и новата му i-играчка, се замислиха над факта, че чрез именно този нов, революционен начин на взаимодействие с телефона, Apple всъщност “отрязват” напълно потребителите, които имат влошено зрение. Недомислица? Случайност? По-скоро игнориране на част от потребителите.

Георги Живанкин писа по темата iPhone и достъпността (accessibility), а и други хора. Факт е, обаче, че ако вие не виждате, вие не можете да използвате iPhone, колкото и да ви харесва джаджата. Така че Георги Живанкин или Виктор могат свободно да сърфират в Интернет, но не и с “недостъпно” устройство като iPhone (а и може би си спомняте, че именно Стив Джобс беше онзи, на който принадлежи прочутата крилата фраза (цитирам по памет): “Има проблем, да, възрастните хора от предишното поколение имат проблеми с използването на компютърна клавиатура, но когато всички те умрат, този проблем ще се реши от само себе си” — цитатът го бях прочел в някакво печатно издание, ако се сетя къде, ще допълня тук).

WordPress 2.5 и достъпността

Наскоро писах за новия WP 2.5 и как неговият нов интерфейс (специално в раздела ‘Write’) е по-неудобен от този в предишната версия (2.3.3). По повод това се получи и малък разгорещен flame във форумите на wordpress.org (150+ comments and counting on;-) и доста потребители дори се върнаха обратно към 2.3.3 след upgrade до 2.5.

Покрай голямата шумотевица с новия дизайн на Admin интерфейса, неудобството от пренасянето на панелите от sidebar’а в дъното на страницата (което предизвиква ненужно скролиране нагоре и надолу) и премахването на възможността за drag-n-drop…

…се изгубиха думите на един незрящ потребител на WordPress. В няколко абзаца, той обяснява, как промяната на интерфейса, въпреки че е направена от прочутите Happy Cog, всъщност намалява достъпността на този уеб софтуер за него…

Може ли да бъде различно? Може. И не е толкова трудно.

Уеб стандартите не са абстракция

Повечето съвременни компютри могат чрез JAWS и други специални програми да позволят на потребители, които не виждат, да “разглеждат” свободно различни уебсайтове, да четат и пращат електронни писма, да търсят в Google и много други неща, достъпни за всички останали.

Единственото условие е сайтът, който те посещават, да се съобразява именно с тези т.нар. Уеб стандарти, а именно:

• фòрмата да е отделена от презентацията (чрез семантично написан HTML и CSS);
• навигацията да е достъпна и без наличието на Flash/JavaScript в браузъра (тоест, да е направена чрез стандартни хиперлинкове);
• страницата да е организирана в логични блокове (които биха могли и да бъдат маркирани “невидимо” чрез кратки пояснителни заглавия), a ако е възможно, в началото на всяка страница може да бъде поставено и скрито бързо меню, което да позволява лесната навигация в рамките на страницата (от типа “jump to: navigation/content/secondary navigation”);
• картинките да са маркирани правилно (например, ако една картинка представлява линк, който води към някаква статия, това да се поясни в точен title/alt текст);
• уеб формите трябва да са с labels и да могат да се изпращат и без наличието на JavaScript в браузъра;
• добра идея е също така да се провери, дали дизайнът се запазва при увеличение на текста до поне +150% (аз използвам Firefox за целта), или всичко се размества и страницата става трудно използваема;
• най-накрая, също бих препоръчал да те тества, дали страницата може да се използва нормално и без наличието на едно или няколко от следните три неща: JavaScript, CSS, картинки.

Има и още много други аспекти, за които се сещам или не се сещам в момента (за част от тези неща писах наскоро и в отговор на едно писмо на читател в блога на Йовко), но тук се опитах да изброя поне основните.

Да се напише един валиден и семантично правилен HTML документ не е трудно и не отнема много време (в сравнение с писането на един невалиден и семантично неправилен HTML документ, пълен с ненужни tables for layout и тагове font font font;-) …но това прави Интернет малко по-достъпен за хората, които имат проблеми с зрението, и/или не сърфират в Web с клавиатура, мишка, монитор 20+ инча, съвременен браузър с последна версия Adobe Flash и JavaScript поддържка.

Те ще го оценят! :-)

PS Кога стана близо 2 след полунощ, не знам… отивам да си лягам след тази импровизирана лекция на тема “Уеб стандарти”;-)

Днес е ‘CSS Naked Day‘ — денят, който промотира Уеб стандартите!

Този ‘CSS Naked Day’ продължава от 24 до 48 часа, и показва, че един сайт/блог с добре написан HTML+CSS може да изглежда доста добре и без дрехите си (тоест, без своите CSS стилове).

Така че, ако случайно видите моя блог без CSS днес или утре (тоест, без своя дизайн), да не се учудвате — ние “съблякохме” нашите CSS стилове за една благородна кауза — а, както се вижда и от снимката, която направихме преди няколко часа, не само CSS стиловете, но и дрехите си!! ;-)

Да живеят Уеб стандартите! :-D

PS Ако използвате WordPress и сте решили да си “съблечете” и вие блога днес и утре, Lorelle има много добър guide по въпроса, хвърлете едно око! И да не забравите да се запишете в списъка на Dustin Diaz! В момента има над 1300 участници вече;-)

Похабих около 8-9 часа от моето време, за да се боря с необясним и глупав бъг в Internet Explorer.

Редактирах HTML код, местих DIV-ове като гламав напред-назад, включвах и изключвах правила в CSS файла, тествах, reload-вах, търсих в Google, търсих помощ навсякъде, накрая изтрих почти целия код на дизайна, който бях създал, и… проклетият бъг си остана!

Дизайнът във Firefox 2 си работи, в Opera 9 си работи, в IE6/IE7 — не. Ей-така.

След безкрайно време взиране в монитора, две ултра-силни чаши кафе и цял ден боричкане с идиотския бъг, осъзнах, че съм пропилял цял един ден, пълнейки си главата с глупости, само защото най-богата компания за софтуер е завладяла половината браузърен свят с неадекватни версии на най-популярния браузър ever, а именно, Internet Explorer.

Internet Explorer 7 е също неадекватен, какъвто беше и IE6 през последните години.

Всъщност, Internet Explorer 6 беше доста добър за времето си — а именно, за 2001-ва година, когато се появява на бял свят.

През 2007-ма Internet Explorer 6 беше безнадеждно остарял. И за съжаление, IE7 също е остарял.

Да, IE7 е много по-добър от своя предшественик, но все още има много да наваксва, докато стигне нивото на новия флагман – Mozilla Firefox.

И така, резултатът за днес е:

Internet Explorer:уебдизайнери — 1:0.

Не съм анти-Microsoft. Не съм и анти-IE. Обичам предизвикателството да направя един CSS layout да изглежда добре и почти еднакво във всички съвременни браузъри — IE, Firefox, Opera, Safari… Но си признавам, че днес IE-weird-behaviour нещо ми дойде в повече…

Замислям се, дали да не добавя някъде в HTML-а следния код, заключен в conditional comments:

<!--[if IE]>
<h1>Please, download Firefox, Opera or Safari to view this page...
or live with the current crappy state of the design you probably see
on your screen!</h1>
<![endif]-->

…и да спра да се тормозя:)

И знаете ли, някак ми напомня на “добрите” стари времена, когато дизайнерите ползваха JavaScript за разпознаване по браузър… :-D

На мен – да. В най-лошите си кошмари един дизайнер, работещ с Уеб стандартите и забравил, какво е MS Word HTML, сънува подобен код.

Е, аз не сънувам. В моя случай, това е реален код, който се очаква да почистя… Да останат само H1, H2, H3, P, IMG SRC, A HREF и нищо друго (иначе един проект за сайт няма как да стане реалност).

Всъщност, системата е малко по-различна и включва писане на html from scratch, чистене и преглеждане (защото очевидно код като този няма как да се почисти)…

И няма кой друг да свърши тази работа. Така че, стискам зъби, пиша, почиствам внимателно, и пия втората ми чаша кафе за днес. Колкото по-бързо свърша, толкова по-бързо ще ми се махнат от главата тези FONT FACE... от главата. Бррр…

Обичате ли да пишете XHTML и CSS код?

Прегърнали ли сте идеята за Уеб стандартите?

Забравили ли сте, какво е Use of tables for layout purposes?

Настолно четиво ли ви е списанието A List Apart?

Можете ли да изброите за по-малко от минута поне 10-ина известни CSS дизайнери, като Doug Bowman, Roger Johansson, Dan Cederholm, Jeffrey Zeldman, Eric Meyer, Mike Davidson, Veerle Pieters, Cameron Moll, Greg Storey, Jeff Veen, John Hicks, Tantek Çelik и много други?

Ако отговорите на горните въпроси са положителни, тогава следващата песен е за вас:

А специално за тези, които са прегърнали и идеята за Web Usability & Accesibility, по-долу може да следите текста на песента в стандартен html формат;-)

The supervisor rants.
He says “This website’s pants!
I want my clicks improved by Friday!”

I hit the URL.
It’s like the bowels of hell.
God give me strength.
It’s just not my day.

So raise your hands to Boag and pray
that we can fix this website today.

Tonight I need your CSS,
coding in the darkness.
From now on no more tables nest;
you will meet web standards.

The source code makes me weep.
There’s tables fifteen-deep.
In Netscape 6 it looks like garbage.

The METAs say this turd
was made with MS Word.
With every click I find new carnage.

So raise your hands to Boag and pray
that we can fix this website today.

Tonight I need your CSS,
coding in the darkness.
From now on no more tables nest;
you will meet web standards.

I guess I’ll have to start from scratch -
then I can kiss this piece of trash goodbye…

;-)

Признавам, когато за първи път чух тази версия миналата година (оригиналът е на Breathe, казва се “Hands to Heaven”), след второто просвирване вече не можех да си спомня оригинала, и постоянно тананиках “Tonight I need your CSS, coding in the darkness…”:-)

От най-добрите кавъри, които някога съм чувал. A must-listen!

И съм сигурен, че песента вече е легнала на сърцето на не един уеб дизайнер (на мен – със сигурност…) ;-)

PS Цялата история на песента и как се е появила, може да научите оттук:
www.boagworld.com/archives/2006/04/a_love_song_about_web_standards.html http://boagworld.com/podcast/a-love-song-about-web-standards

Хвърлям честичко по едно око на блога на Roger Johansson (Роджър Йохансон – надявам се, така се пише на български.) — професионален уеб дизайнер/дивелъпър от Швеция, който има много интересни статии, посветени на CSS и уеб стандартите, също и пише ревюта на книги за уеб дизайн, CSS и графичен дизайн.

Тук ще си позволя да преведа един негов текст на български, защото може да е полезен за повече хора от уеб областта (професионалисти, или такива, за които уеб е само хоби).

* * *

Designers or Developers?*

(Дизайнери или дивелъпъри?)

В секцията “За мен” на този сайт [456 Berea Street - бел.пр.;-)] аз наричах себе си “дивелъпър/дизайнер/occasional writer”. Малко е объркващо, но все още ми е трудно да отговарям на въпроса какво правя/работя. Дали съм Уеб дизайнер? Уеб дивелъпър? Уеб програмист? Всички тези специалности заедно? Нито една? Това наистина е един труден въпрос, за да се даде прост отговор на него.

Отговорът ми зависи от това кой ме пита, кога, защо, и при какви обстоятелства. Понякога казвам, че “работата ми е свързана с Уеб” или “правя уебсайтове”, и двата отговора са верни, но всъщност не казват какво правя в действителност. Би било по-лесно да се даде кратък, прост, разумно точен отговор.

В известен смисъл аз съм повече дизайнер, въпреки че се занимавам съвсем малко с графичен дизайн напоследък. Мнозина си мислят погрешно, че дизайн е еквивалентно на графичен дизайн, но дизайнът е също така свързан с това да направиш нещата да работят. И тъй като това е, което правя, може би би трябвало да се наричам Уеб дизайнер.

Но аз не се наричам така. “Уеб дизайнер”** за мен е определение, което е неприятно оцветено от моя опит с дотком сапунения мехур [the dotcom bubble - бел.пр.]. То ми напомня за тълпите неопитни хора, които бяха наемани само защото големите Уеб агенции се нуждаеха от повече служители. То също така ме кара да мисля за аматьори, които използват WYSIWYG режима на някое пиратско копие на Dreamweaver или GoLive, за да създават сайтове. Така че ми е много трудно да наричам себе си Уеб дизайнер.

Като алтернатива, съм използвал “Уеб дивелъпър” за известно време. Проблемът е, че много хора предполагат, че Уеб дивелъпърът се занимава най-вече с back-end програмиране, а аз не се занимавам много с това. Но този термин звучи по-професионално от Уеб дизайнер, все пак.

Какъв друг избор имаме? Е, съществуват определения като Програмист на потребителски интерфейси (User interface programmer), Front-end дивелъпър (Front-end developer), Архитект на потребителския опит (User experience architect) (аргх, алергичен съм към израза “user experience”), и други. Има много определения, но твърде малко такива, които да описват какво правя по начин, който да е разбираем за хората, които не работят в сферата на Уеб индустрията.

Това проблем ли е наистина? В по-голяма част от случаите, не. Но е малко неудобно да не можеш да кажеш на фризьора или някой съсед какво правиш, за да се прехранваш, и то така, че да те разберат. “Аз работя с Уеб” или “Аз правя уебсайтове” става, но не казва дали аз правя графичен дизайн, програмиране, или и двете.

И така, бих искал да задам на четящите този текст, които не се занимават с графичен дизайн, но основно работят с HTML/XHTML, CSS, JavaScript и достъпност (accessibility), следните два въпроса:

1. Дали се смятате за дизайнер или дивелъпър?
2. Наричате ли себе си дизайнер или дивелъпър?

Ако можете, чувствайте се свободни да мотивирате отговорите си.

* * *

Заключение (бел. на преводача)

Роджър Йохансон си задава интересни въпроси в своята статия. На мен ми се е случвало да си ги задавам също, и то неведнъж.

Как да обясниш на някой, който не работи в сферата на уеб технологиите, какво работиш? Дизайнер/Уеб дизайнер? Но аз не работя толкова с графика, колкото с XHTML/CSS код. Програмист/Дивелъпър? Не, не е вярно — главното ми занимание е CSS дизайн, тоест, да пиша CSS код, да създавам CSS layouts и интерфейси. Тогава? CSS кодър/CSS дизайнер? Е това пък съвсем нищо не говори — думата “Уеб дизайнер” поне повечето от хората са я чували, за разлика от “CSS дизайнер”. Тогава какво?

Дилемата е сериозна — аз пиша CSS код, правя графика за уеб в Macromedia Fireworks (вече Adobe Fireworks), с back-end почти не се занимавам, повечето ми сайтове са създадени в някакъв текстов редактор за код. Какво работя тогава? :-)

Може да оставите коментар тук, и/или в оригиналния пост на Roger Johansson. Въпросите, които си задава той, ми се сториха интересни и спрямо нашето скромно дизайнерско/дивелъпърско community, затова си позволих да направя този превод (криво-ляво;-) на български…

–Мишел

Бележки под линия

* Оригиналната статия на Roger Johansson Are we designers or developers? може да прочетете на адрес:
http://www.456bereastreet.com/archive/200708/are_we_designers_or_developers/

** Докато превеждах статията, попаднах случайно на друга интересна статия, посветена на същия въпрос, само че разгледан от малко по-друг ъгъл. Все пак, мисля, че тя допълва до известна степен текста на Roger, затова реших, че е добре и нея да включа тук:
http://www.modernlifeisrubbish.co.uk/article/theres-no-such-thing-as-web-design
(автор: Stuart Brown)

*** Навсякъде в текста на Roger думата Web (Уеб) се изписва с главна буква. Първо, става дума за професии, и второ, в българския, макар че съм срещал вариантите “Уеб” и “уеб”, реших, че няма да е голяма грешка да оставя тук “Уеб” с голяма буква, заради оригиналния правопис. Ако смятате, че е погрешно, blame me! :-D

Тазгодишното издание на CSS Naked Day беше забавно (първо участие на optimiced.com, между другото)…

Над 1600 официални участници тази година (пълен списък: http://naked.dustindiaz.com)! И по-скоро по-малко медиен шум около събитието, поне този път…

Но се радвам, че участвах :-)

Повече информация: две думи в блога на Dustin Diaz, на webstandards.org, и, разбира се, на уебстраницата на тазгодишните участници :) Списъкът със записали се в момента за Naked Day ’2007 е над 900 и расте (ето още линкове и от technorati).

Моят блог участва за първи път (поради обясними причини – все пак, през април 2006-а още не е съществувал;-), като от полунощ българско време всички CSS стилове в него са изключени, за минимум 24 часа – и ако случайно се чудите, защо в момента дизайнът на сайта ми изглежда толкова гол и постен – това е причината:)))

Е, дизайнът на Optimiced в момента не е толкова красив, но какво да се прави – добрата кауза си е добра кауза:)