Производство фотообоев в Новосибирске. Интернет магазин фотообоев. Изготовление - один день! Каталог 10 000 изображений!
20 Февраль 2020

Технологии современной вёрстки pug + gulp + sass + sublime text + emmet

Последнее время совершенно нет времени даже на пост в блоге — помимо текущей работы погрузился в технологии современной вёрстки.
Собственно, случайно наткнулся на видео FrontCoder-a Современная верстка сайта с нуля и понеслось …
Информации для переваривания ОЧЕНЬ много, и вся на вес золота!
Одно дело изучать сухую теорию, другое дело видеть своими глазами непосредственно процессинг, причём не только вёрстка но и описание работы рабочих инструментов веб-программиста, а так же информация по их установке и настройке.
Так же автор даёт скачать свой рабочий настроенный шаблон для связки gulp + pug + sass
Если кратко gulp — инструмент для работы с проектом (автообновление в браузере, поддержка препроцессоров pug sass less slylus и других). Непосредственно для кодинга я пока остановился на sublime text т.к. с VS Code я постоянно сталкивался с неудобствами, последнее что выбило — кривое подключение emmet.

Собственно, для начинающих веб программистов настоятельно рекомендую канал FrontCoder-a, а так же его группу ВКонтакте https://vk.com/frontcoder

Так же случайно натыкал на курсы htmlacademy — пример https://htmlacademy.ru/courses/44/run/18
Немного теории без воды + сразу же практическая часть = идеально для начального обучения (отлично подойдёт совсем совсем для новичков)

PS
Мне ещё с GIT ом нужно подружиться, всё руки не доходят, да особой необходимости пока нет…

PPS
Внимание — шаблон для видео «Современная верстка сайта с нуля» разработанный на gulp3 для современной версии node.js и не подходит

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

10 Октябрь 2016

Хотлинки — уязвимость и тормоза!

Удалённо сопровождаю сайт одной довольно крупной Московской организации, судя по всему сайтов у них много и непосредственно сайт с базой данных для работы не мой.
И основной сайт этот частенько очень так жестоко висит — страничка минут по 5 не может загрузиться и вместе с ним висит и сопровождаемый мною сайт, вернее не сам сайт, а тупят только те странички, где хотлинком подключается javascript с главного сайта.
script src=»скрипт на главном сайте»
Собственно, пока основной сайт не отвиснет — страничка моего сайта не прогрузится 🙁
Изучил скрипт — никакой динамически меняющейся информации там нет — и первая же мысль пришедшая в голову — кэширование результата на сутки (хотя думаю можно и больше).
Мои сайт на движке 1С Битрикс, поэтому для реализации кэширования я использовал класс CPHPCache.
Собственно — полёт нормальный 🙂
Разгрузил и свой сайт и сайт с базой данных — теперь за скриптом ходим раз в сутки, странички генерируются без задержек.

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

27 Сентябрь 2016

Jquery адаптивная фотогалерея — слайдер

Аллоха коллеги!

Ваяю бюджетный сайт … нарыл хорошую адаптивную фотогалерею-слайдер baguetteBox — что прикольно, с мобильного пальцем листать можно!
Рабочий пример на сайте
Официальная демо страничка
Ну и исходники на GetHub

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

25 Август 2016

Сайт визитка за 15 000 рублей

Как мне не нравится делать сайты на бесплатных движках Joomla и подобных (уже далеко не один пост написан о проблемах безопасности Джумлы, и по факту — ломали уже неоднократно) — иногда реалии всё же обязывают выполнять такую работу. Как ни крути — далеко не у всех есть лишние деньги на лицензию 1С-Битрикс.
Да и в Джумле есть один очень весомый плюс — огромное количество бесплатных современных адаптивных красивых шаблонов для сайта.
Вот и сейчас — обратился ко мне родственник с просьбой переделать готовый сайт на движке Джумла… Переделывать на Битрикс с уникальным дизайном — жестоко и дорого!
Решили оставить джумлу — обновить движку до последней, найти и интегрировать шаблончик и провести кое какие работы по контенту и поисковой оптимизации страниц (разнёс услуги по отдельным страницам).
Сайт remdvig.ru — услуги по ремонту электродвигателей.
Стоимость работ по-родственному я оценил в 15 тысяч рублей.
По всем конкурентным запросам сайт в Новосибирской выдаче твёрдо входит в ТОП-10 Яндекса.
Это запросы «ремонт электродвигателей» и «перемотка электродвигателей»
а с региональной добавкой выходит в ТОПы не только Нска «ремонт электродвигателей в Новосибирске» «перемотка электродвигателей в Новосибирске»
Собственно, если нужно что нибудь подобное — обращайтесь, обсудим.

P.S.
Почему так дорого для визитки можете спросить Вы?
Отвечу — потому, что делаю сразу правильно, с внутренней поисковой оптимизацией страниц — Результат думаю позволит не мало сэкономить на рекламных компаниях для привлечения клиентов.

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

23 Декабрь 2015

Готовые CSS стили для таблиц

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

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

27 Ноябрь 2015

Выделение области изображения и передача параметров в Битрикс

Всем привет!

Закончил сегодня довольно интересный (для меня) проектик, который делал для товарища.
Потыкать можно тут

В 2х словах о ТЗ:
тематика «продажа фотообоев» — расширение стандартного функционала до возможности выбрать из картинки произвольную область, с обсчётом стоимости работы
вся информация должна передаваться в корзину и быть доступна в оформленном заказе

фронтенд реализовал на Jquery плагине ImgAreaSelect
к Битриксу привязал написанием своего компонента детального просмотра и передачей в корзину методом CSaleBasket::Add
(ни в коем случае не пробовать Add2BasketByProductID — пару дней убил на него впустую)

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

11 Сентябрь 2015

Bootstrap Sublime Text Emmet FontWeb и другие полезняшки для вёрстки

Решил сделать репост полезных ссылок с http://webdesign-master.ru для себя, дабы не потерялось 🙂

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

10 Сентябрь 2015

Просто находка webdesign-master.ru

Получив ТЗ на вёрстку PSD макета в кроссбраузерный адаптивный шаблон, и осознав свою отсталость в этом вопросе (верстал довольно давно, вручную, причём сугубо «дедовскими» методами в FAR-e с подсветкой синтаксиса — вот такой я «динозавр») решил почитать о современных подходах в данном вопросе…

Собственно, томить не буду — Видео BOOTSTRAP: Как создаются современные адаптивные сайты

зацепило сильно! отличное изложение материала, автор супер! рекомендую!

ну и как следствие — настройка «инструментов рабочего пространства» для удобства работы с фронтендом — Видео Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

Оба ролика подкреплены доходчивым описанием и рабочими ссылками!
В общем я под впечатлением! Подписался на рассылку, будет время — изучу весь старый материал!

Чего у меня получится с моим проектом — покажу по окончании вёрстки.

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

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)