Профессия веб-мастер: css верстка, создание веб сайтов, веб дизайн

Партнерская программа AzartCash – до 50% от дохода системы!

admin — Wed, 23 May 2012 13:14:34 +0000

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

И вот сегодняшняя статья будет о партнерской программе онлайн казино под названием AzartCash.

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

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

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

Во всем современном мире эта схема давно успешно работает и теперь она покоряет просторы наших стран.

Почему именно AzartCash?

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

Вот какие суммы можно зарабатывать с помощью этой партнерской программы:

Что предлагает партнерская программа?

Возможность конвертировать любой развлекательный трафик (а он самый массовый и легкодоступный).
До 50% дохода с казино.
Работа с одним из лучших казино рунета azartplay, в котором присутствуют самые любимые и популярные игры, а также игры с живыми дилерами.
Большое число лендингов и промо материалов, индивидуальный подход.
Выплаты два раза в месяц.
Круглосуточная техподдержка по icq, почте и тикетам;
Возможность встраивать на свой сайт демо игры, которые позволяет бесплатно проверить, как это работает, а после уже можно перейти на сайт казино и сыграть на настоящие деньги.

На последнем я бы остановился подробнее. Это отличительная черта партнерки, которая дает возможность испытать ее бесплатно.

Ниже вы можете видеть, как это выглядит.

На самом деле игр очень много, но покер мне ближе всего.

Ко всему прочему AzartCash регулярно устраивает конкурсы с денежными призами.

Что бы воспользоваться всеми этим, достаточно только зарегистрироваться в AzartCash. Удачи!!!

Мой подарок от TimeWeb+Apple

admin — Mon, 19 Sep 2011 10:15:46 +0000

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

Timeweb успешно провела совместную акцию с компанией Apple и раздала призы.

Благодаря вам и я не остался без подарка, за что вам человеческое спасибо.

Мой подарок: Apple Magic Mouse

Фото отчет предоставляю, его вы можете посмотреть на другом моем блоге.

Как добавить кнопку Google +1 на свой сайт

admin — Tue, 30 Aug 2011 10:25:33 +0000

Здравствуйте мои уважаемые читатели, я уже давно не писал и на то есть свои «некачественные причины».

Но пора брать себя в руки и начинать работать и сегодня я напишу, как добавить на сайт кнопку google +1.

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

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

Увидите вы это прямо в поисковой выдаче google, просто набрав запрос. И если там есть страницы, за которые голосовали ваши друзья, то под результатом вы увидите сообщение.

Вот как это выглядит:

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

А зеленым кнопка google +1, которую компания вам предоставляет, для возможность поделится страницей прямо из поисковой выдачи.

Вы можете мне возразить: «у меня нет таких кнопок?»

Они появятся, если у вас есть акаунт в социальной сети google plus, и вы в данный момент авторизированны.

Вы должны видеть такую строку вверху страницы.

Как видите google +1 это аналог кнопки от facebook и вконтакте. Только она более «глобальна» так как goolge внедрила её в свою поисковую систему.

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

Настройка кнопки GooGle +1

Переходим по этой ссылке и видим диалог настроек:

Настроек как таких здесь минимум:

1) Выбираем размер самой кнопки. Справа сразу же видим результат.

Google приготовила для вас несколько заготовок кнопки:

2) выбираем язык. Выбор языка, определяет, на каком языке будет отображаться кнопка google +1. Доступно на выбор 40 различных языков.

Потом нажимаем на кнопку «расширенные настройки». У нас выпадет меню с дополнительными настройками:

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

Дальше у нас идет пункт про то как «Выполнять код»

Я рекомендую вам оставить как есть. В этом случае кнопка сама активируется после загрузки страницы.

А иначе вам самим придется вызывать кнопку, используя java-script.

Дальше у нас идет строка – «Функция обратного вызова JavaScript». Это сугубо для программистов. С помощью этой строки можно заставить функцию выполнить какую-то подзадачу.

С помощью этой строки можно научить google analytics, отслеживать нажатие по кнопке google +1. Добавив функцию обработки обратного вызова в код страницы, а в строку «Функция обратного вызова JavaScript» вставив название этой функции.

И последний параметр «URL для +1»

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

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

С настройкой кнопки вроде разобрались.

Вставка кода GooGle +1

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

Здесь у нас два блока кода.

Красный блок — нужно вставить в пределах тега «head» или перед закрывающим тегом «/body» в html код вашей странице.

Если вы, как и я используете cms wordpress, то тег «head» вы найдете в файле темы под названием header.php.

Ищите там блок «script» и вставляете после него. Если у вас такого блока нет, то вставляйте ближе к закрывающему тегу «/head», что бы не вносить путаницу в системные теги.

Пример:

1
2
3

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

Ищите удобное место и просто вставляете код и вуаля кнопка появилась.

В случае с wordpress. Если хотите, что бы кнопка появилась на главной под каждой статьей. То нужно вставить зеленый блок в файл index.php например, после строки

1	the_content(''); ?>

Это значит, что ваша кнопка появится после самого описания каждой статьи.

Пример:

1 2	(''); ?> </g:plusone>

Для того, что кнопка появилась после самой статьи на отдельной странице, нам понадобится файл single.php код можно вставить так же после

1	the_content(''); ?>

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

На этом все, удачи!!!
С уважением Тригуба Сергей.

WordPress 3.2 новая версия

admin — Wed, 06 Jul 2011 12:34:05 +0000

Не успели, мы обновится к версии 3.1.4, как разработчики представили версию 3.2.

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

Некоторые изменения не обратимы:

новая темы Twenty Eleven на основе Html пятой версии;
новый интерфейс административной панели; (как на меня симпатичный)
прекращена поддержка PHP 4;
прекращена поддержка MySQL 4;
прекращена поддержка Internet Explorer 6 (давно пора);

А также заявлена улучшенная производительность и исправление ряда ошибок.

От себя добавлю, что обновление на автомате прошло успешно. Проблем с плагинами пока замечено не было.

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

WordPress 3.1.4 Обновляем блог

admin — Fri, 01 Jul 2011 05:51:26 +0000

Снова вышло сервисное обновление бесплатной системы управления сайтами wordpress под кодовым номером 3.1.4.

Обновление закрывает ошибку, которая позволяет «редактору» получить более высокие права. И исправляет еще несколько ошибок безопасности.

Обновиться можно в административной панели своей блога в автоматическом режиме.

Провел обновление на автомате, ничего не отключая. Никаких проблем не возникло.

С уважением Тригуба Сергей!

Выделение комментариев автора блога

admin — Sat, 25 Jun 2011 09:33:25 +0000

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

Первым делом полез в Google за решением вопроса: выделение комментариев.

Большинство результатов предлагает скачать плагин для выделения комментариев.

Но этот вариант меня не устраивал по нескольким причинам:

Я пытаюсь обходиться без плагинов;
Плагин не дает нужной гибкости;
Обычно плагины слишком громоздки для решения такой простой задачи;

Поэтому я продолжил поиск решения.

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

Потом был вариант проверки «Id» пользователей равных единице. Вариант оказался почти рабочим. В древовидных комментариях он выделял мои комментарии выборочно.

И как говорится, кто ищет, тот найдет, я наткнулся на вариант, который меня полностью устроил.

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

Синтаксис

1	if ( get_comment_author_email() == get_the_author_email() ) echo adm_; else echo $oddcomment; ?>

Теперь посмотрим пример, а потом я объясню принцип работы кода.

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

За внешний вид этой полоски отвечает такая строка:

1	=”comment_top">

Пример:

1	if ( get_comment_author_email() == get_the_author_email() ) echo adm_; else echo $oddcomment; ?>comment_top">

Теперь разберем код:

1	if ( get_comment_author_email() == get_the_author_email()

Здесь мы проверяем, равен ли email адрес в комментарии с email адресом администратора блога.

Если да, то к названию идентификатора id=”comment_top ” добавится приставка “adm_” в итоге выйдет «adm_ comment_top».

А если нет, то название идентификатора id=”comment_top ” останется без изменений.

Теперь все, что нужно добавить новую строку в css файл:

1 2	#comment_top{background:#E6E9EC;} #adm_comment_top {background:#FFADAD;}

И вуаля.

Гибкость этого способа в том, что можно менять любую часть комментария.

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

Пример:

Html

1	=" comment_text">() ?>>

css

1 2	#comment_text { background:#E6E9EC;} #adm_comment_text { background:# FFADAD;}

Соответственно и вы можете так легко выделить свои комментарии, не прибегая к плагинам и громоздким кодам.

На этом все. Удачи!!!

С уважением Тригуба Сергей.

Интересное: Супер тарзанка

blah

CSS transform scale — Масштабирование предметов

admin — Thu, 16 Jun 2011 23:00:26 +0000

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

В этой статье мы разберем процесс масштабирования с помощью transform scale.

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

Часть 2. CSS transform scale: Масштабирование

С помощью transform scale мы можем увеличивать или правильнее сказать растягивать наш объект от его первоначального размера.

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

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

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

Синтаксис transform scale

1	transform: scale(цифра, цифра)

В скобках указаны координаты:

число – масштабирование по оси Х;
число – масштабирование по оси Y;

Как видите в скобках написано цифра, а не количество пикселей.

Каждая цифра это полная ширина или высота объекта:

1 – размер не изменится;
1.5 – размер увеличится в полтора раза по ширине или высоте;
2 – размер увеличится в два раза по ширине или высоте;
3- размер увеличится в три раза по ширине или высоте;

Для реализации примера возьмем наших старых друзей — синий квадрат и зеленый квадрат:

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10

.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

Пример: А теперь применим наше свойство transform scale для зеленого квадрата

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scale(1.5, 1)
}

Результат:

Пример: то же самое только transform scale работает по оси Y

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scale(1, 1.5)
}

Результат:

Посмотрите на оба результата, как видите при масштабирование, блок не сдвигает рядом стоящие блоки, а просто залазит на них.

Этого мы могли бы, дыбится, увеличив width и height и применив css position absolute. Посмотреть другие виды позиционирования

Но здесь есть очень важное отличие. Когда используется translate scale, сам блок не меняет размер, а только его отображение.

Браузеру будет надо только провести масштабирование одного блока и все.

А если мы бы применили width, height и position:absolute, браузеру надо будет заново перерисовать всю страницу целиком.

Синтаксис transform scale для каждой оси

1	transform: scaleX (цифра)

Данный параметр масштабирует объект только по оси X.

Пример:

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scaleX(1.5)
}

Результат:

1	transform: scaleY (цифра)

Данный параметр масштабирует объект только по оси Y.

Пример:

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scaleY(1.5)
}

Результат:

Поддержка CSS transform scale браузерами

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

Под костылем я понимаю префиксы для каждого браузера:

Firefox (-moz-transform);
Chrome (-webkit-transform);
Opera (-o-transform);
Internet Explorer 9 (-ms-transform);

Для transform scale, как и для transform translate существует transform3d, который умеет масштабировать элемент и по оси Z. Но его поддерживают только webkit браузеры (Chrome, Safari)

P.S.Я не ответил на вопрос где это все можно применять. Ответ я дам в третьей заключительной статье по css transform. Что бы не повторятся по несколько раз.

Интересное: Сапсан — безумная скорость

blah

CSS Transform – перемещаем предметы

admin — Mon, 30 May 2011 15:00:43 +0000

Давненько я уже не писал продолжение сериала о новых свойствах CSS3.

Пора исправить этот недочет. Сегодня мы рассмотрим такой эффект как css transform.

Мы уже рассмотрели: opacity css, закруглённые края css, text-shadow, css shadow

Как понятно из названия он позволят трансформировать наш объект.

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

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

Теперь небольшой экскурс, а именно какие свойства css3 мы уже успели рассмотреть: закругленные края css, text-shadow, box-shadow, прозрачность css, outline.

Сегодня мы рассмотрим трансформацию – передвижение. Она позволит передвинуть наш объект в нужном нам направлении.

Часть 1. CSS transform – translate: Передвижение

С помощью translate мы можем двигать наши объекты от его первоначального местоположение.

Синтаксис transform – translate

1	transform: translate(количество пикселей, количество пикселей)

В скобках указаны координаты:

число – сдвиг по оси Х;
число – сдвиг по оси Y;

Для реализации примера возьмем наших старых друзей — синий квадрат и зеленый квадрат:

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10

.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

Пример: А теперь применим наше свойство transform: translate для зеленого квадрата

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-moz-transform: translate(5px, -20px)
}

Результат:

Как видите, у нас произошло смещение, и наш зеленый квадрат залез на синий.

Синтаксис transform – translate для каждой оси

1	transform: translateX (количество пикселей)

Данный параметр двигает объект только по оси X.

Пример:

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-moz-transform: translateX(20px)
}

Результат:

1	transform: translateY (количество пикселей)

Данный параметр двигает объект только по оси Y.

Пример:

Html

1 2	="kvblue">> ="kvgreen">>

Стили

1
2
3
4
5
6
7
8
9
10
11

.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
-moz-transform: translateY(20px)
}

Результат:

Как вы помните из статьи css position и его виды, такого же результата можно было бы добиться с помощью position:relative.

Но здесь есть очень важное отличие:

при position:relative – двигается сам элемент;
при transform: translate – двигается только графическое отображение элемента; (сам же элемент остается неподвижным)

Нагрузка на браузер в этом случае намного меньше. Так как браузеру не нужно перестраивать весь макет.

Поддержка CSS transform:translate браузерами

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

Под костылем я понимаю префиксы для каждого браузера:

Firefox (-moz-transform);
Chrome (-webkit-transform);
Opera (-o-transform);
Internet Explorer 9 (-ms-transform);

P.S. Так же существует transform3d которые умеет двигать элемент и по оси Z. Но его поддерживают только webkit браузеры (Chrome, Safari)

Интересное — Купание кота в умывальнике

blah

WordPress 3.1.3 Пора обновится

admin — Sat, 28 May 2011 05:00:32 +0000

Как всегда неприметно вышла новая версия WordPress под номером 3.1.3.

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

Из скупого описания мы имеем:

упрочнения безопасности;
усилены таксономические запросы;
закрыта возможность не авторами получать имена пользователей через канонические перенаправления;
исправлена медиа-проблемы безопасности;
Увеличена безопасность загрузки файлов на серверы с недостаточной защитой от хакеров;
Добавлена очистка старых файлов импорта WordPress, если импорт не был завершен;
Введена защита от кликджекинга в админке и фронтенде;

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

Я уже обновился в автоматическом режиме – никаких проблем замечено не было. Ни один плагин не дал сбой.

P.S. При обновлении никаких шаманств произведено не было. Ничего не сбрасывалось на дефолт и плагины не отключались.

На этом все. Удачи!!!

С уважением Тригуба Сергей!

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

Продам блог maypk.com

admin — Thu, 26 May 2011 05:42:37 +0000

Продается блог maypk.com. Недорого отдам, так сказать в хорошие руки. Полноценно развивать его, у меня попросту нет времени. А просто так держать его не вижу смысла.

Отдам:

Посты, которые уже опубликованы;
Тему блога с исподниками;
Помогу с переездом;
домен (возраст почти год);

Индексация блога поисковыми системами:

В индексе Яндекса: 46 страниц;
В индексе Google: 21 страница;

Как видите, блог хорошо индексируется поисковыми системами. Так, что как говорится, пишите и вас услышат.

P.S. Поэтому кто желает недорого приобрести блог, пишите, договоримся.