Блог веб-разработчика

PNG в IE5.5-6

Озеров Виктор — Sun, 12 Jul 2009 08:48:00 +0000

Как заставить PNG корректно работать в Internet Explorer 5.5 - 6

Для того чтобы отображались ссылки над png картинкой для всех вложенных слоев и для самой ссылки должно быть установленн position (например relative) а у слоя с png position не должен быть указан вообще.
виды sizingMethod:scale(Растягивает png по размерам слоя), image(подстраивает размеры слоя под png), crop(Обрезает png по размерам слоя, должны быть указаны размеры);
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

HTML:

CSS:

#png_bg{ width:100px;background:url(/bg.png) top left repeat-y;}
* html #png_bg {
   background-image:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/bg.png', sizingMethod='scale');
}
#a, #b, #b a {position:relative;}

CSS для Opera (CSS hack for Opera)

Озеров Виктор — Wed, 08 Apr 2009 21:41:57 +0000

Собственно код:

/* Opera (all versions)… */
@media all and (min-width: 0px) {
#element { color: red; }
}

/* Opera 6 */
@media all and (min-width: 1px) { {} #element { color: red; } }

/* Opera 7, 8 */
@media all and (min-width: 1px) { #element { color: red; } }

/* Opera 9 */
@media all and (width) { #element { color: red; } }

/* Opera 9 */
@media all and (min-width:0px) {
head~body #element { color: red; }
}

Небольшое дополнение: это написание очень хорошо понимает браузер Safari (проверял с версией 3.1 под Windows).

Альтернативный вариант решения проблемы:

Здесь ключевым моментом следует отметить атрибут type opera/css.

DIV поверх FLASH

Озеров Виктор — Sat, 14 Mar 2009 08:43:24 +0000

Атрибут wmode дает возможность разместить html-блок (div, javascript-меню и т.д.) над flash-объектом, И ЭТО РАБОТАЕТ ВЕЗДЕ, достаточно только использовать значение opaque параметра "wmode":


    
        
        
    


    Я ДивНомерДва, хочу закрыть собой ваш флєщъ

Источник: http://flash-ripper.com/archives/001231.php

WP Plugins

Озеров Виктор — Tue, 03 Mar 2009 15:23:16 +0000

Защита от спама

SI CAPTCHA for Wordpress

Код

SyntaxHighlighter Plus

Размеры макетов для сайта

Озеров Виктор — Tue, 24 Feb 2009 12:35:31 +0000

Среднее максимальное пространство занимаемое элементами управления на экранах мониторов в разных операционных системах и разных браузерах:

По горизонтали — 50 px
По вертикали — 260 px

Необходимо верстать макет шириной равной ширине экрана минус 50 px.

800×600 — 750
1024×768 — 974
1280×800 — 1230
1280×1024 — 1230
1600×1200 — 1550

Материалы:

http://www.designerstoolbox.com/designresources/safearea/
http://www.yenisite.ru/articles/Verstka_bez_gorizontalnogo_skrollinga.html
http://yenisite.habrahabr.ru/blog/48646/

Как писать хорошие тексты для сайта

Озеров Виктор — Fri, 06 Feb 2009 23:07:09 +0000

Информативное содержание сайта (его контент) — одна из самых важных составляющих сайта. Конечно, дизайн играет не последнюю роль, однако, придя на сайт, человек будет искать необходимую ему информацию о товаре или услуге. От того, насколько легко ее будет ему найти, и насколько легко она читается и воспринимается, в большинстве случаев зависит — закажет ли он товар или нет, свяжется ли с продавцом. Пользователи в сети хотят немедленно понять, соответствует ли эта страница тому, что они искали.

Неверно составленные веб–тексты почти никто не читает. Соответственно, целевая аудитория не получает той информации, которую планировалось донести до нее посредством сайта. Для того чтобы ваш текст был прочитан большинством посетителей сайта, необходимо чтобы его основные мысли легко и правильно воспринимались даже при самом беглом чтении.

Хорошо написанный и оформленный текст воспринимается легко и правильно даже при самом беглом чтении, а плохо оформленный текст читать не захотят.

Хорошо структурируйте текст

Не используйте дополнительных шрифтов и цветов при оформлении текста, так как они мешают его чтению.
Не делайте слишком длинных абзацев.
Для выделения основных мыслей используйте жирное или курсивное начертание.
Используйте нумерованные и не нумерованные списки.
Используйте таблицы только в случае крайней необходимости, если информация является табличной и никак по другому невозможно ее представить.
Основную смысловую информацию пишите в заголовках, первом и последнем абзаце, а также в первых предложениях абзацев. Размещайте самую важную информацию в начале текста, а вспомогательную и второстепенную ниже.
Придерживайтесь единого стиля выравнивания блоков текста и отступов между ними на всех страницах сайта.
Вычеркните все лишнее, независимо от того, какими бы умными ни были эти рассуждения, если они не имеют отношения к вашей теме. В тексте должно быть как можно меньше воды. Оптимальная длина статьи - от 2000 до 3000 знаков без пробелов. При таком объеме текста можно изложить любую мысль достаточно подробно, и в то же время такой размер статьи не будет утомлять читателей. Ведь известно, что пользователи в интернете в большинстве случаев не читают длинные тексты. Вместо этого они предпочитают бегло читать небольшие по размеру тексты.

Эффективное оформление текста

Стиль. Правильно выбранный стиль - это возможность говорить с аудиторией на ее языке. Кроме того, существуют стилевые особенности общие для большинства веб-текстов: межстилевая (общеупотребимая) лексика, краткость синтаксических конструкций, лаконичность изложения и т.д.

Ключевые слова. Включение в текст от 3 до 5 % заранее отобранных ключевых слов и словосочетаний способно обеспечить сайту высокие места в результатах поиска. Задача копирайтера — распределить ключевые слова по тексту так, чтобы повествование выглядело естественно.

Главное в начале текста

Тексты, которые пишутся для Web, отличаются от тех, которые пишутся для печатных изданий.

Вычеркните все лишнее, независимо от того, какими бы умными ни были эти рассуждения, если они не имеют отношения к вашей теме. В тексте должно быть как можно меньше воды.

Выражайте свои мысли доступно

Контент веб-сайта должен быть легко читаем посетителями сайта. Избегайте технической терминологии, за исключением случаев, когда вы делаете это с определенной целью и даете четкие формулировки размещенные на последующих страницах сайта. Всегда проверяйте правописание.

Четко структурируйте текст

В тексте не должно быть не слишком коротких не слишком длинных абзацев. Всегда разбивайте большой текст на смысловые блоки, состоящие из двух – трех абзацев. Дайте емкое и краткое названия каждому смысловому блоку, так пользователю будет проще ориентироваться в вашем тексте.

Используйте чередование абзацев, маленьких и больших. Объединяйте слишком короткие абзацы вместе по смыслу.

Осмысленное использование графики в тексте

Используйте графику только если она действительно необходима в тексте и может уточнить и подчеркнуть смысл текста.

Не стоит размещать изображения большего размера в тексте. Часто долгая загрузка раздражает пользователя и он уходит с такого сайта. Если нужно разместить изображение большого размера разместите в тексте его уменьшенную копию с возможностью увеличения.

Как писать тексты для интернет

Озеров Виктор — Fri, 06 Feb 2009 20:55:16 +0000

Люди избегают чтения больших объемов текста в электронном виде. Чтобы заинтересовать читателя старайтесь придерживаться приведенных рекомендаций.

Текст для интернет-ресурса отличается от статьи в журнале. Чтение с экрана монитора происходит медленнее, чем чтение печатных изданий.

Краткость — сестра таланта

Старайтесь лаконично излагать свои мысли в электронном виде. Среднестатистический пользователь глобальной сети не станет тратить время и ресурс своих глаз на изучение полета мыслей автора. Не стоит также забывать про элементарную лень, ведь известен факт, что некоторые пользователи не любят прибегать к прокрутке, что является еще одной причиной сокращения объема страниц для удобства восприятия информации. Оптимальным вариантом будет изложение не более 50% текста, который может быть использован для передачи того же материала в печатном издании.

Выделение основных мыслей

Как известно, при просмотре текстов на сайте мы не пробегаем текст глазами как в печатных изданиях, а выхватываем отдельные, выделенные фрагменты, останавливая свое внимание лишь на тех ключевых словах, фразах и абзацах, которые представляют интерес, и опуская те части повествования, которые нас не интересуют.
Учитывая трудоёмкость чтения с монитора, а также нетерпеливость определенной категории интернет-читателей, следует прибегать к простым, но эффективным хитростям

Разбивайте статьи на отдельные части с использованием заголовков двух или даже трех различных уровней
Составьте максимально подходящие по смыслу заголовки, отражающие содержание текущей страницы или раздела. Посетитель должен четко представлять себе, о чем идет речь без необходимости чтения основного текста. Выделение основных мыслей, правильное формулирование предложений — первостепенная задача при написании текста для веба
Используйте небольшие абзацы, маркированные списки, акцентируйте внимание посетителя на основных моментах текста подчеркиванием или цветом

Разбиение на несколько страниц

Распределение информации между несколькими веб-страницами, связанными друг с другом посредством гиперссылок, может способствовать сокращению текста без ущерба глубине рассмотрения вопроса. Каждая отдельно взятая страница может быть достаточно лаконичной, и, в то же время, все гиперпространство в совокупности может содержать значительно больший объем информации. Длинные и подробные описания могут быть перенесены на вторичные страницы, доступные посредством гиперссылок. Доступ к информации, представляющий интерес для ограниченного круга посетителей, также может быть обеспечен посредством гиперссылок, не затрагивая тех из посетителей, которые не испытывают потребности в этой информации.

Итак, краткий вывод «первоочередной задачей при написании статьи для веба становится лаконичность, кроме этого текст должен быть удобен для беглого ознакомления. Информацию значительного объема следует разбивать на несколько страниц, связанных между собой гиперссылками».

При написании контента для коммерческого веба, также могут пригодиться 10 правил Джерри МакГоверна, автора книги Content Critical

Проанализируйте аудиторию, для которой вы пишете. Пишите узконаправленно, для определенной целевой группы
Используйте активный подход. Текст на сайте должен побуждать к действию
Заголовки должны содержать 8 и менее слов, предложения — 15–20 слов, параграфы — 40–70 слов, каждый материал — 500 слов и меньше
Подбирайте слова, которые побуждают читателя к действию, к решению проблемы, которая привела его на сайт
Структура страницы должна быть логичной и последовательной, содержать гиперссылки на классифицированные разделы
Заранее подготовьте ключевые слова
Составьте «правильные заголовки». Желательно, чтобы заголовок содержал ключевые слова. Старайтесь избегать предлогов и союзов, а также не включайте более 8 слов в заголовке
Старайтесь писать кратко, ваши тексты должны побуждать посетителя продолжать знакомство с содержанием сайта
Следует четко подразделять страницы сайта. Каждая из них должна быть уникальна, иметь свое название, точно соответствующее ее содержанию
Редактировать, редактировать, и еще раз редактировать! Обычно редакция занимает 30–40% от общего времени написания статьи. Обратите внимание на тон и стиль написания

Ну и, разумеется, не стоит забывать об орфографии. Так что прежде чем публиковать статью, она должна быть, как минимум, обработана программой проверки орфографии.

Избранные параграфы «Ководства»

Озеров Виктор — Fri, 06 Feb 2009 16:20:47 +0000

Избранные параграфы которые помогут вам понять что такое качественный копирайтинг.

§ 62. Экранная типографика

Все тексты должны обязательно обогащаться. Ни один текст не должен появиться на публике в исходном сыром виде.

Знаки в тексте
Кавычки
Тире
Перенос слов
Привязки
Типограф

§ 79. Делать фонт болдом или италиком?

Позволительные типографские способы выделить смысловую часть в тексте: жирное начертание, полужирное начертание и курсив.
Непозволительные: разбивка, подчеркивание и выделение цветом.

Непозволительны три способа (разбивка, подчеркивание и выделение цветом) выделить смысловую часть только в основном наборе текста. В качестве акциденции (т. е. в качестве специального художественного оформления, для заголовков, на плакатах и пр.) они сгодятся. Но в книге (по глубочайшему убеждению автора) использовать разрядку или подчеркивание категорически запрещено — этот прием появился от беспомощности во времена пишущих машинок — надо же было хоть как-то выделять слова.

§ 83. Секреты хорошего гипертекста

Если каждое второе слово подчеркнуто, читатель перестает воспринимать текст. Законы восприятия и удержания внимания в интернете никто не отменял. Поэтому чем меньше в тексте будет ссылок, тем лучше. Идеальный вариант - выносить ссылки в конец материала. Читатель уже изучил содержание, и ему надо куда-то двигаться дальше.

§ 91. Краткая история телефонных номеров

Известно, что первые слова, сказанные по телефону 10 марта 1876 года, принадлежат шотландскому изобретателю Александру Грэму Беллу: Mr. Watson - Come here - I want to see you («Мистер Ватсон, зайдите, я хочу вас видеть»). Чтобы позвонить в соседнюю комнату своему помощнику, Беллу не пришлось набирать номер - в мире на тот момент было только два телефонных аппарата.

§ 97. Тире, минус и дефис, или Черты русской типографики

Дефис, минус и тире отличаются друг от друга, в первую очередь, областью применения, а во вторую — длиной.

§ 104. Кавычки

Кавычки являются парными знаками препинания.

§ 112. Амперсанд

Амперсанд — это название знака &. Про него надо знать три вещи: откуда он взялся, почему так называется и нужен ли нам для чего-нибудь.

§ 119. Буква ё

Ё — недобуква. Это буква е с диэрезисом (умляутом, тремой, двумя точками сверху). Использование ё везде — насилие над читателем.

§ 135. Неформальная типографика

Типографические приемы можно условно разделить на формальные и неформальные. Первые применяются в серьезных газетах, журналах и книгах. Вторые - в различных средствах персональной коммуникации и в сети. Употребление неформальных приемов на традиционных носителях может значительно разнообразить жизнь.

§ 136. Теория близости

Объекты, расположенные близко друг к другу, воспринимаются связанно. Этот простой принцип лежит в основе всякого осмысленного дизайна. Без понимания этого принципа работают тысячи дизайнеров во всем мире, из-за чего получаются довольно прочные фундаменты, на которых стоят бессмысленные сооружения.

§ 141. Короче

Сообщение всегда должно учитывать условия его получения.

Глюк IE6: Не правильное отображение тега EM

Озеров Виктор — Tue, 03 Feb 2009 17:06:00 +0000

Лечение для блока который неправильно отображается в следствии этого глюка: overflow: visible;

Информация

History of the Internet

Озеров Виктор — Wed, 28 Jan 2009 22:41:33 +0000