<?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>Lib</title>
	<atom:link href="http://www.webcreator.kiev.ua/lib/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webcreator.kiev.ua/lib</link>
	<description>Очередной блог на WordPress</description>
	<lastBuildDate>Tue, 08 Jun 2010 17:57:00 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>SEO AJAX</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/seo-ajax/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/seo-ajax/#comments</comments>
		<pubDate>Thu, 20 May 2010 14:02:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Без рубрики]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=177</guid>
		<description><![CDATA[Getting Started
This document outlines the steps that are necessary in order to make your AJAX application crawlable. Once you have fully understood each of these steps, it should not take you very long to actually make your application crawlable! However, you do need to understand each of the steps involved, so we recommend reading this [...]]]></description>
			<content:encoded><![CDATA[<h2>Getting Started</h2>
<p>This document outlines the steps that are necessary in order to make your AJAX application crawlable. Once you have fully understood each of these steps, it should not take you very long to actually make your application crawlable! However, you do need to understand each of the steps involved, so we recommend reading this guide in its entirety.<span id="more-177"></span></p>
<h4>Overview of Solution</h4>
<p>Briefly, the solution works as follows: the crawler finds a pretty AJAX URL (that is, a URL containing a #! hash fragment). It then requests the content for this URL from your server in a slightly modified form. Your web server returns the content in the form of an HTML snapshot, which is then processed by the crawler. The search results will show the original URL.<img class="aligncenter" title="image" src="http://code.google.com/intl/sv-SE/web/ajaxcrawling/docs/images/crawlerserver2.png" alt="" width="884" height="445" /></p>
<h4>Step-by-step guide</h4>
<h5>1. Indicate to the crawler that your site supports the AJAX crawling scheme</h5>
<p>The first step to getting your AJAX site indexed is to indicate to the crawler that your site supports the AJAX crawling scheme. The way to do this is to use a special token in your hash fragments (that is, everything after the # sign in a URL): hash fragments have to begin with an exclamation mark. For example, if your AJAX app contains a URL like this:</p>
<blockquote>
<pre>www.example.com/ajax.html#key=value</pre>
</blockquote>
<p>it should now become this:</p>
<blockquote>
<pre>www.example.com/ajax.html#!key=value</pre>
</blockquote>
<p>When your site adopts the scheme, it will be considered &laquo;AJAX crawlable.&raquo; This means that the crawler will see the content of your app if your site supplies HTML snapshots.</p>
<h5>2. Set up your server to handle requests for URLs that contain<span style="color: #008000;"> _escaped_fragment</span>_</h5>
<p>Suppose you would like to get <span style="color: #008000;">www.example.com/index.html#!key=value</span> indexed. Your part of the agreement is to provide the crawler with an HTML snapshot of this URL, so that the crawler sees the content. How will your server know when to return an HTML snapshot instead of a regular page? The answer is the URL that is requested by the crawler: the crawler will modify each AJAX URL such as</p>
<blockquote>
<pre>www.example.com/ajax.html#!key=value</pre>
</blockquote>
<p>to temporarily become</p>
<blockquote>
<pre>www.example.com/ajax.html?_escaped_fragment_=key=value</pre>
</blockquote>
<p>You may wonder why this is necessary. There are two very important reasons:</p>
<ul>
<li>Hash fragments are never (by specification) sent to the server as part of an HTTP request. In other words, the crawler needs some way to let your server know that it wants the content for the URL <span style="color: #008000;">www.example.com/ajax.html#!key=value</span> (as opposed to simply <span style="color: #008000;">www.example.com/ajax.html</span>).</li>
<li>Your server, on the other hand, needs to know that it has to return an HTML snapshot, rather than the normal page sent to the browser. Remember: an HTML snapshot is all the content that appears on the page after the JavaScript has been executed. Your server&#8217;s end of the agreement is to return the HTML snapshot for<span style="color: #008000;"> www.example.com/index.html#!key=value </span>(that is, the original URL!) to the crawler.</li>
</ul>
<p><span style="color: #ff0000;">Note: The crawler escapes certain characters in the fragment during the transformation. To retrieve the original fragment, make sure to unescape all %XX characters in the fragment. More specifically, %26 should become &amp;, %20 should become a space, %23 should become #, and %25 should become %, and so on.</span></p>
<p>Now that you have your original URL back and you know what content the crawler is requesting, you need to produce an<a href="http://code.google.com/intl/sv-SE/web/ajaxcrawling/docs/html-snapshot.html"> HTML snapshot</a>. How do you do that? There are various ways; here are some of them:</p>
<ul>
<li>If a lot of your content is produced with JavaScript, you may want to use a headless browser such as <a href="http://htmlunit.sourceforge.net/">HtmlUnit </a>to obtain the HTML snapshot. Alternatively, you can use a different tool such as <a href="http://crawljax.com/">crawljax</a> or <a href="http://watij.com/">watij.com.</a></li>
<li>If much of your content is produced with a server-side technology such as PHP or ASP.NET, you can use your existing code and only replace the JavaScript portions of your web page with static or server-side created HTML.</li>
<li>You can create a static version of your pages offline, as is the current practice. For example, many applications draw content from a database that is then rendered by the browser. Instead, you may create a separate HTML page for each AJAX URL.</li>
</ul>
<p>It&#8217;s highly recommended that you try out your HTML snapshot mechanism. It&#8217;s important to make sure that the headless browser indeed renders the content of your application&#8217;s state correctly. Surely you&#8217;ll want to know what the crawler will see, right? To do this, you can write a small test application and see the output, or you can use a tool such as Fetch as <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=158587">Googlebot</a>.</p>
<p>To summarize, make sure the following happens on your server:</p>
<ul>
<li>A request URL of the form <span style="color: #008000;">www.example.com/ajax.html?_escaped_fragment_=key=value</span> is mapped back to its original form: <span style="color: #008000;">www.example.com/ajax.html#!key=value<span style="color: #000000;">.</span></span></li>
<li><span style="color: #008000;"><span style="color: #000000;">The token is URL unescaped. The easiest way to do this is to use standard URL decoding. For example, in Java you would do this:<br />
</span></span></li>
<blockquote>
<pre>mydecodedfragment = URLDecoder.decode(myencodedfragment, "UTF-8");</pre>
</blockquote>
<li>An HTML snapshot is returned, ideally along with a prominent link at the top of the page, letting end users know that they have reached the <span style="color: #008000;">_escaped_fragment_ URL</span> in error. (Remember that <span style="color: #008000;">_escaped_fragment_ URL</span>s are meant to be used only by crawlers.) For all requests that do not have an<span style="color: #008000;"> _escaped_fragment_</span>, the server will return content as before.</li>
</ul>
<h5>3. Handle pages without hash fragments</h5>
<p>Some of your pages may not have hash fragments. For example, you might want your home page to be www.example.com, rather than <span style="color: #008000;">www.example.com#!home</span>. For this reason, we have a special provision for pages without hash fragments. In order to make pages without hash fragments crawlable, you include a special meta tag in the head of the HTML of your page. The meta tag takes the following form:</p>
<blockquote>
<pre> &lt;meta name="fragment" content="!"&gt;</pre>
</blockquote>
<p>This indicates to the crawler that it should crawl the ugly version of this URL. As per the above agreement, the crawler will temporarily map the pretty URL to the corresponding ugly URL. In other words, if you place<span style="color: #008000;"> &lt;meta name=&raquo;fragment&raquo; content=&raquo;!&raquo;&gt;</span> into the page <span style="color: #008000;">www.example.com</span>, the crawler will temporarily map this URL to<span style="color: #008000;"> www.example.com?_escaped_fragment_=</span> and will request this from your server. Your server should then return the HTML snapshot corresponding to <span style="color: #008000;">www.example.com</span>. Please note that one important restriction applies to this meta tag: the only valid content is &laquo;!&raquo;. In other words, the meta tag will always take the exact form:<span style="color: #008000;"> &lt;meta name=&raquo;fragment&raquo; content=&raquo;!&raquo;&gt;</span>, which indicates an empty hash fragment, but a page with AJAX content.</p>
<h5>4. Consider updating your Sitemap to list the new AJAX URLs</h5>
<p>Crawlers use Sitemaps to complement their discovery crawl. Your Sitemap should include the version of your URLs that you&#8217;d prefer to have displayed in search results, so in most cases it would be <span style="color: #008000;">http://example.com/ajax.html#!key=value</span>. <strong>Do not include links such as </strong><span style="color: #008000;">http://example.com/ajax.html?_escaped_fragment_=key=value</span> <strong>in the Sitemap</strong>.<strong> Googlebot does not follow links that contain </strong><span style="color: #008000;">_escaped_fragment_</span><strong>!</strong> If you have an entry page to your site, such as your homepage, that you would like displayed in search results without the #!, then add this URL to the Sitemap as is. For instance, if you want this version displayed in search results:</p>
<blockquote>
<pre>http://example.com/</pre>
</blockquote>
<p>then include</p>
<blockquote>
<pre>http://example.com/</pre>
</blockquote>
<p>in your Sitemap and make sure that <span style="color: #008000;">&lt;meta name=&raquo;fragment&raquo; content=&raquo;!&raquo;&gt;</span> is included in the head of the HTML document. For more information, check out our additional articles on<a href="http://www.google.com/support/webmasters/bin/answer.py?answer=156184"> Sitemaps</a>.</p>
<h5>5. Optionally, but importantly, test the crawlability of your app: see what the crawler sees with &laquo;Fetch as Googlebot&raquo;.</h5>
<p>Google provides a tool that will allow you to get an idea of what the crawler sees, <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=158587">Fetch as Googlebot</a>. You should use this tool to see whether your implementation is correct and whether the bot can now see all the content you want a user to see. It is also important to use this tool to ensure that your site is not cloaking.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/seo-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DIV поверх флэш</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/div-%d0%bf%d0%be%d0%b2%d0%b5%d1%80%d1%85-%d1%84%d0%bb%d1%8d%d1%88/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/div-%d0%bf%d0%be%d0%b2%d0%b5%d1%80%d1%85-%d1%84%d0%bb%d1%8d%d1%88/#comments</comments>
		<pubDate>Fri, 14 May 2010 18:58:35 +0000</pubDate>
		<dc:creator>Webmaster</dc:creator>
				<category><![CDATA[СSS приколы]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=166</guid>
		<description><![CDATA[У веб-разработчиков существует известная проблема — как расположить DIV (или что либо другое) поверх flash-объекта внутри html-страницы. Стандартные манипуляции, типа z-index не помогают. И бедные разработчики начинают проклинать flash, хотя это совершенно напрасно, так как раз он здесь совершенно не при чем. Корни гораздо глубже.
 
Существует стопроцентно кроссбраузерное решение. Хотя может это и не очень [...]]]></description>
			<content:encoded><![CDATA[<p>У веб-разработчиков существует известная проблема — как расположить DIV (или что либо другое) поверх flash-объекта внутри html-страницы. Стандартные манипуляции, типа z-index не помогают. И бедные разработчики начинают проклинать flash, хотя это совершенно напрасно, так как раз он здесь совершенно не при чем. Корни гораздо глубже.<br />
<span id="more-166"></span> <img src="http://teaminc.ru/i/blog/div-over-flash.jpg" alt="" /></p>
<p>Существует стопроцентно кроссбраузерное решение. Хотя может это и не очень официально со стороны Adobe, но тем не менее, именно этот метод они используют у себя на сайте.</p>
<p>При размещении Flash на странице (совершенно не важно, каким методом, будь-то стандартным от Adobe, либо используя SWFObject) необходимо использовать атрибут/параметр wmode тэга object/embed со значением «opaque».</p>
<p>Естественно — это только первый шаг. О том как позиционировать глубину «дивов» — здесь рассказывать смысла нет <img src='http://www.webcreator.kiev.ua/lib/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Вот <a href="http://team2inc.com/">рабочий пример</a> (сорри, но мне было лень делать демо-пример, так как закончив с этой задачей, решил сразу написать сюда, пока из головы не вылетело, а по ссылке около метра):</p>
<blockquote>
<pre>&lt;script type="text/javascript" src="js/swfobject.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;swfobject.embedSWF("main.swf", "flash", "100%", "100%", "8", null, null, {menu:"false", wmode:"opaque"});&lt;/script&gt;
................................................
&lt;div id="over-holder"&gt;&lt;p&gt;А этот текст мы видим поверх Флэш&lt;/p&gt;&lt;/div&gt;
&lt;div id="flash"&gt;А тут будет сам Флэш&lt;/div&gt;</pre>
</blockquote>
<p>Теперь, манипулируя значениям z-index, вы можете размещать поверх flash все что угодно.</p>
<p>P.S. Кстати, насчет атрибута wmode, раньше существовало недоразумение со стороны официальной документации и наверно отсюда и пошло недоверия к этому свойству:<br />
«This attribute/parameter works only in Windows with the Flash Player ActiveX control» — т.е. данный атрибут работает только под Windows и IE (это документация трехлетней давности).</p>
<p>Проверено — это работает везде. И в нынешней документации такого утверждения больше нет.</p>
<p>Взято с  <a href="http://habrahabr.ru/blogs/webdev/50334/">http://habrahabr.ru/blogs/webdev/50334/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/div-%d0%bf%d0%be%d0%b2%d0%b5%d1%80%d1%85-%d1%84%d0%bb%d1%8d%d1%88/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS-cвойство z-index: подробный обзор</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/css-c%d0%b2%d0%be%d0%b9%d1%81%d1%82%d0%b2%d0%be-z-index-%d0%bf%d0%be%d0%b4%d1%80%d0%be%d0%b1%d0%bd%d1%8b%d0%b9-%d0%be%d0%b1%d0%b7%d0%be%d1%80/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/css-c%d0%b2%d0%be%d0%b9%d1%81%d1%82%d0%b2%d0%be-z-index-%d0%bf%d0%be%d0%b4%d1%80%d0%be%d0%b1%d0%bd%d1%8b%d0%b9-%d0%be%d0%b1%d0%b7%d0%be%d1%80/#comments</comments>
		<pubDate>Fri, 14 May 2010 18:40:50 +0000</pubDate>
		<dc:creator>Webmaster</dc:creator>
				<category><![CDATA[СSS приколы]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=149</guid>
		<description><![CDATA[Большинство CSS-свойств довольно просты в использовании. Зачастую, применение CSS-свойства к элементу в разметке дает мгновенный результат – как только вы обновите страницу, набор значений свойства применится, и вы сразу же увидите результат. Другие CSS-свойства, однако, более комплексные и будут работать только после задания определенного набора условий.
Свойство z-index принадлежит к последней группе свойств. Это свойство так [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-150" style="margin-left: 10px; margin-right: 10px;" title="hove" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/hove.jpg" alt="hove" width="271" height="257" />Большинство CSS-свойств довольно просты в использовании. Зачастую, применение CSS-свойства к элементу в разметке дает мгновенный результат – как только вы обновите страницу, набор значений свойства применится, и вы сразу же увидите результат. Другие CSS-свойства, однако, более комплексные и будут работать только после задания определенного набора условий.</p>
<p>Свойство z-index принадлежит к последней группе свойств. Это свойство так часто вызывало всеобщую путаницу и разочарование, как ни одно, из существующих CSS-свойств. По иронии судьбы, однако, когда вы поближе познакомитесь с z-index, вы поймете, что это свойство очень простое, и предлагает эффективный метод решения многих проблем верстки.</p>
<p><span id="more-149"></span><br />
В этой статье вы узнаете, что представляет собой z-index, как он может быть неправильно истолкован, а также некоторые примеры его использования. Кроме того, вы узнаете некоторые различия в поведении браузеров при обработке свойства z-index, это касается в основном предыдущих версий Internet Explorer и Firefox. Этот подробный обзор z-index предоставит разработчикам отличную основу для использования этого свойства уверенно и эффективно.</p>
<h3>Что это такое?</h3>
<p>Свойство z-index определяет уровень стека HTML-элемента. «Уровень стека» обозначает позицию элемента на оси Z (направленно перпендикулярно оси X, или оси Y). Элемент, которому назначено самое большое значение z-index, будет расположен в самом верху стека слоев. Этот стек слоев, располагается перпендикулярно к экрану, или области просмотра.</p>
<p>3-д представление оси Z:</p>
<p><img class="alignnone size-full wp-image-151" title="graphical-z-index" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/graphical-z-index.jpg" alt="graphical-z-index" width="500" height="443" /></p>
<p>Для того, чтобы продемонстрировать как работает z-index, картинка, представленная выше, немного увеличивает отображение элементов стека по отношению к области просмотра.</p>
<h3>Обычный порядок стека</h3>
<p>На HTML-странице, обычный порядок стека (то есть порядок элементов на оси Z), определяет ряд факторов. Далее представлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу. В этом списке нет элементов, с назначенным свойством z-index:Фон и рамка элемента, создающие контекст стека</p>
<ul>
<li> Элементы с отрицательным контекстом стека, в порядке появления</li>
<li>Не позиционированные, не плавающие, блочные элементы, в порядке появления</li>
<li>Не позиционированные, плавающие элементы, в порядке появления</li>
<li>Строчные элементы, в порядке появления</li>
<li>Позиционированные элементы, в порядке появления</li>
</ul>
<p>Когда свойство z-index используется правильно, оно может изменить обычный порядок стека.</p>
<p>Конечно, порядок элементов в стеке не является таким наглядным, пока элементы позиционируются, перекрывая друг друга. Поэтому, чтобы увидеть обычный порядок стека, можно использовать отрицательные поля, как показано ниже:</p>
<p><img class="alignnone size-full wp-image-152" title="Untitled-1" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/Untitled-1.jpg" alt="Untitled-1" width="599" height="540" /></p>
<p>Блокам, показанным выше, назначен разный фоновый цвет и цвет рамки, а последним двум блокам, специально назначены отрицательные верхние отступы, чтобы проиллюстрировать обычный порядок стека. Серый блок появляется первым в разметке, синий блок вторым и коричневый блок третьим. Назначенные отрицательные поля отлично демонстрируют этот факт. Этим элементам не назначены значения z-index, они располагаются на странице в обычном порядке, или по умолчанию. Они накладываются друг на друга, благодаря отрицательным полям.</p>
<h3>Почему появляется путаница?</h3>
<p>Несмотря на то, что z-index не сложное для понимания свойство, при ошибочном толковании, оно может привести в заблуждение начинающих разработчиков. Это заблуждение появляется потому, что свойство z-index будет работать только с тем элементом, у которого свойство position установлено в одно из трех значений: absolute, fixed или relative.</p>
<p>Чтобы продемонстрировать, что z-index, работает только с позиционированными элементами, вот те же самые три блока, вместе с примененными значениями z-index, для изменения обычного порядка слоев:</p>
<p><img class="alignnone size-full wp-image-152" title="Untitled-1" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/Untitled-1.jpg" alt="Untitled-1" width="599" height="540" /></p>
<p>Серому блоку, установлено значение z-index, равное “9999”; синему блоку, установлено значение z-index, равное “500”; и коричневому блоку, установлено значение z-index, равное “1”. Логично было бы предположить, что порядок, в котором уложены блоки, должен изменится. Но этого не случилось в данном примере, потому что, не одному из этих элементов, не назначено свойство position.</p>
<p>Вот те же самые блоки, но только с добавленным свойством position: relative, к каждому из них, и ранее назначенные свойства z-index:</p>
<p><img class="alignnone size-full wp-image-153" title="Untitled-2" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/Untitled-2.jpg" alt="Untitled-2" width="533" height="548" /></p>
<p>Вот теперь, мы получили желаемый результат: Порядок элементов изменился; серый блок перекрывает синий, а синий, в свою очередь, перекрывает коричневый.</p>
<h3>Синтаксис</h3>
<p>Свойство z-index может влиять на порядок слоев, как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного, целого значения, или значения auto. Значение <code>auto</code>, определяет элементу такой же порядок слоев, как у родительского элемента.</p>
<p>Вот так выглядит CSS-код третьего примера, где свойство z-index применяется правильно:</p>
<blockquote>
<pre>#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 9999;
}

#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 500;
}

#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
z-index: 1;
}</pre>
</blockquote>
<p>Опять же, не будет лишним еще раз напомнить, особенно начинающим разработчикам, что свойство z-index не будет работать до тех пор, пока вы не примените позиционирование к элементу.</p>
<h3>Использование JavaScript</h3>
<p>Если вы хотите динамически изменить значение z-index у элемента, с помощью JavaScript, то это довольно просто. Синтаксис используется такой же, как и для доступа к большинству CSS-свойств, просто замените, записанные через дефис CSS-свойства, на код, как показано ниже:</p>
<blockquote>
<pre>var myElement = document.getElementById("gold_box");
myElement.style.position = "relative";
myElement.style.zIndex = "9999";</pre>
</blockquote>
<p>Как показано в примере, CSS-свойство «z-index», записывается как «zIndex». Точно так же, «background-color» становится «backgroundColor», «font-weight» становится «fontWeight», и так далее.</p>
<p>Также, с помощью вышеуказанного кода, изменяется свойство position, потому что, z-index будет работать только с позиционированным элементом.</p>
<h3>Неправильная обработка в IE и Firefox</h3>
<p>При определенных обстоятельствах, в некоторых браузерах, свойство z-index может обрабатываться по-разному, это касается браузера Internet Explorer, версии 6 и 7, а также Firefox версии 2.</p>
<h4>Элементы &lt;select&gt; в IE6</h4>
<p>В Internet Explorer 6, элемент &lt;select&gt; всегда появляется в самом верху в порядке слоев, нарушая обычный порядок, значения позиционирования или z-index. Эта проблема проиллюстрирована на картинке ниже:</p>
<p><img class="alignnone size-full wp-image-154" title="ie6" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/ie6.jpg" alt="ie6" width="320" height="237" /></p>
<p>Элемент <code>&lt;select&gt;</code> появляется первым в обычном порядке слоев, и получает значение z-index, равное <code>«1»</code>, наряду со значением свойства <code>position</code>, равному <code>relative</code>. Коричневый блок, появляется вторым, в порядке слоев, и ему назначено свойство z-index, равное <code>«9999»</code>. В соответствии с правилом обычного порядка слоев, и назначенных свойств z-index, коричневый блок должен перекрыть элемент <code>&lt;select&gt;</code>, что и происходит во всех текущих браузерах, за исключением IE6:</p>
<p><img class="alignnone size-full wp-image-155" title="Untitled-11" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/05/Untitled-11.jpg" alt="Untitled-11" width="359" height="239" /></p>
<p>Если вы посмотрите на этот пример, с помощью браузера IE6, вы увидите, что элемент &lt;select&gt;, перекрывает коричневый блок, игнорируя обычный порядок слоев и свойства z-index.</p>
<p>Этот баг в IE6 создает проблемы с выпадающим меню, которое не может перекрыть элементы &lt;select&gt;. Есть два решения этой проблемы. Первое, это с помощью JavaScript временно скрывать элемент &lt;select&gt;, а затем, снова его отображать, после того, как выпадающее меню скроется. Другое решение предполагает использование &lt;iframe&gt;.</p>
<p>Позиционирование Родительских элементов в IE6/7</p>
<p>Internet Explorer версии 6 и 7, неправильно сбрасывает контекст стека, по отношению к ближайшим, позиционированным, дочерним элементам. Для того чтобы продемонстрировать эту, чуть более сложную проблему, давайте снова отобразим два блока, но в этот раз, мы заключим первый блок, в позиционированный элемент.</p>
<p>Серому блоку, назначено свойство z-index, равное «9999», синему блоку назначен z-index, равный «1», и оба элемента позиционированы. Следовательно, при правильной обработке, серый блок, должен быть расположен поверх синего блока.</p>
<p>Опять же, если вы посмотрите на этот пример в браузере IE6, или IE7, вы увидите, как синий блок перекрывает серый блок. Эти браузеры неправильно «сбрасывают» контекст стека, по отношению к позиционированному родителю, но так быть не должно. Серому блоку назначено самое высокое значение z-index, и он должен быть расположен поверх синего блока. Все другие браузеры обрабатывают этот пример правильно.</p>
<h4>Отрицательные значения в Firefox 2</h4>
<p>В Firefox версии 2, отрицательное значение z-index, позиционирует элемент позади порядка слоев, вместо того, чтобы расположить его поверх фона и рамок элемента, которые устанавливают контекст стека. Ниже представлена картинка, иллюстрирующая этот баг в Firefox 2:<br />
<img src="http://dreamhelg.ru/wp-content/uploads/2009/09/ff2.gif" alt="" /></p>
<p>Ниже представлена HTML-версия этой картинки, так что, если вы посмотрите на страницу в Firefox 3 или в другом, современном браузере, вы увидите правильную обработку: Фон серого блока (который является элементом, устанавливающим контекст стека) появляется в самом низу, и текст, расположенный в сером блоке, появляется поверх синего блока, который соблюдает правила «обычного порядка слоев», как говорилось выше.</p>
<h3>Примеры использования</h3>
<p>Применение свойства z-index к различным элементам на странице, может предоставить быстрое решение для различных задач макета, и позволяет дизайнерам создавать более творческие проекты. Некоторые, интересные примеры использования z-index, на практике, приведены ниже.</p>
<h3>CSS-Тултипы</h3>
<p>Свойство z-index может быть использовано в качестве части тултипа, основанного на CSS, как показано в примере ниже, от <a href="http://trentrichardson.com/examples/csstooltips/">trentrichardson.com</a>:<br />
<img src="http://dreamhelg.ru/wp-content/uploads/2009/09/trent-tooltip.jpg" alt="" /></p>
<h3>Фото-галерея</h3>
<p><a href="http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery">Polaroid Photo Gallery</a>, использует некоторые возможности CSS3 вместе с z-index, для создания фото-галереи, с забавным эффектом наведения.<br />
<img src="http://dreamhelg.ru/wp-content/uploads/2009/09/line25.jpg" alt="" /></p>
<p><a href="http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/">Fancy Thumbnail Hover Effect</a> – здесь, значение z-index изменяется с помощью JQuery-скрипта.<br />
<img src="http://dreamhelg.ru/wp-content/uploads/2009/09/fancy-hover.jpg" alt="" /></p>
<p><strong>LightBox</strong></p>
<p>Существует огромное количество качественных скриптов light box, для бесплатного использования, например плагин к JQuery <a href="http://fancybox.net/">FancyBox</a>. Большинство, если не все они, используют свойство z-index:</p>
<p><img src="http://dreamhelg.ru/wp-content/uploads/2009/09/fancybox-light.jpg" alt="" /></p>
<p>Скрипты Light box используют полупрозрачное PNG-изображение, для затемнения фона, в то время как новый элемент, похожий на окно &lt;div&gt;, отображается на переднем плане. PNG-слой и &lt;div&gt; используют свойство z-index, для того чтобы расположить эти элементы поверх всех остальных элементов на странице.</p>
<p style="text-align: right;">Взято с  <a href="http://dreamhelg.ru/2009/09/css-property-z-index/">http://dreamhelg.ru/2009/09/css-property-z-index/</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/css-c%d0%b2%d0%be%d0%b9%d1%81%d1%82%d0%b2%d0%be-z-index-%d0%bf%d0%be%d0%b4%d1%80%d0%be%d0%b1%d0%bd%d1%8b%d0%b9-%d0%be%d0%b1%d0%b7%d0%be%d1%80/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/%d0%9f%d0%b5%d1%80%d1%81%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5-css-%d1%85%d0%b0%d0%ba%d0%b8-%d0%b4%d0%bb%d1%8f-internet-explorer-opera-firefox-safari-google-chrome/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/%d0%9f%d0%b5%d1%80%d1%81%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5-css-%d1%85%d0%b0%d0%ba%d0%b8-%d0%b4%d0%bb%d1%8f-internet-explorer-opera-firefox-safari-google-chrome/#comments</comments>
		<pubDate>Wed, 24 Mar 2010 20:12:25 +0000</pubDate>
		<dc:creator>Webmaster</dc:creator>
				<category><![CDATA[СSS приколы]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=139</guid>
		<description><![CDATA[Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний “телодвижений”. Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.

По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю [...]]]></description>
			<content:encoded><![CDATA[<p>Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний “телодвижений”. Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.</p>
<p><span id="more-139"></span></p>
<p>По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome.<br />
По мере обнаружения новых хаков, данный список будет дополняться.<br />
Указанные ниже хаки актуальны на 10 октября 2009 года.</p>
<p>CSS-хаки для браузера Opera</p>
<blockquote>
<pre><span style="color: #000000;">@media all and (-webkit-min-device-pixel-ratio:10000),</span>
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}

*|html[xmlns*=""] .style {
background: #F00;
}

html:first-child .style {
background: #F00;
}
/* код валидный */
/* только для Opera &lt; 9.5 */</pre>
</blockquote>
<p>CSS-хаки для браузера FireFox</p>
<blockquote>
<pre>@-moz-document url-prefix() {
.style {background: #F00;}
}</pre>
</blockquote>
<p>CSS-хаки для браузера Internet Explorer 6</p>
<blockquote>
<pre>.style {
_background: #F00;
}
/* код валидный */</pre>
</blockquote>
<p>Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.</p>
<blockquote>
<pre>* html .style {
background: #F00;
}
/* код валидный */</pre>
</blockquote>
<p>CSS-хаки для браузера Internet Explorer 7</p>
<blockquote>
<pre>*+html .style {
background: #F00;
}
/* код валидный */

*:first-child+html .style {
background: #F00;
}
/* код валидный */

html&gt;body .style {
*background: #F00;
}</pre>
</blockquote>
<p>CSS-хаки для браузера Internet Explorer 8</p>
<blockquote>
<pre>.style {
background: #F00\0/;
}</pre>
</blockquote>
<p>Этот хак следует писать после стилей для остальных браузеров.<br />
CSS-хаки для браузера Safari</p>
<blockquote>
<pre>body:last-child:not(:root:root) .style {
background: #F00;
}
/* для Safari &lt; 4.0 */

html[xmlns*=""] body:last-child .style {
background: #F00;
}
/* для Safari &lt; 4.0 */</pre>
</blockquote>
<p>CSS-хаки для браузера Google Chrome<br />
Пока не найдены.</p>
<p style="text-align: right;">Взято с: <a href="http://dimox.name/personal_css_hacks_for_opera_firefox_ie/"> http://dimox.name/personal_css_hacks_for_opera_firefox_ie/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/%d0%9f%d0%b5%d1%80%d1%81%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5-css-%d1%85%d0%b0%d0%ba%d0%b8-%d0%b4%d0%bb%d1%8f-internet-explorer-opera-firefox-safari-google-chrome/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Резиновая кнопка для формы</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/%d0%a0%d0%b5%d0%b7%d0%b8%d0%bd%d0%be%d0%b2%d0%b0%d1%8f-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b0-%d0%b4%d0%bb%d1%8f-%d1%84%d0%be%d1%80%d0%bc%d1%8b/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/%d0%a0%d0%b5%d0%b7%d0%b8%d0%bd%d0%be%d0%b2%d0%b0%d1%8f-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b0-%d0%b4%d0%bb%d1%8f-%d1%84%d0%be%d1%80%d0%bc%d1%8b/#comments</comments>
		<pubDate>Wed, 24 Mar 2010 19:41:31 +0000</pubDate>
		<dc:creator>Webmaster</dc:creator>
				<category><![CDATA[СSS приколы]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=118</guid>
		<description><![CDATA[Задача
Для формы сделать резиновую (тянущуюся) кнопку по ширине с особым оформлением (с обычным оформлением уверен у тебя проблем не возникает).
Схема резиновой кнопки

Требования:

ширина кнопки зависит от текста в ней;
использование тега &#60;input&#62; (чтобы сохранить логичность кода. Как сделать с &#60;button&#62;, пока не нашел решения);
кликабильность всей поверхности кнопк;
отсутствие javascript (еще одна причина использовать &#60;input&#62;);
ну и конечно же кроссбраузерность [...]]]></description>
			<content:encoded><![CDATA[<h4>Задача</h4>
<p>Для формы сделать резиновую (тянущуюся) кнопку по ширине с особым оформлением (с обычным оформлением уверен у тебя проблем не возникает).<br />
Схема резиновой кнопки<img class="aligncenter size-full wp-image-132" title="rubber-button-schem" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/03/rubber-button-schem1.png" alt="rubber-button-schem" width="400" height="200" /></p>
<p><span id="more-118"></span></p>
<p>Требования:</p>
<ul>
<li>ширина кнопки зависит от текста в ней;</li>
<li>использование тега &lt;input&gt; (чтобы сохранить логичность кода. Как сделать с &lt;button&gt;, пока не нашел решения);</li>
<li>кликабильность всей поверхности кнопк;</li>
<li>отсутствие javascript (еще одна причина использовать &lt;input&gt;);</li>
<li>ну и конечно же кроссбраузерность и следование стандартам.</li>
</ul>
<h4>На кой это нужно?</h4>
<p>На сайте может быть много форм, а на крупных сайтах — очень много. Каждая форма как правило имеет кнопку. И бывает так, что в разных формах текст в кнопке должен быть разным: ok, сохранить, задать вопрос менеджеру и т.п. Чтобы не плодить для каждой формы отдельный фон для кнопки, лучше сделать одну универсальную кнопку. Это не только съекономит трафик за счет сокращения картинок, но и сделает верстку более гибкой (не нужно будет каждой новой кнопке с отличающимся текстом рисовать новый фон и добавлять классы).</p>
<h4>Решение</h4>
<p>Воспользуемся следующим приемом:<br />
Схема приема реализации резиновой кнопки<img class="aligncenter size-full wp-image-134" title="rubber-button-trick" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/03/rubber-button-trick2.png" alt="rubber-button-trick" width="400" height="300" /></p>
<p>HTML:</p>
<blockquote>
<pre>&lt;div&gt;
&lt;input type="submit" value="" /&gt;текст кнопки
&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;</pre>
</blockquote>
<p>CSS:</p>
<blockquote>
<pre>.button {
color: #fff; /* цвет текста кнопки */
height: 23px; /* высота кнопки */
padding: 5px 6px 0 6px; /* внутренние отступы кнопки */
background: url(path-to/button.png) no-repeat; /* длинная картинка - левая часть фона кнопки */
font-size: 11px; /* размер шрифта кнопки */
float: left; /* чтобы ширина блока зависела от содержимого */
position: relative;
overflow: hidden;
}
.button span {
background: url(path-to/button-r.png); /* фон правой части кнопки */
height: 27px;
width: 6px;
display: block;
position: absolute;
z-index: 1; /* обязательно указываем z-слой, чтобы input был выше */
top: 0;
right: 0;
overflow: hidden;
}
.button input {
position: absolute; /* абсолютно размещаем input поверх остальных элементов */
top: 0;
left: 0;
width: 100%; /* input должен занимать всю область по высоте и ширине, чтобы вся кнопка была кликабильной */
height: 100%;
opacity: 0; /* делаем кнопку полностью прозрачной, чтобы она не искажала задуманный дизайн, но была функционирующей */
cursor: pointer;
border: none;
z-index: 2; /* z-слой должен быть больше, чем у других частей кнопки */
}
* html .button {
height: 27px; /* учитываем блочную модель ие6 */
}
* html .button input {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* прозрачность для ие6 */
}
.button span {
right: -1px; /* тут правильней было б использовать expression для лечения смещений в 1px в ие6 */
}</pre>
</blockquote>
<p>Заметки</p>
<ul>
<li>В боевых условиях вместо хаков для IE6 следует использовать условные комментарии</li>
<li>для уменьшения количества отдельных картинок, можно воспользоваться техникой спрайтов — склеить картинки в одну:</li>
</ul>
<p>Спрайты для резиновой кнопки<img class="aligncenter size-full wp-image-136" title="rubber-button-sprite" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2010/03/rubber-button-sprite3.png" alt="rubber-button-sprite" width="157" height="60" /></p>
<p style="text-align: right;">Взято с:<a href="http://www.xiper.net/html-and-css-tricks/verstka-form/rubber-button.html"> http://www.xiper.net/html-and-css-tricks/verstka-form/rubber-button.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%a1ss-%d0%bf%d1%80%d0%b8%d0%ba%d0%be%d0%bb%d1%8b/%d0%a0%d0%b5%d0%b7%d0%b8%d0%bd%d0%be%d0%b2%d0%b0%d1%8f-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b0-%d0%b4%d0%bb%d1%8f-%d1%84%d0%be%d1%80%d0%bc%d1%8b/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Чем мы можем Вам помочь?</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/%d0%a7%d0%b5%d0%bc-%d0%bc%d1%8b-%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%92%d0%b0%d0%bc-%d0%bf%d0%be%d0%bc%d0%be%d1%87%d1%8c/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/%d0%a7%d0%b5%d0%bc-%d0%bc%d1%8b-%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%92%d0%b0%d0%bc-%d0%bf%d0%be%d0%bc%d0%be%d1%87%d1%8c/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 16:16:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Без рубрики]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=115</guid>
		<description><![CDATA[
Создание корпоративных сайтов;
Создание промо-сайтов;
Проведение медийных рекламных кампаний в Интернете;
Разработка и доработка фирменных стилей;
Создание флеш-презентаций;
Другие направления в дизайне: 3D, мультимедия, видео;
Локализация и доработка сайтов любого уровня сложности;
Поисковая оптимизация сайтов;
Хостинг и техническая поддержка сайтов на собственных серверах.

]]></description>
			<content:encoded><![CDATA[<ul>
<li>Создание корпоративных сайтов;</li>
<li>Создание промо-сайтов;</li>
<li>Проведение медийных рекламных кампаний в Интернете;</li>
<li>Разработка и доработка фирменных стилей;</li>
<li>Создание флеш-презентаций;</li>
<li>Другие направления в дизайне: 3D, мультимедия, видео;</li>
<li>Локализация и доработка сайтов любого уровня сложности;</li>
<li>Поисковая оптимизация сайтов;</li>
<li>Хостинг и техническая поддержка сайтов на собственных серверах.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/%d0%a7%d0%b5%d0%bc-%d0%bc%d1%8b-%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%92%d0%b0%d0%bc-%d0%bf%d0%be%d0%bc%d0%be%d1%87%d1%8c/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Как веб-дизайн катится прямо в ад</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%9f%d1%80%d0%be%d0%b4%d0%b0%d0%b6%d1%8b/%d0%9a%d0%b0%d0%ba-%d0%b2%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd-%d0%ba%d0%b0%d1%82%d0%b8%d1%82%d1%81%d1%8f-%d0%bf%d1%80%d1%8f%d0%bc%d0%be-%d0%b2-%d0%b0%d0%b4/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%9f%d1%80%d0%be%d0%b4%d0%b0%d0%b6%d1%8b/%d0%9a%d0%b0%d0%ba-%d0%b2%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd-%d0%ba%d0%b0%d1%82%d0%b8%d1%82%d1%81%d1%8f-%d0%bf%d1%80%d1%8f%d0%bc%d0%be-%d0%b2-%d0%b0%d0%b4/#comments</comments>
		<pubDate>Thu, 24 Dec 2009 19:31:23 +0000</pubDate>
		<dc:creator>Webmaster</dc:creator>
				<category><![CDATA[Продажы]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=65</guid>
		<description><![CDATA[


Статья взята с  http://ibigdan.livejournal.com
]]></description>
			<content:encoded><![CDATA[<p style="text-align: right;"><img class="aligncenter size-full wp-image-89" title="1" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/14.png" alt="1" width="687" height="413" /><span id="more-65"></span><br />
<img class="aligncenter size-full wp-image-90" title="2" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/23.png" alt="2" width="669" height="520" /><br />
<img class="aligncenter size-full wp-image-91" title="3" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/33.png" alt="3" width="644" height="728" /><img class="aligncenter size-full wp-image-92" title="4" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/43.png" alt="4" width="600" height="399" /><img class="aligncenter size-full wp-image-96" title="4" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/44.png" alt="4" width="600" height="399" /><img class="aligncenter size-full wp-image-97" title="5" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/52.png" alt="5" width="595" height="361" /><img class="aligncenter size-full wp-image-98" title="8" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/82.png" alt="8" width="628" height="492" /><img class="aligncenter size-full wp-image-99" title="9" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/92.png" alt="9" width="662" height="741" /><br />
Статья взята с <a class="alignright" href="http://ibigdan.livejournal.com/5815515.html" target="_blank"> http://ibigdan.livejournal.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%9f%d1%80%d0%be%d0%b4%d0%b0%d0%b6%d1%8b/%d0%9a%d0%b0%d0%ba-%d0%b2%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd-%d0%ba%d0%b0%d1%82%d0%b8%d1%82%d1%81%d1%8f-%d0%bf%d1%80%d1%8f%d0%bc%d0%be-%d0%b2-%d0%b0%d0%b4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>12 типов клиентов. Как работать с каждым из них?</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%9f%d1%80%d0%be%d0%b4%d0%b0%d0%b6%d1%8b/12-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%9a%d0%b0%d0%ba-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%82%d1%8c-%d1%81-%d0%ba%d0%b0%d0%b6%d0%b4%d1%8b%d0%bc/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%9f%d1%80%d0%be%d0%b4%d0%b0%d0%b6%d1%8b/12-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%9a%d0%b0%d0%ba-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%82%d1%8c-%d1%81-%d0%ba%d0%b0%d0%b6%d0%b4%d1%8b%d0%bc/#comments</comments>
		<pubDate>Thu, 24 Dec 2009 19:14:02 +0000</pubDate>
		<dc:creator>Webmaster</dc:creator>
				<category><![CDATA[Продажы]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=35</guid>
		<description><![CDATA[Клиент-Чайник
Как его вычислить:
Выглядит озадаченным и дезориентированным, когда речь заходит о высоких технологиях, электронной почте предпочитает телефонные звонки, хочет, чтобы все бумаги отправляли ему факсом. Клиенту-Чайнику всё нужно объяснять два раза, но зато он с удовольствием принимает во внимание ваши советы.



Плюсы:
Во всем, что касается высоких технологий, Клиент-Чайник будет полагаться только на вашу глубочайшую мудрость. Он будет [...]]]></description>
			<content:encoded><![CDATA[<h2>Клиент-Чайник</h2>
<p><strong>Как его вычислить:</strong><br />
Выглядит озадаченным и дезориентированным, когда речь заходит о высоких технологиях, электронной почте предпочитает телефонные звонки, хочет, чтобы все бумаги отправляли ему факсом. Клиенту-Чайнику всё нужно объяснять два раза, но зато он с удовольствием принимает во внимание ваши советы.</p>
<p style="text-align: center;">
<div style="text-align: auto;"><span id="more-35"></span></div>
<p><img class="size-full wp-image-51 aligncenter" title="клиент-чайник" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_13.gif" alt="клиент-чайник" width="398" height="229" /></p>
<p><strong>Плюсы:</strong><br />
Во всем, что касается высоких технологий, Клиент-Чайник будет полагаться только на вашу глубочайшую мудрость. Он будет умоляюще смотреть на вас, как на спасителя, а его глубочайшее уважение к вашим знаниям отлично скажется на вашем самолюбии.</p>
<p><strong>Минусы:</strong><br />
Клиента-Чайника придется оберегать от всего — начиная с настройки e-mail заканчивая открытием документации в PDF формате. И конечно он будет страшно расстроен, если ему придется решать эти задачи самостоятельно. Представление Клиента-Чайника о том, как должен работать web-сайт, вряд ли произведут на вас хорошее впечатление.</p>
<p><strong>Как с ним работать:</strong><br />
Клиента-Чайника нужно носить на руках. Удостоверьтесь, что все формальности и технические детали, связанные с работой, сохранены в текстовой форме, чтобы клиент смог на досуге освежить в памяти эту информацию. Это сохранит ваше время и избавит вас от многократных объяснений. В ваших интересах также смириться с тем, что вы не будете использовать все эти технологические “навороты”, призванные облегчать современному человеку жизнь (e-mail, управление проектом в режиме online и т.п.). Вместо этого вам придется выделить отдельную статью в бюджете вашего времени на телефонные переговоры, получение факсов и личные встречи.</p>
<p>Очень легко начать (неумышленно, разумеется) относиться слегка снисходительно к вашему Клиенту-Чайнику. Это, как вы сами понимаете, может испортить ваши отношения, а возможно даже задеть чувства клиента. Внимательно следите за собой, чтобы не выходить за пределы игрового поля, и требуйте с клиента только ту информацию, которую он может вам дать — информацию из его области деятельности. Таким образом, клиент будет удовлетворен, и у него не появится желания интересоваться вашей областью знаний (что, разумеется, будет пустой тратой времени для вас обоих).</p>
<p>И наконец: если вы работаете в области высоких технологий, удостоверьтесь, что ваш Клиент-Чайник знает, как пользоваться созданным вами продуктом!</p>
<h2>Клиент-Пофигист</h2>
<p><strong>Как его вычислить:</strong><br />
Клиент-Пофигист — крайне загадочное существо. В то время как большинство клиентов крайне нетерпеливы и пытаются всячески посодействовать вам в работе, Пофигисту нужно, чтобы работа была выполнена с минимальным его участием. Опознать Клиента-Пофигиста можно уже при первой встрече, когда на ваши вопросы об области его деятельности следует минимальная ответная реакция. Такой клиент редко дает необходимую вам информацию или материалы, зато часто просит вас выполнить работу, находящуюся за областью вашей компетенции, объясняя это отсутствием у него времени.</p>
<p style="text-align: center;"><img class="size-full wp-image-52 aligncenter" title="клиент-пофигист" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_21.gif" alt="клиент-пофигист" width="398" height="229" /></p>
<p><strong>Плюсы: </strong><br />
Клиент-Пофигист предоставляет вам огромную свободу творчества, главным образом из-за своего нежелания участвовать в рабочем процессе. Его настойчивые требования “позаботиться об этом самому” расширят область ваших профессиональных навыков и научат работать со сторонними подрядчиками. Помимо этого вы получите незаменимый опыт работы, не имея нужных материалов и необходимой информации.</p>
<p><strong>Минусы:</strong><br />
Клиент-Пофигист заставит вас взять под свою ответственность всё — начиная с копирайтинга (если вы web-дизайнер), заканчивая дизайном (если вы копирайтер). К сожалению, такой клиент не всегда понимает, что подобный стиль работы и стоить будет соответствующе. Иногда в Пофигисте сочетаются его незаинтересованность и одновременное желание получить совершенно определенный, конкретный результат, что еще больше затрудняет взаимоотношения с таким клиентом.</p>
<p><strong>Как с ним работать:</strong><br />
Лучше с самого начала выработать определенный стиль работы с таким клиентом. Фрилансер должен быть настойчив и постоянно писать письма или звонить своему заказчику. Дружелюбный и слегка юмористичный тон станет вам отличным помощником. Клиент-Пофигист обычно не старается быть грубым или неприветливым, просто в большинстве случаев в момент общения с вами они переживают какой-нибудь стресс и взывают к вам о помощи. Следует быть твердым в своем утверждении, что дополнительная работа стоит дополнительных денег, и брать на себя дополнительные функции только в случае полной уверенности, что вы с ними справитесь сами или сможете подключить для этого третьих лиц.</p>
<p>Клиент-пофигист на самом деле очень хитрый клиент, но если вы хорошо о нем позаботитесь, в вашем распоряжении будет весьма лояльный заказчик, счастливый от мысли, что кто-то взялся за его бизнес. Просто будьте тверды в своих расценках и примите ворчание клиента по этому поводу как неизбежность.</p>
<h2>Клиент-Активист</h2>
<p><strong>Как его вычислить:</strong><br />
Клиент-Активист — это разочаровавшаяся творческая личность. Первое, что он сделает, вступив с вами в контакт, это расскажет о своем мастерстве актера, художника, фотографа или писателя. В его голове уже наверняка сложилось четкое представление (весьма специфическое, надо заметить) о том, что же он хочет получить в результате вашей работы, и его совершенно не интересует ваше мнение на этот счет.</p>
<p style="text-align: center;"><img class="size-full wp-image-53 aligncenter" title="Клиент-активист" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_31.gif" alt="Клиент-активист" width="398" height="229" /></p>
<p><strong>Плюсы: </strong><br />
Если вы готовы в точности выполнить требования клиента, независимо от того, что вы по этому поводу думаете, Клиент-Активист станет для вас хорошим источником небольшого дохода, а существующая почти всегда некоторая путаница относительно того, что именно клиент хочет видеть, позволит облегчить ваш труд.</p>
<p><strong>Минусы:</strong><br />
Если вы чувствуете, что несете моральную ответственность за явные недостатки, вызванные указаниями вашего Клиента-Активиста, вас неминуемо ожидает конфликт. Такие клиенты в душе считают, что они могли бы сделать вашу работу куда лучше вас, но для этого им не хватает той крупицы специальных знаний, которой вы владеете.</p>
<p>Однако если вы оставите свои амбиции и согласитесь выполнить всё в точности, как хочет клиент, вас может ждать еще один сюрприз. Неожиданно ваш Клиент-Активист обвинит вас в том, что вы переложили всю работу на его плечи и ничего не делаете сами. Дело может даже дойти до отказа оплатить работу. Понятное дело, что такое поведение приведет вас в бешенство.</p>
<p><strong>Как с ним работать:</strong><br />
Если вам попался Клиент-Активист, лучшее, что вы можете сделать — это плыть по течению. Если вы попытаетесь вступить с ним в бой, то, скорее всего, проиграете и получите работу гораздо сложнее, чем она должна была быть в начале. Если ваш Клиент-Активист точно знает, что он хочет — осознайте это и… флаг ему в руки!</p>
<p>Лучше сразу недвусмысленно объяснить такому клиенту, что с вашей точки зрения у него весьма своеобразное представление о том, что должно получиться в итоге, но если он хочет именно так, вы так и сделаете. Не забудьте уточнить при этом, что вашу работу вам будет проще выполнять без его деятельного участия.</p>
<h2>Клиент-Параноик</h2>
<p><strong>Как его вычислить:</strong><br />
Вы сразу же получаете официальные документы, тщательно проработанные и не содержащие ничего лишнего. Клиент-Параноик частенько даже не начинает обсуждение проекта, пока не подписаны соглашения о неразглашении и об оплате, отдающие вас полностью в распоряжение заказчика.</p>
<p style="text-align: center;"><img class="size-full wp-image-55 aligncenter" title="Клиент-параноик" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_42.gif" alt="Клиент-параноик" width="398" height="229" /></p>
<p><strong>Плюсы: </strong><br />
Если вы работаете с Клиентом-Параноиком, вы надежно защищены подписанными вами официальными соглашениями. Если вы не нарушите ни одного пункта подписанных договоров, будьте уверены, что вам заплатят за работу.</p>
<p><strong>Минусы:</strong><br />
Вы ДОЛЖНЫ добиться того, чтобы все соглашения были просмотрены юристом (причем не тем юристом, который работает на них). Как вы догадываетесь, это будет вам стоить приличных денег, которые клиент вероятнее всего не захочет вам предоставить. Часто среди документов можно найти полный список причин, по которым вас реально могут оставить без зарплаты. Одной из таких причин может стать превышение максимальных сроков выполнения работы (даже если в этом виноват ваш Клиент-Параноик).</p>
<p>Из собственного опыта могу сказать: Клиенты-Параноики приносят всегда кучу проблем. Это происходит потому, что они вечно ищут несуществующие доказательства того, что их собираются кинуть или просто ущемить их интересы. Само собой разумеется, что “кинутыми” можете остаться вы сами, тратя время на бумажную волокиту, вместо того чтобы выполнять работу.</p>
<p><strong>Как с ним работать:</strong><br />
Не стоит связываться с Клиентом-Параноиком, если речь идет о небольшой по объему и по стоимости работе. Риск слишком сильно превышает возможную выгоду. Правда, поскольку официальное оформление договоров — достаточно дорогостоящее предприятие, и клиент готов выложить за него кругленькую сумму, можно надеяться, что за работу он будет платить также хорошо.</p>
<p>Если же речь идет о глобальном проекте и серьезных клиентах, вы, скорее всего, будете рассматривать именно такой, официальный вариант общения с заказчиком. В этом случае будьте готовы включить в стоимость работ стоимость услуг юриста. Большинство компаний заключают официальные договоры с целью защитить себя любимых и свои проекты от возможных напастей. Но будьте внимательны! Некоторые Клиенты-Параноики используют официальные бумаги в захватнических целях. И запомните: раз уж Клиент-Параноик готов ради собственной безопасности платить больше, играйте по его правилам — оценивайте свою работу по максимуму!</p>
<h2>Благодарный Клиент</h2>
<p><strong>Как его вычислить:</strong><br />
Благодарный Клиент осыплет вас похвалами и заставит почувствовать, насколько вы важны для этого мира. Поверьте, это настоящее счастье!</p>
<p style="text-align: center;"><img class="size-full wp-image-56 aligncenter" title="Благодарный клиент" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_51.gif" alt="Благодарный клиент" width="398" height="229" /></p>
<p><strong>Плюсы: </strong><br />
Благодарный Клиент значительно облегчит вашу жизнь, поскольку, скорее всего, примет самую первую версию самого первого эскиза проекта, причем сочтет ее идеальной. Такой клиент всегда полон энтузиазма, поэтому работать с ним — одно удовольствие.</p>
<p>Даже если Благодарного Клиента что-то не устраивает в вашей работе, он выскажется об этом таким образом, что вам непременно захочется довести проект до идеального состояния.</p>
<p><strong>Минусы:</strong><br />
Впечатления от всех предыдущих клиентов значительно испортятся.</p>
<p><strong>Как с ним работать:</strong><br />
Расслабьтесь и получайте удовольствие (можете даже немножко похалтурить). Такой клиент — находка для фрилансера, поэтому постарайтесь выполнить свою работу на пять с плюсом, чтобы не разочаровать хорошего человека и дать ему возможность некоторое время побыть в роли VIP.</p>
<h2>Клиент-Коммерсант</h2>
<p><strong>Как его вычислить:</strong><br />
Клиент-Коммерсант — страшный жулик. Он считает, что названная вами цена за проект — это лишь отправная точка для переговоров. Вы поймете, что столкнулись с Клиентом-Коммерсантом, по постоянно изменяющейся цене и описанию работы. Очень часто в роли подобных клиентов выступают успешные предприниматели, которые в свое время “выторговали” себе богатство.</p>
<p style="text-align: center;"><img class="size-full wp-image-57 aligncenter" title="Клиент-коммерсант" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_61.gif" alt="Клиент-коммерсант" width="398" height="229" /></p>
<p><strong>Плюсы:</strong><br />
Клиенты-Коммерсанты любят дублировать исполнение работы. При этом у них всегда крутится несколько проектов одновременно. Поэтому таких клиентов проще убедить, что предоплата выгодна не только вам, но и им.</p>
<p><strong>Минусы:</strong><br />
Если у вас нет врожденной способности торговаться или вы не успели вовремя вычислить своего Клиента-Коммерсанта, у вас может сложиться ощущение, что все пока что идет в ваших интересах, в то время как на самом деле все “сливки” будет собирать ваш заказчик. Клиент-Коммерсант по природе своей достаточно неэтичен и действует по принципу “попытка не пытка”, так что вы, вероятно, столкнетесь со стремлением не заплатить вам или уговорить на дополнительную работу или скидку.</p>
<p><strong>Как с ним работать:</strong><br />
Имея дело с Клиентом-Коммерсантом, всегда помните: “Клин клином вышибают”. Действуя методами заказчика, вы ослабляете его — и тогда можете быть уверенны, что сделка будет для вас выгодной. Что это означает? Назначайте максимально высокую цену, а потом сбивайте её, но будьте настойчивы, обсуждая вопросы оплаты и объемов работы.</p>
<h2>Невнятный Клиент</h2>
<p><strong>Как его вычислить:</strong><br />
Невнятный Клиент в некотором роде похож на Клиента-Пофигиста, только этот случай еще более запущенный. Его нерешительность и неспособность четко сформулировать, что же он хочет в конце концов получить, ставят его в ряд клиентов, которых лучше вообще избегать.</p>
<p style="text-align: center;"><img class="size-full wp-image-58 aligncenter" title="Невнятный клиент" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_71.gif" alt="Невнятный клиент" width="398" height="229" /></p>
<p><strong>Плюсы:</strong><br />
Если вам удастся найти такое решение проблемы, про которое он скажет “Вот оно!”, знайте — клиент в ваших руках. В этом случае Невнятный Клиент превратится в крайне благодарного и доверчивого заказчика, который безумно рад, что нашел своего единомышленника.</p>
<p><strong>Минусы:</strong><br />
Если вы не можете найти “то самое” решение, клиент расстроится и обидится, что вы так сильно раздували бюджет и сроки проекта.</p>
<p>Чтобы еще больше все усложнить, Невнятный Клиент впадет в панику, когда вам не удастся волшебным образом с первого раза представить ему то, что нужно. Это может привести к мягко говоря напряженным взаимоотношениям и провалу проекта.</p>
<p><strong>Как с ним работать:</strong><br />
Чтобы нормально работать с Невнятным Клиентом, вам необходимо помнить две вещи.</p>
<p>Во-первых, четко объясняйте, сколько стоит каждое внесенное в проект изменение. Если вы этого не сделаете, вы просто потеряете и время, и деньги.<br />
Во-вторых, если вы сразу не можете воспроизвести то, что нужно заказчику, начните с реализации “приблизительного” проекта.</p>
<h2>Неотложный Клиент</h2>
<p><strong>Как его вычислить:</strong><br />
Все его электронные письма помечены как особо важные. Его агенты вечно заняты делом. Сам Неотложный Клиент работает до позднего вечера и даже в выходные дни. Более того, считает, что и все должны так же работать. Плюс ко всему, он думает, что он ваш единственный клиент, и выполнение его заданий должно стоять <em>у вас</em> (впрочем, как и у него) на первом месте.</p>
<p style="text-align: center;"><img class="size-full wp-image-59 aligncenter" title="Неотложный клиент" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_81.gif" alt="Неотложный клиент" width="398" height="229" /></p>
<p><strong>Плюсы: </strong><br />
Поскольку нет никакой возможности продлить срок сдачи проекта, Неотложный клиент примет вашу работу довольно быстро. У него никогда нет времени обсуждать оплату, поэтому вы быстро придете к соглашению относительно стоимости работ. Неотложный Клиент обычно знает, когда установленная вами цена необоснованно высока. Он постарается оплатить вашу работу как можно быстрее, что, в общем-то, хорошо влияет на оборот ваших денежных средств.</p>
<p><strong>Минусы:</strong><br />
Неотложный Клиент — это дополнительная головная боль. Если вы собираетесь сохранить с ним нормальные отношения, возможно, вам придется работать по ночам или по выходным. Вы также можете подвергнуться полуночным телефонным звонкам, невозмутимым требованиям сверстать web-сайт, нащёлкать скриншотов и сделать детальные иллюстрации и вопросам типа: “За пару часов управитесь?”.</p>
<p><strong>Как с ним работать:</strong><br />
Терпеть Настойчивого Клиента нужно “до первых слёз” — то есть, пока вы не поймете, что всё бесполезно, и что отношения с этим человеком мешают вам и другим вашим клиентам. Настойчивым Клиентам стоит недвусмысленно указывать на неразумность некоторых их требований, причем делать это нужно с самого начала. Ну и как всегда нужно сохранять чувство юмора и некоторую беспечность, чтобы разряжать обстановку, потому что в противном случае у вас есть шанс сорваться на агрессию.</p>
<p>Неотложный Клиент похож на Клиента-Пофигиста в том смысле, что они оба требуют усиленной заботы. Имеет смысл разыскать Настойчивого Клиента, когда вы чувствуете, что работа уже почти готова. Это позволит вам выиграть дополнительное время и, как и в случае с Пофигистом, особое внимание к клиенту повлечет за собой большую лояльность по отношению к вам.</p>
<p>А теперь предупреждение. Старайтесь не заводить сразу несколько Неотложных Клиентов, потому что это приведет к жестким стрессовым ситуациям — ведь всё надо сделать сейчас! сейчас! сейчас! Так что если вы не гипнотизер, советую вам строго ограничить общение с этим типом клиентов.</p>
<h2>Клиент-Коллективист</h2>
<p><strong>Как его вычислить:</strong><br />
Этот тип населяет обычно мир больших корпоративных клиентов. Однако Клиента-Коллективиста можно обнаружить и среди мелких заказчиков — такому всегда необходимо чье-нибудь участие в принятии решения (жены, соседа, собаки…). Коллективист не является авторитетом даже для самого себя, поэтому прежде чем принять решение, нужно, чтобы его обязательно одобрило несколько человек.</p>
<p style="text-align: center;"><img class="size-full wp-image-60 aligncenter" title="Клиент-колллективист" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_91.gif" alt="Клиент-колллективист" width="398" height="229" /></p>
<p><strong>Плюсы:</strong><br />
Поскольку у Клиента-Коллективиста может не быть человека, способного принимать твёрдые решения, у вас появляется возможность сделать всё так, как вы считаете нужным, а потом просто “протащить” полученный результат. Но будьте осторожны — такое поведение может иметь неприятные последствия.</p>
<p><strong>Минусы:</strong><br />
Худшее из проявлений Клиента-Коллективиста — это то, что работа с ним идет мучительно долго, а поскольку вряд ли найдется человек, который сможет долго это выносить, вам грозит не самое удачное завершение вашего проекта. Клиент-Коллективист почти всегда пытается все причесать под одну гребенку. Если среди таких заказчиков есть один человек, который называет себя “главным”, поверьте, это обязательно будет такая личность, которой просто противопоказано руководить.</p>
<p><strong>Как с ним работать:</strong><br />
К сожалению, Клиенты-Коллективисты — это правда жизни, особенно когда приходится работать с крупными корпоративными клиентами. Очень важно быть всегда на высоте, когда имеешь дело с “крутыми парнями”.</p>
<p>Будьте решительны и старайтесь как можно быстрее выявить наиболее влиятельных представителей коллектива. Задавайте вопросы именно им, когда будете пытаться расположить их к себе, как к исполнителю, при этом избегайте упоминания о своих слабых сторонах. И еще, в битве за проект не стоит приберегать свое главное оружие на финал — бейте из него сразу же!</p>
<h2>Клиент-Тряпка</h2>
<p><strong>Как его вычислить:</strong><br />
Клиент-Тряпка легко со всем смиряется и редко напоминает о своем существовании. Он обычно очень скромный и, кажется, готов ждать от вас известий хоть сто лет, чтобы принять вашу более чем несовершенную работу.</p>
<p style="text-align: center;"><img class="size-full wp-image-61 aligncenter" title="Клиент-тряпка" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_101.gif" alt="Клиент-тряпка" width="398" height="229" /></p>
<p><strong>Плюсы:</strong><br />
Клиент-Тряпка в большинстве случаев останется вам благодарен, что всегда приятно. Ну и конечно клиент, которого не напрягает процесс ожидания — это дополнительное облегчение в работе.</p>
<p><strong>Минусы:</strong><br />
Клиенты-Тряпки позволяют выявить все худшие стороны фрилансера. Не имея за спиной пристального взгляда злобного клиента, исполнитель может “забить” на проект, наслаждаясь преимуществами работы с пассивным клиентом.</p>
<p><strong>Как с ним работать:</strong><br />
Клиент-Тряпка требует хорошей дисциплины, чтобы не выходить за временные рамки и контролировать результат работы. Если ваш клиент не в состоянии этого обеспечить, вам придется следить за собой самостоятельно.</p>
<p>Несмотря на то, что в некоторых случаях, когда происходят какие-то “запарки”, можно воспользоваться великодушием такого заказчика, не забывайте, что так же, как и с любым другим клиентом, необходимо сделать все возможное, чтобы он остался доволен.</p>
<h2>Малобюджетный Клиент</h2>
<p><strong>Как его вычислить:</strong><br />
Бюджет любого клиента ограничен какими-то рамками, но у некоторых эти рамки особенно узкие. Малобюджетный Клиент является обычно следствием вашего желания помочь друзьям или родственникам. Это, правда, может быть и обычный заказчик, не обладающий собственной наличкой.</p>
<p style="text-align: center;"><img class="size-full wp-image-62 aligncenter" title="Малобюджетный клиент" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_111.gif" alt="Малобюджетный клиент" width="398" height="229" /></p>
<p><strong>Плюсы:</strong><br />
Малобюджетные Клиенты могут быть благодарны вам за хорошую работу и за её низкую стоимость. А могут и не быть…</p>
<p><strong>Минусы:</strong><br />
Малобюджетный Клиент платит мало, а качество сервиса требует такое же, как его более щедрые коллеги. Такие заказчики напрягают и совершенно не подходят для нормального бизнеса.</p>
<p>Но хуже всего, когда у Малобюджетного Клиента обнаруживаются качества Неотложного Клиента или Клиента-Параноика. Лучше с таким вообще не связываться.</p>
<p><strong>Как с ним работать:</strong><br />
Удостоверьтесь, что ваш Малобюджетный Клиент осознает, что вследствие своей малобюджетности его работа не может стоять для вас на первом месте и что вы не будет вносить в проект дополнительные изменения, потому что для вас это не выгодно. Если клиент начинает проявлять агрессивность или другие неблаговидные качества, признайтесь себе, что он этого не стоит, и отпустите его с миром…</p>
<h2>Клиент “Ваше счастье”</h2>
<p><strong>Как его вычислить:</strong><br />
Клиент “Ваше счастье” на самом деле гораздо круче вас, и он это знает. У него для вас есть просто офигенный (пусть и дешевый) проект в такой сфере, где, по мнению Клиента, каждый мечтает работать — музыка, кино или мир моды, например.</p>
<p style="text-align: center;"><img class="size-full wp-image-63 aligncenter" title="Ваше счастье" src="http://www.webcreator.kiev.ua/lib/wp-content/uploads/2009/12/klient_121.gif" alt="Ваше счастье" width="398" height="229" /></p>
<p><strong>Плюсы: </strong><br />
Проект этого клиента станет хорошим пунктом в вашем портфолио, и все ваши друзья будут считать вас нереально крутым. Вы наверняка наладите пару полезных контактов и весьма вероятно, что доверие к вам, как к специалисту, возрастет. Плюс ко всему, общение с “крутыми пацанами” — это неплохая школа жизни.</p>
<p><strong>Минусы:</strong><br />
На хорошую оплату можете не рассчитывать. Клиент “Ваше счастье” будет работать с вами так, как будто это <em>он</em> делает вам одолжение, а не вы ему. После нескольких проектов, выполненных для такого рода клиентов, в вас разовьется стойкое ощущение неуважения к вашим усилиям и вас станет откровенно поташнивать от сферы их деятельности.</p>
<p><strong>Как с ним работать:</strong><br />
Клиент “Ваше счастье” может сделать ценный вклад в ваше портфолио, и это единственная причина работать на него. Все хотят получить такую работу, пока в один прекрасный день не получат её. А потому существует огромное множество “зеленых” фрилансеров, готовых браться за такие проекты почти бесплатно. Если вы студент, это отличный вариант для вас. Но если вы бывалый фрилансер, такая работа может нанести удар по вашему заработку. Так что выбирайте таких клиентов тщательно и либо используйте их по назначению (чтобы расширить свое портфолио), либо забудьте о них раз и навсегда. И последнее: прежде чем начать переговоры с Клиентом “Ваше счастье”, убедитесь, что вам действительно нравится быть крутым.</p>
<p>Ну вот и все. Никого не забыли?<br />
А какой клиент больше всего нравится вам? Не стесняйтесь, пишите о других типах клиентов в комментариях.</p>
<p style="text-align: right;">Статья взята с <a href="http://www.freelance-fm.ru/archives/141" target="_blank"> http://www.freelance-fm.ru/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%9f%d1%80%d0%be%d0%b4%d0%b0%d0%b6%d1%8b/12-%d1%82%d0%b8%d0%bf%d0%be%d0%b2-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%9a%d0%b0%d0%ba-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%82%d1%8c-%d1%81-%d0%ba%d0%b0%d0%b6%d0%b4%d1%8b%d0%bc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Пишем свой Framework</title>
		<link>http://www.webcreator.kiev.ua/lib/php/%d0%9f%d0%b8%d1%88%d0%b5%d0%bc-%d1%81%d0%b2%d0%be%d0%b9-framework/</link>
		<comments>http://www.webcreator.kiev.ua/lib/php/%d0%9f%d0%b8%d1%88%d0%b5%d0%bc-%d1%81%d0%b2%d0%be%d0%b9-framework/#comments</comments>
		<pubDate>Thu, 24 Sep 2009 13:28:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=33</guid>
		<description><![CDATA[Пишем свой Framework

Для начинающих «велосипедистов» иль просто любопытствующих…

Данная статья не призыв к действию, а лишь небольшая зарисовка на тему «Как бы я это сделал». На данный момент у меня в отделе активно используется Zend Framework, и именно с ним я лучше всего знаком, поэтому не пугайтесь параллелей, это не реклама, ведь большинство фреймворков в равной [...]]]></description>
			<content:encoded><![CDATA[<h2><span title="http://habrahabr.ru/blogs/php/68093/">Пишем свой Framework</span></h2>
<p><!-- Тело записи --><img title="PHP Frameworks" src="http://anton.shevchuk.name/wp-content/uploads/2009/08/php.frameworks.png" alt="PHP Frameworks" /><br />
Для начинающих «велосипедистов» иль просто любопытствующих…</p>
<p><a name="habracut"></a></p>
<p>Данная статья не призыв к действию, а лишь небольшая зарисовка на тему «Как бы я это сделал». На данный момент у меня в отделе активно используется Zend Framework, и именно с ним я лучше всего знаком, поэтому не пугайтесь параллелей, это не реклама, ведь большинство фреймворков в равной степени сочетают в себе плюсы и минусы, а нам нужны лишь преимущества…<br />
<span id="more-33"></span></p>
<h3>Правила</h3>
<p>Начал бы с регламентирования правил:</p>
<ul>
<li>Стандарты кодирования — лучше воспользоваться существующими, советую <a href="http://framework.zend.com/manual/en/doc-standard.html">стандарты Zend Framework&#8217;а</a></li>
<li>Процесс добавления кода в репозиторий (даже если вы сами в проекте — это будет хорошо дисциплинировать), только не перегибайте палку, иначе это замедлит развитие проекта</li>
</ul>
<p>Не выработав данных правил, вы рискуете превратить фреймворк в помойку. Так же, настоятельно рекомендую писать юнит тесты — они помогут сэкономить уйму времени.</p>
<h3>Архитектура</h3>
<p>Надеюсь большинство читателей уже знакома с патерном MVC (<a href="http://ru.wikipedia.org/wiki/Model-View-Controller">Model-View-Controller</a>) — так давайте на нем и базировать наш фреймворк, использования чего-то иного, боюсь, будет отпугивать пользователей (тут я подразумеваю программистов <img src='http://www.webcreator.kiev.ua/lib/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ).</p>
<h4>Model</h4>
<p>В типовом проекте модель завязывается на одну таблицу в базе данных, но исключений хватает, поэтому не следует принимать данное утверждение за аксиому. Наша модель должна с легкостью работать с различными хранилищами данных, будь то БД, файлы, или память.</p>
<p>Давайте представим как может выглядеть модель:</p>
<blockquote><p><span style="color: #666666;">// модель User использует в качестве хранилища БД</span><br />
<span style="color: #000000;">class</span> Model_User <span style="color: #000000;">extends</span> Framework_Model_Database<br />
<span style="color: #009900;">{</span><br />
<span style="color: #000088;">$_table</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&laquo;users&raquo;</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$_pkey</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&laquo;id&raquo;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #000000;">function</span> getByLogin<span style="color: #009900;">(</span><span style="color: #000088;">$login</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #000000;">function</span> getByEmail<span style="color: #009900;">(</span><span style="color: #000088;">$email</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span></p>
<p><span style="color: #666666;">// модель MainConfig использует в качестве хранилища ini файл</span><br />
<span style="color: #000000;">class</span> Model_MainConfig <span style="color: #000000;">extends</span> Framework_Model_Ini<br />
<span style="color: #009900;">{</span><br />
protected <span style="color: #000088;">$_file</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&laquo;application.ini&raquo;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #000000;">function</span> setOption<span style="color: #009900;">(</span><span style="color: #000088;">$key</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #000000;">function</span> getOption<span style="color: #009900;">(</span><span style="color: #000088;">$key</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span></p>
<p><span style="color: #666666;">// модель Registry использует в качестве хранилища память - некая альтернатива глобальным переменным</span><br />
<span style="color: #000000;">class</span> Model_Registry <span style="color: #000000;">extends</span> Framework_Model_Memory<br />
<span style="color: #009900;">{</span><br />
<span style="color: #000000;">function</span> setOption<span style="color: #009900;">(</span><span style="color: #000088;">$key</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #000000;">function</span> getOption<span style="color: #009900;">(</span><span style="color: #000088;">$key</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span></p>
<p><span style="color: #666666;">// модель Session использует в качестве хранилища файлы сессии</span><br />
<span style="color: #000000;">class</span> Model_Session <span style="color: #000000;">extends</span> Framework_Model_Session<br />
<span style="color: #009900;">{</span><br />
protected <span style="color: #000088;">$_namespace</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&laquo;global&raquo;</span><span style="color: #339933;">;</span></p>
<p><span style="color: #000000;">function</span> setOption<span style="color: #009900;">(</span><span style="color: #000088;">$key</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #000000;">function</span> getOption<span style="color: #009900;">(</span><span style="color: #000088;">$key</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666;">/*&#8230;*/</span> <span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span></p></blockquote>
<blockquote><p><em>В действительности такими примерами я сильно коверкаю представление о MVC — ведь зачастую под моделью подразумевают некую бизнес модель, но никак не сессию или конфигурационный файл.</em></p></blockquote>
<h4>View</h4>
<p>Каковы нынче требования к шаблонизатору? Лично для меня нативный PHP синтаксис, поддержка различного рода хелперов и фильтров. Так же должен быть реализован паттерн «двухэтапного представления» (Two Step View pattern), в ZF для этого служат два компонента — <a href="http://framework.zend.com/manual/ru/zend.view.html">Zend_View</a> и <a href="http://framework.zend.com/manual/ru/zend.layout.html">Zend_Layout</a>.</p>
<p>Приведу пример такого представления:</p>
<blockquote><p><span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">books</span><span style="color: #009900;">)</span><span style="color: #339933;">:</span> <span style="color: #000000;">?&gt;</span><br />
&lt;!&#8211; Таблица из нескольких книг. &#8211;&gt;<br />
&lt;table&gt;<br />
&lt;tr&gt;<br />
&lt;th&gt;Author&lt;/th&gt;<br />
&lt;th&gt;Title&lt;/th&gt;<br />
&lt;/tr&gt;<br />
<span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">(</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">books</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$val</span><span style="color: #009900;">)</span><span style="color: #339933;">:</span> <span style="color: #000000;">?&gt;</span><br />
&lt;tr&gt;<br />
&lt;td&gt;<span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">escape</span><span style="color: #009900;">(</span><span style="color: #000088;">$val</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'author'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span> <span style="color: #000000;">?&gt;</span>&lt;/td&gt;<br />
&lt;td&gt;<span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">escape</span><span style="color: #009900;">(</span><span style="color: #000088;">$val</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'title'</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span> <span style="color: #000000;">?&gt;</span>&lt;/td&gt;<br />
&lt;/tr&gt;<br />
<span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">endforeach</span><span style="color: #339933;">;</span> <span style="color: #000000;">?&gt;</span><br />
&lt;/table&gt;<br />
<span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">else</span><span style="color: #339933;">:</span> <span style="color: #000000;">?&gt;</span><br />
&lt;p&gt;Нет книг для отображения.&lt;/p&gt;<br />
<span style="color: #000000;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000;">?&gt;</span></p></blockquote>
<p>Пример использование layout&#8217;ов (взят из документации по Zend_Layout):</p>
<p><img title="Layout Example" src="http://anton.shevchuk.name/wp-content/uploads/2009/08/layout.example.png" alt="Layout Example" /></p>
<blockquote><p><em>О да, в Zend Framework&#8217;е удачная реализация представления, она мне нравится, конечно, не без мелких нареканий, но в целом — это пять.</em></p></blockquote>
<h4>Controller</h4>
<p>Контроллер должен выполнять свои обязанности — обрабатывать запрос, пинать модель и представление — дабы пользователь получил желаемый результат.</p>
<p>Давайте попробуем среагировать на запрос пользователя следующего вида: <code><a href="http://example.com/?controller=users&amp;action=profile&amp;id=16">example.com/?controller=users&amp;action=profile&amp;id=16</a></code></p>
<p>Так, проведем разбор — у нас просят показать профайл пользователя с id=16. Соответственно напрашивается существование контроллера users с методом profile, который бы смог получить в качестве параметра некий id:</p>
<blockquote><p><span style="color: #666666;">// название контроллера должно содержать префикс - дабы чего не напутать</span><br />
<span style="color: #000000;">class</span> Controller_Users <span style="color: #000000;">extends</span> Framework_Controller_Action<br />
<span style="color: #009900;">{</span><br />
<span style="color: #000000;">public</span> <span style="color: #000000;">function</span> actionProfile<span style="color: #009900;">(</span><span style="color: #009900;">)</span><br />
<span style="color: #009900;">{</span><br />
<span style="color: #666666;">// получаем данные из запроса</span><br />
<span style="color: #000088;">$id</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">request</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get</span><span style="color: #009900;">(</span><span style="color: #0000ff;">&#8216;id&#8217;</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></p>
<p><span style="color: #666666;">// пинаем модель</span><br />
<span style="color: #000088;">$user</span> <span style="color: #339933;">=</span> <span style="color: #000000;">new</span> Model_User<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$user</span> <span style="color: #339933;">-&gt;</span> <span style="color: #004000;">getById</span><span style="color: #009900;">(</span><span style="color: #000088;">$id</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></p>
<p><span style="color: #666666;">// закидываем данные в представление</span><br />
<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">view</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">user</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$user</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span></p></blockquote>
<p>Естественно, на плечи контроллера так же ложится обязанность изменять формат представление, т.е. если нам надо вернуть данные в JSON формате, то никакого иного вывода быть не должно (это и так подразумевается самим MVC, но стоит лишний раз напомнить).</p>
<blockquote><p><em>Кто повнимательней увидит в данном примере появление некого Request&#8217;a — это объект который занимается разбором входящего запроса. Зачем он нужен — об этом чуть далее.</em></p></blockquote>
<h4>Routers</h4>
<p>Теперь немного о требованиях со стороны конечных пользователей — в частности о <a href="http://ru.wikipedia.org/wiki/%D0%A7%D0%9F%D0%A3_%28%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%29">ЧПУ</a>. Сравните следующие варианты ссылок:</p>
<p><code><a href="http://example.com/?controller=users&amp;action=profile&amp;id=16">example.com/?controller=users&amp;action=profile&amp;id=16</a><br />
<a href="http://example.com/users/profile/id/16/">example.com/users/profile/id/16/</a> // стандартная схема построения URL'a в ZF<br />
<a href="http://example.com/users/profile/16/">example.com/users/profile/16/</a> // CodeIgniter<br />
<a href="http://example.com/profile/16/">example.com/profile/16/</a> // возможное пожелание заказчика, и его нужно выполнять<br />
</code></p>
<p>Для генерации/разбора подобного входящего запроса в ZF используются роутеры — по факту — это правила построения URL&#8217;ов, нам так же придется их реализовать — и с этим сложно поспорить.</p>
<blockquote><p><em>Мне больше по душе передача именнованых параметров — такой URL легче читаем, сравните:<br />
<code><a href="http://example.com/users/list/page/2/limit/20/filter/active">example.com/users/list/page/2/limit/20/filter/active</a></code><br />
и<br />
<code><a href="http://example.com/users/list/2/20/active">example.com/users/list/2/20/active</a></code></em></p></blockquote>
<blockquote><p><em>Вы наверное захотите сразу засунуть данный функционал непосредственно в класс Request, но не спешите, ведь нам еще потребуется генерировать правильные URL во View — а вызывать там объект Request — немного не логично, давайте таки оставим это на совести отдельного класса, к которому может обращаться как Request так и View</em></p></blockquote>
<h4>Request &amp; Response</h4>
<p>С назначением класса Request думаю проблем не возникает — в его функции входит не так много:</p>
<ul>
<li>обработка входящих параметров всеми правилами из Router&#8217;а</li>
<li>отдавать параметры в контроллер по требованию</li>
</ul>
<p>Но есть еще Response — о нем я как то не упоминал ранее, что же он должен делать:</p>
<ul>
<li>формировать заголовок ответа</li>
<li>формировать ответ — т.е. брать view, оборачивать в некий layout и на выход</li>
</ul>
<blockquote><p><em>Мне не очень нравится реализация Response в ZF — слишком много лишнего в нем</em></p></blockquote>
<h4>Modules</h4>
<p>Фреймворк должен быть модульным, т.е. написав какой-то модуль (блог, форум, и т.д.) вы сможете с легкостью использовать данный код в других приложениях. Для этого нам понадобится лишь отделить MVC каждого модуля в свою директорию, при этом какой-то модуль останется за главного.</p>
<h4>Core</h4>
<p>Теперь стоит перейти к самому вкусному — непосредственно к ядру системы, его функционал мы практически уже описали, стоит лишь подвести черту:</p>
<ol>
<li>При инициализации входящий запрос должен быть обработан всеми правилами Router&#8217;ов, дабы объект Request мог вернуть нам запрашиваемое значение по ключу</li>
<li>Объект Request так же должен знать, какой модуль/контроллер/экшен запрашивается</li>
<li>Ядро должно подгрузить необходимый контроллер и вызвать запрашиваемый экшен (метод контроллера)</li>
<li>После отработки контроллера вызывается Response и ставит точку</li>
</ol>
<p>Для гибкости в систему стоит добавить либо хуки, либо плагины на каждый из перечисленных этапов.</p>
<h3>Вспомогательный классы</h3>
<p>Если вы захотите потренироваться в написании «велосипедов», то можете начать отсюда:</p>
<ul>
<li>Работа с БД — необходима поддержка MySQL, SQLite, PostgreSQL (это минимум), а в целом стоит уделить этому пункту много внимания, т.к. он один может привлечь множество пользователей</li>
<li>Валидаторы — необходимая вещь, для экономии времени при написании форм (см. <a href="http://framework.zend.com/manual/ru/zend.validate.html">Zend_Validate</a>)</li>
<li>Транслятор — для реализации мультиязычности в системе, возможно хватит и gettext&#8217;a, но не стоит на это надеяться</li>
<li>Почта — можно обойтись лишь функцией mail, но это как-то не по-взрослому</li>
<li>Пагинатор — для решения тривиальной задачи — разбиение по страницам (см. <a href="http://framework.zend.com/manual/ru/zend.paginator.html">Zend_Paginator</a>)</li>
<li>Навигатор — построение меню, карты сайта и «хлебных крошек» (см. <a href="http://framework.zend.com/manual/ru/zend.navigation.html">Zend_Navigation</a>)</li>
<li>Кэширование — без него никуда (см. <a href="http://framework.zend.com/manual/ru/zend.cache.html">Zend_Cache</a>)</li>
<li>Конфигурационные файлы — Zend_Config слишком большой для того, чтобы обрабатывать лишь один ini файл, тут можете попрактиковаться, но все же посматривайте на <a href="http://framework.zend.com/manual/ru/zend.config.adapters.ini.html">Zend_Config_Ini</a></li>
<li>Автозагрузчик — очень полезная вещь, и главное удобное — <a href="http://framework.zend.com/manual/ru/zend.loader.autoloader.html">Zend_Loader</a></li>
<li>ACL — возможно потребуется — по крайней мере, распределение прав по запросу модуль/контроллер/экшен лучше пусть будет зашит в системе</li>
</ul>
<blockquote><p><em>Я не случайно привожу ссылки на пакеты Zend Framewrok&#8217;а — они вполне адекватны и самостоятельны, могут быть использованы сами по себе, т.е. никто ведь не машает вам построить свой фреймворк из кубиков Zend&#8217;a (и вот тому пример: <a href="http://www.zymengine.com/">ZYM</a>)</em></p></blockquote>
<h3>Тривиальные задачи</h3>
<p>В фреймворке должен быть заложен функционал для решения следующих тривиальных задач (мелких и не очень):</p>
<ul>
<li>Redirect — самый обычный, вызывается из контроллера</li>
<li>Forward — это пересылка с одного модуль/контроллер/экшен на другой без перезагрузки страницы</li>
<li>Messages — различные сообщения, с возможностью получения их после перезагрузки страницы</li>
<li>Scaffold — быстрый способ построения приложения для редактирования записей в базе данных (утрированно)</li>
</ul>
<p>Еще лучше, если с фреймворком будет поставляться готовая к использованию CMS система — она позволит популяризировать ваше детище, и возможно привлечет сторонних разработчиков.</p>
<blockquote><p><em>Возможно чего забыл из «тривиального» — пишите&#8230;</em></p></blockquote>
<h3>Структура каталога</h3>
<p>И так, что у нас получается, если взглянуть на файловую систему (в document_root должна лежать лишь папка public):</p>
<pre>project
|-- application
|    |-- configs
|    |-- layouts
|    |-- controllers
|    |-- models
|    |-- views
|    `-- modules
|         `-- &lt;module_name&gt;
|              |-- layouts
|              |-- controllers
|              |-- models
|              `-- views
|-- data
|    |-- cache
|    |-- logs
|    `-- sessions
|-- library
|    `-- Framework
|-- public
|    |-- styles
|    |-- scripts
|    |-- images
|    |-- uploads
|    |-- .htaccess
|    `-- index.php
`-- tests</pre>
<p>Это лишь мое пожелание, какой же она будет у вас — решать вам…</p>
<h3>Вывод</h3>
<p>To Be Or Not To Be — решать вам, как по мне — можно смириться с недостатками какого-то одного фреймворка, и наслаждаться его преимуществами. Возможно, вы попытаетесь написать свое решение или скрестить существующие, но не забываете — написание такого рода приложения влечет за собой ответственность по его поддержке.</p>
<p><a href="http://habrahabr.ru/blogs/php/68093/" target="_self">Оригинал</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/php/%d0%9f%d0%b8%d1%88%d0%b5%d0%bc-%d1%81%d0%b2%d0%be%d0%b9-framework/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Проектирование модели</title>
		<link>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/%d0%9f%d1%80%d0%be%d0%b5%d0%ba%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%be%d0%b4%d0%b5%d0%bb%d0%b8/</link>
		<comments>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/%d0%9f%d1%80%d0%be%d0%b5%d0%ba%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%be%d0%b4%d0%b5%d0%bb%d0%b8/#comments</comments>
		<pubDate>Thu, 24 Sep 2009 13:15:11 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Без рубрики]]></category>

		<guid isPermaLink="false">http://www.webcreator.kiev.ua/lib/?p=19</guid>
		<description><![CDATA[Проектирование модели
1) CОЗДАЕМ КЛАСС МОДЕЛИ (БАЗОВАЯ МОДЕЛЬ).
Описываем данные и поведения, через свойства и методы класса
Класс модели не должен знать о хранении данных, и других,  к самому классу не относящихся, вещах

Например:
class Person {
public $_email
public $_password;
public $_username;
 // getters and setters
&#8230;
Довольно спорный момент, зачем в сущности методы?
Этим должен заниматся Service Layer
// Behaviors
public function  authenticate(){}
public function logout(){}
public [...]]]></description>
			<content:encoded><![CDATA[<h2><span title="http://habrahabr.ru/blogs/refactoring/67036/">Проектирование модели</span></h2>
<p><span title="http://habrahabr.ru/blogs/refactoring/67036/">1) CОЗДАЕМ КЛАСС МОДЕЛИ (БАЗОВАЯ МОДЕЛЬ).</span></p>
<p><span title="http://habrahabr.ru/blogs/refactoring/67036/">Описываем данные и поведения, через свойства и методы класса<br />
</span>Класс модели не должен знать о хранении данных, и других,  к самому классу не относящихся, вещах<br />
<span title="http://habrahabr.ru/blogs/refactoring/67036/"><br />
Например:</span></p>
<p><code><span style="color: black;"><span style="color: #0000ff;">class</span> Person {<br />
<span style="color: #0000ff;">public</span> $_email<br />
<span style="color: #0000ff;">public</span> $_password;<br />
<span style="color: #0000ff;">public</span> $_username;</span></code></p>
<p><strong> // getters and setters<br />
&#8230;</strong></p>
<p><strong>Довольно спорный момент, зачем в сущности методы?<br />
Этим должен заниматся Service </strong><strong>Layer</strong></p>
<p><strong>// Behaviors<br />
</strong><code><span style="color: black;"><span style="color: #0000ff;">public</span> </span></code><code><span style="color: black;"><span style="color: #0000ff;">function</span> </span></code><code><span style="color: black;"><strong> authenticate(){}<br />
</strong></span></code><code><span style="color: black;"><span style="color: #0000ff;">public</span> </span></code><code><span style="color: black;"><span style="color: #0000ff;">function</span> <strong>logout</strong></span></code><code><span style="color: black;"><strong>(){}<br />
</strong></span></code><code><span style="color: black;"><span style="color: #0000ff;">public</span> </span></code><code><span style="color: black;"><span style="color: #0000ff;">function</span> </span></code><code><span style="color: black;"><strong>ban(){}</strong><br />
}</span></code></p>
<p><span title="http://habrahabr.ru/blogs/refactoring/67036/">2) CОЗДАЕМ КОД ДЛЯ СОХРАНЕНИЯ ДАННЫХ. (DATA ACCESS LAYER)<br />
Определяем какие данные мы хотим сохранять, как мы хотим их сохранять</span></p>
<p>Например:</p>
<p><span title="http://habrahabr.ru/blogs/refactoring/67036/">SQL:</span></p>
<blockquote><p><code><span style="font-family: Courier New; color: black; font-size: x-small;"><span style="color: #0000ff;">CREATE</span> <span style="color: #0000ff;">TABLE</span> person {<br />
username <span style="color: #0000ff;">VARCHAR</span> <span style="color: #0000ff;">PRIMARY</span> <span style="color: #0000ff;">KEY</span>,<br />
password <span style="color: #0000ff;">VARCHAR</span>,<br />
email <span style="color: #0000ff;">VARCHAR</span><br />
}</span></code></p></blockquote>
<p>Класс:</p>
<p><code><span style="color: black;"><span style="color: #0000ff;">class</span> Person_Table extends Zend_Db_Table_Abstract<br />
{<br />
<span style="color: #0000ff;">protected</span> $_name = <span style="color: #a31515;">'person'</span>;<br />
<span style="color: #0000ff;">protected</span> $_primary = <span style="color: #a31515;">'username'</span>;<br />
}</span></code></p>
<p>Можно использовать генератор Symfony(Propel, Doctrine)</p>
<p><span style="color: black;">3) ОПИСЫВАЕМ СВЯЗЬ МЕЖДУ МОДЕЛЬЮ И БАЗОЙ ДАННЫХ (DATA MAPPER/ORM)</span></p>
<p>Мэппер — прослойка между нашим простым классом (Базовая модель) и хранилищами. Он обеспечивает базовый интерфейс для работы с хранилищами: сохранение, загрузка и удаление. Будь то файлы, база данных или тот же кэш, интерфейс всегда будет один и тот же</p>
<p><span style="color: black;">Мэппер принимает объект модели<br />
</span><span style="color: #ff0000;">Мэппер</span><span style="color: black;"><span style="color: #ff0000;"> может хранить и извлекать данные и из других хранилищ(КЕШ, файловая система)</span><br />
</span></p>
<p><span style="color: black;">Например:</span></p>
<blockquote><p><span id="lblPreview"><code><span style="font-family: Courier New; color: black; font-size: x-small;"><span style="color: #0000ff;">class</span> PersonMapper {</span></code></span></p>
<p><span style="color: #0000ff;">public</span> function save( Person $person )<br />
{<br />
$data = array(<br />
<span style="color: #a31515;">&#8216;username&#8217;</span> =&gt; $person-&gt;username,<br />
<span style="color: #a31515;">&#8216;password&#8217;</span> =&gt; $person-&gt;password,<br />
<span style="color: #a31515;">&#8216;email&#8217;</span> =&gt; $person-&gt;email<br />
);<br />
$<span style="color: #0000ff;">this</span>-&gt;getTable()-&gt;save( $data );<br />
}</p>
<p><span style="color: #0000ff;">private</span> function fetch( $username=<span style="color: #0000ff;">null</span> ) {}<br />
<span style="color: #0000ff;">private</span> function getTable() {}<br />
<span style="color: #0000ff;">private</span> function setTable( $table ) {}<br />
}</p></blockquote>
<p><span style="color: black;">4) ДОБАВЛЕНИЕ БИЗНЕСС ЛОГИКИ В SERVICE LAYER<br />
</span><span style="color: black;">SERVICE LAYER &#8211; обеспечивает применение логики в верхней части модели</span></p>
<p><span style="color: black;">DATA ACCESS LAYER -&gt; DATA MAPPERS -&gt; DOMAIN MODEL -&gt; SERVICE LAYER</span></p>
<p><span style="color: black;">Например:</span></p>
<p><code><span style="color: black;"><span style="color: #0000ff;">class</span> PersonService {</span></code></p>
<p><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span> create( array $data )<br />
{<br />
$person = <code><span style="color: black;"><span style="color: #0000ff;">new</span></span></code><code><span style="color: black;"> Persone;<br />
</span></code><code><span style="color: black;"> if( !$data = $this-&gt;getValidator-&gt;isValid( </span></code><code><span style="color: black;">$data</span></code><code><span style="color: black;"> ) )</span></code><br />
<code><span style="color: black;"> </span></code>{<br />
<code><span style="color: black;"> throw new InavalidArgument;</span></code><br />
<code><span style="color: black;"> </span></code>}</p>
<p><code><span style="color: black;"> </span></code><code><span style="color: black;">$</span></code><code><span style="color: black;">person</span></code><code><span style="color: black;">-&gt;</span></code><code><span style="color: black;">username</span></code><code><span style="color: black;"> = </span></code><code><span style="color: black;">$data</span></code>['<code><span style="color: black;">username</span></code>'];<code><br />
</code><code><span style="color: black;"> </span></code><code><span style="color: black;">$</span></code><code><span style="color: black;">person</span></code><code><span style="color: black;">-&gt;password =</span></code> <code><span style="color: black;">$data</span></code>['<code><span style="color: black;">password</span></code>'];<br />
<code><span style="color: black;"> </span></code><code><span style="color: black;">$</span></code><code><span style="color: black;">person</span></code><code><span style="color: black;">-&gt;email =</span></code> <code><span style="color: black;">$data</span></code>['<code><span style="color: black;">email</span></code>'];<code><span style="color: black;"> </span></code></p>
<p><code><span style="color: black;"> </span></code><code><span style="color: black;">$<span style="color: #0000ff;">this</span>-&gt;getMapper()-&gt;save( </span></code><code><span style="color: black;">$</span></code><code><span style="color: black;">person</span></code><code><span style="color: black;"> );<br />
</span></code><code><span style="color: black;"> </span></code><code><span style="color: black;">}</span></code></p>
<p><span style="color: black;">5) ДЕКОРИРУЕМ МЭППЕРЫ<br />
</span>Декораторы нужны, чтобы добавить или изменить функциональность существующих классов</p>
<p>-) Декоратор нам нужен будет для определения, откуда загружать данные из базы данных или из кеша<br />
-) Декоратор нам нужен будет для возрата данных в разных формата</p>
<p>Сначала вызываем CashMapper, а он если нужно вызыват BdMapper ( кеш декорирует базу )</p>
<p>Слайд-шоу:<br />
http://www.slideshare.net/weierophinney/playdoh-modelling-your-objects-1766001<br />
Статья:<br />
http://habrahabr.ru/blogs/refactoring/67036/</p>
<p>Упрощенный вариант</p>
<p>— Абстракция доступа/фильтрации/валидации Article_Service<br />
— Абстракция взаимодействия с БД/«другими источниками» данных Article_Mapper<br />
— Собственно структура данных class Article (на кой черт ей геттеры сеттеры? <img src='http://www.webcreator.kiev.ua/lib/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  если вы работаете с Article_Service ).</p>
<p>Условно один внешний API для других объектов (это Article_Service) и внутренний API для самого объекта (Article_Mapper). В этом свете, наличие каких либо методов у Article вообще противопоказано<br />
<span style="color: #ff0000;">обратите внимание на разницу между структурой данных в памяти и моделью<br />
</span><br />
Жесть.<br />
Вы хоть поняли, что юноша выше предложил?<br />
Организовать доступ к полям объекта через __get/__set</p>
<p>Если я работаю с 200-300 объектов, у каждого из которых по 50 свойств, и доступ к полям через __get()<br />
Что у нас произойдет? Сколько у нас будет вызовов?</p>
<p>Ах, да, можно работать не с коллекцией в 200-300 объектов, а с 1м за раз объектом, но тогда вместо 1го запроса к базе у вас будет 300 запросов. Что впрочем не избавит от необходимости обращаться к полям объектов <img src='http://www.webcreator.kiev.ua/lib/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  после каждого запроса<code><span style="color: black;"><br />
</span></code></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcreator.kiev.ua/lib/%d0%91%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/%d0%9f%d1%80%d0%be%d0%b5%d0%ba%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%be%d0%b4%d0%b5%d0%bb%d0%b8/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

