Дисплеят на една колежка в работата ми е настроен на сив фон на приложенията по подразбиране и когато седна при нея да обсъждаме текущи проекти, вече на два пъти установявам елементарен пропуск в работата си, който е описан и от CSS гурото Джефри Зелдман. Става въпрос за това, че досега не съм обръщал внимание дали поставям задължително фон на тялото на HTML документа (body {background: #fff;}). Това се отнася основно за дизайните, които са с бял фон и дори и да не е зададен в стиловете, това не прави впечатление, докато не застанеш пред монитор с променени фонови настройки. Тогава обаче картинката става “интересна” – дори може да не познаеш работата си.

Затова е важно винаги да се обръща внимание на главните елементи на един HTML документ, за да сме сигурни, че основата ни е положена и над нея можем да градим всичко останало. В противен случай цялото време отделено за остраняване на проблеми под различните браузъри, за операционни системи и мобилни устройства и валидирането на кода ще загубят своят смисъл.

още по темата:
Is your websites underwear showing – статията на Зелдман
Underwear showing (web design) – група във Flickr, споделяща как изглеждат сайтове без зададен фон на документа при променен фон на приложенията

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

За почти 50 години Световната мрежа еволюира от текстово базирана система за предаване на данни между ограничен кръг от учени до интерактивна медия за споделяне на информация и развлечение на всеки човек, имащ компютър с интернет достъп.

Новите функционални възможности на уеб сайтовете неизбежно усложняват ежедневните задачи и са предизвикателство пред уеб разработчиците, които освен текущите си задачи трябва да следят и да не изостават от променящите се технологии в тяхната област. Основните посоки на развитие в момента са:

Дизайн и Технологии
Вече не е достатъчно за уебмастърът да знае само как правилно да кодира уеб сайтовете си, за да функционират правилно. Въпреки, че функционалността все още е от изключителна важност, то тя не е единственото за уеб разработчиците днес. Съвременните сайтове трябва да имат също така привлекателен дизайн, който да притежава добра навигационна структура, йерархия на елементите, графични елементи, добро и уникално съдържание. Това от своя страна означава, че уеб специалистите трябва да са наясно с основните на графичния дизайн и писането на съдържание за уеб.

Уеб маркетинг
Друго сравнително ново изискване към уебмастерите за реализирането на успешен сайт са познанията в областта на уеб маркетинга. Макар и различаващ се от традиционния маркетинг, интернет маркетингът обединява в себе си маркетинговите похвати, електронната търговия и оптимизацията на уеб сайтове (SEO – search engine optimization), като основната цел пред него е създаденият сайт да бъде откриваем и запомнящ се.

В заключение може да се каже, че единственото постоянно в Уеб разработката е … промяната. Уменията, от които се нуждаят специалистите в областта днес, вероятно ще са се променили по това време следващата година. В тази област може да се очаква, че развитието ще бъде постоянно, и за да сте един от добрите специалисти ще трябва непрекъснато да се променяте.

Какво правите Вие за да сте винаги в крак с последните уеб технологии?

Лично аз прекарвам по няколко часа на ден в търсене в мрежата или четейки водещите блогове/форуми за уеб дизайн и разработка и се опитвам да използвам в проектите, по които работя, някои от новите техники, които преценя, че са добро решение за текущите задачи.

От Mozilla публикуваха информация, че стартират поддръжката на @font-face правилото, от версия 3.1 на браузъра. Това ще позволи на разработчиците да използват шрифтове без да се притесняват от това дали ги има на машината на посетителя. В момента за уеб се използват няколко шрифта (tahoma, verdana, arial и т.н.), които са включени в основните операционни системи.

Благодарение на @font-face, браузърът ще може да показва елементите със шрифтове, които са качени/инсталирани на друг хост, а не на PC-то на посетителя и така уеб дизайнерите ще се сдобият с още един инструмент за създаване на въздействащ и атрактивен дизайн.

Ето един пример как се използва това правило:

@font-face {
font-family: ‘MyFont’;
src: url(http://www.domain.com/fonts/newfont.otf) format(“opentype”);
}

div {
font-family:MyFont, Verdana, Arial, Helvetica, sans-serif;
}

Всъщност @font-face е включено и в CSS2 препоръките, но до момента поддръжката му не е включена в никой браузър, с изключение на IE от версия 4 и нагоре, но както може да се очаква там поддръжката е частична и недостатъчна. Към момента единствено със Safari 3.1 може да се види как работи това правило. А ето и информация за поддръжката сред по-масовите браузъри:

@font-face поддръжка
източник: Webfonts.info

Webkit/Safari

• от версия 3.1
• font formats:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
• допълнителна информация: http://webkit.org/blog/124/downloadable-fonts/ ; Caveats

Opera

• в процес на разработка
• font formats:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)

Internet Explorer

• от версия IE 4 – частична поддръжка
• font formats:
  • TrueType converted to Embedded OpenType (.eot) using WEFT
• Допълнителна информация: http://www.microsoft.com/typography/web/embedding/default.aspx

Mozilla/Firefox

• не поддържа @font-face / планирана поддръжка за Firefox 3.1: https://bugzilla.mozilla.org/show_bug.cgi?id=70132

Google Chrome

• не се поддържа в настоящата Beta версия

Netscape

• от версия 4, спряна поддръжка от Netscape Navigator 6
• font formats:
  • Portable Font Resource (.pfr)
• допълнителна информация: http://en.wikipedia.org/wiki/TrueDoc

Още по темата:
http://www.webfonts.info/wiki/index.php?title=Main_Page
http://www.css3.info
http://opentype.info/demo/webfontdemo.html – демонстрация на @font-face (за момента може да видите ефекта от използването на правилото само ако имате Apple Safari версия 3.1 или по-нова).

Как изглежда сайтът ми под различните браузъри и различните версии на най-използваните от тях?

Отговор на този въпрос дава www.browsershots.org. Използвайки него, разработчикът получава скрийншотове на въведения от него сайт, които показват как страницата изглежда в над 80 версии, на над 20 различни уеб браузъра, на 4-те основни операционни системи. Също така резултатите може да се филтрират и по разделителна способност на потребителския монитор, цветова палитра, използване на javascript, java и flash. Тестът позволява да се видят и отстранят някои груби пропуски в дизайна за браузъри под операционни системи, които разработчикът не ползва и няма как да тества лично.

Основният недостатък на този онлайн инструмент, е че няма как с негова помощ да се открият бъгове, получаващи се при някои събития върху елементи от страницата, като mouseover върху линк например. Въпреки това www.browsershots.org е полезен сайт за всички, които искат да са сигурни, че уеб сайтовете и приложенията им изглеждат еднакво под максимален брой от постоянно увеличаващото се количество на браузърите.

В настоящият пост ще представя един вариант за откриване на потенциални пропуски и проблемни зони в HTML документите ни, чрез използване на специални стилове за диагностика и откриване на проблемните елементи. Техниката е описана от Ерик Майер – един от водещите световни уеб разработчици, автор на някои от най-ценните книги в областта на уеб дизайна и ползваемостта.

Решението, което предлага той засяга някои по-рядко търсени грешки в сайтовете, които остават скрити от погледа на разработчика. Дори и с напълно валиден код на страницата има вероятност да са направени някои пропуски, които в определени моменти да се отразят на цялостната структура на документа. Tехниките работят под Firefox, Opera и Safari, а за Internet Explorer 7 има добавен допълнителен фикс, но едва ли някой ще го използва при положение, че разполага с някой от другите браузъри.

За прилагането на тази техника се използва специално създадения за случая CSS файл който се добавя в хедъра на HTML документа след останалите стилове, които ползваме. Файлът може да бъде свален от тук CSS файл за по-добрите браузъри и от тук CSS файл за лошия Internet Explorer. А какъв е резултата може да видите тук демо (за по-добрите браузъри) и тук демо2 (за IE7).

Кратко пояснение:

Използват се стилове, които в зависимост от състоянието на дадения елемент или негов атрибут, го изобразяват с различни стойности на някои негови CSS свойства /предимно рамка (border) и фон (background)/.

Основните цели, за които се използва тази техника са:

• Откриване на елементи с празни стойности за class и id (<span class=”" id=”">);
• Хипервръзки (<а>), на които е забравено да се добави стойност на атрибута href, или пък е със стойност”#”, която обикновено използваме в процеса на разработка и сме пропуснали да актуализираме(<a href=”#”>). В случая синтаксиса ще е правилен, но няма да получим резултата, който сме заложили в следствие на действие от страна на посетителите.
• Линкове без атрибут “title” или с празни стойности на атрибута title (<a href title=”" … >).
• Откриване на графични елементи без атрибути alt и title или с празни стойности на атрибутите alt и title (<img src=”xxx.png” alt=”" title=”"/>).

Оригинална статия и допълнителна информация:
http://meyerweb.com/eric/tools/css/diagnostics/index.html
http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/
http://24ways.org/2007/diagnostic-styling