http://fozzy.ucoz.com/ Блог верстальщика FozzY Fri, 20 Jan 2012 15:25:07 GMT uCoz Web-Service <p>Все больше и больше вебмастеров начинают изучать, использовать и адаптировать свои <strong>веб-сайты на HTML5</strong>. По этому, чтобы показать преимущества и <em>возможности HTML5</em>, я решил сделать маленькую подборку сайтов, которые нарыл в забугорном интернете, которые активно используют новые интересные возможности <strong>HTML5</strong>.... <p>Все больше и больше вебмастеров начинают изучать, использовать и адаптировать свои <strong>веб-сайты на HTML5</strong>. По этому, чтобы показать преимущества и <em>возможности HTML5</em>, я решил сделать маленькую подборку сайтов, которые нарыл в забугорном интернете, которые активно используют новые интересные возможности <strong>HTML5</strong>.$CUT$ </p> <h2>Для начала, давайте рассмотрим некоторые елементы HTML5</h2> <p> Так как спецификации постоянно меняется, трудно определить авторитетный перечень основных елементов. Однако некоторые из новых возможностей в HTML5 очень интересны и обьязательно должны быть включены:</p> <ul> <li>Благодаря таким елементам как: <strong><header&gt;, <footer&gt; и <section&gt;</strong>, черезмерное использование div'ов существенно упростится. К примеру <strong>тег <header&gt;</strong> будет обозначать шапку сайта, <strong><footer&gt;</strong> - подвал сайта и т.д.<br> <pre class="brush: html"><header&gt; <h1&gt;Page Title is put here</h1&gt;<br> <p&gt;Introduction text for the header is put here</p&gt; </header&gt; </pre> </li> <li><strong><!DOCTYPE&gt;</strong> наконец-то станет легко запоминаемым. Для тех кто не в курсе - это не тег HTML, эта запись сообщает браузеру какую спецификацию HTML использовать для текущего документа. </li> <li>Canvas – позволит использовать анимацию без Flash. <strong>Тег <canvas&gt; </strong>создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas&gt; можно создавать рисунки, анимацию, игры и др. </li> <li><strong>Тег <video&gt;</strong> – Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице, опять же без необходимости использования Flash. </li> </ul> <p>Используя определенным образом эти новые возможности, можно обеспечить чистый структурированный <strong>HTML 5 макет сайта</strong>, без лишних дивов и без использования флеш. Остается только ждать когда же выйдет официально <strong>HTML 5</strong>? </p><p> Ну а пока остается только тестировать то, что предлагают нам создатели популярных браузеров. </p> <ul class="aligncenter"> <li><div class="alignleft"><!--IMG2--><a href="http://fozzy.ucoz.com/_bl/0/97140507.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s97140507.jpg" align="" /></a><!--IMG2--></div> <a href="http://8weekgame.shawson.co.uk/ManicSpaceman/" target="_blank">ManicSpaceman</a> – использование Canvas. Чтоб увидеть как построена игра - взгляните исходный код</li> <li><div class="alignleft"><!--IMG3--><a href="http://fozzy.ucoz.com/_bl/0/70551198.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s70551198.jpg" align="" /></a><!--IMG3--></div> <a href="http://mugtug.com/sketchpad/" target="_blank">sketchpad</a> – рисовалка, построенна также с использованием HTML 5 тегов, в частности тотже Canvas!</li> <li><div class="alignleft"><!--IMG4--><a href="http://fozzy.ucoz.com/_bl/0/30012095.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s30012095.jpg" align="" /></a><!--IMG4--></div> <a href="http://www.mygreenheat.co.uk/" target="_blank">mygreenheat.co.uk</a> – HTML 5 doctype и HTML 5 елементы</li> <li><div class="alignleft"><!--IMG5--><a href="http://fozzy.ucoz.com/_bl/0/11667568.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s11667568.jpg" align="" /></a><!--IMG5--></div> <a href="http://vaullt.com/" target="_blank">Vaullt</a> – использование <video&gt;</li> <li><div class="alignleft"><!--IMG6--><a href="http://fozzy.ucoz.com/_bl/0/21851145.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s21851145.jpg" align="" /></a><!--IMG6--></div> <a href="http://www.subcide.com/contact/" target="_blank">subcide.com</a> – использует новые элементы формы. Посмотрите, как в будущем будут кодироваться веб-формы.</li> </ul> https://fozzy.ucoz.com/blog/podborka_saytov_na_html5/2012-01-20-57 HTML fozzy https://fozzy.ucoz.com/blog/podborka_saytov_na_html5/2012-01-20-57 Fri, 20 Jan 2012 15:25:07 GMT <p>Любой вебмастер или верстальщик сталкивается с проблемой подбора шрифтов для web-разработки. То как отображаются шрифты на экране, порой, бывает важнее всех остальных элементов дизайна на web-странице.</p>... <p>Любой вебмастер или верстальщик сталкивается с проблемой подбора шрифтов для web-разработки. То как отображаются шрифты на экране, порой, бывает важнее всех остальных элементов дизайна на web-странице.</p>$CUT$ <p><strong>Выбор шрифтов</strong> — ответственный момент. Конечно выбором шрифта для элементов <a href="http://fozzy.ucoz.com/blog/dizajn/1-0-6" title="Дизайн">дизайна сайта</a>, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.</p> <p>Основным правилом, которому действительно нужно следовать при выборе шрифта, да и всего дизайна, - это сделать так, чтобы чтение вашего сайта было максимально комфортным для посетителя.</p> <p>Раньше доводилось часто слышать от верстальщиков и программистов, что использовать нестандартные шрифты на сайте это неправильно. И мы соглашались на <strong>стандартные шрифты Arial, Helvetica, Verdana, Tahoma, Times New Roman, Trebuchet MS</strong>. Но технологии развиваются и сейчас это уже не проблема.</p> <p>Для начала, давайте определимся, что же такое нестандартные шрифты?</p> <p><strong>Нестандартный шрифт</strong> — это шрифт, который не установлен на большинстве компьютеров посетителей вашего сайта. В результате пользователи не могут увидеть и оценить творческий потенциал и фантазию дизайнера.</p> <p>Если стоит задача использовать в проекте <strong>нестандартный шрифт</strong>, то есть возможность пойти несколькими путями:</p> <ol> <li><em>Ъ-метод</em> – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.</li> <li><em>Быдло-метод</em> – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.</li> <li><em>W3C-метод</em> – используем <code>@font-family</code> и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.</li> <li><em>sIFR</em> – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.</li> <li><strong><em>Cufon</em></strong> – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.</li> </ol> <h2>Что такое Cufon?</h2> <p><strong>Cufon</strong> позволяет внедрить любой шрифт на веб страницу. Поддерживаются шрифты: TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts.</p> <p>Как пишут на сайте разработчики – призвание их проекта стать достойной альтернативой для <strong>sIFR</strong>, который несмотря на все свои заслуги все же несколько сложен в настройке и использовании. </p> <h2>Как работает Cufon?</h2> <p><strong>Cufon</strong> имеет две индивидуальные части font generator, который конвертирует шрифты в нужный формат и часть для парсинга этого формата. </p> <p>Generator делает несколько шагов конвертации из шрифта в SVG font затем в VML, этот шаг нужен для совместимости с IE, в итоге результат формируется в JSON, с которым и работает JavaScript. </p> <p>Все сделано очень хитро и продуманно, но в итоге, для работы все этой машинерии от вас требуется подключить всего 2 Javascript файла и можно наслаждаться. </p> <h2>Cufon в действии</h2> <p> Для конвертации шрифта в нужный формат можно воспользоваться <a href="http://cufon.shoqolate.com/generate/">генератором</a> на официальном сайте, или <a href="http://github.com/sorccu/cufon/downloads" target="_blank">скачать локальную версию</a>. </p> <p>При генерации шрифта, по желанию, отмечаем некие дополнительные настройки, которые необходимо, и получаем файл <strong>имя_шрифта.font.js</strong>. К сгенерированному файлу добавляется число 400 – это соответствует нормальному шрифту, если шрифт жирный добавляется 600. </p> <p>Следующим шагом будет скачивание собственно дистрибутива Cufón, который в сжатом виде занимает каких-то 14 КБ. <a href="http://cufon.shoqolate.com/js/cufon-yui.js" target="_blank">cufon.shoqolate.com/js/cufon-yui.js</a></p> <p>Подключаем на странице наши файлы.</p> <code> <pre class="brush: js"> <script type="text/javascript" src="https://fozzy.ucoz.com/js/cufon-yui.js"&gt;</script&gt; <script type="text/javascript" src="https://fozzy.ucoz.com/js/имя_шрифта.font.js"&gt;</script&gt; </pre> </code> <br/> <p>Теперь выбираем, какие именно элементы страницы мы хотим прорисовать нашим красивым шрифтом. </p> <p>К примеру, мы хотим заменять все заголовки H1 и H2 </p> <code> <pre class="brush: js"> <script type="text/javascript"&gt; Cufon.replace('h1'); Cufon.replace('h2'); </script&gt; </pre> </code> <br/> <p>Да и это все, что от нас требуется. Цвет, размер и другие параметры для прорисовки берутся из правил <a href="http://fozzy.ucoz.com/blog/css/1-0-4">CSS</a>. Если они конечно заданы.</p> <p>О том как стилить не только цвет, а и практически все свойства CSS, относящиеся к тексту смотрите <a href="http://wiki.github.com/sorccu/cufon/styling" target="_blank">wiki.github.com/sorccu/cufon/styling</a></p> <p>Да, чуть не забыл, для того чтобы Cufon начал понимать контекстные селекторы типа: #content h1, (короче вложенность) и т.п. , то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам. </p> <p>Для этого нам просто надо подключать хоть один из фреймверков типа jQuery, MooTools или Prototype <strong>в документе раньше чем Cufon</strong>.</p> <br/> <h2>Использование нескольких шрифтов</h2> <code> <pre class="brush: js"> <script src="cufon-yui.js" type="text/javascript"&gt;</script&gt; <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"&gt;</script&gt; <script src="Myriad_Pro_400.font.js" type="text/javascript"&gt;</script&gt; <script type="text/javascript"&gt; Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' }); Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); </script&gt; </pre> </code> <p><strong>Важно!</strong> Если не указать дополнительных настроек при вызове, то будет использован последний загруженный шрифт (Myriad_Pro_400).</p> <br/> <h2>Достоинства Cufon</h2> <ul> <li >Не требует плагинов &ndash; используются только штатные средства браузеров.</li> <li>Работает на всех распространенных браузерах.</li> <li>Прост в установке и настройке.</li> <li>Удобен в управлении: можно редактировать текст, изменять параметры шрифта (размер жирность, цвет), есть реакция на hover, возможно добавление тени к тексту</li> <li>Используемый шрифт защищен от копирования</li> <li>Возможность генерации оптимального промежуточного шрифта, только для необходимых символов.</li> <li>Скорость достаточно большая даже для объемных текстов.</li> </ul> <br/> <h2>Недостатки Cufon</h2> <ul> <li>Увеличивается трафик из-за дополнительных файлов, соответственно увеличится время загрузки страницы.</li> <li>Текст не возможно выделить и скопировать, хотя в этом есть и определенный плюс</li> <li>Нежелательно применять для больших объемов текстов и</li> <li>Нежелательно использовать множество различных шрифтов &ndash; увеличивается объем страницы</li> <li>До окончания работы скрипта пользователь видит текст шрифта по-умолчанию</li> <li>Если javascript отключен &ndash; пользователь так же увидит текст шрифта по-умолчанию</li> </ul> https://fozzy.ucoz.com/blog/ispolzovanie_nestandartnykh_shriftov_na_sajte_s_pomoshhju_cufon/2011-11-11-33 Дизайн fozzy https://fozzy.ucoz.com/blog/ispolzovanie_nestandartnykh_shriftov_na_sajte_s_pomoshhju_cufon/2011-11-11-33 Fri, 11 Nov 2011 09:51:20 GMT <p><strong>Валидность HTML</strong> — святое. В ней и лежит залог правильного отображения сайта во всех браузерах. Будем считать, что <strong>валидный html</strong> это абсолютно правильный html. </p> <p>Под валидностью, в данном посте, мы будем понимать такое написание HTML- и CSS-кода, которое не противоречит действующим стандартам W3C и полностью проходит тест валидатором. </p>... <p><strong>Валидность HTML</strong> — святое. В ней и лежит залог правильного отображения сайта во всех браузерах. Будем считать, что <strong>валидный html</strong> это абсолютно правильный html. </p> <p>Под валидностью, в данном посте, мы будем понимать такое написание HTML- и CSS-кода, которое не противоречит действующим стандартам W3C и полностью проходит тест валидатором. </p>$CUT$ <p>Хотя тема стара как мир, но все же периодически на разных программерских форумах возникают вопросы по валидной вставке флэш объектов на странички сайтов. </p> <p>И так приступим, для отображения flash объектов в документах типа <strong>XHTML 1.0 Transitional</strong> (большинство CMS на нем написано). </p> <br><br> <h2>Валидная вставка Flash</h2> <p><b>Вариант 1.</b> Для прямой вставки <strong>рецепт от w3c</strong> (если нет плеера у клиента, то облом, ничего не крутится):</p> <p></p><pre class="brush: html"><object type="application/x-shockwave-flash" data="flash.swf" width="400" height="300"&gt; <param name="movie" value="flash.swf" /&gt; </object&gt; </pre> <p></p> <p> <b>Вариант 2.</b> При таком коде вставленный флеш валиден, и если у посетителя отключен просмотр флеша, то вместо него будет отображаться фоновое изображение dummy.jpg (в примере изображения берутся из папки images, а флеш из папки swf). Режим wmode установленный в opaque дает возможность не закрывать флэшем всплывающие окна, то есть убирается баг верхнего слоя. </p> <p> </p><pre class="brush: html"><object type="application/x-shockwave-flash" data="swf/flash.swf" width="400" height="300"&gt; <param name="movie" value="swf/flash.swf" /&gt; <param name="quality" value="high" /&gt; <param name="wmode" value="opaque" /&gt; <img src="images/dummy.jpg" alt="Без флеша" height="300" width="400" /&gt; </object&gt; </pre> <p></p> <br><br> <h2>Размещаем что-либо поверх flash блока</h2> <h3>Html код</h3> <p> </p><pre class="brush: html"><div class="flash-box"&gt; <a class="flash-link" href="#"&gt;Ваша ссылка</a&gt; <object type="application/x-shockwave-flash" data="swf/flash.swf" width="180" height="220"&gt; <param name="wmode" value="opaque" /&gt; <param name="movie" value="swf/flash.swf" /&gt; <param name="quality" value="high" /&gt; </object&gt; </div&gt; </pre> <p></p> <p><b>Блок flash-box</b> - нужен для того что бы размещенная ссылка была именно там где нужно нам, а не там где хочет она.</p> <p><b>flash-link</b> - ссылка которая будет поверх флешки, вместо ссылки может быть что угодно.</p> <p><b><param name="wmode" value="opaque"&gt;</b> - Флеш ведет себя так как нам надо. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый цвет. Без этой штуки работать ничего не будет.</p><br> <h3>Css свойства</h3> <p> </p><pre class="brush: css">.flash-box{ position: relative; } .flash-link{ position: absolute; top:0px; left:0px; } </pre> <p></p> <p>Думаю объяснять не надо, что Вы можете дописывать свои свойства, такие как: ширина, высота и т.д.</p> <br><br> <h2>Пример посложнее</h2> <p>Иногда требует нечто более сложное. Например, нужно сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес</p> <h3>Html код</h3> <p> </p><pre class="brush: html"><div class="flash-box"&gt; <a class="flash-link" href="#"&gt;</a&gt; <object type="application/x-shockwave-flash" data="swf/flash.swf" width="180" height="220"&gt; <param name="wmode" value="opaque"&gt; <param name="movie" value="swf/flash.swf" /&gt; <param name="quality" value="high" /&gt; </object&gt; </div&gt; </pre> <p></p> <h3>Css код</h3> <p> </p><pre class="brush: css">.flash-box{ position: relative; } .flash-link{ position: absolute; top:0px; left:0px; width:180px; height:220px; background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/ } </pre> <p></p> https://fozzy.ucoz.com/blog/validnaja_vstavka_flash_i_kak_vstavit_chto_libo_poverkh_flash_bloka/2011-08-31-31 HTML fozzy https://fozzy.ucoz.com/blog/validnaja_vstavka_flash_i_kak_vstavit_chto_libo_poverkh_flash_bloka/2011-08-31-31 Wed, 31 Aug 2011 08:17:17 GMT <p>Наверное каждый верстальщик будь то новичок, или опытный профи, в процессе работы над версткой, хоть раз да сталкивался с разными проблемами, которые методом "научного тыка" определить проблемный элемент бывает долго и довольно сложно. </p> <p>К счастью, есть инструменты, которые намного облегчают поиск проблемных мест, так называемые <strong>плагины для браузеров</strong>. И так как при верстке основной мой браузер это - <strong>Mozilla Firefox</strong>, по этому <em>поделюсь с Вами теми плагинами которыми пользуюсь сам</em>. Созданные специально для веб-разработчиков, верстальщиков, веб-дизайнеров и т.д.</p> ... <p>Наверное каждый верстальщик будь то новичок, или опытный профи, в процессе работы над версткой, хоть раз да сталкивался с разными проблемами, которые методом "научного тыка" определить проблемный элемент бывает долго и довольно сложно. </p> <p>К счастью, есть инструменты, которые намного облегчают поиск проблемных мест, так называемые <strong>плагины для браузеров</strong>. И так как при верстке основной мой браузер это - <strong>Mozilla Firefox</strong>, по этому <em>поделюсь с Вами теми плагинами которыми пользуюсь сам</em>. Созданные специально для веб-разработчиков, верстальщиков, веб-дизайнеров и т.д.</p> $CUT$ <p>Итак, вот что я использую:</p> <ol> <li> <p><span class="alignleft"><!--IMG2--><a href="http://fozzy.ucoz.com/_bl/0/53228089.gif" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s53228089.jpg" align="" /></a><!--IMG2--></span> <strong><a href="https://addons.mozilla.org/ru/firefox/addon/firebug/">FireBug</a></strong> - Этот плагин – просто must have для веб-разработчика. Плагин позволяет "на лету” вносить изменения в HTML и CSS и сразу видеть результат проделанной работы, отлаживать скрипты, смотреть заголовки и ответы сервера, смотреть запрашиваемые элементы, их размер и время загрузки. </p> <p>Если кратко о главном то: С помощью <strong>FireBug</strong> Вы сможете редактировать, отлаживать и мониторить <strong>CSS</strong>, <strong>HTML</strong> и <strong>JavaScript</strong> в реальном времени на любой веб-странице. </p> <p> Очень удобна кнопка в контекстном меню "Анализировать". Плагин из разряда must have, весьма полезный плагин для веб-дизайнеров и разработчиков. </p> </li> <li> <p><span class="alignleft"><!--IMG3--><a href="http://fozzy.ucoz.com/_bl/0/44106003.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s44106003.jpg" align="" /></a><!--IMG3--></span> <strong><a href="https://addons.mozilla.org/ru/firefox/addon/web-developer/">Web Developer Toolbar</a></strong> - Расширение добавляет удобное меню с полезными для веб-мастера инструментами. некоторые из них: управление cookies, личными данными, формами, изображениями, отображение различной информации об элементах на странице, <strong>быстрая отправка HTML и CSS в валидатор</strong> и отладка JS. Отдельного внимания заслуживают инструменты выверения пикселей и дизайна таблиц. Второй must have для веб-разработчика. </p> </li> <li> <p><span class="alignleft"><!--IMG4--><a href="http://fozzy.ucoz.com/_bl/0/37406175.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s37406175.jpg" align="" /></a><!--IMG4--></span> <a href="https://addons.mozilla.org/ru/firefox/addon/html-validator/">Html Validator</a> - Самый популярный плагин для Firefox в среде веб-программистов, позволяет проверить html код на всевозможные ошибки, а также даст дополнительные рекомендации, где отсутствует закрытие тега, где забыли прописать для картинки тег ALT ну и т.п. </p> <p> Плагин подробно показывает ошибки и точное место, а также объяснит, как эту ошибку исправить. Работает в фоновом режиме и встроен в страницу просмотра исходного кода. Очень экономит время. </p> </li> <li> <p><span class="alignleft"><!--IMG5--><a href="http://fozzy.ucoz.com/_bl/0/86986004.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s86986004.jpg" align="" /></a><!--IMG5--></span> <strong><a href="https://addons.mozilla.org/ru/firefox/addon/pixel-perfect/">Pixel Perfect</a></strong> - Этот плагин является дополнением к <strong>FireBug</strong>. Оригинальное расширение для дизайнеров, позволяет накладывать изображение на страницу любого сайта. Картинки полупрозрачные, легко перетаскиваются мышкой. </p> <p> Не заменимая вещь, если Вам надо сверстать страницу согласно рисунку, как говорится: "Пиксель в пиксель" </p> </li> <li> <p><span class="alignleft"><!--IMG6--><a href="http://fozzy.ucoz.com/_bl/0/47078035.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s47078035.jpg" align="" /></a><!--IMG6--></span> <a href="https://addons.mozilla.org/ru/firefox/addon/measureit/">MeasureIt</a> - Плагин позволяет вам измерить любой элемент Интернет страницы. С помощью этого плагина вы можете измерить логотип страницы, баннер, формы, иконку и многое другое. Просто растягиваете над нужным вам элементом сетку и смотрите длину и ширины элемента в пикселях. Плагин прост и удобен и будет полезен любому вебмастеру. </p> </li> <li> <p><span class="alignleft"><!--IMG7--><a href="http://fozzy.ucoz.com/_bl/0/62008047.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s62008047.jpg" align="" /></a><!--IMG7--></span> <a href="https://addons.mozilla.org/ru/firefox/addon/colorzilla/">ColorZilla</a> - с помощью этого плагина Вы можете получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Вы можете изменять масштаб изображения страницы, которую Вы просматриваете (от 20% до 1000%).</p> <p> Встроенный просмотрщик палитры позволяет выбирать цвета из предопределенных цветных наборов (палитр), с возможностью сохранения, наиболее используемых цветов, в палитре Избранное. </p> <p>грубо говоря - это пипетка в Photoshop'е. </p> </li> <li> <p><span class="alignleft"><!--IMG8--><a href="http://fozzy.ucoz.com/_bl/0/16531755.png" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s16531755.jpg" align="" /></a><!--IMG8--></span> <a href="https://addons.mozilla.org/ru/firefox/addon/video-downloadhelper/">Video DownloadHelper</a> - позволяет быстро и просто <strong>скачать любое видео и музыку с youtube, googlevideo, Вконтакте</strong> и любых других сайтов, где используются видео-аудио-проигрыватели на флеше или схожих технологиях. </p> <p> При посещение станицы, на которой есть ссылки на видео, Download Helper помещает прямые ссылки на скачивание в кнопку-меню рядом с полем ввода адреса. Выбрав такую ссылку из списка, вы скачаете файл. Поддерживается не только формат-контейнер FLV, но и другие популярные форматы файлов вроде AVI, MPEG, MP3 и так далее. </p> </li> </ol> https://fozzy.ucoz.com/blog/poleznye_plaginy_dlja_firefox/2011-08-29-30 Разное fozzy https://fozzy.ucoz.com/blog/poleznye_plaginy_dlja_firefox/2011-08-29-30 Mon, 29 Aug 2011 12:59:00 GMT <p><strong>jQuery.carouFredSel</strong> это плагин, который превращает любой HTML-элемент в карусель. <em>CarouFredSel</em> - плагин построен с использованием JQuery-библиотеки. Его можно прикручивать к одному или нескольким элементов одновременно, доступно как горизонтальное, так и вертикальное отображение елементов, с бесконечным и круговым циклом. </p>... <p><strong>jQuery.carouFredSel</strong> это плагин, который превращает любой HTML-элемент в карусель. <em>CarouFredSel</em> - плагин построен с использованием JQuery-библиотеки. Его можно прикручивать к одному или нескольким элементов одновременно, доступно как горизонтальное, так и вертикальное отображение елементов, с бесконечным и круговым циклом. </p>$CUT$ https://fozzy.ucoz.com/blog/jquery_caroufredsel/2011-08-24-29 Галереи jquery fozzy https://fozzy.ucoz.com/blog/jquery_caroufredsel/2011-08-24-29 Wed, 24 Aug 2011 12:14:25 GMT <p><strong>slideJS</strong> - это слайд-шоу плагин для JQuery, с очень простыми настройками. slideJS имеет полезный набор функций, которые помогут как начинающим, так и опытным разработчикам, создать элегантную и удобную слайд-шоу галерею.</p>... <p><strong>slideJS</strong> - это слайд-шоу плагин для JQuery, с очень простыми настройками. slideJS имеет полезный набор функций, которые помогут как начинающим, так и опытным разработчикам, создать элегантную и удобную слайд-шоу галерею.</p>$CUT$ https://fozzy.ucoz.com/blog/slidejs/2011-08-24-28 Галереи jquery fozzy https://fozzy.ucoz.com/blog/slidejs/2011-08-24-28 Wed, 24 Aug 2011 11:54:11 GMT <p>Социальные сети, такие как всемирно известная <strong>Facebook</strong>, и ее русский клон <strong>Вконтакте</strong>, на сегодняшний день, уже захватили огромную часть интернета, и их развитие впечатляет, его можно характеризовать как — «большой бум». Но остается еще места для тематически социальных сетей. Предлагаю Вам подборку <strong>CMS</strong> движков, на которых Вы сможете построить свою социальную сеть.</p>... <p>Социальные сети, такие как всемирно известная <strong>Facebook</strong>, и ее русский клон <strong>Вконтакте</strong>, на сегодняшний день, уже захватили огромную часть интернета, и их развитие впечатляет, его можно характеризовать как — «большой бум». Но остается еще места для тематически социальных сетей. Предлагаю Вам подборку <strong>CMS</strong> движков, на которых Вы сможете построить свою социальную сеть.</p>$CUT$ <div class="wrap"> <h2>Elgg:</h2> <div align="center"><!--IMG2--><a href="http://fozzy.ucoz.com/_bl/0/19852195.gif" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s19852195.jpg" align="" /></a><!--IMG2--></div> <p><strong>Бесплатная cms</strong> с открытым кодом. Блоги, комьюнити, загрузка файлов, подкастов.</p><br> <ul class="download"> <li><a target="_blank" rel="nofollow" href="http://www.redpai.org/">Пример сайта</a></li> <li><a target="_blank" rel="nofollow" href="http://elgg.org/">Сайт</a></li> </ul> </div> <div class="wrap"> <h2>Dolphin:</h2> <div align="center"><!--IMG3--><a href="http://fozzy.ucoz.com/_bl/0/29855068.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s29855068.jpg" align="" /></a><!--IMG3--></div> <p>Разработано компанией Boonex. Она с открытым исходным кодом, но при использовании мы обязаны оставить ссылку на сайт создателей или оплатить лицензию (39$ годовая лицензия и $ 99 пожизненная). Блоги, фотографии, рейтинги, группы, приглашения, друзья, гостевая книга, аудио/видео галереи, форумы, чаты и т. п.</p><br> <ul class="download"> <li><a target="_blank" rel="nofollow" href="http://www.boonex.us/">Демо</a></li> <li><a target="_blank" rel="nofollow" href="http://www.boonex.com/products/dolphin/">Сайт</a></li> </ul> </div> <div class="wrap"> <h2>Lovd By Less:</h2> <div align="center"><!--IMG4--><a href="http://fozzy.ucoz.com/_bl/0/45663933.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s45663933.jpg" align="" /></a><!--IMG4--></div> <p>Эта cms написана на Ruby on Rails, ее особенность эта интеграция с популярными сервисами, такими как Flickr и YouTube. Блоги, личные страницы, галерея.</p><br> <ul class="download"> <li><a target="_blank" rel="nofollow" href="http://try.lovdbyless.com/">Демо</a></li> <li><a target="_blank" rel="nofollow" href="http://lovdbyless.com/">Сайт</a></li> </ul> </div> <div class="wrap"> <h2>SocialEngine:</h2> <div align="center"><!--IMG5--><a href="http://fozzy.ucoz.com/_bl/0/78352221.gif" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s78352221.jpg" align="" /></a><!--IMG5--></div> <p>Можно создавать группы, выкладывать фотки, видео. Поддерживает модули. К сожалению платный.</p> <ul class="download"> <li><a target="_blank" rel="nofollow" href="http://demo.socialengine.net">Демо</a></li> <li><a target="_blank" rel="nofollow" href="http://socialengine.net/">Сайт</a></li> </ul> </div> <div class="wrap"> <h2>phpFox:</h2> <div align="center"><!--IMG6--><a href="http://fozzy.ucoz.com/_bl/0/30005338.gif" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s30005338.jpg" align="" /></a><!--IMG6--></div> <p>Создание галерей, форумов, блогов, опросов, коммунити, подкасты. Платная.</p> <ul class="download"> <li><a target="_blank" rel="nofollow" href="http://live.phpfox.com/demo/">Демо</a></li> <li><a target="_blank" rel="nofollow" href="http://www.phpfox.com/">Сайт</a></li> </ul> </div> <div class="wrap"> <h2>DZOIC Handshakes:</h2> <div align="center"><!--IMG7--><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/05345752.gif" align="" /><!--IMG7--></div> <p>Блоги, форумы, чаты, открытки, голосования, комьюнити. Опять же платная. Открытый код.</p> <ul class="download"> <li><a target="_blank" rel="nofollow" href="http://www.handshakesdemo.com/">Демо</a></li> <li><a target="_blank" rel="nofollow" href="http://www.dzoic.com/">Сайт</a></li> </ul> </div> https://fozzy.ucoz.com/blog/cms_dlja_socialnoj_seti/2011-08-23-27 Разное fozzy https://fozzy.ucoz.com/blog/cms_dlja_socialnoj_seti/2011-08-23-27 Tue, 23 Aug 2011 13:22:07 GMT <p>О SEO-продвижении сайтов существуют различные мифы. Не удивительно, ведь этот инструмент маркетинга специфический, имеет достаточно много нюансов и хоть уже достаточно популярный, активно используется в нашей стране всего несколько лет. В этом очерке мы рассмотрим 5 самых популярных мифов о SEO.</p>... <p>О SEO-продвижении сайтов существуют различные мифы. Не удивительно, ведь этот инструмент маркетинга специфический, имеет достаточно много нюансов и хоть уже достаточно популярный, активно используется в нашей стране всего несколько лет. В этом очерке мы рассмотрим 5 самых популярных мифов о SEO.</p>$CUT$ <p><b>Миф 1. </b><b>SEO</b><b>делает продажи</b> <br> <br> SEO, по своей сути &ndash; это инструмент, который позволяет сайту занять позиции в поисковых системах по определенным ключевым словам и, соответственно, получить трафик (поток целевых посетителей). Но достаточно ли этого продаж? Однозначно нет, должна быть соблюдена еще масса условий. Вот только основные из них.<br> <br> 1. <em>Позиционирование.</em> Необходимо, чтобы потенциальный клиент, введя поисковый запрос и перейдя на сайт, попал на страничку, отвечающую его ожиданиям. Если на протяжении нескольких секунд он не поймет, в чем суть предложения компании, магазина или сервиса, он покинет сайт. Вот пару примеров неудачного позиционирования:</p> <ul> <li>заявлен "широкий ассортимент", однако на деле он скуднее, чем у конкурентов; </li> <li>заявлено элитное позиционирование, однако товары или услуги подобной категории отсутствуют или почти отсутствуют; </li> <li>сайт сервисной компании благодаря огромным блокам новостей воспринимается второсортным специализированным порталом; </li> <li>сайт оптового магазина выглядит точь-в-точь как розничные магазины с аналогичной продукцией; </li> <li>каталог выглядит как обычный блог. </li> </ul> <p><br> 2. <em>Ассортимент.</em> Ассортимент интернет-магазина должен быть достаточным и адекватным, чтобы, снова таки, оправдать ожидания клиента. Скудный, неинтересный ассортимент, много товара в статусе "нет в наличии" (или же отсутствие на складе при статусе "наличие") - все это препятствует продажам, каким бы ни был трафик посетителей. <br> <br> 3<em>. Ценовая политика и ценность предложения.</em> Обычно покупатели принимают решение о покупке онлайн, учитывая цену на товар, условия доставки и степень доверия к магазину. Проверить цены в разных магазинах очень просто &ndash; для этого есть множество сервисов сравнения цен, а можно проверять и вручную. Часть же потребителей ориентируется исключительно на цену товара и условия доставки. Поэтому наличие более низких цен у конкурентов, более выгодных условий доставки или более известной торговой марки &ndash; причины, по которым покупки могут не совершаться даже при большом потоке посетителей. На В2В рынке причина плохих продаж при хорошей посещаемости может заключаться или в дороговизне предложения, или в его несоответствии потребностям клиентов.<br> <br> 4. <em>Юзабилити сайта (</em>навигация, удобство выбора и оформления товара и т. д). Помешать совершению покупок может масса внутренних проблем сайта. Например &ndash; неудобная навигация, которая не позволяет быстро найти интересующий товар, описание услуги и все необходимые условия. Или неудобная, запутанная, либо слишком навязчивая форма оформления покупки. Многие предприниматели оказываются в шоке, с помощью сервисов аналитики на подобии Google Analytics узнав, какой процент клиентов прерывает заказ именно при его оформлении. <br> <br> В случае с корпоративным сайтом проблемой может стать размещение важной информации в "глухих" зонах сайта, чрезмерная длина страниц, запутанная навигация и т. д. Существует несколько десятков причин, по которым сайт способен терять заказчиков, даже при наличии хорошего ассортимента, выгодных предложений и выгодной ценовой политике. В совокупности подобные проблемы вполне могут привести к потере 80-90% клиентов.<br> <br> 5. <em>Работа менеджеров.</em> Конечно же, в огромной мере уровень продаж зависит от менеджеров по продаже, их квалификации и личностных качеств. В нашей стране высокомерие, дешевые манипуляции, некомпетентность, неуважительное отношение, невнимательность, медленность в подготовке коммерческих предложений и т. д . со стороны менеджеров &ndash; не экзотика, они сплошь и рядом. Особенно &ndash; если это сотрудники небольших магазинов и компаний, никогда в жизни не проходивших тренингов по продажам. <br> <br> 6. <em>Известность и репутация.</em> В неизвестных магазинах и компаниях заказы совершают менее охотно. В понимании покупателя риски быть обманутым, получить некачественный товар или услугу, иметь проблемы с возвратом или сервисным обслуживанием снижаются по мере возрастания известности компании. Поэтому, если представленная в Сети компания либо интернет-магазин вкладывает средства только в товарную рекламу и не вкладывает в имиджевую, она имеет меньшую конверсию посетителей в заказчиков, чем их более известные конкуренты. <br> <br> В большой мере влияет на уровень продаж репутация. Хорошая репутация повышает конверсию, количество повторных заказов. Если же в Сети размещено много "гадости" о компании (негативные отзывы на форумах, в сообществах социальных сетей или даже на самом сайте компании, если политика редактирования отзывов слишком демократичная) - не стоит удивляться, что продажи плохие. В случае с интернет-магазинами, то, наверное, ничто не портит репутацию хуже, чем частое отсутствие товара на складе при статусе "в наличии".<br> <br> <b>Миф 2. Позиции появляются сразу</b><br> <br> SEO-продвижение &ndash; длительный процесс, обусловленный инертностью поисковых систем. В среднем, поисковики индексируют "свежие" сайты раз в 2 недели. То есть через две недели после проведения SEO-оптимизации обычно появляются первые результаты работы. На позиции начинаю выходить низкорейтинговые слова. Однако в случае со средне- и высококонкурентными запросами, продвижение займет месяцы, поскольку сайт начинает "плотно" конкурировать с другими. При этом у поисковых систем свое понимание скорости, с которой сайт может подниматься в поисковых результатах. Если она превышается, сайт по подозрению в "накрутке" авторитетности может попасть под так называемые фильтры, то есть поисковик может прекратить отображать его. <br> <br> Еще один важный нюанс &ndash; если сайт выводится по высокорейтиговым поисковым запросам, его позиции несколько месяцев будут нестабильными, то есть колебаться в пределах нескольких значений. Но чем дольше сайт продвигается, тем стабильнее становятся его позиции.<br> <br> Поэтому, заказывая SEO, стоит реалистично оценивать сроки и помнить о сезонности бизнеса. И, конечно же, SEO не годится для промо краткосрочных рекламных акций.<br> <br> <b>Миф 3. Сеошники дают 100% гарантии </b></p> <p>Нередки случаи, когда SEO- оптимизаторы обещают 100% гарантию выведения сайта на нужные позиции по всем выбранным ключевым словам. Какие шансы, что эти гарантии будут выполнены? Давайте разберемся. Продвижение сайтов &ndash; процесс, у которого есть одна неконтролируемая составляющая: собственно поисковики. Огромные подразделения Google и Яндекса ежедневно работают над изменением алгоритма своих поисковых систем. И ни одно SEO-агентство не знает, какие изменения будут введены завтра, а также - насколько успешно удастся отреагировать на них. Это лишь одна причина. Препятствовать продвижению сайта по отдельным словам может ограниченный ресурс агентства (к примеру, если за первые три позиции по одному высокорейтинговому слову борется 5 или 7 подрядчиков) или невозможность изучить на 100% действующие алгоритмы поисковиков, а значит, в отдельных случаях - необъяснимая проблема с выведением сайта по определенным словам.</p> <p>Поэтому обещанные гарантии могут свидетельствовать лишь о безответственности подрядчика. Рынок SEO быстро растет, конкуренция на нем уже очень высокая. И немало "специалистов" готовы завоевать клиента любой ценой, пусть даже надавав неоправданных обещаний. Их логика проста: пусть часть клиентов уйдет, так и не дождавшись выполнения гарантий, но перед частью клиентов выполнить обязательства удастся, и они останутся. <br> <br> На цивилизованном же рынке SEO-услуг 100% гарантий выведения и поддержки позиций агентства не дают. (В случае, если сайт не выходит на позиции по каким-то словам, за раскрутку по ним возвращают средства ). Чтобы удостовериться в этом, достаточно рассмотреть предложения ведущих 10-20 студий. <br> <br> "А как же время, потерянное мною на раскрутку?" - спросит кто-то. Тут нужно уточнить несколько нюансов. Во-первых, если сайт, допустим, раскручивается по 20 словам, а не выходит на позиции по 2-м, практически всегда можно подобрать альтернативные запросы. Ведь основная цель для клиента - не позиции, а количество посетителей (трафик) и конверсия их в покупателей. Во-вторых, никогда не стоит делать ставку на один рекламный инструмент. Лучше использовать так называемый маркетинг-микс из различных инструментов. Это позволяет охватывать разные аудитории, достигать разных маркетинговых целей, снять риск остановки притока клиентов в случае, если какой-то один инструмент перестанет "работать". Эффективное решение - использование контекстной рекламы в период, пока сайт выводится на позиции в поисковиках. Это поможет как подстраховаться на случай, если сайт не выйдет по всем словам или раскрутка займет больше времени по каким-то причинам, так и привлекать посетителей, пока позиций еще нет.</p> <p><b>Миф 4. </b><b>SEO</b><b>&ndash; это забота исключительно подрядчика </b><br> <br> Конечно же, выведение и поддержки сайта на позициях &ndash; это обязанности подрядчика. Однако процесс привлечения посетителей, когда позиции уже появляются, требуют от заказчика понимания и контроля. Имеется в виду, что ему необходимо проводить анализ посещаемости по ключевым словам, конверсии по ним (процента посещений, которые привели к заказам), контроля эффективности продвигаемых страниц, и т. д. В этом помогают сервисы аналитики (например - Google Analytics). Без таких действий будет невозможно корректировать поисковые слова, их объем, оценивать эффективность "страниц приземления", формировать бюджет на продвижение. И, конечно же, будет невозможно оценивать возврат на инвестиции в SEO, выделяя его среди других маркетинговых инструментов компании или магазина. <br> <br> <b>Миф 5. Позиции &ndash; это навсегда</b><br> <br> Некоторые клиенты считают, что достаточно дождаться выведения сайта на позиции, чтобы отказаться от услуг оптимизаторов. А сайт останется в ТОПе и будет приносить прибыль бесплатно. Это не так. Проведенная оптимизация сайта, конечно же, навсегда улучшит его воспринимаемость поисковыми системами. Однако динамика нахождения сайта на позициях после прекращения поддержки (снятия ссылок и не реагирования на изменения алгоритмов поисковых систем) &ndash; самая что ни есть хроника пикирующего бомбардировщика. Позиции будут падать, быстро или не очень.</p> <p>Вы скажете, что SEO-продвижение сайтов &ndash; сложный и не всегда прогнозируемый инструмент? Это правда! Тем не менее, объем рынка SEO очень быстро растет. А все потому, что SEO-продвижение позволяет получать мощный поток посетителей и добиться самой низкой стоимости привлечения целевого посетителя и покупателя.</p> <p>Виталий Шевелев, агентство интернет-решений "Идеал"</p> https://fozzy.ucoz.com/blog/5_mifov_o_seo_prodvizhenii_sajtov/2011-05-18-26 Продвижение сайта fozzy https://fozzy.ucoz.com/blog/5_mifov_o_seo_prodvizhenii_sajtov/2011-05-18-26 Wed, 18 May 2011 07:44:28 GMT <p>Очень хорошие советы по сдаче поектов. На столько хорошие, что я решил их скопировать себе на сайт, сделать какбы зметку. Автор: <a class="red" href="http://www.cmsmagazine.ru/dialogue/persons/person_info/?person_id=80" title="Игитян Тачат">Игитян Тачат</a></p> ... <p>Очень хорошие советы по сдаче поектов. На столько хорошие, что я решил их скопировать себе на сайт, сделать какбы зметку. Автор: <a class="red" href="http://www.cmsmagazine.ru/dialogue/persons/person_info/?person_id=80" title="Игитян Тачат">Игитян Тачат</a></p> $CUT$ <h2>1. Определите цели и задачи проекта и тщательно все опишите</h2> <p><em>Брифинг</em> – цели и задачи проекта, пожелания клиента.</p> <p>Это один из самых главных шагов, так как, если не определить цель проекта, то проект либо никогда не закончится, либо будет мертворожденным.</p> <p>Соберите всех со стороны клиента: бизнес руководителей, руководителей подразделений, в общем всех, кто имеет отношение к бизнесу и к данному проекту в частности. Узнайте максимально все о бизнесе клиента: бизнес-процессы, бизнес задачи, маркетинговые планы и т.д.</p> <p>Более того, в такие моменты, клиент сам понимает, что он хочет от данного проекта. Особенно это важно, если со стороны клиента над проектом будут работать несколько человек и подразделений. Не всегда на момент начала проекта данные структуры имеют единое видение целей и задач проекта, который вы реализуете.</p> <p><em>Художественное задание</em> – опишите итоге брифинга в данном документе, который по сути является описание проектирования проекта. Опишите все визуальные пожелания клиента, требования компании (бренд бук). Добавьте раздел с перечнем всего контента и материалов клиента. Это поможет выявить истинную ситуацию по контенту.</p> <p><em>Техническое задание</em> – это документ, который должен содержать полное описание функционала модулей. Только функционал модулей, не более.</p> <h2>2. Соберите весь контент</h2> <p>Контент является основной проблемой. Клиент всегда думает, что контент есть, а на самом деле его практически никогда нет. А если нет контента, невозможно сделать грамотное проектирование и дизайн для дальнейшего проекта!!! Дизайн в понимании «красота» – это лишь 20%, все остальное – это проектирование. Хороший дизайн – это грамотно спроектированный интерфейс для быстрого доступа к информации и решения задач, которые поставлены перед данным проектом.</p> <p>Резюмируя, качество сайта зависит от контента. Соберите весь контент!</p> <h2>3. Разбейте проект на этапы</h2> <p>Чем больше этапов, тем лучше. Каждый этап должен быть целостной версией, которую можно будет показать клиенту. Данный подход позволяет:</p> <ul> <li>корректировать проект во время разработки;</li> <li>правильнее организовать проект;</li> <li>и в итоге, получить более современный проект.</li> </ul> <h2>4. Составьте четкий тайминг</h2> <p>Только четкое разграничение по времени приведет к успеху. Разделите этапы по срокам как для своих разработчиков, так и для клиента. Все задачи должны быть сделаны в срок, если хотите сдать весь проект в срок. Контролируйте как тайминг по своим задачам, так и по задачам клиента. Помните, что сроки «правят миром». И не забывайте, что всегда нужно иметь резерв, и deadline не должен совпадать с redline!</p> <h2>5. Соберите команду</h2> <ul> <li>Только настоящие профессионалы могу разработать профессиональный проект. Посмотрим, кто должен участвовать в проекте:</li> <li>Менеджер проекта – человек, который будет руководить самим проектом Соответственно, это вы.</li> <li>Проектировщик – специалист, который полностью спроектирует весь проект.</li> <li>Арт-директор – специалист, который контролирует процесс дизайна и качество конечной концепции.</li> <li>Технический дизайнер – ну тут и так все понятно.</li> <li>Технический директор – специалист, который отвечает за качество технической части проекта.</li> <li>Верстальщик – и тут всем ясно, кто это.</li> <li>Программист – с помощью данного специалиста проект обзаведется сервисами и программной частью.</li> <li>Контент менеджер – благодаря данному специалисту, контент будет качественно размещен на нашем проекте.&nbsp;</li> </ul> <h2>6. Организуйте каналы общения команды</h2> <p>Крайне важно организовать каналы для общения команды.</p> <ul> <li>Basecamp, worksection – системы online project management–а, которые позволят в режиме реального времени следить за задачами разработчиков, а также, станут общей средой для общения и обмена файлами.</li> <li>Skype chat room – удобная вещь для быстрых комментариев и общения в целом</li> <li>White Board (белая доска) – это самая удобная вещь, которую придумало человечество для ведения проектов.&nbsp;Нет ничего лучше живой доски, листочков с задачами!!! Тактильные ощущения еще никто не отменял.</li> </ul> <h2>7. Общайтесь, дружите с командой, но не забывайте что вы – руководитель.</h2> <p>Почему-то многие менеджеры считают, что их роль – это только ходить, пинать и орать на людей. Это плохие менеджеры. Настоящий профессионал дружит с командой, общается и хвалит разработчиков. Поверьте, просто «спасибо» иногда работает лучше, чем даже премия. Поблагодарите свою команду за хорошо выполненную работу, и вы заметите, как у всех повышается настрой и производительность в целом.</p> <h2>8. Будьте всегда в курсе состояния проекта</h2> <p>Вы должны ответить на <b>любой</b> вопрос клиента в <b>любой</b> момент. Клиент должен видеть и понимать, что вы контролируете весь проект и знаете, что в нем творится, а не пустили все на самотек. Только такой подход покажет вашу профессиональность и повысит лояльность клиента к вам, как к партнеру.</p> <h2>9. Управляйте изменениями в проекте</h2> <p>Если вы хотите разработать качественный и современный проект, то помните, что в процессе разработки всегда будут изменения, так как проект – это живая сущность, такая же, как и бизнес клиента. За период разработки может видоизмениться бизнес клиента, появятся новые технологии и т.д. Всегда прогнозируйте данные вещи и решайте задачи, которые могут появиться.</p> <h2>10. Общайтесь с клиентом, вам должны доверять</h2> <p>Задавайте вопросы по бизнесу клиента, отвечайте на его вопросы, поздравляйте с праздниками и т.д. Только доверительные отношения могут привести к хорошему проекту и его удачному запуску.</p> <h2>11. Научитесь говорить НЕТ клиенту</h2> <p>Клиент НЕ всегда прав. Запомните эти слова. К вам обратились как к профессионалу, соответственно, вы должны стоять горой за ваши решения. Нельзя идти на поводу у клиента. Объясняйте, почему именно так, а не иначе. На каждое замечание задавайте вопрос «Как данное изменение принципиально зависит от бизнес задачи?». Если клиент отвечает на данный вопрос, то в этом случае нужно прислушаться к нему и скорректировать решение. Если ответа нет или он абстрактен, стойте на своем.</p> <h2>12. Никогда не «учите» клиента</h2> <p>Знайте грань между защитой своего решения и унижением клиента (демонстрацией его непрофессионализма в вашей сфере).&nbsp;От того, что вы унизите клиента, проект быстрее не сдастся.</p> <h2>13. Научитесь говорить «извините»</h2> <p>Это вообще больная проблема России. Люди не умеют извиняться и признавать свои ошибки. Если вы допустили ошибку или оплошность, извинитесь перед клиентом и скажите правду. Нельзя обманывать клиента. Он будет думать, что все хорошо, а на самом деле все настолько плохо, что пора кричать «караул!». Не допускайте такого. Если вы не попадаете по срокам, или что-то пошло не так, как должно было, скажите об этом клиенту и обсудите с ним решение проблемы.&nbsp;</p> <h2>14. Будьте в курсе изменений бизнеса клиента</h2> <p>Предложите вовремя нужное нововведение, и клиент станет вашим практически навсегда.</p> <p>Представим случай: вы делаете сайт крупного банка, в состав которого входят 4 других банка, и это нужно отразить на сайте. Но во время разработки проекта клиент покупает еще 1 банк, и это тоже нужно отразить на сайте. И если именно в такой момент вы сами, без указки клиента, отреагируете на данный повод, то клиент увидит в вас реального партнера и поймет, что вы не просто разработчик, а его партнер в построении бизнеса в интернете. При таких отношениях, он будет работать только с вами, так как вы бережно относитесь к нему и к его бизнесу.</p> <p>Или другой вариант: появились новые технологии, которые очень желательны для клиента. Что вам стоит предложить данные услуги клиенту и рассказать, почему и как нужно использовать данные технологии (например iPhone-версия сайта, либо iPad-версия). Опять же, он увидит, что вы хотите развития его бизнесу, и вы очень сильно выиграете от этого.</p> <h2>15. Никогда не показывайте прототипы дизайна</h2> <p>К сожалению, наши люди не умеют воспринимать прототипы и промежуточные варианты дизайна. Как бы вы не объясняли, что это не конечный вариант, все равно будет конфликт, связанный с тем, что «эти квадратики непонятны», либо сложится обратная ситуация, когда конечный вариант дизайна «не такой, какой вы уже показывали». Презентуйте только конечный вариант дизайна.</p> <h2>16. Только 1 вариант дизайна</h2> <p>У любой задачи есть только 1 правильное решение. После подробного брифинга и постановки задачи должен быть только 1 вариант, который должен решать все задачи. Только 1 вариант дизайна, который правильно спроектирован в соответствии с задачей, является решением. При правильном решении,&nbsp;в 99% случаев не возникает никаких вопросов по поводу концепции. Если что-то не нравится, требуйте мотивированных комментариев. Только исходя из таких комментариев, можно будет понять, что вы сделали не&nbsp;так. Слова типа «поиграть со шрифтами», «добавить яркости» и т.п. должны быть сразу искоренены из процесса общения, так как они непрофессиональны, и такие правки не закончатся никогда. Услышав любой такой вопрос, &nbsp;спросите «На сколько данные изменения принципиальны со стороны бизнес решения?» и требуйте мотивированного ответа.</p> <h2>17. Никогда не отправляйте дизайн по @ mail</h2> <p>Только личная презентация концепции, в любом противном случае вы получите кучу комментариев и процесс растянется. При личной презентации можно сразу все обсудить, и только при личной презентации вы можете донести все, что хотели показать в концепции.</p> <h2>18. Тестируйте работу перед представлением клиенту</h2> <p>Всегда возникают недочеты во время разработки. Выделите время для их выявления и исправления.&nbsp;Это, опять же, повысит в глазах клиента показатель вашего профессионализма.</p> <h2>19. Всегда подписывайте акты сдачи-приемки работ</h2> <p>Только подписанный документ по сдаче-приемке работ обезопасит вас от нелепых проблем.</p> <h2>20. Отмечайте сдачу проекта.</h2> <p>Всегда отмечайте сдачу проекта с вашей командой :-)</p> <p>П.С. Видео, напоминает рабочий процесс над проектом :)</p> <div class="aligncenter"><iframe width="425" height="349" src="http://www.youtube.com/embed/UZq4sZz56qM" frameborder="0" allowfullscreen></iframe></div> https://fozzy.ucoz.com/blog/20_shagov_do_sdachi_proekta/2011-05-05-25 Разное fozzy https://fozzy.ucoz.com/blog/20_shagov_do_sdachi_proekta/2011-05-05-25 Thu, 05 May 2011 13:42:59 GMT <p>Если вы начинающий дизайнер эти 5 основных советов должны вам пригодиться. Если же вы уже матёрый дизайнер, то если у вас есть время оставьте в комментариях свои советы для тех, кто только начинает свой долгий творческий путь.</p>... <p>Если вы начинающий дизайнер эти 5 основных советов должны вам пригодиться. Если же вы уже матёрый дизайнер, то если у вас есть время оставьте в комментариях свои советы для тех, кто только начинает свой долгий творческий путь.</p>$CUT$ <p> <strong>1. Подготовьте все необходимые файлы и контент. </strong>Для создания сайта, который будет насыщен контентом, очень важно знать объём, с которым придётся работать. Т.к. дизайн будет зависеть от того, какое количество информации хочет клиент отобразить на своём сайте одновременно. Вам необходимо знать какой контент будет статичным, а какой будет меняться. И отталкиваясь от этого думать, где его правильно разместить. </p> <div class="aligncenter"><img src="http://fozzy.ucoz.com/_bl/0/17331056.jpg" alt="необходимые файлы и контент"></div><br><br> <p> <strong>2. Использования различных сеток</strong>, как к примеру, <a href="http://960.gs/">960 grid system</a>, которая стала очень популярной среди дизайнеров. Обороты набирает и ещё одна сетка — <a href="http://978.gs/">978</a>. Если вы ещё пока начинающий дизайнер, то эти сетки вам очень помогут, т.к. вам не придётся самому строить весь костяк шаблона, в psd исходниках, которые можно скачать на выше указанных сайтах, вы найдёте уже готовую зарисовку, которая позволит вам поверх наносить свой дизайн и размещать области контента правильным образом. Более того, вы найдёте вспомогательные файлы стилей, которые облегчат вашу работу с html и css файлами. Конечно, вы можете выходить за рамки и использовать свою основу для шаблона, ведь не все сайты должны быть построены по одинаковым принципам. </p> <div class="aligncenter"><img src="http://fozzy.ucoz.com/_bl/0/88189901.jpg" alt="Использования различных сеток"></div><br><br> <p> <strong>3. Границы, отступы и секции</strong> — всё это необходимо учитывать и продумывать за раннее. Конечно же, где-то вам поможет сетка, а где-то вам придётся самим рассчитывать. Очень важно не забывать про пустое пространство, т.к. сайт заполненный большим количеством информации теряет своё свойство читабельности. Так что правильное продумывание всех внутренних и внешних отступов с красивыми границами поможет вам не сделать из сайта набор текстовых блоков. </p> <div class="aligncenter"><img src="http://fozzy.ucoz.com/_bl/0/02792165.jpg" alt="Границы, отступы и секции"></div><br><br> <p> <strong>4. Шрифты.</strong> Когда ваш сайт наполнен большим количеством контента, лишние элементы дизайна только ухудшат ваше положение. Чтобы избежать такой ситуации вам необходимо правильно подобрать и использовать нестандартные шрифты, которые уже будут вносить перчинку в ваш дизайн. Вы можете смешивать различные стили шрифтов, играться с их размерами и цветом — только не переусердствуйте. </p> <div class="aligncenter"><img src="http://fozzy.ucoz.com/_bl/0/81242673.jpg" alt="Шрифты"></div><br><br> <p> <strong>5. Использование различных форматов</strong>: списки, изображения и реклама. Как вы уже поняли, для сайтов богатых на контент, применяемые правила изменяются. Конечно же, повторения дизайна и прослеживания его везде — это классически правильно, но не всегда. Здесь это может сыграть злую шутку и сделать ваш сайт скучным и не интересным. Поэтому не стоит забывать о картинках, различных списках и, конечно же, рекламе, только не навязчивой. </p> <div class="aligncenter"><img src="http://fozzy.ucoz.com/_bl/0/56328856.jpg" alt="Использование различных форматов"></div><br><br> <p>Внизу приведены 10 примеров прекрасных и очень хорошо продуманных дизайнов такого типа сайтов.</p> <p>1. <a href="http://theswishlife.com/" rel="nofollow" target="_blank">The Swish Life</a></p> <div class="aligncenter"><!--IMG7--><a href="http://fozzy.ucoz.com/_bl/0/71735292.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s71735292.jpg" align="" /></a><!--IMG7--></div><br> <p>2. <a href="http://www.whatisblik.com/" rel="nofollow" target="_blank">What is Blik?</a></p> <div class="aligncenter"><!--IMG8--><a href="http://fozzy.ucoz.com/_bl/0/80982055.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s80982055.jpg" align="" /></a><!--IMG8--></div><br> <p>3. <a href="http://www.nuvographics.com/" rel="nofollow" target="_blank">Nuvographics</a></p> <div class="aligncenter"><!--IMG9--><a href="http://fozzy.ucoz.com/_bl/0/36368543.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s36368543.jpg" align="" /></a><!--IMG9--></div><br> <p>4. <a href="http://www.lordlikely.com/" rel="nofollow" target="_blank">Lord Likely</a></p> <div class="aligncenter"><!--IMG10--><a href="http://fozzy.ucoz.com/_bl/0/93200633.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s93200633.jpg" align="" /></a><!--IMG10--></div><br> <p>5. <a href="http://www.feastongood.com/" rel="nofollow" target="_blank">The Feast</a></p> <div class="aligncenter"><!--IMG11--><a href="http://fozzy.ucoz.com/_bl/0/16726933.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s16726933.jpg" align="" /></a><!--IMG11--></div><br> <p>6. <a href="http://housingworks.org/" rel="nofollow" target="_blank">Housing Works</a></p> <div class="aligncenter"><!--IMG12--><a href="http://fozzy.ucoz.com/_bl/0/37830379.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s37830379.jpg" align="" /></a><!--IMG12--></div><br> <p>7. <a href="http://www.livestream.com/" rel="nofollow" target="_blank">Live Stream</a></p> <div class="aligncenter"><!--IMG13--><a href="http://fozzy.ucoz.com/_bl/0/75922716.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s75922716.jpg" align="" /></a><!--IMG13--></div><br> <p>8. <a href="http://simplifiedsafety.com/" rel="nofollow" target="_blank">Simplified Safety</a></p> <div class="aligncenter"><!--IMG14--><a href="http://fozzy.ucoz.com/_bl/0/41571062.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s41571062.jpg" align="" /></a><!--IMG14--></div><br> <p>9. <a href="http://designshack.co.uk/" rel="nofollow" target="_blank">Design Shack</a></p> <div class="aligncenter"><!--IMG15--><a href="http://fozzy.ucoz.com/_bl/0/50541618.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s50541618.jpg" align="" /></a><!--IMG15--></div><br> <p>10. <a href="http://www.newyorker.com/" rel="nofollow" target="_blank">The New Yorker</a></p> <div class="aligncenter"><!--IMG16--><a href="http://fozzy.ucoz.com/_bl/0/63890343.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://fozzy.ucoz.com/_bl/0/s63890343.jpg" align="" /></a><!--IMG16--></div><br> https://fozzy.ucoz.com/blog/kak_sozdat_dizajn_sajta_sovety/2011-04-28-24 Дизайн fozzy https://fozzy.ucoz.com/blog/kak_sozdat_dizajn_sajta_sovety/2011-04-28-24 Thu, 28 Apr 2011 08:49:30 GMT