Архив за категорията 'Други'

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

Публикувано в Други на 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

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

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

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

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“

Малък съвет как да се предпазвате от злонамерени хора в „Интернетската Джунгла“!

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

Здравейте приятели. След кратка пауза и няколко впечатления и за малко да се излъжа аз самоя ми дойде музата да ви споделя една малка хитринка, как да не позволявате на някакви злонамерници да ви прецакат.

За какво ви говоря?

Тук в моя бранш (Уебаджийския) се появяват всякакви новости и разбира с тях се появяват и нови злоупотреби. Именно на такава станах свидетел и аз. От няколко години да кажем 3 има новост наречен оAuth, която ви позволява без да се регистрирате в определен сайт да се логнете директно с акаунта си от Facebook или Google или някой си друг който имате да кажем Twitter.

Съответно ви излиза едно такова прозорче:

… Което ви иска юзърнейм и парола. Като се змислим в това няма нищо лошо, защото това си е досущ с фейсбукския интерфейс и сте обедени, че това е истинска форма от фейсбук. За да сте на 99% сигурни, че това е истински бокс погледнете тук:

Вижте адреса

Вижте адреса

Както виждаме горе пише www.facebook.com, което всъщност нистина взима формата от фейсбук, но това не означава, че домейнът не може да бъде … www.facebook.com.aide.da.vidim.kakvo.6te.se.sluchi.sas.nashidomain.com/login.php……

Затова по добре не рискувайте да се логвате през такива прозорци.

Ето моят съвет.

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

Грабо яво работи с Facebook

Грабо яво работи с Facebook

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

Процедурата е същата ако имате прозорче което юзърнейм и парола за Twitter или Google и тнт.

Fin

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

Ако можете да добавите, се чувствайте ауторизирани да го направите :))