Browser Wars – Whoever Wins We Lose

Индиана Джоунс…

…и похитителите на поостарелия браузър!

Има едно нещо, което ме е притеснявало винаги в съзнателната ми кариера на уеб дизайнер и то се нарича Internet Explorer 6 (IE6). Това три-символно античовешко подобие на браузър вгорчава живота на много хора и жени всеки ден. То е като кодово име на вирус, като модел на супер разрушителен танк, като името на асеторида, който ще удари синьо-зелената ни планета някой ден. Сигурен съм, че в Ада, самият дявол ползва IE6 за никнейм.

Browser Wars

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

скачат картинки на едно по-светло бъдеще, в което можеш да се възползваш от новите технологии, а не да четеш статии от типа на HTML 5 Won’t Be Ready Until 2022. Би било прекрасно, нали? Да. В тази статия обаче искам да обърна внимание на нещо по-различно и донякъде по-важно. Според мен не е толкова важна актуалната версия, колкото унифицирането на браузърите, макар че двете неща имат доста допирни точки. С други думи – за мен не е важно дали съм с последния Internet Explorer, ако той дори не поддържа прозрачности например. Примерът е абсурден, знам, но е пример. Този проблем се корени от зората на уеб браузърите и се надявам някой ден всичко това да бъде минало. Смятам да разделя статията на две части, описващи накратко плюсовете и минусите без да се навлиза много в технически детайли.

…и храмът на обречените дизайнери!

Започвам с минусите, тъй като те са повече. Какво имаме в момента? Firefox 2, Firefox 3, Firefox 3.5, Opera 9, Opera 10, Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Safari 4 и новопоявилият се Chrome. Какво се очаква да ни удари скоро? Firefox 3.6 и Internet Explorer 8.1.Така, а сега сложете и няколко операционии системи, някои от които с прилично количество дистрибуции. Картинката ви става ясна, а ако все още ви е мъгливо, то погледнете тук. Цифрата е сериозна, нали?

Когато се разбработва един уебсайт, идеята е той да се вижда от колкото се може повече хора, да се хареса, да се посещава и да се ползва, като ултимативната цел е да влезе в нечий bookmark toolbar. Всеки се стреми към това, но тази задача е доста трудна, защото първо на първо след изяснената идея трябва да се нарисува красив и ползваем дизайн, съобразен с актуалните течения. Разбира се дизайна е нищо без качественото съдържание, с което трябва да се пълни често. На един обикновен потребител не му е необходимо друго освен да влезе и да намери това, което търси бързо и лесно. Ако цялото това съдържание е облечено в красиви дрешки, които го правят по-сексапилно, армията от фенове е готова. В повечето случаи обаче всичко е прекрасно до момента, в който крайния резултат се види под всички тези браузъри, които споменах по-горе. Започват разминаванията, счупените страници, крещящите javascript грешки, изобщо пълен хаос. Това го има и при най-новите версии. В по-малки количества е, но го има. Голямата битка в момента всъщност е IE6 vs. All. Защо все още огромна част от потребителите по света ползват IE6? Ясно е – на много малко хора им дреме с какво всъщност браузят. По-важното за тях е да го правят. Голям процент от тях дори не знаят какво е това браузър, за тях е просто кръглата синя иконка до Start бутона. Защо IE6 продължава да се поддръжа от всички малко или много? И това мисля, че е ясно – таргет групата на повечето сайтове са масата от хора, а те ползват Internet Explorer, като доста от тях и шеста версия. Така какво се получава – разработчиците създават сайтове за остарели браузъри, за да не губят потребители и по този повод потребителите не сменят браузърите, тъй като получават това, което им е необходимо. Затворен кръг. Решението е ясно – всеки, който ползва IE6 или изобщо остаряла версия на браузър вместо сайт вижда голи бабички. Това ще е идеално за личен блог или непретенциозен сайт, но там където има бизнес нещата стоят по-различно. Никой няма да се откаже от парите и би направил всичко, за да получи повече от тях. В резултат на това, за да бъде всичко наред с по-старите браузъри виждаме счупени сайтове, опростени сайтове, сайтове с отделен, втори дизайн, сайтове изцяло на Flash, сайтове приличащи на тексаско клане и какво ли още не. Да приемем обаче, че преглътнем тези проблеми и с един от тези начини подкараме нашия сайт на по-стар браузър. Какво от това? Имаме още 10 основни, с които да се съобразяваме. Напоследък всички се опитват да бъдат модерни и пускат какви ли не фийчъри в продуктите си, но с какво помага това? Ей, хора, не искам акселерометър! Направете всичко еднакво в хоризонтално положение на екрана, пък после ако искате и 3D браузър извадете!

прочети нататък »

Манджа с грозде #3: Yoono, iStockZoom и CSS Usage!

Продължавам си символичната поредица от манджа с полезни линкове и този петък, като този път обаче реших вълната да бъде изцяло на firefox extensions. Избрал съм 3, на които може да попаднете по-рядко, но са доста полезни.

Yoono Първият екстенжън се нарича Yoono. Става дума за програмка, която обединява в себе си няколко социални мрежи, като например Facebook, MySpace, Twitter, Flickr и пр. По принцип софтуера може да се изтегли и в десктоп вариант, но на него няма да му обръщам внимание засега. Версията за Firefox може да се свали оттук, а за IE оттук (но е все още бета). Какво предлага Yoono на потребителя? Ами просто обединява ползваните от вас социални мрежи в една симпатична колонка. Авторите са се постарали да вкарат базовата функционалност, така че да може да се извършват всички основни действия доста бързо. След инсталацията е необходимо само да добавите желаните от вас мрежи и да разрешите връзката им с Yoono. След това те се самоъпдейтват, а на вас ви се спестява куп време от ровичкането в няколко таба. Например в Twitter частта може да добавяте туит, да разглеждате какво пишат останалите, да reply-вате, да retweet-вате, да пишете директни съобщения, дори да превеждате в реално време към английски език. Също така имате пълноценна търсачка – както глобална, така и на приятели. Освен това в браузъра ви при кликане на десен буон вече имате избор за Share, с което може да споделяте намерени линкове, картинки и видео почти мигновено. Но това не е всичко, имате и drag’n’drop! Изобщо пред вас стои един доста завършен Twitter клиент. Във Flickr частта пък имате изобразен автор, описание, самата снимка (ако задържите над нея същата се отваря вдясно на голям екран с ефектен lightbox), опции за коментар и линк към галерията на автора. Какво друго ви трябва? Може да качите и собствена картинка, като на разположение имате вграден uploader, който за жалост понякога е малко бавничък. Общо взето авторите са се постарали да запазят индивидуалното от всеки тип мрежа и да го съберат в една колона, така че да е удобно за постоянно ползване. Голям плюс за мен е и променящата се големина на колоната, т.е. може да я направите и 400px, но може да я съберете в съвсем тънка лентичка, която на днешните монитори и резолюции изобщо не пречи. Освен това има много приятна, минималистична визия. Като цяло много ми допадна и нищо чудно някой ден да влезе в задължителните ми екстенжъни.

прочети нататък »

Манджа с грозде #4: Intype, Browserlab и Grooveshark!

IntypeIntype – In type we trust. Не случайно това е слогана на тримата мускетари, разработващи този чудесен редактор на код. Intype е едно малко бързо, леко, сладурско и зелено едиторче, за което ме просветли един приятел преди няколко години. Проблемът му е само един – авторите са прекалено заети с ходенето по жени и проектът върви адски бавно… не, аааааааааадски бавно. Intype е в alpha статус и в момента стабилната версия е 0.3.1.547, а нестабилната е 0.3.1.734, но кажи-речи това са версии от година насам. Дано бетата излезе преди 2012 поне да видя заслужавало ли си е. Ако си затворим очите пред това обаче, то налице имаме един много приличен редактор с голямо бъдеще. Сигурно някои от вас вече се питат какво го отличава от останалите за момента – ами две неща, които са навързани – Bundles + Snippets. Ще се спра само на тях, тъй като останалото е почти идентично с всички средностатистически редактори. Bundles представляват пакетите с езици (PHP, JavaScript, C, Ruby, HTML, CSS и т.н.), а Snippets са бързите клавишни комбинации, с които изписваме определен код на конкретния език. Така например ако искаме да пишем на HTML – избираме езика. След това ни трябва дългия и досаден DOCTYPE – не е нужно да копираме отнякъде, а просто трябва да напишем doctype и да натиснем tab. Същото можем да направим и за <head> и за каквото още се сетите. Огромният плюс е, че сами може да създавате snippets и така например когато напишете html и натиснете tab да се изписва и doctype и head и styles и meta и изобщо един хедър на html документ… за 2 секунди! Записах и едно кратко филмче със Screenr, за който вече писах, за да покажа нагледно силата му.

прочети нататък »

Манджа с грозде #5: Typetester, Kuler и Elfyourself!

Реших, че ще е доста по-удобно ако в заглавието на поредицата ми “Манджа с грозде” слагам и имената на продуктите, за които пиша. Все пак, когато броят им стане 100 ще е много трудно за ориентация без някакъв знак в заглавието, така че край на умуванетo ми от първия пост. Но стига толкова приказки – напред към днешната тройка.

Typetester Typetester – Typetester е невероятно удобен инструмент за работа с шрифтове в уеб. Преди време бях попадал на него, но ето, че скоро отново се засякохме и реших да му отдам вниманието си в блога. Какво е уникалното на продукта? На разположение имате три колони с текст, стилизиран в най-различни варианти (от Bold, през Uppercase Italic, та чак до Small Caps Bold Italic). Общо взето се обхваща всеки един възможен вариант. След това във всяка една от трите колони може да изберете различен шрифт, като автора за улеснение ги е групирал в Safe, Windows Default, Mac Default и Windows Vista. Но това не е всичко – имате възможност да изберете и шрифт от собствения си компютър, за да видите как изглежда той в браузър и после евентуално с @font-face да го използвате някъде. Освен това имате дузина настройки на разположение – font-size, line-height, letter-spacing, word-spacing, color, text-decoration и пр. Така например може да сравните как биха изглеждали Arial, Tahoma и Verdana на вашия сайт, тъй като добре знаем, че браузърите освен помежду си, възпроизвеждат шрифтовете по различен начин и в сравнение с Photoshop, Fireworks и подобни. Накрая когато сте готови с избора си има чудна опцийка, която генерира настройките в CSS код. Има още доста неща за разглеждане, но ще оставя удоволствието на вас. Сигурен съм, че този инструмент ще е полезен на доста хора, не само на дизайнери.

Kuler – безплатен инструмент за цветови схеми от Adobe. По принцип не съм особен фен на този род софтуер, но ползвам от време на време когато забия. Разбира се, нямаше как да прескоча отрочето на Adobe. На пръв поглед Kuler има малко стряскащ и разхвърлян интерфейс, но след 5 минути работа нещата си идват на мястото. На потребителя е предоставен огромен набор от теми (над 15,000), които могат да бъдар сортирани по популярност, рейтинг, дата на публикуване и т.н. Директно от сайта може да си направите и собствена тема, като самият инструмент е много мощен. Имате и избор да вземете цветове от снимка във Flickr или да качите такава от собствения ви компютър. Продуктът не е нов, но като цяло браво на Adobe, че продължават да пускат безплатни решения и то старателно направени.

ElfYourself – С наближаването на коледните празници желанието за работа намалява, а усещането на домашния уют расте, макар че в тези невиждани за сезона жеги все още ни е трудно да се настроим за коледно празненство. Няма проблем, защото ElfYourself ще ви помогне! ElfYourself се появи в мрежата преди години и предизвика истински фурор. Тогава всеки можеше да прикачи собствена снимка към лицето на танцуващ на забавна коледна песен елф. Беше супер! Логично продуктът се сдоби с екстри и сега може да имате до 5 елфа (5 снимки, като може да избирате дали ще качвате от компютъра си или от Facebook), които да изпълняват 5 различни танца, кръстени Hip Hop, Singing, Disco, Classic и Country. Enjoy!

Simple Drop Down Menu w/ CSS & jQuery

Целта на днешното занятие е да създадем едно семпло, но много еластично от към функционалност меню. Под семпло имам предвид само външния вид, като естествено вие може да си го промените както пожелаете. За сметка на това обаче менюто ще поддъжа безброй подменюта, което е и големият плюс, а самото добавяне на ново подменю става с копирането на няколко реда код. И за финал, за да е по-мазничко съм добавил малко jquery ефектчета.

Менюто е тествано и работи на всички по-популярни браузъри – Firefox 3.6, Chrome 4, Opera 10, Safari 4, IE 6, IE 7 и IE 8. Освен това може да се ползва за всичко – не е задължително да е главно меню. С малко пипане може да стане хоризонтална навигация, а ако го обърнете на 180 градуса може да се получи помощна лента, забита в дъното на екрана в стил Facebook. Изобщо възможностите са доста и се постарах да покрия колкото се може повече. Ако искате да ровичкате обаче, да предупредя, че трябва да имате поне минимални познания по CSS, HTML и JS, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение – приемам всякакви идеи и корекции!

Стъпка 1: HTML

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/simple-dropdown-menu.js"></script>
<title>Simple Drop Down Menu w/ CSS & jQuery by RIP</title>
</head>
<body>

	<div id="menu">
		<div id="menu_r">
			<div id="menu_l">
				<ul class="main">
					<li><a id="home" href="#">Начало</a></li>
					<li>
						<a href="#">Новини</a>
						<ul class="sub">
							<li><a href="#">Свят</a></li>
							<li>
								<a href="#">България</a>
								<ul class="sub">
									<li><a href="#">София</a></li>
									<li><a href="#">Пловдив</a></li>
									<li><a href="#">Варна</a></li>
									<li>
										<a href="#">Бургас</a>
										<ul class="sub">
											<li><a href="#">Риби</a></li>
											<li><a href="#">Жълъди</a></li>
											<li><a href="#">Кифли</a></li>
											<li><a href="#">Патладжан</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Наука</a>
								<ul class="sub">
									<li><a href="#">Космос</a></li>
									<li><a href="#">Клониране</a></li>
								</ul>
							</li>
							<li><a href="#">Спорт</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Статии</a>
						<ul class="sub">
							<li><a href="#">Кратки</a></li>
							<li><a href="#">Дълги</a></li>
						</ul>
					</li>
					<li><a href="#">Каталог</a></li>
					<li><a href="#">Архив</a></li>
					<li><a href="#">Форум</a></li>
					<li><a href="#">Блог</a></li>
				</ul>
			</div>
		</div>
	</div>

</body>
</html>

На какво трябва да се обърне внимание тук? Като за начало погледнете си пътищата към javascript, image и css файловете. Ако ги местите и се чудите защо не работят, вероятно това е причината.

Стъпка 2: CSS

Тъй като целта ни е да направим едно безкрайно меню, CSS-а е малко по-дълъг от обикновено. Разбира се ако му накичите още някоя глезотийка редовете ще скочат, но това в крайна сметка няма значение… просто не се заблуждавайте, че е нещо много сложно. За урока съм го стилизирал по-семпличко и без много изображения, за да схванете логиката, а всеки, който иска може да си добави картинки и в подменютата. Между другото за по-голяма оптимизация съм направил sprite от картинките на менюто. Sprite с две думи, освен популярната напитка, представлява една огромна картинка (например хвърлете едно око на YouTube-ската тук), която се зарежда веднъж и впоследствие с помощта на CSS и background-position, ние позиционираме необходимата ни част на необходимото място. Прави се предимно с цел оптимизация, но много трябва да се внимава, защото е малко пипкава работа, особено под по-старите браузъри.

body { margin: 0; padding: 0; font: 11px/1.3em Tahoma, Arial, Verdana, sans-serif; background: #FFF; color: #666; }

#menu { background: url(../img/menu.png) repeat-x left -72px; width: 800px; margin: 100px auto; }
#menu_r { background: url(../img/menu.png) no-repeat right -36px; }
#menu_l { background: url(../img/menu.png) no-repeat left 0; height: 36px; }
#menu ul { margin: 0; padding: 0; list-style: none; }

ul.main li {
	position: relative;
	float: left;
	background: url(../img/menu_li.png) no-repeat right top;
	padding: 0 3px 0 0;
}

ul.main li a, ul.main li a:link, ul.main li a:visited {
	float: left;
	padding: 0 25px;
	color: #666;
	font-size: 12px;
	height: 36px;
	line-height: 36px;
	font-weight: 700;
	outline: none;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
}

ul.main li a:hover { color: #00b2fc; background: url(../img/menu.png) repeat-x left -108px; }
ul.main li a span.arrow { color: #999; }
ul.main li a#home:hover { background: url(../img/home_hover.png) no-repeat left top; }

ul.main li ul.sub {
	display: none;
	position: absolute;
	top: 36px;
	left: -2px;
	width: 200px;
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
}

ul.main li ul.sub li {
	position: relative;
	padding: 0;
	background: none;
}

ul.main li ul.sub li a, ul.main li ul.sub li a:link, ul.main li ul.sub li a:visited  {
	float: none;
	display: block;
	width: 180px;
	border-bottom: 1px solid #d9d9d9;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	font-size: 11px;
	background: #f8f8f8;
}

ul.main li ul.sub li a:hover {
	color: #666;
	background: #efefef;
}

ul.main li ul.sub li ul.sub {
	position: absolute;
	top: -1px;
	left: 200px;
	border-top: 1px solid #d9d9d9;
}

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

Стъпка 3: jQuery

Тъй като jQuery е една от най-добрите Javascript библиотеки, аз съм я използвал с актуалната й версия 1.4.2. Приложил съм всички файлове в архива за сваляне, но ако имате желание да го свалите отделно, ето линк за компресираната версия или за отворения файл, по който може да човъркате.

Тук JQ се ползва много малко и буквално, както виждате са 10 реда, но създава приятен ефект.

$(document).ready(function ()
	{
		$('.main li:has(ul) > a').addClass('more');
		$('a.more').append('<span class="arrow">&nbsp;&nbsp;&raquo;</span>');
		$('.main li').hover(function () {
			$(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
		}, function () {
			$(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
		});
	});

Идеята тук е да търсим всяко LI, което е родителски елемент на A и съдържа в себе си UL. Така ако е изпълнено условието на линка се добавя клас “more”, на който клас на следващия ред добавяме стрелкички до името на бутона. Това го правим с цел да се разбере, че този бутон съдържа в себе си информация и подтиква юзъра да провери каква е тя.

След това създаваме плавния ефект на Slide Up & Down. Търсим всеки първи списък и му пускаме анимация, която го слайдва надолу и му добавя клас “active_list”. След това търсим списък с вече добавения клас “active_list” и поставяме условие, ако мишока не е върху него да се изпълни анимацията за затваряне или иначе казано прибиране нагоре. След това просто изтриваме класа “active_list” и всичко е готово.

Накратко е това. В javascript файла, който се намира в архива съм закоментирал ред по ред кое какво прави мааалко по-разширено. Нещата не са никак сложни, стига да имате малко понятие.

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

Contact
captcha