viber://pa?chatURI=privatbank&context=ekbid7309423

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

Кому пригодиться этот скрипт?

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

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

Как установить себе в блог?

Сейчас я расскажу как установить этот скрипт сайту на платформе Blogger.
1. Заходим в Панель управления и выбираем нужны блог.
2. В сайдбаре слева выбираете вкладку Шаблон, а затем на обновившейся странице нажимаете на кнопку Изменить HTML.

3. Кликните левой кнопкой мыши по коду в текстовом поле и нажмите CTRL+F и в том же поле с кодом должно появиться поле Search, как на картинке. В поле поиска вводим </head>.

4. Теперь когда Вы нашли этот тег, нужно перед ним вставить следующий код:

HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : false});
});
</script> 

Читайте также: Лучшие CSS эффекты при наведении курсора на изображение

5. Найдите строчку,  где у Вас начинается стиль <b:skin> и где рядом, под информацией о шаблоне Вы встретите строчку <Variable name="maincolor" .., если ее нашли, то под этой строчкой вставьте следующий код:

<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/> 

Если не нашли, то вставьте код в любое место после  <b:skin>.

5. Осталось сохранить шаблон и переходить к следующем пункту!

Как работать с плагином эффекта до/после?

Для начала нужно создать новое сообщение и в нужно месте разместить следующий код:

<div id='beforeafter1'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

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

Между прочем, если у Вас есть несколько таких сравнений, то есть отличное решение - нужно добавить всего одну строчку в код перед </head>. Нужно скопировать и изменить номер блока beforeafter. То есть был только beforeafter1, а теперь появиться beforeafter2, beforeafter3 и тд. Код для двух сравнение будет выглядеть так:

HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : false});
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : false});
});
</script> 

А страница сообщение будет иметь следующий код:

<div id='beforeafter1'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

<div id='beforeafter2'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

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


На этом всё. За скрипт спасибо CatchMyFame, а всем остальным спасибо, за то что прочитали. Ваши вопросы по работе скрипта пишите в комментах. До скорого!

Всем привет!  Как говориться, праздник к нам приходит, а что более звучно мне - свято наближається! Это я к чему - сегодня у меня новогодний пост, который посвящен необычной странице-поздравления. Никакого flash, только передовые технологии js, css и html! А что самое главное - это под силу каждому!

Пример 1 Пример 2
Пример 3 Пример 4

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

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

JavaScript- код

/**
 *
 * Скрипт новогоднего праздника xD
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Идея Script Tutorials
 * http://www.script-tutorials.com
 * 
 * Адаптация
 * http://www.ipetrenko.ru 
 */

// canvas and context objects
var canvas, ctx;

//Snowflakes object
Snowflakes = (function () {

    // sprites information
    var sprCnt = 15;
    var sprWidth = 80;
    var sprHeight = 68;

    // arrays of snowflakes and sprites
    var snowflakes = [];
    var snowflakeSprites = [];

    // other inner params
    var minScale = 0.2; // min scale for flakes
    var maxScale = 1.2; // max scale for flakes

    var minVerticalVelocity = 2; // min vertical velocity
    var maxVerticalVelocity = 5; // max vertical velocity
    var minHorizontalVelocity = -2; // min horizontal velocity
    var maxHorizontalVelocity = 3; // max horizontal velocity

    var minOpacity = 0.1; // min opacity
    var maxOpacity = 0.9; // max opacity
    var maxOpacityIncrement = 60; // opacity increment

    // every flake swings in the interim between next deltas:
    var minHorizontalDelta = 1;
    var maxHorizontalDelta = 4;

    var speed = 2; // speed

    // get random number between x1 and x2
    function getRandom(x1, x2) {
        return Math.random() * (x2 - x1) + x1
    }

    // initialize sprites
    function initializeSprites() {
        var img = new Image();
        img.onload = function () {

            // fill snowflakeSprites with every sprite of sprite.png
            for (var i = 0; i < sprCnt; i++) {
                // create new canvas
                var sprite = document.createElement('canvas');
                sprite.width = sprWidth;
                sprite.height = sprHeight;
                var context = sprite.getContext('2d');

                // and draw every sprite at this canvas
                context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);

                // and fill array
                snowflakeSprites.push(sprite);
            }
        }
        img.src = 'http://nwo.ucoz.ua/demo/ny/sprite.png';
    };

    // initialize snowflakes
    function initialize(number) {
        // initialize sprites
        initializeSprites();

        // prepare a necessary amount of snowflakes
        for (var i = 0; i < number; i++) {
            snowflakes.push(initializeSnowflake());
        }
    };

    // initialize snowflake
    function initializeSnowflake() {
        // get random scale
        var scale = getRandom(minScale, maxScale);

        return {
            x: Math.random() * ctx.canvas.width, // x and
            y: Math.random() * ctx.canvas.height, // y positions
            vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
            hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
            o: getRandom(minOpacity, maxOpacity), // opacity
            oi: Math.random() / maxOpacityIncrement, // opacity increment
            mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
            hd: 0, // horizontal delta
            hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
            sw: scale * sprWidth, // scaled sprite width
            sh: scale * sprHeight, // and height
            si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
        }
    };

    // move flakes
    function moveFlakes() {
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];

            // shift X and Y position
            osf.x += (osf.hd + osf.hv) * speed;
            osf.y += osf.vv * speed;

            // swings             
            osf.hd += osf.hdi;
            if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
                osf.hdi = -osf.hdi;
            };

            // collision with borders
            if (osf.y > ctx.canvas.height + sprHeight / 2) {
                osf.y = 0
            };
            if (osf.y < 0) {
                osf.y = ctx.canvas.height
            };
            if (osf.x > ctx.canvas.width + sprWidth / 2) {
                osf.x = 0
            };
            if (osf.x < 0) {
                osf.x = ctx.canvas.width
            };

            // toggle opacity
            osf.o += osf.oi;
            if (osf.o > maxOpacity || osf.o < minOpacity) {
                osf.oi = -osf.oi
            };
            if (osf.o > maxOpacity)
                osf.o = maxOpacity;
            if (osf.o < minOpacity)
                osf.o = minOpacity;
        }
    }

    // render frame
    function renderFrame() {

        // move (shift) our flakes
        moveFlakes();

        // clear content
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // draw each flake
        for (var i = 0; i < snowflakes.length; i++) {
            var osf = snowflakes[i];
            ctx.globalAlpha = osf.o;
            ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
        }
    }

    return {
        'initialize': initialize,
        'render': renderFrame,
    }
})();

// main initialization
function initialization() {

    // create canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // set canvas size - fullscreen
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    // loop main scene
    setInterval(Snowflakes.render, 40);
    Snowflakes.initialize(100);
}

// window onload event handler
if (window.attachEvent) {
    window.attachEvent('onload', initialization);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            initialization();
        };
        window.onload = newonload;
    } else {
        window.onload = initialization;
    }
} 

Сохраните этот код в файле под названием script.js. Кстати, какой редактор Вы используете? Я ранее уже советовал три крутых редактора для вебмастера. Если сохраните спрайт себе на хостинг, то не забудьте поменять в вышеизложенном коде адрес картинки, который помечен красным, то есть это http://nwo.ucoz.ua/demo/ny/sprite.png.

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

CSS-код

* {
    margin: 0;
    padding: 0;
}
body {
    overflow:hidden;
    background: url("http://nwo.ucoz.ua/demo/ny/christmas_tree1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Сохраняем этот код в файле под названием main.css. Опять таки, если захотите сохранить себе картинку или у вас будет своя - не забудьте поменять адрес изображения!

А теперь нам остается лишь всё это "сложить в одну коробку". Наша страница index.html будет содержать следующий код.

HTML-код

<!DOCTYPE html>
<html lang="ru">
  <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Новогоднее поздравление 2016 в HTML5 </title>
        <link rel="stylesheet" href="http://nwo.ucoz.ua/demo/ny/main.css" type="text/css">
        <script src="http://nwo.ucoz.ua/demo/ny/script.js"></script>
    </head>
    <body>
        <canvas height="667" width="1360" id="panel">Сорян, ваш браузер не поддерживает HTML5 ;(</canvas>
    </body>
</html>

Как Вы заметили, файлы index.html, main.css, script.js  должны лежать в одной директории - учтите это. Вот и всё, айда смотреть результат! Кстати, а что у Вас получилось? Кидайте ссылки в комментарии ниже - посмотрим, на что у вас хватит фантазии. 


До новых встреч, йо-хо-хоу
Идея Андрю, автора Script Tutorials

Австрийский программист Алекс Джей Чемпендард (Alex J. Champandard) создал очень занимательного бота, который может превратить селфи или любого другое фото в искусство!

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

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

Судя по результатам других пользователе процесс занимает от 20 минут до суток.
Апдейт: спустя два часа после отправки твита я получил свою картину! При ее "писании" бот использовал методы Анри Матисс. Что же вышло? Смотрите ниже первый твит ;)

@Igor_Petrenko Here’s my #DeepForgery using methods of Henri Matisse from approx. 1905. https://t.co/FRGFw2C80z pic.twitter.com/e7Hb7kwiHO

— The Deep Forger (@DeepForger) 30 ноября 2015

@HammBoned Voilà my #DeepForgery avec the style of Vincent van Gogh at around 1889. https://t.co/EV2vqStGGt pic.twitter.com/lbJiYuTUyb

— The Deep Forger (@DeepForger) 30 ноября 2015

@kgnkl This is my #DeepForgery avec methods from Edgar Degas from approx. 1879. https://t.co/7ojsXPsfae pic.twitter.com/LnPeI3uuLq

— The Deep Forger (@DeepForger) 30 ноября 2015

@jj_ap It’s my #DeepForgery with techniques from Katsushika Hokusai at ca. 1830–32. https://t.co/QRlOS3XUre pic.twitter.com/yYKNLLS3IZ

— The Deep Forger (@DeepForger) 30 ноября 2015

@Pyrofoux Voilà your #DeepForgery avec methods by Pablo Picasso from ca. 1925. https://t.co/CDjxipimi9 pic.twitter.com/FhZ6PBOHAZ

— The Deep Forger (@DeepForger) 30 ноября 2015

@aanand voila my #DeepForgery with techniques of Pablo Picasso at approx. 1959–60. https://t.co/oS9cUB4QZL pic.twitter.com/uQKosK4nHC

— The Deep Forger (@DeepForger) 30 ноября 2015

Всем привет!
Сегодня утром я получил рассылку от форума SbUP, где увидел топик о том, что партнерская система опциона Binomo - BinPartner начала мегаконкурс с бюджетом более чем 20 тысяч долларов, а может и больше будет, в зависимости от результата конкурса для партнеров. И у тех кто любит порассуждать тоже есть шанс выиграть неплохие деньги.

Давайте для начала разъясним, что такое опцион.
Опцио́н (лат. optio — выбор, желание, усмотрение) — договор, по которому покупатель опциона (потенциальный покупатель или потенциальный продавец базового актива — товара, ценной бумаги) получает право, но не обязательство, совершить покупку или продажу данного актива по заранее оговорённой цене в определённый договором момент в будущем или на протяжении определённого отрезка времени. При этом продавец опциона несёт обязательство совершить ответную продажу или покупку актива в соответствии с условиями проданного опциона. Опцион — это один из производных финансовых инструментов. Различают опционы на продажу (put option), на покупку (call option) и двусторонние (double option). Опционы и фьючерсы во многом сходные финансовые инструменты, но имеют некоторые принципиальные отличия (информация взята с ru.wikipadia.org). А больше инфы можно узнать загуглив "опционы простыми словами"

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


Но зато нас там ожидают «вкусные» проценты: работая по реферальной программе, Вы привлекаете таких же партнеров в Binpartner.com, которые в свою очередь тоже могут привлекать других партнеров или клиентов. По этой схеме, Вы получаете 5 % от дохода Вашего реферала. Привлекая клиентов в Binomo.com (сам опцион), Вы получаете 7 % от стоимости каждого опциона Вашего трейдера. И считается, что нормальным доходом для вебмастера является 5к долларов. Неплохо, да?

Мною были прочитаны практически все существующие обзоры представленные в рамках этого конкурса, и я заметил, что все выделяют практически идентичные «плюсы» системы: большое количество промо-материалов (я таковых порядка 93-х насчитал) и множество видов вывода денег.

Я с этими позитивными моментами соглашусь – это крутые и полезные вещи, которые ИМХО должны быть на каждой уважающей себя финансовой партнерке. Но самым главным плюсом для меня является легальность всё экосистемы Binomo – всё регулируется законами РФ, а в частности имеется ЦРОФР.

Теперь непосредственно к обзору партнерки BinPartner.

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

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

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

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

В одном из обзоров я заметил, что минусом можно считать отсутствие раздела для новичков, но возражу – страница FAQ отвечает практически на все интересующие вопросы и меня как новичка устроила. А если еще остались проблемы с пользованием, то можно написать в скайп или на «мыло».

Дизайн главной страницы

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

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

Дизайн письма email-рассылки (смотреть в высоком качестве)

Также меня не устроил дизайн email-рассылки – он выглядит не очень красиво.
Во первых – выравнивание текста: по центру основной текст лучше не размещать, а сделать привычное всем левое выравнивание. А вот логотип вместе с заголовком можно и даже нужно по центру поместить.

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

Для меня решающим фактором при написании этого материала в рамках конкурса, стали отзывы про Binomo. И можете сами их посмотреть:

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

В конце предлагаю посмотреть смешной ролик о погоне и Марке

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

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

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

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

Запасаемся словарями и онлайн переводчиком, вебмастера ;)