.
МЕСТО ПОД РЕКЛАМУ
7 Июль 2015

Ресайзинг изображений на PHP img_resize

В продолжение предыдущего поста по оптимизации изображений …
Соответственно, если в коде имеем конструкцию img scr с указанием width — тут есть смысл проверить соответствие width и реального размера картинки, если реальный больше — нужно уменьшить и использовать уменьшенное!
Погуглив, сначала нашел такую библиотеку но прозрачный png она меняла на чёрный, а вот эта функция отработала корректно!

Результат можно глянуть, например на препарате Сиалис онлайн аптеки men-aptekar.ru
При переключении по тумбам раньше Furefox почему то косячил 🙁 — преобразованная браузером картинка отображалась безобразно

теперь ОК

ну и не забываем — чем меньше изображения, тем быстрее откроется страничка!

ОТБОЙ!
функция сохраняет на самом деле в jpg и что интересно — уменьшенная сохранённая jpg получается БОЛЬШЕ чем исходная оптимизированная png!
было png — нужно только уменьшить и сохранить так же ! копаем далее

рубрики: SEO, Полезности, Программирование, Сайтостроение | Комментарии (0)

26 Июнь 2015

Оптимизация изображений optipng

Итак, как следствие предыдущего поста — задача оптимизации png изображений (в моём случае).
Всё действо будем делать прямо на сервере, в моём случае под управлением centos.
1. Ставим optipng — yum install optipng
2. Пишем небольшой скрипт, перебирающий все картинки и запускающий optipng с максимальным сжатием
for i in `find -name '*.png'`; do
optipng -o7 $i
done

3. Запускаем его 🙂

вуаля — картинки оптимизированы

но есть одно небольшое (а может и большое) НО! — Гугл анализатор предлагает ещё изменить размер изображений!

Смотрим код — по факту в тегах либо css у многих изображений заданы параметры отображения width либо height — то есть изображения выводятся уменьшенными, а загружаются то целиком!
Соответственно — смысла в таком действии нет никакого, нужно уменьшать!
Но тут, к сожалению, как автоматизировать сей процесс я не придумал 🙁

рубрики: SEO, Администрирование, Полезности, Сайтостроение | Комментарии (1)

26 Июнь 2015

Инструмент web разработчика PageSpeed Insights

Открыл для себя PageSpeed Insights
Анализ страницы — рекомендации разработчику.
Полезная ИМХО штуковина!
Отдельно спасибо AVK за анализ интернет аптеки на форуме sbup.com

Нужно будет список подобных полезных инструментов составить и на отдельную страничку закрепить (задачка на будущее т.к. пока маловато будет).

рубрики: Сайтостроение | Комментарии (0)

18 Июнь 2015

Новый шаблон для РУ фармы

Да простят меня создатели интернет аптек серии novosibirsk.vip-apteka.org, но больно мне понравился их шаблон.
Решил я взять его на свой новый магазин за основу, адаптировав на движек партнерки Доктор Дик (на мой взгляд самая интересная по ру-фарме, ещё бы побольше курьеров по крупным городам — было бы супер).
Собственно, сегодня закончил первый вариант, готовый для показа.
Вот чего получилось -> novosibirsk.men-aptekar.ru
Более «аляписто» вышло, чем в оригинале — но ИМХО не переборщил … хотя конечно «на вкус и цвет …»

Мне как создателю, пока всё нравится — поэтому буду рад объективной критике!

Далее будет задачка поинтереснее — это поисковое продвижение по препаратам, и с учётом не любви Яндекса к линк-биржам тут нужно сильно позадуматься…
Региональная выдача довольно разношерстная (смотрел Новосибирск), тут и novosibirsk.vip-apteka.org с довольно скромным количеством бэков (да и не сказал бы, что очень качественных), и chudonovosibirsk.ru который вообще непонятно как двигается внешними факторами, и «старички» типа виагра-нск.рф с довольно приличным багажем в виде бэков …

рубрики: Партнерские програмы, Сайтостроение | Комментарии (0)

18 Март 2015

HTTPS для домена. Настраиваем подключение SSL сертификата в NGINX.

Новая задачка — клиент подключает на свой сайт Яндекс.Кассу, а там очень настойчиво рекомендуют для взаимодействия использовать шифрованный протокол https.
Ранее с https я лично не сталкивался (вернее сталкивался но только сугубо в роли пользователя)…
Собственно, живём в замечательную эру веб-технологий — нарыл пару отличных статеек (ссылки внизу).
Если в 2х словах — настраиваем nginx на 443 порт и на этом вроде бы всё — на https запрос сайт отвечает, динамику отдаёт, но нет!
При использовании сгенерированного собственноручно сертификата в разных браузерах получаем ругательные ошибки на соединение:

Mozilla Firefox «Это соединение является недоверенным»
1111

google chrome «ошибка нарушения конфиденциальности»
222

яндекс браузер «Сертификат сайта не является доверенным»,
333

opera «ошибочный сертификат»
444

Internet Exploret ЭОшибка в сертификате безопасности этого веб-узла.»
555

Ответ прост — всем им не понравился мой сертификат, и правильно, ведь я его сам и сделал.
Чтобы подобных предупреждений не было — сертификат нужно приобрести в авторизованных сертификационных центрах. Для шифрования и простой проверки домена (Domain Validation, DV) достаточно базового уровня — и такой сертификат можно получить бесплатно в StartSSL.

P.S.
Плюсом добавлю, что Гугл заявлял о том, что в скором времени защищённость соединения будет положительно учитываться в ранжиновании сайтов для поисковой выдачи.

На этом всё, подробнее в исходных статьях:
1. SSL (https) в Nginx — настраиваем NGINX
2. SSL сертификат для сайта — для чего он нужен и где его взять — тут введение о сертификатах
3. Получаем бесплатный SSL сертификат — тут подробнее о получении бесплатного сертификата

Тузла для проверки SSL сертификата сайта, на примере mega-moda.ru

рубрики: Администрирование, Сайтостроение, Справочник | 2 комментария

16 Декабрь 2014

FireBug сеть — анализ скорости загрузки страницы

Продолжаю мучать интернет магазин корейских обоев.
Сейчас решил посмотреть сайт с точки зрения Запрос-Ответ, скорости отдачи контента и в целом как страничка принимается браузером.

Для этой цели я использовал расширение для браузера FireBug — закладка «Сеть» (см.рис).

site-speed

Сразу же обнаружил косячёк — какого то хрена морда дёргает детальные изображения товара, что конечно же сильно притормаживает отдачу страницы в целом!
Рекомендую!

Тяжесть страницы давали все компоненты размещённые на морде.
В данном шаблоне интернет магазина используется MORE_PHOTOS как дополнительные фотки, и у меня там лежат детальные — для возможности просмотра в увеличенном виде.
Эти же детальные используются для вывода дополнительных (вторых) фоток для превьюшки (имхо по идее нужно новое поле делать и пихать туда умешьшенные).
Вырубить эту возможность в настройках компонент не получилось — пришлось «рубить» на живую.
Копирнул все шаблоны и там заменил дополнительные картинки на превью.
(по специфике моего товара мне дополнительные картинки не требуются).

Сраничка стала открываться В РАЗЫ быстрее!!!

Ту же процедуру придётся применить ко всем шаблонам выводящим списком 🙁

рубрики: Полезности, Программирование, Сайтостроение | Комментарии (0)

3 Декабрь 2014

Кликабельный JQuery слайдер для вертикальных изображений

Пост абсолютно не информативный, а даже наоборот — просьба о помощи 🙂

Собственно, ИЩУ кликабельный! JQuery слайдер для вертикальных изображений!

Слайдеров куча, но 99% под горизонтально ориентированные картинки, а та малая часть, что мне подошла — некликабельны 🙁

Слайдер подбирается для морды сайта «Корейские обои для стен«.

В данные момент поставил более менее подходящий для вертикальных картинок — но он не кликабелен 🙁

Исходник слайдера тут

Думал ещё такой слайдер поставить — но он тоже некликабелен 🙁

рубрики: Javascript - JQuery, Полезности, Сайтостроение | Комментарии (0)

20 Ноябрь 2013

Javascript — передача параметра в модальное окно fancybox

Вроде элементарное ТЗ — а промучался полдня.
При клике на «купить» — должно появляться модальное окно «Товар добавлен в корзину» «продолжить покупки» «оформить заказ»
В качестве модального окошка решено использовать скриптик JancyBox — и центрируется и затемняет, в общем всё устраивает!
кроме одного НО! — при нажатии на «купить» товар сначала должен «упасть» в корзину, т.е. нужно вызвать соответствующую функцию с передачей в качестве параметра ID товара

Buy 1111
Buy 2222
$(".modal").fancybox({
	'onStart': function() { 
    	      var id = $(this).attr('rel');
              alert(id);     
           }
});

Так не пашет! — даёт «undefined»

Как вариант — повесить сначала click — в нём сделать нужный вызов, а потом открыть окно имитацией клика
$(«#id2»).trigger(‘click’);

    $("#id1").click(function() {     
    	var id = $(this).attr('rel');
    	$("#inline1").html(id);
	$("#id2").trigger('click');
    });

Но почему-то в таком варианте модальное окно выводится сначала вверх потом только центрируется. Облом!

Гуглим далее — нашел свою обработку Тайтла с помощью собственной фукнции вешаемой параметром TitleFormat
Внутри которой дёрнуть rel можно следующим образом $(currentArray[currentIndex]).attr(‘rel’)

Т.е. вместо задания тайтла я получу ID и вызову нужную мне функцию.

На этом «мудрёном» варианте и остановлюсь — через задний проход конечно, но работает 🙂

P.S.
С вопросом по решению проблемы я создал 3 поста на форумах
phpclub.ru
javascript.ru/forum/
forum.searchengines.ru

На первом ноль реакции, на втором попытались помочь — но безуспешно
На javascript.ru/forum — 200 % попадание в цель!
На основе моего вопроса был создан готовый рабочий пример! В личке вебмастер ответил на мой вопрос — откуда именно инфа с указанием прямых ссылок на нужный мне пример в мануале!

Собственно, как обычно
Рони ответил в ПМ — за что ему ещё раз огромное спасибо!

Как обычно — всё гениальное просто — «Meditate on documentation!»

Дока тут http://fancyapps.com/fancybox/
Пример с передачей ID тут http://jsfiddle.net/Se8Yu/

рубрики: Javascript, Полезности, Программирование, Сайтостроение | Комментарии (0)

2 Сентябрь 2013

vipmaster.net — перспективный SEO форум

Итак, прошу любить и жаловать VIPMaster — Форум ВебМастера и SEO оптимизатора.
Молодой, перспективный SEO форум. Приятный интерфейс со всеми удобными «фенечками» на движке IP.Board
Помимо прямого направления поисковой оптимизации, довольно плотно обсуждаются темы сайтостроения (Web-программирования,Услуги вебмастера), конвертации траяфика (электронная коммерция), коммерция(купля/продажа) и другие не менее интересные темы.
Не буду скрывать, что статья рекламная — и даже наоборот сделаю на этом акцент! Т.к. это говорит о том, что форумом занимаются, форум продвигают и вкладывают в него средства, а это уже залог успеха!
По сути, по настоящему живых SEO форумов не так много, и надеюсь vipmaster.net достигнет высот уровня searchengines.ru!
Форум модерируемый — никакого левого «шлака» нет — всё чётко, по полочкам.
В итоге — рекомендую и даже больше — призываю поддержать ребят на старте!

P.S.
Сам уже зарегался и думаю стану постоянным посетителем.

рубрики: SEO, Администрирование, Вёрстка, Программирование, Реклама, Сайтостроение | Комментарии (1)

5 Июнь 2013

JQuery — мультиселект и cлайдер бегунок

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

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

1. jQuery Dropdown CheckList — TESTING — собственно, готовое решение множественного выбора с различными демонстрационными примерами (мне например сильно пригодилась опция ‘firstItemChecksAll’
2. По слайдеру это вообще стандартное решение на JQuery — заходим на jQuery UI чекаем Slider — скачиваем, настраиваем. Посмотреть различные готовые варианты можно там же.

Пост больше «закладочный» для себя — поэтому без подробностей (на указанных ресурсах всё подробно) — будут подводные камни в реализации — добавлю.
Ну и как закончу фильтр — скину линк для критики.

рубрики: Вёрстка, Полезности, Программирование, Сайтостроение | Комментарии (1)

Яндекс.Метрика