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

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

• Ли она сделать то, что мне нужно делать
• Ли это выглядеть круто
• Это звучит простой в использовании
• Разве я хочу, чтобы использовать его
• Ли использовать рамках I’? М привержены

Вещей, которые вы должны реально смотреть на разные, хотя:

• ? Насколько стабильным является решением Является хорошей альтернативой доступны, если эта doesn’? Т работы
• ? Насколько легко настроить Вам нужно быть экспертом JavaScript для изменения виджета
• Как удобным и доступным это Пользователи, которые don’ т у мыши или находятся на мобильный браузер их
• Вы понимаете, what’? Что происходит Сможете ли вы решить проблему и объяснить это другим
• ? Это содержащейся решение Будут ли другие сценарии уметь взаимодействовать с ним, или же оно будет загрязнять документ
• Как посвященной является разработчиком Будет ли решение быть сохранены и в будущем
• Что поддерживается, и как вы можете расширить функциональность Новый браузер и клиент запрос всегда за углом

В этой статье we’ покажу несколько способов, чтобы узнать больше об этих проблемах.Прежде всего, однако, понимая, что это значит для разработки для Интернета important.

It’ не о You

Большинство причин, почему мы выбираем конкретное решение сразу очень много о нас, и это, когда мы ступаем на тонкий лед.Мы don’ T потреблять то, что мы ставим на Web, а, скорее, люди, которых мы don’ знаю сделать, и мы can’ т сделать предположения об их способности, установки, технических знаний и вкуса.Мы won’ т сделать наш продукт успеха, мы только строить, и таким образом мы в наибольшей тестеров это possible.

I’ нас развивается для веб профессионально уже более 10 лет, работая на все, от персональных блогов до нескольких языков предприятия CMS решений для сложных веб-приложений, и I’ ве узнал одну вещь в путешествии: никогда не строитьдля себя или client.Вместо этого, строить длялюдей, которые будут использовать продукт и бедными человек, который должен взять на проект, когда вы leave.

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

Введение 7-ступенчатый тест для JavaScript Widgets

Для этого I’ ве собрали семь этапов теста применяться к любому вне коробки виджетов вы найдете.Все рекомендации имеют обоснования, поэтому, пожалуйста, задуматься, прежде чем увольнение аргументы как “ elitist” или “ не очень подходит для наших environment.”

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

Пнуть шины любого вне готовое решение, я в основном, используют один инструмент: разработчик Firefox Веб-панель инструментов.Он доступен на Firefox Add-On website и дает вам простой способ проверить what’ происходит сейчас в вашей виджет choice.

Хорошо, вот: семь вещей, чтобы проверить при принятии решения о наличие solution.

1.Что произойдет, если JavaScript включен Off

Первый тест я делаю с любой виджет выключить JavaScript… не после загрузки документа, но до этого.Отключение JavaScript с помощью панели инструментов веб-разработчика это очень просто.Просто выберите “ Отключить все JavaScript” от “ Disable” меню и перезагрузите страницу:

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

Вы don’ т необходимость полной функциональности при наличии нет, просто рабочий интерфейс, который doesn’ T перегрузки пользователей и интерактивные элементы этой работы.Если кнопка ничего не делает, когда пользователи активировать его, тем пользователям, остановится доверять вам, в конце концов, вы haven’ T сохранили promises.

Перегрузкадругой вопрос.Многие виджеты используют CSS и JavaScript выжать много контента в очень небольшом пространстве: думаю вкладками элементов контента и изображений карусели.Какими должны быть их резервную?Если отключить JavaScript и иметь 50 фотографий, где вы запланированы на 2, то это был бы хороший опыт пользователя.Лучше резервная бы серверное решение для той же функциональностью или показать первые 2 и затем предложить ссылку на странице галереи с остальными pictures.

Иногда JavaScript для конкретного виджета на самом деле очень хорошая, но демо-сайты были сделаны плохо.Скрытие элементов с CSS, а затем выявление их наличие, например, очень распространены.Но если JavaScript выключен, решение будет ломаться.Хорошо демо-версии и решения используют JavaScript для добавления класса в теле документа и сделать все зависит от CSS, что class.

Весь фокус в том, что любой хороший виджет JavaScript должны сделать, это сделать любую функциональность зависит от JavaScript с помощью JavaScript; таким образом, вам не придется никакой функциональности, которая won’ т работы.Эта техника называется “ ненавязчивый JavaScript, ” и у меня есть написал курс по it __ и 6 | установить несколько правил для it а back.

2.Как изменить внешний вид, чувствовать и содержание

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

Хорошие виджеты имеют свой внешний вид, содержащиеся в файле CSS и дать вам ручками (т.е. динамически применять классы), чтобы применить собственный стиль.Если вы окажетесь того, чтобы изменить JavaScript, чтобы изменить внешний вид, тревогу должно уйти в head.

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

Хорошие гаджеты имеют Конфигурация objects, что позволит вам изменить количество элементов и определить текстовые метки без изменения основного JavaScript.Причиной этого является то, что функциональная часть виджет должен быть отделен от сопровождающего.Если виджет имеет проблемы с безопасностью или проблемы с производительностью, вы должны быть в состоянии заменить без потери конфигурации и локализации работу.В противном случае люди будут, скорее всего, держать опасный код в Интернете, который является одной из причин, почемунаши почтовые ящики полны spam.

3.Как Полезная и семантические является конечным продуктом

Много виджетов создатели очень рады сообщить, что их продукция “ Web-стандартов compliant” и доступной из-за этого.В то время как веб-стандартам важно, это не указывает на качество и полезность продукта.Одно не могу проверить семантику с собой автоматизированное средство.Например, следующие примеры являются действительными HTML:

<div class="menu">
  <div class="section">
    <span class="label">Animals</span>
    <div class="subsection">
      <div class="item">Giraffe</div>
      <div class="item">Donkey</div>
      <div class="item">Cheetah</div>
      <div class="item">Hippo</div>
    </div>
  </div>
  <div class="section">
    <span class="label">Stones</span>
    <div class="subsection">
      <div class="item">Diamond</div>
      <div class="item">Ruby</div>
      <div class="item">Onyx</div>
    </div>
  </div>
</div>

<ul class="menu">
  <li><button>Animals</button>
    <ul>
      <li><a href="giraffe.html">Giraffe</a></li>
      <li><a href="donkey.html">Donkey</a></li>
      <li><a href="cheetah.html">Cheetah</a></li>
      <li><a href="hippo.html">Hippo</a></li>
    </ul>
  </li>
  <li><button>Stones</button>
    <ul>
      <li><a href="diamond.html">Diamond</a></li>
      <li><a href="ruby.html">Ruby</a></li>
      <li><a href="onyx.html">Onyx</a></li>
    </ul>
  </li>
</ul>

Второй пример работает без JavaScript и использует намного меньше HTML.Он также требует гораздо меньше CSS для укладки, потому что вы бы просто воспользоваться cascade.

Кроме того, HTML, на которых основана виджет, это только половина истории.То, что наличие порождает также должен быть действительным, удобным и доступным, и вы можете проверить это, когда вы проверяете сгенерированный источник в веб-разработчик toolbar.

Чтобы сделать это, щелкните правой кнопкой мыши в любом месте документа и выберите Web Developer → View Source → Посмотреть создания Source:

Юзабилити и доступность (доступность являясь, по сути, лишь более полное представление о юзабилити) сложнее проверить.Но один очень хороший тест, чтобы проверить, как клавиатура доступны виджетом его.Клавиатура только для пользователей находятся на подъеме, и виджеты, которые работают только с мыши над событиями не будет использоваться на сенсорный мобильный, например.Многие виджеты обеспечивают основной доступ к клавиатуре (например, с помощью Tab ключ для перехода от одного звена к другому, и Enter ключ для активации каждой), но это не является правильным accessibility.

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров