flickr api
毫无疑问，API在今天起着非常重要的作用。 从小到大的Web服务都需要通过API公开其数据，开发人员可以使用该API在其之上创建新服务。 想想像Google，Yahoo！，Twitter和Microsoft这样的大公司：它们都提供服务的API。 这些API提供的数据的示例用法是SnapBird （在Twitter上提供扩展搜索选项的工具）和JoindIn.js （我开发的库，该库基于JoindIn提供的数据创建小部件）。
在这一由两部分组成的文章中，我将向您展示如何使用Flickr API开发一个简单的服务，该服务允许用户在搜索字段中输入文本，然后显示标题或描述匹配的Flickr图像库。该文本。 这将是一个很好的机会，既可以使用第三方API，也可以在此过程中学习一些不错的技术。
在我的GitHub帐户上的名为Flickr gallery demo的存储库中可以访问该项目的源代码。
要求
在编写任何代码之前，了解如何开发服务很重要。 首先，我们的项目将由一个包含三个主要组件HTML页面组成：标头，图库和缩略图列表。
页眉将包含页面标题和搜索表单，用户可使用该搜索表单查找与给定文本匹配的照片。
画廊将位于标题下方，并以自然大小显示图片，并以固定的宽度和高度显示（我们不希望图片溢出我们的布局，对吗？）。 画廊还将具有向左和向右按钮，分别显示上一张和下一张图像。
最后，我们将在图库下面提供照片缩略图的列表。 我们不希望列表变得太长，因此我们将对匹配的照片进行分页，并在每页上最多显示15张照片，分三行显示。 （在此项目中，单击向右箭头不会导致缩略图的下一页加载。但是，阅读本系列文章之后，可以根据需要更新为触发此操作的代码。）
整个服务的开发将关注可访问性，因此在此过程中，我们将在有意义的地方使用相关的role属性，并确保可以通过使用TAB和ENTER来导航网站并触发各种操作键。
我们的努力结果如下图所示：
类别名称约定
尽管该项目本身并不复杂，但是除了一些帮助程序之外，我将使用BEM方法来命名所使用的类。 有些人可能认为这太过分了，但是我认为这是学习您可能不熟悉的新方法的好机会。 用于样式设计的类名称将不会用作JavaScript钩子。 因此，如果一段JavaScript需要检索一个或多个元素，而不是使用现有的类名，我将在元素中添加特定的类名，并以js-作为前缀。 这是许多开发人员用来分隔类名和JavaScript钩子的常用技术。 为了强化这个概念，让我们简要地讨论一个例子。
假设我们已经这样定义了gallery元素：
<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要搜索的文本的input以及提交请求的button 。 label通过使用for属性绑定到input 。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
该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-前缀的类名。
最后一个组件的代码如下所示：
<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除外）。
布局模块
该模块是对元素的默认样式进行分组的模块，这意味着在未定义任何类的情况下元素应具有的外观。 例如，在这里我们将定义a元素和body的默认颜色。 唯一的例外是您在标记中使用的island类，并且该类已用于创建隔离的块 。 该课程的灵感来自哈里·罗伯茨 （ Harry Roberts）的文章“ island”对象 ，因此，如果您想了解更多有关它的信息，建议您阅读引用的文章。
在此模块中唯一值得一提的声明块如下：
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
} 它定义了页面的所有元素必须使用CSS border-box框框模型值。 如果您想了解更多有关此主题的信息，建议您阅读Paul Irish的 * {Box-sizing：Border-box} FTW和Chris Coyier的 Box Sizing文章 。
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用来包含浮点数，而无需使用表示性标记。 如果要了解有关此主题的更多信息，可以查看Nicolas Gallagher的文章A new micro clearfix hack 。
该模块的完整代码如下所示：
.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代码。
翻译自: https://www.sitepoint.com/creating-image-gallery-using-flickr-api-requirements-markup/
flickr api
1643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
