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

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

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

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

       

         Как вариант - Адаптивное меню на 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);
setTimeout('$("#zakr").css("display", "block");', 1000);
$("body").css("overflow", "hidden");
});
$("#zakr").click(function () {
setTimeout('$("#leftmenu").css("display", "none"); $("body").css("overflow","auto");', 1000);
$("#leftmenu").css("left", "-100%");
$("#zakr").css("display", "none");
});
</script>

<style>
#leftmenu {float: none !important; margin: 0px; padding: 0px; width: 100% !important; max-height: 100%; height: 100%; overflow: auto; position: fixed; display: none; background-color: #fff; top: 0px; left: -100%; right: 0px; z-index: 201; -webkit-transition: left 1s; -moz-transition: left 1s; -o-transition: left 1s; transition: left 1s;}
#buter {border: 1px solid #dfe6e8; opacity: 0.9; width: 32px; height: 23px; cursor: pointer; background: url('buter.png') center no-repeat; display: block !important; padding: 6px; position: fixed; top: 0px; left: 0px; z-index: 200; background-size: 32px 23px !important; background-color: #fff; border-radius: 0 3px 3px 0;}
#buter:hover {opacity: 1 !important;}
#zakr {z-index: 99999990 !important; cursor: pointer; color: #db3029; position: fixed; right: 2%; top: 1%; padding: 0; font-size: 25px; line-height: 25px}
#zakr:hover {color: #ff0a00 !important;}
</style>

         Отличный вариант для применения - трехколоночный (табличный или блочный) сайт, когда при адаптации левая колонка меню идет выше контента. Хотя, именно такое фиксированное меню «бутерброд» подходит не для всех сайтов.
         А еще, код можно сделать в 10 раз короче, используя $("#leftmenu").slideToggle("slow"); (или другие специальные функции) - он умеет и сворачивать и разворачивать блоки, но делает это сверху вниз. В принципе, отличное решение. Но я, по привычке, пользовался анимацией CSS и таймерами, как делаю это в JavaScript.



       

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

(19.11.2016 blogger) Родила царица в ночь... - ...дочь родила, да.

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



       

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

(10.11.2016 blogger) Адаптивный дизайн - Для designstickers.ru

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

         Решения для проблемы - по возрастанию вероятности
         1) Добавить td ячейкам width: 100%; так как иногда в таблицах указывается собственная ширина колонок. И высота, кстати, тоже.
         2) Прописать стили для остальных элементов таблицы: table {display: block;} tbody, tr {display: inline;} Не полностью уверен в причинах влияния table и tbody, так как встречалось редко, но вот tr (строки таблицы) довольно часто мешают. Особенно при td {display: inline-block;}

         3) td {display: block; float: left; width: 100%;} - оказался рабочим вариантом сегодня. Именно float: left позволил ячейкам таблицы нормально переноситься друг под друга.

         4) Экзотический вариант с table {position: relative;} td {position: absolute;} - слишком много мороки.
         Если бы то были какие-то мелкие кнопки, можно было еще применить к ним абсолютное позиционирование внутри table или вообще - всей страницы. Но с текстом это не очень удобно.
         Единственный подходящий случай - если есть текст и картинка, а нужно вывести картинку и текст, поменяв их порядок местами. Но и там position: absolute применяется только к 1 элементу, а второму блоку просто добавляется отступ.

         5) <!DOCTYPE html> - последний шанс. Если глюк все еще не удается победить, стоит попробовать прописать правильный доктайп в самом начале страницы. Должно помочь.



       

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

(21.10.2016 blogger) Проверьте, насколько мобилен ваш сайт - Узнайте, удобно ли работать с сайтом на мобильных устройствах.

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



       

         Или различие между медиа-запросами @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 - еще один вариант, где сайт при уменьшении ширины становится «резиновым».