Простой и удобный инструментарий для разработчиков пользовательского Web-интерфейса.

Пост написан по материалам статьи Simple Tools for Font-End Developers сайта Impressive Web.

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

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

CSS Menu Maker

Изображение.

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

Pure CSS3 On/Off Flipswitch

Изображение.

Ресурс предоставляет очень удобный, наглядный и бесплатный инструментарий по созданию стильного переключателя типа flipswitch исключительно на основе CSS3. Имеется возможность создавать переключатель в различных стилях — iOS, Android, Windows 8 или собственного дизайна, который с легкостью реализуется при помощи анимированных, визуальных настроек. Код генерируется на лету. К тому же, есть возможность мгновенного тестирования результата и внесения необходимых изменений.

CSS Multi Column

Изображение.

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

simpl

Изображение.

Этот сайт позволяет ознакомится с простейшими примерами практического применения веб-технологий, таких как HTML, CSS, JavaScript и других. Здесь также представлен удобный список соответствующих ресурсов, содержащих детальную информацию и уроки на заинтересовавшую вас тему. Очень хороший помощник для начинающих разработчиков, но не помешает и более опытным специалистам, так как содержит довольно объемный список технологий и методов (а также сопроводительной документации к ним), используемых при разработке веб-приложений и ресурсов.

Img to CSS

Изображение.

На первый взгляд, казалось бы, не нужный ресурс. Но для определенной категории разработчиков, для кого очень важно, чтобы изображения, присутствующие в отсылаемых клиентам сообщениях по E-mail, не блокировались их почтовыми клиентами, как это обычно происходит. Для этого данный онлайн инструмент предлагает конвертировать ваше изображение в фрагмент HTML/CSS кода, что гарантирует то, что ваше изображение будет отображаться в сообщениях при первом же его прочтении получателем. Для получения доступа к инструментарию вам необходимо создать свой аккаунт на ресурсе. Вот лишь несколько преимуществ такой конвертации:

  • Сохраняется прозрачность PNG файлов.
  • Возможность конвертации большинства основных форматов изображений.
  • Возможность конфигурации фона изображения – установка определенного цвета или степени прозрачности.
  • Используемый API позволяет вам внедрять необходимые изображения в CSS код и использовать их по своему усмотрению в рамках собственных проектов.
  • Интеллектуальный алгоритм сжатия делает ваше конвертированное HTML/CSS изображение максимально компактным.
  • Результаты прекрасно отображаются во всех популярных E-mail клиентах.
  • Используются встроенные in-line CSS стили, что гарантирует их отображение в E-mail сообщении.

Pageguide.js

Изображения.

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

The Toolbox

Изображение.

И в заключении, если вам не достаточно возможностей представленных выше ресурсов или они не удовлетворяют вашему запросу, то попробуйте познакомиться с целым репозиторием приложений, инструментов, виджетов, сниппетов и генераторов кода – сайт The Toolbox. Здесь собраны и представлены в удобном виде полезные вещи со всего Web-a, позволяющие вам значительно улучшить ваш проект в плане функциональности и дизайна. Более того, если вы имеете что-либо подобное, разработанное лично вами, то можете предложить его к рассмотрению. И кто знает, возможно, плод ваших мыслей займет достойное место среди подобных шедевров.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *