Без сомнения, API играют очень важную роль сегодня. Веб-сервисы от малого до большого требуют представления своих данных через API, который разработчики могут использовать для создания нового сервиса поверх них. Подумайте о крупных компаниях, таких как Google, Yahoo !, Twitter и Microsoft: все они предлагают API для своих сервисов. Примерами использования данных, предоставляемых этими API-интерфейсами, являются SnapBird , инструмент, предлагающий расширенные возможности поиска в Twitter, и JoindIn.js , библиотека, которую я разработал, которая создает виджеты на основе данных, предоставленных JoindIn .
В этой статье, состоящей из двух частей, я покажу вам, как использовать API Flickr для разработки простого сервиса, который позволяет пользователю вводить текст в поле поиска и который затем отображает галерею изображений из Flickr, заголовок или описание которых соответствуют этот текст. Это будет отличная возможность как поиграть со сторонним API, так и изучить некоторые приятные приемы.
Исходный код проекта доступен на моей учетной записи GitHub в репозитории с именем Flickr gallery demo .
Требования
Прежде чем писать какой-либо код, важно понять, как будет развиваться сервис. Прежде всего, наш проект будет состоять из одной HTML-страницы, состоящей из трех основных компонентов: заголовка, галереи и списка миниатюр.
Заголовок будет содержать заголовок страницы и форму поиска, которую пользователь может использовать для поиска фотографий, соответствующих данному тексту.
Галерея будет расположена под заголовком и покажет изображение, выбранное в натуральном размере, вплоть до фиксированной ширины и высоты (мы не хотим, чтобы изображение переполняло наш макет, не так ли?). В галерее также будут отображаться кнопки слева и справа для отображения предыдущего и следующего изображений соответственно.
Наконец, у нас будет список миниатюр фотографий под галереей. Мы не хотим, чтобы список становился слишком длинным, поэтому разбиваем подходящие фотографии на страницы и отображаем до 15 фотографий на каждой странице в трех строках. (В этом проекте нажатие на стрелку вправо не приведет к загрузке следующей страницы миниатюр. Однако после прочтения этой серии вы можете обновить код, чтобы запустить это действие, если хотите.)
Вся служба будет разработана с учетом доступности, поэтому мы будем использовать соответствующий атрибут role там, где это имеет смысл, а также обеспечим возможность навигации по веб-сайту и запуска различных действий с использованием TAB и ENTER. ключи.
Результат наших усилий показан на изображении ниже:
Соглашения об именах классов
Хотя сам по себе проект не является сложным, я буду использовать методологию БЭМ, чтобы назвать классы, используемые в дополнение к некоторым помощникам. Некоторые могут подумать, что это излишне, но я думаю, что это хорошая возможность изучить новую методологию, с которой вы, возможно, не знакомы. Имена классов, используемые для стилизации, не будут использоваться в качестве хуков JavaScript. Поэтому, если частицу JavaScript нужно извлечь один или несколько элементов, вместо использования существующих имен классов, я добавлю конкретное имя класса к элементам с префиксом js- . Это распространенная техника, используемая многими разработчиками для разделения имен классов и хуков JavaScript. Чтобы подкрепить концепцию, давайте кратко обсудим пример.
Допустим, мы определили элемент галереи как таковой:
<div class="gallery"><!-- other code goes here --></div>
Имя класса gallery используется для стилизации элемента, но последний должен быть извлечен функцией JavaScript для выполнения некоторых действий. Вместо получения элемента с использованием имени класса gallery как показано ниже:
var gallery = document.getElementsByClassName('gallery')[0];
Я добавлю еще один класс с именем js-gallery :
<div class="js-gallery gallery"><!-- other code goes here --></div>
Затем я извлеку элементы примерно так:
var gallery = document.getElementsByClassName('js-gallery')[0];
Это гарантирует, что, даже если позднее в проекте имя класса gallery будет переименовано или удалено, код JavaScript все равно будет работать. Если вам не нравится префикс js- , я читал, что некоторые разработчики используют префикс do, чтобы выделить тот факт, что элемент используется для выполнения действия. Оба соглашения эквивалентны, и вы можете выбрать тот, который вам нравится больше всего.
Установив цели, составляющие и условности нашего проекта, давайте начнем веселье!
Разметка
Первым шагом в создании нашего сервиса является написание разметки страницы, и мы начнем с заголовка.
Заголовок
HTML-код, необходимый для заголовка, очень прост. Мы обернем оба элемента, описанных в предыдущем разделе — заголовок и форму — с элементом header . Заголовок страницы определяется элементом h1 а форма — элементом form . Форма состоит из label , input где пользователь может написать текст для поиска, и button для отправки запроса. label привязана к input с помощью атрибута for .
form также будет иметь атрибут role="search" , потому что мы хотим подчеркнуть, что это форма поиска, а type ввода будет search . Наконец, мы добавим класс с именем form-search для стилей и класс js-form-search который будет использоваться JavaScript для извлечения текста, введенного пользователем.
Полный код заголовка представлен ниже:
<header class="island"> <h1>Flickr gallery</h1> <form class="js-form-search form-search" action="/search" method="get" role="search"> <label for="query">Search:</label> <input type="search" name="query" id="query" placeholder="Search" required /> <input type="submit" value="Search" /> </form> </header>
Давайте теперь обсудим самый важный элемент разметки — галерею.
Галерея
Галерея состоит из трех разных небольших элементов: элемент img используемый для отображения выбранного изображения в натуральном размере, и стрелки влево и вправо для изменения отображаемого изображения. Обе стрелки будут созданы с использованием элемента button . Это правильный выбор, потому что мы хотим выполнять действие, когда на них нажимают. Визуально кнопки будут выглядеть как стрелки, но это имеет смысл только для зрячего человека. С точки зрения слабовидящего пользователя стрелки совершенно бесполезны. По этой причине мы должны улучшить эти кнопки, указав их роль. Мы сделаем это, добавив текст в качестве содержимого кнопок — текст, который визуально скрыт, но доступен для программы чтения с экрана. Используемая ниже методика взята из проекта HTML5 Boilerplate и использует класс с именем visually-hidden .
Полный HTML-код галереи выглядит следующим образом:
<div class="island"> <div class="js-gallery gallery"> <img src="" class="js-gallery__image" /> <button class="js-gallery__arrow--left gallery__arrow gallery__arrow--left"> <span class="visually-hidden">Previous photo</span> </button> <button class="js-gallery__arrow--right gallery__arrow gallery__arrow--right"> <span class="visually-hidden">Next photo</span> </button> </div> </div>
Прежде чем мы закончим с разметкой, нужно обсудить последний компонент — список миниатюр.
Список миниатюр изображений
Последний компонент состоит из двух очень простых подкомпонентов: списка миниатюрных изображений текущей страницы и пейджера. Оба определены как список, но первый — это неупорядоченный список, а второй — упорядоченный список. Оба этих списка должны генерироваться на лету с использованием JavaScript, поэтому мы добавим к js- имя класса с префиксом js- .
Код этого последнего компонента представлен ниже:
<div class="island thumbnails"> <ul class="js-thumbnails__list thumbnails__list"></ul> <ol class="js-thumbnails__pager thumbnails__pager"></ol> </div>
С этим последним фрагментом мы завершили обсуждение разметки страницы, так что пришло время придать ей некоторый стиль.
Стили
Визуальные стили проекта будут организованы в небольшие модули, каждый из которых будет посвящен определенному аспекту. В качестве основы мы будем использовать normalize.css , хорошо известную таблицу стилей, которая заставляет браузеры отображать все элементы более согласованно и в соответствии с современными стандартами.
Он точно нацелен только на стили, которые нужно нормализовать.
Затем у нас будет модуль для вспомогательных классов, модуль для галереи, модуль для миниатюр и так далее.
В этом разделе мы обсудим каждый модуль, используемый в проекте, кроме normalize.css.
Модуль Layout
Этот модуль группирует стили элементов по умолчанию, что означает, как элементы должны выглядеть без какого-либо определенного класса. Например, здесь мы определим цвет по умолчанию для элементов a и body . Единственным исключением является класс island который вы видели в разметке и который я использовал для создания изолированных блоков . Этот урок вдохновлен статьей «Остров» объекта Гарри Робертсом , поэтому, если вы хотите узнать о нем больше, я предлагаю вам прочитать цитируемую статью.
Единственный блок декларации, который стоит упомянуть в этом модуле:
*, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; }
Он определяет, что все элементы страницы должны использовать значение модели border-box рамки CSS. Если вы хотите узнать больше об этой теме, я предлагаю вам прочитать статьи * {Размер коробки: Граница поля} FTW Пола Ирриша и Размер коробки Box Криса Койера .
Полный код файла layout.css показан ниже:
*, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } .island { display: block; max-width: 1024px; margin: 0 auto; } body { background-color: #060C10; color: #FFFFFF; font-family: Arial, Calibri, Helvetica, sans-serif; } h1 { display: block; color: #FCB720; } a { color: #FFFFFF; }
Вспомогательные классы
Это, пожалуй, самый простой модуль службы и определяет три хорошо известных вспомогательных класса, к которым большинство из вас, если не все, хорошо привыкли. Классы: visually-hidden , hidden и clearfix .
Первый, visually-hidden , используется для визуального скрытия элемента. Это означает, что элемент не отображается на странице, но по-прежнему доступен для программы чтения с экрана, что очень важно для специальных возможностей. hidden — это класс с одним объявлением, который используется для скрытия элемента как визуально, так и для программ чтения с экрана. Последний класс, clearfix , используется для хранения чисел с плавающей точкой, не прибегая к использованию разметки представления. Если вы хотите узнать больше об этой теме, вы можете взглянуть на статью Новый взлом микро-ясности Николя Галлахера .
Полный код этого модуля показан ниже:
.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .hidden { display: none !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }тем.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .hidden { display: none !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }
Вывод
В этой первой части статьи мы обсудили детали службы, которую мы создаем, и то, что вы узнаете, прочитав этот мини-сериал. Затем мы рассмотрели соглашения, которые я использую при создании проекта, чтобы вы знали, почему имена классов определены определенным образом.
Определив цель и компоненты сервиса, мы затем обсудили всю разметку, которая составляет сервис, который мы разрабатываем, выделив некоторые варианты, например, почему я выбрал элементы button для стрелок галереи. Наконец, в последней части этой статьи мы начали исследовать некоторые CSS-модули для проекта.
Во второй и последней части этой серии вы увидите оставшиеся модули CSS, а также узнаете о коде JavaScript, который обеспечивает сервис.