Рубрика «формы» - 2

imageМеня зовут Павел, я фронтенд-разработчик Tinkoff.ru. Наша команда занимается разработкой интернет-банка для юридических лиц. Фронтенд наших проектов был реализован с применением AngularJS, с которого мы перешли, частично с использованием Angular Upgrade, на новый Angular (ранее позиционировался как Angular 2).

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

В этой статье мы заглянем «под капот» реализации форм в Angular и разберёмся, как создавать кастомные поля ввода.

Предполагается, что читатель знаком с основами Angular, в частности, со связыванием данных и внедрением зависимостей (ссылки на официальные гайды на английском языке). На русском языке со связыванием данных и основами Angular в целом, включая работу с формами, можно познакомиться здесь. На Хабрахабре уже была статья про внедрение зависимостей в Angular, но нужно учитывать, что написана она была задолго до выхода релизной версии.
Читать полностью »

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

Юзабилити линч: ищем уязвимости интерфейса в CMS Diafan - 1

Привет. Я уверен, ты всё-таки еще не умираешь! Постараюсь, чтобы данный материал внёс свои 5 коп в фонд развития “Хабр — живи!”.

Я достаточно длительное время занимаюсь дизайном интерфейсов. Люблю своё дело и каждый раз ищу любую возможность развиваться. Поиск ошибок и уязвимостей интерфейсов в рабочих системах, прототипах и приложениях нахожу такой возможностью. Обнаружив несколько типичных ошибок у других, выводы точно отпечатаются в подсознании, что позволит не наступать на подобные грабли вновь в собственной повседневной рутине.
Прошу заранее не судить строго. Обзор носит чисто субъективный характер. Взгляд на данную систему изложен исключительно через призму личного профессионального опыта. Обрадую тем, что будет не только критика — будут предлагаться и решения!
Читать полностью »

От FineReader к решениям для ввода данных: как начиналось направление DataCapture в ABBYY - 1

Многие знают ABBYY, прежде всего, благодаря нашим массовым программам – Lingvo, FineReader, различным мобильным приложениям. Но при этом очень важным для нас было и остается корпоративное направление. В частности, на базе наших технологий распознавания текстов мы создали решения в области потокового ввода документов и данных. Они нужны всем организациям, имеющим дело с большими объемами документов – от банков и страховых компаний, до государственных ведомств, нефтяных, энергетических, ритейл и многих других компаний. Недавно этому направлению в ABBYY исполнилось 20 лет.

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

Привет! Сегодня для работы в Интернете все чаще используются мобильные устройства, а не компьютеры. При этом, на многих сайтах есть формы для ввода данных, позволяющие совершить покупку или подписаться на рассылку. Как результат, пользователям приходится много раз вводить на разных сайтах такие сведения о себе, как имя, номер телефона и адрес. Удобство веб-форм имеет огромное значение, потому что при работе с ними всегда вероятны ошибки, в результате чего многие пользователи вовсе отказываются от заполнения. Три года назад мы представили функцию автозаполнения в браузере Chrome, которая упрощает ввод данных в формы. Теперь Chrome полностью поддерживает в формах атрибут autocomplete в соответствии с современным стандартом WHATWG HTML. Благодаря этому веб-мастера и разработчики могут помечать поля атрибутами, например name и street-address (имя и адрес), не изменяя интерфейс или другой код сайта. Те, кто реализовал эти возможности, отмечают, что их формы стали заполняться чаще.
автозаполнение форм на смартфоне
Например, если пометить поле для ввода электронного адреса, то код будет выглядеть так:

<input type="text" name="customerEmail" autocomplete="email"/>

Читать полностью »

При подготовке материала по Symfony Form я решил уделить некоторое внимание теоретической части по работе с формами со стороны клиента – что они из себя представляют, как ведут себя браузеры при отправке, в каком формате путешествуют, в каком виде поступают на сервер.

Вводная часть несколько растянулась и в итоге вылилась в отдельную небольшую статью, которая, по моему мнению, может быть интересна и другим бэкенд-разработчикам (не только PHP или Symfony).
Читать полностью »

В процессе разработки очередного проекта с довольно большим количеством форм, в который раз возникла проблема валидации, притом как на стороне клиента, так и на сервере. На поиск готовой библиотеки для фронтенда я убил половину рабочего дня, и в общем-то все безрезультатно. На сервере с этим спокойно справляется symfony 2, а вот подходящей JS библиотеки, на удивление, найти не удалось. Либо не было простой возможности для локализации, либо были строгие требования к html разметке, либо ад из кучи data атрибутов…

В общем, решил попробовать быстренько написать свой простенький велосипед… Разумеется, «быстро» затянулось почти на две недели, а «простая» библиотека каким-то образом стала весить почти 30 кб…

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

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

Если заинтересовало, добро пожаловать под кат!Читать полностью »

Наверное, одной из самых непростых и скучных задач при проектировании обычной формы в «1С: Предприятии» является управление доступностью элементов в зависимости от того или иного набора данных. Мне встречалось очень много решений: от процедуры вроде УстановитьВидимостьДоступность() с включением в нее всех правил для элементов управления, до совершенно хаотично разбросанных по всему коду обращений к указанным свойствам.

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

Всем привет! Сегодня в продаже появилась "Большая книга CSS3", которую многие из Вас ждали. Чем она может вас заинтересовать?

  1. информация подается интересно
  2. подкрепляется практическими занятиями
  3. приводится много ссылок на сторонние статьи и ресурсы по изучаемой теме
  4. автор постоянно делится своими советами и наработками
  5. уделяется много внимания именно дизайну
  6. Современный взгляд на дизайн и верстку
  7. Верстальщиков научит дизайну, дизайнеров научит верстке.

Это третье издание книги, до этого у Макфарланда были изданы книги по CSS достаточно крупными тиражами, но в этой книге, которая вышла со значительными изменениями, некоторые из которых я и сам применил на сайте books.piter.com

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

В книге рассмотрены следующие темы:

  • написание HTML5-, CSS3-тегов, которые распознаются во всех браузерах;
  • форматирование текста, добавление на страницы навигации;
  • создание таблиц и форм;
  • приемы веб-дизайна для создания уникального оформления сайтов;
  • создание сайтов для любых устройств с помощью адаптивного дизайна.

Читать полностью »

Перевод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern".

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

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

Адаптивный поиск с фильтромЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js