D.iK.iJ
©  2006-2016 - сайт автора
 
 Ссылки Поиск Написать В избранное NO

От дикого автора

         Приветствую вас на сайте dikij.com, мой дорогой посетитель.
         Многие знают меня по нику D.iK.iJ и здесь я храню свои фотографии и фантастические рассказы, веду блог и отвечаю на комментарии. Ну и различные эксперименты по заработку, продвижению, забавные и полезные скрипты и PHP программы тоже нашли место на этом сайте.
         Гуляйте по тайным комнатам, пишите на стенах... только не теряйтесь! И возвращайтесь живым и целым Человеком.
         Интересует, что пишут о сайте? (RSS, Email). Еще можете почитать новое на N.M. И глянуть новости дня и отрывки из рассказов.
         Also, the English version of the site.

Последнее из блога

       

         Или различие между медиа-запросами @media screen and (max-width: 775px) и @media (max-width: 775px).

(29.09.2016 blogger) Адаптация сайта tr-pl.ru - Работа на да адаптивным дизайном - в процессе

         Это немного забавный вопрос, так как адаптивным дизайном я занимаюсь уже года два. Но так привык писать @media screen and (max-width, что никогда не обращал особого внимания на вариант записи в примерах от Гугла: @media (max-width. И, как оказалось, зря не обращал. Это довольно интересно.
         Начнем с того, что существует целая гора медиа-запросов и медиа-функций. Например, вот такая запись @media all and (orientation: landscape) - стили для всех устройств с альбомной ориентацией. Но, так как я всегда ориентируюсь от ширины экрана, я продолжал использовать удобное @media screen and (max-width - стили применяются для устройства с шириной экрана 775px и ниже.

         В чем же отличие более короткого @media (max-width: 775px)?
         Сегодня, работая над заказом по адаптивной верстке сайта tr-pl.ru был найден довольно простой ответ, стоивший определенной задержки в работе.
         Эти стили не отображаются при уменьшении окна браузера. Они работают только на (мобильном?) устройстве или его эмуляции.
         Получается, что это ну о-о-очень круто, но, при этом, довольно бесполезно. Это я скажу сразу, как любитель просматривать сайты в отдельном узком окне в браузера. Но оно поможет тем, кто ни в коем случае не хочет показывать «мобильную» или «планшетную» версию на десктопе (большом экране стационарного компьютера). Даже если она не входит в окно браузера.
         И еще одно. В примере не зря использована ширина в 775 пикселей. Это моя любимая ширина экрана, примерно отделяющая все мобильные устройства (включая Айпад в вертикальном положении) от нормальных планшетов и портативных компьютеров.
         Ведь жутко бесит, когда у тебя кран шириной больше 2000, но тебе постоянно показывают мобильную версию под экран 320 - 350px. Для этого есть резиновая верстка

       

         Ни для кого не секрет, что есть разные партнерские программы. Например, партнерка от Озона, для которой можно использовать стандартный JavaScript или перевести Крутилку на PHP. А не так давно я сделал для нее адаптивные стили, чтобы товары хорошо отображились на мобильных устройствах.
         Некоторые уточнения.
         Я использовал прозрачные блоки с черным текстом, когда товары идут друг под другом (фотографии слева, а кнопки купить - справа).
         Также, Крутилка выводится на PHP.
         Внешние ссылки выделены на CSS.
         
/* Озон */
.OzonRev_tbMax {margin-bottom: 15px;}
img.OzonRev_border0 {height: 15px !important;}
div.OzonRev_logo > a {background: none !important; padding-right: 0px !important; border-bottom: 0px !important;
.OzonRev_skin_12 .PartnHead .PartnHeadLogo > a {background: none !important;}
.OzonRev_skin_0 .PartnHead .PartnHeadLogo > a {background: none !important;}
.OzonRev_pad5_1 a {border-bottom: 0px !important; background: none !important; padding-right: 0px !important;}
.OzonRev_skin_12 a.OzonRev_detailName {background: none !important; padding-right: 0px !important;}
.OzonRev_skin_0 a.OzonRev_detailName {background: none !important; padding-right: 0px !important;}
a.OzonRev_podrLink {background: none !important; padding-right: 0px !important;}
td.OzonRev_tdPic {width: 90px !important; max-width: 90px !important; padding-right: 10px; padding-bottom: 10px;}
td.OzonRev_tdPic a img {width: auto !important; max-width: 100% !important; height: auto !important; max-height: 120px !important;
td.OzonRev_tdDetail {width: auto !important;}
td.OzonRev_tdSale {width: 112px !important;}

@media screen and (max-width: 500px) {
td.OzonRev_tdPic {display: block !important; float: left !important;}
td.OzonRev_tdDetail {display: inline !important;}
td.OzonRev_tdDetail a {word-break: break-word !important;}
td.OzonRev_tdSale {width: 100% !important; display: block !important; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 15px !important; clear: left !important; margin-top: -10px !important;}
.OzonRev_skin_12 div.OzonRev_priceTitle {display: inline-block !important; width: auto !important;}
.OzonRev_skin_12 div.OzonRev_priceValue {display: inline-block !important;}
.OzonRev_skin_0 div.OzonRev_priceTitle {display: inline-block !important; width: auto !important;}
.OzonRev_skin_0 div.OzonRev_priceValue {display: inline-block !important;}
.OzonRev_pad5_1 {display: inline-block !important; padding-top: 0px !important; height: 23px !important; vertical-align: middle !important; padding-bottom: 7px !important;}
img.OzonRev_imgBay {width: 24px !important;}
}

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

       

         Так как работы много, я стараюсь обновлять портфолио по адаптации порциями. Но не так давно я обновил свои старые сайты и просто решил похвастаться. Например, вот logopediya.com, на которой теперь «тянущийся» адаптивный «дизайн» на чистом CSS. Переработал все блоки, рамки и тени.

(08.09.2016 blogger) «Резиновая» верстка для старых сайтов - На примере logopediya.com

         Зачем же пытаться сделать адаптивный дизайн еще и «резиновым»? Да, такое вот масло масляное получилось.
         Но дело в том, что я очень много работаю с фиксированными сайтами и обычно переделываю их для всех разрешений с 775px и ниже. Это позволяет на Айпаде «вертикально» получить «мобильную» версию, а «горизонтально» - полную. Ну и комфортно использовать сайт на мобильных устройствах меньшего размера. (Про проверки в Яндексе и Гугле я вообще молчу. Их при определенной сноровке можно пройти за пару минут, хоть и проходят они примерно на 350 пикселях).
         Конечно, всегда есть вариант - выдавать адаптивную версию при ширине экрана 800 или даже 1024 пикселя, но обычно это не очень красиво. Да и не имеет особого смысла для планшетов с большим экраном. Но вот если получается дополнительно сделать сайт тянущимся с ширины шаблона и до 775 пикселей, это просто замечательно! Тогда мы охватываем все 100% разрешений и устройств. Допустим, 1100px в шаблоне и ниже.
         А так как удобный сайт просто обязан быть зафиксирован на определенной ширине (это удобно при большом мониторе) сайт все еще отлично выглядит и для высоких разрешений.

         Приведу пару примеров, где я делал фиксированный сайт тянущимся при определенной ширине, а уже потом переходил на адаптивную (ну или «мобильную») версию:
         video-grup.ru - по желанию заказчика - полностью переделан под резиновую верстку.
         taxiairport.ru - адаптивные слайдеры, «резиновый» шаболон при помощи CSS, подправлен под популярные iOS устройства.
         contlease.ru - еще один вариант, где сайт при уменьшении ширины становится «резиновым».

       

         Такие вот новости. Я понимаю, что далеко не все используют старенький счетчик от Рамблера вместе с Заставками в «мобильной рекламе» от Гугла, но глюк очень неприятный. Для начала, его довольно трудно обнаружить.

(28.08.2016 blogger) Тест объявлений уровня страницы Google - Заставки

         Вот вчера я захожу в статистику и вдруг понимаю, что объявления внизу экрана на мобильных у меня показываются, а вот заставки - нет. причем, был только один показ заставок на 20 000 посещений. Пытаюсь вызвать рекламу через #googleads (попутно разрешая новые стили через CSP) но ничего не получается. Нет, ссылки обводятся нормально, да только при клике по ним не происходит абсолютно ничего.
         Начал искать виновного. Проштудировал справку, даже грешил на свои собственные скрипты и стили. Но быстро понял, что все дело в футере и счетчике от Рамблера. И если убрать скрипт, оставив только картинку счетчика, все начинает работать.
         Немного грустно, конечно, отказываться от счетчика Рамблера, но это - совсем уж серьезная ошибка, грозящая падением дохода.

       

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

(27.08.2016 blogger) Подключаем автоматические Пуш уведомления к сайту - Из RSS ленты

         Смысл тут прост. От SendPulse на сайт подключается всего один JavaScript файл, который предлагает человеку подписаться на рассылку (я выбрал стандартное оповещение в левом верхнем углу).
         В итоге, пользователю приходит оповещение в правом нижнем углу браузера, которое соответствует посту в ленте. А по клику - можно перейти в этот пост. Причем, при некоторых технологиях Пуша браузер даже не обязательно должен быть запущен.
         Классная современная штука, работающая на HTTPS сайтах вообще - 1 кликом. Жаль, для каждого браузера - очень разные стандарты. И сделать такой сервис самому - слишком сложно. А вот подключить можно бесплатно и всего за пару минут.
         Посмотрим на результаты. Кстати, у СендПульс там еще есть бесплатные Email рассылки. И по ссылке выше они дают скидку на их платную версию. Ну и 5 долларов на счет в месяц - при использовании Push.

       

         Но хоть я и немного в шоке, начну издалека.

(26.08.2016 instagram, blogger) Почему автор должен платить за контент - Или как умные ленты и поведенческие убивают сайты и группы

         Про смерть литературы
         Так уж получилось, что литература долго и упорно загибается из-за пиратов. Да, это может быть весело – скачать книжку бесплатно. Но многие пираты уже сами не рады, что бумажная книга стала стоить от 600 рублей до 1000. Ну а что? Издательство тоже жить хочет. И им плевать, будет это 6000 книг по 100 рублей или 1000 книг по 600. Тиражи-то упали. А продажи электронных книг – просто смехотворны. Даже если их продает сам автор. Даже если он очень и очень известен. Например, как Лукьяненко.
         Чего уж там говорит, даже мой безобидный скрипт разошелся 450 копиями после 1 продажи. А сейчас Яндекс находит тысячи результатов по его названию. Но это хоть скрипт. У него есть обновления, техподдержка, новые версии. А что делать с книгой? Ну... не писать ее, например. Этот вот блог давно и успешно поддерживает автора в трудное время. А книга? Уже лет 10 лежит в ящике стола. Ну и второй вариант – это писать бесконечные сериалы. Пограничье, Метро, Дозоры, Сталкер...
         И что мы получаем в итоге? Если автор не графоман, ему лучше писать обзоры, статьи, мануалы, сценарии и инструкции. И не соваться в литературу. Но и тут нас ждет сюрприз.

         Как заставляют авторов платить за свой же контент
         Все началось с одной статьи с анализом действий Яндекса и его фильтров за продажу ссылок. Автор писал, что сайт после снятия ссылок действительно выходит из-под фильтра, но потом очень сильно падает в поиске. Нет, не сразу, но очень ощутимо. И получается, что «Минусинск» просто вынуждает перераспределять SEO бюджеты с покупки ссылок (которые якобы больше не работают) на покупку рекламы в Директе.
         И тут до меня дошло.
         Да, я уже давно привык, что поисковые системы зарабатывают миллионы на чужом контенте. Но сейчас все еще круче! Есть ведь умная лента Вконтакте. Аналогичная ерунда есть и в Фейсбуке. И это все. Конец для мелких сообществ. У тебя может быть тысяча подписчиков, но они не увидят твои новости. Даже если публиковать их по 50 штук в день, человеку будет показываться «сначала интересное». А это разные смешные записи крупных сообществ, набравшие 20 – 30 000 лайков.
         И чтобы это изменить, нужно КУПИТЬ РЕКЛАМУ! Ага. Купить. Рекламу. Чтобы повысить охват и количество взаимодействий с пабликом или группой. И тогда твои новости будут показываться твоим же подписчикам... и даже иногда – бесплатно.

         Ну а поисковики?
         Тут все очень похоже. Есть такие знаменитые поведенческие факторы. Больше кликают на сайт, сайт будет выше в поиске. Сам проверял. И единственный легальный способ их повысить – купить рекламу в Директе. Тадам. Плевать на ссылки, плевать на возраст домена и полезность. Заплатил – получил посетителей.
         Вот так автор и вынужден платить за свой же контент. И никуда не деться. Плати, чтобы к тебе пришли и хоть что-то прочитали. А реклама на сайте будет висеть от тех же поисковиков. Она занимает кучу места (а не как продажные ссылки – 1 строку в подвале) мозолит глаза и приносит копейки.
         Шах и мат, производители контента и авторы. Не нужны вы абсолютно никому. Ну, кроме пиратов.

       

         Так как вопросов много, я решил добавить FAQ по скрипту. Подробнее описать установку и тестирование. Сам скрипт автоподписки - тут.

         0) Смысл скрипта - перемещение официальных кнопок соцсетей в невидимом слое за курсором. После клика фрейм с кнопкой закрывается и ставится куки.

         1) Чтобы скрипт работал, достаточно добавить в него виджет нужной соцсети, а потом вставить скрипт в шаблон сайта после BODY (желателно, как можно выше).

         Например, инструкция для Фейсбука:
         // Создаем виджет вашей группы на Фейсбук.
         // Указываем ему ширину и высоту 200, СНИМАЕМ ВСЕ галочки.
         // (Сейчас очень часто код не работает, если не создано приложение на фейсбуке. Тогда при создании виджета у него будет appId).

         2) Нужно удалить лишние теги (html, body) сверху и снизу. Они нужны, чтобы можно было протестировать скрипт, просто загрузив его на сайт и изменив расширение.

         3) У скрипта есть РЕЖИМ ОТЛАДКИ. В нем видно передвигающийся за курсором блок и скрипт срабатывает при каждой перезагрузке.

         В div id="podpiska" нужно заменить opacity: 0; на opacity: 1;
         и
         if(document.cookie.indexOf("vkgr8=off") == -1) {
         на
         if(document.cookie.indexOf("vkgr8=off 123") == -1) {

         (В каждом скрипте - разный номер куки. От vkgr1=off до vkgr10=off).

         4) Установка репостов - не сложнее.
         Открываем podpiska-repost-text.txt и добавляем туда нужную дла репоста запись - по инструкции внутри.
         Потом меняем расширение у podpiska-repost-text.txt на PHP и закидываем в корень сайта.

         После этого скрипт из podpiska-repost.txt вставляется в шаблон сайта.