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

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

Обзор на DOOGEE X5 Max Pro - Бюджетный смартфон на Android 6.0 до 5000 рублей

     

         Не так давно я решил сменить свой старенький Буст и купил DOOGEE X5 Max Pro


         ОС: Android 6.0
         Экран: 5" (720 x 1280)
         Размеры: 73,2 x 143 x 10,8. Вес: 193 гр.
         Емкость аккум. (мА·ч): 4000
         Процессор: 1300 МГц. MediaTek MT6737
         Память: 16 ГБ. Оперативная память (Мб): 2048.
         Поддержка 2 SIM-карт и 4G.

        &nbs...

     

         Как вариант - Адаптивное меню на JavaScript и CSS - с работающим примером. Тут же я решил опубликовать Жиквери версию. Причем, сам я обычно делаю скрипт чуть проще, размещая кнопку закрытия прямо в блоке с левым меню.
         <div id="buter" style="display: none;" onclick="buter();"></div>
<div id="zakr" style="display: none;" onclick="zakr();">X</div>

<script type="text/javascript">
$("#buter").click(function () {
$("#leftmenu").css("display", "block");
setTimeout('$("#leftmenu").css("left", "0px");', 100);
setTi...

Родила царица в ночь...

     

         ...дочь родила, да. Второй день уже дома.


         Как-то даже странно писать в блог личные посты. давненько я этого не делал. Но повод есть. Жена 15 числа, почти в полночь (и полнолуние, да) родила мне дочь. А 18 я их забрал из роддома уже.
         Эх, знать бы, что там отдельный цирк с фотографированием, растянувшийся на час, приехал бы раньше. Но самое важное, что они обе сейчас дома в такую погоду. -30 на улице. Тут я должен был долго ворчать, что роддом - это вообще не самое удачное место для фотографий. Как и любая больни...

Когда не работает td display: block

     

         Пока жену третий раз возвращают из роддома, я работаю над адаптивным дизайном разных сайтов: http://dikij.com/wm/adaptaciya-saytov.php


         Сегодня был интересный случай с магазином designstickers.ru.
         Когда я приступил к проверке на кроссбраузерность, то быстро заметил, что td {display: block;} просто не работает в половине браузеров. Например, в Edge, IE 11, Сафари и Фаерфоксе. И это было очень странно, так как делать ячейки блоками - один из стандартных (для меня) способов адаптации таблиц под мобильные устройства. ...

Проверьте, насколько мобилен ваш сайт

     

         Узнайте, удобно ли работать с сайтом на мобильных устройствах и компьютерах:


         Ну, testmysite.withgoogle.com - это не совсем новый инструмент. Он копирует Google PageSpeed, только выводит результаты в виде красивой презентации, да и отчет может отправить на почту. И мне все еще интересно - почему они не включили туда инструмент проверки удобства на мобильных устройствах, который отлично показывает запрещенные к индексации файлы.
         Но, в принципе, свою задачу он выполняет. Создает красивую презентацию с примерами и пр...

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

     

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


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

     

         Ни для кого не секрет, что есть разные партнерские программы. Например, партнерка от Озона, для которой можно использовать стандартный JavaScript или перевести Крутилку на PHP. А не так давно я сделал для нее адаптивные стили, чтобы товары хорошо отображились на мобильных устройствах.
         Некоторые уточнения.
         Я использовал прозрачные блоки с черным текстом, когда товары идут друг под другом (фотографии слева, а кнопки купить - справа).
         Также, Крутилка выводится на PHP.
    &n...

«Резиновая» верстка для старых сайтов

     

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


         Зачем же пытаться сделать адаптивный дизайн еще и «резиновым»? Да, такое вот масло масляное получилось.
         Но дело в том, что я очень много работаю с фиксированными сайтами и обычно переделываю их для всех разрешений с 775px и ниже. Это поз...

Счетчик Rambler Top 100 блокирует объявления уровня страницы от Google

     

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


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

Подключаем автоматические Пуш уведомления к сайту из РСС ленты

     

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


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

Почему автор должен платить за контент? Или как умные ленты и поведенческие убивают сайты и группы

     

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


         Про смерть литературы
         Так уж получилось, что литература долго и упорно загибается из-за пиратов. Да, это может быть весело – скачать книжку бесплатно. Но многие пираты уже сами не рады, что бумажная книга стала стоить от 600 рублей до 1000. Ну а что? Издательство тоже жить хочет. И им плевать, будет это 6000 книг по 100 рублей или 1000 книг по 600. Тиражи-то упали. А продажи электронных книг – просто смехотворны. Даже если их продает сам автор. Даже если он очень и очен...

     

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

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

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

         Например, инструкция для Фейсбука:
  ...

Львы оборотни

     

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


Автор: #ФрикаДелька ну или просто Del Kon, раз я уже не зол.
         Я даже и не знаю - как и зачем мне объяснять происходящее на рисунке. Лучше уж допишу со временем роман про оборотней и все станет понятно. Или, для начала, напечатаю то, что уже написано. Хотя, брат должен быть в курсе, что тут Кэрри и Майк Кэрвер (оборотни, похожие нальвов) ...

Новая порция мобильной адаптации сайтов

     

         Добавил в портфолио по мобильной адаптации новые сайты, над которыми работал последнее время:
         • ladnydom.ru - мобильная версия для поставщика строительных материалов.
         • bobfilm1.net - была переделана была как версия для обычных пользователей, так и для зарегистрированных.
         • babystart.com.ua - адаптивный дизайн для детского магазина.
         • profnastil.com - два сайта по профнастилу на одном шаблоне. Переделал оба п...

Все иконки для сайта - целый зоопарк

     

         Что-то больно много развелось различных иконок, которые разные операционные системы требуют от сайта. Вот понимаю, раньше был только фавикон. Загрузил в корень сайта favicon.ico и все. Можно даже в хедере страницы не прописывать. Браузеры и поисковые системы сами картинку подтянут.
         Потом разные умельцы стали вместо статичной картинки прописывать путь к гифке с анимацией. И часть браузеров даже эту анимацию показывало.

         Но все испортил Эппл со своими постоянно меняющимися требованиями. Для начала, их браузер стал засып...

Парк бабочек Екатеринбург

     

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



Альбом в Контакте
«24.06.16 Парк бабочек Екатеринбург»
         Не знаю как там Сашке и Алене, а мне этот парк очень даже понравился. Да, это не парк бабочек в Тайланде (хотя, пауков там было явно больше) но и тут есть чем заняться с ребенком и что посмотреть. А во втором помещении у них вообще - контактный зоопарк с козами, кроликами, морскими свинками и даже дикообразом. Но вот именно его я бы ру...

Перекрыли крышу на доме

     

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


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

Варианты реализации мобильной версии сайта (адаптивного дизайна)

     

         100 / 100 Удобство для пользователей - Google PageSpeed Insights


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

         1) Это мобильная версия на субдомене. В принципе, это будет отдельным сайтом. И он может быть как привязан к основному сайту, так и иметь собственное наполнение (что, думаю, не рекомендуется ни одним поисковиком и пользователями).
         Мне самому данн...

«Объявления уровня страницы» - новая мобильная реклама от Гугл Адсенс

     

         Не так давно я зашел в аккаунт Google Adsense и увидел там объявление о новом формате мобильной рекламы. Было всего два варианта и всего один код.
         Я решил добавить этот код на все страницы:


         Тут есть как фиксированные объявления (в нижней части страницы) так и заставки при смене страницы. Да и показывается эта реклама не всем посетителям, а выборочно.
         Думаю, стоит попробовать. Хотя, пока на 30 показов - что-то никто еще не кликнул. Например, на 10 показов поиска - 1 клик уже ес...

Влияние адаптивного дизайна на поисковое ранжирование и поведенческие факторы

     

         Сегодня хотел затронуть довольно любопытную для меня тему. Это влияние адаптивного дизайна на количество посетителей. Тема любопытна еще и тем, что заказчики говорят о ней мало, а статистику присылают - еще реже. Хотя, этот пункт (про наличие мобильной версии) встречается во множестве аудитов сайтов.
         Но начать я хочу немного с другого. Началось все с нескольких постов на форуме Серча, где люди отмечали, что потратили кучу времени на ускорение сайта и выполнение рекомендаций по Google PageSpeed Insights, но никаких изменений в выдаче не произошло.
  ...

     

         Я уже писал, что max-width не работает в Firefox и IE 11 для изображений в таблицах, теперь вот решил собрать в одном месте все решения этой проблемы. Пятый раз, правда начинаю писать пост и удаляю случайно.

         1) Прописываем width: 100% изображению. После этого оно начнет корректно ужиматься. Только я советую добавить height: auto. В идеале, можно еще использовать max-width с max-height. И в них указать размер картинки.

         2) Добавить таблице table-layout: fixed. После этого картинки внутри будут корректно ужиматься. ...

Chuwi Hi12 - планшетный пк Windows 10 и Android 5.1

     

         Так как я не очень везучий (или руки дырявые) пришлось купить Chuwi Hi12 - вместо разбитого Chuwi vi10.
         
         Больше всего в покупке помогла распродажа на Алиэкспресс и бонусные баллы. Ииначе мне бы его никогда не купить. Единственное, клавиатуру пришлось заказать у другого продавца. И она пока где-то в пути.
         Это пожалуй, и будет основная «фишка» этого планшета. С ней он превращается в полноценный ноутбук. Хоть и стоит значительно дешевле.
         Особой радост...

     

         Встретил тут на одном форуме код и обсуждения на эту тему. Написал свою версию для примера.
         Так делать не нужно!

@media screen and (max-width: 768px) {
html { width: 100%; height: 150%; }
body { transform: scale(0.5); transform-origin: center top; }
}
@media screen and (max-width: 384px) {
html{width: 100%; height: 175%;}
body { transform: scale(0.25); transform-origin: center top; }
}
         Без использования зума, так как он не кроссбраузерный вообще. Да, мы просто трансформацией уменьшаем весь са...

Адаптивный сайт по ТЗ

     

         Как бы это странно ни звучало, но сайт spasibovsem.ru - первый в моем портфолио по адаптивному дизайну, который сделан четко по ТЗ (Техническое задание на разработку мобильной версии СпасибоВсем.ру).


         Обычно делаю все «наоборот». Начинаю с больших разрешений (от 775px) и постепенно уменьшаю ширину экрана. При этом ведется работа над переносом всех блоков на сайте и их правильным «складыванием».
         Тут же пришлось начинать с «мобильного вида» на 310px, который был прописан в техническом задании. А вот поведение элемен...

     

         Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.
         Это отлично срабатывало при переделке сайтов aliexpressblog.ru и nost.ru этого хватало. А вот в адаптации таблиц на topdealers.ru возникли некоторые проблемы.

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

table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;}<...

Жареные жуки и фрукты из Тайланда

     

         Ну, не все мне писать про работу. Это же, по идее, личный блог! :) Сегодня я расскажу про жареных сверчков из Тайланда, гусениц шелкопряда... и шкаф. Хотя, что рассказывать про шкаф? Купили для детской и собрали.


         Как я уже писал, вместо свадьбы мы отправились в свадебное путешествие в Тайланд. По совместительству - первый выезд за границу для обоих. Да, это была масса впечатлений. А теперь вот очень захотелось освежить воспоминания.
         Для начала, мы заказали и приготовили Tom Kha суп (Том Ка) "Roi Thai" с креветка...

Адаптивные таблицы при помощи только CSS стилей!

     

         Я уже писал про разные способы сделать таблицы адаптивными. При работе с сайтом клуб-лада.рф получилось сделать адаптивную таблицу с горизонтальной прокруткой - только при помощи стилей (на фото - справа внизу).
         Вот пример CSS, который был использован:

table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;}

table tbody {display: table !important;
width: 99.9% !important;}
         Здесь я обвожу таблицу рамкой, чтобы было понятнее, что она не обрез...

Max-width не работает в Firefox и IE 11 для изображений (тег img) в таблицах

     

         При недавней переделке сайта florets.ru возникла потребность очень корректно уменьшать огромное количество фотографий разных размеров.
         Большинство современных браузеров вполне корректно понимают max-width: 100% и уменьшают изображение, если оно не помещается в контейнер. С IE 11 и Firefox такого не происходит. По какой-то причине эти браузеры считают, что max-width: 100% относится к истинной ширине изображения, а не к ширине в контейнере.
         Демка.

         Решение для max-width в Фаерфоксе и...

Делаем мобильный сайт так, чтобы это никто не заметил

     

         При переделке сайта vedmochka.net под мобильные устройства я столкнулся с задачей скрыть рабочую версию от посетителей. Это было связано с высокой посещаемостью портала.


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

<meta name=viewport content="width=1024">
         Этот мета тег принудительно ставит ширину контента 1024 пикселей для мобильных устройств. А на десктопе позволяет уменьшить окно браузера до мини...

Адаптивная верстка таблиц. От мучений к разгрому

     

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


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

Главная, 1,
( 44 )