基于 API 驅動的 Web App 頁面實現

已經完成的視覺模型設計可以很好的幫助您去給瀏覽器建造一個小應用了，讓我們開始這個系列中最令人振奮的部分，這就如同一個電商平臺的開發，萬事具備，您可以開始上貨開店了。

文件結構（網站開發）

首先開始給項目做一個文件結構：可以參照下面的示例（讓每個文件都能歸屬他應該待的文件夾里，如同電商平臺的每個商品分類般）。

├── index.html
└── assets
    ├── css
    ├── img
    ├── js
    └── sketch

現在我們已經擁有這樣的文件結構來保存所有的項目文件了，同時還得建立一個文件夾來保存我們在Sketch里面做的設計文件。

建立HTML 頁面（網站開發）

基于文件架構，我們就可以開始建立基礎的HTML文件以便于鏈接到我們文件架構里面存放到的各種資源文件。（這一步是網站開發中最容易實現的）

Gimmie Dat iCon

現在我們已經完成了如下的工作：

• 包含了頁頭，主要內容以及頁腳區域的基礎 HTML 頁面。
• 文件已經可以鏈接到自定義的 CSS文件（接下來就會生成該文件）
• 網站鏈接到 Google的字體文件: Pacifico (我們在前面的文章已經提過了，這款字體我們會用來顯示應用的名字)。
• 網站鏈接到自定義的 javascript文件上，（我們也會在后面生成該文件）,這個腳本文件就類似于存放在 Google 的內容分發網絡庫上面的 jQuery文件一樣。

建立 CSS 文件

建立的這個應用相對來說比較小，簡單，所以我打算在這個項目里面使用我最喜歡使用的 vanilla CSS. 當然您可以選用任何習慣的框架來寫 CSS 文件。

現在就可以開始為那些基礎頁面建立樣式表了，先來給頁面的那些元素建立起一些色彩調用。在這個目錄結構下的文件： assets/css/styles.css ，請把如下的代碼輸進去吧。

/*
    General Styles
 
    Colors
    @highlight: #196E76
    @text: #4A4A4A;
    @text-light: #9A9A9A
    @body-background: #EEEEEE;
*/
 
*, 
*:before, 
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
 
html {
  box-sizing: border-box;
  background: #EEEEEE;
  text-align: center;
}
 
body {
    font-size: 1em;
    line-height: 1.5;
    font-family: Lucida Grande, sans-serif;
    max-width: 43.75em; /* 880/16 */
    margin: 0 auto;
    padding: 0;
    color: #4A4A4A;
}
 
img {
    max-width: 100%;
    height: auto;    
}
 
a {
    color: inherit;
}

在這個文件里面已經為頁面上要用到的圖片，鏈接，以及文本框等元素建立好了基本的樣式。 您也許已經注意民到了。 我們用了 body 標簽來控制頁面寬度折行，方式就是給他賦值: max-width. 這個參數能夠保證頁面所有的內容都位于頁面中間，不會超過該值所限定的頁面的最大寬度。

提醒您也注意一下該文件也定義了頁頭上的注釋文本的顏色值。 因為我們沒有使用預定義程序，預定義程序主要能允許使用者設置一些變量，在以后寫更多的樣式表中我們一定會處理這方面的程序了。

APP頁頭

最先開始創建應用的頁頭。 記住，我們在 Sketch 里的設計文件如下所示：

所以我們要按照上圖所示來生成HTML 文件。 請把以下的內容拷貝到您前面生成的HTML文件的 標簽之內。

	Gimmie Dat iCon 


	Retrieve full-sized icon artwork for iOS & Mac apps.

這些代碼就能在頁面上部顯示出該應用的名字以及相關的描述信息了，但這個顯示太簡陋了。

現在就可以給頁頭信息寫一些樣式代碼了，讓這頁頭和設計的一樣漂亮。

/*
    Header Styles
*/
header {
    margin: 1em 0 2em;
    color: #196E76;
}
 
    header h1 {
        font-family: 'Pacifico', serif;
        font-size: 3em; 
        text-shadow: 0 4px 2px rgba(0, 0, 0, .1);
        margin: 0;
    }
 
        header h1 a {
            text-decoration: none;
        }
 
    header p {
        margin-top: -.625em;
        text-indent: 7.75em; /* indent slightly */
        text-shadow: 0 1px 0px rgba(0, 0, 0, .15);
        font-size: .875em; /* 14/16 */
    }

回顧一下我們都做了些什么：

• 給頁頭容器設置了顏色和空行。
• 應用的名字設置好了使用 Google 的字體：Pacicifo. （程序是通過指定的鏈接在網上找到相應的資源文件進行顯示）。
• 應用的描述信息 在使用的時候要稍稍注意下，把該行文字略往后空幾格以免和應用名字的 G 字母疊加在一起了。

現在我們已經完成了頁頭的制作了，完全和我們的設計一樣了

還要注意的是我們要做的是響應式開發的頁面，所以如果用 Chrome 的開發工具打開該應用，檢查一下該應用在窄屏時顯示的情況，您就會發現了由于 的設置，描述信息的折行方式略和我們的設計有所不同。

要避免這個問題，在這種窄屏顯示的時候，不要使用標簽，而是使用空間范圍更大的 標簽，這樣至少折行看起來更自然點。

CSS的代碼如下所示：

@media screen and (max-width: 600px) {
    header p {
        text-indent: 0;
        margin-top: .5em;
    }
}

這樣，我們就得到了響應式的應用頁頭了。

App輸入

第二步就是實現我們設計模型里面的輸入區域和輸出區域了。還記得設計圖嗎？如下所示：

先把下面的代碼加入到我們前面已經寫好的HTML頁面里去：

Gimmie

現在我們就有了一個帶著提交按鈕的輸入框了。語義上就是這樣了，但這個頁面還遠遠不是我們想要的，我們需要給他加上樣式。

把如下的輸入輸出區域的樣式代碼寫進CSS文件中：

/*
    Form Input
    Styles for the form input and button
*/
form {
    position: relative;
}
 
    form input{
        width: 100%;
        display: block;
        font-size: 1em;
        padding: .625em .85em;
        padding-right: 7em;
        line-height: 1.5;
        margin: 0;
        border: 1px solid #bbb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 
                    0 2px 4px rgba(0, 0, 0, .1);
        border-radius: 3px;
    }
 
        form input:focus {
            border-color: #298cda;
        }
 
    form button {
        text-decoration: none;
        background: #196E76;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        line-height: 1.5;
        color: white;
        font-size: 1em;
        border-radius: 0 3px 3px 0;
        border: 0;
        outline: 0;
        text-align: center;
        -webkit-appearance: none;
        margin: 0;
        padding: 0 1em;
        font-family: 'Pacifico', serif;
    }
        form button:hover {
            cursor: pointer;
        }
 
        form button:disabled {
            opacity: .5;
        }

在這些樣式代碼里，您可以找到輸入框以及按鈕的樣式，同時也包括他們的狀態，比方說： ,, 和 . 有了這些樣式表就能讓輸入區域看起來和設計一樣了。

App的輸出

現在就可以開始寫我們設計稿里面的輸出區域了。 在該區域我們可以動態的顯示出通過 iTunes API返回的圖標了。然而，在初始化界面加載時，用戶還沒有提任何要求。 所以我們首先要實現零狀態的設計模型。下面的圖示提醒您設計的樣子：

把下面的代碼加入到 HTML的 標簽內：

Gimmie
    

	
	

		
		

			Enter a valid iTunes app store link, i.e. https://itunes.apple.com/us/app/twitter/id333903271?mt=8 
		
 
	

您也許已經注意到了，我們的輸出區域代碼就緊挨著輸入區域，該區域是我們設計模型里面的最大面積了，所有的內容都會在該區域里面居中顯示。我們可以利用 CSS 文件給該區域的標簽 <.content>設置他的<.max-width> 為 512像素，換句話說，我們的圖標文件就會以這個最大尺寸在該區域顯示。 到現在，我們已經完成的工作就如下圖所示：

請注意，當前的圖標占位符圖片沒有找到。 返回到 Sketch 的設計原稿里面，很容易就可以扔該圖片生成 SVG 格式以供我們程序使用。

現在我們應該有圖片在瀏覽器中顯示出來了。

現在可以開始給輸出框加一些樣式代碼了。

/*
    Content Styles
    Main container for content, i.e. the icons, error messages, etc
*/
.wrapper {
    background: #fff;
    border: 1px solid #ccc;
    text-align: center;
    padding: 2em;
    margin: .5em 0 2em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    border-radius: 3px;
    position: relative;
}
 
.content {
    max-width: 512px;
    margin: 0 auto;
    position: relative;
    word-wrap: break-word; /* for long urls */
}
 
    .content * { /* do a simple reset on elements in .content */
        margin: 0;
        padding: 0;
    }
 
    .content strong {
        font-weight: bold;
        display: block;
    }

大部分加在這里的樣式代碼都會有注釋文字。 我們只是給輸出區域的圖片加了些樣式，所以現在只需修改 .content 標簽即可，其它的標簽都可以保留不動。

加完這些樣式表后，我們的代碼就應該象下圖一般顯示了。

結語：

現在我們已經完成了HTML所有代碼的開發，同時也完成了樣式表代碼。 下一部就可以開始使用 javascript 來處理交互問題了。

下一節教程，我們將會關注用戶如何輸入鏈接，提交 API請求，以及程序如何渲染最后的圖標文件。到時見！

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達(譯)
• 2015-10-10
• 2325
• 公司新聞，網站開發，網站設計，UI