Archive for the 'Уебдизайн' Category

IE6-IE9: 10 години

Tuesday, March 15th, 2011

10 години не са малко. IE6 беше един от най-добрите браузъри за времето си (2000-2001 година). След това започна да се превръща малко по малко в спирачка за развитието на Web — докато останалите браузъри се развиваха с бързи темпове, IE6 си оставаше непроменен. И така, докато IE7 се появи. После IE8. Време е за нова промяна…

IE6-7-8-...9!

Microsoft казват, че IE6 е вече история. И че IE9 (който официално излезе днес и може да се ползва от всички потребители с Windows Vista/Windows 7) е много по-добър браузър.

Да видим! :)

Anonymous Pro – интересен шрифт за код(ъри|иране)

Monday, September 28th, 2009

Ако честичко ви се случва да пишете код, то шрифтът Anonymous Pro може да ви се стори интересен и/или подходящ за целта. Предназначен е специално за писане на код (нулата, разбира се, е зачеркната;-) и включва и кирилица.

Anonymous Pro font

Може да си го свалите напълно безплатно оттук:

www.ms-studio.com/FontSales/anonymouspro.html

Иначе, моето лично предпочитание за monospaced шрифт е абсолютно и неоспоримо Consolas. Доколкото знам, този шрифт на Microsoft и също може да се намери за безплатно сваляне; шрифтът е много четлив и подходящ за писане на всякакви видове код — в моя случай, най-често го виждам да подрежда блокчета XHTML и CSS:)

“Jeffrey Zeldman is now following you on Twitter”

Monday, September 28th, 2009

…или за ползата от Twitter.

{ Като си зарови човек draft-овете достатъчно надълбоко и… ;-) }

{ Нейде през юли тази година стават бяха събитията… }

Twitter е удивителна… медия? Социална мрежа? Средство за супер-бързо предаване на новини, мъдрости, глупости и “важни” неща като “В момента пия кафе и хапвам кроасани”? Нещо като IRC, но и с опция за SMS, филтриране, търсене, и опция за избор, какво, кога и как ще четеш?

Twitter е може би от всичко това по малко! :-)

Jeffrey Zeldman's hat…Тъй като съм уеб дизайнер и (частично) geek, ми беше изключително интересно да следя дискусията в две от последните публикации на Jeffrey Zeldman:

www.zeldman.com/2009/07/02/xhtml-wtf/
www.zeldman.com/2009/07/07/in-defense-of-web-developers/

…където се разискват разпалено последиците от прекратяването на работата по XHTML 2 стандарта, и това, какво ще се случи с XHTML 1.0, HTML 4.01, както и с новия HTML 5.

В един момент, обаче, в уебсайта на Зелдман се появи един странен бъг, във Firefox 3/Win: някъде след около 3/4 от страницата с последната му статия и многобройните коментари под нея, внезапно съдържанието изчезваше (screenshot). Без причина. Самата страница се валидираше перфектно, и нямаше никакви проблеми с encoding’а или HTML/CSS кода.

Самият Джефри забеляза проблема също (както и много други негови читатели) и се опитваше да го реши в продължение на много часове. Предположението, че проблемен pingback с UTF-16 encoding e предизвикал “отрязването” на страницата във Firefox, не се потвърди.

Опитах се и аз да подхвана проблема от някой край, от любопитство (не че не бях опитал и преди ден или два, но по различен път — предположението ми беше, че в някакъв коментар има незатворен таг, и той предизвиква “отрязването”; или пък има проблемен pingback; но и двете предположения не се потвърдиха след около 2 часа тестване).

Предположих, че има CSS бъг в rendering engine’а на Firefox, който може би може да бъде оправен с някакво правило в CSS файла на zeldman.com. Припомних си и че един от читателите спомена в блога на Джефри Зелдман, че е опитал с Firebug да провери нещо, затова набързо направих една тестова страничка, и към нея един малък CSS файл с правилото, което (хипотетично) щеше да оправи грешката. След това тествах във Firefox 3.0.11/WinXP. Проблемът изчезна! :-)

Един-единствен ред решаваше проблема за Firefox:

div#wrapper {
overflow: visible;
}

След това отделих още време за да тествам в детайл, дали промяната не засяга някой друг от популярните в момента браузъри (Opera 9.6, Safari 4, Chrome 2, IE7, IE6) и след като се убедих, че всичко е наред, писах на Зелдман в Twitter (отделно и малко по-подробен e-mail), като му предложих този fix за Firefox.

След малко прочетох отговора на Зелдман:

@optimiced Will try as soon as I’m back on my feet. Thanks wise one.

Малко по-късно, Zeldman имплементира идеята, и дизайнът му се оправи! :-)

За съжаление, след това се появи нов бъг, предизвикан от “поправката” на предишния — фонът на страницата, който е червен, “примигваше” за секунда или две при всяко зареждане, тъй като overflow: visible предизвикваше това, че фонът на елемента #wrapper се зареждаше сега с малко закъснение (преди: overflow: auto).

Е, след малко умуване, аз и още един читател предложихме две различни допълнителни CSS решения, които (на по-късен етап) се оказа, че се взаимодопълват добре, и решават проблема с примигването във всички браузъри — включително и във Firefox и Safari! :-)

Последно, да не пропусна да спомена, че Джефри Зелдман е пич! След цялата забавна история със CSS бъговете във Firefox, Джефри ми благодари и ме добави в своя Twitter, а после ми обеща и да ми изпрати своето ново (трето) издание на популярната си книга за уеб стандартите, като подарък! (Мисля и че някъде в CSS кода на zeldman.com има и още благодарности;-) Винаги е приятно да си общуваш с такива хора, дори и ако си общувате само със 140 знака съобщения! ;-)

* * *

А, и защо започнах статията с въпроса, какво е точно Twitter?

Защото, след като ползвам Twitter от поне няколко години, мога да твърдя, че Twitter позволява бърза, точна комуникация по съвсем нов начин. Коментарите в блоговете (както и формите за обратна връзка), също го позволяват, но Twitter е нещо различно. Нещо, което не мога да дефинирам точно, но което върши работа, и е забавно при това!

Затова, засега можете да ме намерите на Twitter (но не и на Facebook)… е, и в личния ми блог, разбира се! ;-P

W3C HTML иконки (от Veerle Pieters), PNG+alpha

Saturday, July 4th, 2009

Наскоро писах за дизайна на едни много приятни HTML иконки, които Veerle Pieters нарисува и пусна за свободно разпространение.

W3C HTML icon from Veerle, PNG

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

За моя радост, след като няколко коментиращи в нейния блог (включително моя милост;-) помолихме за версия PNG+alpha, Veerle най-любезно ги предостави! :-)

Може да си ги свалите от нейния сайт и/или оттук (разпространението на иконките е съвсем свободно и неограничено, както и тяхната употреба):

download all icons in one ZIP archive, PNG+alpha

:-)

Нови W3C HTML иконки (от Veerle Pieters)

Thursday, June 4th, 2009

Veerle току-що направи няколко страхотно изглеждащи HTML иконки:

W3C HTML icon from Veerle, variant 1

W3C HTML icon from Veerle, variant 2

W3C HTML icon from Veerle, variant 3

W3C HTML icon from Veerle, variant 4

Ако сте Mac потребител (и уеб дизайнер;-), тогава е възможно вие да използвате Markup Validator S.A.C. — това е програма, която замества онлайн валидатора на W3C, при това работи и оффлайн. Новите иконки на Веерле ще заменят default иконата на Markup Validator S.A.C. в дока на MacOS X.

the icons (compared)Вляво е сегашната иконка на Markup Validator S.A.C. Може да я сравните с вариантите, които Веерле нарисува — лично на мен, нейният дизайн ми харесва много повече! :-)

Освен това, тя пусна целия icon set съвсем безплатно!

За съжаление, трябва да отбележа само, че комплектът иконки е предвиден само за Mac потребители. Жалко, защото иконките биха могли да се използват по много начини (и не само под MacOS X, конкретно за това приложение точно).

Разбира се, може да си свалите и използвате JPG вариантите (които са в доста високо качество), но без alpha прозрачността, която е възможна само при PNG32 файловия формат…

Ако искате да използвате някоя от тези иконки под MacOS X, линк за свалянето им има в публикацията на Веерле:

http://veerle.duoh.com/blog/comments/a_new_icon_for_markup_validator_s.a.c/

(Там има и инструкции, как може да си смените някоя от иконите в дока на MacOS X.)

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

download all icons in one ZIP archive, JPG format

В заключение, какво повече да кажа? Още един прекрасен дизайн от Veerle! :-)

XHTML 1.0 или HTML 4.01 (HTML 5)?

Friday, May 15th, 2009

Ако се занимавате професионално с уеб дизайн и пишете HTML/CSS код for living, може да ви е интересен фактът, че Dave Shea превключи от XHTML 1.0 към HTML 4.01.

[ This article is also available in English ]

Факт е, че:

1) Напоследък HTML 5 стандартът набира скорост.

2) XHTML 2.0 е вероятно никога да не се реализира като наследник на XHTML 1.0. Всъщност, най-вероятно е XHTML 2.0 да не се появи изобщо.

3) Немалко професионални дизайнери и CSS/HTML кодъри се отказват от XHTML 1.0 и се връщат обратно към HTML 4.01 (а някои от тях дори експериментират сериозно с HTML 5).

Ако сте уеб дизайнер и/или обичате да създавате HTML/XHTML код на ръка, съм любопитен, кой стандарт за HTML документи предпочитате в момента (изберете един от отговорите в анкетата по-долу):

< ?php if (function_exists('vote_poll') && !in_pollarchive()): ?>
< ?php get_poll(2); ?>
< ?php endif; ?>

Анкетата е непредставителна, несериозна, и резултите от нея вероятно няма да послужат за нищо друго, освен да се осведомя, дали в момента само аз си оставам (временно) привърженик на XHTML 1.0, или все още има и други като мен:)

(more…)

utf8_unicode_ci vs. utf8_general_ci

Wednesday, April 29th, 2009

От доста време търся отговор на следния въпрос:

Каква е разликата между utf8_unicode_ci и utf8_general_ci (MySQL collations)?

PHP/MySQL е тъмна Индия за мен, така че с интерес прочетох следния кратък материал по въпроса:

http://forums.mysql.com/read.php?103,187048,188748#msg-188748

В общи линии излиза, че почти няма разлика между двете; може да се каже и че utf8_unicode_ci е малко по-точен, а utf8_general_ci е малко по-бърз (или поне това разбрах от обясненията)…

(Явно не съм сбъркал, когато се чудех преди време, какви настройки да избера за WP при инсталирането на нашите блогове преди 2 години и нещо, и накрая се спрях на DB_CHARSET: utf8 и DB_COLLATE: utf8_unicode_ci. Спомням си и че в WordPress 2.0.5 тези настройки все още не присъстваха, така че се правеше един “хак” при връзването към базата данни, май се редактираше на ръка wp-db.php в /wp-includes/…)

Също и предполагам, ако планирате да пишете на повече от един език и/или на език, различен от US/UK English, utf8_unicode_ci е по-добрият избор — примерно, немската буква “ß” ще бъде коректно подредена близо до “ss” (при utf8_general_ci това няма да се случи). Има и други интересни разлики, така че хвърлете едно око на материала, ако ви е интересно…

Наближава ли залезът на IE6?

Sunday, February 22nd, 2009

В светлината на идеите в последно време уеб дизайнерите да се занимават с Internet Explorer 6 все по-малко и по-малко (все пак, този браузър е вече на почти 10 години!), ми беше любопитно да сравня малко статистики в моя сайт.

Но първо, няколко думи за причините за намаляването на поддръжката за IE6 и две интересни статии.

Причините

Dan Cederholm: How I Might Deal with IE6

Roger Johannson: No more pixel perfectionism in IE 6

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

В определени случаи, може дори да прецените, дали искате да осигурите дори и минимална поддръжка за IE6, или направо да го “отрежете”, по подобен начин, както преди години беше ограничена поддръжката за Netscape 4.7x, с помощта на @import за CSS стиловете.

За IE6, може да ползвате IE conditional comments, примерно:


<!--[if gte IE 7]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

“Преведено” на разбираем език, това малко парченце HTML код значи следното:

Ако Internet Explorer е версия 7 (или по-висока), файлът със CSS стиловете ‘screen.css’ ще се зареди. В противен случай, файлът няма да се зареди (тоест, при IE6 и по-стара версия). Всички останали браузъри (Firefox, Opera, Safari, etc.) ще си заредят нормално файла screen.css. Тествах във Firefox 3, Safari 3.2, IE7, IE6, работи безотказно.

Ето го и тестовия пример

Отворете тази тестова страничка с Firefox, Opera, Safari или IE7+ — фонът на страницата би трябвало да е зелен, тоест, файлът със стиловете ‘screen.css’ се зарежда нормално.

Отворете страничката с IE6 или по-стара версия — фонът на страницата би трябвало да е бял, тоест, файлът със стиловете ‘screen.css’ не се зарежда.

А сега малко за статистиките.

Реших да проверя, какъв процент от посетителите на моя блог ползват Internet Explorer, какъв процент от тях ползват версия 6, и също и как стои въпросът с Firefox и още от няколко от съвременните браузъри, които в момента са популярни.

Точните числа

За сравнение взимам последния месец (22 януари — 22 февруари 2009), и сравнявам също така този период със същия период, но от преди една година (22 януари — 22 февруари 2008).

Firefox (Jan. 22, 2009 — Feb. 22, 2009): 56.18% от всички посещения
Firefox (Jan. 22, 2008 — Feb. 22, 2008): 49.79% от всички посещения
Firefox: +6.39% увеличение на посещенията, в рамките на 1 година

Internet Explorer (Jan. 22, 2009 — Feb. 22, 2009): 33.47% от всички посещения
Internet Explorer (Jan. 22, 2008 — Feb. 22, 2008): 40.90% от всички посещения
Internet Explorer: -7.43% намаляване на посещенията, в рамките на 1 година

Opera в момента е около 5%, Chrome около 3.2% и Safari 1.5%. Всички останали браузъри (Mozilla, например) са с пренебрежимо малки числа, така че не си струва да бъдат споменавани дори.

Тенденцията е ясна. Firefox бавно, но постоянно увеличава своя дял, а Internet Explorer прави точно обратното. Safari, Opera, а отскоро и Chrome, също присъстват в общата картина, но доста по-скромно.

Нека видим и как стои въпросът с версиите на IE.

IE7/IE8 vs. IE6

IE7 (Jan. 22, 2009 — Feb. 22, 2009): 55.22% от дяла на IE в посещенията
IE7 (Jan. 22, 2008 — Feb. 22, 2008): 41.59% от дяла на IE в посещенията
IE7: +13.63% увеличение на посещенията в рамките на 1 година

IE6 (Jan. 22, 2009 — Feb. 22, 2009): 43.64% от дяла на IE в посещенията
IE6 (Jan. 22, 2008 — Feb. 22, 2008): 57.18% от дяла на IE в посещенията
IE6: -13.54% намаляване на посещенията в рамките на 1 година

Тенденцията тук също е ясна: IE6 бавно отстъпва позиции за сметка на IE7, който започва да преобладава.

IE8 Beta също присъства отскоро в статистиките, но доста скромно — около 1%.

The Verdict

Firefox: 56.18% от всички посещения на сайта
Internet Explorer: 33.47% от всички посещения на сайта
— IE7: ~ 55% (от IE дяла)
— IE6: ~ 43% (от IE дяла)

Тоест, в момента посетителите, които използват IE6, са по-малко от 15% от общата цифра. Останалите ползват Firefox, IE7, Safari, Opera и Chrome.

15% твърде малка цифра ли е, за да приложа (хипотетично) “филтриране” на CSS стиловете за IE6? Не, все още е рано.

Но предполагам, че до 1-2 години дялът на IE6 ще намалее дотолкова, че наистина няма да има смисъл човек да се старае да оправя XHTML/CSS кода за него. И тогава IE6 ще влезе в историята, по същия начин, по който Netscape Navigator 4.7x влезе в историята преди няколко години — нещо, което лично на мен ми донесе невъобразимо облекчение тогава! :-)

Още за шрифтовете на Win/Mac

Thursday, February 19th, 2009

Преди няколко дни писах за най-разпространените шрифтове под Mac/Windows (също и Linux).

Междувременно, намерих още един интересен материал, посветен на същата тема:

www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Това е списък с шрифтове, характерни за всички версии на Windows и MacOS. Понякога се наричат “browser safe fonts” (тоест, шансът повечето от тези шрифтове да присъстват на типична Mac или Windows система е доста висок).

Ако се занимавате с уеб дизайн, хвърлете едно око, може да ви е полезно!

Ето и извадка от списъка:

win-mac-common-fonts

Забележки:

1) Georgia и Trebuchet MS идват заедно с Windows 2000/XP и са също така включени в шрифтовия пакет на Internet Explorer (също и често идват с други приложения на Microsoft), така че те са доста популярни дори и на Windows 98 системи.

2) Символните шрифтове се показват само в Internet Explorer, в други браузъри се използва техен еквивалент (въпреки че Symbol работи в Opera, а Webdings работи в Safari).

3) Book Antiqua е почти като Palatino Linotype, а Palatino Linotype е включен в Windows 2000/XP, докато Book Antiqua идва заедно с Windows 98.

4) Тези шрифтове не са TrueType, а bitmap шрифтове, така че те няма да изглеждат добре когато се използват определени техни размери (те са били създадени за 8, 10, 12, 14, 18 и 24 пункта, при 96 dpi резолюция).

5) Тези шрифтове работят в Safari, но само когато се използва техният нормален стил, но не и bold или italic. Comic Sans MS е ОК в bold, но не и в italic. Други Mac браузъри емулират добре стиловете, които не са осигурени от самия шрифт.

6) Тези шрифтове са налични в Mac OS X, само ако Classic е инсталиран.

За повече подробности, вижте в оригинала:-)

Най-разпространените шрифтове под Windows, MacOS и Linux

Sunday, February 15th, 2009

Ако се занимавате с уеб дизайн и писане на (X)HTML/CSS код, следният списък може да ви е полезен. В него съм комбинирал най-разпространените шрифтове под Windows, MacOS и Linux системи. Данните ми са взети оттук и са валидни към 17-ти януари 2009:

Windows:

Microsoft Sans Serif: 99.61%
Arial Black: 97.82%
Franklin Gothic Medium: 97.58%
Palatino Linotype: 97.54%
Verdana: 97.54%
Arial: 97.13%
Courier New: 96.96%
Comic Sans MS: 96.83%
Tahoma: 96.79%
Lucida Console: 96.76%
Impact: 96.49%
Trebuchet MS: 95.97%
Sylfaen: 95.00%
Lucida Sans Unicode: 94.34%
Georgia: 92.97%

Mac:

Monaco: 96.91%
Arial: 96.62%
Courier: 96.48%
Helvetica: 96.48%
Arial Black: 95.78%
Verdana: 94.37%
Georgia: 93.53%
Helvetica Neue: 93.07%
Trebuchet MS: 92.69%
Geneva: 92.41%
Courier New: 92.12%
Gill Sans: 91.58%
Comic Sans MS: 91.42%
Times New Roman: 90.58%
Arial Narrow: 90.44%
Apple Chancery: 90.15%
Skia: 90.15%
Lucida Grande: 90.01%
Futura: 89.73%
Hoefler Text: 88.47%

*nix:

DejaVu Sans Mono: 92.31%
Bitstream Charter: 90.77%
URW Chancery L: 89.87%
Nimbus Mono L: 89.35%
Century Schoolbook L: 89.09%

В bold по-горе съм маркирал общо 7 шрифтови фамилии. Те са онези шрифтове, които се намират сравнително често едновременно под Windows и Mac, и това са:

1. Verdana (sans-serif font family)
2. Georgia (serif font family)
3. Courier New (monotype font family)
4. Arial (sans-serif font family)
5. Arial Black (sans-serif font family)
6. Trebuchet MS (sans-serif font family)
7. Comic Sans MS (sans-serif font family)

За съжаление, нито един от тези шрифтове не попада и сред най-разпространените шрифтове под Linux/Unix. Явно заблудата ми, че Verdana, например, е един от най-разпространените шрифтове под Windows/Mac/Linux, е била само заблуда — пълните данни, например, показват, че Verdana присъства на над 90% от Windows и MacOS системите, но само на около 50% от Linux…

Могат да се направят и още интересни изводи, ако се прегледат в детайл двата списъка (кратък и пълен), за мен засега е достатъчно, че (поне на теория) има няколко “сигурни” шрифта, които присъстват с голяма доза вероятност едновременно на Windows и Mac:-)


[ optimiced.com е виртуалният дом на Мишел, уеб/графичен дизайнер от слънчева прашна София | powered by WP & DreamHost | also available in English ]

0.612 / 35 / 19.5