.
МЕСТО ПОД РЕКЛАМУ
27 Февраль 2020

Как быстро и просто вставить SVG иконки на сайт?

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

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

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



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

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)

17 Октябрь 2019

Оптимизация сайта для мобильных устройств

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

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

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

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

6 Март 2019

Полезные возможности современного CSS

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

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

Это HTML

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

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

19 Июль 2018

Микро-разметка на веб странице в помощь поисковому боту

Всем привет!

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

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

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

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

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

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

2 Ноябрь 2016

Почему … не работает в IE ? рейтинг форумов вебмастеров

Собственно, дожил и я до решения кроссбраузерных проблем 🙂
В этой теме я полный нуб — ни в теории, ни в практике с подобными вещами не сталкивался, только по наслышке.
И вот — заказчик ставить ТЗ — слайдер работает везде, кроме 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 🙂
В тему подключился настоящий профи — всё мне прокомментировал как нужно!

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

16 Апрель 2016

CSS эффект — увеличение с поворотом

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

weather


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;
}

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

27 Январь 2016

Требования к HTML верстке

Вчера обратились ко мне за советом в поиске верстальщика — какие именно требования предъявлять верстальщику?!
Собственно, велосипед изобретать не стал — поискал, нашел и решил частично сохранить найденное себе.

Итак, требования и рекомендации к html вёрстке:

1. Кроссбраузерность
Сайт должен нормально работать в IE7+, FF3+, Opera9+, Safari4+, Chrome последней мажорной версии (или в зависимости от условий договора с клиентом и года, в котором вы читаете эту статью).

2. Всегда описывайте цвет фона для body даже если он белый.

3. Если используете CSS хаки, комментируйте, что это и для какого браузера, а лучше используйте css_browser_selector.js. Заботьтесь о верстальщиках, которым придется работать с этим макетом после вас.

4. Названия классов и id должны по смыслу соответствовать применению
например, header, menu, footer, news

5. Просьба разделять основные html блоки комментариями. Примерно так:




Это нужно для создания из сверстанного html макета шаблонов для CMS, после чего комментарии будут удаляться.

6. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.

7. Все что можно сделать без Javascript, делать без него.

8. Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.

9. Если это еще не оговорено с заказчиком, предварительно оговорить, какие JavaScript библиотеки вы планируете использовать при верстке макета, чтобы потом не оказалось, что при верстке использовался, к примеру, PrototypeJS, а заказчик планирует в обязательном порядке внедрять на сайт jQuery.

10. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.

11. Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px, а если позволяет размер макета, то и 800px.

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

13. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.

14. CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например:

/* ___________1. Сброс CSS____________________*/
/* ___________2. Типовые элементы____________*/
/* _______________2.1. Залоговки______________*/
/* _______________2.2. Ссылки________________*/
/* _______________2.3. Элементы форм_________*/
/*___________3. HEADER (Шапка сайта) __________*/
/*___________4. FOOTER (Подвал )_______________*/
/*___________5. SIDEBAR (Справа)_______________*/

Как именно структурировть стили — вопрос немного холиварный, но главное — как-то это делать.

15. Если сдача верстки производится более чем одним этапом (например, верстальщик отправляет страницы по одной, или если ему возвращаются на доработку уже сверстанные страницы) и вы не используете систему контроля версий для верстки, исполнитель должен в обязательном порядке прикрепить файл с описанием изменений в макете примерно такого содержания:

Добавил новые картинки в папку img,
Картинки btnHome.jpg и btnFeedback.jpg уже не нужны, можно удалять
Изменил html-код в секции файла anketa.html
Добавил в конец файла main.css новые стили (начиная с .form_row и ниже).

16. Оговорить, в какой кодировке должен быть html-макет. CSS и JS файлы должны быть в той же кодировке, что и макет, иначе вероятность долгой и утомительной охоты на баги критически возрастает.

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

18. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег

19. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href=’javascript:void(0)’ вместо популярного href=’#’, чтобы страница не скроллилась вверх.

20. Верстайте формы правильно: метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for. Предусматривайте при верстке форм элементы для вывода ошибок валидации и стили для неправильно заполненных полей. Если это не предусмотрено в т.з. и дизайне, обязательно обсудите это с заказчиком.

21. Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)

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

23. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.

24. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»

——————————————————

От себя хочу добавить ещё несколько пунктов:

25. Адаптивность — в наше время всё больше и больше людей выходят в сеть с различных мобильных устройств самых разнообразных размеров браузера.

26. очень бы не помешал опыт работы с языком стилей LESS

рубрики: Вёрстка | Комментарии (1)

23 Декабрь 2015

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

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

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

11 Сентябрь 2015

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

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

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

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