tag:blogger.com,1999:blog-227166102024-09-10T00:22:51.159+04:00Находки по веб разработке ...Находки, заметки, полезные статьи в принципе для себя , чтоб не забыть, хорошо если еще кому пригодится )Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.comBlogger24125tag:blogger.com,1999:blog-22716610.post-14080636859701976042011-06-28T00:13:00.002+04:002011-06-28T00:13:31.156+04:00Перенос сайта на MODx на новый хостинг<div dir="ltr" style="text-align: left;" trbidi="on"><br /> Перенос сайта на основе cms ModX на новый сервер можно поделить на три этапа:<br /> 1)&nbsp;&nbsp; перенос файлов<br /> 2)&nbsp;&nbsp; перенос таблиц базы данных (БД)<br /> 3)&nbsp;&nbsp; дополнительная настройка в административной панели<br /> <em><span style="color: purple;">Перенос файлов</span></em><br /> <br /> Перенесите все файлы сайта со старого хостинга, на новый. После этого, нужно сделать следующее:<br /> 1) Изменить в файле конфигураций (<em>manager/includes/config.inc.php</em>) доступы к БД, а точнее следующие строки (что нужно изменить, выделено жирным шрифтом):<br /> <br /> &nbsp; &nbsp; &nbsp;$database_server = '<strong>localhost</strong>'; <br /> &nbsp; &nbsp; &nbsp;$database_user = '<strong>логин к базе данных</strong>';<br /> &nbsp; &nbsp; &nbsp;$database_password = '<strong>пароль к базе данных</strong>';<br /> &nbsp; &nbsp; &nbsp;$dbase = '`<strong>modx</strong>`';&nbsp; <br /> <br /> 2) Установить права на следующие папки и файлы: <br /> &nbsp; &nbsp; &nbsp;assets/cache/ — 777<br /> &nbsp; &nbsp; &nbsp;assets/cache/siteCache.idx.php — 666<br /> &nbsp; &nbsp; &nbsp;assets/cache/sitePublishing.idx.php — 666<br /> &nbsp; &nbsp; &nbsp;assets/images/ — 777<br /> &nbsp; &nbsp; &nbsp;assets/export/ — 777<br /> &nbsp; &nbsp; &nbsp;manager/includes/config.inc.php — 444<br /> <br /> 3) Файл .htaccess (возможно не придётся менять)<br /> Если путь от домена до корня сайта изменился, то исправить этот путь:<br /> &nbsp; &nbsp; &nbsp;RewriteEngine On<br /> &nbsp; &nbsp; &nbsp;RewriteBase <strong>/modx/</strong><br /> <br /> Если Вы используете дополнительные редиректы, также следует исправить в них название домена (если изменился домен при переносе).<br /> <br /> <em><span style="color: purple;">Перенос таблиц базы данных</span></em><br /> <br /> Делаем экспорт таблиц нашего сайта. Есть два варианта:<br /> 1) На старом хостинге заходим в PhpMyAdmin (или воспользуемся другой привычной программой) и делаем экспорт таблиц нашего сайта<br /> <br /> 2) или заходим в административную панель ModX. Переходим во вкладку: <span style="text-decoration: underline;">Инструментарий—&gt;Резервное копирование</span>.<br /> Перед нами раскрывается список таблиц БД. Выделяем таблицы нашего сайта, или, если в БД лежит только один сайт, то все таблицы (для этого ставим галочку возле заголовка столбца «Имя таблицы»).<br /> Чуть выше таблицы есть ссылка «Нажмите для скачивания резервной копии базы данных».<br /> Нажимает на неё. Нам будет предложено сохранить файл; cохраняем.<br /> <br /> На новом хостинге воспользуемся PhpMyAdmin-ом и сделаем импорт таблиц сайта.<br /> <br /> <em><span style="color: purple;">Дополнительные настройка в административной панели</span></em><br /> <br /> В административной панели нужно изменить физический путь к корню сайта.<br /> <br /> Если Вы его знаете — отлично. Если нет, то можно быстро узнать, воспользовавшись PHPinfo. Переходим во вкладку:<br /> <span style="text-decoration: underline;">Отчёты-&gt;Системная информация-&gt; phpInfo()&nbsp; &nbsp;Просмотр</span><br /> Из таблицы «Apache Environment» берём значение переменной DOCUMENT_ROOT.<br /> Если сайт расположен не в корневой папке, то присоединяем путь от домена до корня сайта.<br /> Например, из поля DOCUMENT_ROOT вы получили значение: <em>/home/users/user11/domains/mysite.ru/html</em><br /> Но для того, чтобы попасть на Ваш сайт, нужно ввести в браузер не такой URL:<br /> <span style="color: black;"><a href="http://mysite.ru/" target="_blank">http://mysite.ru</a></span><br /> А такой <span style="color: black;"><a href="http://mysite.ru/modx/" target="_blank">http://mysite.ru/modx/</a></span><br /> Соответственно и к физическому адресу Вашего сайта следует дописать папку /modx/<br /> То есть полный адрес будет такой:<br /> <em>/home/users/user11/domains/mysite.ru/html/modx/</em><br /> <br /> Если Ваш сайт лежит в корне сайт, то просто допишите слеш к полученному Вами пути из phpInfo():<br /> <em>/home/users/user11/domains/mysite.ru/html/</em><br /> <br /> Это и есть наш физический адрес сайта.<br /> <br /> Переходим в раздел <span style="text-decoration: underline;">Инструментарий-&gt;Конфигурации</span>.<br /> <br /> Во вкладке «Другое» в поле «Путь для файлового менеджера» прописываем физический путь к сайту.<br /> <br /> Похожую процедуру выполняем во вкладке «Настройки HTML-редактора и интерфейса» в поле «Путь к файлам:» прописываем физический “путь”+”assets/”<br /> Например: <em>/home/users/user11/domains/mysite.ru/html/assets/</em><br /> <br /> И напоследок, не забываем сделать очистку кеша сайта:&nbsp; <span style="text-decoration: underline;">Сайт-&gt;Обновить сайт.</span></div>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-81929178384755366472011-02-16T15:02:00.000+03:002011-02-16T15:02:50.061+03:00Бесплатная регистрация сайта в поисковиках Yandex, Google, Rambler - Зарегистрировать сайт в поисковых системах<a href="http://ab-w.net/site_seo2.php">Бесплатная регистрация сайта в поисковиках Yandex, Google, Rambler - Зарегистрировать сайт в поисковых системах</a>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-71410959805508881262011-01-13T13:12:00.001+03:002011-01-13T13:12:05.447+03:00Cross browser text shadow \ Кросс браузерная тень для текста&nbsp;&nbsp;&nbsp; -moz-text-shadow: 1px 1px 1px #000;<br /> &nbsp; -webkit-text-shadow: 1px 1px 1px #000;<br /> &nbsp;text-shadow: 1px 1px 1px #000;<br /> &nbsp; /* For IE 8 */<br /> &nbsp;-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')";<br /> &nbsp;/* For IE 5.5 - 7 */<br /> &nbsp;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000');Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-72219946826573100062011-01-11T23:19:00.000+03:002011-01-11T23:19:37.321+03:00Корзина заказов с использованием jQuery и PHPhttp://cart.99points.info/<br /> <br /> <img alt="Корзина заказов" height="498" src="http://efimov.ws/assets/images/develop/script/2011/01/03/10.jpg" title="Корзина заказов" width="650" /><br /> Решение для&nbsp; корзины в интернет-магазине.Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-45501161609525487492011-01-04T14:13:00.001+03:002011-01-04T14:14:28.084+03:00Выравнивание горизонтального меню (или пейджера) по центру страницы<div class="content">Многим новичкам кажется очень сложным выровнять горизонтальное меню (пейджер) по центру веб-страницы. Из-за этого появилось много вариантов центрирования с помощью хаков и с использованием яваскрипт-программирования. <br /> <a name='more'></a>На самом деле все намного проще. Это делается с использованием чистого CSS. Необходимо немного разобраться с относительным позиционированием и с правилом float. Итак, имеем html-код:<br /> <blockquote><pre class="bb-code-block"><div><ul><li><a href="http://www.blogger.com/post-create.g?blogID=22716610#">Вкладка один</a></li> <li><a href="http://www.blogger.com/post-create.g?blogID=22716610#">Вкладка два</a></li> <li><a href="http://www.blogger.com/post-create.g?blogID=22716610#">Вкладка три</a></li> <li><a href="http://www.blogger.com/post-create.g?blogID=22716610#">Вкладка четыре</a></li> </ul></div></pre></blockquote>Для начала, применим обычные правила CSS, чтоб выстроить меню по горизонтали:<br /> <blockquote><pre class="bb-code-block">div {border-bottom:1px solid orange; float:left; width:100%} ul {margin:0;padding:0;} ul li {float:left;list-style:none;} ul li a {display:block;padding:5px;text-decoration:none; border-right:1px solid #fff;background:yellow}</pre></blockquote><a class="bb-url" href="http://cssmaster.ru/files/menu/menu1.html">Имеем такое меню</a>.<br /> Пункты меню прижались к левой стороне браузера. Это поведение легко предсказуемо.<br /> Сейчас нужно обратить внимание на 2 момента, на которых и строится способ центрирования меню:<br /> 1. В относительном позиционировании, процент смещения зависит от ширины родителя.<br /> 2. Ширина родителя, к которому применено свойство float, будет соответствовать сумме длин дочерних плавающих элементов.<br /> Этого вполне хватит, чтоб добиться желаемого результата.<br /> Применим к ul свойство float:left и его ширина будет равна сумме длин всех li которые находятся внутри. Затем применим к нему относительное позиционирование и сместим его вправо на 50%. Список сместится на половину ширины окна браузера. После этого применим относительное позиционирование к самим пунктам меню li и сместим их влево на 50%, но сейчас смещение произойдет не на половину ширины окна браузера, а наполовину ширины элемента ul. Таким образом мы получим горизонтальное меню, выровненное по центру окна браузера. Остался последний штрих. Из-за смещения элемента ul, могла появится горизонтальная полоса прокрутки, поэтому для обертывающего элемента div необходимо применить свойство overflow:hidden. Еще 1 штрих - к контейнеру div применяем свойство position:relative, чтоб решить проблемы кроссбраузерности в ие7 и ниже (спасибо Dench).<br /> Получился такой CSS:<br /> <blockquote><pre class="bb-code-block">div {border-bottom:1px solid orange; float:left; width:100%; overflow:hidden;position:relative} ul {margin:0;padding:0; float:left; position:relative; left:50%} ul li {float:left;list-style:none; position:relative; right:50%} ul li a {display:block;padding:5px;text-decoration:none; border-right:1px solid #fff;background:yellow}</pre></blockquote>Можно <a class="bb-url" href="http://cssmaster.ru/files/menu/menu.html">посмотреть</a> на результат.<br /> Этот способ корректно отображается всеми популярными браузерами и с успехом проходит проверку на валидаторе. Буду рад, если пост оказался кому-то полезен.</div>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com2tag:blogger.com,1999:blog-22716610.post-46759662218660544652011-01-03T23:14:00.002+03:002011-01-03T23:14:51.758+03:00Cufon в двух словах<div class="post"><h1><br /> </h1><i>Cufon</i> конвертируют свой нестандартный шрифт в свой внутренний формат, и потом отображают сконвертированный шрифт с помощью canvas в современных браузерах и VML в Internet Explorer’е. Большой плюс такого подхода в том, что не нужен плагин для отображения flash. По сравнению с sIFR <i>cufon</i> обладает большей скоростью и работает абсолютно на всех компьютерах.<br /> <a name='more'></a><span id="more-42"></span><br /> <i>Cufon</i> состоит из двух независимых друг от друга частей:<br /> 1) генератор шрифта (преобразовывает стандартный шрифт в формате TTF или OTF в некоторый промежуточный формат, который и будет в дальнейшем использоваться);<br /> 2) движок рендеринга на javascript.<br /> <i>Cufon</i> подключается очень просто, требуется всего лишь подключить всего два javascript файла, и все, можно наслаждаться.<br /> Всем рекомендую использовать для отображения нестандартных шрифтов именно<i> Cufon</i>, т.к. это самый простой и быстро действенный способ способ отобразить нестандартный шрифт во всех браузерах.<br /> Более детально вопрос о подключении <i>Cufon</i>, рассмотрен на <a href="http://htmlcss.com.ua/forum/html-css-faq/cufon-connect-non-standard-fonts/">форуме html css</a></div>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-61956013291508208992010-10-30T18:05:00.000+04:002011-01-04T14:16:45.982+03:00Полезные сервисы для web-разработчика и не только. Страница в закладки<h1></h1>По мере того, как человек «обживается» в Интернете, у него появляются любимые сервисы, которые могут помочь с выполнением какой-либо задачи. Это очень приятно, и приносит ему много радости. Но вот беда! Помним-то мы далеко не все интересные штуки, которые повстречались нам на просторах «интернетов». Конечно же, самые распространенные или часто используемые мы будем помнить долго и при необходимости использовать, а как же быть с теми, которые употребляются реже, но так же нам приносят много пользы и экономят время. <br /> Для того, чтобы рационально использовать свое время, и во многом перестать использовать дедовские методы, я вам рекомендую добавлять в закладки полезные ресурсы и периодически их просматривать. Если же по какой-то причине вы все же потеряли то, что так долго собирали, или еще не делали таких коллекций вовсе, можете начать с этого немаленького списка, который очень облегчает жизнь мне.<br /> <i>Внимание! </i>Список будет пополняться. Все ссылки откроются в новом окне.<br /> <a name='more'></a><br /> <h2><span style="font-weight: normal;">Скриншоты</span></h2><ul><li><a href="http://browsershots.org/" target="_blank">BrowserShots</a> — проверьте отображение вашего сайта в разных браузерах.</li> <li><a href="http://ipinfo.info/netrenderer/" target="_blank">IE NetRenderer</a> — Browser Compatibility Check</li> <li><a href="http://www.websnapr.com/" target="_blank">Websnapr 2.0</a> — скриншот для публикации на сайте</li> <li><a href="http://www.archive.org/web/web.php" target="_blank">WayBack Machine</a> — проверить, как выглядел сайт раньше, даже если сайт больше не существует</li> <li><a href="http://makepreview.com/">makepreview</a>&nbsp;— просто загружаете шаблон дизайна и получаете превью в формате любого браузера</li> <li><a href="http://www.webshotspro.com/">WebShotsPro.com</a> — Website Screenshot Generation — Website Thumbnail Service</li> </ul><h2><span style="font-weight: normal;">CSS инструменты</span></h2><ul><li><a href="http://www.codebeautifier.com/">Code Beautifier</a> — инструмент для сжатия CSS-файлов (основанном на проекте CSS Tidy).</li> <li><a href="http://lab.xms.pl/css-generator/">CSS Frame Generator</a> — фреймо-генератор</li> <li><a href="http://www.cleancss.com/">Clean CSS</a> — Optmize and Format your CSS</li> <li><a href="http://sprites.in/">Auto CSS Sprites</a> — сервис по минификации CSS и построению CSS-спрайтов</li> <li><a href="http://duris.ru/" target="_blank">Data URI [CSS] Sprites</a></li> <li><a href="http://xhtml.ru/instr/3col_creator/" target="_blank">Генератор шаблона</a> 1–3 колонки HTML+CSS</li> <li><a href="http://csstool.ru/" target="_blank">Генератор HTML+CSS шаблонов</a> — CSS Layout Generator</li> <li><a href="http://psd2cssonline.com/" target="_blank">psd2css online</a> — генерация верстки из PSD</li> <li><a href="http://www.alvit.de/handbook/#csslayouts" target="_blank">alvit</a> — огромная сборка для работы с CSS, JS, HTML, шрифтами и многое другое при web-разработке (на разных языках)</li> </ul><h2><span style="font-weight: normal;">JavaScript инструменты</span></h2><ul><li><a href="http://dean.edwards.name/packer/" target="_blank">JavaScript Compressor</a> — инструмент для сжатия JS-файлов от Dean Edwards.</li> <li><a href="http://developer.yahoo.com/yui/compressor/">Yahoo! UI Library</a> — YUI Compressor</li> <li><a href="http://fmarcia.info/jsmin/test.html" target="_blank">JS Minifier</a> — JavaScript Minifier от Douglas Crockford</li> <li><a href="http://jslint.com/">JSLint, The JavaScript Verifier</a> — проверка синтаксиса JavaScript</li> <li><a href="http://jsbeautifier.org/" target="_blank">Online javascript beautifie</a></li> <li><a href="http://compressorrater.thruhere.net/" target="_blank">The JavaScript CompressorRater</a></li> </ul><h2><span style="font-weight: normal;">Анализаторы сайта</span></h2><ul><li><a href="http://cy-pr.com/" target="_blank">cy-pr.com</a>&nbsp;— анализ сайта. Определение ТИЦ и PR</li> <li><a href="http://tools.pingdom.com/" target="_blank">Pingdom Tools</a> — анализ времени загрузки страницы</li> <li><a href="http://webo.in/1/" target="_blank">Webo.In</a> — проверь скорость загрузки сайта</li> <li><a href="http://www.octagate.com/service/SiteTimer/" target="_blank">OctaGate SiteTimer</a></li> <li><a href="http://www.websiteoptimization.com/services/analyze/" target="_blank">Web Page Analyzer</a> — free website optimization tool website speed test check website performance report from web site optimization</li> <li><a href="http://mon.itor.us/" target="_blank">mon.itor.us</a> — Free Websites Performance, Availability, Traffic Monitoring</li> <li><a href="http://loadimpact.com/" target="_blank">Load Impact</a> — Free web site load test</li> <li><a href="http://pagetest.patrickmeenan.com:8080/" target="_blank">Pagetest</a> — web page performance test</li> <li><a href="http://www.crazyegg.com/" target="_blank">CrazyEgg</a> — сервис для отслеживания перемещения пользователей по сайту: кто куда кликнул, какие ссылки наиболее популярные и тому подобная разнородная информация для юзабилистов</li> <li><a href="http://userfly.com/" target="_blank">UserFly</a> — даёт возможность визуально посмотреть, что и как делал пользователь на вашей странице. Посмотрите демку, все станет ясно!</li> <li><a href="http://validator.w3.org/checklink" target="_blank">validator.w3.org/checklink</a> — проверяем наличие битых ссылок</li> <li><a href="http://speed.yoip.ru/" target="_blank">Проверка и тестирование скорости интернет соединения</a></li> <li><a href="http://speedtest.net/" target="_blank">Speedtest.net</a> — The Global Broadband Speed Test</li> <li><a href="http://internet.yandex.ru/" target="_blank">Яндекс.Интернет</a> —&nbsp;ваш IP-адрес и скорость интернет-соединения</li> <li><a href="http://whois.domaintools.com/" target="_blank">WHOIS</a></li> <li><a href="http://who.is/" target="_blank">Who.Is</a></li> <li><a href="http://vremenno.net/seo/user-tracking-services/" target="_blank">Сервисы для анализа действий пользователей на сайте</a></li> <li><a href="http://vremenno.net/misc/services-for-site-monitoring/" target="_blank">Сервисы для мониторинга доступности сайта</a></li> </ul><h2><span style="font-weight: normal;">Типографика, шрифты, кодировки</span></h2><ul><li><a href="http://www.artlebedev.ru/tools/decoder/" target="_blank">Декодер (Студии Артемия Лебедева)</a> — текст в неизвестной кодировке (нечитабельная каша) становится понятным русским текстом</li> <li><a href="http://www.typetester.org/" target="_blank">Подбор шрифтов, интервалов. цветов и прочего</a>. - сравнение различных вариантов</li> <li><a href="http://rmcreative.ru/typograph" target="_blank">Типограф от RMCreative</a> — средство подготовки текстов к web-изданию. Форматирует текст для приведения его к более правильному, с точки зрения типографики, виду</li> <li><a href="http://www.artlebedev.ru/tools/typograf/" target="_blank">Типограф (Cтудии Артемия Лебедева)</a></li> <li><a href="http://www.myfonts.com/WhatTheFont/" target="_blank">What The Font?</a>&nbsp;— определение шрифта по картинке</li> <li><a href="http://www.identifont.com/" target="_blank">Identifont</a> — поиск изображения шрифта по названию и поиск шрифта путем перебора характерных признаков</li> <li><a href="http://fliptitle.com/" target="_blank">Flip Title</a> — переворачиваем символы вверх ногами</li> </ul><h2><span style="font-weight: normal;">On-line офисы</span></h2><ul><li><a href="http://docs.google.com/" target="_blank">Документы Google</a></li> <li><a href="http://www.ulteo.com/home/en/ooo" target="_blank">Ulteo OpenOffice.org launch</a> — My digital life made simple</li> <li><a href="http://www.zoho.com/" target="_blank">zoho.com</a> — Online Office, Word Processor, Spreadsheet, Presentation, CRM and more</li> <li><a href="http://etherpad.com/" target="_blank">EtherPad: Realtime Collaborative Text Editing</a></li> </ul><h2><span style="font-weight: normal;">Подбор цветовых сочетаний</span></h2><ul><li><a href="http://etherpad.com/" target="_blank">Adobe Kuler</a> — цветовой микшер, инструмент, который помогает в выборе цветов для полиграфической, графической, или веб продукции</li> <li><a href="http://colorschemedesigner.com/" target="_blank">Colors Cheme Designer</a> — еще микшер</li> <li><a href="http://colorblender.com/" target="_blank">Подбор цветов (RGB &amp; HSV)</a></li> <li><a href="http://www.colourlovers.com/" target="_blank">Подбор цветов (RGB)</a></li> <li><a href="http://www.colourlovers.com/" target="_blank">Набор готовых цветовых сочетаний</a></li> <li><a href="http://www.degraeve.com/color-palette/" target="_blank">Создаем цветовую схему из графического файла</a></li> </ul><h2><span style="font-weight: normal;">Иконки</span></h2><ul><li><a href="http://www.favicongenerator.com/" target="_blank">Генератор favicon из картинок</a> (в том числе большего размера)</li> <li><a href="http://www.degraeve.com/favicon/" target="_blank">Попиксельный редактор favicon</a></li> <li><a href="http://www.html-kit.com/favicon/" target="_blank">FavIcon from Pics</a> — free favicon.ico for your website (animated, static, text, iPod icons)</li> <li><a href="http://iconza.ru/" target="_blank">iconza</a> — подбери иконки для своего сайта. Бесплатно</li> </ul><h2><span style="font-weight: normal;">Работа с графикой</span></h2><ul><li><a href="http://www.splashup.com/" target="_blank">Splashup</a> — on-line редактор фотографий</li> <li><a href="http://www.pictreat.com/" target="_blank">PicTreat</a> — предназначен для улучшения фотографий. С его помощью вы сможете мгновенно изменить фотографию, убрать эффект красных глаз и внести другие коррективы. При этом достаточно только загрузить фотографию и все</li> <li><a href="http://sumopaint.com/web/" target="_blank">SUMO Paint</a> — функциональный онлайновый аналог Фотошопа</li> <li><a href="http://www.photoshop.com/express/landing.html" target="_blank">Adobe Photoshop Express</a> — Made You Look</li> <li><a href="http://www.picjuice.com/" target="_blank">picjuice.com</a> — online photo editor</li> <li><a href="http://bgpatterns.com/" target="_blank">Tiled backgrounds designer</a> — подбор фонов</li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/" target="_blank">Online Image Optimizer</a> — Optimize your GIFS, JPGS, and PNGS online</li> <li><a href="http://smushit.com/" target="_blank">smush it!</a> — оптимизация картинок</li> <li><a href="http://www.ajaxload.info/" target="_blank">Ajaxload</a> — Ajax loading gif generator</li> <li><a href="http://www.webscriptlab.com/" target="_blank">Web Script Lab</a> — Ajax Loading Gif Generator</li> <li><a href="http://www.stripegenerator.com/" target="_blank">Stripe Generator</a> — Ajax diagonal stripes background designer</li> <li><a href="http://www.gifninja.com/CreateAGif.aspx" target="_blank">gifninja.com</a> — создание анимационной картинки в формате GIF из предоставленных вами файлов</li> <li><a href="http://3d-pack.com/" target="_blank">3D-box maker</a> — 3d-box &amp; package on-line</li> <li><a href="http://www.web20badges.com/" target="_blank">Web 2.0 Badges</a> — Useful collection of stylish web 2.0 badges and badge generator.</li> <li><a href="http://mashable.com/2007/07/24/web-design/" target="_blank">Web Design Toolbox</a> — 50+ Tools for Web Design</li> <li><a href="http://www.degraeve.com/img2txt.php" target="_blank">IMG2TXT: ASCII Art Made Easy!</a></li> <li><a href="http://vremenno.net/misc/loading-icons-generators/" target="_blank">Сервисы для генерации индикаторов загрузки</a></li> <li><a href="http://internetno.net/2009/11/03/onlaynovyiy-fotoshop-13-luchshih-veb-servisov-redaktirovaniya-foto/" target="_blank">Онлайновый фотошоп</a> — 13 лучших веб-сервисов редактирования фото</li> </ul><h2><span style="font-weight: normal;">Логотип</span></h2><ul><li><a href="http://www.mikons.com/" target="_blank">mikons.com</a> — создание логотипа</li> <li><a href="http://web2.0stylr.com/stylr.aspx" target="_blank">Logo Maker</a> — Web 2.0 Stylr</li> <li><a href="http://h-master.net/web2.0/index.php" target="_blank">Web2.0 Logo Creator by Alex P</a></li> </ul><h2><span style="font-weight: normal;">Работа с видео</span></h2><ul><li><a href="http://www.screentoaster.com/" target="_blank">ScreenToaster</a> — Free Online Screen Recorder</li> <li><a href="http://screencastle.com/" target="_blank">Screencastle: скринкасты в два клика</a> — сервис запускает Java-приложение, работающие в фоновом режиме, которое записывает происходящее на экране</li> <li><a href="http://screenr.com/" target="_blank">Screenr</a> — скринкасты для Twitter</li> </ul><h2><span style="font-weight: normal;">Работа с аудио</span></h2><ul><li><a href="http://aviary.com/launch/myna?lang=en" target="_blank">Myna</a> — аудиоредактор в браузере! (<a href="http://internetno.net/2009/09/18/myna/" target="_blank">Myna: мощный аудиоредактор в браузере</a> — для быстрой и качественной записи подкастов или редактирования аудио-файлов)</li> <li><a href="http://audiovkontakte.ru/" target="_blank">Выкачка аудио с Вконтакте</a></li> </ul><h2><span style="font-weight: normal;">Конвертеры</span></h2><ul><li><a href="http://audiovkontakte.ru/" target="_blank">Из чего угодно во что угодно</a> (до 100 Мб)</li> <li><a href="http://www.freepdfconvert.com/" target="_blank">Хороший конвертер в PDF</a></li> <li><a href="http://html-pdf-converter.com/" target="_blank">html-pdf-converter</a> — HTML -&gt; PDF конвертер</li> <li><a href="http://www.docx2doc.com/" target="_blank">docx2doc.com</a> — Convert docx to doc</li> </ul><h2><span style="font-weight: normal;">SEO-сервисы</span></h2><ul><li><a href="http://seodigger.com/" target="_blank">SeoDigger</a> — показывает, по каким ключевым словам сайт находится в ведущих позициях Google</li> <li><a href="http://www.linkdiagnosis.com/" target="_blank">LinkDiagnosis</a> — сервис анализа беклинков</li> <li><a href="http://www.fairshare.cc/" target="_blank">Fairshare</a> — проверяет в сети похожие статьи, для этого достаточно скормить вашу rss-ленту</li> <li><a href="http://www.antiplagiat.ru/" target="_blank">Антиплагиат</a> — проверки текстовых документов на наличие заимствований из общедоступных сетевых источников</li> <li><a href="http://copyscape.com/" target="_blank">Copyscape</a> — Website Plagiarism Search — Web Site Content Copyright Protection</li> <li><a href="http://seopro.com.au/free-seo-tools/new/link-checker/" target="_blank">SEO Tools. Link Checker. Check Backlinks for PR, Anchor &amp; Nofollow</a></li> <li><a href="http://zhilinsky.ru/checkpr/?uri=adw0rd.ru" target="_blank">Проверка Яндекс.тИЦ и Google PR</a></li> </ul><h2><span style="font-weight: normal;">On-line доски</span></h2><ul><li><a href="http://www.twiddla.com/" target="_blank">Twiddla</a> — поинтуитивнее интерфейс, чем у Dabbleboard, но требует регистрации, хотя есть и демка</li> <li><a href="http://www.dabbleboard.com/" target="_blank">Dabbleboard</a> — не требует регистрации</li> <li><a href="http://picbite.com/" target="_blank">Image Hosting, Image Resizer, Crop and Comment Tool, Create Gallery — PicBite.com</a> — сервис наподобии бизнес-линча студии Лебедева</li> <li><a href="http://lynchelka.ru/" target="_blank">Линчелка</a> — это сервис по комментированию картинок в стиле «Бизнес-линча»</li> </ul><h2><span style="font-weight: normal;">Mind Maps</span></h2><ul><li><a href="http://www.xmind.net/" target="_blank">XMind</a> — Social Brainstorming and Mind Mapping</li> <li><a href="http://internetno.net/2009/10/25/mind-maps/" target="_blank">Карты памяти онлайн</a> — 5 способов графического брейн-штурма</li> </ul><h2><span style="font-weight: normal;">Переводчики</span></h2><ul><li><a href="http://translate.google.ru/translate_t" target="_blank">Google. Переводчик</a></li> <li><a href="http://lingvo.abbyyonline.com/ru" target="_blank">Онлайн-словарь ABBYY Lingvo</a></li> <li><a href="http://www.translate.ru/">Promt&nbsp;translate.ru</a></li> <li><a href="http://slovari.yandex.ru/" target="_blank">Яндекс. Словари</a></li> <li><a href="http://www.perevodby.ru/" target="_blank">Perevodby.RU</a></li> <li><a href="http://linguamania.ru/" target="_blank">Изучение английского</a></li> <li><a href="http://www.perevodov.net/" target="_blank">Perevodov NET</a> — электронные переводчики, электронные словари, программы переводчики, самоучители и курсы иностранного языка</li> <li><a href="http://mtagency.ru/" target="_blank">Бюро переводов</a> — устный письменный перевод текстов, юридический и технический перевод, бюро переводов МТА</li> <li><a href="http://www.jayssite.com/stuff/l33t/l33t_translator.html" target="_blank">1337 Translator </a>— Leet транслятор</li> <li><a href="http://internetno.net/2009/03/16/translate-online/" target="_blank">Шпаргалка по онлайн-переводчикам: как не запутаться в языках</a></li> </ul><h2><span style="font-weight: normal;">Поисковые системы</span></h2><ul><li><a href="http://similar-images.googlelabs.com/" target="_blank">Google Similar Images</a> — поиск похожих картинок</li> <li><a href="http://www.exalead.com/image/?js=1&amp;images_per_page=18" target="_blank">Exalead Image Search</a> — поисковик по изображениям</li> <li><a href="http://tineye.com/login" target="_blank">TinEye</a> — поисковик по изображениям</li> <li><a href="http://www.filesearch.ru/" target="_blank">FileSearching.com</a> — Search for files on FTP servers</li> </ul><h2><span style="font-weight: normal;">Управление проектами</span></h2><ul><li><a href="http://assembla.com/" target="_blank">Assembla</a> — Accelerate your team with online workspaces</li> <li><a href="https://opensvn.csie.org/" target="_blank">OpenSVN</a> — сервис предоставляет бесплатно svn-репозитории для ваших проектов</li> <li><a href="http://xp-dev.com/app/" target="_blank">XP-Dev.com</a> — Subversion, Version Control, Subversion Hosting, Version Control Hosting, Project Tracking</li> <li><a href="http://www.basecamphq.com/" target="_blank">Basecamp</a> — Project management, collaboration, and task software</li> <li><a href="http://www.lighthouseapp.com/" target="_blank">Lighthouse</a> — Simple hosted Issue tracking, bug tracking, and project management software</li> <li><a href="http://efimov.ws/activeCollab" target="_blank">activeCollab</a> — Project Management and Collaboration Tool</li> <li><a href="http://vremenno.net/misc/project-management-tools/" target="_blank">Инструменты для управления проектами</a></li> </ul><h2><span style="font-weight: normal;">TV трансляции</span></h2><ul><li><a href="http://zombobox.com/session/new" target="_blank">Zombobox</a></li> <li><a href="http://ru.2onlinetv.com/" target="_blank">ОНЛАЙН ТВ</a></li> <li><a href="http://on-tv.ru/" target="_blank">Интернет ТВ</a> — смотреть телевидение через интернет</li> <li><a href="http://turbofilm.ru/" target="_blank">ТурбоФильм!</a></li> <li><a href="http://www.tvigle.ru/" target="_blank">Интернет–телевидение Tvigle.ru</a></li> <li><a href="http://univertv.ru/" target="_blank">UniverTV.ru</a> — образовательный видеопортал</li> </ul><h2><span style="font-weight: normal;">DNS</span></h2><ul><li><a href="http://ns2.trifle.net/" target="_blank">Регистрация Secondary DNS</a></li> <li><a href="http://xname.org/" target="_blank">XName site</a> — Free DNS Hosting Service</li> <li><a href="http://www.dyndns.com/" target="_blank">DynDNS.com</a> — DNS Hosting, E-mail Delivery, VPS Hosting and Other Services</li> <li><a href="http://www.editdns.net/" target="_blank">EditDNS</a> — Free DNS Hosting</li> <li><a href="http://zoneedit.com./" target="_blank">Free DNS service</a> — Easy, web-based domain manager — ZoneEdit.com</li> <li><a href="http://www.intodns.com/" target="_blank">IntoDNS</a> checks the health and configuration and provides DNS report and mail servers report</li> </ul><h2><span style="font-weight: normal;">RSS утилиты</span></h2><ul><li><a href="http://www.feed43.com/" target="_blank">Feed43</a> — конвертируй любую веб-страницу в новостной канал на лету</li> </ul><h2><span style="font-weight: normal;">Хостинг</span></h2><ul><li><a href="http://www.whoishostingthis.com/" target="_blank">Who is Hosting This?</a> — отображает информацию о хостинге определенного хоста</li> <li><a href="http://www.yougetsignal.com/tools/web-sites-on-web-server/" target="_blank">YouGetSignal.com</a> — покажет, какие сайты находяться на определенной хосте</li> <li><a href="http://geotool.servehttp.com/" target="_blank">Geotool</a> — где географически расположен хост</li> </ul><h2><span style="font-weight: normal;">E-mail и Fax</span></h2><ul><li><a href="http://wm.exchanger.ru/" target="_blank">Email Encryption</a> — Free Secure Email Service — Send™</li> <li><a href="http://www.10minutemail.com/10MinuteMail/index.html" target="_blank">10 Minute Mail</a> — почта на 10 минут (для регистраций и т.д.)</li> <li><a href="http://www.myfax.com/free/" target="_blank">MyFAX</a> - отправка факса</li> </ul>В общем, смело можете добавлять эту страницу в закладки (для добавления просто нажмите <b>Ctrl+D</b>), этот список будет постоянно пополняться.<br /> Чем из этого списка пользуетесь вы?<br /> Может, тут не хватает очень полезных сервисов, которые вы знаете. Оставляйте ссылки в комментариях, не жадничайте.<br /> Кстати, пока не забыл. Этот список может частично перекликаться с уже опубликованным ранее материалом <a href="http://efimov.ws/main/services/95-rusursov-razrabotchiku.html">96 ресурсов, которые облегчат жизнь web-разработчику</a>. Если вы еще её не прочли — <a href="http://efimov.ws/main/services/95-rusursov-razrabotchiku.html">почитайте</a>.Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-73272388232212857142010-10-20T18:04:00.000+04:002011-01-04T14:15:28.759+03:0096 ресурсов, которые облегчат жизнь web-разработчику<h1></h1>У web-дизайнеров успех в большой степени зависит от эффективности рабочего процесса, в прочем, так же, как и у других специалистов. К счастью, существует целый ряд отличных ресурсов, которые сделают вашу жизнь легче, а вашу работу — более быстрой и эффективной. Сегодня предлагаем вашему вниманию 96 полезных ресурсов для web-дизайнера. Конечно же, мы не можем охватить все лучшее в Интернете, но мы попытались охватить как можно больше.<br /> <h2><a name='more'></a>&nbsp;</h2><h2>Инструменты для работы с цветом</h2><ul><li><a href="http://www.colortools.net/color_picker_web-safe.html" target="_blank">Websafe Color Picker Tool</a> </li> <li><a href="http://www.colortools.net/color_mixer.html" target="_blank">Color Mixer Tool</a> </li> <li><a href="http://www.colortools.net/color_close.html" target="_blank">Close Colors Tool</a> </li> <li><a href="http://www.colorschemer.com/schemes/" target="_blank">Color Schemer Gallery</a> </li> <li><a href="http://www.colourlovers.com/" target="_blank">COLOURlovers</a> </li> <li><a href="http://www.digitdesigns.com/colrPick/framePic.htm" target="_blank">Website Color Picker</a> </li> <li><a href="http://redalt.com/Tools/I+Like+Your+Colors" target="_blank">I Like Your Colors</a></li> </ul><h2>Бесплатные CSS меню</h2><ul><li><a href="http://css.maxdesign.com.au/listamatic/" target="_blank">Listamatic</a></li> <li><a href="http://exploding-boy.com/images/cssmenus/menus.html" target="_blank">Exploding Boy</a></li> <li><a href="http://www.dynamicdrive.com/dynamicindex1/indexb.html" target="_blank">Dynamic Drive</a></li> <li><a href="http://13styles.com/category/css-menus/" target="_blank">13 Styles CSS Menus</a></li> <li><a href="http://www.cssplay.co.uk/menus/" target="_blank">Stu Nicholls | CSSplay | CSS only menus</a></li> <li><a href="http://www.cssdrive.com/index.php/main/category/C16/" target="_blank">CSS Drive Gallery</a></li> <li><a href="http://www.alvit.de/web-dev/tabs-and-pure-css-navigation-menus.html" target="_blank">Alvit.de</a></li> <li><a href="http://www.cssmenubuilder.com/">CSS Menu Builder</a></li> </ul><h2>DHTML меню навигации</h2><ul><li><a href="http://www.dynamicdrive.com/dynamicindex1/" target="_blank">Dynamic Drive</a></li> <li><a href="http://deluxe-menu.com/data-templates/vista-style-07-template-sample.html" target="_blank">Vista Style 7</a></li> <li><a href="http://www.smartmenus.org/">SmartMenus</a>&nbsp;</li> </ul><h2>Фотографии для вашего сайта</h2><ul><li><a href="http://gallery.menalto.com/" target="_blank">Gallery</a></li> <li><a href="http://www.sxc.hu/index.phtml" target="_blank">Stock.Xchng</a></li> <li><a href="http://www.bigstockphoto.com/" target="_blank">Big Stock Photo</a></li> <li><a href="http://www.freedigitalphotos.net/" target="_blank">free digital photos</a></li> <li><a href="http://www.fotolia.com/" target="_blank">Royalty Free Stock Photos at Fotolia.com</a></li> <li><a href="http://www.graphicshunt.com/" target="_blank">free Images, Graphics</a></li> </ul><h2>Иконки</h2><ul><li><a href="http://www.iconarchive.com/" target="_blank">Icon Archive</a>&nbsp;</li> <li><a href="http://www.iconbazaar.com/" target="_blank">IconBAZAAR</a> </li> <li><a href="http://icondock.com/" target="_blank">IconDock</a>&nbsp;</li> <li><a href="http://www.freeiconsdownload.com/" target="_blank">Free </a><a href="http://www.freeiconsdownload.com/" target="_blank">Icons</a><a href="http://www.freeiconsdownload.com/" target="_blank"> Download</a>&nbsp;</li> <li><a href="http://iconfactory.com/" target="_blank">Iconfactory</a> </li> <li><a href="http://dryicons.com/" target="_blank">DryIcons</a><a href="http://dryicons.com/" target="_blank">.com</a>&nbsp;</li> <li><a href="http://www.vistaicons.com/" target="_blank">VistaIcons.com World </a></li> <li><a href="http://www.icongalore.com/promotion-icons/free-business-icons.htm" target="_blank">Free business icons</a></li> </ul><h2>Шаблоны сайтов, на основе CSS</h2><ul><li><a href="http://techmagazine.ws/free-css-based-design-templates/" target="_blank">CSS-Based Design Templates</a></li> <li><a href="http://www.inknoise.com/experimental/layoutomatic.php" target="_blank">Layout-O-Matic</a></li> <li><a href="http://csscreator.com/?q=tools/layout" target="_blank">CSS Creator</a></li> <li><a href="http://blog.html.it/layoutgala/" target="_blank">Layout Gala</a></li> <li><a href="http://www.csstemplates.net/" target="_blank">CSSTemplates.net</a></li> <li><a href="http://www.styleshout.com/" target="_blank">Styleshout.com</a></li> <li><a href="http://csstinderbox.raykonline.com/" target="_blank">CSS Tinderbox</a></li> </ul><h2>Проверка на наличие «битых» ссылок</h2><ul><li><a href="http://www.dead-links.com/" target="_blank">DeadLinks.com</a> </li> <li><a href="http://www.affiliateprogramslocator.com/tools/link_validation.php" target="_blank">Online Link</a><a href="http://www.affiliateprogramslocator.com/tools/link_validation.php" target="_blank"> Validation Tool</a> </li> <li><a href="http://validator.w3.org/checklink" target="_blank">W3C </a><a href="http://validator.w3.org/checklink" target="_blank">Link Checker</a> </li> <li><a href="http://dlc.sourceforge.net/" target="_blank">DLC</a><a href="http://dlc.sourceforge.net/" target="_blank"> : </a><a href="http://dlc.sourceforge.net/" target="_blank">Dead Link Check</a> </li> <li><a href="http://atniz.com/2009/03/14/dead-links-checker/" target="_blank">Dead Links Checker</a><a href="http://atniz.com/2009/03/14/dead-links-checker/" target="_blank"> | Atniz</a></li> </ul><h2>Тестирование сайта в нескольких браузерах</h2><ul><li><a href="http://browsershots.org/" target="_blank">Browser Shots</a> </li> <li><a href="http://www.browsercam.com/" target="_blank">Browsercam</a> </li> <li><a href="http://www.netmechanic.com/products/browser-index.shtml" target="_blank">NetMechanic</a> </li> <li><a href="http://www.agum.com/web/2007/07/19/multiple-browsers-testing/" target="_blank">Agum</a> </li> <li><a href="http://co.azukisystems.com/index.php?/pages/p/need_for_mobile_browser_based_application_development_standards/" target="_blank">Azuki</a></li> </ul><h2>Валидаторы</h2><ul><li><a href="http://validator.w3.org/" target="_blank">The W3C Markup Validation Service</a></li> <li><a href="http://htmlhelp.com/links/validators.htm" target="_blank">WDG's Links to Validators</a></li> <li><a href="http://www.w3schools.com/site/site_validate.asp" target="_blank">Site Validation</a></li> <li><a href="http://validator.czweb.org/" target="_blank">Validators | HTML, XHTML, XML, CSS, RSS, RDF</a></li> <li><a href="http://www.nypl.org/styleguide/xhtml/validation.html" target="_blank">NYPL: Style Guide: XHTML: Validation</a></li> <li><a href="http://www.validome.org/" target="_blank">HTML / XHTML / XML / WML Validator</a></li> <li><a href="http://www.stylusstudio.com/xml_validation.html" target="_blank">XML Schema Validator, DTD Validator</a></li> <li><a href="http://www.javascript-coder.com/html-form/javascript-form-validation.phtml" target="_blank">JavaScript Form Validation</a></li> <li><a href="http://javascript.about.com/library/blvalind.htm" target="_blank">&nbsp;Field Validation</a></li> <li><a href="http://www.hibernate.org/412.html" target="_blank">hibernate.org</a></li> <li><a href="http://www.devhood.com/Tutorials/tutorial_details.aspx?tutorial_id=46" target="_blank">ASP.NET Validator</a></li> <li><a href="http://jigsaw.w3.org/css-validator/" target="_blank">W3C CSS Validation Service</a></li> <li><a href="http://www.bermi.org/xhtml_validator" target="_blank">PHP XHTML Validator</a></li> </ul><h2>Скрипты</h2><ul><li><a href="http://www.javafile.com/" target="_blank">JavaFile</a></li> <li><a href="http://www.phpfreaks.com/" target="_blank">PHP Freaks</a></li> <li><a href="http://www.dynamicdrive.com/" target="_blank">DynamicDrive</a></li> <li><a href="http://javascript.internet.com/" target="_blank">The JavaScript Source</a></li> <li><a href="http://www.powerfulscripts.com/" target="_blank">PowerfulScripts</a></li> <li><a href="http://www.dhtmlgoodies.com/" target="_blank">DHTMLGoodies.com</a></li> <li><a href="http://www.opensourcescripts.com/dir/PHP/" target="_blank">PHP Open Source Scripts</a></li> </ul><h2>Создание иконки favicon</h2><ul><li><a href="http://tools.dynamicdrive.com/favicon/" target="_blank">Dynamic Drive</a></li> <li><a href="http://www.favicon.cc/" target="_blank">favicon.ico Generator</a></li> <li><a href="http://www.html-kit.com/favicon/" target="_blank">FavIcon from Pics</a></li> <li><a href="http://www.animatedfavicon.com/" target="_blank">Animated Favicon Gif Generator</a></li> </ul><h2>Шрифты</h2><ul><li><a href="http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/" target="_blank">80 красивых гарнитур для дизайнеров</a></li> <li><a href="http://dreamcss.blogspot.com/2009/03/100-typography-resources-for.html" target="_blank">100 Типографических ресурса для професиональоных дизайнеров</a></li> <li><a href="http://www.urbanfonts.com/" target="_blank">Urban Fonts</a></li> <li><a href="http://www.dafont.com/" target="_blank">dafont.com</a></li> <li><a href="http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/" target="_blank">40+ отличных бесплатных шрифтов для профессионального дизайна</a></li> <li><a href="http://www.smashingmagazine.com/2008/11/24/15-beautiful-high-quality-free-fonts/" target="_blank">15 Бесплатных красивых шрифтов высокого качества</a></li> </ul><h2>Web 2.0 инструменты</h2><ul><li><a href="http://www.stripegenerator.com/" target="_blank">Stripe Generator</a></li> <li><a href="http://www.web20badges.com/" target="_blank">Web 2.0 Badges</a></li> <li><a href="http://www.dezinerfolio.com/2007/04/23/web-20-badges-free-download/" target="_blank">More Web 2.0 Badges</a></li> <li><a href="http://utombox.com/my-works/" target="_blank">Web 2.0 Icons</a></li> <li><a href="http://h-master.net/web2.0/" target="_blank">Web 2.0 Logo Creator</a></li> </ul><h2>Создание кнопок</h2><ul><li><a href="http://tools.dynamicdrive.com/button/" target="_blank">Dynamic Drive</a></li> <li><a href="http://kalsey.com/tools/buttonmaker/" target="_blank">Kalsey.com</a></li> <li><a href="http://www.lucazappa.com/brilliantMaker/buttonImage.php" target="_blank">Lucazappa.com</a></li> <li><a href="http://tools.blogflux.com/buttonmaker/" target="_blank">Blog Flux</a></li> <li><a href="http://www.yugatech.com/make.php" target="_blank">Yugatech.com</a></li> <li><a href="http://www.mycoolbutton.com/" target="_blank">MyCoolButton</a></li> </ul><h2>CSS инструменты</h2><ul><li><a href="http://csstidy.sourceforge.net/" target="_blank">CSS Tidy</a></li> <li><a href="http://www.cleancss.com/about.php" target="_blank">Clean CSS</a></li> <li><a href="http://www.cssoptimiser.com/" target="_blank">CSS Optimizer</a></li> <li><a href="http://juicystudio.com/services/csstest.php" target="_blank">CSS Analyzer</a></li> <li><a href="http://cssmate.com/csseditor.htm" target="_blank">CSS Mate</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/" target="_blank">CSS Compressor</a></li> </ul><i>Оригинал: </i><a href="http://efimov.ws/www.dreamcss.com/2009/03/95-resources-to-simplify-your-life-as.html">dreamcss.com</a>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-52597358325919959762010-01-03T22:23:00.000+04:002011-01-04T14:18:50.347+03:00CSS3<h2>CSS3 для украшения страниц</h2>Рельефный текст<br /> Обратите внимание, как сайт Analog использует тень в один пиксель на тексте, чтобы придать ему рельефный вид. Изображение в зеленом круге взято из браузера, поддерживающего text-shadow , а изображение в красном круге взято из браузера, не поддерживающего этот параметр.<br /> <a name='more'></a><br /> <a href="http://analog.coop/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/01.jpg" /></a><br /> Плавные закругленные углы и тень<br /> Сайт Colly использует border-radius и box-shadow чтобы украсить элементы шаблона закругленными углами и мягкими тенями. В случае, если CSS3 не поддерживается, будут отображены квадратные боксы, которые вы даже вряд ли и отличите.<br /> <a href="http://colly.com/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/02.jpg" /></a><br /> <b>Выкатывающиеся DVD</b><br /> Этот сайт использует атрибут webkit-transform чтобы заставить DVD выкатываться из коробки при наведении курсора. Пользователи, использующие браузер с поддержкой webkit, такой как Safari или Chrome, увидят крутящуюся анимацию. Пользователи Firefox увидят, как диск просто выскочит. Пользователи браузеров, которые не поддерживают этот атрибут, увидят статичное изображение DVD диска.<br /> <a href="http://forabeautifulweb.com/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/03.jpg" /></a><br /> <b>Плавный переход и фэйдинг</b><br /> Чтобы увидеть этот эффект, прокрутите сайт вниз до того, как верхняя панель поиска закроет собой на контент. Затем наведите курсор на верхнюю панель, и вы увидите, как полупрозрачный фон постепенно превратится в непрозрачный (просматривать нужно в браузере с webkit).<br /> <a href="http://www.mercyonline.co.uk/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/04.jpg" /></a><br /> <b>Закругленные углы</b><br /> Пользователи, чьи браузеры поддерживают атрибут border-radius, увидят закругленные углы на сайте<a href="http://futureofwebdesign.com/">Future of Web Design</a>. <br /> <a href="http://futureofwebdesign.com/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/05.jpg" /></a><br /> <b>Тень для текста</b><br /> Сайт SquareSpace украшает заголовок своего блога, добавляя к нему небольшую тень, которую вы едва заметите.<br /> <a href="http://blog.squarespace.com/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/06.jpg" /></a><br /> <h2>В каких случаях следует использовать CSS3?</h2><i>Не нужно</i>Вращать изображения при помощи CSS3<br /> Будьте осторожны, если вы назначаете границы для вращаемых изображений. Границы могут вызвать эффект дрожания.<br /> <a href="http://booyant.com/about/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/07.jpg" /></a><br /> <i>Можно:</i>Вместо этого экспортировать вращаемые изображения <br /> Чтобы избежать эффекта дрожания, используйте Photoshop, чтобы повернуть изображение, затем используйте трансформацию CSS как это сделано на сайте Chirp.<br /> <a href="http://chirp.twitter.com/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/08.jpg" /></a><br /> <i>Можно:</i>Вращать одно большое изображение<br /> Вращающееся изображение земли стало отличным исполнением для страницы 404 на сайте FOWD (просматривайте на браузере с webkit)<br /> <a href="http://futureofwebdesign.com/404"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/09.jpg" /></a><br /> <i>Не нужно</i>Вращать сразу несколько больших изображений<br /> Тем не менее, не переусердствуйте с вращением нескольких больших изображений, так как это будет создавать нагромождение<br /> <a href="http://media.24ways.org/2009/15/space.html"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/10.jpg" /></a><br /> <i>Не нужно</i>Полностью полагаться на CSS3<br /> Все смотрится хорошо, когда вы просматриваете сайт Ryan Merrill через браузер с webkit. Но попробуйте открыть его в другом браузере, таком как Flock например. Ого, что случилось? Все пошло наперекосяк. Шрифты больше не отображаются корректно, исчез бокс со слоганом. Поэтому будьте осторожны, если в верстке ваших шаблонов вы полагаетесь на HTML5 и CSS3.<br /> <a href="http://ryanmerrill.net/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/11.jpg" /></a><br /> <i>Не нужно</i>похожие шрифты в качестве альтернативы<br /> Если вы используете пользовательские специальные шрифты, не забудьте также включить безопасные шрифты в качестве альтернативы. Сайт Bobulate является хорошим тому примером. Там используется шрифт Georgia в качестве альтернативного, который имеет близкую ширину и высоту к пользовательскому шрифту Skolar.<br /> <a href="http://bobulate.com/"><img src="http://balbesof.net/up/article/img/photoshop_lessons/urok84/12.jpg" /></a><br /> <b>Заключение</b><br /> <br /> <div id="block"><br /> <br /> <br /> <li>Не полагайтесь полностью на CSS3 при версте шаблона. Его моно использовать только для украшательства.</li><br /> <br /> <br /> <br /> <br /> <br /> <br /> <li>Убедитесь, что ваша верстка не будет разительно отличаться, в случае если возможности CSS3 не поддерживаются.</li><br /> <br /> <br /> <br /> <br /> <br /> <br /> <li>Если вы используете свойство @font-face, всегда добавляйте безопасные шрифты с близкими значениями высоты, ширины и кернинга в качестве альтернативы.</li><br /> <br /> <br /> <br /> <br /> <hr />Источник статьи:www.webdesignerwall.com. Перевод: <a href="http://balbesof.net/">Балбесов.Нет - компьютерная графика</a></div>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-68615143362456643182009-10-20T21:18:00.001+05:002010-12-30T18:34:06.280+03:00Flash-8(Preloader)"прелоадер", Preloader-показатель загрузки объекта<blockquote><b>Как это работает?</b><br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_1.gif" /></div><br /> <br /> <a name='more'></a>Идея работы прелоадера очень проста: мы используем возможности <b>ActionScript</b> для того, чтобы узнать, сколько байт клипа уже загружено у пользователя, и сколько их всего. А потом просто сравниваем -- если загруженных меньше, чем всего, то значит клип еще не загрузился, а если равное количество, то мы можем уже стартовать просмотр. Вдобавок ко всему, мы привяжем к коду графический индикатор загрузки, который покажет, сколько % загружено(в удобном для визуального восприятия виде).<br /> <br /> <b>Preloader</b> а зачем и нужен ли он?<br /> Естественно нужен, и так аргументы:<br /> <b>1</b>-Прелоадер предотвращает начало проигрывания клипа(или объекта, интересующего нас) до того, как он полностью загрузится, иначе клип может некорректно отображаться у пользователя.<br /> <b>2</b>-При отсутствии индикатора загрузки сложно понять:а продолжение то есть?(если это сайт то пользователь может не дождаться появления загружаемой части)<br /> Если Вы посчитали выше перечисленное - вескими аргументами, то продолжим, но хочу сразу оговориться,мы рассмотрим общий случай,простой с точки графики и программирования.Но зная принципы работы <b>прелоадера</b>, уже Ваше личное дела на сколько сложной будет графика принцип остаётся тем же.<br /> (В уроке <b>не описано</b> как открыть Flash,создать, редактировать файл и т.д. надеюсь все знают, если нет, то по заявкам - будут уроки.)<br /> <br /> <br /> <b>Делай РАЗ</b><br /> Начнем с того, что создадим новый клип со стандартными размерами сцены и частотой смены кадров. <br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_2.gif" /></div><br /> <br /> <b>Делай ДВА</b><br /> Настроим <b>Timeline</b><br /> Создадим новый слой на <b>timeline</b>'e, переименуем его в <b>Actions</b>, а слой, который уже был - в <b>Contents</b>. Это поможет нам не запутаться(да и просто это "хороший тон"): графика у нас будет на первом слое, а код на втором. <br /> <br /> Правый клик мыши на линии со слоем <b>Actions</b> и выбираем <b>(Вставить ключевой фрейм)Insert Keyframe</b>, или просто<b> F6</b>. Теперь правый клик на <b>Contents</b> и выбираем <b>(Вставить фрейм)Insert Frame (F5)</b>. У нас получается, что на нижнем слое второй кадр ничем не будет отличаться от первого, т.е. все изменения на первом повлекут за собой изменения на втором, а на верхнем второй кадр никак не зависит от первого. Вообще советую не злоупотреблять <b>Keyframe </b>там, где можно обойтись обычными <b>Frame</b>, ибо чем больше ключевых кадров, тем больше вес мувика.<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_3.gif" /></div><br /> <br /> <b>Делай ТРИ</b><br /> <b>Создание индикатора</b><br /> Поскольку графика у нас на слое <b>Contents</b>, то и графический индикатор загрузки мы будем рисовать на этом слое. Один раз кликаем на нем, и выбираем <b>Rectangle Tool</b>. С помощью этого инструмента рисуем по центру сцены прямоугольник, как на рисунке ниже.<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_4.gif" /><br /> <img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_5.gif" /></div><br /> <br /> <b>Делай Чатыри</b><br /> Теперь нам необходимо перевести наш прямоугольник в мувиклип, чтобы выполнять с ним действия через <b>ActionScipt</b>. Нам нужно разделить заливку рамку вокруг нее. Для этого используем <b>Selection Tool </b>и выделяем <span style="color: darkorange;">ТОЛЬКО РАМКУ </span>вокруг бара.<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_6.gif" /><br /> <img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_7.gif" /></div><br /> <br /> <b>Делай Пять</b><br /> Теперь преобразуем рамку в мувиклип. Жмем <b>F8</b> на клавиатуре, в появившемся окошке выбираем <b>Movie clip</b> и называем наш символ как вам нравится(в данном случае - <b>Outline</b> )<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_8.gif" /></div><br /> <br /> <b>Делай Шесть</b><br /> Теперь выделяем сам прямоугольник с помощью того же <b>Selection Tool</b>, жмем<b> F8 </b>и видим уже знакомое нам окошко. Нам нужно изменить <b>Registration Point(регистрация)</b>, т.е. положение, из которого начинает "рости" наш прямоугольник. Для этого выбираем левую сторону квадрата в окошке <b>Conver to Symbol</b>, как на рисунке ниже. Также выбираем <b>(Фильм клип)Movie clip</b>, называем <b>Bar</b>.<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_9.gif" /></div><br /> <br /> <b>Делай Семь</b><br /> Небольшой нюанс, в котором мы должны убедится, состоит в том, что рамка должна быть вокруг прямоугольника, и ни в коем случае не налазить на него. Шанс этого очень мал, потому что мы создали рамку первой и не двигали ее, однако всякое может быть, так что лучше проверить сейчас, чем потом мучатся с ней. Если рамка и прямоугольник не совпадают, опять берем <b>Selection Tool</b> и двигаем стрелками на клавиатуре рамку.<br /> <b>Делай Восемь</b><br /> Теперь последний, завершающий шаг: выделяем наш прямоугольник и открываем панель <b>Properties</b> и задаем ему <b>instance name - <span style="color: darkred;">bar_mc</span></b>. Это нам необходимо для того, чтобы <b>ActionScript</b> понял, с каким именно ему объектом делать команды, которые мы сейчас ему зададим.<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_10.gif" /></div><br /> <br /> <b>Делай Девять</b><br /> Создание <b>поля с %</b><br /> Это один из простейших шагов, просто выбираем <b>Text Tool </b>и созадем небольшое текстовое поле под прелоадером. В <b>Properties</b> измените <b>Text Type</b> на<b> Dynamic</b> и задайте <b>instance name -<span style="color: darkred;"> loader_txt</span></b>. Шрифт и размер можете поставить любой, я выбрал <b>to _sans</b> размером <b>12px</b> черного цвета.<br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_11.gif" /><br /> <br /> <img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_12.gif" /></div><br /> <br /> <div align="center"><img border="0" class="linked-image" src="http://arttower.ru/tutorial/Preloader_flash8/Preloader_flash_13.gif" /></div><br /> <br /> <b>Делай Одиннадцать</b><br /> Добавление <b>ActionScript</b><br /> Переходим на первый слой <b>Actions</b>. Идем на <span style="color: darkorange;">ВТОРОЙ </span>кадр и добавляем на панель<b> Action</b> следующий код:<br /> <div class="codetop">Код</div><div class="codemain">if (_root.getBytesTotal() != _root.getBytesLoaded()){<br /> &nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;gotoAndPlay(1); <br /> &nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;}<br /> &nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100; <br /> &nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";</div><br /> Первая часть кода<br /> <div class="codetop">Код</div><div class="codemain">if (_root.getBytesTotal() != _root.getBytesLoaded()){<br /> &nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;gotoAndPlay(1); <br /> &nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;}</div><br /> проверяет, сколько байт загружено у пользователя и сравнивает с тем, сколько есть на самом деле. Если Значения не равны <b>(!=)</b>, то возвращаемся на первый кадр. Далее мы растягиваем прямоугольник на столько процентов, сколько загружено:<br /> <div class="codetop">Код</div><div class="codemain">bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;</div><br /> и задаем текстовому полю процентное значение + "<b>%</b>":<br /> <div class="codetop">Код</div><div class="codemain">loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";</div><br /> Все, наш <b>прелоадер г</b>отов, теперь все содержимое мы можем размещать с третьего кадра. Для примера разместим на третьем кадре картинку большого веса и проверим работу загрузчика (<b>File</b> &gt; <b>Import</b> &gt; <b>Import to Stage </b>и выбираем картинку). Теперь жмем <b>Ctrl+Enter</b> и имитируем загрузку, идя <b>View</b> &gt; <b>Simulate Download,</b> (<b>важно</b> заходим в следующий пункт контекстного меню, который позволит выбрать скорость загрузки, например: <b>14.4(1.2Kb/s)</b>)иначе Вы <b>не успеете</b> увидеть свой прелоадер, загрузится <b>сразу</b> картинка.</blockquote>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-38507367648161004302009-09-11T12:05:00.004+05:002010-12-30T18:34:47.965+03:00<h2 class="entry-title single-entry-title"><span class="topic" title="http://habrahabr.ru/blogs/webdev/69023/">Список полезных инструментов для CSS разработчика</span> </h2><div class="content">Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.<br /> <a name='more'></a><br /> <br /> <img align="center" src="http://content.w3avenue.com/2009/tools/list-of-really-useful-tools-for-css-developers/cover.jpg" /><br /> Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.<br /> <a href="http://www.blogger.com/post-edit.g?blogID=22716610&amp;postID=3850736764816100430" name="habracut"></a><br /> <h1>Макеты</h1><br /> <a href="http://csscreator.com/tools/layout">CSS Layout Generator</a><br /> Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.<br /> <br /> <a href="http://grid.mindplay.dk/">Grid Designer</a><br /> Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.<br /> <br /> <a href="http://www.pagecolumn.com/">Layout Generators</a><br /> Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.<br /> <br /> <a href="http://csstemplater.com/">Генератор HTML+CSS шаблонов</a><br /> Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.<br /> <br /> <a href="http://psd2cssonline.com/">PSD2CSS</a><br /> Cервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно.<br /> <br /> <h1>CSS Фреймворки</h1><br /> <a href="http://toki-woki.net/p/Boks/">Boks</a><br /> Boks это визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.<br /> <br /> <a href="http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources">Полезные инструменты и ссылки для CSS фреймворка Blueprint.</a><br /> <br /> <a href="http://builder.yaml.de/">YAML Builder</a><br /> YAML Builder это онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.<br /> <br /> <a href="http://developer.yahoo.com/yui/grids/builder/">YUI CSS Grid Builder</a><br /> Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.<br /> <br /> <a href="http://www.spry-soft.com/grids/">960 Grid System – Variable Grid System</a><br /> Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.<br /> <br /> <a href="http://www.gridsystemgenerator.com/">Grid System Generator</a><br /> Grid System Generator позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.<br /> <br /> <h1>Шрифты</h1><br /> <a href="http://www.typetester.org/">Typetester</a><br /> Typetester – это весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.<br /> <br /> <a href="http://csstypeset.com/">CSS Type Set</a><br /> Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть. <br /> Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.<br /> <br /> <a href="http://www.typechart.com/">TypeChart</a><br /> С помощью Typechart можно оценить оформление различных шрифтов. После обнаружение понравившегося варианта можно скопировать CSS код для использования на своем сайте.<br /> <br /> <a href="http://texster.ru/">Texster</a><br /> Texster — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный.<br /> <br /> <a href="http://www.jan-quickels.de/tools-web-typography/">CSS-Typoset Matrix and Code Generator</a><br /> <br /> <a href="http://csstxt.com/">CSStxt</a><br /> Несложный веб-инструмент создания CSS стилей шрифта.<br /> <br /> <a href="http://jameswhittaker.com/projects/apps/em-calculator-air-application/">EM Calculator AIR Application</a><br /> Калькулятор вертикального ритма в XHTML &amp; CSS; легко конвертирует px в em; padding и margins вычисляются автоматически.<br /> <br /> <a href="http://riddle.pl/emcalc/">Em Calculator</a><br /> Em Calculator это небольшой Javascript инструмент который преобразовывает определенное значение px в соответствующее значение в em.<br /> <br /> <a href="http://pxtoem.com/">PXtoEM</a><br /> PXtoEM — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое.<br /> <br /> <h1>Цвет</h1><br /> <a href="http://css-color-replace.orca-multimedia.de/">CSS Color Editor</a><br /> CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.<br /> <br /> <a href="http://www.cssdrive.com/imagepalette/">Color Palette Generator</a><br /> По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.<br /> <br /> <a href="http://www.snook.ca/technical/colour_contrast/colour.html">Color Contrast Check</a><br /> Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).<br /> <br /> <a href="http://www.colorzilla.com/firefox/">ColorZilla</a><br /> ColorZilla расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.<br /> <br /> <a href="http://monc.se/kitchen/stew/hsl/">Конвертор HSL в RGB</a><br /> <br /> <h1>Спрайты</h1><br /> <a href="http://spritegen.website-performance.org/">CSS Sprite Generator</a><br /> Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.<br /> <br /> <a href="http://www.lecentre.net/fratoblog/yasc/">YASC (Yet Another Sprite Creator)</a><br /> Еще один генератор. Процесс создания спрайта представляет собой следующее: загружается картинка, затем визуально отмечаются необходимые области и им назначается CSS id. Когда выбраны все участки происходит генерация CSS для этих спрайтов.<br /> <br /> <a href="http://smartsprites.osinski.name/">SmartSprites</a><br /> SmartSprites это консольная Java утилита для создания CSS спрайтов. SmartSprites орабатывает специальные директивы в CSS файле, отмечающие отдельные картинки которые должны быть превращены в спрайты. После обработки CSS файла из отмеченных картинок создается спрайт, и автоматически меняются соответствующие фрагменты файла на использования спрайта вместо одиночных картинок.<br /> <br /> <h1>Формы</h1><br /> <a href="http://www.accessify.com/tools-and-wizards/accessibility-tools/quick-form-builder/">Quick Form Builder</a><br /> Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.<br /> <br /> <a href="http://wufoo.com/">Wufoo</a><br /> Wufoo – это бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.<br /> <br /> <h1>Компоненты UI</h1><br /> <a href="http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/">List-o-Matic</a><br /> Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.<br /> <br /> <a href="http://www.cssmenumaker.com/">CSS Menu Generator</a><br /> Генерирует горизонтальные, вертикальные, выпадающие CSS меню.<br /> <br /> <a href="http://jqueryui.com/themeroller/">ThemeRoller</a><br /> Позволяет создавать собственные темы для jQuery UI.<br /> <br /> <h1>Обертка текста</h1><br /> <a href="http://www.csstextwrap.com/">CSS Text Wrapper</a><br /> Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.<br /> <br /> <a href="http://www.theboxoffice.be/">The Box Office</a><br /> Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.<br /> <br /> <h1>Анализ и Отладка</h1><br /> <a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a><br /> Проверка CSS на валидность.<br /> <br /> <a href="http://juicystudio.com/services/csstest.php">CSS Analyzer</a><br /> CSS Analyser сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.<br /> <br /> <a href="http://getfirebug.com/">Firebug</a><br /> Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором Javascript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или Javascript-метод/свойство, которое вы пытаетесь использовать, не существует.<br /> <br /> <h1>Сопровождение</h1><br /> <a href="http://www.sitepoint.com/dustmeselectors/">Dust-Me Selectors</a><br /> Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.<br /> <br /> <a href="http://www.dotnetsurfers.com/Blog/2008/10/02/RemovingUnusedCSSClassesFromYourWebApplication.aspx">CssCleaner</a><br /> Приложение Windows для удаления неиспользуемых CSS классов.<br /> <br /> <a href="http://services.immike.net/css-checker/">CSS Redundancy Checker</a><br /> Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.<br /> <br /> <h1>Оптимизация</h1><br /> <a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Drive CSS Compressor</a><br /> CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная».<br /> <br /> <a href="http://iceyboard.no-ip.org/projects/css_compressor">Robson CSS Compressor</a><br /> Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе.<br /> <br /> <a href="http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/">MinifyMe – AIR Application</a><br /> Небольшое AIR-приложение, которое позволит собрать несколько css-файлов в один.<br /> <br /> <h1>Фоматирование</h1><br /> <a href="http://www.cleancss.com/">CleanCSS – CSS Formatter and Optimizer</a><br /> Clean CSS является популярным онлайн-инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.<br /> <br /> <a href="http://styleneat.com/">Styleneat</a><br /> Styleneat преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.<br /> <br /> <a href="http://www.blumentals.net/csstool/">CSS Toolbox</a><br /> Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор.<br /> <br /> <h1>Браузерозависимость</h1><br /> <a href="http://www.conditional-css.com/">Conditional-CSS</a><br /> Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.<br /> <br /> <a href="http://habrahabr.ru/blogs/webdev/53053/">7 простых способов протестировать кроссбраузерную совместимость</a><br /> <br /> <a href="http://www.webdevout.net/browser-support-css">Web Browser CSS Support</a><br /> Подробная таблица поддержки CSS-стандарта популярными браузерами.<br /> <br /> <a href="http://a.deveria.com/caniuse/">When Can I Use?</a><br /> Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.<br /> <br /> <a href="http://code.google.com/p/ie7-js/">IE7.js</a><br /> IE7-js это Javascript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.<br /> <br /> <a href="http://www.modernizr.com/">Modernizr</a><br /> Modernizr это небольшая простая Javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.<br /> <br /> <h1>Селекторы</h1><br /> <a href="http://sizzlejs.com/">Sizzle Javascript Selector Library</a><br /> Быстрый Javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д. <br /> <br /> <a href="http://yass.webo.in/">YASS: Yet Another cSS selector</a><br /> Самая быстрая Javascript-библиотека для выбора элементов по CSS-селектору.<br /> <br /> <a href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a><br /> Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.<br /> <br /> <a href="http://developer.yahoo.com/yui/selector/">YUI Selector Utility</a><br /> YUI Selector Utility позволяет использовать синтаксис CSS3 селекторов на Javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.<br /> <br /> <a href="http://developer.yahoo.com/yui/stylesheet/">YUI StyleSheet Utility</a><br /> С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.<br /> <br /> <h1>Разное</h1><br /> <a href="http://www.westciv.com/xray/">XRAY</a><br /> XRAY это букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тегов, соответствующих отображаемым блокам, и некоторые другие детали.<br /> <br /> <h1>Cheat Sheets</h1><br /> <a href="http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/">CSS Cheat Sheet</a><br /> Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.<br /> <br /> <a href="http://www.leigeber.com/2008/04/css-shorthand-cheat-sheet/">CSS Shorthand Cheat Sheet</a><br /> <br /> <a href="http://yuiblog.com/assets/pdf/cheatsheets/css.pdf">YUI Library: CSS Reset, Base, Fonts, и Grids</a><br /> <br /> <a href="http://www.christianmontoya.com/2007/11/12/blueprint-css-cheat-sheet/">Blueprint CSS Cheat Sheet</a><br /> <br /> <h1>За пределами CSS</h1><br /> <a href="http://yellowgreen.de/morecss/">MoreCSS</a><br /> MoreCSS это ориентированная на дизайнеров Javascript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.<br /> <br /> <a href="http://lesscss.org/">LESS – Leaner CSS</a><br /> Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.<br /> <br /> <a href="http://code.google.com/p/dtcss/">DtCSS</a><br /> DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.<br /> <br /> <a href="http://habrahabr.ru/blogs/css/59418/">Sass + Compass</a><br /> SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.</div>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-57956482945411744842009-09-07T21:49:00.002+05:002009-09-07T21:49:48.947+05:00CKEditorНовая ветка от FCKEditor'a CKEditor. Новый web-редактор с более легким и красивым интерфейсом.&nbsp; <br /> http://ckeditor.com/Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-21269752512131330002009-08-31T15:12:00.003+05:002011-01-03T23:53:17.111+03:00Спецсимволы<b>Таблица спецсимволов HTML<a name='more'></a></b><br /> <span id="more-7"> </span><br /> <table id="characters"><tbody> <tr> <th>Имя</th> <th>Код</th> <th>Пример</th> <th>Описание</th> </tr> <tr> <td>&amp;nbsp;</td> <td>&amp;#160;</td> <td></td> <td>неразрывный пробел</td> </tr> <tr> <td>&amp;iexcl;</td> <td>&amp;#161;</td> <td>¡</td> <td>перевернутый восклицательный знак</td> </tr> <tr> <td>&amp;cent;</td> <td>&amp;#162;</td> <td>¢</td> <td>цент</td> </tr> <tr> <td>&amp;pound;</td> <td>&amp;#163;</td> <td>£</td> <td>фунт стерлингов</td> </tr> <tr> <td></td> <td>&amp;#8364;</td> <td>€</td> <td>валюта евро</td> </tr> <tr> <td>&amp;curren;</td> <td>&amp;#164;</td> <td>¤</td> <td>денежная единица</td> </tr> <tr> <td>&amp;yen;</td> <td>&amp;#165;</td> <td>¥</td> <td>иена или юань</td> </tr> <tr> <td>&amp;brvbar;</td> <td>&amp;#166;</td> <td>¦</td> <td>разорванная вертикальная черта</td> </tr> <tr> <td>&amp;sect;</td> <td>&amp;#167;</td> <td>§</td> <td>параграф</td> </tr> <tr> <td>&amp;uml;</td> <td>&amp;#168;</td> <td>¨</td> <td>трема (знак над гласной для произнесения ее отдельно от предшествующей гласной</td> </tr> <tr> <td>&amp;copy;</td> <td>&amp;#169;</td> <td>©</td> <td>знак copyright</td> </tr> <tr> <td>&amp;ordf;</td> <td>&amp;#170;</td> <td>ª</td> <td>feminine ordinal indicator</td> </tr> <tr> <td>&amp;not;</td> <td>&amp;#172;</td> <td>¬</td> <td>знак отрицания</td> </tr> <tr> <td>&amp;shy;</td> <td>&amp;#173;</td> <td>­</td> <td>место возможного переноса</td> </tr> <tr> <td>&amp;trade;</td> <td>&amp;#153;</td> <td>™</td> <td>торговая марка</td> </tr> <tr> <td>&amp;reg;</td> <td>&amp;#174;</td> <td>®</td> <td>знак зарегистрированной торговой марки</td> </tr> <tr> <td>&amp;macr;</td> <td>&amp;#175;</td> <td>¯</td> <td>знак долготы над гласным</td> </tr> <tr> <td>&amp;deg;</td> <td>&amp;#176;</td> <td>°</td> <td>градус</td> </tr> <tr> <td>&amp;plusmn;</td> <td>&amp;#177;</td> <td>±</td> <td>плюс-минус</td> </tr> <tr> <td>&amp;sup2;</td> <td>&amp;#178;</td> <td>²</td> <td>верхний индекс “два” - “квадрат”</td> </tr> <tr> <td>&amp;sup3;</td> <td>&amp;#179;</td> <td>³</td> <td>верхний индекс “три” - “куб”</td> </tr> <tr> <td>&amp;acute;</td> <td>&amp;#180;</td> <td>´</td> <td>знак ударения</td> </tr> <tr> <td>&amp;micro;</td> <td>&amp;#181;</td> <td>µ</td> <td>микро</td> </tr> <tr> <td>&amp;para;</td> <td>&amp;#182;</td> <td>¶</td> <td>символ параграфа</td> </tr> <tr> <td>&amp;middot;</td> <td>&amp;#183;</td> <td>·</td> <td>точка</td> </tr> <tr> <td>&amp;cedil;</td> <td>&amp;#184;</td> <td>¸</td> <td>седиль (орфографический знак)</td> </tr> <tr> <td>&amp;sup1</td> <td>&amp;#185;</td> <td>¹</td> <td>верхний индекс “один”</td> </tr> <tr> <td>&amp;ordm;</td> <td>&amp;#186;</td> <td>º</td> <td>masculine ordinal indicator</td> </tr> <tr> <td>&amp;laquo;</td> <td>&amp;#171;</td> <td>«</td> <td>левая двойная угловая скобка</td> </tr> <tr> <td>&amp;raquo;</td> <td>&amp;#187;</td> <td>»</td> <td>правая двойная угловая скобка</td> </tr> <tr> <td>&amp;frac14;</td> <td>&amp;#188;</td> <td>¼</td> <td>дробь - одна четверть</td> </tr> <tr> <td>&amp;frac12;</td> <td>&amp;#189;</td> <td>½</td> <td>дробь - одна вторая</td> </tr> <tr> <td>&amp;frac34;</td> <td>&amp;#190;</td> <td>¾</td> <td>дробь - три четверти</td> </tr> <tr> <td>&amp;iquest;</td> <td>&amp;#191;</td> <td>¿</td> <td>перевернутый вопросительный знак</td> </tr> <tr> <th colspan="4">Знаки пунктуации</th> </tr> <tr> <td>&amp;bull;</td> <td>&amp;#8226;</td> <td>•</td> <td>bullet - маленький черный кружок</td> </tr> <tr> <td>&amp;hellip;</td> <td>&amp;#8230;</td> <td>…</td> <td>многоточие …</td> </tr> <tr> <td>&amp;prime;</td> <td>&amp;#8242;</td> <td>′</td> <td>одиночный штрих - минуты и футы</td> </tr> <tr> <td>&amp;Prime;</td> <td>&amp;#8243;</td> <td>″</td> <td>двойной штрих - секунды и дюймы</td> </tr> <tr> <td>&amp;oline;</td> <td>&amp;#8254;</td> <td>‾</td> <td>надчеркивание</td> </tr> <tr> <td>&amp;frasl;</td> <td>&amp;#8260;</td> <td>⁄</td> <td>косая дробная черта</td> </tr> <tr> <td>&amp;quot;</td> <td>&amp;#34;</td> <td>"</td> <td>двойная кавычка - APL quote</td> </tr> <tr> <td>&amp;ndash;</td> <td>&amp;#8211;</td> <td>–</td> <td>тире</td> </tr> <tr> <td>&amp;mdash;</td> <td>&amp;#8212;</td> <td>—</td> <td>длинное тире</td> </tr> <tr> <td>&amp;lsquo;</td> <td>&amp;#8216;</td> <td>‘</td> <td>левая одиночная кавычка</td> </tr> <tr> <td>&amp;rsquo;</td> <td>&amp;#8217;</td> <td>’</td> <td>правая одиночная кавычка</td> </tr> <tr> <td>&amp;sbquo;</td> <td>&amp;#8218;</td> <td>‚</td> <td>нижняя одиночная кавычка</td> </tr> <tr> <td>&amp;ldquo;</td> <td>&amp;#8220;</td> <td>“</td> <td>левая двойная кавычка</td> </tr> <tr> <td>&amp;rdquo;</td> <td>&amp;#8221;</td> <td>”</td> <td>правая двойная кавычка</td> </tr> <tr> <td>&amp;bdquo;</td> <td>&amp;#8222;</td> <td>„</td> <td>нижняя двойная кавычка</td> </tr> <tr> <th colspan="4">Стрелки</th> </tr> <tr> <td>&amp;larr;</td> <td>&amp;#8592;</td> <td>←</td> <td>стрелка влево</td> </tr> <tr> <td>&amp;uarr;</td> <td>&amp;#8593;</td> <td>↑</td> <td>стрелка вверх</td> </tr> <tr> <td>&amp;rarr;</td> <td>&amp;#8594;</td> <td>→</td> <td>стрелка вправо</td> </tr> <tr> <td>&amp;darr;</td> <td>&amp;#8595;</td> <td>↓</td> <td>стрелка вниз</td> </tr> <tr> <td>&amp;harr;</td> <td>&amp;#8596;</td> <td>↔</td> <td>стрелка влево-вправо</td> </tr> <tr> <th colspan="4">Математические операторы</th> </tr> <tr> <td>&amp;times;</td> <td>&amp;#215;</td> <td>×</td> <td>знак умножения</td> </tr> <tr> <td>&amp;divide;</td> <td>&amp;#247;</td> <td>÷</td> <td>знак деления</td> </tr> <tr> <td>&amp;fnof;</td> <td>&amp;#402;</td> <td>ƒ</td> <td>знак функции</td> </tr> <tr> <td></td> <td>&amp;#8706;</td> <td>∂</td> <td>частный дифференциал</td> </tr> <tr> <td></td> <td>&amp;#8719;</td> <td>∏</td> <td>произведение последовательности - знак произведения</td> </tr> <tr> <td></td> <td>&amp;#8721;</td> <td>∑</td> <td>сумма последовательности</td> </tr> <tr> <td></td> <td>&amp;#8722;</td> <td>−</td> <td>минус</td> </tr> <tr> <td></td> <td>&amp;#8730;</td> <td>√</td> <td>квадратный корень</td> </tr> <tr> <td></td> <td>&amp;#8734;</td> <td>∞</td> <td>бесконечность</td> </tr> <tr> <td></td> <td>&amp;#8745;</td> <td>∩</td> <td>пересечение - cap</td> </tr> <tr> <td></td> <td>&amp;#8747;</td> <td>∫</td> <td>интеграл</td> </tr> <tr> <td></td> <td>&amp;#8776;</td> <td>≈</td> <td>почти равно - асимптотически стремится</td> </tr> <tr> <td></td> <td>&amp;#8800;</td> <td>≠</td> <td>не равно</td> </tr> <tr> <td></td> <td>&amp;#8801;</td> <td>≡</td> <td>тождественно</td> </tr> <tr> <td></td> <td>&amp;#8804;</td> <td>≤</td> <td>меньше либо равно</td> </tr> <tr> <td></td> <td>&amp;#8805;</td> <td>≥</td> <td>больше либо равно</td> </tr> <tr> <td>&amp;lt;</td> <td>&amp;#60;</td> <td>&lt;</td> <td>знак “меньше”</td> </tr> <tr> <td>&amp;gt;</td> <td>&amp;#62;</td> <td>&gt;</td> <td>знак “больше”</td> </tr> <tr> <th colspan="4">Прочие символы</th> </tr> <tr> <td></td> <td>&amp;#9674;</td> <td>◊</td> <td>lozenge</td> </tr> <tr> <td>&amp;spades;</td> <td>&amp;#9824;</td> <td>♠</td> <td>черный знак масти “пики”</td> </tr> <tr> <td>&amp;clubs;</td> <td>&amp;#9827;</td> <td>♣</td> <td>черный знак масти “трефы” - shamrock</td> </tr> <tr> <td>&amp;hearts;</td> <td>&amp;#9829;</td> <td>♥</td> <td>черный знак масти “червы” - valentine</td> </tr> <tr> <td>&amp;diams;</td> <td>&amp;#9830;</td> <td>♦</td> <td>черный знак масти “бубны”</td> </tr> <tr> <td>&amp;amp;</td> <td>&amp;#38;</td> <td>&amp;</td> <td>ampersand</td> </tr> <tr> <td>&amp;circ;</td> <td>&amp;#710;</td> <td>ˆ</td> <td>символ циркумфлекса (диакритический знак над гласной)</td> </tr> <tr> <td>&amp;tilde;</td> <td>&amp;#732;</td> <td>˜</td> <td>small tilde</td> </tr> <tr> <td></td> <td>&amp;#8204;</td> <td>‌</td> <td>zero width non-joiner</td> </tr> <tr> <td></td> <td>&amp;#8205;</td> <td>‍</td> <td>zero width joiner</td> </tr> <tr> <td></td> <td>&amp;#8224;</td> <td>†</td> <td>кинжал (крест)</td> </tr> <tr> <td></td> <td>&amp;#8225;</td> <td>‡</td> <td>двойной кинжал (крест)</td> </tr> <tr> <td></td> <td>&amp;#8240;</td> <td>‰</td> <td>промилле</td> </tr> <tr> <td></td> <td>&amp;#8249;</td> <td>‹</td> <td>левая угловая одиночная кавычка</td> </tr> <tr> <td></td> <td>&amp;#8250;</td> <td>›</td> <td>правая угловая одиночная кавычка</td> </tr> <tr> <th colspan="4">Латинский алфавит</th> </tr> <tr> <td>&amp;Agrave;</td> <td>&amp;#192;</td> <td>À</td> <td>латинская заглавная буква А с тупым ударением</td> </tr> <tr> <td>&amp;Aacute;</td> <td>&amp;#193;</td> <td>Á</td> <td>латинская заглавная буква А с острым ударением</td> </tr> <tr> <td>&amp;Acirc;</td> <td>&amp;#194;</td> <td>Â</td> <td>латинская заглавная буква А с циркумфлексом (диакритический знак над гласной)</td> </tr> <tr> <td>&amp;Atilde;</td> <td>&amp;#195;</td> <td>Ã</td> <td>латинская заглавная буква А с тильдой</td> </tr> <tr> <td>&amp;Auml;</td> <td>&amp;#196;</td> <td>Ä</td> <td>латинская заглавная буква А с тремой (знак над гласной для произнесения ее отдельно от предшествующей гласной)</td> </tr> <tr> <td>&amp;Aring;</td> <td>&amp;#197;</td> <td>Å</td> <td>латинская заглавная буква А с верхним кружком</td> </tr> <tr> <td>&amp;AElig;</td> <td>&amp;#198;</td> <td>Æ</td> <td>латинские заглавные символы AE</td> </tr> <tr> <td>&amp;Ccedil;</td> <td>&amp;#199;</td> <td>Ç</td> <td>латинская заглавная буква C с седилем</td> </tr> <tr> <td>&amp;Egrave;</td> <td>&amp;#200;</td> <td>È</td> <td>латинская заглавная буква E с тупым ударением</td> </tr> <tr> <td>&amp;Eacute;</td> <td>&amp;#201;</td> <td>É</td> <td>латинская заглавная буква E с острым ударением</td> </tr> <tr> <td>&amp;Ecirc;</td> <td>&amp;#202;</td> <td>Ê</td> <td>латинская заглавная буква E с циркумфлексом (диакритический знак над гласной)</td> </tr> <tr> <td>&amp;Euml;</td> <td>&amp;#203;</td> <td>Ë</td> <td>латинская заглавная буква E с тремой</td> </tr> <tr> <td>&amp;Igrave;</td> <td>&amp;#204;</td> <td>Ì</td> <td>латинская заглавная буква I с тупым ударением</td> </tr> <tr> <td>&amp;Iacute;</td> <td>&amp;#205;</td> <td>Í</td> <td>латинская заглавная буква I с острым ударением</td> </tr> <tr> <td>&amp;Icirc;</td> <td>&amp;#206;</td> <td>Î</td> <td>латинская заглавная буква I с циркумфлексом</td> </tr> <tr> <td>&amp;Iuml;</td> <td>&amp;#207;</td> <td>Ï</td> <td>латинская заглавная буква I с тремой</td> </tr> <tr> <td>&amp;ETH;</td> <td>&amp;#208;</td> <td>Ð</td> <td>латинские заглавные символы ETH</td> </tr> <tr> <td>&amp;Ntilde;</td> <td>&amp;#209;</td> <td>Ñ</td> <td>латинская заглавная буква N с тильдой</td> </tr> <tr> <td>&amp;Ograve;</td> <td>&amp;#210;</td> <td>Ò</td> <td>латинская заглавная буква O с тупым ударением</td> </tr> <tr> <td>&amp;Oacute;</td> <td>&amp;#211;</td> <td>Ó</td> <td>латинская заглавная буква O с острым ударением</td> </tr> <tr> <td>&amp;Ocirc;</td> <td>&amp;#212;</td> <td>Ô</td> <td>латинская заглавная буква O с циркумфлексом</td> </tr> <tr> <td>&amp;Otilde;</td> <td>&amp;#213;</td> <td>Õ</td> <td>латинская заглавная буква O с тильдой</td> </tr> <tr> <td>&amp;Ouml;</td> <td>&amp;#214;</td> <td>Ö</td> <td>латинская заглавная буква O с тремой</td> </tr> <tr> <td>&amp;Oslash;</td> <td>&amp;#216;</td> <td>Ø</td> <td>латинская заглавная буква O со штрихом</td> </tr> <tr> <td>&amp;Ugrave;</td> <td>&amp;#217;</td> <td>Ù</td> <td>латинская заглавная буква U с тупым ударением</td> </tr> <tr> <td>&amp;Uacute;</td> <td>&amp;#218;</td> <td>Ú</td> <td>латинская заглавная буква U с острым ударением</td> </tr> <tr> <td>&amp;Ucirc;</td> <td>&amp;#219;</td> <td>Û</td> <td>латинская заглавная буква U с циркумфлексом</td> </tr> <tr> <td>&amp;Uuml;</td> <td>&amp;#220;</td> <td>Ü</td> <td>латинская заглавная буква U с тремой</td> </tr> <tr> <td>&amp;Yacute;</td> <td>&amp;#221;</td> <td>Ý</td> <td>латинская заглавная буква Y с острым ударением</td> </tr> <tr> <td>&amp;THORN;</td> <td>&amp;#222;</td> <td>Þ</td> <td>латинская заглавная буква THORN</td> </tr> <tr> <td></td> <td>&amp;#223;</td> <td>ß</td> <td>latin small letter sharp s = ess-zed</td> </tr> <tr> <td>&amp;agrave;</td> <td>&amp;#224;</td> <td>à</td> <td>латинская строчная буква А с тупым ударением</td> </tr> <tr> <td>&amp;aacute;</td> <td>&amp;#225;</td> <td>á</td> <td>латинская строчная буква a с острым ударением</td> </tr> <tr> <td>&amp;acirc;</td> <td>&amp;#226;</td> <td>â</td> <td>латинская строчная буква a с циркумфлексом</td> </tr> <tr> <td>&amp;atilde;</td> <td>&amp;#227;</td> <td>ã</td> <td>латинская строчная буква a с тильдой</td> </tr> <tr> <td>&amp;auml;</td> <td>&amp;#228;</td> <td>ä</td> <td>латинская строчная буква a с тремой</td> </tr> <tr> <td>&amp;aring;</td> <td>&amp;#229;</td> <td>å</td> <td>латинская строчная буква a с верхним кружком</td> </tr> <tr> <td>&amp;aelig;</td> <td>&amp;#230;</td> <td>æ</td> <td>латинская строчные буквы ae</td> </tr> <tr> <td>&amp;ccedil;</td> <td>&amp;#231;</td> <td>ç</td> <td>латинская строчная буква a с седилем</td> </tr> <tr> <td>&amp;egrave;</td> <td>&amp;#232;</td> <td>è</td> <td>латинская строчная буква e с тупым ударением</td> </tr> <tr> <td>&amp;eacute;</td> <td>&amp;#233;</td> <td>é</td> <td>латинская строчная буква e с острым ударением</td> </tr> <tr> <td>&amp;ecirc;</td> <td>&amp;#234;</td> <td>ê</td> <td>латинская строчная буква e с циркумфлексом</td> </tr> <tr> <td>&amp;euml;</td> <td>&amp;#235;</td> <td>ë</td> <td>латинская строчная буква e с тремой</td> </tr> <tr> <td>&amp;igrave;</td> <td>&amp;#236;</td> <td>ì</td> <td>латинская строчная буква i с тупым ударением</td> </tr> <tr> <td>&amp;iacute;</td> <td>&amp;#237;</td> <td>í</td> <td>латинская строчная буква i с острым ударением</td> </tr> <tr> <td>&amp;icirc;</td> <td>&amp;#238;</td> <td>î</td> <td>латинская строчная буква i с циркумфлексом</td> </tr> <tr> <td>&amp;iuml;</td> <td>&amp;#239;</td> <td>ï</td> <td>латинская строчная буква i с тремой</td> </tr> <tr> <td>&amp;eth;</td> <td>&amp;#240;</td> <td>ð</td> <td>латинская строчные символы eth</td> </tr> <tr> <td>&amp;ntilde;</td> <td>&amp;#241;</td> <td>ñ</td> <td>латинская строчная буква n с тильдой</td> </tr> <tr> <td>&amp;ograve;</td> <td>&amp;#242;</td> <td>ò</td> <td>латинская строчная буква o с тупым ударением</td> </tr> <tr> <td>&amp;oacute;</td> <td>&amp;#243;</td> <td>ó</td> <td>латинская строчная буква o с острым ударением</td> </tr> <tr> <td>&amp;ocirc;</td> <td>&amp;#244;</td> <td>ô</td> <td>латинская строчная буква o с циркумфлексом</td> </tr> <tr> <td>&amp;otilde;</td> <td>&amp;#245;</td> <td>õ</td> <td>латинская строчная буква 0 с тильдой</td> </tr> <tr> <td>&amp;ouml;</td> <td>&amp;#246;</td> <td>ö</td> <td>латинская строчная буква o с тремой</td> </tr> <tr> <td>&amp;oslash;</td> <td>&amp;#248;</td> <td>ø</td> <td>латинская строчная буква o со штрихом</td> </tr> <tr> <td>&amp;ugrave;</td> <td>&amp;#249;</td> <td>ù</td> <td>латинская строчная буква u с тупым ударением</td> </tr> <tr> <td>&amp;uacute;</td> <td>&amp;#250;</td> <td>ú</td> <td>латинская строчная буква u с острым ударением</td> </tr> <tr> <td>&amp;ucirc;</td> <td>&amp;#251;</td> <td>û</td> <td>латинская строчная буква u с циркумфлексом</td> </tr> <tr> <td>&amp;uuml;</td> <td>&amp;#252;</td> <td>ü</td> <td>латинская строчная буква u с тремой</td> </tr> <tr> <td>&amp;yacute;</td> <td>&amp;#253;</td> <td>ý</td> <td>латинская строчная буква y с острымударением</td> </tr> <tr> <td>&amp;thorn;</td> <td>&amp;#254;</td> <td>þ</td> <td>латинская строчная буква thorn</td> </tr> <tr> <td>&amp;yuml;</td> <td>&amp;#255;</td> <td>ÿ</td> <td>латинская строчная буква y с тремой</td> </tr> <tr> <td></td> <td>&amp;#338;</td> <td>Œ</td> <td>латинская заглавная лигатура OE</td> </tr> <tr> <td></td> <td>&amp;#339;</td> <td>œ</td> <td>латинская строчная лигатура oe</td> </tr> <tr> <td></td> <td>&amp;#352;</td> <td>Š</td> <td>latin capital letter S with caron</td> </tr> <tr> <td></td> <td>&amp;#353;</td> <td>š</td> <td>latin small letter s with caron</td> </tr> <tr> <td></td> <td>&amp;#376;</td> <td>Ÿ</td> <td>latin capital letter Y with diaeresis</td> </tr> <tr> <th colspan="4">Греческий алфавит</th> </tr> <tr> <td>&amp;Alpha;</td> <td>&amp;#913;</td> <td>Α</td> <td>греческая заглавная буква альфа</td> </tr> <tr> <td>&amp;Beta;</td> <td>&amp;#914;</td> <td>Β</td> <td>греческая заглавная буква бета</td> </tr> <tr> <td>&amp;Gamma;</td> <td>&amp;#915;</td> <td>Γ</td> <td>греческая заглавная буква гамма</td> </tr> <tr> <td>&amp;Delta;</td> <td>&amp;#916;</td> <td>Δ</td> <td>греческая заглавная буква дельта</td> </tr> <tr> <td>&amp;Epsilon;</td> <td>&amp;#917;</td> <td>Ε</td> <td>греческая заглавная буква эпсилон</td> </tr> <tr> <td>&amp;Zeta;</td> <td>&amp;#918;</td> <td>Ζ</td> <td>греческая заглавная буква дзета</td> </tr> <tr> <td>&amp;Eta;</td> <td>&amp;#919;</td> <td>Η</td> <td>греческая заглавная буква эта</td> </tr> <tr> <td>&amp;Theta;</td> <td>&amp;#920;</td> <td>Θ</td> <td>греческая заглавная буква тета</td> </tr> <tr> <td>&amp;Iota;</td> <td>&amp;#921;</td> <td>Ι</td> <td>греческая заглавная буква иота</td> </tr> <tr> <td>&amp;Kappa;</td> <td>&amp;#922;</td> <td>Κ</td> <td>греческая заглавная буква каппа</td> </tr> <tr> <td>&amp;Lambda;</td> <td>&amp;#923;</td> <td>Λ</td> <td>греческая заглавная буква лямбда</td> </tr> <tr> <td>&amp;Mu;</td> <td>&amp;#924;</td> <td>Μ</td> <td>греческая заглавная буква мю</td> </tr> <tr> <td>&amp;Nu;</td> <td>&amp;#925;</td> <td>Ν</td> <td>греческая заглавная буква ню</td> </tr> <tr> <td>&amp;Xi;</td> <td>&amp;#926;</td> <td>Ξ</td> <td>греческая заглавная буква кси</td> </tr> <tr> <td>&amp;Omicron;</td> <td>&amp;#927;</td> <td>Ο</td> <td>греческая заглавная буква омикрон</td> </tr> <tr> <td>&amp;Pi;</td> <td>&amp;#928;</td> <td>Π</td> <td>греческая заглавная буква пи</td> </tr> <tr> <td>&amp;Rho;</td> <td>&amp;#929;</td> <td>Ρ</td> <td>греческая заглавная буква ро</td> </tr> <tr> <td>&amp;Sigma;</td> <td>&amp;#931;</td> <td>Σ</td> <td>греческая заглавная буква сигма</td> </tr> <tr> <td>&amp;Tau;</td> <td>&amp;#932;</td> <td>Τ</td> <td>греческая заглавная буква тау</td> </tr> <tr> <td>&amp;Upsilon;</td> <td>&amp;#933;</td> <td>Υ</td> <td>греческая заглавная буква ипсилон</td> </tr> <tr> <td>&amp;Phi;</td> <td>&amp;#934;</td> <td>Φ</td> <td>греческая заглавная буква фи</td> </tr> <tr> <td>&amp;Chi;</td> <td>&amp;#935;</td> <td>Χ</td> <td>греческая заглавная буква хи</td> </tr> <tr> <td>&amp;Psi;</td> <td>&amp;#936;</td> <td>Ψ</td> <td>греческая заглавная буква пси</td> </tr> <tr> <td>&amp;Omega;</td> <td>&amp;#937;</td> <td>Ω</td> <td>греческая заглавная буква омега</td> </tr> <tr> <td>&amp;alpha;</td> <td>&amp;#945;</td> <td>α</td> <td>греческая строчная буква альфа</td> </tr> <tr> <td>&amp;beta;</td> <td>&amp;#946;</td> <td>β</td> <td>греческая строчная буква бета</td> </tr> <tr> <td>&amp;gamma;</td> <td>&amp;#947;</td> <td>γ</td> <td>греческая строчная буква гамма</td> </tr> <tr> <td>&amp;delta;</td> <td>&amp;#948;</td> <td>δ</td> <td>греческая строчная буква дельта</td> </tr> <tr> <td>&amp;epsilon;</td> <td>&amp;#949;</td> <td>ε</td> <td>греческая строчная буква эпсилон</td> </tr> <tr> <td>&amp;zeta;</td> <td>&amp;#950;</td> <td>ζ</td> <td>греческая строчная буква дзета</td> </tr> <tr> <td>&amp;eta;</td> <td>&amp;#951;</td> <td>η</td> <td>греческая строчная буква эта</td> </tr> <tr> <td>&amp;theta;</td> <td>&amp;#952;</td> <td>θ</td> <td>греческая строчная буква тета</td> </tr> <tr> <td>&amp;iota;</td> <td>&amp;#953;</td> <td>ι</td> <td>греческая строчная буква иота</td> </tr> <tr> <td>&amp;kappa;</td> <td>&amp;#954;</td> <td>κ</td> <td>греческая строчная буква каппа</td> </tr> <tr> <td>&amp;lambda;</td> <td>&amp;#955;</td> <td>λ</td> <td>греческая строчная буква лямбда</td> </tr> <tr> <td>&amp;mu;</td> <td>&amp;#956;</td> <td>μ</td> <td>греческая строчная буква мю</td> </tr> <tr> <td>&amp;nu;</td> <td>&amp;#957;</td> <td>ν</td> <td>греческая строчная буква ню</td> </tr> <tr> <td>&amp;xi;</td> <td>&amp;#958;</td> <td>ξ</td> <td>греческая строчная буква кси</td> </tr> <tr> <td>&amp;omicron;</td> <td>&amp;#959;</td> <td>ο</td> <td>греческая строчная буква омикрон</td> </tr> <tr> <td>&amp;pi;</td> <td>&amp;#960;</td> <td>π</td> <td>греческая строчная буква пи</td> </tr> <tr> <td>&amp;rho;</td> <td>&amp;#961;</td> <td>ρ</td> <td>греческая строчная буква ро</td> </tr> <tr> <td>&amp;sigmaf;</td> <td>&amp;#962;</td> <td>ς</td> <td>греческая строчная буква сигма (final)</td> </tr> <tr> <td>&amp;sigma;</td> <td>&amp;#963;</td> <td>σ</td> <td>греческая строчная буква сигма</td> </tr> <tr> <td>&amp;tau;</td> <td>&amp;#964;</td> <td>τ</td> <td>греческая строчная буква тау</td> </tr> <tr> <td>&amp;upsilon;</td> <td>&amp;#965;</td> <td>υ</td> <td>греческая строчная буква ипсилон</td> </tr> <tr> <td></td> <td>&amp;#966;</td> <td>φ</td> <td>греческая строчная буква фи</td> </tr> <tr> <td>&amp;chi;</td> <td>&amp;#967;</td> <td>χ</td> <td>греческая строчная буква хи</td> </tr> <tr> <td>&amp;psi;</td> <td>&amp;#968;</td> <td>ψ</td> <td>греческая строчная буква пси</td> </tr> <tr> <td>&amp;omega;</td> <td>&amp;#969;</td> <td>ω</td> <td>греческая строчная буква омега</td> </tr> </tbody> </table>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-5533795130944149192009-08-31T14:22:00.005+05:002011-01-03T23:54:06.149+03:00Как правильно создать html письмо<b>Статья является переводом <a href="http://www.sitepoint.com/article/code-html-email-newsletters" rel="nofollow" title="Как правильно сверстать HTML письмо">“How to Code HTML Email Newsletters”</a>, написанной Тимом Слэйвином (Tim Slavin) для сайта sitepoint.com.</b><br /> <br /> Электронное письмо в HTML формате по-прежнему является весьма успешным видом коммуникации между издателями и читателями. Издатели могут отслеживать разные показатели по таким письмам, например, чтение письма, пересылка, переход по ссылкам в тексте письма, а также интерес читателей к тем или иным продуктам и темам. Читатели воспринимают информацию как обычную веб страницу, она визуально более привлекательна и гораздо легче читаема, чем текстовые письма.<br /> <a name='more'></a><br /> <br /> В последнее время сверстать письмо в HTML формате стало легче – некоторые почтовые провайдеры, такие как Google Mail, улучшили поддержку CSS. Однако, в тоже время, Outlook 2007 сделал шаг назад на пути отображения HTML писем: в прошлом году Microsoft заменила движок рендеринга HTML, который использовался Outlook, на новый, уступающий предыдущему в плане поддержки CSS.<br /> <br /> Другими достижениями в этой области за последние несколько лет стало появление сервиса <a href="http://email-standards.org/" rel="nofollow">Email Standards Project</a>, который направлен на то, чтобы улучшить соответствия между почтовым программным обеспечением; появление услуг тестирования того, как письма будут отображаться в разных почтовых десктопных и веб приложениях; появление множества бесплатных шаблонов для использования в своих целях. В этой статье мы рассмотрим некоторые сервисы и шаблоны, которые помогут вам понять, как правильно сверстать письмо в HTML формате.<br /> <br /> Не смотря на эти успехи, верстка может стать нетривиальным делом. В этой статье я попробую раскрыть все секреты правильной верстки писем и при этом добиться хорошего отображения в большинстве почтовых клиентов. Я опишу результаты моего личного опыта создания HTML писем, а также затрону некоторую техническую информацию сети Интернет.<br /> <br /> Это, по сути, вторая версия статьи, которая была написана и опубликована на sitepoint.com в 2004 году, и включает в себя новые материалы, которые помогут вам убедиться в том, что ваши электронные письма отвечают всем требованиям сегодняшних почтовых клиентов.<br /> <br /> <span id="more-3"> </span><br /> <br /> <h4>Основы</h4><br /> При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб-интерфейс - Yahoo!, Hotmail, Google Mail и др. Если Вы думали, что придерживаться кросс-браузерности при верстке веб-страниц было трудным, то приготовтесь к новой игре, так как каждый из выше упомянутых клиентов может отображать одно и то же электронное письмо совсем по-другому. И даже когда эти средства будут отображать все отлично, вы должны помнить, что читатели, могут изменять размеры окна при чтении, при этом могут возникать разного рода неприятности.<br /> <br /> Если вы решите заниматься ручной версткой HTML писем (мое предпочтение) или использовать уже готовый шаблон, вы должны помнить о двух вещах:<br /> <br /> <ul><li>1. Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб-страниц, но эти принципы плохо работают в почтовых клиентах.</li> <li>2. Используйте вложенный в HTML-тэги CSS код, например, цвет фона или стили для текста.</li> </ul><br /> Простой и быстрый способ увидеть, как взаимодействуют HTML таблицы и inline-CSS в электронном письме – скачать несколько бесплатных шаблонов с <a href="http://campaignmonitor.com/resources/templates.aspx" rel="nofollow">Campaign Monitor</a> и <a href="http://www.mailchimp.com/resources/templates/" rel="nofollow">MailChimp</a>. Когда вы просмотрите исходный код, вы увидите несколько вещей, которые мы обсудим немного позже:<br /> <br /> <ul><li>1. Объявление CSS-стилей описано ниже тэга body.</li> <li>2. Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height.</li> <li>3. Таблицы исполняют всю работу по представлению письма, а с помощью тэгов span и div можно добиться специфических эффектов.</li> <li>4. CSS-стили - базовые.</li> </ul><br /> <h4>Шаг 1: Используйте таблицы для представления</h4><br /> Именно таблицы! Веб-стандарты стали нормой при верстке страниц, но ни в этом случае. Почтовые клиенты немного отстают в поддержке CSS-стандартов, а это означает, что мы должны вернутся к таблицам для представления, если мы хотим, что бы наши письма корректно отображались для каждого читателя.<br /> <br /> В этом случае вам придется отойти от ваших отличных навыков верстки веб-страниц, здесь нужно использовать немного другие подходы.<br /> <br /> На первом шаге создания HTML письма вы должны решить, как оно будет выглядить. Если очень много информации хочется предоставить читателю, для этих целей подойдет одна или две колонки – это поможет упорядочить хаос.<br /> <br /> Одноколоночный формат типично состоит из:<br /> <br /> <ul><li>1. Шапки, куда помещается логотип и некоторые (или все) навигационные ссылки из оригинального веб-сайта, для того, чтобы обеспечить схожесть с сайтом.</li> <li>2. Ссылки на новости, которые находятся ниже в письме.</li> <li>3. Подвал (футер) - внизу письма, который обычно содержит ссылки, которые идентичны ссылкам в шапке письма, а также инструкции о том, как отписаться от рассылки.</li> </ul><br /> Двухколоночные электронные письма также содержат шапку и подвал, а так же как и двухколоночные веб-страницы у них есть узкая колонка (справа или слева), в которой содержатся навигация, ссылки и дополнительная информация, и колонку пошире.<br /> <br /> В промо-письмах придерживаются аналогичных правил, но они содержат меньше текста и ссылок. Зачастую, они содержат одно или два главных сообщения, и одну большую картинку с пояснениями и ссылками под картинкой.<br /> <br /> Все это можно с легкостью создать, используя таблицы, разбивая с их помощью документ на блоки. На самом деле, использование таблиц - единственный способ добиться правильного отображения в разных почтовых программах.<br /> <br /> Не играет роли, какой дизайн у вашего письма, главное, что нужно помнить - помещайте важную информацию как можно выше, чтоб при открытии читатель сразу же видел самое важное. При открытии письма читатели зачастую обращают внимание на левую верхнюю часть, а уже потом на все остальное.<br /> <br /> Вот какой подход я использую при создании писем в HTML формате:<br /> <br /> <ul><li>1. Для двухколоночного представления создайте три таблицы - одну для шапки, одну (двухколоночную) для контента (главной части) и одну для подвала. Поместите эти три таблицы в одну большую таблицу. Используйте такой же подход и для одноколоночного документа. Не нужно скупиться на таблицы, используйте для каждого элемента свою, так вы будете уверены, что ваше письмо будет отображаться хорошо почти во всех почтовых клиентах.</li> <li>2. Используйте атрибуты в тэгах таблицы (table) и ячеек (td), для контроля отображения. Например, border="0", valign="top", align="left", cellpadding="0" и так далее. Это поможет старым почтовым клиентам корректно отображать письмо.</li> <li>3. Даже если ваш дизайн не предусматривает границ вокруг таблиц, вы найдете очень полезным во время разработки установить значение border="1" для того, чтобы найти возможные ошибки. После того, как ошибки будут устранены, установите border="0."</li> </ul><br /> Подход с использованием описанных выше приемов является наиболее приемлемым на сегодняшний день, хотя и может показаться оскорбительным для верстальщиков, привыкших использовать современные стандарты.<br /> <br /> Давайте посмотрим, как можно стилизировать текст в электронном письме.<br /> <br /> <h4>Шаг 2: Добавляем стили CSS</h4><br /> Говорил ли я о том, что поддержка CSS стилей была очень слабой в почтовых клиентах? Да, это именно так. Тут есть несколько вещей, за которыми нужно следить. Вот методы, которыми я пользуюсь.<br /> <br /> Во-первых, используйте inline-стили, как показано здесь:<br /> <br /> &lt;style="color: red;"&gt;<br /> <br /> Такой же прием нужно использовать и в тегах таблиц, ячеек, параграфов, ссылок и др.<br /> <br /> Не используйте объявления стилей в теге &lt;head&gt; как для веб-страниц. Вместо этого прописывайте стили ниже тега &lt;body&gt; - Google Mail, в частности, сканирует документ и, если находит объявление стилей выше этого тэга, удаляет. Также не используйте элемент &lt;link&gt; для подгрузки внешних стилей: Google Mail, Hotmail и другие почтовые клиенты могут игнорировать их, удалять или модифицировать.<br /> <br /> Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.<br /> <br /> Прописывайте основную информацию о стилях шрифта в теге ячейки &lt;td&gt; ближе к контенту. Это может привести к повторению стилей в других тегах &lt;td&gt;. Прописывайте стили в тегах заголовков (h1, h2), p или a, когда это необходимо.<br /> <br /> Используйте тэг div для позиционирования блоков слева или справа в ячейках таблицы. Google Mail игнорирует блоки, описанные как плавающие (float), но в Yahoo! и Hotmail не возникает проблем. В некоторых случаях лучше всего будет создать таблицу посложнее, с большим количеством ячеек, чем полагаться на плавающие блоки<br /> <br /> В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.<br /> <br /> Заметьте, что некоторые сервисы, которые доставляют электронные письма, могут модифицировать стили так, что, например, короткое правило style="margin: 10px 5px 10px 0;" будет разбито на несколько меньших правил. Делается это для того, что бы письмо было понятно большинству почтовых клиентов. Тестируйте каждое письмо и смотрите, что происходит с кодом, избегайте частое использование коротких правил.<br /> <br /> Если вы уже скачали и просмотрели некоторые шаблоны из Campaign Monitor и MailChimp, вы могли увидеть, что основная таблица описана так, как-будто это тэг body. Команда разработчиков из Campaign Monitor дает внешней таблице название “BodyImposter,” что дает представление о ней, как о главной таблице – каркасе, в середине которого размещаются все остальные элементы.<br /> <br /> <h4>Шаг 3: Лучшие приемы</h4><br /> Если вы создали рабочее и хорошо отображаемое HTML письмо, используя советы, описанные выше, то это только часть работы – есть еще несколько шагов, которые вы должны знать, чтобы убедится, что ваше письмо получено в наилучшем виде.<br /> <br /> Следующий шаг – тестирование письма в разнообразных почтовых клиентах. На этой стадии чаще всего находятся некоторые ошибки, которые нужно исправить.<br /> <br /> Первыми инструментами для тестов служат браузеры Firefox и Internet Explorer. Если все отображается прекрасно в обоих браузерах, есть все надежды, что тестирование в Outlook, Yahoo!, Google Mail и других сервисах могут показать только незначительные ошибки. Я также рекомендую тестировать все ваши шаблоны писем в браузере Internet Explorer 6 – он сразу же покажет, как ваше письмо будет отображено в Outlook 2003.<br /> <br /> Как только ваш шаблон корректно отображается в этих двух веб-браузерах, переходите к тестам, используя сервис доставки писем, разослав их на свои тестовые почтовые адреса в различных почтовых службах. В идеальном случае это могут быть Yahoo!, Hotmail и Google Mail. Почтовые аккаунты, которые вы будете использовать для тестов должны определяться тем, какими сервисами пользуются ваши подписчики. Для примера, если среди ваших подписчиков нет пользователей с почтовыми адресами из сервиса AOL, то, возможно, тестирование и наладка шаблона под этот сервис будет пустой тратой времени и денег.<br /> <br /> Важные приемы на этом шаге:<br /> <br /> <ul><li>1. Иногда смена ширины таблицы с процентов на фиксированную ширину очень важна. Пользователи могут менять размер окна при просмотре, фиксированная ширина таблицы – единственный способ добиться правильного отображения.</li> <li>2. Если наблюдаются проблемы с пространством в колонках, нужно в первую очередь настроить значения атрибутов cellpadding и cellspacing для таблицы. Если это не приводит к желаемому результату, примените CSS-атрибуты margin и padding.</li> <li>3. Неправильное перемещение картинок может возникнуть, когда тэг &lt;/td&gt; закрывается ниже тэга &lt;img&gt;. Это очень старая HTML проблема. Если поставить тэг &lt;/td&gt; сразу же после тэга &lt;img&gt; (на той же строке) это может решить проблему одно-пиксельного разрыва.</li> </ul><br /> И еще:<br /> <br /> <ul><li>1. Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.</li> <li>2. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.</li> <li>3. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.</li> <li>4. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.</li> <li>5. Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2007 не поддерживает атрибут alt.</li> <li>6. Используйте атрибут target="_blank" для ссылок, чтобы читатели, которые используют веб-интерфейс, не загружали страницу в том же окне, в которм открыта почта.</li> <li>7. Попробуйте не использовать одно-пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо - спам. Именно таким приемом пользуются спамеры для того, чтоб узнать, открыл ли читатель их письмо. В худшем случае ваше письмо попадет под фильтр и читатель может его даже не прочитать.</li> </ul><br /> Очень важно, чтобы ваше письмо хорошо смотрелось и с выключенными изображениями. По умолчанию Thunderbird, Outlook и другие почтовые клиенты не показывают изображений. Например, если вы используете белый шрифт на темном фоне, проверьте, что бы с выключенными изображениями фон оставался темным.<br /> <br /> В тест вашего электронного письма, включите тест проверки “на спам.” Для этого можно воспользоваться бесплатным сервисом <a href="http://spamcheck.sitesell.com/" rel="nofollow">SpamCheck</a>.<br /> <br /> Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты:<br /> <br /> <ul><li>1. Правильно ли отображается отправитель письма – имя или почтовый адрес?</li> <li>2. Корректна ли тема письма?</li> <li>3. Корректна ли контактная информация, и можно ли ее увидеть сразу?</li> <li>4. Есть ли текст, вверху письма, “Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.”?</li> <li>5. Есть ли у вас ссылка для добавления вашего адреса в контакты?</li> <li>6. Присутствуют ли в вашем письме ссылки на веб-версию письма?</li> </ul><br /> Очень важно знать, что может пойти не так или какие проблемы могут возникнуть при отображении, попробовать их устранить до того, как письмо будет разослано подписчикам.<br /> <br /> <h4>Шаг 4: Код для Google Mail, Lotus Notes и Outlook 2007</h4><br /> Google Mail, Lotus Notes и Outlook 2007 имеют свои определенные моменты. Хотите верьте, хотите нет, но Outlook 2007 имеет еще более слабую поддержку CSS стилей, чем предыдущие версии данного продукта.<br /> <br /> Google Mail осуществляет поддержку получше, так как просмотр письма происходит в веб-браузере - многое зависит от браузера. Конечно, движок Google Mail имеет некоторые настройки, которые следят за тем, как должно отображаться письмо. Google Mail автоматически удаляет стили CSS, которые заключены между тэгами style.<br /> <br /> Хорошей новостью является то, что если ваше письмо сверстано хорошо для этих трех почтовых клиентов (Google Mail, Lotus Notes и Outlook 2007), то оно будет хорошо отображаться почти во всех остальных почтовых клиентах, если не во всех.<br /> <br /> Некоторые методы, которых необходимо придерживаться для Google Mail и старых почтовых клиентов:<br /> <br /> <ul><li>1. Прописывайте определение фонового цвета с помощью атрибута bgcolor тэга td, не использует для этих целей CSS-стили.</li> <li>2. Используйте атрибут background для тэга td, что бы применить фоновую картинку, вместо CSS-стилей.</li> <li>3. Используйте padding для контроля отступов в ячейках, margin в этом случае не работает.</li> <li>4. Если вам нужны границы вокруг ячеек, используйте дополнительный тэг div, в котором прописывайте значения границ, так как назначение границ напрямую тэгу td не будет работать в Google Mail.</li> <li>5. Выставляйте отступы по 10 пикселей вокруг контента, что бы текст не “заезжал” на границы.</li> <li>6. Тщательно проверяйте все шрифты, может случиться, что вы забудете прописать стили в нескольких местах.</li> </ul><br /> А теперь перейдем к Lotus Notes. Много компаний продолжают использовать и обновлять этот почтовый клиент (в 1995 IBM объявила, что 95 миллионов людей пользуются Lotus Notes).<br /> <br /> Главным для правильного отображения письма в этом почтовом клиенте – код должен быть как можно проще и понятней.<br /> <br /> Если вам нужно протестировать ваше письмо в Lotus Notes, вы можете скачать бесплатную пробную версию.<br /> <br /> Что бы Lotus Notes отображал ваше письмо в HTML формате корректно, придерживайтесь следующих рекомендаций:<br /> <br /> <ul><li>1. Как мы уже обсуждали выше, используйте таблицу-контейнер, которая будет включать все остальные элементы письма, а также отдельные таблицы для шапки, основной части и подвала.</li> <li>2. Создайте пространство вокруг главной таблицы, используйте атрибут cellpadding, установив его значение, равным как минимум 5%.</li> <li>3. Не используйте декларации стилей в тэге head, Lotus может просто их удалить.</li> <li>4. Используйте абсолютные пути для картинок, которые храните на сервере.</li> <li>5. Попробуйте не использовать атрибут colspan в таблицах, ранние версии Lotus Notes не понимают их.</li> <li>6. Прописывайте ширину ячеек в тэгах td.</li> <li>7. Центрирование письма обычно не работает в Lotus.</li> </ul><br /> Использование данных методов и рекомендаций обеспечит вашим HTML письмам отличное отображение в Google Mail и Lotus Notes, а также даст гарантии, что не возникнет проблем с Outlook 2007, который использует более старый движок.<br /> <br /> <h4>Резюме.</h4><br /> Много пользователей отдают предпочтение получать письма в HTML формате, вместо обычного текстового формата, и это понятно. Но для программистов (верстальщиков), создающих такие письма, справится с задачей иногда не так просто, потому что нужно добиваться их отличного рендеринга во многих почтовых клиентах. В этой статье были преведены некоторые методы и приемы, благодаря которым можно добиться хороших результатов.<br /> <br /> <h4>Ссылки</h4><br /> <a href="http://www.email-standards.org/" rel="nofollow">Email Standards Project</a> - сайт, на котором вы найдете много рекомендаций о том, какие свойства поддерживают разные почтовые клиенты, как добиться правильного рендеринга и многое другое.<br /> <br /> <a href="http://campaignmonitor.com/resources/templates.aspx" rel="nofollow">Campaign Monitor</a> и <a href="http://www.sitepoint.com/article/code-html-email-newsletters/3" rel="nofollow">MailChimp</a> - много различных шаблонов для писем в HTML формате.<br /> <br /> <a href="http://spamcheck.sitesell.com/" rel="nofollow">SpamCheck</a> - проверка “на спам” писем.<br /> <br /> <br /> <br /> <hr /><br /> <br /> <br /> Разработка HTML шаблона письма – один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.<br /> <br /> Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет как такового, так как фильтры и триггеры могут заблокировать письмо.<br /> <br /> Поэтому сегодня хочу дать вам 20 советов как избежать наиболее частых ошибок при создании email шаблонов. Данные советы не претендуют на звание HTML справочника для email маркетологов, но, думаю, вам пригодятся.<br /> <br /> Я не буду расписывать зачем использовать тот или иной пункт, если это очевидно. Если у вас возникнут вопросы – пишите в комментариях.<br /> <br /> <ol><h3>ФОРМАТИРОВАНИЕ</h3><li><b>Создавайте письма вручную.</b></li> Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные “WYSIWYG” (What You See Is What You Get) редакторы полны недостатков. Практически все из них вставляют лишний html код (особенно FrontPage), который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML. <li><b>Избегайте вложенных таблиц</b></li> <li><b>Не используйте фоновых рисунков, практически во всех </b><b>email клиентах они не отображаются</b></li> <li><b>Располагайте картинки на своем сервере, вместо включения их в письмо</b></li> Некоторые имейл фильтры блокируют письма с вложенными рисунками. Также размер письма может быть значительным, поэтому оно может быть заблокировано сервером. При получении пользователем письма с сервера, оно может долго приниматься его почтовой программой, что, несомненно, может повлиять на его восприятие. Поэтому располагайте изображения на своем хостинге, а в письмо вставляйте ссылку на изображение. <li><b>Избегайте использования картинок 1х1 пикселей (для подгона размера элементов таблиц).</b></li> <li><b>Не используйте </b><b>CSS</b></li> CSS значительно упрощает работу со стилями для вебсайтов, но в случае HTMLписем это может повлиять на корректное отображение письма. Не используйте стили из отдельно прикрепленного файла. Наилучший вариант включить стили в headerчасть письма. <li><b>Не делайте ширину сообщений более 650 пикселей в ширину<br /> <br /> </b></li> В некоторых почтовых программах пользователям придется использовать горизонтальный скроллинг для чтения письма. <li><b>Размер сообщения должен быть не более 100 кб</b></li> <h3>USABILITY</h3><li><b>Проверяйте </b><b>HTML код на корректность. Для этого существует масса всевозможных отдельных утилит, встроенные чекеры в программах для работы с </b><b>HTML и, естественно, </b><b><a href="http://validator.w3.org/" target="_blank">W3C Validator</a>. </b></li> <li><b>Не используйте скрипты в письмах.</b></li> Письма могут быть заблокированы фильтрами. <li><b>Вставляйте в письмо ссылку на </b><b>Web версию сообщения</b></li> В случае, если у пользователя не откроется ваше сообщение в корректном виде, дайте ему возможность прочитать его на вашем сервере. Для этого разместите ссылку на «Веб версию». <li><b>Используйте </b><b>alt теги для изображений.</b></li> В случае, если у пользователя будет заблокировано отображение изображений в письмах, то он увидит альтернативный текст, который вы можете указать по своему усмотрению. <li><b>Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см</b></li> <li><b>Используйте горизонтальное расположение текста, не используйте вертикальное</b></li> <li><b>Объедините в письме текст и </b><b>HTML, лучше использовать цвета и стили вместо картинок.</b></li> <h3>ФУНКЦИОНАЛЬНОСТЬ</h3><li><b>Вставляйте большое количество ссылок на информацию на вашем сайте.</b></li> <li><b>Навигация по вашему </b><b>email сообщению должна совпадать с типом навигации на вашем сайте.</b></li> <li><b>Вставляйте функциональность вроде «Отправить другу» с осторожностью</b></li> Многие email программы могут некорректно отображать формы. Лучше использоваться ссылку на страницу вашего сайта, где находится форма «Отправить другу». <li><b>Добавьте возможность управления подпиской в письмо</b></li> Об этом я уже неоднократно писала. <li><b>Аналогично с изображениями, аудио файлы, флеш и видео лучше хранить на вашем сервере и не прикреплять к письму.</b></li> Многие получатели могуn не иметm соответствующего ПО, поддерживающего данные форматы </ol><br /> Для создания и отправки email рассылки рекомендую использовать <a href="http://www.epochta.ru/products/mailer/" target="_blank">ePochta Mailer</a>, который обладает собственным WYSIWYG редактором, возможностью ручного редактирования HTML кода и просмотра полученного результата с помощью встроенного браузера.Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-17898395397879126942009-07-06T01:04:00.001+05:002009-07-06T01:05:59.826+05:00Code-only rounded HTML boxes<a href="http://dillerdesign.com/experiment/DD_roundies/">Идем, читаем, качаем, делаем</a>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-44760366818017822942009-07-06T00:53:00.004+05:002011-01-03T23:54:35.128+03:00ie6 PNG backgrounds - отображение png фонов IE6Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом .<br /> <a name='more'></a><br /> <br /> Теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.<br /> <br /> Примеры, пояснения - <a href="http://dillerdesign.com/experiment/DD_belatedPNG/">http://www.dillerdesign.com/experiment/DD_belatedPNG/</a>. <br /> Реализуется все при помощи JavaScript, который создает и присваивает необходимому элементу страницы <dd_belatedpng:rect> (то есть наш .png «перерожденный» в VML).<br /> <br /> Чтобы работало нужно:<br /> <br /> 1. cкачать и подключить к HTML-документу JavaScript (на страничке с примерами есть две ссылки — на обычный и сжатый файлы);<br /> 2. внутри HTML-документа запустить функцию (DD_belatedPNG.fix()), которой необходимо, в качестве параметра, передать селектор элемента, над которым мы проводим обряд манипуляцию.<br /> <br /> <br /> Например:<br /> <br /> <br /> <br /> <br /> Что особенного?<br /> <br /> * в отличии от других fixов не использует AlphaImageLoader, тем самым не создавая путаницы в порядках слоев (изменения z-index после применения фильтра);<br /> * как сказано выше теперь свойства CSS background-repeat и background-position работают;<br /> * заодно поддерживается доступ к стилю элемента через element.style и работа с псевдо-классом :hover;<br /> * скромный вес скрипта — 4 Кб в сжатом виде.</dd_belatedpng:rect>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com0tag:blogger.com,1999:blog-22716610.post-68447849749729685372008-01-24T16:38:00.001+04:002009-10-20T21:36:00.568+05:00Оформляем таблицу средствами cssТаблица тянется по ширине в зависимости от наполнения.<br /> <br /> <span id="more-32"></span><br /> <br /> html:<br /> <br /> <pre>&lt;table class="table"&gt;&lt;tr&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</pre><br /> <br /> css:<br /> <br /> <pre>.table{ border:none; margin:0; padding:0; width:auto; } .table td{ border:1px solid #cccccc; border-collapse:collapse; padding:4px; vertical-align:top; }</pre>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-22612922915515969812008-01-24T16:36:00.001+04:002009-10-20T21:37:58.028+05:00Скрипт - вертикально раскрывающееся менюСкрипт - вертикально раскрывающееся меню, по клику на элемент меню другие сворачиваются<br /> <br /> <span id="more-34"></span><br /> <br /> Содержимое файла script.js:<br /> <br /> <pre>var id_menu = new Array('sub_menu_1','sub_menu_2'); function allclose() { for (i=0; i &lt; id_menu.length; i++){ document.getElementById(id_menu[i]).style.display = "none"; } } function openMenu(id){ for (i=0; i &lt; id_menu.length; i++){ if (id != id_menu[i]){ document.getElementById(id_menu[i]).style.display = "none"; } } if (document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; }else{ document.getElementById(id).style.display = "block"; } }</pre><br /> В head вашего html линкуем созданный файл скрипта:<br /> <br /> <pre>&lt;script language="JavaScript" type="text/javascript" src="scripts/script.js"&gt;&lt;/script&gt; </pre><br /> <br /> В body закрываем все открымые элементы подменю<br /> <br /> <pre>&lt;body onload="allclose()"&gt; </pre><br /> А вот и само меню:<br /> <br /> <pre>&lt;ul class="leftmenu"&gt; &lt;li&gt;&lt;a href="#" onClick="openMenu('sub_menu_1');return(false)"&gt;Законодательство&lt;/a&gt; &lt;ul id="sub_menu_1" &gt; &lt;li&gt;&lt;a href="#"&gt;Законодательство&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Структуры и ведомства&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Статьи о недвижимости&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Документы для строительства&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Экологическая карта&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" onClick="openMenu('sub_menu_2');return(false)" &gt;Структуры и ведомства&lt;/a&gt; &lt;ul id="sub_menu_2" &gt; &lt;li&gt;&lt;a href="#"&gt;Законодательство&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Структуры и ведомства&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Статьи о недвижимости&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Документы для строительства&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Экологическая карта&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </pre>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com6tag:blogger.com,1999:blog-22716610.post-56924827809773602962008-01-24T16:32:00.001+04:002009-10-20T21:38:41.506+05:00Предварительная загрузка изображений средствами css (Preload Images with CSS)Этот метод позволяет избежать использования javascript для предварительной загрузки изображений.<br /> <br /> Метод достаточно прост и эффективен и состоит из двух частей css и html код.<br /> <br /> <span id="more-37"></span><br /> <br /> CSS:<br /> <br /> <pre>#preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url(); }</pre><br /> HTML:<br /> <br /> <pre>&lt;div id="preloadedImages"&gt;&lt;/div&gt; </pre><br /> <br /> Как это работает?<br /> <br /> Браузер загружает preloadedImages css как фоновые изображения не отображая их, но помещает их в кэш браузера, что позволяет в последствии быстро обращаться в предварительно загруженным изображениям.Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-6551197868840031142007-01-22T13:10:00.001+04:002009-10-20T21:30:57.238+05:00Шпаргалки<table border="0" cellpadding="0" cellspacing="0" class="body-table"><tbody> <tr><td class="body-main" width="78%"><h1>Cascading Style Sheet (CSS) hacks</h1>phespirit.info styles are defined in a single CSS document: <a href="http://www.phespirit.info/stylesheet/phespirit.css" target="_blank">www.phespirit.info/stylesheet/phespirit.css</a><br /> phespirit.css hacks have been tested for consistency and accessibility using the following browsers:<br /> <ul><li>Netscape 4.78 (NN4) on Windows 98 and Windows XP Professional</li> <li>Netscape 6.21 (NN6) on Windows 98</li> <li>Netscape 7.00 (NN7) on Windows 98</li> <li>Mozilla Firefox 1.5.0.9 (FF1) on Windows XP Professional</li> <li>Microsoft Internet Explorer 5.50 (IE5) on Windows 98</li> <li>Microsoft Internet Explorer 6.00 (IE6) on Windows 2000 and Windows XP Professional</li> <li>Opera 6.04 (OP6) on Windows 98 and Windows XP Professional</li> <li>Opera 7.54 (OP7) on Windows XP Professional</li> <li>Opera 8.02 (OP8) on Windows XP Professional</li> </ul><hr /><h2><a class="name" href="" name="hack1">CSS Hack 1 : hiding CSS from NN4</a></h2>Example code - to hide a horizontal rule width setting of 100% from NN4:<br /> <code><b> /*/*/a{}<br /> <br /> hr { width : 100%; }<br /> <br /> /* */<br /> </b></code> <br /> <div class="align-j">By preceding single or multiple style(s) with /*/*/a{} and terminating the style(s) with /* */ all content in between will be invisible to NN4. Hacks for other browsers can be used inside this hack. <br /> </div><hr /><h2><a class="name" href="" name="hack2">CSS Hack 2 : hiding CSS from IE4/5</a></h2>Example code - to set a paragraph font-size of x-small for IE4/5 and a font-size small for IE6:<br /> <code><b> p<br /> {<br /> font-size : x-small;<br /> voice-family : "\"}\"";<br /> voice-family : inherit;<br /> font-size : small;<br /> }<br /> </b></code> <br /> <div class="align-j">Microsoft Internet Explorer versions 4 and 5 cannot detect styles after voice-family : "\"}\""; due to a bug in their implementation of voice-family. This example initially sets the font-size to a keyword value of x-small for all browsers, then terminates the style settings for IE4/5, recovers the voice-family style for IE6 (along with other browsers which do not have this bug) and finally resets the font-size to small. <br /> </div><hr /><h2><a class="name" href="" name="hack3">CSS Hack 3 : hiding CSS from IE4/5/6</a></h2>Example code - to hide a horizontal rule width setting of 100% from IE4/5/6:<br /> <code><b> html&gt;body hr { width : 100%; }<br /> </b></code> <br /> <div class="align-j">Microsoft Internet Explorer versions, up to and including version 6, are unable to recognise style rules which include a child selector (two or more selectors separated by a "&gt;" symbol) in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the child of the html element. <br /> </div><hr /><h2><a class="name" href="" name="hack4">CSS Hack 4 : hiding CSS from OP6</a></h2>Example code - to hide a horizontal rule width setting of 100% from OP6:<br /> <code><b> head:first-child+body hr { width : 100%; }<br /> </b></code> <br /> <div class="align-j">Opera is unable to recognise style rules which include the :first-child pseudo-element in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the first child (i.e. immediately follows) a head element. <br /> </div><hr /><h2><a class="name" href="" name="hack5">CSS Hack 5 : hiding CSS from IE4/5/6 and OP6</a></h2>Example code - to hide a horizontal rule width setting of 100% from IE4/5/6 and OP6:<br /> <code><b> html&gt;head:first-child+body hr { width : 100%; }<br /> </b></code> <br /> <div class="align-j">By combining hack 3 and hack 4, CSS can be hidden both from versions of Microsoft Internet Explorer up to and including version 6, and from versions of Opera up to and including version 6. <br /> </div><hr /><h2><a class="name" href="" name="hack6">CSS Font-Size Hack : setting equivalent font-size keywords for NN4/6/7, FF1, IE4/5/6 and OP6/7</a></h2><i>Example code - to set a paragraph font size equivalent to HTML size=2 in all browsers:</i><br /> <div class="align-j"><b>EXAMPLE 1</b>: this example assumes either that no DTD be applied or that the DTD applied is:<br /> <br /> </div><code><b> p<br /> {<br /> font-size : small;<br /> }<br /> <br /> /*/*/a{}<br /> <br /> body p<br /> {<br /> font-size : x-small;<br /> }<br /> <br /> html&gt;head:first-child+body p<br /> {<br /> font-size : small;<br /> }<br /> <br /> /* */<br /> </b></code> <br /> <div class="align-j">The paragraph font-size is set four times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1. It is then reset to x-small for IE4/5/6 and OP6, using the more-specific body p descendant selector method. It is then reset to small again, this time for NN6/7, FF1 and OP7, using hack 5, which contains even more specific methods. <br /> </div><div class="align-j"><b>EXAMPLE 2</b>: in which the DTD applied is that used by phespirit.info:<br /> <br /> </div><code><b> p<br /> {<br /> font-size : small;<br /> }<br /> <br /> /*/*/a{}<br /> <br /> body p<br /> {<br /> font-size : x-small;<br /> voice-family : "\"}\"";<br /> voice-family : inherit;<br /> font-size : small;<br /> }<br /> <br /> html&gt;body p<br /> {<br /> font-size : x-small;<br /> }<br /> <br /> html&gt;head:first-child+body p<br /> {<br /> font-size : small;<br /> }<br /> <br /> /* */<br /> </b></code> <br /> <div class="align-j">The paragraph font-size is set three times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1. It is then reset to x-small for IE4/5 and back to small for IE6, using the more-specific body p descendant selector method. It is then set to x-small once more for OP6, and finally back to small for NN6/7, FF1 and OP7, using hack 5, which contains even more specific methods. <br /> </div>Example table - equivalences for CSS keyword font-size in various Microsoft Windows browsers:<br /> <div class="table"><table border="0" cellpadding="0" cellspacing="0"><thead> <tr> <th height="20" width="40%"><b>Browser</b><br /> </th> <th class="align-c" width="20%"><b>HTML size 1</b><br /> </th> <th class="align-c" width="20%"><b>HTML size 2</b><br /> </th> <th class="align-c" width="20%"><b>HTML size 4</b><br /> </th> </tr> </thead> <tbody> <tr> <td>Netscape 4.78 see note (i) below<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">small;<br /> </td> <td class="align-c">medium; bold;<br /> </td> </tr> <tr> <td>Netscape 6.20<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">small;<br /> </td> <td class="align-c">large;<br /> </td> </tr> <tr> <td>Netscape 7.00<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">small;<br /> </td> <td class="align-c">large;<br /> </td> </tr> <tr> <td>Mozilla Firefox 1.00<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">small;<br /> </td> <td class="align-c">large;<br /> </td> </tr> <tr> <td>Microsoft Internet Explorer 5.50<br /> </td> <td class="align-c">xx-small;<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">medium;<br /> </td> </tr> <tr> <td>Microsoft Internet Explorer 6.00 (case 1)<br /> </td> <td class="align-c">xx-small;<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">medium;<br /> </td> </tr> <tr> <td>Microsoft Internet Explorer 6.00 (case 2)<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">small;<br /> </td> <td class="align-c">large;<br /> </td> </tr> <tr> <td>Opera 6.04<br /> </td> <td class="align-c">xx-small;<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">medium;<br /> </td> </tr> <tr> <td>Opera 7.54<br /> </td> <td class="align-c">x-small;<br /> </td> <td class="align-c">small;<br /> </td> <td class="align-c">large;<br /> </td> </tr> </tbody> </table></div><b>Notes:</b><br /> <ol class="tiny" type="i"><li><br /> <div class="align-jtiny">There is no exact keyword equivalent to HTML size 4 for Netscape 4.78; phespirit.css uses keyword medium together with font-weight bold in preference to keyword large with font-weight normal. <br /> </div><br /> </li> <li><br /> <div class="align-jtiny">Microsoft Internet Explorer 6.00 (case 1) assumes either that no DTD has been applied or, as in the case of phespirit.css, that the DTD used is: <br /> </div><br /> </li> <li><br /> <div class="align-jtiny">Microsoft Internet Explorer 6.00 (case 2) assumes that any other DTD has been applied. <br /> </div><br /> </li> </ol><hr /></td> <td width="1%"></td> </tr> </tbody></table>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com2tag:blogger.com,1999:blog-22716610.post-29250584886822635962007-01-08T17:48:00.002+04:002009-10-20T21:34:33.308+05:00Real Dotted-line &lt;hr&gt; / Точечный &lt;hr&gt;<code>hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }</code><br /> <br /> <code>Очень просто сделать, но сложно найти как )) <br /> </code>Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-1161591952582062352006-10-23T13:24:00.000+05:002006-10-23T13:21:11.247+05:00Профессиональная верстка css xhtml работаю удаленно.Свежие работы:<br /><a tooltip="(откроется в новом окне)" href="http://www.clipso-russia.ru/" target="_blank">http://www.clipso-russia.ru/</a><br /><a tooltip="(откроется в новом окне)" href="http://www.aviasalon.com/" target="_blank">http://www.aviasalon.com/</a><br /><a tooltip="(откроется в новом окне)" href="http://www.magicprint.ru/" target="_blank">http://www.magicprint.ru/</a><br /><a tooltip="(откроется в новом окне)" href="http://www.patron-moto.ru/" target="_blank">http://www.patron-moto.ru/</a><br /><br />Пишите: vsovin(at)gmail.com<br />Звоните: 89226922679<br /><br />П.С. Сотрудничаю с дизайнерами, программистами, CEO.<br />Есть отличная комманда - выполним все виды работ в области веб строительства.Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-61046631600006855792005-10-31T12:55:00.000+04:002006-10-31T13:13:32.874+04:00Резюме<b>Кроссбраузерная верстка макетов XHTML Strict 1.0\1.1 + CSS 2.0 любой сложности. Строгое соответствие стандартам W3C, полная валидность (за исключением случаев с использованием хаков). </b><br /><br />Меня зовут Виталий Совин.<br />Моя специализация - проектирование интерфейсов, юзабилити консультации, верстка сайтов, дизайн.<br />Сделано большое число сайтов. Ниже ссылки на мои работы с сегодняшнего дня и в глубь.<br />Первый сайт был сделан в 1998 году.<br /><br /><b>Кроссбраузерная верстка:<br /></b>(нарезка psd, верстка , оптимизация под браузеры)<br />http://www.driedflowers.ru/<br />http://detoks.com/<br />http://www.parislove.ru/<br />http://www.transnerud.ru/<br />http://moreflowers.ru/<br />http://glanz-r.ru/<br />http://www.udmurtlift.ru/<br /><br />http://asso-stroy.ru/ - сайт крупного холдинга. (проектирование, верстка)<br />http://holster-ltd.ru/ - сайт, интернет магазин (проектирование, верстка)<br />http://pk-holder.ru/ - сайт, каталог продукции (проектирование, верстка)<br /><br /><span style="font-weight: bold;">Табличная вестка:<br /></span>http://www.naidy.com/ - (проектирование, верстка)<br />http://www.uralfactories.ru/ - (проектирование, верстка)<br /><br /><span style="font-weight: bold;">Список работ для дизайн студии "ЯРКО!":</span><br />http://www.yarkodesign.ru/about/personal/sovin.html<br /><br /><span style="font-weight: bold;">Долгое время работал на крупнейшего регионального провайдера МАРК-ИТТ с </span><span style="font-weight: bold;">1998 года. некоторые работы:<br /><br /></span>http://home.mark-itt.ru/ портал - проектирование, дизайн, верстка.<br />http://www.banners.mark-itt.ru/ баннеро обменная система - проектирование, дизайн, верстка.<br />http://izhevsk.net/ каталог - проетирование, дизайн, верстка<br />http://udm.ru/ почтовая система - проектирование, дизайн, версткаSovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com1tag:blogger.com,1999:blog-22716610.post-82253707302491134882005-10-24T17:13:00.001+05:002009-10-20T21:29:17.238+05:00Адаптивная разметка<a href="http://alistapart.com/authors/v/marcvandendobbelsteen">Marc van den Dobbelsteen</a>, 13 апреля 2007<br /> <br /> Создание резиновых разметок с помощью CSS хорошо зарекомендовало себя при ширине экрана от 800 до 1024 пикселей, но поскольку все более широкий круг устройств используется для доступа к веб, нам нужно более мощное и гибкое средство подстройки разметки под пользователя. Если мы хотим, чтобы сайт отображался с помощью устройств с экраном от 240 до 1680 пикселей и разрешением от 72 до 150 пикселей на дюйм – нам нужен действительно новый метод.<br /> <br /> <a href="" id="more-95"></a><br /> <h2>Что не так с резиновой разметкой?</h2><br /> <br /> Если вы делаете резиновую разметку, и ограничиваете максимальную ширину значением 1024 пикселя, то на широкоформатных экранах она будет казаться узкой полоской, а на маленьких дисплеях PDA контент будет сжат в плотный сандвич. Если бы браузеры поддерживали векторные разметки, мы могли бы использовать одну разметку для всех размеров экрана, но это очень похоже на фантастику.<br /> <br /> Тогда почему бы нам не сделать разные разметки для нескольких диапазонов размера экрана, а потом автоматически выбирать наиболее подходящую. <br /> <br /> <h2>Адаптивная разметка решит наши проблемы</h2><br /> Адаптивная разметка позволяет нам задать детализацию информации и оформление для нескольких диапазонов размера экрана. Например, новостной сайт может иметь различную разметку для широких экранов, средних и PDA. Изображения могут сжиматься или вообще, а количество колонок изменяться в зависимости от ширины экрана, в результате вы можете более эффективно использовать пространство на дисплеях разных размеров.<br /> <br /> Вот <a href="http://designformasters.info/stuff/adaptive-layout/transition_layout_news.html">пример</a><sup class="printOnly">1</sup> страницы новостей, использующей адаптивную разметку. В целях демонстрации мы определили семь диапазонов размера экрана и для каждого диапазона сделали разметку, позволяющую наиболее эффективно использовать доступное место.<br /> <br /> Оформление страницы изменяется, начиная от варианта для очень больших экранов, включающего все элементы контента, по мере уменьшения размера убирается наименее необходимые элементы. Вот какие диапазоны размера экрана мы использовали для этого примера.<br /> <br /> <table border="1" cellpadding="2" cellspacing="0" summary="оформление сайта для семи диапазонов размера экрана"><caption>Диапазоны размера экрана</caption> <thead> <tr> <th class="first" scope="col">Устройство<br /> </th> <th scope="col">Размер экрана <br /> </th> <th scope="col">Разметка<br /> </th> </tr> </thead> <tbody> <tr> <td class="first">PDA Вертикальный экран <br /> </td> <td>&lt; 240 px<br /> </td> <td class="last"><img alt="Разметка для PDA" height="158" src="http://designformasters.info/stuff/adaptive-layout/pdaver.gif" width="88" /><br /> </td> </tr> <tr> <td class="first">PDA Горизонтальный экран <br /> </td> <td>240-320 px<br /> </td> <td class="last"><img alt="Разметка для более крупных PDA" height="167" src="http://designformasters.info/stuff/adaptive-layout/pdahor.gif" width="75" /><br /> </td> </tr> <tr> <td class="first">Set top / Телевизор<br /> </td> <td>320-640 px<br /> </td> <td class="last"><img alt="Разметка для малых экранов" height="193" src="http://designformasters.info/stuff/adaptive-layout/settop.gif" width="100" /><br /> </td> </tr> <tr> <td class="first">Старые CRT мониторы <br /> </td> <td>640-800 px<br /> </td> <td class="last"><img alt="Разметка для средних экранов" height="241" src="http://designformasters.info/stuff/adaptive-layout/oldcrt.gif" width="200" /><br /> </td> </tr> <tr> <td class="first">Распространенные TFT мониторы<br /> </td> <td>800 – 1024 px<br /> </td> <td class="last"><img alt="Разметка для больших экранов" height="200" src="http://designformasters.info/stuff/adaptive-layout/commontft.gif" width="200" /><br /> </td> </tr> <tr> <td class="first">Широкоэкранные мониторы<br /> </td> <td>1024 – 1280 px<br /> </td> <td class="last"><img alt="Разметка для широкоэкранных мониторов" height="178" src="http://designformasters.info/stuff/adaptive-layout/wide.gif" width="200" /><br /> </td> </tr> <tr> <td class="first">Супер-широкоэкранные мониторы <br /> </td> <td>&gt; 1280 px<br /> </td> <td class="last"><img alt="Разметка для супер-широкоэкранных мониторов" height="125" src="http://designformasters.info/stuff/adaptive-layout/extrawide.gif" width="200" /><br /> </td> </tr> </tbody> </table><br /> <h2>Замена классов</h2><br /> Когда определены несколько типов разметки для различных размеров экрана, нужно определить какой экран у пользователя и применить соответствующие стили. Мы будем использовать метод смены стилей основанный на классе элемента body.<br /> <br /> <h2>JavaScript наш помощник</h2><br /> <br /> Чтобы определить размер экрана, мы используем небольшой скрипт, который выполняется при событии onresize. В зависимости от полученного результата будет выбираться соответствующий класс и с помощью DOM добавляться к элементу body. В случае если JavaScript отключен мы получаем обычную резиновую разметку.<br /> <br /> Обратите внимание, что различные браузеры используют различные модели событий, например в IE6 событие onresize возникает постоянно при изменении размеров окна браузера, а в FF только когда изменение размеров окна закончено.<br /> <br /> <h2>Прогрессивное сжатие контента</h2><br /> Во <a href="http://designformasters.info/stuff/adaptive-layout/transition_layout_tab.html">втором примере</a><sup class="printOnly">2</sup> вы можете увидеть, как адаптивная разметка помогает, более эффективно использовать пространство экрана для различных устройств. В основе этой разметки лежит простой список определений из четырех элементов. На широких экранах четыре колонки располагаются в ряд, по мере уменьшения доступного места, колонок становиться две, при дальнейшем уменьшении размера экрана, колонки складываются в список с закладками сначала горизонтальными, потом вертикальными, а в окончательном варианте они расположены в одну колонку с уменьшенным размером шрифта.<br /> <br /> <h2>Что дальше</h2><br /> В примерах мы использовали размер экрана как фактор, определяющий вид нашей разметки, вы можете использовать и другие факторы, например высоту экрана, скролов, размер шрифта, позицию мыши, глубину цвета и в соответствии с ними изменять оформление вашей страницы.<br /> <br /> <h2>Вывод</h2><br /> <br /> Растущее количество популярных размеров экрана и разрешений вынуждает дизайнеров представлять содержание страницы в соответствии с возможностями широкого круга устройств, адаптивная разметка решение, которое может сильно помочь им в этом непростом деле.<br /> <br /> <h2>Альтернативные методы</h2><br /> Техника, которая была представлена, разработана независимо, но существует множество похожих техник, например Ричард Руттер собрал серию <a href="http://clagnut.com/blog/1663/">похожих техник</a><sup class="printOnly">3</sup> на <a href="http://clagnut.com/">Clagnut</a><sup class="printOnly">4</sup>, а Кевин Хол представил технику, которая дает похожий результат, при немного другом подходе на <a href="http://particletree.com/features/dynamic-resolution-dependent-layouts/">Particletree</a><sup class="printOnly">5</sup>. Энди Кларк и Джеймс Эдвардс были пионерами в этой области и их статья <a href="http://designformasters.info/posts/body-switcher/">Переключатель стилей</a><sup class="printOnly">6</sup> способствовала популяризации использования классов элемента body для изменения разметки.Sovihttp://www.blogger.com/profile/03422666784211598408noreply@blogger.com4