Membuat Aplikasi Web Berbasis API Dengan HTML dan CSS

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Setelah merancang beberapa tiruan visual untuk membantu membimbing kita dalam membangun aplikasi kecil kami untuk browser, kita telah sampai ke bagian yang menarik dan mulai membuat!

Struktur File

Mari kita setup struktur file kita untuk proyek. Akan terlihat seperti ini (dengan masing-masing aset yang hidup dalam folder yang sesuai):

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

Kami sekarang memiliki folder untuk setiap aset kita, serta file .sketch yang kita buat sebelumnya yang memegang tiruan page kita.

Awal HTML

Berdasarkan struktur file kita, mari kita setup dokumen HTML dasar kita dengan link ke aset (yang akan kita ciptakan dalam sekejap).

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Gimmie Dat iCon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>

Berikut ini adalah apa yang kita miliki:

Struktur halaman HTML dasar dengan header, isi, dan daerah footer.
Link ke CSS kustom kami (yang kita akan menciptakan)
Link ke Pacifico pada font Google (seperti disebutkan sebelumnya, ini adalah font yang kita akan gunakan untuk menampilkan nama app kecil kami)
Link ke kami javascript kustom (yang kita akan menciptakan) serta Perpustakaan jQuery pada Google’s Hosted Libraries CDN

Awal CSS

Karena ini sedikit app relatif kecil dan sederhana, saya akan mendukung menggunakan vanili CSS dalam proyek ini (tidak ada preprocessor), tetapi Anda dapat jelas menulis CSS Anda dalam bentuk apa pun yang Anda suka.

Mari kita mulai dengan menyiapkan beberapa halaman dasar gaya dan membuat komentar referensi untuk warna kami akan menggunakan. Dalam assets/css/styles.css lakukan hal berikut:

/*
    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;
}

Di sini kita sudah setup beberapa halaman dasar gaya mengatur gambar, link, dan kita akan menggunakan model kotak. Seperti Anda mungkin telah menyadari, kami menggunakan tag body sebagai pembungkus dengan menetapkan max-width. Ini akan menjaga semua konten kami berpusat di tengah halaman tanpa diluar lebar tertentu.

Perhatikan kita juga didefinisikan nilai-nilai warna, kami akan menggunakan di atas komentar. Karena kita tidak menggunakan preprocessor yang memungkinkan kita untuk menetapkan variabel, ini akan berguna sebagai kita terus menulis gaya kita.

App Header

Mari kita buat header app. Ingat, kita rancang ini di sketsanya:

Screenshot of the header component in Sketch

Jadi, ayo kita buat HTML untuk dicocokkan mock kita. Kita akan menempatkan konten ini dalam elemen header yang kita buat sebelumnya.

1	<header>
2	<h1><a href="./">Gimmie Dat iCon</a></h1>
3	<p>Retrieve full-sized icon artwork for iOS & Mac apps.</p>
4	</header>

Sekarang kita telah memiliki nama aplikasi serta keterangan di bagian atas halaman. Tapi dengan gaya yang biasa.

Tulislah beberapa gaya untuk header halamannya yang membawa lebih sesuai dengan tiruannya :

/*
    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 */
    }

Berikut ini gambaran singkat dari apa yang kita kerjakan:

Warna dan spasi untuk wadah header
App nama header h1 diatur untuk menggunakan Pacicifo dari Google font (ingat, kita tetapkan link ke resource ini di header kita)
App Deskripsi header p sedikit terimbangi untuk menghindari berjalan ke descender "G" nama app.

Sekarang header looking kita sudah lebih seperti desain:

Screenshot of HTML header after adding styles

Namun, ingat bahwa aplikasi ini akan responsif! Jadi jika kita memeriksa gaya ini pada sebuah lebar sempit yang menggunakan alat-alat dev Chrome, kalian akan melihat teks pembungkus untuk Deskripsi sedikit funky karena text-indent

Untuk mengatasi ini, di norrower widths, kami akan menghapus indentasi teks dan benjolan teks Deskripsi turun dengan besar margin-top sehingga pembungkus tampak lebih alami. Mari kita menulis query media untuk mempermudah kita:

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

Nah, sekarang kita memiliki header responsif!

App Input

Tahap berikutnya merupakan peralihan ke daerah input dan output duplikatnya. Ingat mereka tampak seperti ini:

Screenshot of the input component in Sketch

Pertama, kita tambahkan input field ke elemen HTML utama yang kita buat sebelumnya:

<main>
    <!-- input -->
    <form class="submit">
        <input type="url" placeholder="iTunes Link...">
        <button type="submit">Gimmie</button>
    </form>  
    <!-- ./input -->
</main>

Sekarang kita memiliki sebuah form dengan input dan tombol kirim. Sejauh ini terlihat baik, tapi belum terlihat seperti keinginan kita. Kita harus mambahkan beberapa gaya.

Tambahkanlah beberapa gaya untuk elemen input dan tombol form kita.

/*
    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;
        }

Di sini kita tambahkan beberapa gaya pada input form dan tombol serta beberapa states yang berbeda seperti :hover, :focus, dan :disabled. Inilah yang memberikan gaya seperti yang kita dirancang dalam duplikatnya.

App Output

Pada point ini kita akan membuat sesuatu yang kita sebut dengan daerah "output". Pada tempat inilah secara dinamis kita membuat ikon yang dikembalikan oleh iTunes AP. Meskipun, pada inisial halaman awal, pengguna belum belum me-request apa pun. Jadi kita akan menggunakan desain states kosong dari sekarang. Ingat gambarannya, tampak seperti ini:

Kita tambahkan elemen main HTML yang trlah dikerjakan:

<main>
    <!-- input -->
    <form class="submit">
        <input type="url" placeholder="iTunes Link...">
        <button type="submit">Gimmie</button>
    </form> 
    <!-- ./input -->
    <!-- output -->
    <div class="wrapper">
        <div class="content">
            <p><strong>Enter a valid iTunes app store link, i.e.</strong> <a href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://itunes.apple.com/us/app/twitter/id333903271?mt=8</a></p>
            <img src="assets/img/icon-placeholder.svg" alt="Icon placeholder" />
        </div>
    </div>
    <!-- ./output -->
</main>

Perhatikan jika kita menambahkan output HTML tepat setelah memasukan HTML. Terdiri dari wrapper, yang merupakan kotak putih besar dalam desainnya, serta konten, yang berpusat dalam itu. Kita gunakan CSS untuk mengatur elemen .content agar memiliki lebar maksimal 512 piksel, yang merupakan ukuran paling besar untuk menampilkan ikonnya. Untuk saat ini akan terlihat seperti ini:

Perhatikan ikon placeholder yang hilang. Jika kita kembalikan ke dokumen Sketsa, mudah menampilkan aset itu sebagai SVG untuk digunakan di browser.

Screenshot of outputing icon placeholder in sketch

Sekarang kita harus memiliki gambar yang muncul di browser.

Masukkan beberapa gaya pada kotak outputnya.

/*
    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;
    }

Sebagian besar CSS yang kita tambahkan memiliki komentar dalam kode untuk menjelaskannya. Kami tambahkan gaya keluar wrappernya, karena, kami tidak melakukan penyetelan ulang CSS lengkap pada page, kita melakukan penyetelan ulang sederhana pada elemen HTML di dalam area konten kami dengan menerapkan .konten *.

Terakhir, kita tambahkan beberapa style untuk mempertebal state kosongnya. Sekarang seharusnya akan menyerupai gambaran awalnya.

Bagus sekali!

Sekarang setelah struktur HTML-nya siap, tepat seperti gaya yang sesuai, kami siap untuk terjun dan menangani interaksi halaman dengan JavaScript!

Pada tutorial berikutnya (dan terakhir) dari seri ini, kami akan mencari tahu cara mengambil masukan pengguna, membuat permintaan API, dan menampilkan hasilnya di browser. Sampai jumpa!