optimiced | bg

Стъпка 1:

Отворете Silverback.

Стъпка 2:

Променете бавно размерите на прозореца на браузъра, който използвате в момента (Firefox, Opera, Safari, IE7 са ОК) и…

Стъпка 3:

…наблюдавайте ефекта. Хитро!

Има и дискусия по темата, как quasi-3D ефектът е постигнат само със CSS + полупрозрачни PNG файлове — на мен ми напомня на игрите от едно време; а гледайки симпатичния мумун, някак не мога да не се сетя за Donkey Kong на Nintendo!

CSS rullz! ;-)

Хитри tool’чета като xScope 2 ме карат да съжалявам на моменти, че нямам Apple Mac… Честно! ;-)

Ако работите на Mac и се занимавате с (уеб)дизайн, препоръчвам ви да хвърлите едно око на блога на Doug Bowman, където има детайлно описание на xScope (накратко, това е нещо като Screen Calipers, умножено по 10… или дори 100!).

Argh! Това е Win-дискриминация! :-D

PS Програмката струва само $27, ако решите да я използвате след trial периода…

Вчера се борих с IE. Безуспешно.

Проблемът накратко:

Да вземем най-простия пример. Създаваме нов HTML документ, с три контейнера в него: #header, #main, #footer.

За #header-а задаваме следните CSS правила:

#header {
width: 760px;
height: 200px;
margin: 10px auto 0 auto;
padding: 0;
background: #F00 url(header.jpg) top left no-repeat;
}

Дотук всичко добре. Сега нека създадем още едно или две копия на същия html документ, и да ги cross-link’нем. Имаме три html страници, с еднакъв CSS и html.

(more…)

Днес се борих с Internet Explorer. За момента IE води в резултата, ама от злост се сетих за една диаграма, на която бях попаднал преди година и нещо в Интернет. Тръгнах да я издиря и успях. Ето я:

Time breakdown of modern web design:

Намерих я публикувана тук, има и доста интересно описание за това, какво се е случило, когато картинката заедно с блог поста попаднала на първа страница на digg (и има и похвали за моя хостинг, между другото) :-D

Сега като се замисля, може и да съм виждал същата картинка и в някой от българските блогове, но вече не си спомням… Та ако някой се чувства първооткривател, да не се сърди, нека остави линк в коментар тук, thx:)

…А утре битката с IE ще продължи. Stay tuned! :-)

Днес имах отвратителен ден…

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

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

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

(more…)

Интересна статия на Jeffrey Zeldman за уеб дизайнерите:

alistapart.com/articles/understandingwebdesign/

Ако се занимавате професионално с уеб дизайн, си струва всеки ред четенето:)

Зелдман пише за различните аспекти на уебдизайна, за типографията (typography — науката за шрифтовете), и много други неща. Статията завършва с:

The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.

If she achieves all that and sweats the details, her work will be beautiful. If not everyone appreciates this beauty—if not everyone understands web design—then let us not cry for web design, but for those who cannot see.

Добре казано!

PS Докато четох статията на Зелдман, се присетих и за размишленията на Емича за това, доколко си приличат Супермен и уебдизайнерите:)

Ако търсите забавни и/или полезни страници, показващи прочутата грешка “Грешка 404: Страницата не е намерена” (”Error 404: Page Not Found”), то този ресурс ще ви бъде изключително полезен/ценен:

simplebits.com/notebook/2007/11/03/404.html

Ако не за друго, може да се почерпят безкрай много идеи от всички линкове към 404 страници, които се намират в коментарите към поста на Дан Седерхолм:-)

Да, възможно е.

Не, не става с просто copy-paste и на двата кода един до друг.

Четете нататък, ако искате да разберете решението, което открих експериментирайки! :-)

* * *

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

Речено - сторено.

Създадох отделни профили в Google Analytics (един профил за целия сайт и няколко профила за секциите в него), копирах кодовете от GoogleAnalytics на всяка страница, един под друг, и зачаках резултатите. След около 24 часа се оказа:

1) Общият брояч работи (винаги е първи в кода на страниците).
2) Броячите за секции не работят (отчитат нулев трафик), въпреки че самият Google Analytics твърди, че кодът е вмъкнат правилно и работи (кодът на GA за всяка секция винаги е след кода на брояча за целия домейн).

Нещата в този момент изглеждаха така:

<!-- GoogleAnalytics code for the whole domain -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-XXXXXXX-X";
urchinTracker();
</script>
<!-- GoogleAnalytics code for a specific site section -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-XXXXXXX-X";
urchinTracker();
</script>

Явно copy-paste не вършеше работа в случая… След известно почесване по главата и търсене в Google открих следното решение:

(more…)

Да започнем деня с усмивка!

Обичате ли да пишете 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

Днес почти приключих с дизайна на един проект, където освен XHTML/CSS, графика (Adobe Fireworks) и настройване на една специфична CMS система, ми се наложи да използвам и SSI (Server-Side Includes) по един нов за мен начин.

(SSI е нещо като пра-прадядото на PHP, или поне в моите очи е такъв, тъй като почти не разбирам от back-end програмиране, PHP/MySQL и други езици за уебпрограмиране - html/css не се броят, of course;-)

Както и да е, доволен съм, че проектът върви добре, и скоро ще бъде онлайн. Също и много се гордея с “откритието”, което направих - а именно, успях да постигна чрез SSI+CSS функционалност, каквато иначe знам как се прави само с PHP+CSS.

Става въпрос за динамична навигация на две нива, с отбелязване на секцията на сайта, където се намира потребителят, чрез CSS, като class="current" се добавя автоматично чрез SSI към текущия list item в навигационното меню.

SSI се използва и за да бъде показано или скрито определено второ ниво от навигацията (nested UL, тоест вмъкнат неподреден списък), в зависимост от това, в коя секция от главното меню се намирате.

Не знаех, че SSI може да се справи и с такава задача, и откритието ми доста ме зарадва, тъй като благодарение на него сайтът ще се получи точно така, както си го представях:) А и старата специфична CMS система ще е happy;-)

(Може би сте чели статията на Jason Pearce - Keeping Navigation Current With PHP (and CSS), публикувана в A List Apart? Ако да, то моят начин до голяма степен прилича на PHP+CSS варианта, описан от Джейсън, само че постигнат чрез SSI.)

Доста порових в интернет, докато намеря решението на задачата със скриването/показването на под-менютата чрез SSI, и тъй като моето “откритие” може да бъде полезно и на други, мисля да го публикувам тези дни, но може би в английската версия на optimiced (а и с малки модификации примерът може да се ползва и за други езици, примерно, PHP).

Работният ден обаче е приключил.

Може да се разходя, да видя фотоизложбата на Ян Артюс-Бертран или пък просто да си почина малко, да хапна вкусна домашна супа или пък да си отворя студена бира от хладилника — възможностите са почти неограничени, както се казва;-)

Така или иначе, за момента мисля да изоставя всякакви SSI, CSS, PHP и други трибуквени технологии да си почиват:)