Однозначно в закладки!

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

формат можно задать любой
.GIF, .JPG, .JPEG, .PNG

Конечно, самый главный инструмент в работе над адаптацией сайта это Webmaster Tools встроенная в браузер, вызываемая по кнопке F12

Но и с ним не всегда можно быстро определить какой блок мешает адаптивному сужению шаблона сайта.
В таких случаях можно использовать такой css, задающий всем блокам красный бордюр — и сделать это можно прямо в панели вебмастера в режиме редактирования.

После чего все блоки будут «как на ладони» — наводим, смотрим в какой именно строке css файла требуется правка.
Вуаля!

Внимание!
Лично у меня при проверке на смартфоне в Хроме, после изменений вёрстки сайт отображался криво!
Оказалось мешает встроенный механизм кэширования, который кроме как через полную очистку как сбросить для отдельного сайта я не догадался.
Настройки -> Конфиденциальность и безопасность -> Очистить историю -> Оставляете галочку на «Изображения и другие файлы, сохраненные в кеше» -> Удалить данные
В Мозилле достаточно долго держать палец на кнопке обновления странички.

PS
Спасибо гуру mrtoxas и Kerry_Jr с cyberforum-а за отклики в моих постах.

На авторство не претендую, просто оставлю себе готовое решение, чтоб не искать потом по просторам сети

Код фрейма оборачиваем блоком с классом video, размеры фрейма можно не указывать

Продолжаю ковыряться в методиках современной вёрстки, сегодня нашел отличный ролик на тему работы с SVG иконками.
Собственно ролик https://www.youtube.com/watch?v=R2YC3SrTYHk

Если в 2х словах о технологии — необходимые иконки загружаются в онлайн сервис https://icomoon.io/
(жмякаем в правом верхнем углу по ссылке IcoMoonApp)
(кстати там тоже есть хорошая библиотека, например я именно там и взял бесплатные иконки)
Всё — загрузили, или выбрали необходимые иконки — жмём загрузить шрифт и вуаля — скачиваем архив с необходимым веб-фонтом и html файликом с демонстрацией подключения и использования.
Если окошко IcoMoonApp сразу не закрывать — можно удобно копировать код нужных элементом для вставки в проект.

Очень круто и очень быстро и просто!

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

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

Разбираться с нуля и переделывать шаблон под мобильные, без опыта в таком виде работ, я не стал и пошел другим путём — разместил заявку на работу на КВорке и ВоркЗилле. На последней очень быстро нашелся вебмастер который за 1500 рублей поправил мне стили основных блоков для мобильной вёртстке. После чего я уже за рабочий день «навёл красоту» в деталях, и ИМХО получилось очень даже ничего!

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

Работаю с макетом, реализованным с возможностями современной CSS вёрстки.
Довольно много интересного, красивого и в то же время простого кода.

Реализацией хлебных крошек не могу не поделиться! Классно!
Это CSS

Это HTML

А это результат!

Всем привет!

Продолжаю публиковать то, с чем работал недавно и решил поделиться …

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

Самый главный совет от Яндекса — «Используя семантическую разметку, вы можете улучшить представление сниппета вашего сайта в результатах поиска».
Этот совет, а так же очень доступный видео ролик можно найти на странице Яндекса с кратким обзором «Зачем нужна микроразметка«.

За полной документацией от разработчика — идём в соответствующий раздел сайта schema.org, например Organization, либо на русскоязычный сайт ruschema.org

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

Собственно, дожил и я до решения кроссбраузерных проблем 🙂
В этой теме я полный нуб — ни в теории, ни в практике с подобными вещами не сталкивался, только по наслышке.
И вот — заказчик ставить ТЗ — слайдер работает везде, кроме IE! нужно чтоб заработал и в осле!

Ну коли я сам не профи, первое что решил — сформулировать вопрос на вебмастерских форумах — вдруг добрый человек поможет? (что уже неоднократно случалось — мир не без добрых людей!)

Форумы нашел в поисковике и составил такое объявление:
Почему слайдер не работает в IE ?
Есть сайт http://www.reklamy.ru/ — на главной слайдер.
Везде работает кроме IE

Почему такое может быть?
Куда копать?

Проблема была в синтаксисе javascript на которой IE вставал, обнаружил с помощью анализа отладчика в браузере (кнопка F12) — ошибку сразу видно
было
if (countLi <= 3) .... нужно if (countLi => 3) ….
помог совет с форума www.html.by
тем не менее во многих других форумах вебмастера не остались в стороне — подключились и дали дельные советы
вот список тем, по мере поступления ответа

https://php.ru/forum/threads/pochemu-slajder-ne-rabotaet-v-ie.60649/

В EDGE есть F12 инструменты разработчика, в IE думаю та же кнопка, тебе javascript отладить

в тему, но хотелось бы конкретики — как именно отлаживать?

http://www.html.by/threads/38140-Pochemu-slajder-ne-rabotaet-v-IE?p=199010#post199010

открываешь IE, жмешь f12, ищешь сообщения об ошибках

в точку! прям от души 🙂

http://webmasters.ru/forum/f74/pochemu-slaider-ne-rabotaet-v-ie-76739/#post759896
этот совет я ещё попробую при возникновении проблем с IE

http://searchengines.guru/showthread.php?p=14755547#post14755547

Дело в том, что у IE весьма своеобразное понятие CSS и HTML… и очень «специфическая» их поддержка.

а у вас весб слайдер через transform: translate3d сделан, а он поддерживается начиная с десятки и то частично

тоже правда!

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

http://wmasteru.org/threads/%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D0%B2-ie.23389/

http://www.hardforum.ru/t125762/#post841520

P.S.
ожидал от cyberforum.ru большего 🙁
ветка http://www.cyberforum.ru/html/thread1840494.html
хотя возможно сам виноват — скорее всего не туда опубликовал, видимо нужно было в javascript

P.P.S.
Забираю свои слова про cyberforum.ru 🙂
В тему подключился настоящий профи — всё мне прокомментировал как нужно!

Просто и красиво 🙂


img.gt:hover {
transform: scale(1.15) rotate(5deg);
}
img.gt {
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
display: inline-block;
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: transform;
}