Всички публикации от xHTML

8
юли 10

FridayCode ъпдейт!

Отдавна не съм писал нищо за проектчето, което от няколко месеца развиваме и след като скоро пуснахме няколко нововъведения, реших, че сега е подходящия момент да го направя. Всъщност, ако се чудите за кой проект говоря – ами за FridayCode – сайт с уроци за HTML, CSS и JavaScript. От около седмица сме на нов хостинг, ъпдейтнахме до WordPress 3.0 и пуснахме форум! Разбира се, основния фокус пада на последното. В момента форумът, както се предполага не е особено популярен, но се надяваме с помощ на читателите нещата да се променят. Ако ви кефят материалите и решите да се приобщите към обществото – заповядайте!

FridayCode Форум!

Напоследък гледаме да се придържаме към тенденциите и позабравихме jQuery, но за сметка на това се концентрирахме върху HTML5 и CSS3. Може да прочетете как да си направите анимирани табове без грам картинка и само и единствено с CSS3… или пък да понаучите за основите на HTML5. Преди дни пък се появи и статията Всичко за HTML5 video или как да създадем видеоплейър!, в която ще научите доста за една от големите новости в HTML5 – video елемента. Съвсем скоро ще пуснем още няколко супер актуални материала, отново посветени на новите стандарти.

Ще се опитаме да продължим по план с развитието на проекта и се надяваме да го направим с ваша помощ!

тагове: , , , , , , , , , ,
27
мар 10

FridayCode – седмичен обзор #1

FridaycodeВчера измина седмица от пускането на FridayCode.net – един проект, целящ да спомогне за развитието на кодинг обществото в България. Като цяло екипът ни получи доста добри отзиви, както под статиите в сайта, така и на мейл. Благодарение на Facebook и Twitter много хора разбраха за нас, а отделно бързо сформирахме и партньорство с DevStorming.com, което спомогна за разпространението на материалите. Тези дни ще се появим в още една българска мрежа, където се надяваме да намерим доста съмишленици.

В момента на сайта може да намерите няколко дребни, но много полезни съвета за xHTML/CSS. Също така сме написали няколко урока за jQuery – как да си направите лесно падащо меню с jQueryтабове с jQuery и страхотния carousel. Освен това може да прочетете и част първа на полезните съвети с jQuery.

На PHP фронта имаме един представител, който набира скорост и чуваме само добри мнения за него. Ако се чудите как да парснете съдържание то сайт – ето го лесното решение.

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

тагове: , , , , , , , , ,
27
фев 10

Хоризонтално и вертикално центриране на елемент с CSS

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

На повечето от вас е ясно, че за да центрираме един елемент по хоризонтала (било то div, span, a, ul и пр.) е необходимо да му задаем ширина и margin: 0 auto. В някои по-специални ситуации, наложени от по-специални браузъри, трябва да добавим text-align: center и така нещата се получават, но в 99% от случаите ви е необходимо само margin: 0 auto. По-интересното е как да центрирате елемента по вертикалата, така че да стои винаги в средата на браузъра (или родителския елемент, ако пожелаете). Основният проблем идва от различните резолюции, на които се гледа сайтът. Точно за това ни трябва нещо универсално, което не е свързано с условности и изчисляване на безкрайни комбинации.

За примера днес ще направим нещо съвсем простичко, за да ви стане напълно ясно за какво говоря. Ще използваме един div, който ще центрираме спрямо екрана. Няма да пишем никакъв javascript. Изображения също не съм ползвал, тъй като, както казах се стремя да е максимално опростено.

View DemoDownload

Стъпка 1: HTML

Тук ни трябва само един div, който съм кръстил „centered“. Всичко останало е стандартно и е написано, за да го копирате и да имате валиден документ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS Horizontally and Vertically Center Element by RIP</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>

	<div id="centered"></div>

</body>
</html>

Стъпка 2: CSS

Вече имаме създаден div и нашата задача е да го центрираме, като за целта ще ползваме абсолютното позициониране. За хората, които не са наясно какво е това ще поясня с две думи. В CSS има няколко типа позициониране – relative, absolute, fixed и static. За основите им може да прочетете тук. В нашия случай ни интерсува поведението на relative и absolute. По принцип когато един елемент е абсолютно позициониран, то той излиза от нормалния „поток“ на HTML-a, ако мога да така да се изразя и обикновено застава над всички в горния ляв ъгъл на екрана. Сега вие може да го местите където си пожелаете, благодарение на свойствата top, left, bottom и right. Това е страхотно, нали? Да, но на различните резолюции, елементът не винаги е там, където трябва да бъде. Тук в помощ идва релативната позиция. Когато един div е позициониран релативно и в него има друг div, но вече абсолютно позициониран, то абсолютният се води по поставените граници от релативния. Така например ако имате Facebook икона в лявата колона, но искате я да позиционирате малко извън нея, трябва да зададете position: relative на лявата колона, за да може иконата да се води по нея, а не според екрана. В нашия случай обаче ни е нужно точно обратното – трябва да позиционираме спрямо екрана, ето защо не пишем допълнителни релативни div-ове. Напишете следния код.

body {
	margin: 0;
	padding: 0;
	background: #FFF;
}

#centered {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #888;
	border: 1px solid #444;
}

За body, настройките са стандартни, така че не им обръщаме внимание и се концентрираме на „centered“. Виждате, че съм задал ширина и височина на div-a, както и бекграунд и бордър, само за да видим къде е. След това добавям position: absolute, за да го позиционирам спрямо екрана и казвам да бъде на 50% (половината) отгоре и отляво. Така обаче позиционирам външните краища на div-a, а не самия център. Даже си поиграх малко да ви го илюстрирам по-добре. Приемете, че бялото пространство е браузъра.

Vertically & Horizontally Centering a DIV, Fig. 1

Както виждате от фигурата това съвсем не е център. За целта трябва посредством отрицателни стойности на марджина да „избутаме“ или по-точно върнем div-a нагоре и наляво. За да намерим центъра му трябва да разделим страните му на две, т.е. 300px/2 = 150px. В случая имам квадрат, така че и двата марджина са с една и съща стойност, но важното е да запомните, че страните се делят на две… то си е и логично всъщност. Сега добавете отрицателните марджини към кода, за да получим желания резултат.

#centered {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
	background: #888;
	border: 1px solid #444;
}

Имаме си напълно центриран div. Изтествайте, като минимизирате браузъра и го поразтеглите насам-натам.

Vertically & Horizontally Centering a DIV, Fig. 1

Това е цялата философия. На този принцип може да си направите Login скрийн или пък да вадите важни съобщения… общо взето приложенията са много и ще го усетите с времето.

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

тагове: , , , , , , , , ,
22
фев 10

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, тъй като има някои тънкости. Разбира се винаги може и да попитате, ще се постарая да отговоря. Освен това, ако на някой не му харесва нещо или се сеща за по-културно решение – приемам всякакви идеи и корекции!

View DemoDownload

Стъпка 1: HTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Dropdown Menu w/ CSS & jQuery by RIP</title>
<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>
</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-size: 11px;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	line-height: 1.3em;
	background: #FFF;
	color: #666;
}

ul { margin: 0; padding: 0; list-style: none; }

#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;
}

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 файла, който се намира в архива съм закоментирал ред по ред кое какво прави мааалко по-разширено. Нещата не са никак сложни, стига да имате малко понятие.

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

тагове: , , , , , ,
5
ное 09

Как да си направим Download бутон за Wordpress

В този туториъл ще покажа може би най-лесния начин за добавяне на даунлоуд бутон в публикация на Wordpress, така че вместо да оставяте разни текстови линкове към важен материал, ще може да покажете на потребителя къде трябва да кликне ясно и точно, за да свали пор… ъъъ… „онази полезна програмка“. За целта ще ползваме така наречените Custom Fields, които се използват за дисплейването на допълнителна информация a.k.a metadata. Какво ви е неоходимо? Ами готов, нарисуван бутон, познания по php/html/css (макар че може да се мине и без тях ако копирате без му мислите много), една бира за смелост и 15 минути от ценното ви време. Между другото ето и моя бутон, който нарисувах за случая и мисля известно време да ползвам в блога ми:

Download Button

И така, приемам, че вече сте нарисували вашия убер-як даунлоуд бутон и сте готови да продължим с въпросните Custom Fields, за които искам да направя няколко разяснения. Какво представляват и как работят те с две думи? Под текстовия едитор, с който пишем всяка една публикация в Wordpress има няколко допълнителни „екстри“, една от които е Custom Fields. Съставена е от ключ (key) и стойност (value), която ключът присвоява. Ключът се въвежда в полето Name, а стойността по подразбиране в полето Value. Ако напишете в полето Name – „В момента пия:“, а полето Value – „боза“ и натиснете бутона, то за конкретния пост ще се съхрани информацията, че пиете боза, но обърнете внимание, че тя няма да е видима никъде все още. Веднъж добавен key-ът вече е достъпен за избор от dropdown меню и може да се ползва в други постове.

За да боравим с Custom Fields имаме на разположение няколко функции, които са споменати в ръководството (add_post_meta(), update_post_meta(), get_post_custom() и т.н.). Всеки който има интерес може да си прочете за тях, но ние ще ползваме в случая get_post_meta(), която връща стойностите на конкретен key. Т.е. каква е нашата цел – ще сложим няколко реда php код, съдържащ този key и когато ни потрябва ще го викаме, изписвайки името му в полето Name на Custom Fields. Така ще имаме бутон даунлоуд само когато ние пожелаем.

В примера, който ще дам да кажем ще направим така, че бутонът да се изобразява на индекс страницата на даден пост и то след съдържанието му. За целта влезте в папката на темата, която ползвате и от нея отворете index.php (/wp-content/themes/темата_която_ползвате/index.php) и намерете реда, който най-вероятно изглежда така:

<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

Под него копирайте следния код:

<?php $dl_btn = get_post_meta($post->ID, 'download_button', true);
if(!empty($dl_btn)) { ?>
<a href="<?php echo $dl_btn; ?>" class="dl_btn">Download</a>
<?php } ?>

В общи линии какво правим. Взимаме това, което връща функцията get_post_meta и го запазваме в променлива $dl_btn. Проверяваме дали тази променлива има зачислена стойност и ако има, тогава отпечатваме HTML кода на бутона. Ако няма стойност, не извършваме никакво действие и бутона за даунлоуд не се отпечатва на екрана. В конкретния случай, аз използвам CSS стил, за да оформя визуално HTML елемента, който ще съдържа картинката на бутона, а самата картинка я закачам като background към елемента. Този начин е за предпочитане през използването на <img /> тага, защото променяйки CSS стилът, промените ще се отразят на всички елементи, използващи този стил. Ако решите да използвате този подход, по-долу ще откриете CSS кода, който съм ползвал аз.


a.dl_btn {
background: url(images/download_btn.png) no-repeat left top; /* Напишете вашия път до картинката */
display: block;
width: 130px; /* Зависи от ширината на бутона */
height: 34px; /* Зависи от височината на бутона */
margin: 20px auto 0;
font-size: 0; /* Този ред и следващия са, за да се погрижим текста в таг <а></а> да не се вижда */
text-indent: -9999px;
}

След като сте готови с промените, е време да отидем в желания пост и да добавим нов Custom Field със следните данни:

Custom Field

Сега вече имате собствен Download бутон!

Надявам се урока да ви е бил полезен и да сте разбрали целия процес. Наистина е елементарно и ако прескачате допълнителните обяснения, които съм написал с чисто информативна цел, то всичко става точно за 5 минути. Ако искате този бутон да се вижда на всяка страница, то трябва да копирате php кода по-горе във файловете single.php, page.php и archive.php, които се намират в главната директория на темата, която ползвате. Може да видите бутона в действие тук. Единственият минус на тази техника е, че имаме доста ограничени позиции за показване на бутона, т.е. няма как в един пост той да бъде горе, а в друг долу, но това не е кой знае колко фатално.

P.S. Може да има и по-хитър начин за цялото нещо, но аз засега не съм открил такъв, а и знанията ми с php се простират дотук. Ако имате критика, предложение или въпрос – коментирайте на воля!

10×2: Васко за търпението с онзи проблем ;)

тагове: , , , , ,
23
окт 09

Манджа с грозде #2: Clip2Net, XHTML Challenge и Pixel To Em Convertor!

Clip2NetClip2Net – това е една прекрасна услуга за споделяне на изображения или файлове. За целта първото нещо, което трябва да е направите е да свалите самата програмка. След това имате 2 опции – да се регистрирате или не. Предимствата, които ви дава регистрацията са контрол над качените файлове, 100MB пространство и по-дълго съхранение на файловете. Докато нерегистрираният потребител може да качва само изображения, но те се изтриват автоматично след 5 дни, което според мен никак не е малко и съвсем спокойно може да се ползва ако трябва да се прати някой скрийншот или изобщо нещо, което не е толкова ценно.
Ето накратко и какво предлага услугата. След като вече сте инсталирали програмата в system tray ви се появява иконка. Натискайки десен бутон пред вас за опциите – заснемане на част от десктопа, на цял прозорец, заснемане на видео, публикуване на текст, файлове, клипборд информация или url. Тук ще обърна внимание само на две от тези неща, тъй като ми се струват най-ползваеми. Пример – ползвам кофти браузър и искам да покажа на моя колега, че през него сайта, който вчера сме пуснали е бъгав. Натискам десен бутон, избирам Publish Desktop Area и правя селекция на участъка, който искам да покажа. Веднага ми изскача прозорец с множество опции. Мога crop-вам картинката, мога да рисувам свободно върху нея, мога да добавям текст, да правя стрелки, сочещи конкретна част, имам готови правоъгълници и елипси за ограждане на специфично съдържание, имам избор на цветове ако реша например с червно да покажа грешките, а със зелено предимствата. Мога да добавя и коментар. Но всичко това е по избор, разбира се. След това просто натискам бутона Publish и имам качен файл с линк до него. Давам линка на моя колега, а той ме отсвирва, като ми казва да си сложа нормален браузър :). Цялата процедура отнема не повече от 5-10 секунди, ако не искате да пипате много по скрийншота. Бързо и удобно, нали? Ако споделяте файлове пък имате друг голям плюс. Просто селектирате файловете, които искате да бъдат качени и програмата автоматично ги архивира и отново ви дава директен линк. За видео честно казано препоръчвам друга услуга, за която писах предния път – Screenr. Не че всичко тук не става пак бързо и лесно, напротив, просто е въпрос на лично предпочитание и удобство. Програмата има още много плюсове, но тях ги оставям на хората, които са заинтерсовани да ги разгледат сами. Силно препоръчвам. В нашата фирма се ползва постоянно!

към цялата публикация »

тагове: , , , , , , , ,