Архив за категорията 'Уеб дизайн'

Кога използваме Class и кога ID?

Публикувано в xHTML/CSS, Други на 21.06.2011 1 Коментар »

Здравейте приятели. В един интересен разговор в зала 200 на ФМИ съвсем случайно се промъкна, нещо между въпрос, тема за разговор, размишление … или нещо от сорта, което звучеше така: „Кога използваме Class и кога ID?“. В итерес на  истината това е интересна тема и заслужава да и се обърне внимание. Може би за мнозина от вас, темата ви изглежда доста проста и много незначителна, но според мен не е точно така. Убеден съм, че правилната употреба на тези инструменти много помага на работата ни. Ще я направи, по-приятна, по-ефективна, по-безболезнена и още много по по… :)

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

По същество

Мисля, че първия въпрос който трябва да си задаете след като се запитате ID или Class е, какво ще пиша и кое ще ми е по-полезно. Звучи доста тривиално, но е факт. В различните ситуации трябва да се подхожда различно.

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

  • Пърото нещо, което правя е да го погледам едно известно време 5, 10, 20 минути за да мога да го видя в модули.
  • Разбирам на какво ще пиша xHTML, HTML5 и спрямо това си избирам подход на работа.
  • Търся информация как ще работи сайта (малко различни картинки или някакво демо ако има)

След като премина през тези стъпки мога да реша вече къде и какво да правя.

Нека да видим стъпка по стъпка каква е идеята:

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

  • Имаме ли сходни модули (менюта, боксчета и тнт.)
  • Кое да направим еднакво навсякъде и кое да разширим

Например, ако си представим, че поради някаква причина имаме 3 „менюта“ на сайт-а които се различават по нещо малко. Горно меню, футър меню и пейджинг.

  • И 3-те менюта ще са изградени да кажем от ul > li > a
  • Горното меню ще бъде със син фон
  • Пейджинга ще бъде без фон и ще бъде центриран
  • Футър менюто ще бъде в дясно с лилав фон

Както виждате визуално може да изглеждат доста различно но като код са горе долу еднакви. Ето едно примерче:

<div class="site_navgation" id="topmenu">
	<ul>
		<li><a href="#">Начало</a></li>
		<li><a href="#">За Нас</a></li>
		<li><a href="#">Карта на сайта</a></li>
		<li><a href="#">Контакти</a></li>
	</ul>
</div>

<div class="site_navgation" id="paging">
	<ul>
		<li><a href="#">prev</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li>...</li>
		<li><a href="#">next</a></li>
	</ul>
</div>

<div class="site_navgation" id="footermenu">
	<ul>
		<li><a href="#">Начало</a></li>
		<li><a href="#">За Нас</a></li>
		<li><a href="#">Карта на сайта</a></li>
		<li><a href="#">Контакти</a></li>
	</ul>
</div>

2. Ако сме на ясно на какъв HTML ще пишем това доста може да ни помогне в подбора на тагове и структурирането на кода. Ето отново няколко примера.

<!-- xHTML example -->

<div class="column" id="leftcolumn">
	<div class="module" id="mainmenu">
		<div class="heading">
			<h3>Главно меню</h3>
			<p>Това е нашето главно меню</p>
		</div>
		<div class="content">
			<ul class="menu">
				<li><a href="#">Начало</a></li>
				<li><a href="#">За Нас</a></li>
				<li><a href="#">Карта на сайта</a></li>
				<li><a href="#">Контакти</a></li>
			</ul>
		</div>
		<div class="more">
			<a href="#">Вижте още в нашето разширено главно меню.</a>
		</div>
	</div>
</div>

<!-- HTML5 example -->

<aside id="leftcolumn">
	<section id="mainmenu">
		<header>
			<h3>Главно меню</h3>
			<p>Това е нашето главно меню</p>
		</header>
		<article>
			<menu>
				<li><a href="#">Начало</a></li>
				<li><a href="#">За Нас</a></li>
				<li><a href="#">Карта на сайта</a></li>
				<li><a href="#">Контакти</a></li>
			</menu>
		</article>
		<footer>
			<a href="#">Вижте още в нашето разширено главно меню.</a>
		</footer>
	</section>
</aside>

3. За да можем да си представим още по-добре картинката е хубаво да знаем как ще работи пустия му сайт. Но защо ни е необходимо това?

Както знаете в модерния уеб се случват доста неща без да се презарежда нашата страница или казано на наш език с JavaScript. За да създадем по-голямо удобство на човека който пише JavaScript-a (ако това не е наша работа) трябва да си структурираме правилно кода и да преценим каде ще ни е по-удобно да използваме #селектор, къде .селектор и къде да използваме елемент като селектор или нещо друго. Като цяло в по-малките проекти може да се правят компромиси и неправилната употреба на ID или Class няма да се отрази особенно. Както казват повечето хора мога да си направя целия сайт както сасмо с ID-та така и само с класове.

Още няколко важни неща

Освен  използването на ID, class, element като логически описване в самия HTML/CSS също така трябва да се мисли и за концептуалните идей като:

  • ID – трябва да бъде уникално
  • Class – може да са много
  • Element – спестява клас или ID селектор при описание
  • Важно!!! Различни селектори различни приоритети!

От изключително голямо значение е да знаете какви са подводните камъни:

<div id="leftcol">
	<div class="module" id="somemodule">
		<div>
			<div>
				<div>
					<h3>...</h3>
					<div class="content">
						...
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style type="text/css" media="all">
	.module div div div h3 {...}
	div.module div div div h3 {...}
	#somemodule div div div h3 {...}
	#leftcol .module div div div h3 {...}
	#leftcol div#somemodule div div div h3 {...}
	.module div {...}
	.module div div {...}
	#leftcol div div > div {...}
</style>

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

Четейки този материал моят приятел и колега Павел Иванов ми напомни за следното нещо:

Използването на ID-та и class-ве не се отнася само до удобствота на този който пише JavaScript, но също така се отнася и до това, до колко имаме нужда от думичката „Cascading“ в нашия CSS код.
Така наречените „тежести“ могат да изиграят много важна роля, особедно при все по-голямата подръжка на „Attribute selectors“ от съвремените браузъри.
Знаем, че големината на кода е много важна и за това има значение как определяме нашите селектори.

Ето тук има малко повече информация за въпросните тежести: ( Calculating a selector’s specificity – http://www.w3.org/TR/CSS2/cascade.html#specificity )

Разбира се, всичко е много относително и зависи от конкретната ситуация :)

Fin

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

Благодаря ви за отделеното време.

Живи и здрави !

Няколко интересни видеа за SASS >> това има общо с CSS :))

Публикувано в xHTML/CSS на 05.04.2011 5 Коментара »

Зравейте приятели,

преди няколко дни попаднах на нещо което ми се видя яко. Както може би сте разбрали от заглавиeтo на материала то се казва SASS. За да ви разкажа на кратко какво е SASS мисля, да изплагиaтствам малко информация от официалния сайт.

Sass прави писането на CSS яко … отново :)) . Sass е CSS3 решението ,което ви  добавя вложени правила, променливи, миксини, наследяване на селектори и тнт.

SASS има 2 синтаксиса .scss и .sass. Ако ви е станало интересно не губете време и се заровете из сайта, ако ли не вижте едно просто примерче, изгледайте клипчетата и тогава решавайте какво ще правите :)

Примерът

Представете си, че работите по голям проект в случая сайт на който трябва да поддържате CSS кода и там на много места, различни места използвате едни и същи цветове. Да кажем, че това са някакви фирмени цветове.

Картинката е много позната. И понякога доста болезнена :) Та какво правите:

  1. Копирате хексовете
  2. Копирате хексовете
  3. Копирате хексовете

Яко! Всъщност в това няма нищо лошо, все пак CSS работи така няма променливи няма константи, плюс това по този проект работя само аз, зная как си мажа и няма проблем. Но май все пак ще е хубаво да стане по някакъв по-културен начин.

Ето тук ви идва на помощ SASS:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

А, как е ?! :)) Нещата май започнаха да придобиват някакъв по приличен вид. Хайде да не губя повече времето ви, направо пускайте видеата :).

Видеото

YouTube Preview Image YouTube Preview Image YouTube Preview Image

Видео уроците са изплагиатствани от ТУК

Надявам се да съм бил полезен :)

Как да постъпим когато планираме downtime на сайта си?

Публикувано в SEO, Интернет на 31.01.2011 Няма коментари »

Как да планираме downtime

Попаднах на една интересна новинка в WebDesign Central блога на Гугъл, за това как да постъпваме когато ни се налага да спрем сайта си за известно време без това да ни се отрази зле за репутацията.

От време на време се задава въпросът дали видимостта на даден сайт в резултатите от търсене може да се отрази зле за самия сайт, ако Гугъл бота не може да го обходи? Става дума за Downtime! Това е една английска думичка, която определено е много мразена от всеки собственик на уеб сайт.  Като си говорим за downtime, за съжаление обаче понякога той определено е неизбежен. Може би си казвате „Защо пък да е неизбежен? Никога не е неизбежен!“, да ама не. Навярно ви се е случвало да си спрете сайта за поддръжка, да запълните сериозна дупка в сигурността, да се счупи някой сървър или да се е случило нещо друго приятно или неприятно. Въпросът обаче тук е, как да имаме Downtime и това да не ни повлияе зле, защото прекъсвания които не са обозначени като такива, могат много лошо да повлияят на репутацията на вашия сайт. Но разбира се, чичко Гугъл ни дава съвет, как можем да си запазим репутацията добра пред неговия вечен слуга познат на всички като Googlebot-а.

Какво да направим?

Вместо да връщате HTTP код 404 (Not Found) или да показвате някаква страница за грешка с HTTP код 200 (OK) по време на даунтайм-а, е по-добре да върнете HTTP код 503(Service Unavailable), което ще каже на бота, че даунтайма е временен. Нещо повече, така имате възможността да покажете на посетителите на сайта и на ботовете приблизително кога сайтът ви ще бъде отново на линия. Ако имате идея за продължителността на даунтайма в минути, секунди и стотни :) или можете да предположите дата и час на връщането ви онлайн можете да го уточните с един допълнителен  HTTP хедър Retry-After header, от който Гугъл бота може да си прецени кога да дойде пак за да обходи сайта ви.

От Гугъл споделят, че връщането на 503 HTTP хедър би било прекрасно решение и в много други ситуации. Те споделят, че срещат сериозни проблеми със сайтове които връщат код 200 (OK) за сървърни грешки, даунтай и всякакви други неподходящи случаи и сутуации. 503 HTTP код-а е правилния избор за всички тези ситуации. Разбира се от Гугъл ни съветват да не използваме това решение като постоянно, защото е напълно възможно (със сигурност) да изчезнете от индекса на Гугъл.

Ако изпращате 503 (Service Unavailable) отговор и използвате PHP кодът ви трябва да изглежда така.

header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Retry-After: Sat, 8 Oct 2011 18:27:00 GMT');

Още малко инфо!

От чичко Гугъл са ни дали простичък съвет как можем да направим нашите 404 страници по-полезни за нашите потребители, което също е добра идея за вариант в който да показваме custom 503 съобщение, което ще обяснява на потребителите ни ситуацията и ще ги информира кога сайтът ще бъде отново работещ. За допълнителна информация за HTTP кодовете, можете да погледнете тук RFC 2616.

Оригинало източник: Google WebMaster Central

Fin

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

Надявам се да съм бил полезен.

Това е най-доброто представяне на SEO похвати и начини :)

Публикувано в SEO, Други на 02.12.2009 Няма коментари »

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

В това видео става дума за Matt Cutts който е шефа на СПАМ отдела в Google. Той е специалист в решаването на много интересни SEO проблеми и задачки. Аз лично много се посмях на цялата му лекцийка определено както казах, много забавен и много респектираща личност. Лекцията е от WordCamp SF 2009.

Пожелавам ви приятно гледане :)

Ако лекторът ви е станал симпатичен ето от тук можете да следите какво се случва с него:
- Личен блог
- Твитър

Надявам се да ви е било много интересно.

Ако искате да станете бързаци в писането на HTML и CSS, Zen Coding е точно за вас !

Публикувано в xHTML/CSS на 23.11.2009 1 Коментар »

Както се казва, „… УАУ това изглежда яко“. Яко или не, това вие ще си прецените, поради простата причина, че човек има навика да привиква към по-удобните и лесните неща много бързо. Питате се за какво всъщност ви говоря?  Говоря ви за Zen Coding. Това е едно полезно тулче за бързо писане на HTML и CSS код.

Бързо просто и лесно :)

Бързо просто и лесно :)

Как работи то?

Zen Coding работи много простичко, почти като синтаксиса на CSS селекторите. Тоест ако сте CSS кодер, а не SS кодер бихте го схванали много бързо и лесничко. Ето ви е един много  хубав пример:

Ако искаме да ни напише на бързичко един див с ID и няколко класа и едно UL с едно LI например, пишем:

div#header.some.classes+ul>li

Това ще ни върне като резултат:

<div id="header" class="some classes"></div>
<ul>
   <li></li>
</ul>

(още…)