klondike

Корпоративный блог студии "Клондайк"

Клондайк интернет маркетинга - WEB, SEO, SMM


Previous Entry Share Next Entry
Игошев Дмитрий
klondike

"Просто кнопка"

Давно хотел написать статейку о вроде бы простой вещи, о кнопке, о казалось бы одной из самых приметивных вещей которые можно встретить на просторах веба.
В статье не будет приводиться код и какие-то технические изыскания, я просто расскажу что же из себя представляет современная кнопка в вебе.
Гость сегодняшней статьи это кнопка "сбросить фильтр" (рис. 1).

2014-12-21 19-21-20 Скриншот экрана
(рис. 1)


Это обычная кнопка, мы ежедневно видим десятки и сотни похожих элементов управления по всему вебу (и не только), но из чего она сделана, что влияет на нее и что с ее помощью можно сделать?
Из названия следует что кнопка предназначена для сброса данных фильтра, прекрасно, с назначением все вроде бы ясно. На рисунке 1 также отмечены элементы страницы которые способны так или иначе влиять на поведение кнопки. К примеру форма поиска или группа чекбоксов пониже. Попробуем использовать фильтр по бренду (рис. 2).


(рис. 2)

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

2014-12-21 20-53-33 chaye.ru - Google Chrome
(рис. 3)

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

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

Второе - функции.
С функциями сложнее, здесь задействованы три основных языка: JS, PHP, SQL.


  • JS - отлавливает события происходящие с кнопкой и всем что происходит на странице, а также запускает PHP скрипты.

  • PHP - логика, обработка данных, построение HTML и другие функции.

  • SQL - запрашивает у БД данные и передает их в PHP скрипт.

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

PHP
Основная работа ложится на PHP, он еще на стадии формирования страницы принимает данные от SQL и на их основе "решает" будет кнопка активной или нет, также он проверяет были ли переданы JSсом дополнительные параметры. В них определяется была ли кнопка активна, что именно из полей фильтра было использовано до нажатия и что необходимо деактивировать. Получив эти данные PHP строит страницу.

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

Порой "просто кнопка" не так уж и проста =).


?

Log in

No account? Create an account