Как создать свой сайт. Основы самостоятельного сайтостроения

Премиум. Курс по CSS3. Выпуск 1.

Виктор Рог — Fri, 03 Feb 2012 11:47:40 +0000

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

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

План урока:

1. Свойство border-radius

2. Свойство border-image

3. Свойство box-shadow

4. Свойство background-image и background для задания нескольких фоновых изображений

5. Свойство background-size

6. Свойство background-clip

7. Свойство background-origin

Детали учебника

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 01:33:06

Автор: Андрей Бернацкий

Один из авторов проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — WebForMyself.com Данный проект представляет собой подборку качественных материалов: обучающих статей, книг, курсов, видеоуроков — как зарубежных, так и отечественных специалистов в области сайтостроения. Бернацкий Андрей свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

Итак, приступим!

Продолжить чтение → Продолжить чтение →

Ненавязчивое введение в CSS3.

Виктор Рог — Sun, 29 Jan 2012 16:34:01 +0000

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

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

Почему сейчас возможно пользоваться CSS3

Аргументы за то, почему мы не можем пользоваться CSS3, включают такие вещи, как незавершенную спецификацию, или то, что некоторые элементы CSS3 плохо поддерживаются, либо не поддерживаются вообще. Все это верно, но не причина тому, чтобы не пользоваться CSS3. Если бы эти доводы были вескими, мы до сих пор ожидали бы появления CSS2.1.

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

Не имеет значения, называете ли вы это системами Progressive Enhancement (прогрессивное улучшение), Graceful Degradation (поэтапная деградация) или Hardboiled, пока вы принимаете тот факт, что вебсайту не нужно выглядеть одинаково во всех браузерах. Если принять эту простую истину, то вы увидите, что CSS3 сегодня может применяться без отрицательного влияния на впечатления пользователей, пользующихся более старыми браузерами.

Префиксы, определяемые фирмой-разработчиком

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

Используемые сейчас префиксы:

-moz- : Firefox

-webkit- : Браузеры Webkit, такие как Safari и Chrome

-o- : Opera

-ms- : Internet Explorer

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

Итак, настоящий CSS3

Border Radius (закругленные углы)

Border radius, или, как некоторые называют его, «закругленные углы» (‘Rounded Corners’), возможно, самый широко используемый из всех элемент CSS3, так как он меньше всех влияет на пользователей со старыми браузерами. Спорно утверждение о том, что он самый выигрышный, так как гибкая реализация закругленных углов всегда требует некоторого количества дополнительных div’ов и изображений.

По большей части основные закругленные углы можно написать тремя способами:

border-radius: [ | <%>];
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
border-top-left-radius: [ | <%>];

Как показывает вышеприведенный код, border radius можно написать так, чтобы все углы можно было задать индивидуально или сокращенно. Однако, при использовании префиксов, определенных фирмой-разработчиком, имеется пара проблем:

Webkit

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

Mozilla

Mozilla точно доказал, зачем нам все еще нужны префиксы разработчика при различной реализации объявления в полной форме. Так, при использовании префикса -moz- должны использоваться следующие потребности, хотя и краткая форма работает так, как нужно:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

Примеры

#1 {border-radius:10px;}
#2 {border-radius:50%;}
#3 {border-radius:25px 5px;}
#4 {border-radius:40px 30px 20px 10px;}

Поддержка

IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.0+ [-moz- prefix], Opera 10.5+

Цвета

Наряду с CSS3 идет поддержка rgba (Red, Green, Blue, Alpha – красный, зеленый, синий, альфа) и hsla (Hue, Saturation, Lightness, Alpha- тон, насыщенность, яркость). В обоих «альфа» означает прозрачность цвета, позволяя нам определять непрозрачность индивидуальных свойств данного элемента, такого как фон, рамка и текст. Раньше было возможно применять непрозрачность только к целому элементу или пользоваться вместо того изображениями.

color: rgba([<0-255>],[<0-255>],[<0-255>],[<0-1.0>]);
color: hsla([<0-360>],[<%>],[<%>],[<0-1.0>]);

Оба типа определения цвета можно использовать без альфа-канала, опустив ‘a’ в ‘rgba’ или ‘hsla’ и удалив последнее число свойства. В таком виде rgb шире поддерживается старыми браузерами, но hsl все еще такая же новинка, как и hsla.

Эти свойства цвета также можно безопасно использовать в любом другом свойстве CSS3, требующем цвета, таком как box-shadow и градиенты, но при использовании их в более старых свойствах важно обеспечить альтернативный вариант.

color:rgb(0,0,0); color: rgba(0,0,0,0.5);

Запасной цвет может быть в любом поддерживаемом виде, таком как rgb и hex.

Примеры

#1 {background:rgba(255,255,255,0.3);}
#2 {background:rgba(45,35,200,0.5);}
#3 {background:hsla(225,90%,10%,0.2);}
#4 {background:hsla(125,100%,50%,0.5);}

Поддержка

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.0+, Opera 10.1+

Text-Shadow (тень текста)

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

text-shadow:  [x-coordinate] [y-coordinate] [blur radius];
text-shadow: #000000 10px -5px 3px;

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

Радиус размывания – это назначенный тени размер размывания, не имеющий верхнего предела. Его нижний предел – ноль (0) и так обеспечивается попиксельное сходство с текстом без размывания.

Текстовая тень была изначально предложена в CSS2, а в последнее время занимает видное положение в CSS3, и, хотя она пока не указана в превью как поддерживаемая предшественниками IE9, надеемся, это скоро изменится.

Примеры

#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}
#2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}
#3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;}

Поддержка

Safari 3.2+, Chrome 4+, Firefox 3.0+, Opera 10.1+

Box-Shadow (тень блока)

Тень блока не так уж отличается от тени текста, но применяется ко всему элементу как div’у, а не только тексту в нем.

box -shadow: [x-coordinate] [y-coordinate] [blur radius] ;
box -shadow: 10px -5px 3px #000000;
box -shadow: inset 10px -5px 3px #000000;

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

С box-shadow, кроме того, можно комбинировать множественные тени блоков, как показано в коде внизу:

box -shadow: inset 10px -5px 3px #000000, 10px -5px 3px #000000;

Примеры

#1 {box-shadow:10px 10px 0 #666666;}
#2 {box-shadow:-10px -10px 5px #666666;}
#3 {box-shadow:inset -5px -5px 0 rgba(255,255,255,0.5);}
#4 {box-shadow:5px 5px 5px #666666, inset 5px 5px 5px rgba(255,255,255,0.5);}

Поддержка

IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.5+ [-moz- prefix], Opera 10.5+

Множественные фоны

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

background: url([image]) [position] [repeat], url([image]) [position] [repeat];

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

Примеры

#1 {background:url(lollipop.png) 10px 10px no-repeat, url(stripes.png) left bottom repeat-x, url(diagonal-pattern.jpg), #FFFFFF;}

Поддержка

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6+, Opera 10.5+

Множественные фоны – еще одна часть CSS3, требующая запасного варианта, так как более старые браузеры просмотрят все объявление, а не просто возьмут первое изображение. Поэтому помните о том, что если ваш дизайн требует этого, нужно сначала установить фон как обычно.

Размер фона

Следующая за множественными фонами – возможность установить размер фона:

background-size: [ | <%> | ] [ | <%> | ];
background-size: 100% auto;
background-size: 100% auto, 10px 10px;

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

Поддержка

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6[-moz- prefix], Firefox 4+, Opera 10.5+

Обрезка фона и точка отсчета фона

Говоря простыми словами, это позволяет вам лучше управлять расположением фона.

background-origin: [ |  | ];
background-clip: [ |  | ];

Точка отсчета фона background-origin позволяет управлять стартовой точкой, при помощи которой вы измеряете офсет, применяемый при использовании позиции фона, в то время, как обрезка фона background-clip позволяет расположить фон так, чтобы тот появлялся только внутри данной области. Внизу на изображении это показано более детально:

Border-box: значение по умолчанию, где в любые расчеты включают фон, так что изображение выходит за пределы рамки.

Padding-box: сдвигает границу, так что любое фоновое изображение или цвет не появятся за пределами рамки.

Content-box: смещает все за содержимое, уменьшает как ширину рамки, так и любой отступ, примененный при расчете расположения рамки.

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

Поддержка

IE9+, Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 4+, Opera 10.5+

*не все свойства требуют префикса –webkit, за более полной классификацией обратитесь к Quirksmode.

Рамки-изображения

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

border-image:  [slice] [ |  | ];
border-top-image:  [slice] [ |  | ];
border-corner-image:  [slice] [ |  | ];
border-top-left-image:  [slice] [ |  | ];

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

При создании изображения для рамок вам нужно создать изображение вроде этого:

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

Существуют, кроме того, опции для изменения того, каким образом повторяется рамка-изображение – repeat, stretch или round (повтор, растяжение или округление). Растяжение объяснить легко, так как оно растягивает изображение на краях рамки, повтор действует так, как это ожидается и может привести к появлению половинок изображения на рамке. Округление – действительно полезная опция, она действует таким же образом, как повтор, но масштабирует для того, чтобы половинок изображений не было видно.

Примеры

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

#1  {border-image:url(border.jpg) 15 15 15 15 round;}
#2  {border-width:15px; border-image:url(border.jpg) 15 15 15 15 round;}
#3  {border-width:15px; border-image:url(border.jpg) 15 15 15 15 stretch;}
#4  {border-width:20px; border-image:url(border.jpg) 15 15 15 15 repeat;}

Как видите, определять ширину рамки тоже необходимо.

Поддержка

Safari 3.2+[-webkit- prefix], Chrome 5+[-webkit- prefix], Firefox 3.5+ [-moz- prefix], Opera 10.5+

Множественные колонки

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

column-width: [width];
column-gap: [width];
column-count: [number];
column-rule: [width] [style] ;

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

Масштаб колонок затем устанавливается так, как вы определили бы рамку, но проявится только в зазорах между колонками.

Примеры

#1 {column-count:3; column-gap:3%; column-rule:3px double #999999;}

Поддержка

Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.0+ [-moz- prefix], Opera 11+

Градиенты

Последними идут градиенты, которые в данный момент являются самыми сложным элементом CSS3. Почему? Потому что не существует ни одного префикса, не определенного фирмой-разработчиком, и реализация версий Mozilla и webkit сильно различается:

background-image:-moz-linear-gradient(#CC0000, #1A82F7);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #CC0000), color-stop(1, #1A82F7));

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

Поддержка

Safari 4+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.6+ [-moz- prefix]

И еще…

На горизонтах CSS3 имеется еще многое, включая преобразования, переходы и анимацию, и если хотите, можете все это тоже использовать. По большей части то, что не было затронуто в этой статье, менее широко поддерживается, а в случае с анимацией CSS, то успевает за ней только webkit. В случае с менее поддерживаемыми достижениями следует решить, стоят ли того ваши время и усилия. Должны ли вы проводить часы, реализуя анимацию, если на сайт заходят всего 10 пользователей webkit в месяц? Я сказал бы, что нет, но вы можете думать по-другому.

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

Селекторы

Ниже приведена выборка новых селекторов, доступных благодаря CSS3 и маленькое описание каждого:

X[att^="val"] – Любой элемент X со значением атрибута, начинающимся с ‘val’;

X [att$="val"] – Любой элемент X со значением атрибута, заканчивающимся на ‘val’;

X [att*="val"] – Любой элемент X со значением атрибута с ‘val’, содержащимся где-то внутри значения атрибута;

X:checked – Управление любой проверенной формой X;

X:disabled – Управление любой неработоспособной формой X;

X:enabled – Управление любой активированной формой X;

X:empty – Любой элемент X, пустой или не имеющий дочерних записей;

X:first-of-type – Элемент X, являющийся первым элементом одного уровня своего вида;

X:last-child – Последняя дочерняя запись элемента X своего исходного элемента;

X:last-of-type – Элемент X, являющийся последним элементом одного уровня своего вида;

X:nth-child(n) – Любой элемент X, который является определенной N-ной дочерней записью своего исходного элемента;

X:nth-last-child(n) – Любой элемент X, который является определенной N-ной дочерней записью своего исходного элемента, но отсчитывается от последней дочерней записи;

X:nth-of-type(n) – Любой элемент X, который является определенным N-ным элементом одного уровня своего вида;

X:nth-last-of-type(n) – Любой элемент X, который является определенным N-ным элементом одного уровня своего вида, но отсчитывается от последней дочерней записи;

X:not(s) – Любой элемент X, не равный селектору s;

X:only-child – Элемент X, являющийся единственной дочерней записью своего исходного элемента;

X:only-of-type – Элемент X, являющийся единственной дочерней записью своего исходного элемента и данного вида;

X:selection – Любая часть X, которая выбирается или подсвечивается пользователем;

X:target – Любой элемент X, который является целью ссылающегося URL’а;

X ~ Y – Любой элемент Y, предваряемый элементом одного уровня X.

Media Queries

Media Queries дает нам возможность обеспечить отзывчивый дизайн, основанный на виде устройства, где пользователь смотрит вебсайт. Чтобы полностью отдать должное Media Queries, потребуется целая статью, но для начала вот вам краткий обзор:

Media Queries может быть двух видов, первый – для использования их внутри своего CSS. Следующий пример показывает, как это происходит по отношению к браузеру, находящемуся на экране и имеющему максимальную ширину 800px.

@media screen and (max-width: 800px) {
    body {background: #000000;}
}

Кроме того, можно устанавливать Media Queries в своем html, чтобы можно было сослаться на отдельную таблицу стилей исключительно для данного запроса. В следующем примере запрос нацелен отдельно на iPhone 4.

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

Поддержка

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

@font-face

Это, строго говоря, не совсем CSS3, просто так получилось, что все детали паззла легли по своим местам в то самое время, когда получил развитие CSS3. Font-face дает нам возможность добавлять на свой вебсайт нестандартные шрифты, видимые всеми пользователями, без применения обходных маневров, таких как Cufon и sIFR.

Font-face все еще есть к чему стремиться, пять объявлений шрифта – это слишком много, но необходимо для гарантии полной поддержки.

@font-face {font-family:'ComfortaaBold';
src:url('/fonts/Comfortaa_Bold-webfont.eot');
src:local('☺'),
url('/fonts/Comfortaa_Bold-webfont.woff') format('woff'),
url('/fonts/Comfortaa_Bold-webfont.ttf') format('truetype'),
url('/fonts/Comfortaa_Bold-webfont.svg#webfontPdgofT1X') format('svg');
font-weight:normal;
font-style:normal;}

За исключением пользования платными сервисами вроде Typekit и Fontdeck вышеприведенный код считается лучшим способом установить свои объявления @font-face. 5 объявлений шрифта полностью охватывают каждый браузер, а также шрифты svg для iPhone и iPad.

Для более исчерпывающего описания @font-face, бесплатных шрифтов, фантастического генератора @font-face и способа избежать нестилизованного контента Firefox Flash посетите Font Squirrel.

Поддержка

IE6+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

Самое лучшее из CSS3

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

Достоинства CSS3

Богатые интерфейсы – Имея такое управление своими вебсайтами, есть возможность создавать более роскошные пользовательские интерфейсы. Хотя в прошлом мы могли достигнуть того же эффекта, использовав изображение, мы их не обязательно использовали, CSS3 дает нам больше свободы для реализации подобных вещей.

Реализация – Довольно ясно, что применение закругленных углов border radius занимает при реализации гораздо меньше времени, чем создание четырех изображений углов и div’ов для их расположения. Многое созданное в CSS3 сделано так, чтобы дать нам возможность перевести созданное с использованием изображений в код или сократить код, используемый для реализации более сложных интерфейсов. Так мы получаем возможность строить сайты быстрее и легче.

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

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

CSS3: чего следует остерегаться

При правильном использовании CSS3 не должен делать слишком много ошибок, но остерегайтесь следующего:

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

Неработоспособный CSS – Хотя в W3C есть контрольное устройство CSS3, оно не очень совершенно и многие в данный момент допустимые реализации будут возвращать ошибки. Проверка данных – не святой Грааль, каковой ее многие признают, а то, к чему нужно отнестись с осторожностью. Так что при валидации сайта используйте свой опыт для суждения о том, что является настоящей ошибкой, а что нет.

Безобразные сайты – К счастью, большинство читающих OXP (onextrapixel.com) должны уже хорошо понимать, что делают, и никогда не поддадутся соблазну использовать слишком много CSS3. Но многие только начинают употреблять CSS3, в результате чего неизбежно появятся уродливые вебсайты. При изучении CSS3 лучше начать с малого, чем сразу все смешать в одну кучу.

Префиксы фирмы-разработчика – Приведенные примеры демонстрируют многие свойства CSS3, требующие префиксов фирмы-разработчика для работы в некоторых браузерах. Это означает удвоение или даже утроение количества кода, требуемого для одного эффекта. Хотя это может привести к смешанному коду и головной боли при его написании и управлении, сейчас при использовании CSS3 это необходимость.

Ненавязчиво

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

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

Автор: Kean Richmond

Источник: http://www.onextrapixel.com

Редакция: Команда webformyself.

Премиум. Создание собственного блога. Урок 6. Заключительный.

Виктор Рог — Fri, 27 Jan 2012 15:14:38 +0000

От автора: этим уроком мы заканчиваем серию уроков по созданию блога. Главными задачами 6-го заключительного урока являются создание модуля комментариев и поиска.

План урока:

1. Приступаем к комментариям (11:40)

2. Вывод комментариев (10:30)

3. Форма добавления комментариев (7:15)

4. Добавляем комментарии (22:35)

5. Вывод комментариев для модерации (13:25)

6. Модерация комментариев (7:21)

7. Реализуем поиск (35:30)

Детали учебника

Сложность: Средняя

Урок: Видео+текстовая версии (.mp4; pdf)

Время: 02:24:23

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e - в свободное время как раз занимаюсь его изучением.

Давайте, перед тем как приступить к заключительной 6-ой части нашего курса, вспомним, каких результатов мы достигли в предыдущих частях:

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

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

Ссылка на урок: http://webformyself.com/sozdanie-sobstvennogo-bloga-urok-1/

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

По итогу урока мы, прежде всего, определились со структурой необходимой БД. Также разбили наш шаблон на логические части с тем, чтобы легко можно было вносить правки в каждую из частей шаблона. И основное - мы научились выводить статьи выбранного к просмотру раздела.

Ссылка на урок: http://webformyself.com/sozdanie-sobstvennogo-bloga-urok-2/

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

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

Ссылка на урок: http://webformyself.com/sozdanie-sobstvennogo-bloga-urok-3-x/

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

Данный урок был довольно объемным и его результаты также по своему объему и практическому значению превосходят предыдущие уроки. Итогом урока будет практически готовая административная часть с ограниченным доступом, посредством которой и будет происходить управление блогом. Здесь мы научились добавлять/редактировать статьи, а также установили WYSIWYG-редактор и, что немаловажно, - файловый менеджер.

Ссылка на урок: http://webformyself.com/premium-sozdanie-sobstvennogo-bloga-urok/

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

Итогами данного урока будут управление разделами (добавление/изменение/удаление) и удаление статей. Кроме того, мы реализовали обязательную составляющую практически любого блога - архив статей.

Ссылка на урок: http://webformyself.com/premium-sozdanie-sobstvennogo-bloga-urok-5/

Создание блога. Часть 6. Заключительный урок.

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

Ссылка на урок: http://webformyself.com/premium-sozdanie-sobstvennogo-bloga-urok-6/

Заключение.

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

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

Итак, приступим!

Продолжить чтение → Продолжить чтение →

Загибающийся флеш-уголок для сайта.

Виктор Рог — Mon, 23 Jan 2012 12:35:58 +0000

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

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e – в свободное время как раз занимаюсь его изучением.

Для работы я скачал в сети бесплатный шаблон, с которым мы и будем работать. Для работы нам понадобятся всего 5 файлов:

2 картинки: large.jpg и small.jpg

2 флешки: large.swf и small.swf

файл подключения и настроек: peel.js

Картинки и флешки показывают уголок в двух положениях – открытый и приоткрытый уголок. Флешки анимаируют показ картинок. Картинки Вы, конечно же, можете использовать свои, написать на них необходимы текст или вывести нужное изображение. Единственное, желательно соблюдать те размеры, которые Вы увидите в исходниках, т.е. 100*100 для маленькой картинки и 500*500 для большого изображения.

Теперь о файле peel.js, который подключает уголок на сайт и отвечает за его настройки. Все необходимые настройки заключены в первых строках файла – 10 строк (10 настроек). Давайте распишем каждую из них:

jaaspeel.ad_url – ссылка на страницу, куда будет осуществлен переход по клику на уголок;

jaaspeel.small_path – путь к маленькой флешке;

jaaspeel.small_image – путь к маленькой картинке;

jaaspeel.small_width – ширина уголка в исходном положении (желательно, чтобы она совпадала с шириной маленькой картинки);

jaaspeel.small_height – высота уголка в исходном положении (желательно, чтобы она совпадала с высотой маленькой картинки);

jaaspeel.big_path – путь к большой флешке;

jaaspeel.big_image – путь к большой картинке;

jaaspeel.big_width – ширина уголка в отогнутом положении (желательно, чтобы она совпадала с шириной большой картинки);

jaaspeel.big_height – высота уголка в отогнутом положении (желательно, чтобы она совпадала с высотой большой картинки);

jaaspeel.big_params – в этом параметре добавляется ссылка к отогнутому уголку, которую при желании можно закомментировать.

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

Теперь осталось только подключить данный файл на страницу. Подключается он, как и любой другой скрипт. Между тегами HEAD пропишем строку кода:

Вот и все…

Теперь можно сохранить файл, обновить страницу в браузере и наслаждаться результатом. Остается сказать несколько слов об особенностях подключения и настройки файла, например, на CMS WordPress. Во-первых, каталог с файлами уголка желательно располагать в Вашей текущей теме (/wp-content/themes/ваша-тема/). Во-вторых, все пути в настройках прописываем абсолютно. Например, путь к маленькой флешке будет таким: http://Ваш_сайт/wp-content/themes/ваша-тема/peel/small.swf. Ну и подключаем скрипт, конечно же, используя также абсолютный путь:

Где прописывать подключение, думаю, всем понятно – сделать это нужно в файле header.php Вашей темы.

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

Удачи и до новых встреч!

Оживляем цвета: переходы CSS3 и альтернативный jQuery.

Виктор Рог — Thu, 19 Jan 2012 12:42:31 +0000

От автора: вам когда-нибудь хотелось оживить цвет элемента (например, шрифта) при проведении над ним мышью? Можно подумать, что это легко делается с помощью jQuery, но он совсем не поддерживает анимацию цвета, если только не применяется плагин или jQuery UI (пользовательский интерфейс jQuery). Вам нужен быстрый и легкий способ добавлять элементу простую анимацию цвета, и тут в дело вступают переходы CSS. Они являются частью проекта спецификации CSS3 и обеспечивают средство анимации изменений свойств CSS, а не немедленный эффект этих изменений.

Это легкий способ, но у него есть один недостаток – он поддерживается только современными браузерами, однако нельзя оставить «за бортом» пользователей старых браузеров, так что вам нужна некая постепенная деградация до тех браузеров, которые не поддерживают переходы CSS. В этом посте мы увидим, как можно анимировать цвета с помощью переходов CSS3 и метода jQuery .animate() в качестве альтернативы там, где переходы не поддерживаются браузером.

Почему бы не использовать jQuery?

Вы можете поинтересоваться, почему бы просто не придерживаться jQuery при анимации? Годами веб-дизайнеры полагались на JavaScript при внутристраничной анимации, но он далек от совершенства. Причина того, что мы собираемся использовать переходы CSS3, заключается в том, что, в отличие от обычных переходов JavaScript, переходы CSS3 ускоряются техническими средствами и оттого проходят более гладко. Особенно это может оказаться спасением для мобильных устройств с ограниченной производительностью компьютера.

Согласно W3C, переходы CSS позволяют изменениям свойств в значениях CSS происходить гладко в течение определенного времени. Это сглаживание анимирует изменение значения CSS, когда то запускается щелчком мыши, фокусированием или активным состоянием, или любыми изменениями элемента (включая даже изменение атрибута класса элемента).

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

Передача изображения: Apple

Итак, давайте создадим элемент с определенным CSS, а затем для изменения цвета шрифта применим псевдокласс :hover. Для сглаживания этого изменения мы используем переход – эффект, ранее возможный только при использовании JavaScript или Flash, а теперь – при употреблении нескольких простых строк CSS.

Разметка – простая гиперссылка, как здесь:

Transition me!

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

a.test {color:#AAA;}
a.test:hover {color:#F00;}

Теперь давайте добавим к изменению цвета шрифта переход. Так различие смягчается и анимируется в течение определенного периода времени.

a.test {
  color: #AAA;
  -moz-transition-property: color;  /* FF4+ */
  -moz-transition-duration: 1s;
  -webkit-transition-property: color;  /* Saf3.2+, Chrome */
  -webkit-transition-duration: 1s;
  -o-transition-property: color;  /* Opera 10.5+ */
  -o-transition-duration: 1s;
  -ms-transition-property: color;  /* IE10? */
  -ms-transition-duration: 1s;
  transition-property: color;  /* Standard */
  transition-duration: 1s;
  }

a.test:hover {
  color: #F00;
}

Теперь давайте скомбинируем все эти значения в стенографическое объявление для его упрощения:

/* сокращенная запись свойств перехода */
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

a.test {
  color: #F00;
  -moz-transition: color  1s;
  -webkit-transition: color 1s;
  -o-transition: color  1s;
  -ms-transition: color 1s;
  transition: color 1s;
  }

a.test {
  color: #AAA;
}

Важно использовать подходящие префиксы, следовательно, с расширением поддержки наши переходы будут работать во все большем количестве браузеров. В объявлении вы заметите две части перехода:

transition-property: Устанавливает имя или имена свойств CSS, к которым должны применяться переходы.

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

В примере мы не использовали еще два свойства:

transition-delay: Задержка перед началом перехода, установленная в секундах, напр. 1s

transition-timing-function: Значение функции тайминга позволяет вам со временем менять скорость перехода путем определения одной из шести возможностей: ease, linear, ease-in, ease-out, ease-in-out и cubic-bezier (что дает вам возможность определять свою собственную временную дугу).

Попробуйте каждое из значений функции тайминга, чтобы посмотреть, чем они различаются. Значение по умолчанию – ease, и оно должно просто отлично работать для коротких переходов. Они – сравнительно недавнее свойство. Прекрасно работает в современных браузерах, а пользователи старых все еще не могут видеть их как анимацию. Переходы CSS3 выполняются на следующих браузерах:

Safari 3.2+ (представлен в 2008г.)

Firefox 4+ (2009г.)

Google Chrome 7+ (представлен в 2010г.)

Opera 10.50+ (представлен в 2010г.)

Было предложено запустить FireFox 3.7 с поддержкой переходов CSS, но по какой-то причине FireFox отменил запуск и объявил, что 3.7 выйдет в производство как версия 4.

Хотя не все браузеры поддерживают переходы CSS, тот факт, что они заявлены отдельно от изменяющих свойств, означает, что эти изменения все еще будут видны в браузерах без поддержки переходов. Браузеры, у которых отсутствует поддержка переходов CSS, будут отлично применять состояние :hover (или другое), кроме того, что все изменения будут происходить мгновенно, а не со временем.

Чтобы гарантировать в более старых браузерах тот же эффект переходов CSS3, мы применим JavaScript для обеспечения поддержки только тех браузеров, у которых нет собственной поддержки, но вместо решения всех кроссбраузерных проблем гладкой анимации своими силами, можно воспользоваться средствами jQuery .animate() для обеспечения того же эффекта анимации, если он не может быть выполнен в текущем браузере с помощью CSS3.

Вот наша функция jQuery:

$(document).ready(function(){
    $(".test").hover(function () {
    $(this).stop().animate({ color: "#F00" },700)
    }, function() {
    $(this).stop().animate({ color: "#AAA" },700)}
);
});

Как я уже сказал ранее, jQuery не поддерживает анимированную смену цвета, так что для добавления этой функциональности мы применим jQuery UI, но нам не нужен весь код, что окажется излишними +200kb. Можно взять только необходимый, так что если нам будет нужно анимировать цвет, все, что придется включить – это следующий код. Я взял его из последнего jQuery UI (в настоящее время 1.8.14).

// замена анимации на стили цвета
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
    'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
    $.fx.step[attr] = function(fx) {
    if (!fx.colorInit) {
        fx.start = getColor(fx.elem, attr);
        fx.end = getRGB(fx.end);
        fx.colorInit = true;
    }

    fx.elem.style[attr] = 'rgb(' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
});

// функции цветовой конверсии из highlightFade
// от Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Разбираем строки, ищем фрагменты цвета [255,255,255]
function getRGB(color) {
    var result;

    // Проверяем, не имеем ли мы уже дело с массивом цветов
    if ( color && color.constructor == Array && color.length == 3 )
        return color;

    // Ищем rgb(num,num,num)
    if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
    return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

       // Ищем rgb(num%,num%,num%)
    if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
    return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

        // Ищем #a0b1c2
    if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
    return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

    // Ищем #fff
    if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
    return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

    // Ищем rgba(0, 0, 0, 0) == transparent в Safari 3
    if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
    return colors['transparent'];

    // иным образом, мы, скорее всего, имеем дело с названным цветом
    return colors[$.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
    var color;
    do {
        color = $.curCSS(elem, attr);

    // Продолжайте, пока не найдем элемент, содержащий цвет, или не наткнемся на body
    if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
    break;

    attr = "backgroundColor";
    } while ( elem = elem.parentNode );

    return getRGB(color);
};

После сжатия с помощью YUI остается всего 1.43kb:

$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor",
"borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c)
{if(!c.colorInit)c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}
c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if
(b&&b.constructor==Array&&b.length==3)
{return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if
(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*
([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})
([a-fA-F0-9]{2})
([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#(
[a-fA-F0-9])
([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b))
{return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};

Далее применяем библиотеку JavaScript с открытым исходным кодом под названием Modernizr, она дает нам возможность протестировать отдельные свойства HTML5 и CSS3 в браузерах наших пользователей. Вместо тестирования только отдельного браузера и попытки принимать решения на этом основании, Modernizr дает возможность задавать отдельные вопросы типа: «Поддерживает ли этот браузер переходы CSS3?» и получать четкие ответы «да» или «нет».

И снова нам не нужна вся библиотека, к счастью, в Modernizr2 имеется новая возможность модификации вашей закачки JavaScript’а в соответствии с запросами пользователя. Так что теперь, если вам не нужна отдельная характеристика (например, Drag and Drop), вы можете выключить и не заставлять Modernizr ее проверять. Прочтите все об этом здесь.

Вот код, нужный нам из библиотеки Modernizr. Здесь всего 1kb (Modernizr 2.0.6 – Custom Build)

;window.Modernizr=function(a,b,c){function z(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),
d=(a+" "+m.join(c+" ")+c).split(" ");return y(d,b)}function y(a,b){for(var d in a)if(j[a[d]]!==c)
return b=="pfx"?a[d]:!0;return!1}function x(a,b){return!!~(""+a).indexOf(b)}function w(a,b)
{return typeof a===b}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function u(a)
{j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,
m="Webkit Moz O ms Khtml".split(" "),n={},o={},p={},q=[],r,s={}.hasOwnProperty,t;!w
(s,c)&&!w(s.call,c)?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype,c)},
n.csstransitions=function(){return z("transitionProperty")
};for(var A in n)t(n,A)&&(r=A.toLowerCase(),e[r]=n[A](),q.push((e[r]?"":"no-")+r));u(""),i=k=null,e._version=d,e._domPrefixes=m,e.testProp=function(a){return y([a])
},e.testAllProps=z;return e}(this,this.document);

Теперь мы можем прибегнуть к следующему коду и обеспечить мощную анимацию jQuery тем браузерам, которые не поддерживают переходы CSS3:

if (!Modernizr.csstransitions) {
    $(document).ready(function(){
    $(".test").hover(function () {
        $(this).stop().animate({ color: "#F00" },700)
    }, function() {
        $(this).stop().animate({ color: "#AAA" },700)}
        );
    });
}

Вот и все, ребята!

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

Автор: Faraz Karimian

Источник: http://www.onextrapixel.com

Редакция: Команда webformyself.

Премиум. Создание собственного блога. Урок 5.

Виктор Рог — Tue, 17 Jan 2012 13:18:51 +0000

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

План урока:

1. Черновики (18:29)

2. Удаление статьи (10:06)

3. Добавление раздела (11:42)

4. Переименование раздела (14:13)

5. Удаление раздела (11:30)

6. Реализуем архив. Часть 1 (11:37)

7. Реализуем архив. Часть 2 (9:54)

8. Реализуем архив. Часть 3 (12:47)

9. Реализуем архив. Часть 4 (5:51)

Детали учебника

Сложность: Средняя

Урок: Видео+текстовая версии (.mp4; pdf)

Время: 01:45:48

Автор: Андрей Кудлай

Итак, приступим!

Продолжить чтение → Продолжить чтение →

Баланс в веб-дизайне.

Виктор Рог — Sun, 15 Jan 2012 17:20:27 +0000

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

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

Автор: Найко Михаил

Всем привет, я – Найко Михаил – дизайнер, иллюстратор и блоггер. Живу и работаю в Москве. Кроме страсти к дизайну и веб-технологиям, люблю кино, спорт и свою девушку) Также смотрите мой блог о веб-дизайне.
Сайт: http://naikom.ru/blog/ – «Блог о веб-дизайне»

Почему сбалансированные сайты выглядят хорошо

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

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

Типы баланса

Есть несколько различных методов создания баланса. Вы можете использовать эти различные методы, чтобы организовать и упорядочить элементы, чтобы создать хорошо сбалансированное впечатление, что позволит пользователям чувствовать себя комфортно. Рассмотрим пять основных способов достижения баланса

Горизонтальный баланс

Вертикальный Баланс

Радиальный Баланс

Симметричный баланс

Асимметричный баланс

Горизонтальный и вертикальный баланс

Отличный способ визуально упорядочить элементы — сбалансировать их по осям — горизонтальной или вертикальной. Горизонтальный баланс — вы располагаете элементы слева и справа от друга – как на детских качелях. Вертикальный баланс — вы развешиваете элементы сверху вниз по центральной оси.

Радиальный баланс

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

Симметричный и асимметричный баланс

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

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

Симметрия против асимметрии

Как узнать, какой из видов баланса было бы правильно сейчас использовать? Если в общем, то симметрия обычно проще воспринимается. Вот поэтому она чаще встречается в дизайне.

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

Для симметрии лучше всего используйте контент примерно одинаковых частей, рассредоточенные по макету

В асимметрии лучше всего привлекать внимание к какой-то одно определённой точке, выводя взгляд зрителя из равновесия

Свойства баланса

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

Размер

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

Цвет

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

Форма

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

Контраст

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

Расположение

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

Как добавить баланс на сайт

Итак, как же сделать страницу сбалансированной? В качестве примера возьмем самый простой симметричный баланс. Пустое содержание выглядит довольно уныло, так что добавим меню. Если посмотреть на практически любой неплохой дизайн, то можно увидеть, что меню оформлено «тяжелее» текста. Вот тут и получается самый примитивный баланс — небольшой тяжелый элемент уравновешивает объемный, но лёгкий текст. Начинайте разработку макета с наброска необходимых элементов. Эти правила помогут не совершить ошибок:

Большие объекты тяжелее маленьких

Тёмные объекты тяжелее светлых

Насыщенные цвета тяжелее блеклых

Чем толще граница, тем она тяжелее

Чем больше текстуры, тем тяжелее объект с ней

Кроме горизонтального вида баланса не забывайте про вертикальный и радиальный

Тёплые яркие цвета, такие, как оранжевый и красный, тяжелее, чем холодные цвета (синий, зелёный)

Правило третей

В визуальных искусствах есть такое понятие, как правило третей — это когда рабочее пространство мысленно разбивается на 9 равных частей 2-я вертикальными и 2-я горизонтальными линиями. Так вот, по этому правилу главные композиционные центры стоит располагать на пересечении этих линий.

Итак, как же разделить макет на 9 равных частей?

1. Вообразим, что всё рабочее пространство — обычный прямоугольник

2. Мысленно делим вертикальную его часть на 3 равных доли и проводим для этого 2 паралленьные линии.

3. То же самое для горизонтальной составляющей

Соблюдение правила третей задаёт больший интерес к содержимому, чем при обычном центрировании.

Примеры с пояснениями

На сайте MacAllan Ridge вы видите асимметричное расположение блоков. Однако громоздкий блок с картинкой уравнивается тяжелыми границами блока меню. Довольно распространённый приём балансировки.

Ещё один пример асимметрии — сайт CVGvietnam. Спокойный вон служит для фоном для дисбаланса.

Сайт Biltmore симметричен, но его спокойный ритм нарушает иллюстрация.

Сайт-портфолио Нaluko тоже выполнен в симметричном ключе. Однако дисбаланс в шапке оттягивает внимание на себя.

Сайт Warble Entertainment имеет симметричную структуру, причём сбалансированную — логотип, например, уравновешивается картинками. Однако его богатое графическое оформление делает сайт очень живым, что соответствует его тематике.

А вот пример вертикально баланса. То есть если нарушить горизонтальный баланс, то вертикально сайт всё равно будет уравновешен.

Сайт Getactive — пример радиального баланса. Все элементы расположены пропорционально относительно центральной картинки.

А эта страница уравновешена как вертикально, так и горизонтально.

Три маленьких картинки балансируют с одним большим объектом.

Итоги

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

Автор: Найко Михаил

Редакция:Команда webformyself.

Премиум. Курс по PHP. Часть 4. Функции PHP.

Виктор Рог — Thu, 12 Jan 2012 13:03:22 +0000

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

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

План урока:

1. Пользовательские функции (31:45) 2. Функции для работы с массивами (15:30) 3. Строковые функции (20:51) 4. Функции даты и времени (6:59) 5. Практическое задание (14:14)

Детали учебника

Сложность: Легкая Урок: Видео версия (.mp4) Время: 01:29:21

Автор: Андрей Кудлай

Итак, приступим!

Продолжить чтение → Продолжить чтение →

Создаем веб-дизайн на тему комиксов, создание и установка темы для WordPress (Часть 3).

Виктор Рог — Tue, 03 Jan 2012 17:33:27 +0000

От автора: В первых двух частях был создан макет в Фотошопе и из него сверстан шаблон сайта на тему комиксов. В этой части мы, по многочисленным просьбам в комментариях, создадим, используя шаблон из второй части, готовую тему для WordPress (WP).

Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS (Часть 1).

Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS (Часть 2).

План урока:

1. Устанавливаем WP (12:48)

2. Немного об особенностях создания темы WP (9:22)

3. Знакомимся с тегами WP (10:17)

4. Учимся выводить посты (9:06)

5. Переносим шаблон в создаваемую тему (10:42)

6. Выводим посты в теме (12:33)

7. Навигация (10:37)

8. Разбиваем шаблон на составляющие. Меню постоянных страниц (10:34)

9. Шаблон страницы и поста (13:28)

10. Виджетируемый сайдбар (10:25)

11. Шаблон комментариев (11:30)

12. Популярные посты в табах (13:49)

13. Популярные посты в табах (продолжение) (13:43)

14. Слайдер (13:53)

15. Последние комментарии в табах (9:47)

16. Шаблон поиска (11:24)

17. Доработка шаблона. Исправление ошибок. Советы и рекомендации (10:29)

15. P.S. Исправление ошибок (5:22)

Детали учебника

Сложность: Средняя

Урок: Видео+текстовая версии (.mp4; pdf)

Время: 03:23:19

Автор: Андрей Кудлай

Итак, приступим!

Продолжить чтение → Продолжить чтение →

Умело выводим на новый уровень SEO посты блога WordPress.

Виктор Рог — Sun, 01 Jan 2012 13:40:24 +0000

От автора: WordPress считается одной из тех систем управления контентом, которая быстро поднимет ваш блог в SERP (Search Engine Result Pages – страницах результатов поиска) Google’а, но подъем на вершину – это совсем другая история. Вебмастера постоянно находятся в поиске Святого Грааля для SEO и это (прямо как в случае с настоящим Граалем) никогда не закончится благодаря присутствию великана – поисковика Google.

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

Приемы SEO

Суровая реальность

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

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

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

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

Сначала пермалинки

Перед тем, как с головой погрузиться в содержание своего поста и начать приукрашивать его под трафик, давайте начнем с ссылки, которая будет занесена в результаты поиска Google – пермалинка (постоянной ссылки). Думаю, мы уже знаем, что WordPress предлагает по умолчанию четыре структуры пермалинка и дает вебмастеру возможность самому попробовать пользовательскую постоянную ссылку. Я обычно предлагаю нижеприведенную структуру, так как в ней полно места под SEO:

/%category%/%postname%/

Примечание: это нужно делать на новом блоге. Если делать изменения в старом блоге с большим количеством постов, то их URL изменится на ваш новый пользовательский пермалинк и Google вернет «ошибку 404 страница не найдена» (404 not found). Нехорошо с точки зрения перспектив SEO. Если вы серьезно настроены изменить структуру пермалинка в массивном блоге, то примените плагин переадресации, который поможет вам при изменении URL’а поста автоматически добавлять редирект 301. Теперь потерь SEO не будет!

URL поста

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

Избегайте применения стоп-слов вроде предлогов и т.д. Они вам в условиях SEO не помощники и используют впустую ценное место вашего URL’а.

Постарайтесь сделать URL коротким. Поисковые движки в своих результатах закроют часть URL’а, отсюда следует, что ему нужно быть коротким.

Один раз примените свое ключевое слово в самом URL’е.

Название поста

Название поста находится в двух местах – внутри веб-страницы (позиция 1 на изображении внизу) и в строке заголовка вашего браузера (позиция 2 на изображении внизу).

Разрешите мне сначала остановиться на позиции 2 названия вашего поста. Содержимое названия поста зависит от темы, которую вы используете. У некоторых из не настолько оптимизированных тем WordPress название поста находится в приведенном внизу формате:

Название блога | Название поста

А у других тем WordPress название поста может оказаться в приведенном внизу формате:

Название поста | Название блога

Лучше всего работает с SEO последний указанный формат. Если в вашей теме применяется первый, я предложил бы вам установить плагин WordPress’а All in One SEO Pack. Этот плагин поможет сделать необходимые изменения.

ВНИМАНИЕ: с этим я сталкивался дважды, так что хочу, чтобы вы были в курсе. Если вы применяете Thesis Framework или любую другую аналогичную инфраструктуру в установке своего WordPress’а, то предлагаю проверить ее свойства. Большей частью у этих инфраструктур есть свои собственные средства оптимизации SEO. В результате может вмешаться применение другого плагина SEO для выполнения той же задачи, что послужит концом вашему ранжированию. Знайте об этом!

Если вы установили плагин All in One SEO Pack, то во время создания нового поста увидите вышеуказанные опции на той же странице «Создать новый пост» («Create New Post»). Прокрутите вниз, и должны увидеть нечто похожее на изображение вверху. Я перечислю список того, что нужно включить в каждую позицию согласно вышеприведенным изображениям:

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

Вот название страницы (title), которое показывается как заголовок документа в левом верхнем углу вашего браузера. в названии поста вашего браузера. Как уже объяснялось, оно должно быть в формате «Название | Название блога».

Далее следует самая захватывающая часть. Это название – то, что видно в Google SERP, когда ваш блог показывается на определенной странице результатов поиска. Google (и большая часть других поисковых движков) ограничивает количество знаков в названиях примерно до 60. Так что в этом разделе нужно применить лаконичное название. Помните, оно не будет показано на странице вашего поста. Оно будет показано только в SERP (вот где начинается SEO). А также помните о том, что в него нужно внести один раз ключевое слово.

Это должно быть очевидным. Тут идет короткое описание, показанное в SERP. Также введите сюда ключевое слово.

Ключевые слова! Включите сюда основное и впихните дополнительно несколько связанных слов. Используйте наше руководство по поиску ключевых слов для нахождения связанных слова.

Добавьте изображение

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

Загрузив его в свой пост, вы увидите дополнительную возможность оставить название и дублирующий текст:

Название (Title) – это куда вы можете вставить описательный текст, связанный с вашим изображением. Помните о том, что в него нужно включить ключевое слово.

Дублирующий текст (Alternate Text) – тут нужно быть кратким и точным. Помните о том, что следует включить в начало этого текста ключ.

Примечание: убедитесь, что название изображения само по себе является ключевым словом. Если планируете использовать множество изображений, то назовите их keyword-1.jpg, keyword-2.jpg и т.д.

Использование H1, H2, H3

H1 – это тэг HTML, который означает "Header 1" (Заголовок 1). Его также называют "Primary Header" (основной заголовок). Таким же образом H2 означает "Secondary Header" (вторичный заголовок) и так далее до H6.

У меня нет письменных доказательств этому, но я уверен, что содержимое тэга H1 и название вашего поста должны совпадать. Обычно название поста в любой теме WordPress – это H1, так что если вы используете в своем посте название (что наверняка делаете), то уже однажды применили тэг H1. И в нем тоже есть ключевое слово, так как я просил вас использовать его один раз в названии. Помните, да?

Обычно у поста есть подзаголовок (если он достаточно многословен для такового). Впредь ставьте все подзаголовки внутрь тэгов H2. Может возникнуть вопрос, нужно ли нам использовать в тэгах H2 ключевые слова? Собственно, нужно, но не переборщите. Google – умный алгоритм, с которым не следует играть.

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

Ссылки

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

p>Контент, на который вы делаете ссылку, должен быть подходящим. Применение текстовой ссылки «цемент» для линка на пост об iPhone’е для ваших посетителей или поисковых движков не будет иметь смысла.

Всегда заполняйте поле названия ссылки. В целях SEO оно должно включать ключевое слово.

Содержимое…

Содержимое – это все! Мы отлично знаем, как важен хороший контент, или иначе вся тактика SEO может оказаться напрасной. Вот несколько маленьких подсказок:

В первом предложении своего содержимого один раз употребите ключевое слово.

Один раз используйте ключевое слово в последнем предложении.

Один раз выделите его жирным шрифтом.

Один раз выделите ключевое слово в контенте курсивом.

Один раз подчеркните его.

p>ВНИМАНИЕ: не переусердствуйте. Интенсивность попадания ключевого слова должна оказаться примерно 5-7%. Так что если чувствуете, что его слишком много, то либо удалите некоторые из ключевых слов, либо включите в свой пост больше текста. Избегайте абсурдных ситуаций.

Упаковываем в яркие детали

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

Оптимизируйте текст «Узнайте больше» ("Read More") до чего-нибудь более интересного. Это хорошо помогает!

Оптимизируйте текст «Оставить комментарий» ("leave a comment"). Вам нужно заставить их оставить комментарий. Вы ведь можете, правда?

Оптимизируйте текст на кнопке «Отправить комментарий» ("Submit Comment") до чего-то особенного.

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

Заключение

Это было всего лишь началом. Для оптимизации блога WordPress можно сделать многое. Со временем я раскрою еще больше секретов! Расскажите мне, а что вы в свою очередь делаете для SEO.

Автор: Salman Siddiqui

Источник: http://www.onextrapixel.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.