1. Требования
2. Соглашения об именах классов
3. Разметка
4. Галерея
5. Список миниатюр изображений
6. Стили
7. Модуль Layout
8. Вспомогательные классы
9. Заключение

Без сомнения, API играют очень важную роль сегодня. Веб-сервисы от малого до большого требуют представления своих данных через API, который разработчики могут использовать для создания нового сервиса поверх них. Подумайте о крупных компаниях, таких как Google, Yahoo !, Twitter и Microsoft: все они предлагают API для своих сервисов. Примеры использования данных, предоставляемых этими API, SnapBird инструмент, предлагающий расширенные возможности поиска в Twitter, и JoindIn.js разработанная мной библиотека, которая создает виджеты на основе данных, предоставленных JoindIn ,

В этой статье, состоящей из двух частей, я покажу вам, как использовать API Flickr для разработки простого сервиса, который позволяет пользователю вводить текст в поле поиска и который затем отображает галерею изображений из Flickr, заголовок или описание которых соответствуют этот текст. Это будет отличная возможность как поиграть со сторонним API, так и изучить некоторые приятные приемы.

Исходный код проекта доступен на мой аккаунт GitHub в хранилище имени Flickr галерея демо ,

Требования

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

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

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

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

Вся служба будет разработана с учетом доступности, поэтому мы будем использовать соответствующий атрибут роли там, где это имеет смысл, а также обеспечим возможность навигации по веб-сайту и запуска различных действий с помощью TAB и ENTER. ключи.

Результат наших усилий показан на изображении ниже:

Соглашения об именах классов

Хотя сам по себе проект не является сложным, я буду использовать Методология БЭМ назвать классы, используемые в дополнение к некоторым помощникам. Некоторые могут подумать, что это излишне, но я думаю, что это хорошая возможность изучить новую методологию, с которой вы, возможно, не знакомы. Имена классов, используемые в целях стилизации, не будут использоваться в качестве хуков JavaScript. Поэтому, если частицу JavaScript нужно извлечь один или несколько элементов, вместо использования существующих имен классов, я добавлю конкретное имя класса к элементам с префиксом js-. Это распространенная техника, используемая многими разработчиками для разделения имен классов и хуков JavaScript. Чтобы подкрепить концепцию, давайте кратко обсудим пример.

Допустим, мы определили элемент галереи как таковой:

<div class = "gallery"> <! - сюда идет другой код -> </ div>

Имя класса галереи используется для стилизации элемента, но последний должен быть извлечен функцией JavaScript для выполнения некоторых действий. Вместо извлечения элемента с использованием имени класса галереи, как показано ниже:

var gallery = document.getElementsByClassName ('gallery') [0];

Я добавлю еще один класс с именем js-gallery:

<div class = "js-gallery gallery"> <! - сюда идет другой код -> </ div>

Затем я извлеку элементы примерно так:

var gallery = document.getElementsByClassName ('js-gallery') [0];

Это гарантирует, что, даже если позднее в проекте имя класса галереи будет переименовано или удалено, код JavaScript все равно будет работать. Если вам не нравится префикс js, я читал, что некоторые разработчики используют префикс do, чтобы выделить тот факт, что элемент используется для выполнения действия. Оба соглашения эквивалентны, и вы можете выбрать тот, который вам нравится больше всего.

Установив цели, составляющие и условности нашего проекта, давайте начнем веселье!

Разметка

Первым шагом в создании нашего сервиса является написание разметки страницы, и мы начнем с заголовка.

HTML-код, необходимый для заголовка, очень прост. Мы обернем оба элемента, описанных в предыдущем разделе - заголовок и форму - в элемент заголовка. Заголовок страницы определяется элементом h1, а форма - элементом формы. Форма состоит из метки, ввода, где пользователь может написать текст для поиска, и кнопки для отправки запроса. Метка привязана к входу с помощью атрибута for.

Форма также будет иметь атрибут role = "search", потому что мы хотим подчеркнуть, что это форма поиска, а типом ввода будет поиск. Наконец, мы добавим класс с именем form-search для стилей и класс js-form-search, который будет использоваться JavaScript для извлечения текста, введенного пользователем.

Полный код заголовка представлен ниже:

<header class = "island"> <h1> Галерея Flickr </ 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" требуется /> <input type = "submit" value = "Search" / > </ form> </ header>

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

Галерея

Галерея состоит из трех разных небольших элементов: элемент img, используемый для отображения выбранного изображения в натуральном размере, и стрелки влево и вправо для изменения отображаемого изображения. Обе стрелки будут созданы с использованием элемента кнопки. Это правильный выбор, потому что мы хотим выполнять действие, когда на них нажимают. Визуально кнопки будут выглядеть как стрелки, но это имеет смысл только для зрячего человека. С точки зрения слабовидящего пользователя стрелки совершенно бесполезны. По этой причине мы должны улучшить эти кнопки, указав их роль. Мы сделаем это, добавив текст в качестве содержимого кнопок - текст, который визуально скрыт, но доступен для программы чтения с экрана. Используемая ниже методика взята из HTML5 Boilerplate проект и использует класс с именем визуально скрытый.

Полный HTML-код галереи выглядит следующим образом:

<div class = "island"> <div class = "js-gallery gallery"> <img src = "" class = "js-gallery__image" /> <button class = "js-gallery__arrow - слева галерея__arrow gallery__arrow - слева "> <span class =" визуально-скрытый "> Предыдущее фото </ span> </ button> <button class =" js-gallery__arrow - справа gallery__arrow gallery__arrow - справа "> <span class =" визуально-скрытый "> Следующее фото </ span> </ button> </ div> </ div>

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

Список миниатюр изображений

Последний компонент состоит из двух очень простых подкомпонентов: списка миниатюрных изображений текущей страницы и пейджера. Оба определены как список, но первый - это неупорядоченный список, а второй - упорядоченный список. Оба этих списка должны быть сгенерированы на лету с помощью JavaScript, поэтому мы добавим к ним имя класса с префиксом 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 и тела. Единственным исключением является класс острова, который вы видели в разметке и который я использовал для создания изолированных блоков . Этот класс вдохновлен статьей «Островной» объект от Гарри Робертс Так что, если вы хотите узнать больше об этом, я предлагаю вам прочитать цитируемую статью.

Единственный блок объявлений, о котором стоит упомянуть в этом модуле:

*, *: до, *: после {-moz-box-sizing: border-box; размер коробки: бордюр; }

Он определяет, что все элементы страницы должны использовать значение модели рамки рамки CSS. Если вы хотите узнать больше об этой теме, я предлагаю вам прочитать статьи * {Размер коробки: Граница} FTW от Пол Ирландский а также Размер коробки от Крис Койер ,

Полный код файла layout.css показан ниже:

*, *: до, *: после {-moz-box-sizing: border-box; размер коробки: бордюр; } .island {display: block; максимальная ширина: 1024 пикселей; поле: 0 авто; } body {background-color: # 060C10; цвет: #FFFFFF; семейство шрифтов: Arial, Calibri, Helvetica, без засечек; } h1 {display: block; цвет: # FCB720; } a {color: #FFFFFF; }

Вспомогательные классы

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

Первый, визуально скрытый, используется для визуального скрытия элемента. Это означает, что элемент не отображается на странице, но по-прежнему доступен для программы чтения с экрана, что очень важно для специальных возможностей. hidden - это класс с одним объявлением, который используется для скрытия элемента как визуально, так и для программ чтения с экрана. Последний класс, clearfix, используется для хранения чисел с плавающей запятой без обращения к разметке представления. Если вы хотите узнать больше об этой теме, вы можете взглянуть на статью Новый взлом микро-исправлений от Николас Галлахер ,

Полный код этого модуля показан ниже:

.visually-hidden {border: 0; клип: прямоугольник (0 0 0 0); высота: 1 пикс; поле: -1px; переполнение: скрытое; отступы: 0; положение: абсолютное; ширина: 1px; } .hidden {display: none! важный; } .clearfix: before, .clearfix: after {content: ""; дисплей: стол; } .clearfix: после {clear: оба; }

Заключение

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

Определив цель и компоненты сервиса, мы затем обсудили всю разметку, которая составляет сервис, который мы разрабатываем, выделив некоторые варианты, например, почему я выбрал элементы кнопок для стрелок галереи. Наконец, в последней части этой статьи мы начали исследовать некоторые CSS-модули для проекта.

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

Похожие

Комментарии