<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Шаблоны ДЛЕ</title>
	<atom:link href="http://pelinoleg.com/feed" rel="self" type="application/rss+xml" />
	<link>http://pelinoleg.com</link>
	<description>Шаблоны ДЛЕ</description>
	<lastBuildDate>Sun, 19 Feb 2012 15:13:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Словарь сокращений или как понять вэб мастера!! (часть 1)</title>
		<link>http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb.html</link>
		<comments>http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb.html#comments</comments>
		<pubDate>Thu, 16 Feb 2012 10:47:04 +0000</pubDate>
		<dc:creator>voland</dc:creator>
				<category><![CDATA[Блог]]></category>
		<category><![CDATA[АГС]]></category>
		<category><![CDATA[ГС]]></category>
		<category><![CDATA[Гугл]]></category>
		<category><![CDATA[Платон]]></category>
		<category><![CDATA[Прогон]]></category>
		<category><![CDATA[сокращений]]></category>
		<category><![CDATA[ТиЦ]]></category>
		<category><![CDATA[Троллинг]]></category>
		<category><![CDATA[Флуд]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1229</guid>
		<description><![CDATA[Здравствуйте уважаемые читатели блога PelinOleg.com На этот раз хочу поговорить с Вами об одной по моему очень важной теме-сокращения некоторых понятий, используемых вэб мастерами в повседневном и форумном общении. Ни для кого не секрет, что когда новый человек вливается в среду сайтостроения на него обрушивается поток новой, доселе ему неизвестной информации, и в результате этого [...]]]></description>
			<content:encoded><![CDATA[<p>Здравствуйте уважаемые читатели блога <a href="http://pelinoleg.com">PelinOleg.com</a></p>
<p>На этот раз хочу поговорить с Вами об одной по моему очень важной теме-сокращения некоторых понятий, используемых вэб мастерами в повседневном и форумном общении.<br />
Ни для кого не секрет, что когда новый человек вливается в среду сайтостроения на него обрушивается поток новой, доселе ему неизвестной информации, и в результате этого он теряется, чем привлекает нездоровое внимание и становится обьектом насмешек своих старших коллег.<br />
Дабы этого избежать мы и разберем некоторые понятия, итак начнём:</p>
<p>Первое о чем бы я хотел поговорить это форумные высказывания.</p>
<p>Так как процесс общения на форумах очень важен для развития, юнный вэбмастер должен знать что в общем от него хотят и как реагировать на то или иное слово.</p>
<p><strong><a href="http://pelinoleg.com/wp-content/uploads/2012/02/troll.png"><img class="alignleft size-medium wp-image-1240" title="troll" src="http://pelinoleg.com/wp-content/uploads/2012/02/troll-300x272.png" alt="Флуд Троллинг ТиЦ сокращений Прогон Платон Гугл ГС АГС " width="300" height="272" /></a>Троллинг<br />
</strong>Первое немаловажное изречение некоторых форумчан (или слово, это уж кому как нравится)-это Тролль или Троллинг.<br />
Троллинг это попытка одного пользователя разжечь конфликт с обитателями всего форума или одной темы. Но в последнее время Троллинг стали часто путать с Флудом (который мы разберем чуть позже), так что не удивляйтесь, если после пары тройки Ваших сообщений, Вас станут закидывать этим словом. Кстати само слово Троллинг произошло совсем не от мифических существ, а от (только не удивляйтесь) любимой многими рыбалки, так как есть в Английском языке такое понятие, как trawling- это ловля на блесну.</p>
<p>&nbsp;</p>
<p><strong><a href="http://pelinoleg.com/wp-content/uploads/2012/02/флуд.png"><img class="alignright size-medium wp-image-1242" title="флуд" src="http://pelinoleg.com/wp-content/uploads/2012/02/флуд-300x245.png" alt="Флуд Троллинг ТиЦ сокращений Прогон Платон Гугл ГС АГС " width="300" height="245" /></a>Флуд<br />
</strong>Теперь поговорим о Флуде.Зачастую пользователям просто нечего делать ( к примеру нет на данной момент работы, пришли из школы или просто выходной день) и хочется с кем то поговорить, и так как специализированных чатов по вэб мастерингу не так и много ( я к примеру ни одного не знаю) общаться приходится на форумах. Вот из за такие порывов и появляется Флуд или иногда так называемый Оффтоп. Эти понятия включают в себя сообщения на форумах, которые не несут никакой смысловой нагрузки и не призваны помочь чем то в теме, как к примеру разговоры о погоде в теме о Яндекс Каталоге.</p>
<p>&nbsp;</p>
<p>На этих двух форумных понятиях думаю и стоить закончить ибо мы переходим к самому вкусному-специализированные термины:</p>
<p><strong>Гугл<br />
</strong>Первое и самое важное что нужно знать ( по моему) начинающему вэб мастеру это слово Гугл.<br />
Это не сокращение, а даже наоборот..легендарное слово, впрочим некоторым индивидуумам без толку это обьяснять (если Вы как раз из таких дорогой мой читатель пожалуйста закройте это повествование и больше никогда это не читайте).<br />
Так как многих начинающих после заданного ими вопроса сразу посылают <del datetime="2012-02-16T10:38:30+00:00">на йух</del> в Гугл обьясню что же это за заветное слово, это не займёт много времени. Гугл(Google)-это поисковая система, где при достаточной сноровке Вы можете найти почти всё, что Вам понадобится, а самое главное Вам не придется разбирать кучу негатива, который Вы по любому получите задав простой вопрос вида &#8220;как мне раскрутить сайт&#8221;. В Интернете уважают только тех людей, которые стремятся учится и не мешают остальным, так что это понятие должно стать для Вас священным, если уж выбрали эту стезю.</p>
<p><strong>ТиЦ</strong>-это Тематический Индекс Цитирования Вашего сайта. Очень частое понятие, которое используют почти во всех темах. ТиЦ это скажем так мера крутости, которую Вам даёт поисковая система Яндекс. Зависит он от количества ссылок на Ваш ресурс, то есть чем больше ссылаються на Ваш сайт из других источников в Интернете, тем лучше. К моему большому сожалению мы врятли когда нибудь узнаем точное количество ссылок, при котором этот показатель увеличивается, так как алгоритм его работы держится в строжайшем секрете и скорее всеuо круглосуточно носится в чемоданчике, который в свою очеред пристёгнут к руке какого нибудь амбала.</p>
<p><strong>АГС</strong>- то же очень частое сокращение ( век бы его не видеть если честно). АГСом называется один из многочисленных фильтров поисковой машины Яндекс, который проводит анализ сайтов на их качество. То есть если Вы видите в ответе на Ваш вопрос термин вида &#8220;Твой сайт залетел под АГС&#8221;, это означает, что фильтр Яндекса заблокировал некоторые Ваши страницы ( вплоть до показа только главной сайта) так как считает их не уникальными и не заслуживающими внимания пользователей и Вам нужно с этим что то делать.</p>
<p><strong>ГС</strong>-данное сокращение я не посоветую Вам Уважаемые испытать на себе. ГС дословно означает ГовноСайт, а именно ресурс, которые не несет в себе вообще никакой смысловой нагрузки, уникальности и тд. То есть выражаясь Русским языком-помойка со стыренным дизайном, выдернутым из других ресурсов контентом и набитая продажными ссылками. Ни один Уважающий себя вэб мастер не будет делать такие сайты и очень критически относится к подобным им. Хотя существует небольшое исключение-ГС частенько используют как метод так называемого &#8220;чёрного СЕО&#8221;, но это уже совсем другая история о которой мы поговорим в другой раз.</p>
<p><strong>Платон </strong>или<strong> Платоны</strong> не часто, но и не редко встречающийся термин. Получая письма из тех поддержки Яндекса они всегда приходят от одного человека, от имени Платона Щукина. Что это за легендарная личность никто так выяснить и не смог, но в среде вэб мастеров это легенда. Моё мнение, что это собирательный образ работников тех поддержки Яндекса но может быть когда то это был и живой человек, поди знай. Но нам важно то, что когда Вас спрашивают &#8220;А Платону писал?&#8221;-это означает обращались ли Вы в тех поддержку.</p>
<p><strong>Прогон</strong><br />
Ну и последнее о чем бы сегодня хотелось поговорить, но не последний по значению-это термин Прогон.<br />
Очень часто на форумах Вы будете встречать фразы &#8220;Прогоню по трастам&#8221;, &#8220;Прогон по каталогам&#8221; и тд. Что такое трастовые базы и каталоги мы разберем в следующей статье, сейчас нас интересует сам термин.</p>
<p>Прогоном называется оставление ссылки на Ваш сайт на других сайтах в промышленных масштабах. То есть если человек говорит &#8220;Прогоню по 50 сайтам&#8221; это означает, что он лично (или с помощью специальных программ, коих множество) зайдет на 50 сайтов и оставит там ссылку на Ваш ресурс, в профилях форумов, на досках обьявлений и тд.<br />
Прогон служит как раз для поднятия ТиЦ и продвижения по запросам.</p>
<p>Итак уважаемые читатели, сегодня Вы кое чему научились, но это далеко не всё. В следующих статьях мы разберем куда более сложные понятия ибо наш отдельный мирок кешит всякими интересными названиями и ещё большими интересными формулировками.</p>
<p>Статья была написана Воландом для сайта <a href="http://pelinoleg.com">PelinOleg.com</a> и может находится только здесь. Любое копирование как полностью, так и по частям преследуется по закону!</p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Первые шаги к профессиональной верстке (первая часть)</title>
		<link>http://pelinoleg.com/blog/%d0%b2%d0%b5%d1%80%d1%81%d1%82%d0%ba%d0%b0/pervye-shagi-k-professionalnoj-verst.html</link>
		<comments>http://pelinoleg.com/blog/%d0%b2%d0%b5%d1%80%d1%81%d1%82%d0%ba%d0%b0/pervye-shagi-k-professionalnoj-verst.html#comments</comments>
		<pubDate>Wed, 15 Feb 2012 09:53:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Верстка]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Reset.css]]></category>
		<category><![CDATA[класс]]></category>
		<category><![CDATA[код]]></category>
		<category><![CDATA[профессиональная верстка]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1139</guid>
		<description><![CDATA[Эта статья предназначена в первую очередь для тех кто уже может верстать, для тех кому написать код для страницы не составит особого труда. Речь пойдет о нескольких рекомендациях, которых по моему мнению должен придерживаться каждый уважающий себя верстальщик. Начнем с основного, какая на данный момент головная боль верстальщика? Думаю все знают ответ на этот вопрос, [...]]]></description>
			<content:encoded><![CDATA[<p>Эта статья предназначена в первую очередь для тех кто уже может верстать, для тех кому написать код для страницы не составит особого труда.<br />
Речь пойдет о нескольких рекомендациях, которых по моему мнению должен придерживаться каждый уважающий себя верстальщик.</p>
<p>Начнем с основного, какая на данный момент головная боль верстальщика? Думаю все знают ответ на этот вопрос, это <a href="http://www.google.md/url?url=http://ru.wikipedia.org/wiki/%25D0%259A%25D1%2580%25D0%25BE%25D1%2581%25D1%2581%25D0%25B1%25D1%2580%25D0%25B0%25D1%2583%25D0%25B7%25D0%25B5%25D1%2580%25D0%25BD%25D0%25BE%25D1%2581%25D1%2582%25D1%258C&amp;rct=j&amp;sa=X&amp;ei=-oE7T7qIA47E8QPAuOiDCw&amp;ved=0CCkQngkwAA&amp;q=%D0%BA%D1%80%D0%BE%D1%81%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%8C&amp;usg=AFQjCNGN1qe_Kx-s7z4Vzx6DqXvSmqauMg" target="_blank">кроссбраузерность</a>. Ни для кого не секрет что существует много проблем из-за того что браузеры не придерживаются строгих стандартов и отображают все по своему.<br />
Эту проблему решить полностью не получится, но можно максимально ее облегчить, а именно, использовать реcеты для CSS.</p>
<p><strong><span style="font-size: large;">1. Reset.css</span></strong><br />
<a href="http://pelinoleg.com/wp-content/uploads/2012/02/css_reset.jpg"><img class="size-medium wp-image-1199 alignnone" title="css_reset" src="http://pelinoleg.com/wp-content/uploads/2012/02/css_reset-300x99.jpg" alt="профессиональная верстка код класс Reset.css HTML CSS " width="300" height="99" /></a></p>
<p>Что же это такое и для чего он нужен.</p>
<p>На практике <em>CSS Reset</em> используется для сброса тех правил, которые могут помешать кроссбраузерности ваших стилей.<br />
Reset можно найти в интернете, их куча. Не могу сказать какой лучше так как это дело вкуса, но могу привести прсиер своего ресета который я использую.</p>

<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar"><div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div></div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-advanced"><div class="css"><ol><li class="li1"><div class="de1">html<span class="sy0">,</span> body<span class="sy0">,</span> div<span class="sy0">,</span> span<span class="sy0">,</span> applet<span class="sy0">,</span> object<span class="sy0">,</span> iframe<span class="sy0">,</span> table<span class="sy0">,</span> caption<span class="sy0">,</span></div></li>
<li class="li2"><div class="de2">tbody<span class="sy0">,</span> tfoot<span class="sy0">,</span> thead<span class="sy0">,</span> tr<span class="sy0">,</span> th<span class="sy0">,</span> td<span class="sy0">,</span> del<span class="sy0">,</span> dfn<span class="sy0">,</span> em<span class="sy0">,</span> <span class="kw1">font</span><span class="sy0">,</span> img<span class="sy0">,</span> ins<span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">kbd<span class="sy0">,</span> q<span class="sy0">,</span> s<span class="sy0">,</span> samp<span class="sy0">,</span> small<span class="sy0">,</span> strike<span class="sy0">,</span> strong<span class="sy0">,</span> sub<span class="sy0">,</span> sup<span class="sy0">,</span> tt<span class="sy0">,</span> var<span class="sy0">,</span></div></li>
<li class="li2"><div class="de2">h1<span class="sy0">,</span> h2<span class="sy0">,</span> h3<span class="sy0">,</span> h4<span class="sy0">,</span> h5<span class="sy0">,</span> h6<span class="sy0">,</span> p<span class="sy0">,</span> blockquote<span class="sy0">,</span> pre<span class="sy0">,</span> a<span class="sy0">,</span> abbr<span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">acronym<span class="sy0">,</span> address<span class="sy0">,</span> big<span class="sy0">,</span> cite<span class="sy0">,</span> code<span class="sy0">,</span> dl<span class="sy0">,</span> dt<span class="sy0">,</span> dd<span class="sy0">,</span> ol<span class="sy0">,</span> ul<span class="sy0">,</span> li<span class="sy0">,</span></div></li>
<li class="li2"><div class="de2">fieldset<span class="sy0">,</span> form<span class="sy0">,</span> label<span class="sy0">,</span> legend <span class="br0">&#123;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">baseline</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">font-family</span><span class="sy0">:</span> <span class="kw2">inherit</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">inherit</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">font-style</span><span class="sy0">:</span> <span class="kw2">inherit</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">outline</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">border</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li>
<li class="li1"><div class="de1"><span class="re2">:focus </span><span class="br0">&#123;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">outline</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li>
<li class="li2"><div class="de2">body <span class="br0">&#123;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">white</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">color</span><span class="sy0">:</span> <span class="kw1">black</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li>
<li class="li2"><div class="de2">ol<span class="sy0">,</span> ul <span class="br0">&#123;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">list-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li>
<li class="li1"><div class="de1">table <span class="br0">&#123;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">border-collapse</span><span class="sy0">:</span> <span class="kw2">separate</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">border-spacing</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li>
<li class="li1"><div class="de1">caption<span class="sy0">,</span> th<span class="sy0">,</span> td <span class="br0">&#123;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">font-weight</span><span class="sy0">:</span> <span class="kw2">normal</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}</pre></div></div>

<p>Это базовые стили, но для каждого проекта кое что дописываю, к примеру,  цвет ссылок или же делаю классы для отступов, очень удобно.<br />
к примеру:</p>

<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar"><div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div></div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-advanced"><div class="css"><ol><li class="li1"><div class="de1"><span class="re1">.mt10</span><span class="br0">&#123;</span><span class="kw1">margin-top</span><span class="sy0">:</span><span class="re3">10px</span><span class="sy0">;</span><span class="br0">&#125;</span></div></li>
<li class="li2"><div class="de2"><span class="re1">.mr10</span><span class="br0">&#123;</span><span class="kw1">margin-right</span><span class="sy0">:</span><span class="re3">10px</span><span class="sy0">;</span><span class="br0">&#125;</span></div></li>
<li class="li1"><div class="de1"><span class="re1">.mb10</span><span class="br0">&#123;</span><span class="kw1">margin-bottom</span><span class="sy0">:</span><span class="re3">10px</span><span class="sy0">;</span><span class="br0">&#125;</span></div></li>
<li class="li2"><div class="de2"><span class="re1">.ml10</span><span class="br0">&#123;</span><span class="kw1">margin-left</span><span class="sy0">:</span><span class="re3">10px</span><span class="sy0">;</span><span class="br0">&#125;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">.mt10{margin-top:10px;}
.mr10{margin-right:10px;}
.mb10{margin-bottom:10px;}
.ml10{margin-left:10px;}</pre></div></div>

<p>и когда мне нужно задать какой-то отступ то просто дописываю рядом нужный класс.</p>

<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar"><div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div></div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-advanced"><div class="html4strict"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;header mt10&quot;</span>&gt;</span>HEADER<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">&lt;div class="header mt10"&gt;HEADER&lt;/div&gt;</pre></div></div>

<p>теперь у этого блока будет отступ сверху 10 пикселей. Думаю каждый верстальщик должен иметь такие классы подготовленные чтоб когда начинаешь новый проект, вставлял их сразу.</p>
<p>&nbsp;</p>
<p><strong><span style="font-size: medium;">1. Чистый код</span><br />
</strong></p>
<p>Что я имею ввиду под чистым кодом, это то код который написан с умом, то есть как можно меньше кода должно быть, во первых чтоб потом редактировать было легко и поисковики на это очень хорошо смотрят.<br />
Писать код надо не просто так чтоб работало, его надо продумать. Не ленитесь перед тем как сесть за верстку, открыть макет и  продумать логику каждого блока. со временем привыкните и только так и будете делать.</p>
<p><strong>Использование Tab-а.</strong></p>
<p><a href="http://pelinoleg.com/wp-content/uploads/2012/02/12_04_11_2.png"><img class="size-medium wp-image-1220 alignnone" title="чистый код, таб" src="http://pelinoleg.com/wp-content/uploads/2012/02/12_04_11_2-300x210.png" alt="профессиональная верстка код класс Reset.css HTML CSS " width="300" height="210" /></a></p>
<p>Чтоб сделать документ HTML/CSS более читабельным, нужно делать отступы внутри документы в зависимость от вложенности тэгов.</p>
<p>Правильное написание:</p>

<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar"><div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div></div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-advanced"><div class="html4strict"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;main-container&quot;</span>&gt;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;header&quot;</span>&gt;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;logo&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;main-menu&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;content&quot;</span>&gt;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;left-column&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;center-column&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;right-column&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;footer&quot;</span>&gt;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;footer-menu&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">&lt;div id="main-container"&gt;
    &lt;div id="header"&gt;
        &lt;div id="logo"&gt;...&lt;/div&gt;
        &lt;div id="main-menu"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        &lt;div id="left-column"&gt;...&lt;/div&gt;
        &lt;div id="center-column"&gt;...&lt;/div&gt;
        &lt;div id="right-column"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;
        &lt;div id="footer-menu"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre></div></div>

<p>&nbsp;</p>
<p>Неправильный вариант:</p>

<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar"><div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div></div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-advanced"><div class="html4strict"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;main-container&quot;</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;header&quot;</span>&gt;</span></div></li>
<li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;logo&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;main-menu&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;content&quot;</span>&gt;</span></div></li>
<li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;left-column&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;center-column&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;right-column&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;footer&quot;</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;footer-menu&quot;</span>&gt;</span>...<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
<li class="li2"><div class="de2"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">&lt;div id="main-container"&gt;
&lt;div id="header"&gt;
&lt;div id="logo"&gt;...&lt;/div&gt;
&lt;div id="main-menu"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div id="content"&gt;
&lt;div id="left-column"&gt;...&lt;/div&gt;
&lt;div id="center-column"&gt;...&lt;/div&gt;
&lt;div id="right-column"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
&lt;div id="footer-menu"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre></div></div>

<p>Согласитесь что первый вариант на много легче читать. чтоб сделать такие отступы нужно пользоваться кнопкой TAB  а не SPACE(пробел)</p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/%d0%b2%d0%b5%d1%80%d1%81%d1%82%d0%ba%d0%b0/pervye-shagi-k-professionalnoj-verst.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Один сайт для любого устройства или что такое Универсальный дизайн (Responsive Design)</title>
		<link>http://pelinoleg.com/blog/html/odin-sajt-dlya-lyubogo-ustrojstva-ili-cht.html</link>
		<comments>http://pelinoleg.com/blog/html/odin-sajt-dlya-lyubogo-ustrojstva-ili-cht.html#comments</comments>
		<pubDate>Mon, 13 Feb 2012 13:38:42 +0000</pubDate>
		<dc:creator>Климец Тарас</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[универсальный]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1121</guid>
		<description><![CDATA[Одним из важнейших факторов оценки веб-дизайна является ответ на вопрос &#8220;какой средний размер экрана будет использоваться посетителями для просмотра сайта?&#8221; В течение последних нескольких лет процесс оценки становится все более сложным и запутанным путем развития разнообразных подключенных к Интернету устройств. Доступ к сайтам резко изменился и ожидается, что использование мобильных (планшетных) устройств для поиска информации в Web значительно превзойдет использования настольных ПК в ближайшие 2 года. Клавиатура и мышь уже не являются преобладающими устройствами для ввода данных и происходит переход от дизайна для 3-х основных браузеров настольных ПК до большого количества устройств: от [...]]]></description>
			<content:encoded><![CDATA[<div id="gt-res-wrap">
<div id="gt-res-content">
<div dir="ltr">Одним из важнейших факторов оценки веб-дизайна является ответ на вопрос &#8220;какой средний размер экрана будет использоваться посетителями для просмотра сайта?&#8221; В течение последних нескольких лет процесс оценки становится все более сложным и запутанным путем развития разнообразных подключенных к Интернету устройств.<span id="more-1121"></span><br />
Доступ к сайтам резко изменился и ожидается, что использование мобильных (планшетных) устройств для поиска информации в Web значительно превзойдет использования настольных ПК в ближайшие 2 года.</div>
<div dir="ltr"></div>
</div>
<div dir="ltr"><a href="http://pelinoleg.com/wp-content/uploads/2012/02/responsive-earth-hour.jpg"><img class="size-full wp-image-1122 aligncenter" title="responsive-earth-hour" src="http://pelinoleg.com/wp-content/uploads/2012/02/responsive-earth-hour.jpg" alt="универсальный дизайн " width="520" height="291" /></a></div>
<div dir="ltr">Клавиатура и мышь уже не являются преобладающими устройствами для ввода данных и происходит переход от дизайна для 3-х основных браузеров настольных ПК до большого количества устройств: от сенсорных планшетных устройств и телефонов до смартфонов смаленькими клавиатурами, видео игровых контроллеров и устройств дистанционного управления.<br />
В ближайшее время планшетные и компьютерные дисплеи с высоким разрешениемпоявятся на рынке и это изменение потребует полного пересмотра дизайна, основанного на поэлементном формировании изображения.</div>
<div dir="ltr"></div>
<div dir="ltr">В течение последних двух лет клиенты заказывали сайты конкретных устройств - &#8220;основной&#8221; сайт для настольных компьютеров, &#8221;мобильную&#8221; версию со специфическимдизайном для смартфонов и, с недавнего времени, &#8221;iPad&#8221; версию, которая в действительности является упрощенной версией настольного сайта. Как вы можете себе представить, такая система вносит много сложностей, связанных с управлением и стоимостью в процесс веб дизайна и контент-менеджмента.<br />
К счастью, есть решение. Недавняя оптимизация HTML5 и CSS3 производителямибраузеров, в дополнение к некоторым резервных методов JavaScript технологии, привели к достижению заветной цели - совместного с различными дизайн-устройствами,универсального дизайна.</div>
<div id="gt-res-tools">
<div id="gt-src-tools-l"></div>
<div><a href="http://pelinoleg.com/wp-content/uploads/2012/02/responsive-dconstruct.jpg"><img class="aligncenter size-full wp-image-1123" title="responsive-dconstruct" src="http://pelinoleg.com/wp-content/uploads/2012/02/responsive-dconstruct.jpg" alt="универсальный дизайн " width="521" height="333" /></a></div>
<div>Универсальный дизайн: один сайт подойдет под все<br />
Проще говоря, универсальный дизайн-это гибкая, независимая от устройств, технологиядизайна, которая позволяет раскладку сайта автоматически подстраиваться под любойразмер окна браузера, на любом устройстве, с любой разрешением экрана.<br />
Иными словами, лейаут вашего сайта подстроится так, чтобы наилучшим образомвыглядеть на любом экране. Это достигается с помощью изменения положения навигации и содержимого страницы, добавлением или удалением этой информации и повышениемили снижением размеров рисунка и шрифта так, что сайт автоматически подстраиваетсяпод любой экран.<br />
Универсальный дизайн - это не только отдельная технология, он представляет собойрадикально иной подход к технологическому процессу дизайна и разработки. Он кажетсянастолько интересным, что мы часто рекомендуем его многим нашим клиентам с СМSсайтами (система управления содержимым)</div>
<div></div>
<div>
<div id="gt-res-wrap">
<div id="gt-res-content">
<div dir="ltr">Это лишь некоторые из преимуществ гибкого дизайна:</div>
<div dir="ltr">
<ol>
<li> Адаптируйте сайт к определенному типу приборов без всякой необходимости разработки отдельного сайта для определенного устройства или без необходимости изменять содержимое.</li>
<li> Работает в любом браузере от IE 9 (который сейчас активно предлагается пользователям Microsoft) Firefox, Chrome, Safari в IE 6, 7 и 8</li>
<li> Совместим с СМS сайтами.</li>
<li> Его бесспорно дешевле администрировать и использовать, чем разрабатывать и поддерживать отдельные версии сайта для специфических устройств (даже если онбезусловно требует больше усилий для разработки, чем простой настольный сайт).</li>
</ol>
</div>
<div dir="ltr">
<p>Сейчас, когда вы узнали, что такое универсальный дизайн, самое время научитьсявнедрять его в организации.</p>
</div>
</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/html/odin-sajt-dlya-lyubogo-ustrojstva-ili-cht.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

