<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />

По този начин можем да направим страницата си удобна за разглеждане на PDA, изглеждаща добре отпечатана на хартия и ползваема на екрана на телевизор. Последните устройства, станали популярни обаче разбиват тази концепция на пух и прах. Както е известно, iPhone  използва screen, а не handheld стиловете, eeePC и другите ултрамобилни компютри също езползват screen дефинициите, но разделителната им способност е малка и се налага потребителя да скролва по хоризонталата.

Решението на проблема идва със CSS3 и media queries. Тази нова възможност, заложена в стандарта, позволява да прицелим дадена страница със стилове в устройство с определени възможности - цветен или черно-бял дисплей, размер на екрана - като комбинираме медията и условието към устройството в логически израз.

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (max-width:800px)" />

Сега вече можем да направим така, че на малкия екран на преносимите устройства сайтът ни да изглежда добре и да е ползваем. Но както се сещате, CSS3 все още не се поддържа изцяло от нито един браузър. За наша радост media queries се поддържат частично от Опера и Сафари. Dustin Brewer дори предлага да се ползва тази възможност за подаване на стилове само на Сафари. Ако искате да видите как действат примерите по-горе, заредете този блог в Опера, след това намалете екрана до ширина под 800 пиксела и заредете пак. За екрани с малка разделителна способност съм поставил страничната лента под основното съдържание, което така може да се чете по-добре, без да пречат второстепенните елементи.

Спецификацията на този модул от CSS3 е тук, а подробна статия с повече примери за използването на media queries има тук.

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

<style type="text/css">
@import url(mobile.css) screen and (max-width:801px);
</style>

A black cat moans
When he’s burning with the fever
A stray dog howls
When he’s lonely in the night
A woman goes crazy
With the though of retribution
But, a man starts weeping
When he’s sick and tired of life

Цалата работа е в един padding, който махнах снощи, защото дясната колона падаше 1em надолу. А днес гледам, тя се лепнала горе. Отварям в трета версия - както трябва, в IE също е ОК, а там преди беше надолу. Значи кво, някой в Mozilla е копирал бъг на IE? Не ми се вярва, но изглежда странно. по някаква причина дясната колона, която плава вдясно не се качва по-високо от лявата, която плава вляво и се намира първа в кода. Някакви идеи?

Спамни си списъка с контакти

Често срещана функционалност в разни сайтове е възможността да си импортнете списъка с контакти. Това, което всъщност прави тази функционалност е да праща покани и откровен спам на приятелите и познатите ви.

Дайте си данните за достъп за другите услуги

Е много умно, да си дадете на някакъв сайт името и паролата за достъп до друга услуга не е никак добра идея. Освен това по този начин потребителите свикват да си раздават данните за достъп, което само чакат рибарите.

Присъедини се за да си оправиш профила

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

Една единствена унифицирана социална мрежа

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

Какво е решението?

Решението естествено е семантичния уеб. Вместо да използвате горните похвати и да рушите доверието на потребителите към вас, можете да направите следното:

1. Публикувайте профилите като микроформати:
   1. Използвайте hCard в страниците с профили, включително xfn rel=”me” във връзките към страницата, която потребителите попълват като своя.
   2. Използвайте hCard+XFN в страницата с контакти/приятели. Използвайте xfn rel=”me” за връзките към списъка с приятели и дори във връзките в странирането.
   3. Използвайте hCard навсякъде, където се споменават потребители.
2. Абонирайте се за микроформати, описващи вашите потребители:
   1. Когато се регистрира нов потребител:
      1. Дайте възможност на потребителя да попълни данните си и да ги синхронизира автоматично от съществуваща услуга, поддържаща микроформати hCard.
      2. Дайте възможност на потребителя да импортира и синхронизира списъка с приятели от друга услуга, която поддържа микроформати hCard+XFN.

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

Разширението освен, че добавя допълнителен CSS към административния интерфейс, промена малко и HTML кода на панела за писане. Нищо особено, просто затварям “advanced” полетата на формата в един div елемент, за да мога да ги контролирам отделно по-лесно. Това става, като използвам възможността да закача функции към определени точки от изпълнението на PHP скриптовете. След малко търсене в документацията намерих това, което ми трябваше:

dbx_post_advanced

Runs at the bottom of the “advanced” section on the post editing screen in the admin menus.

edit_form_advanced

Runs just before the “advanced” section of the post editing form in the admin menus.

Това беше всичко, което ми трябваше, за да започна работа, надявам се на някой да му е полезен резултата.

Повече информация ца инициативата има при Яйо и на официалниа сайт.

Първото, което ми направи впечатление, беше новата версия на Firefox - 3.0, също бета. Вече бях пробвал браузъра, направили са го доста по-бърз, има и някои приятни промени по интерфейса. Две неща обаче правят работата ми с него не особено лека. Първото е, че при отваряне на сайт със самоподписан или по друг начин проблемен сертификат, процедурата за приемане на сертификата е малко досадна. А второто е, че повечето ми любими разширения още не са съвместими.

Естествено и останалия софтуер е latest and greatest, OpenOffice е 2.4, Gimp 2.4.5. Gnome е версия 2.22, но преводът на Убунту е все още непълен, липсват дори неща, преведени в предишните версии.

Друго нещо, което ми хареса, е една промяна в голяма част от административните приложения. Вместо да изискват първо парола, за да се стартират чрез sudo, приложенията се стартират без възможност за промени или дори преглед на настройки. За да се извършват промени, потребителя първо натиска бутон за отключване, въвежда си паролата и действа. Не съм сигурен кое налага нуждата от още едно щракане с мишката.

И накрая моята борба с безжичната мрежа. Подозирам, че част от проблема произтича от неразумното ми решение да пробвам бутончето за включване и изключване на безжичния адаптор докато се инсталираше операционната система. От този момент това бутонче не прави нищо и светодиодчето на кутията на лаптопа не свети дори и сега докато пиша това. Безжичния адаптер използва модула madwifi от производителя, но по някаква причина той не успява да тръгне. На сайта на проекта пише, че са започнали разработката на нови драйвери, работещи със OpenHAL, а не със собствената им затворена (и явно бъгава) имплементация. Но проекта ath5r е в ранна фаза и разработчиците на Убунту не бързат да включат драйвера в дистрибуцията. Така че единствения вариант остана ndiswrapper - както личи от името, това е модул на ядрото, който предоставя среда, идентична със Уиндоус, за зареждане и работа на мрежови драйвери (малко елементарно обяснение, дано е ясно). Инсталирането е елементарно, резултата незабавен. Истинското указание е тук. Във форума на Убунту има също доста дълги указания, включващи компилиране на пакети и друки сложни за потребителя процедури.

И като сме на темата, да си припомним изпълненията на Knockin’ On Heaven’s Door. Боб Дилън написва парчето за филма “Пат Гарет и Били Хлапето” през 1973 и песента влиза в едноименния албум с останалия саундтрак от филма. От тогава песента е записана в много негови албуми, и има безброй кавъри. Най-известните са на Ерик Клептън и Guns N’ Roses, но списъка включва и The Grateful Dead, Bryan Ferry, Mark Knopfler, Roger Waters, The Sisters of Mercy, U2, Aerosmith, Bon Jovi, Bob Marley. Много исках да намеря някои от тези изпълнения, но не успях. Изглежза изпълнението на Боб Марли е много апокрифно, защото намерих само 30s пример от някакво изпълнение. Всички изпълнения уж на Аеросмит се оказаха добре познатия запис на Гънс.

И един интересен факт - през октомври миналата година 1730 китаристи свирят едновременно това парче в Шилонг, Индия, за да поставят световен рекорд за най-голям китарен оркестър.

Чуйте по-известните изпълнения:

• Knockin’ On Heaven’s Door - Bob Dylan
• Knockin’ On Heaven’s Door - Eric Clapton
• Knockin’ On Heaven’s Door - Guns N’ Roses
• Knockin’ On Heaven’s Door - Avril Levigne
• Knockin’ On Heaven’s Door - Bon Jovi

А ето и текста с акорди за китара (за начинаещите):

G     D                      Am
Mama, take this badge off of me
G       D      C
I can't use it anymore.
It's gettin' dark, too dark for me to see
I feel like I'm knockin' on heaven's door.

G             D                    C
Knock, knock, knockin' on heaven's door
Knock, knock, knockin' on heaven's door
Knock, knock, knockin' on heaven's door
Knock, knock, knockin' on heaven's door

Mama, put my guns in the ground
I can't shoot them anymore.
That long black cloud is comin' down
I feel like I'm knockin' on heaven's door.

Knock, knock, knockin' on heaven's door
Knock, knock, knockin' on heaven's door
Knock, knock, knockin' on heaven's door
Knock, knock, knockin' on heaven's door

Правило номер едно - ако мислите, че всички получатели на бюлетина ще виждат едно и също, забравете!

Не, наистина, няма начин! Не само защото множеството различни клиенти за електронна поща ползват най-различни компоненти за визуализиране на HTML. Имайте предвид, че някои от тях използват някоя безпладна услука с уеб-интерфейс, а тези услуги прекарват съобщенията през всякакви филтри, за да ги почистят от нежелано съдържание и да защитят услугата си. Един пример - mail.bg ще премахне всякакъв CSS от съобщението, включително и style атрибутите, които биват заменяни с атрибути xsscleaned със същото съдържание, но абсолютно безполезни.

Правило номер две - забравете за уеб-стандартите!

След правило номер едно ще добавя само, че последната версия на MS Outlook използва HTML функционалността на MS Word.

И след като убих всичко детско у вас, ето и градивните съвети:

Използвайте таблици вместо плаващи div-ове

Така поне ще си гарантирате разположението на отделните елементи един спрямо друг. Избягвайте colspan и rowspan, някои клиенти не се оправят добре с тях. Използвайте фиксирани ширини за таблицата и колоните и предпочетете атрибути пред CSS.

Използвайте inline CSS

Въпреки, че повечето клиенти могат да си служат със style и link таговете, повечето уеб-услуги за електронна поща ги премахват или преименуват. Да, досадно е и писмото става огромно, но това е положението, нали искате да работи.

Използвайте външни картинки, хостнати на уеб-сървъра

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

И така, заключението е - колкото по-прост дизайн изберете за бюлетина си, толкова по-лесен ще е и вашия и живота на потребителите ви. И не забравяйте да предложите и тестови вариант на писмото, накои потребители може да си настроят приложението да показва само текстови писма. Тествайте бюлетина си и през различни спам филтри, защото една от характеристиките на спама е използването на HTML съобщения с повече код отколкото съдържание.

Още полезна информация по темата

• How to Code HTML Email Newsletters
• CSS Support in HTML Emails of Hotmail, Yahoo! Mail, and Gmail
• CSS and Email, Kissing in a Tree
• How HTML Code Affects E-Mail Deliverability
• HTML Email Tips for Web Designers

Първи впечатления

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

Като цяло администрацията не само изглежда по-добре, но е и доста по-удобна, таблото е много по-полезно от преди.

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