Последнее время совершенно нет времени даже на пост в блоге — помимо текущей работы погрузился в технологии современной вёрстки.
Собственно, случайно наткнулся на видео 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 и не подходит

После полного провала интернет аптеки mean-apteka.ru на последнем шаблоне от ДокторДика (полгода бился — переделывал, допиливал и т.д. и т.п., так и не понял — что поисковикам в нём не понравилось, тексты все уникальные — за денежку заказывал, сам шаблон был предоставлен мне первому — нигде он не светился — в общем непонятно что не так) я решил уже не мучаться с ним и сделать самостоятельно свой новый шаблон.
Выдумывать что-то новое не стал — я не дизайнер, а вот переделать из существующего — думаю создатели не обидятся т.к. врят ли вообще увидят мою переделку — сайт для переделки я взял из Московского ТОПа — lovefarma.ru до таких позиций мне явно не дотянуть.
Что интересно — у них в выдаче даже ценник препарата показывается

Собственно, коли Яндексу нравится данный сайт — значит по идее должен понравится и мой, на подобном шаблоне.
Сказано, сделано — зацените новый шаблон lovefarmacy.ru
Получилась такая смесь из топового lovefarma.ru и довольно удачливого men-aptekar.ru
Тут я пошел на эксперимент — тексты заказал не как обычно, за недорого на бирже, а у хорошо отрекламировавшего себя спичрайтера (как он сам себя величает) — Михаила Савицкого — уже опытного копирайтера в фарма тематике. (Михаил молодец — сам вышел на меня, красиво предложил свои услуги, и уже неплохо заработал). Ценник конечно в разы! выше, чем обошлось бы ранее, но после провала с mean-apteka.ru уже сильно хотелось бы получить рабочий сайт приносящий копеечку (тьфу тьфу тьфу — хотя бы себя по вложениям бы отбил).
Каждый текст вручную проверял на уникальность — и сразу при наличии вопросов отдавал на доработку Михаилу.
В общем — уже добавил на индексацию (статьи буду потихоньку добавлять — они уже написаны), ждёмс и «держим пальцы» 🙂 Параллельно буду допиливать сайтик, например до оптимизации по советам гугла ещё не дело не дошло, так же нужно с валидацией поработать (тут главное не переборщить, а то валидатор к каждой картинке требует alt — я вот думаю может этим я прошлый шаблон и запорол).

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

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

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

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

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

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

Всем привет!

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

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

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

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

• Шрифты для веб-дизайна и верстки: fontweb.ru
• Создание прототипов «на коленке» wireframe.cc
• Иконки в шрифтах fontawesome.io
• Адаптивная каруселька owlcarousel
• Sublime Text 3
• Sublime Text 3 Package Control
• LiveReload Browser Extension
• Sublime Text 3 Live Reload Plugin Fork by GrafikArt
• сервис проверки адаптивности (виртуальные экраны айфонов, айпадов и прочих девайсов) responsivedesignchecker.com и ещё один responsivetest.net и ещё mattkersley.com

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

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

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

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

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

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

Показалось мне, что шаблоны DD суховаты, например отсутствие блока Новостей не внушает доверие к магазину.
Сегодня, реализовал сей недостаток — Новости аптеки Препараты для мужчин
(пока только одна тестовая новость и в меню ещё не добавил)
Ещё на новости, детальную товара и статьи добавил шаред-панель, но чего то сомневаюсь, что такими ссылками серферы делится будут …