Двама братя във Фейсбук

Публикувано в Други на 12.09.2011 1 Коментар »

Не мога … ето ви разговор между двама братя във Фейсбук.

По-големият брат пише на стената на по-малкия брат:

По-големият брат posted to По-малкият брат
KVO STAVA BRAT! DAI RESUME NA UIKENDA.
По-малкият брат: cudo cudo !
По-големият брат: da ne stana bashta bre!
По-малкият брат: kvo losho ima, sram shte e ako stana maika

:))

Кога използваме 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

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

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

Friday Contest – #Mobile HTML5/CSS3

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

Ето нещо интересно на което попаднах. Колегите от FridayCode организират конкурс за мобилен фронтенд :) Помня на времето се организираха подобни неща с бойното име „Батъл“, но в повечето случаи нямаше някаква особенна награда (Хостинг … ). Та … тук вече има награда за която си заслужава човек да се припоти … а и разбира се вземе, че научи нещо ново и интересно. Ето от тук можете да повече информация за конкурса:

Friday Конкурс

Ето защо според мен трябва да участвате:

  1. Има вероятност да спечелите хубав твърд дист ( мястото никога не стига )
  2. Има вероятност да научите много интересни и полезни неща (мобилния уеб навлиза много сериозно)
  3. Има вероятност да се запознаете с много интересни хора (колеги професионалисти)
  4. Ще се забавлявате!

Успех! :)

Scalability

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

What Scalability is:

  • Scalability is a desirable property of a system which indicates its ability to either handle growing amounts of work in a graceful manner, or to be readily enlarged as demands increase.

What Scalability is not:

  • Raw speed or performance (2GHz vs. 3GHz)
  • About the operating system (Solaris vs. Linux)
  • About a particular software technology (Java vs. Python vs. Rails)
  • About a particular hardware platform (AMD vs. Intel)
  • About optimized code (10 lines of code vs. 1000)
  • About storage technology (SAN vs. NAS)

„John Engates CTO, Rackspace Presented“