Использование относительных значений шрифтов

В работе над версткой сайта мы используем только относительные размеры шрифтов. Если сделать размер шрифта абсолютным, тогда браузер не сможет масштабировать текст, грубо говоря, пользователь не сможет менять размер шрифта. Это может быть полезно для людей с ограниченными возможностями и тем, кто просто любит, чтобы буквы были побольше.
К относительным величинам относятся — em (вычисляемая единица), % (процент) и pt (пункты). pt применяется с оговоркой, что это значение для типографии, я рекомендую указывать его только для тех элементов, которые планируется выводить на печать.
Если вы используете em, вам нужно считать размера шрифта браузера, начиная с 16px, т.е. по умолчанию 1em=16px. Обычно базовый размер шрифта сбрасывают до 10px, через css, вот таким образом:

body { font-size: 62.5%; }

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

Пункты Пиксели EMs Проценты
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

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

www.love-in-city.ru — Верстка, движок, программирование.

Аксессуары для свадьбы

Верстка и движок.
Верстка сайта выполнена в соответствии со стандартами W3C, благодаря чему, сайт одинаково хорошо выглядит в любом браузере, причем, даже в старых версиях. Почти все элементы страницы взаимодействуют с фоном и потому состоят из PNG файлов. Специально для IE6, применен хитрый PNG фикс, позволяющий увидеть все преимущества альфа канала в PNG файлах, при этом не сильно утяжеляя страницу.
Основная часть верстки выполнена слоями, а контентная часть таблицами. Это сделано для того, чтобы было проще обновлять сайт. Например, при таком подходе, можно поменять на странице все что угодно и это может сделать любой человек, даже без специальных компьютерных знаний. В этом помогает наш движок.

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

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

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

Отзывы

В целом, работа получилась интересной и объемной. Благодарю Антона Князькина за интересную задачу и плодотворное сотрудничество.

Новый знак рубля

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

1. Скачайте и установите на ваш сайт специальный шрифт ruble.eot.

2. Для начала, прописываем CSS стили:
@font-face { font-family: "Rubl Sign"; src: url(http://www.sajt.ru/ruble.eot); }
span.cost { font-family: "Rubl Sign"; }
span.cost span.rur { text-transform: uppercase; // text-transform: none;}
span.cost span.rur span.eot { display: none; // display: inline;}
span.cost span.rur span.ttf, span.cost span.end { // display: none; }
span.cost span.end { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; }
span.cost span.end:before { content: '2013'; }

В первой строке, необходимо указать адрес, по которому у вас лежит шрифт.

3. Теперь прописываем код в тело HTML страницы:
<p style="font-size:1em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>
<p style="font-size:1.2em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>
<p style="font-size:1.5em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>
<p style="font-size:2em">Французские булки по 100 <span class="cost"><span class="rur"><span class="eot">A</span><span class="ttf">р</span></span><span class="end">уб.</span></span></p>

Можно играть со значениями, как угодно.

Результат:

Соответсвие символов (только для Internet Explorer):

Этот способ гарантирует правильное отображение во всех браузерах и в любых условиях.

Создание блога о Nintendo Wii. Часть 2

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

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

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

Редактирование записи

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

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

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

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

Подписка на комментарии

Установили и настроили RSS ленту, для слежения за новыми записями. Можно подписаться напрямую, через сервис Feedburner, Google или Яндекс-Лента. Если вы не любитель RSS, можете подписаться на рассылку новых записей по email, просто впишите свой email и вам будут приходить уведомления.

Подписка

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

blogwii в twitter

Создание блога о Nintendo Wii. Часть 1

www.blogwii.ru — Создание сайта, верстка, поддержка.

Блог о Nintendo Wii и играх

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

Блог о Nintendo Wii — это авторский проект, который ведет один человек. Мы постарались максимально упростить ему работу по обновлению, как самого блога, так и внутренних модулей. Внедрили все самые новейшие технологии и сервисы.

Дизайн и верстка.
Дизайн выполнен в светлых тонах с минимумом элементов, это упрощает восприятие и поиск нужной информации, а еще гармонирует с современным дизайном консоли Wii, который так же выполнен в светлых тонах.

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

Кнопки навигации и поиск

Верстка блочная, резиновая, что очень не типично для блогов. Основная, контентовая часть, состоит из трех блоков. Левая часть тянется, правая всегда остается на месте. Мы постарались подобрать такое сочетание размера шрифта, интрельяжа и межстрочных интервалов, которое способствовало максимально простому восприятию информации. Проще говоря, читать текст просто и он легко усваивается.
Мы постарались учесть все возможные разрешения экрана, в том числе, для широкоформатных мониторов. Протестировали верстку во всех современных браузерах, а так же на соответствие стандартам W3C. Была оптимизирована графика и код страницы.

Функционал.
Последние записи, сортируются по месяцам, годам, рубрикам и тегам. Количество выводимых записей, тип сортировки и еще около 20 параметров, регулируются из админки.
Последние комментарии выводятся особым образом, сначала пишется ссылка на комментарий, в виде имени прокомментировавшего, потом часть самого комментария. Количество выводимых слов комментария, регулируется через админку.

Вывод последних комментариев

Установлены опросы, можно делать бесконечное число опросов, архив сохраняется и доступен в любой момент.

Опрос

Комментарии выводятся единым списком, с возможностью ответить на любой комментарий. Уровень вложенности больше 5.

Комментарии

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

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

Читать вторую часть рассказа о создании блога blogwii.ru

Отступ в Internet Explorer, под тегом <hr />

В браузере Internet Explorer, CSS-свойство margin для тега <hr />, отличается от других браузеров. По умолчанию, IE делает отступ на 7 пикселей больше, чем остальные браузеры. Для примера, возьмем следующий код:

<div>
<hr />
Расстояние между текстом и линией 3px
</div>

CSS для нашего кода:

hr {
margin: 3px 0;
height: 1px;
border: none;
background: #cf610f;
color: #cf610f; /* цвет линии в IE */
}

В браузерах Opera, FireFox, Safari и Chrome, мы видим, что текст, расположился ровно под линией, с отступом 3 пиксела, как мы и хотели:

В Internet Explorer получился отступ в 3+7 пикселов:

Такая ситуация нас не устраивает, потому мы зададим дополнительное правило в CSS, которое будет работать только для IE:

* html hr {margin: 0; /* для IE6 */}
*+html hr {margin: 0; /* для IE7 */}

Это правило, убирает лишний отступ в 7 пикселов, так же оно работает, если указать отрицательное значение. Надеюсь, этот небольшой, но полезный хак, поможет вам в работе.

Вышел Firefox 3.5

Вышло очередное важное обновление Firefox, на этот раз версии 3.5. Теперь Firefox работает на новом движке Gecko 1.9.1, что делает его работу быстрее и добавляет новые функции. Самое важное, это поддержка HTML5, пока в качестве эксперимента, ведь HTML5 еще не утвержден, как стандарт, но то что его внедрили в Firefox, очень радует.

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

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

Что касается технологий для разработчиков, то здесь все великолепно, добавили возможность загрузки шрифтов (ну наконец-то), медиа-запросы к CSS, текст <canvas>, ICC-профили и SVG-трансформы. Так что для разработчиков есть где развернуться. Релиз отличный, всем очень рекомендую скачать.

Скачать Firefox 3.5
Прямая ссылка на Firefox 3.5

Страницы блога (2):[1]2