Bootstrap – полезный инструмент разработчика

    Bootstrap – действительно незаменимый инструмент в арсенале многих веб-разработчиков. До недавнего времени я наивно полагал, что вряд ли найдется хоть один разработчик, который бы не слышал про этот фреймворк. Но оказалось, что я был далеко не прав. Это и натолкнуло меня на мысль о том, что пора написать статью. Итак, сегодня мы говорим о Bootstrap.

    Что же такое bootstrap?

    Раньше процесс создания веб-интерфейсов состоял не только из отрисовки прототипов, дизайна, а также верстки страницы. Особняком стояло создание адаптированной под мобильные устройства версии. Дело в том, что с верстальщика могло сойти семь потов, пока не будет достигнута адекватная кроссплатформенная разработка. Но раньше и мобильной версии уделялось меньше времени.

    Сейчас практически у каждого в кармане есть смартфон. А цифры по популярности использования настольных ПК и мобильных устройств разнятся незначительно. Поэтому создание адаптивной кроссплатформенной версии сайта или приложения является приоритетной задачей любого разработчика. Неудивительно, что CSS-фреймворки, пользуются все большей популярностью. Сейчас в мире наиболее активно используются 2 библиотеки – Bootstrap и Foundation. Вторая в основном используется в западных странах. О ней мы поговорим позже. Официальный сайт getbootstrap.com

    Bootstrap – представляет собой CSS фреймворк с открытым исходным кодом для легкого и быстрого создания отзывчивых компонентов веб-сайтов и веб-приложений. В основе лежит двенадцатиколоночная система сеток. Она снискала огромную популярность сразу после появления в 2012 году.

    У истоков разработки фреймворка стоит знаменитая компания Twitter, которая начала развивать проект для внутренних нужд. А 19 августа 2011 года именно под тем названием, которое нам известно сейчас, и появился первый Bootstrap. Сейчас последней является версия с номером 4, которая появилась на свет 18 января 2018 года.

    Что же особенного в Bootstrap?

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

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

    Сетка

    Bootstrap grid
    Сетка

    Это как раз тот компонент, за который фреймворк получил всеобщее признание. Суть сетки заключается в том, что экран делится на 12 равных колонок. Любой компонент выравнивается относительно них, что и создает определенное удобство.

    Вы просто при помощи специальных классов задаете необходимое количество колонок под компонент на различных устройствах и наслаждаетесь результатом. Bootstrap основан на так называемых flexbox’ах и полностью адаптивен. Самое прекрасное, что он поддерживается практически всеми браузерами.

    В дальнейшем мы покажем использование фреймворка на практике.

    Создаем неоморфизм с помощью приложения

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

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

    Неоморфизм точка ио

    Проект, который так и называется Neumorphism.io был создан совсем недавно одним энтузиастом. Теперь этот онлайн ресурс пользуется популярностью. С его помощью можно создать различные эффекты неоморфизма, а затем с легкостью скопировать себе полученный код. Очень удобно.

    Неоморфизм
    Пример работы сервиса neumorphism.io

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

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

    Неоморфизм
    Пример работы сервиса neumorphism.io

    Что может быть проще, чем создать эффект неоморфизма при помощи такого инструмента. Далее просто копируем сгенерированный код полностью или частями и с огромным облегчением используем в нашем проекте.

    Кстати, для всех неравнодушных, в приложении имеется возможность отблагодарить автора. Он оставил ссылки на свой Инстаграм и на проект BuyMeACoffee. Через последний можно отправить разработчику символическую сумму.

    10 ошибок начинающего веб-дизайнера

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

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

    Использование веб-дизайнером большого количества визуальных эффектов

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

    Применение веб-дизайнером неконтрастных элементов

    Очень распространенная ошибка. Часто можно увидеть использование типографики, которая совершенно не читается, пока ты не начнешь приглядываться. Это действительно плохая практика. Хороший веб-дизайнер не поступает так с пользователем.

    Неровные элементы

    Начинающие веб-дизайнеры могут попросту не заметить неидеальность пропорций своих элементов. Разные отступы, отсутствие какого-либо выравнивания негативно сказываются на целостности картины.

    Большое количество границ

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

    Неоправданная любовь веб-дизайнера к теням

    И об этом мы также писали. Но стоит подчеркнуть еще раз. Не переборщите с тенями. Не стоит задавать их всем подряд элементам, включая текст. Этот прием отталкивает.

    Несоблюдение веб-дизайнером иерархии элементов

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

    Не переусердствуйте с вотермарками

    Многие веб-дизайнеры любят подписывать свои фотографии или вставлять заголовки на изображения. Может быть это и неплохо, но если ваша надпись мешает увидеть основное содержимое изображения, то это уже никуда не годится. Не делайте так.

    Нечитаемые шрифты

    Уважаемые веб-дизайнеры, следите за этим элементом. Текст должен в первую очередь читаться. Если вам понравился какой-то необычный шрифт, это не значит, что он понравится всем. Пользователи могут быть разочарованы.

    Плохо подобранные цвета

    Для веб-дизайнера, наверное, одна из главных ошибок – неверный подбор цветов, использование несочетающихся цветов, а также большое разнообразие их на странице. К выбору цветов стоит подходить аккуратно. Советуем почитать про цветовой круг.

    Тесное расположение элементов

    Все чаще многие веб-дизайнеры отходят от практики использования большого количества элементов на странице. Понятно, что когда вы создаете веб-сайт, хочется наполнить его как можно большим количеством информации, но здесь должен действовать принцип презентации – самое основное и наглядное. Оставьте побольше места под свободное пространство, не «слепляйте» элементы.

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

    Делаем прототип мебельного магазина в Adobe XD

    Сегодня мы решили показать один из наиболее популярных и любимых многими веб-разработчиками инструмент, который называется Adobe XD (ссылочка на домашнюю страницу). Программа совершенно бесплатная и удивительно мощная. Она специально создавалась для дизайнеров и разработчиков, поскольку ее функционал предполагает отрисовку не только прототипов, но и веб-дизайна. При этом конечный результат получается действительно живым.

    Программа позволяет создать веб-дизайн с реальной анимацией. Если вы до сих пор делаете дизайн в Adobe Photoshop, то эта серия видео точно заставит вас изменить свое мнение насчет выбора инструментов.

    Сегодня мы отрисуем прототип стартовой страницы будущего мебельного магазина. В дальнейшем команда нашей веб студии Hashweb покажем, как в Adobe XD создать полноценный веб-дизайн.

    В прошлой статье мы говорили о семантическом ядре

    Что такое семантическое ядро и как его собрать?

    Семантическое ядро – одно из важнейших понятий поисковой оптимизации. Начинаем ли мы новый проект, либо работаем над старым, в основе хорошего ранжирования лежит именно семантическое ядро. Сегодня мы подробно разберем что же это такое, какова его цель и как начать его собирать?

    Что такое семантическое ядро

    В прошлой статье мы говорили о базовых принципах поисковой оптимизации. Сегодня продолжим наш цикл по SEO.

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

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

    Как собрать семантическое ядро

    Многие начинающие веб-мастера начинают заниматься сбором семантического ядра, не до конца понимая его значимость. Отсюда возникает идея подбора ключевых слов из головы. Но так поступать ни в коем случае не стоит. Важно! Анализ поисковых запросов всегда делается при помощи специализированных инструментов.

    Из бесплатных и наиболее популярных на сегодняшний день, по сути, остался только Yandex Wordstat. Он позволяет проанализировать поисковые запросы в разрезе нескольких характеристик (таких, как время или регион). Это безусловно очень удобно. При подборе ключевых слов стоит учитывать специфику вашего проекта, географию работы, целевую аудиторию.

    семантическое ядро и yandex wordstat
    Yandex Wordstat

    Инструменты сбора семантического ядра

    Для работы с Yandex Wordstat необходимо войти в систему Yandex под своей учетной записью. Для начала работы просто введите в строку первый поисковый запрос. Если необходимо, выберите регион. После чего система выдаст нам статистику поисковых запросов. Окно разделено на две таблицы. Первая содержит наш запрос и тесно связанные с ним запросы с отображением частотности.

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

    Во второй таблице содержатся похожие по смыслу ключевые фразы, но не содержащие наших ключевых слов. При выборе любого из предлагаемых системой запросов стартовым становится он, и результаты отображаются относительно него. Для удобного сохранения результатов в Excel можно воспользоваться простыми плагинами для браузеров. Для Chrome это Yandex Wordstat Assistant или Yandex Wordstat Helper. При сборе большого семантического ядра добавлять фразы руками очень утомительно.

    wordstat-assistant
    Yandex Wordstat Assistant в браузере Chrome

    Для сбора семантического ядра можно также воспользоваться платными инструментами, которые в значительной степени облегчают и автоматизируют подобную работу. Из наиболее популярных я приведу для примера известный Key Collector. Если вы профессионально занимаетесь поисковой оптимизацией, то этот инструмент для вас попросту незаменим.

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

    Если у вас возникнут вопросы, вы всегда можете задать их нашей команде веб студии HashWeb. Наши специалисты с удовольствием ответят вам.