<?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>Tue, 13 Mar 2012 11:43:42 +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>Словарь сокращений или как понять вэб-мастера!! (часть 2)</title>
		<link>http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb-mastera-chast-2.html</link>
		<comments>http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb-mastera-chast-2.html#comments</comments>
		<pubDate>Tue, 13 Mar 2012 11:43:42 +0000</pubDate>
		<dc:creator>voland</dc:creator>
				<category><![CDATA[blog]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1363</guid>
		<description><![CDATA[Итак уважаемые слушатели и просто посетители блога PelinOleg.com мы продолжим цикл наших статей. В первой части нашего повествования мы уже обсудили некоторые понятия, которые помогут Вам освоится в новой и в некотором роде враждебной среде Продолжим пожалуй: Частенько на некоторых форумах, да и не только Вы можете наблюдать такое непонятное сложение букв как ИМХО. ИМХО-дословно [...]]]></description>
			<content:encoded><![CDATA[<p>Итак уважаемые слушатели и просто посетители блога <a href="http://pelinoleg.com/">PelinOleg.com</a> мы продолжим цикл наших статей.<br />
В <a href="http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb.html">первой части</a> нашего повествования мы уже обсудили некоторые понятия, которые помогут Вам освоится в новой и в некотором роде враждебной среде <img src='http://pelinoleg.com/wp-includes/images/smilies/icon_smile.gif' alt="" class='wp-smiley' title="Словарь сокращений или как понять вэб мастера!! (часть 2)" /><br />
Продолжим пожалуй:</p>
<p>Частенько на некоторых форумах, да и не только Вы можете наблюдать такое непонятное сложение букв как ИМХО.<br />
<strong>ИМХО</strong>-дословно переводится, как Имею Мнение Х (тут идет нецензурное слово, но мы же с Вами культурные люди правда?) Оспоришь.<br />
То есть употребляющий это сочетание человек хочет показать что это чисто его мнение и он никому его в принципе не навязывает, так что смело используйте его в спорах, никого этим Вы не оскорбите.</p>
<p>Ну и продолжая тему форумов,так как общение на них является неотьемлемой частью сообщества, разберем слово <strong>Холивар</strong>.<br />
Дословно оно переводится как Священная война (HolyWar-анг.) и частенько применяется для классификации так сказать споров.<br />
К примеру на форуме развязался какой либо спор, например модный нинче холивар на политическую тему, и стороны доказывают свою правоту с пеной у рта и с обещаниями подьехать в другой район/город/страну к оппоненту и доказать ему в честной или нет битве кто в принципе прав.<br />
Вот такими спорами и называется Холивар, ибо стороны непримеримы как на войне. Обычно такое дело растягивается на 50+ страниц и заканчивается ничем, ну или закрытием темы, если модератору надоело это все читать.</p>
<p>Теперь вернёмся собственно к главной тематике и разберем слово, которое мне подсказали добрые люди из комментариев к предыдущей статье.<br />
Это слово-<strong>СПАМ</strong>. Спам бывает очень разный и используется вообще везде, но так как мы разбираем среду вэб-мастеров сделаем некоторые рамки.<br />
Вообще СПАМ, если Вы глянете в Википедии это рассылка комерческой, политической и тд информации тем людям, которые и не соглашались её получать.<br />
К сожалению уголовной и административной ответственности за такое деяние нет, но я надеюсь скоро будет.<br />
Как же это относится к нашей среде?  Обычно с помощью СПАМа к Вам на электронную почту приходят письма, содержащие рекламу, НО так же есть и спам по сайтам.<br />
К примеру Вы заходите на свой месяц назад созданный ресурс и видите там комментарий вида &#8220;Классная статья, автор пиши ещё&#8221;, но выглядит она как то не так, а все из за того, что в одном или нескольких словах прописана ссылка на другой ресурс. Так что это то же является спамом. Существует огромное колическто его разновидностей но дабы не утруждать слушателя своими мыслями да и по честному ненужной ему информацией идём дальше.</p>
<p>Следующее о чем бы я хотел поговорить скорее является кодом, чем словом, а именно <strong>noindex</strong> и <strong>nofollow</strong>.<br />
Я решил о них рассказать так как частенько обратившись с неким вопросом Вы можете получить обратный вопрос или утверждение вида &#8220;Посмотри сайт на nofollow&#8221;.<br />
Что же это значит? В <a href="http://pelinoleg.com/blog/slovar-sokrashhenij-ili-kak-ponyat-veb.html">прошлой статье</a> мы разобрали понятие Прогон. Так вот при прогоне как я надеюсь Вы уже знаете оставляются ссылки на других сайтах, а вот на этих сайтах может стоять защита от индексации, вот эта самая защита и имеет вид noindex. Технические подробности думаю Вам не нужны, но теперь Вы знаете что если Вам задали этот вопрос, Вам надо проверить ссылки на Ваш сайт. Что бы было ещё понятнее разберем такой пример. На одном из форумов вэб-мастеров Вы заказали прогон по форумам/блогам и тд. После того как работа была сделана, Вы сели ждать индексации ссылок, что бы они появились в вэбмастере Яндекса. И вот прошел месяц, другой а Вы все ждете. Когда Вам надоедает, Вы решаетесь задать где то вопрос мол почему так. И первое что Вам обычно советуют это как раз проверка на noindex.Теперь Вы знаете что делать ))</p>
<p>Теперь поговорим ещё об одном непонятном слове-<strong>Аддурилка</strong>.<br />
Звучит конечно очень интересно но что же это все таки такое? Слово Аддурилка пошло от двух Английских слов (add url-англ.), и дословно означает Добавить Адрес или вернее Адрес сайта. Так вот есть у поисковиков специальные сервисы, которые способствуют быстрой индексации Ваших новых страниц, их то и называют аддурилками. К примеру на своём <a href="http://pelinoleg.com/category/blog">блоге</a> Вы написали новую статью, ну или украли её откуда нибудь (правда вот этого делать я категорически не советую), но пока поисковик обойдет весь интернет, пока добавит в поисковую выдачу Вашу статью пройдет месяц, если не полтора. Вот для того что бы столько не ждать и используют эти сервисы. Самые известные это конечно Аддурилки Яндекса и Гугла. Если Вы начинающий специалист настоятельно рекомендую Вам добавить их в закладки.</p>
<p>Ну и последнее на сегодня о чем бы я хотел побеседовать это даже не одно, а два слова- <strong>Алекса(Alexa)</strong> и <strong>ДМОЗ</strong> (DMOZ)<br />
По сути это названия двух очень авторитетных каталогов в интернете, при попадании в которые Ваш сайт сразу полюбят все поисковые системы и будут вас холить и лелеять.<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-mastera-chast-2.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS framework, нужен ли он?</title>
		<link>http://pelinoleg.com/blog/css-framework.html</link>
		<comments>http://pelinoleg.com/blog/css-framework.html#comments</comments>
		<pubDate>Sat, 03 Mar 2012 08:09:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[blog]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1330</guid>
		<description><![CDATA[Вот появилась идея написать статейку на эту тему. Дебаты по этому поводу ведутся давно и безуспешно.  Кто-то говорит что надо их использовать, а кто-то категорически против. Но начнем по порядку, что же такое css-framework, это набор css файлов, правил которые помогают верстать в разы быстрее(но не всегда). Почему не всегда,  опишу ниже. Там во первых есть [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://pelinoleg.com/wp-content/uploads/2012/03/CSS_FRAMEWORK_full.jpg"><img class="aligncenter size-medium wp-image-1359" title="CSS_FRAMEWORK_full" src="http://pelinoleg.com/wp-content/uploads/2012/03/CSS_FRAMEWORK_full-300x188.jpg" alt="" width="300" height="188" /></a>Вот появилась идея написать статейку на эту тему. Дебаты по этому поводу ведутся давно и безуспешно.  Кто-то говорит что надо их использовать, а кто-то категорически против.</p>
<p>Но начнем по порядку, что же такое css-framework, это набор css файлов, правил которые помогают верстать в разы быстрее(но не всегда). Почему не всегда,  опишу ниже.<br />
Там во первых есть правила для ресета CSS, что это такое я описал <a title="Первые шаги к профессиональной верстке (первая часть)" href="http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verst.html">тут</a>.<br />
С помощью таких фрэймворков можно легко создавать блоки на сайте, то есть структуру сайта. Обычно чтоб сделать каркас, уходит не больше десяти минут.<br />
Так же есть стили для придания более менее приличного вида для шрифтов, ссылок и форм.<br />
Я не буду расписывать как работают фрэймворки, для этого нужен целый цикл статей, да и информации в сети по этому поводу достаточно.</p>
<p>Я лишь хочу высказать свое мнение на счет всего этого.<br />
Когда я узнал об этих фреймворках, я изучил большинство из них, ну по крайней мере самые популярные, но остановился на <a href="http://960.gs" target="_blank">960.gs </a>. Он мне показался самым удобным и логически правильным.</p>
<p><span><strong><span style="font-size: medium;">Когда можно и надо использовать фрэймворки</span><br />
</strong></span><span style="font-size: small;">Сидеть только на них не рекомендую, да и не получится.<br />
Приведу пример из своей практике, работал я в одной фирме, если вообще можно ее так назвать, и делали мы там сайты на заказ. Делали на базе движка ДЛЕ. Делался Дешевый дизайн, потом я делал верстку а другой чел заливал туда новости тематические и выставлял сайт на продажу.<br />
Вот в этом случае использование фрэймворка сказывалось очень сильно на скорость верстки. Шаблоны эти шли как на конвейере, по 3-4 шаблона в день верстал.<br />
Но тут была особенность,  дизайнер тоже делал макеты под мои требования, я давал ему к примеру размеры блоков которые он может использовать и даже расстояние между блоками, так как с этим строго, на один пиксель больше чем надо и все расплывется.</span></p>
<p>Вот только в таких случаях я считаю что можно их использовать, когда дизайн тоже под них делается, а то придется самому вносить изменения в макет чтоб можно было сверстать на базе фрэймворка, а это уже не есть гуд и неизвестно сколько на это уйдет времени.</p>
<p>Если же дизайнер просто нарисовал макет как ему захотелось, то лучше самому все писать с нуля и не заморачиваться.</p>
<p>Но все же я применяю часть фрэймворка  в любом своем проекте, а именно ресеты, стили которые отвечают за шрифты и формы. Удалил все что было связано со структурой и блоками, переделал немножко то что осталось и радуюсь жизни.</p>
<p>Вот тут вы можете скачать начальные файлы на базе которых я создаю 90% своих проектов:Note: There is a file embedded within this post, please visit this post to download the file.</p>
<p><span style="font-size: medium;"><strong>Когда пользоваться фрэймворками не желательно.<br />
</strong><span style="font-size: small;">Когда не стоит  применять чужие наработки на своих проектах лучше всего видно при разработке крупного сайта, где работы ведутся месяцами, где css файлы имеют много тысяч строк, где каждый загруженный килобайт очень важен.</span></span></p>
<p>В таких ситуациях лучше всего писать отдельный фрэймворк под каждый такой проект и учитывать все до самых мелких деталей. Приведу пример из своей практике, на сайте над которым я сейчас работаю, есть много форм и конечно же много инпутов. Дизайнер всегда рисует их разной ширины, что не может не бесить верстальщика, я ж не буду создавать новые классы для каждого инпута. Я сделал три класса с шириной для инпутов, 100px, 200px и 300px. И уже в зависимости от какой ширины нужен был инпут, ставил определенный класс, а вот основные стили выводил в один отдельный класс. Так я сделал со всеми элементами, блоками формами и так далее.</p>
<p><span style="font-size: medium;"><strong>Минусы CSS фрэймворков</strong></span><br />
Тут я вижу два основных минуса, а именно:</p>
<p><strong>1.Большой объем загружаемого кода</strong>, 80% из которого даже не используется. Это сказывается на скорости загрузки страниц.</p>
<p><strong>2.Трудность менять что либо в коде или редактировать сайт стороннему разработчику. </strong>Это получается из того что обычно у всех элементов ни один и не два класса, а сразу несколько.<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="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;class1 class2 class3 class4&quot;</span>&gt;</span>...<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="class1 class2 class3 class4"&gt;...&lt;/div&gt;</pre></div></div>

<p>потом иди и ищи кто и за что отвечает.</p>
<p>На этом я заканчиваю, напоминаю что все что написал это только мое мнение, оно может не совпадать с вашим. Буду рад посмотреть на комментарии по этому поводу. Так же отвечу на вопросы</p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/css-framework.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>С чего все начиналось&#8230;</title>
		<link>http://pelinoleg.com/blog/s-chego-vse-nachinalos.html</link>
		<comments>http://pelinoleg.com/blog/s-chego-vse-nachinalos.html#comments</comments>
		<pubDate>Fri, 02 Mar 2012 09:34:37 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[Datalife engine]]></category>
		<category><![CDATA[DLE]]></category>
		<category><![CDATA[шаблон]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1281</guid>
		<description><![CDATA[Приветствую дорогие читатели! Сегодня я хочу поделится своей историей о том как я начинал, как я стал веб дизайнером и почему из обычного хобби это превратилось в любимую работу. Пишу я эту статью по просьбе одного из участников форума где я часто провожу свое свободное время. Началось все в конце 2006 года, из простого любопытства. Было жутко интересно как [...]]]></description>
			<content:encoded><![CDATA[<p>Приветствую дорогие читатели! Сегодня я хочу поделится своей историей о том как я начинал, как я стал веб дизайнером и почему из обычного хобби это превратилось в любимую работу.<br />
Пишу я эту статью по просьбе одного из участников форума где я часто провожу свое свободное время.<br />
Началось все в конце 2006 года, из простого любопытства. Было жутко интересно как же создаются эти сайты. Для начала, как и многие узнал о таких сервисах как народ и юкоз но там были ограничения которые меня не очень устраивали и я начал искать альтернативы. Так я узнал что такое домен, хостинг и CMS.</p>
<p>Потом начал изучать HTML. Начал изучение методом тыка, открыл программу frontpage, делал что-то в визуальном редакторе и смотрел какой код генерирует. Было много вопросов, что, как и почему, решение некоторых проблем иногда удавалось найти только через несколько дней изучения, но благодаря этому, все запоминалось намного лучше нежели просто читать книжки по верстке.</p>
<p>Фотошоп на то время я уже немножко знал, просто стал рисовать макеты для сайтов, такими как их видел я. Так же я начал делать шаблоны для Datalife engine, благо там в плане верстки было очень легко.</p>
<p>На то время часто посещал сайт 4dle.ru, там открыли рубрику о продаже шаблонов для ДЛЕ, я заинтересовался, может тоже смогу что-то на этом заработать, то есть сделать шаблон и выставить его на продажу, а вдруг кто-то купит..</p>
<p>Сказано-сделано.<br />
<span style="color: #000000;">Вот мой первый шаблон который я выставил на продажу:</span><br />
<a href="http://pelinoleg.com/wp-content/uploads/2012/03/firtst_template_for_dle.jpg"><img class="alignnone size-medium wp-image-1309" title="firtst_template_for_dle" src="http://pelinoleg.com/wp-content/uploads/2012/03/firtst_template_for_dle-179x300.jpg" alt="шаблон DLE Datalife engine " width="179" height="300" /></a></p>
<p>Шаблон конечно же ужасен, но это я понял только после того как прочел комментарии. Но это меня не остановило, я понимал что не все получается с первого раза, и я продолжал делать макеты.<br />
<span style="color: #000000;">Вот еще некоторые из них:</span><br />

<div class="ngg-galleryoverview" id="ngg-gallery-1-1281">


	
	<!-- Thumbnails -->
		
	<div id="ngg-image-1" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle.png" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-2" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle3.jpg" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle3" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle3.jpg" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-3" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle4.jpg" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle4" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle4.jpg" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-4" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle5.jpg" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle5" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle5.jpg" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-5" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle6.jpg" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle6" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle6.jpg" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-6" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle7.jpg" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle7" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle7.jpg" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-7" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pelinoleg.com/wp-content/gallery/first-templates/first_templates_for_dle8.jpg" title=" " class="shutterset_set_1" >
								<img title="first_templates_for_dle8" alt="шаблон DLE Datalife engine " src="http://pelinoleg.com/wp-content/gallery/first-templates/thumbs/thumbs_first_templates_for_dle8.jpg" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 	 	
	<!-- Pagination -->
 	<div class='ngg-clear'></div>
 	
</div>

</p>
<div class="clear"></div>
<p>Конечно же это трудно назвать дизайном, но кое-что из этого я продал.<br />
Сейчас просматривал эти работы на 4dle и очень сильно удивился когда в описании увидел что проверял шаблоны на IE и Maxthon. Либо тогда не было других браузеров, либо я просто о них не знал.<br />
Сейчас же на работе проверяю сразу 5 штук, что сильно бесит.</p>
<p>После всего этого я решил открыть свое портфолио, было мало работ и все же решил попробовать. Открыл свой мини сайт где написал какие услуги предоставляю, то есть делаю на заказ шаблоны для ДЛЕ, показывал примеры своих работ ну и контакты.<br />
Очень удивился когда мне написал первый клиент, он хотел заказать шаблон для порно сайта. Ну что-ж, вызов принят.<br />
Хочу сказать что было нелегко и в плане дизайна и в плане верстки. Но кое-как я с этой задачей справился, что самое удивительное что клиент остался доволен работой и мы до сих пор с ним сотрудничаем.<br />
Шаблон этот я не сохранил, хотел поискать в интернете, может где-то что-то есть и очень удивился когда понял что этот шаблон есть на каждом втором варезнике, рип версия конечно же.<br />
<span style="color: #000000;">Вот скрин, взятый с одного из сайтов:</span><br />
<a href="http://pelinoleg.com/wp-content/uploads/2012/03/rolikixxx.png"><img class="alignnone size-medium wp-image-1320" title="rolikixxx" src="http://pelinoleg.com/wp-content/uploads/2012/03/rolikixxx-300x175.png" alt="шаблон DLE Datalife engine " width="300" height="175" /></a></p>
<p>Взял я за этот шаблон тогда 70 долларов. Ну и пошло поехало, за этим последовало другие заказы, многие из которых были связаны с порно.<br />
До сих пор я разрабатываю шаблоны на заказ под ДЛЕ, но сейчас уже как-то не то, и клиенты редкость, да через чур требовательны, сказались видимо конкуренция и кризис.  Но это все же сейчас на втором плане, так как занимаюсь этим в свободное время от работы. Работаю я верстальщиком и очень доволен своей работой. Никогда не думал что мое увлечение превратится в основное занятие. Но я рад что так получилось.</p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/s-chego-vse-nachinalos.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Первые шаги к профессиональной верстке (вторая часть)</title>
		<link>http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verstke-vtoraya-chast.html</link>
		<comments>http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verstke-vtoraya-chast.html#comments</comments>
		<pubDate>Wed, 29 Feb 2012 13:27:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Verstca]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[id]]></category>
		<category><![CDATA[верстка]]></category>
		<category><![CDATA[код]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1251</guid>
		<description><![CDATA[Итак, я начал в этой статье рассказывать о том как стать профи в своем деле, а именно в верстке. Далее хочу поговорить немножко о CSS и рассказать о некоторых правилах/советах. 1.Комментарии в коде  Признаюсь честно, я не всегда применяю комментарии когда пишу код CSS, но желательно это делать всегда. Нужно это для того чтоб потом, [...]]]></description>
			<content:encoded><![CDATA[<p>Итак, я начал в <a title="Первые шаги к профессиональной верстке (первая часть)" href="http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verst.html">этой</a> статье рассказывать о том как стать профи в своем деле, а именно в верстке.<br />
Далее хочу поговорить немножко о CSS и рассказать о некоторых правилах/советах.</p>
<p><span style="font-size: medium;"><strong>1.Комментарии в коде </strong></span></p>
<p><a href="http://pelinoleg.com/wp-content/uploads/2012/02/css.jpg"><img class="alignnone size-medium wp-image-1257" title="css" src="http://pelinoleg.com/wp-content/uploads/2012/02/css-300x252.jpg" alt="код верстка id HTML CSS " width="300" height="252" /></a></p>
<p>Признаюсь честно, я не всегда применяю комментарии когда пишу код CSS, но желательно это делать всегда. Нужно это для того чтоб потом, вам же было легче разобраться с кодом или же другим верстальщикам если кто-то что-то будет переделывать в проекте.<br />
Если сайт маленький, нужно хотя бы разделить основные части сайта. как на скрине чуть выше.<br />
Но если проект по больше, то стоит так же разделять те части которые занимают много места, то есть там где много кода.<br />
К примеру сложная форма где много стилей.<br />
Но и увлекаться комментариями тоже не надо, иначе будут одни комментарии там, пока все изучишь больше времени потеряешь.</p>
<p><span style="font-size: medium;"><strong>2.Сокращение кода </strong></span></p>
<p>Ну про это думаю все знают, даже новички. Но не думаю что будет грехом если я тоже об этом напишу.<br />
Что я имею ввиду под сокращением кода, это тот код который вместо нескольких строк, можно обойтись одной.<br />
<span style="color: #000000;">к примеру код:</span></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="kw1">margin-top</span><span class="sy0">:</span><span class="re3">10px</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">margin-right</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="kw1">margin-bottom</span><span class="sy0">:</span><span class="re3">10px</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">margin-left</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;</pre></div></div>

<p><span style="color: #000000;">можно написать так:</span></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="kw1">margin</span><span class="sy0">:</span><span class="re3">10px</span> <span class="re3">5px</span><span class="sy0">;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">margin:10px 5px;</pre></div></div>

<p>уменьшили код в 4 раза, при больших объемах кода, это очень существенно.<br />
Ну а если вы не знаете как и где можно сокращать код, то гугл вам в помощь. Статей на счет этого очень много.</p>
<p><span style="font-size: medium;"><strong>3.Осмысленные имена классов и ID</strong></span></p>
<p>При написании кода, часто торопишься и даешь имена классам от балды, все равно будет работать. Но это не правильно.<br />
Всегда нужно давать осмысленные имена, ведь потом будет легче разобраться что и к чему относится.<br />
К примеру если это шапка то имя может быть &#8220;header&#8221;. Обычно используются английские слова для этого, но если вы с ними не знакомы то можно и русские слова написать, главное чтоб было понятно к чему относится класс, к примеру &#8220;shapka&#8221; .<br />
Иногда когда большой проект, трудно придумать название которое не повторяется, но что по делать, такова учесть верстальщика.</p>
<p><span style="font-size: medium;"><strong>4.Одно свойство в одну строку</strong></span></p>
<p>Каждое свойство в CSS нужно писать в отдельную строку, это опять же делается для того чтоб потом было легче читать код и разбираться с ним.<br />
<span style="color: #000000;">Правильно:</span></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">.short_text<span class="br0">&#123;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="kw1">width</span><span class="sy0">:</span><span class="re3">310px</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="kw1">height</span><span class="sy0">:</span><span class="re3">107px</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="kw1">overflow</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="kw1">margin-top</span><span class="sy0">:</span><span class="re3">12px</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">justify</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="kw1">font-size</span><span class="sy0">:</span><span class="re3">14px</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2">&nbsp; &nbsp; <span class="kw1">line-height</span><span class="sy0">:</span><span class="re3">22px</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">.short_text{
    width:310px;
    height:107px;
    overflow:hidden;
    margin-top:12px;
    text-align:justify;
    font-size:14px;
    line-height:22px;
}</pre></div></div>

<p><span style="color: #000000;">Не правильно:</span></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">short_text<span class="br0">&#123;</span> <span class="kw1">width</span><span class="sy0">:</span><span class="re3">310px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span><span class="re3">107px</span><span class="sy0">;</span> <span class="kw1">overflow</span><span class="sy0">:</span><span class="kw2">hidden</span><span class="sy0">;</span> <span class="kw1">margin-top</span><span class="sy0">:</span><span class="re3">12px</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">justify</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span><span class="re3">14px</span><span class="sy0">;</span> <span class="kw1">line-height</span><span class="sy0">:</span><span class="re3">22px</span><span class="sy0">;</span><span class="br0">&#125;</span></div></li>
</ol></div></div>
<div class="bwp-syntax-source"><pre class="no-parse">short_text{ width:310px; height:107px; overflow:hidden; margin-top:12px;
text-align:justify; font-size:14px; line-height:22px;}</pre></div></div>

<p><span style="font-size: medium;"><strong> 5.Удаление неиспользуемых классов и ID</strong></span></p>
<p>Тут по моему все из заголовка понятно. Лишний код-лишний мусор.<br />
В создании сайтов часто пишешь одно, потом переделываешь и остаются куски кода, классы или id которые нигде не используются а только занимают место. От них вреда нет, но и пользы тоже. Чем больше мусора в коде, тем файл объемное и естественно все будет грузится на много медленнее. Эти куски кода нужно удалять сразу же после того как вы перестали его использовать.<br />
Но если вы это забыли сделать то можно автоматизировать весь этот процесс, я использую программу TopStyle, она платная но и кряк найти не трудно.<br />
Как с ней работать так же можно найти в сети.<br />
Скриншот как это выглядит, прикрепил ниже.<br />
<a href="http://pelinoleg.com/wp-content/uploads/2012/02/topstyle.jpg"><img class="alignnone size-medium wp-image-1278" title="topstyle" src="http://pelinoleg.com/wp-content/uploads/2012/02/topstyle-300x252.jpg" alt="код верстка id HTML CSS " width="300" height="252" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verstke-vtoraya-chast.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Первые шаги к профессиональной верстке (первая часть)</title>
		<link>http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verst.html</link>
		<comments>http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verst.html#comments</comments>
		<pubDate>Fri, 17 Feb 2012 09:53:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Verstca]]></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 />
<span style="color: #000000;">к примеру:</span></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;">2. Чистый код</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><span style="color: #000000;">Правильное написание:</span></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><span style="color: #000000;">Неправильный вариант:</span></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>
<p><strong>Таблицы или блочная верстка<br />
</strong>Про то почему лучше использовать блочную верстку думаю не надо говорить, эта тема не раз поднималась. Я полностью поддерживаю эту идею что лучше и правильнее использовать div-ы, код получается на много чище и меньше по объему что не может не радовать и человеческий глаз и роботов поисковиков.</p>
<p>Но есть моменты когда действительно легче и правильнее использовать таблицы.<br />
К примеру на работе мне надо было сверстать вот эту табличку:</p>
<p><a href="http://pelinoleg.com/wp-content/uploads/2012/02/table.jpg"><img class="alignnone size-medium wp-image-1253" title="table" src="http://pelinoleg.com/wp-content/uploads/2012/02/table-300x252.jpg" alt="профессиональная верстка код класс Reset.css HTML CSS " width="300" height="252" /></a></p>
<p>Я предложил сделать ее через таблицы, но мне сказали что нужно использовать только дивы. Не вопрос я сделал, но посчитал это не логичным.<br />
И потратил я на эту страницу много времени, основная проблема была в бордерах.<br />
К примеру в таблице можно просто задать бордер и будет все красиво. Но к дивам это не применимо, если задавать всем дивам бордеры то получится двойные, из=за соприкосновения.<br />
если задать только по левой или правой части то уже другие проблемы.<br />
В общем не все так гладко как кажется на первый взгляд. и считаю что в таких случаях лучше таблицы нет ничего.</p>
<p>Продолжение <a title="Первые шаги к профессиональной верстке (вторая часть)" href="http://pelinoleg.com/blog/pervye-shagi-k-professionalnoj-verstke-vtoraya-chast.html">тут</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/verstca/pervye-shagi-k-professionalnoj-verst.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<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[blog]]></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>6</slash:comments>
		</item>
		<item>
		<title>Что такое HTML5 и почему Вы должны это знать</title>
		<link>http://pelinoleg.com/blog/chto-takoe-html5-i-pochemu-vy-dolzhny-eto-znat.html</link>
		<comments>http://pelinoleg.com/blog/chto-takoe-html5-i-pochemu-vy-dolzhny-eto-znat.html#comments</comments>
		<pubDate>Mon, 13 Feb 2012 22:02:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[youtube]]></category>

		<guid isPermaLink="false">http://pelinoleg.com/?p=1284</guid>
		<description><![CDATA[Чтобы быть хорошим юзером и потребителем, нужно понимать механизм функционирования конкретной технологии, почему мы используем его именно так и что означает вся эта масса акронимов и PR-жаргона. Мы здесь, чтобы помочь Вамразобраться и понять, как работают все эти транзисторы, пиксели и антенны =), приносяблага современного мира в Ваш дом или офис. Что такое HTML5? Мы уверены, что Вы уже слышали слово HTML5, часто употребляемое в последнее время такими компаниями, как Apple и Google. Это следующий шаг эволюции HTML, или языка разметки гипертекста (англ. HyperText Markup Language), на которой базируетсяпочти каждый сайт в интернете. Ее последняя итерация, HTML4, дебютировавшая в1997 году, получила серьезного хирургического вмешательства, чтобы удовлетворять потребностям современного [...]]]></description>
			<content:encoded><![CDATA[<p>Чтобы быть хорошим юзером и потребителем, нужно понимать механизм функционирования конкретной технологии, почему мы используем его именно так и что означает вся эта масса акронимов и PR-жаргона. Мы здесь, чтобы помочь Вамразобраться и понять, как работают все эти транзисторы, пиксели и антенны =), приносяблага современного мира в Ваш дом или офис.</p>
<p><span id="more-1284"></span></p>
<p><strong>Что такое HTML5?</strong></p>
<p>Мы уверены, что Вы уже слышали слово <a href="http://www.switched.com/tag/html5">HTML5</a>, часто употребляемое в последнее время такими компаниями, как Apple и Google. Это следующий шаг эволюции HTML, или языка разметки гипертекста (англ. HyperText Markup Language), на которой базируетсяпочти каждый сайт в интернете. Ее последняя итерация, HTML4, дебютировавшая в1997 году, получила серьезного хирургического вмешательства, чтобы удовлетворять потребностям современного мира.</p>
<p><a href="http://pelinoleg.com/wp-content/uploads/2012/03/html5.jpg"><img class="aligncenter size-full wp-image-1285" title="html5" src="http://pelinoleg.com/wp-content/uploads/2012/03/html5.jpg" alt="youtube html5 " width="525" height="300" /></a></p>
<p><strong>Почему это настолько важно?</strong></p>
<p>HTML4 была модифицирована и расширена за пределы своей первоначальной сферы применения, чтобы внести высокий уровень интерактивности и мультимедиа в веб-сайты. Плагины для Flash, Silverlight и Java добавили интеграцию медиа к всемирной паутины, но они тоже не без изъянов. В поисках &#8221;лучшего пользовательского опыта&#8221; идлительного времени работы батареи Apple просто прекратил поддержку некоторых из этих плагинов на мобильных устройствах, оставив большую часть перегруженногомультимедийного Интернет недоступен на айпада и айфонах.<br />
HTML5 добавляет много новых фич и улучшает функциональность, чтобы сделать эти лакомые к ресурсамаддоны (дополнения) ненужными в большинстве случаев.</p>
<p>Предполагая, что большинство поставщиков контента (содержания) &#8220;подпишутся&#8221; на HTML5 (а так и есть), Вам больше не придется беспокоиться об установленииочередного плагина просто, чтобы послушать музыкальную композицию, установленнуюв блог, или посмотреть видео на YouTube. Так же это имеет большое значение для платформ, не поддерживающих Flash (iPhone, iPad) или имеют проблемы с ним (Linux).Для всех этих смартфонов HTML5 станет большим благом.</p>
<p><strong>Что же конкретно оно может делать?</strong></p>
<p>Наиболее разрекламированным фичам HTML5 является воспроизведение медиа иофлайн-хранения. На HTML4 сайты преимущественно имели обращаться за помощью кFlash или Silverlight, чтобы просто показать видео или воспроизведения музыки. HTML5позволяет сайтам непосредственно вставлять медиа с помощью тегов &lt;video&gt; и&lt;audio&gt;, без плагинов. На данный момент ведутся дебаты относительно некоторых проблем, в частности остро стоит вопрос формата файлов. Некоторые компании,особенно Mozilla, лоббируют принятие открытого формата <a href="http://en.wikipedia.org/wiki/Ogg">Ogg</a>, бесплатного для использования. Другие, как Apple, предпочитают качественному <a href="http://en.wikipedia.org/wiki/H264">H.264</a>, который заставит разработчиков браузеров платить за лицензию.</p>
<p>Другим важным дополнением, которое привлекло много внимания, есть возможность сохранять офлайн-данные для веб-приложений. Одним из самых камней преткновения на пути к замене традиционных программ был тот простой факт, что веб-приложения требуют подключения к интернету. Google как временная мера разработала Gears, но этот продукт был <a href="http://gearsblog.blogspot.com/2010/02/hello-html5.html">отозван</a>, поскольку компания изменила свой курс на HTML5. Это означает возможность создавать файлы Google Docs или составлять письма при отсутствии подключения к интернету. Все изменения будут автоматически синхронизированы, как только вы появитесь в сети.</p>
<p>HTML5 также предусматривает новые возможности взаимодействия. Например,перетаскивание (drag-and-drop), которые уже можно увидеть в Gmail.</p>
<p><strong>Как воспользоваться всем этим?</strong></p>
<p>Скорее всего, Вы уже пользуетесь, даже не подозревая. Safari (мобильный и настольный), Google Chrome и Firefox 3.6 &#8211; все поддерживают хотя бы некоторые элементы HTML5 (поддержка в Internet Explorer 8 почти отсутствует). Да и многие продукты Google уже используют некоторые функции протокола нового поколения. Если Вы используете Safari или Chrome, можете посмотреть на <a href="http://www.youtube.com/html5">экспериментальную версию YouTube</a>, которая использует видео-функции HTML5. Gmail и Google Reader тоже приняли часть стандарта. А еще все сайты, перечисленные <a href="http://www.apple.com/ipad/ready-for-ipad/">в этом списке</a> &#8220;готовых к айпада&#8221;, активно используют HTML5, включая The New York Times, CNN и CBS.Последний недавно объявил о постепенном отказе от Flash в пользу HTML5 для всего видео контента. Если Вы хотите копнуть глубже, можно посмотреть на серию экспериментов от Mozilla, которые демонстрируют, на что способна HTML5, а также на подборку сайтов и то, какие огромные возможности теперь в руках дизайнеров.</p>
<p>Flash конечно не исчезнет в ближайшее время, он будет и дальше широко использоваться и поддерживаться, и те флеш-игры, которые все мы так любим, невозможно воспроизвести с помощью HTML. Но важно знать, что когда Вы слышите, как люди бросаются словом &#8220;HTML5&#8243;, это не просто какой-то пустой жаргон, это &#8211; будущее интернета.</p>
]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/chto-takoe-html5-i-pochemu-vy-dolzhny-eto-znat.html/feed</wfw:commentRss>
		<slash:comments>1</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>admin</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>

<div class='postovoi'>Если же хотите узнать все тонкости раскрутки сайтов то можно почитать тут: <a href="http://heavig.ru/">seo блог</a></div>
 ]]></content:encoded>
			<wfw:commentRss>http://pelinoleg.com/blog/html/odin-sajt-dlya-lyubogo-ustrojstva-ili-cht.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

