Diterjemahkan dari bahasa Inggris ke bahasa Indonesia - www.onlinedoctranslator.

com

PERKENALAN PADA
DESAIN WEB MODERN

Materi Pelajaran 1

Mendapatkan Bantalan Anda

TENTANG HANDOUT INI
Handout ini mencakup hal-hal berikut:

• Daftar konsep inti yang tercakup dalam pelajaran ini

• Tugas untuk pelajaran ini
• Daftar bacaan dan sumber untuk pelajaran ini termasuk buku, artikel, dan situs web yang disebutkan dalam
video oleh instruktur, ditambah bacaan bonus dan sumber yang dipilih langsung oleh instruktur
• Transkrip video ceramah untuk pelajaran ini

KONSEP INTI
1. Kursus ini akan mengajarkan Anda cara menulis HTML yang solid dan memahami cara kerja CSS. Anda juga akan

mempelajari cara mengadaptasi desain ke berbagai ukuran layar—yang disebut sebagai desain web responsif—dan

menemukan dasar-dasar bekerja dengan JavaScript dan proyek tempat Anda membuat menu navigasi tarik-turun

JavaScript.

2. Peran HTML adalah untuk menyusun atau "menandai" konten di dalam dokumen. CSS adalah bahasa gaya yang

memungkinkan Anda untuk menerapkan berbagai peningkatan pada HTML seperti warna, efek tipografi, dan

banyak lagi. Menambahkan interaktivitas ke halaman web dilakukan dengan menggunakan JavaScript, skrip atau

bahasa pemrograman.

3. Istilahpaling depanbiasanya mengacu pada bagian dari arsitektur situs web, khususnya, bahasa HTML, CSS, dan
JavaScript. Syaratbagian belakangbiasanya mengacu pada pemrograman atau komponen database dari
server web seperti database atau sistem manajemen konten. Pengembang front-end dan pengembang back-
end biasanya adalah dua orang yang berbeda, meskipun istilah "pengembang full-stack" telah muncul dalam
beberapa tahun terakhir sebagai seseorang yang nyaman di kedua bidang, meskipun individu ini jarang (dan
kadang-kadang disebut unicorn!)
4. Daftar peran khas yang mungkin berinteraksi dengan pengembang front-end pada proyek situs web ukuran
menengah hingga besar adalah ahli strategi konten, arsitek informasi, desainer UX, desainer visual,
pengembang back-end, dan manajer proyek.
5. Ada dua pendekatan filosofis utama dalam membangun situs web: degradasi yang anggun dan peningkatan progresif. Degradasi

anggun dalam desain web umumnya berfokus pada penyediaan pengalaman terbaik untuk browser modern terlebih dahulu

dan kemudian kembali ke browser lama, mengevaluasi fitur apa yang dapat "menurun" dan kemudian membuat perbaikan

yang diperlukan sehingga pengguna tidak menerima kesalahan besar. Peningkatan Progresif dimulai dengan mendefinisikan

pengalaman inti untuk browser lama terlebih dahulu dan kemudian menambahkan fitur tambahan (atau penyempurnaan)

untuk browser modern. Beberapa manfaat utama situs web yang ditingkatkan secara progresif adalah peningkatan

aksesibilitas, dukungan browser, perawatan yang lebih mudah, dan pemeriksaan aplikasi Anda di masa mendatang. Kursus ini

berfokus pada pendekatan peningkatan progresif.

Pengantar Desain Web Modern—Pelajaran 1 2

TUGAS
Tujuan akhir Anda untuk kursus ini adalah membuat situs web multi-halaman yang sederhana menggunakan konten dari artikel Wikipedia (pilihan

Anda) sebagai sumbernya.

Untuk membantu Anda memvisualisasikan proyek akhir di sini, pastikan untuk menjelajahhttp://aarongustafson.github.io/i-heart-cuttlefish/

yang merupakan situs web yang digunakan instruktur selama kursus ini sebagai contoh.

Setiap pelajaran akan memiliki satu atau lebih tugas untuk membantu Anda menyusun pekerjaan Anda. Setelah Anda menyelesaikan

tugas, Anda harus memposting tautan ke pekerjaan Anda di forum Gimnasium untuk umpan balik. Tugas untuk pelajaran ini adalah

sebagai berikut:

• Anda memerlukan cara untuk menghosting kode HTML, CSS, dan JavaScript Anda secara online. Kami merekomendasikan

menggunakan GitHub dan khususnya GitHub Pages untuk melakukan ini. Pertama, daftar akun di GitHub.com jika Anda belum

memilikinya. Lalu pergi kehalaman.github.com , dan ikuti tutorial tentang cara menggunakan GitHub Pages untuk hosting (Anda

harus mengikuti petunjuk untuk Situs Proyek.)

• Tugas selanjutnya adalah memutuskan subjek apa yang ingin Anda gunakan untuk situs web Anda. Untuk melakukan ini, buka Wikipedia dan

temukan artikel dengan konten yang cukup untuk mengisi setidaknya lima halaman dan memiliki beberapa gambar. Jangan ragu untuk

menggunakan instrukturArtikel Wikipedia tentang sotong sebagai referensi, tetapi kami sangat menganjurkan Anda untuk meluangkan

waktu dan memilih mata pelajaran yang Anda sukai, Anda akan mengerjakan materi untuk 6 pelajaran, jadi itu harus menjadi materi yang

Anda minati!

Pengantar Desain Web Modern—Pelajaran 1 3

PENGANTAR
(Catatan: Ini adalah transkrip yang diedit dari video kuliah Desain Web Modern. Beberapa siswa bekerja lebih baik dengan materi

tertulis daripada dengan menonton video saja, jadi kami menawarkan ini kepada Anda sebagai sumber daya opsional yang bermanfaat.

Beberapa elemen instruksi, seperti pengkodean langsung, tidak dapat dibuat ulang dalam dokumen seperti ini.)

Selamat datang di Pengantar Desain Web Modern, kursus online yang

dikembangkan oleh Aquent. Nama saya Aaron Gustafson, dan setiap hari

saya bekerja untuk membuat web menjadi tempat yang lebih baik bagi

pengguna dan pengembang. Saya telah bekerja di web dalam berbagai

peran mulai dari desainer web junior hingga manajer semua hal di bagian

depan selama lebih dari dua dekade. Menjelang awal karir saya, saya

bahkan bekerja sebagai kontraktor independen melalui Aquent.

Selama bertahun-tahun, saya sangat senang bekerja

dengan berbagai klien dan merek, termasukYang baru
York Times, Guinness, Nestle, dan American Idol. Saat ini saya adalah advokat standar web dan aksesibilitas di Microsoft, dan saya ingin

mengucapkan terima kasih telah bergabung dengan saya hari ini.

Sekarang, tujuan kursus ini adalah untuk mempercepat Anda memahami apa artinya menjadi pengembang web front-end modern.

Jadi, sepanjang kursus ini kita akan berbicara tentang apa yang dilakukan pengembang web, cara menandai konten menggunakan

HTML, cara mendesain halaman menggunakan CSS, dan cara menggunakan JavaScript untuk menyempurnakan halaman web.

Pada akhir kursus ini, saya berharap Anda mengetahui cara menulis HTML

padat, Anda akan memahami cara kerja CSS dan opsi yang disediakannya,

Anda akan tahu cara mengadaptasi desain ke berbagai ukuran layar—apa

yang disebut sebagai desain web yang responsif—dan Anda akan tahu

sedikit tentang JavaScript dan dasar-dasar cara membaca dan menulisnya.

Dan, mungkin yang paling penting, Anda akan memahami apa yang

diperlukan untuk membangun situs web dan bagaimana bekerja sebagai

bagian dari tim desain web. Sekarang, saya yakin Anda tahu apa yang

mereka katakan tentang membuat asumsi, tapi saya punya beberapa

tentang Anda.

Satu, Anda tidak takut untuk melihat kode. Kedua, Anda telah menjelajahi

web sebelumnya. Tiga, Anda memiliki editor teks di komputer Anda. (Kita

akan berbicara tentang apa itu editor teks sebentar lagi.)

Dan empat, Anda tahu apa itu browser web dan memilikinya.

Biasanya, itu akan menjadi prasyarat untuk nomor dua, tetapi saya

hanya ingin meletakkannya di luar sana sebagai asumsi terpisah.

Sepanjang kursus ini, kami akan mengerjakan situs web kecil yang

meminjam konten dari artikel Wikipedia yang menarik minat Anda.

Pengantar Desain Web Modern—Pelajaran 1 4

Saya akan membahasnya secara spesifik, tetapi untuk saat ini jika Anda ingin mengintip situs yang telah saya kumpulkan sebagai bagian

dari kursus ini, Anda dapat melihatnya di aarongustufson.github.io /iheartcuttlefish. Dan Anda dapat melihatnya di browser desktop

atau di perangkat seluler Anda. Saya harap Anda akan bergabung dengan saya di video kedua dari seri ini, di mana kita akan membahas

apa artinya menjadi pengembang front-end.

APA ITU PENGEMBANG FRONT-END?

Aku senang kamu memutuskan untuk bertahan. Seperti yang saya

sebutkan di pendahuluan, kursus ini akan membahas desain web

modern dari perspektif pengembang front-end. Jadi hal pertama yang

mungkin harus saya bahas adalah apa itu pengembang front-end?

Tapi sebelum saya sampai di sana, apa sih front end itu?

Jadi ketika kami menggunakan istilah front end, kami mengacu pada bagian dari

arsitektur situs web. Dan teknologi ujung depan adalah hal-hal seperti HTML,

CSS, dan JavaScript. Dan kami menggunakan istilah ujung depan untuk

memisahkannya dari ujung belakang, yang merupakan hal yang membuat

halaman web. Dalam semua kasus, situs web dilayani oleh server, tetapi terkadang kami memiliki hal-hal seperti database yang dapat

menyimpan konten Anda di dalamnya. Mungkin mereka menyimpannya sebagai bagian dari sistem manajemen konten atau CMS. Hal-

hal semacam itu, pemrograman tugas berat, yang dianggap sebagai bagian belakang, hal-hal yang terjadi di server. Ujung depan adalah

apa yang kami berikan ke browser, dan itulah yang dirender dan ditafsirkan oleh browser.

Ujung depan juga bisa merujuk pada orang-orang yang menjadi fokusnya. Jadi terkadang

Anda akan mendengar orang berkata, oh, saya bekerja di bagian depan atau saya bekerja di

bagian belakang atau mereka mungkin mengatakan saya seorang pengembang front-end

atau saya adalah pengembang back-end.

Beberapa orang bekerja di kedua ujung sistem, terutama di

perusahaan kecil dan startup. Terkadang Anda akan mendengar

mereka disebut sebagai full-stack developer, karena mereka

memahami semua lapisan yang disatukan untuk membuat situs web.

Dan orang-orang itu agak langka, itulah sebabnya mereka diberi julukan "unicorn" oleh beberapa orang. Mereka
memahami desain, UX, pengkodean front-end, pengembangan back-end. Dan mereka sangat dicari di banyak
dari perusahaan. Jika Anda dapat menguasai semua bidang ini,

Anda dapat menyebutkan harga Anda dalam hal melakukan

pengembangan web.

Sekarang, bahasa front-end, seperti yang telah saya sebutkan sebelumnya,

adalah HTML, yang digunakan untuk menandai konten Anda; styling, yang

dilakukan melalui CSS; dan pemrograman Anda di ujung depan dilakukan

menggunakan JavaScript.

Pengantar Desain Web Modern—Pelajaran 1 5

Sekarang, penting untuk disadari bahwa HTML, CSS, dan JavaScript sebenarnya berkembang seiring waktu. Setiap bahasa berkembang dengan

kecepatannya sendiri dan versi yang berbeda keluar pada waktu yang berbeda. Dan mereka tidak selalu sinkron. Ini bisa sedikit membingungkan

dan dapat membuat desain web sedikit menantang, mencoba melacak versi mana yang ditangani oleh browser yang berbeda. Dan dalam banyak

kasus, browser juga berubah seiring waktu. Mereka tidak akan menerapkan spesifikasi tertentu, tetapi kemudian mereka akan melakukannya.

Seperti yang Anda lihat, IE8 di sebelah kiri dengan warna merah, tidak mendukung properti radius perbatasan CSS3. Semua browser lain

yang berwarna hijau ini melakukannya. Anda akan melihat bahwa IE9, IE10, dan IE11, yang muncul setelah IE8 di kolom itu, juga

mendukung radius batas. Semua informasi ini disimpan di situs web yang sangat berguna bernama caniuse.com, yang membantu Anda

melacak opsi mana yang tersedia untuk Anda dalam CSS, HTML, dan JavaScript dan browser mana yang mendukungnya.

Ada juga tampilan yang sangat rapi di mana Anda benar-benar dapat

melihat jumlah pangsa pasar yang dimiliki browser tertentu untuk

menentukan dengan baik apakah fitur tertentu tersedia atau tidak.

Jadi seperti yang saya sebutkan, browser berubah seiring waktu. Jadi Anda

mungkin memiliki beberapa browser yang mendapatkan sudut persegi karena

mereka tidak memahami properti radius perbatasan. Jadi itu akan menjadi IE8 di

sini di sebelah kiri. Dan kemudian di sebelah kanan kita memiliki IE9, yang

memahami radius perbatasan. Jadi itu mendapat sudut membulat.

Beberapa dari Anda mungkin melihat ini dan berpikir, yah, itu tidak bagus. Kami memiliki dua browser yang berbeda dengan dua perilaku yang berbeda,

tetapi pada kenyataannya, tidak apa-apa bagi orang untuk mendapatkan pengalaman yang berbeda berdasarkan browser yang mereka gunakan.

Kami tidak dapat mengontrol sepenuhnya segala sesuatu tentang cara orang mengalami situs web kami, dan tidak apa-apa.

Kita harus berdamai dengan itu. Dan ini adalah topik yang akan saya bicarakan lebih lanjut ketika saya membahas filosofi

peningkatan progresif.

Sekarang, pada dasarnya, alat pengembang web front-end

hanyalah editor teks dan browser. Ada banyak editor teks di luar
sana, mulai dari Coda dan Brackets hingga Sublime Text,
TextMate, Vim, UltraEdit, Notepad, Notepad ++. Hanya ada
ratusan dari mereka di luar sana. Yang mana yang ingin Anda
gunakan terserah Anda. Preferensi pribadi saya adalah TextMate.
Saya cenderung sering menggunakannya di Mac saya, tetapi saya
juga cukup menyukai Sublime Text. Dan itu tersedia di mesin Mac
dan Windows.

Untuk browser, kami akan melihat dan menguji pekerjaan kami di browser Google Chrome, tetapi sebagian besar pengembang front-end

memiliki beberapa browser di mesin mereka sehingga mereka dapat menguji desain dan fungsionalitasnya secara menyeluruh.

Pengantar Desain Web Modern—Pelajaran 1 6

Semoga ini membantu Anda memahami apa itu pengembang front-end. Di bab berikutnya, kita akan memeriksa di mana posisi

pengembang front-end dalam proses membangun situs web. Aku akan melihat Anda dalam satu menit.

DIMANA DEVELOPER FRONT-END COCOK

Selamat datang kembali. Jadi sekarang setelah Anda mengetahui apa itu front end dan

sedikit lebih banyak tentang apa yang dilakukan pengembang front-end, mari kita

bicara tentang bagaimana dan di mana peran ini cocok dengan skema besar sebuah

proyek.

Orang-orang di lingkungan kami dalam hal desain web adalah ahli

strategi konten, arsitek informasi, desainer UX, desainer visual,
pengembang front-end—semoga Anda dalam waktu singkat—
pengembang back-end, dan manajer proyek. Mari kita lihat sedikit
apa yang dilakukan masing-masing peran ini.

Ahli strategi konten melihat konten situs—kata-kata, gambar, video—

dan bertindak sebagai editor keseluruhan untuk proyek tersebut. Dia

mungkin membaca dengan teliti konten untuk memastikan konsistensi

gaya dari halaman ke halaman, atau dia mungkin mengevaluasi

kebutuhan konten situs. Ahli strategi konten menyusun pedoman

penulisan untuk konten mendatang dan juga menetapkan jadwal

kapan konten mungkin perlu diperbarui. Dalam banyak hal, ahli

strategi konten melihat gambaran besar dalam hal pesan apa yang

coba disampaikan situs, dan bagaimana kami melakukannya dengan

paling efektif.

Peran selanjutnya yang ingin saya bicarakan adalah arsitek informasi. Arsitek

informasi biasanya bekerja sama dengan ahli strategi konten. Mereka bahkan

mungkin orang yang sama dalam beberapa kasus. Dan mereka bekerja untuk

membangun cetak biru untuk situs tersebut. Seringkali, mereka akan membuat

dokumentasi seperti peta situs atau bingkai kawat, dan mereka melihat semua

bagian bergerak yang berbeda dan jenis arsitek bagaimana bagian-bagian yang

berbeda itu cocok dan bagaimana mereka bekerja bersama.

Perancang pengalaman pengguna (UX) difokuskan pada bagaimana pengguna

berinteraksi dengan situs. Peran ini dapat sedikit tumpang tindih dengan arsitek

informasi dan desainer visual, sehingga dapat digulung menjadi satu atau kedua

sisinya. Dan tergantung pada keterampilan yang dimiliki orang ini, mereka dapat

menghasilkan gambar, bingkai kawat, grafik, atau bahkan prototipe lengkap.

Terlepas dari itu, inti dari pekerjaan desainer UX adalah membuat tugas yang

kompleks menjadi lebih mudah dan lebih intuitif bagi pengguna Anda.

Pengantar Desain Web Modern—Pelajaran 1 7

Perancang visual proyek ditugaskan untuk mengambil cetak biru dan

jenis artefak lain yang dibuat untuk situs dan kemudian membuat

desain visual yang berbeda untuk proyek itu. Perancang visual

menetapkan hierarki visual, memaksakan konsistensi, dan bekerja

untuk memandu pengguna secara alami melalui setiap halaman,

menarik perhatian di tempat yang diperlukan menggunakan alat

seperti proporsi, kontras, dan ruang putih. Seorang desainer visual

mungkin menghasilkan serangkaian desain halaman, atau lebih baik

lagi, sistem desain seperti yang Anda lihat di sini, terdiri dari judul, teks

paragraf, dan jenis konten lainnya untuk mempermudah pekerjaan

pengembang front-end.

Sekarang, pengembang front-end—yaitu Anda—adalah

tempat yang tepat dalam hal memproduksi situs web. Tugas
Anda adalah menerjemahkan desain visual dan interaksi ke
dalam kode tingkat produksi, yang berarti HTML, CSS, dan
JavaScript. Jangan khawatir jika semua itu belum masuk akal
bagi Anda. Pada akhir kursus ini, itu benar-benar akan.

Sekarang, bekerja di samping Anda adalah pengembang back-end.

Pengembang back-end mungkin orang yang bertanggung jawab atas

server, atau mereka mungkin orang yang mengintegrasikan HTML Anda ke

dalam semacam sistem manajemen konten atau bahasa pemrograman sisi

server lainnya. Mereka mungkin akan menjadi orang yang membangun hal-

hal seperti keranjang belanja, sistem login, forum, dan sejenisnya.

Dan akhirnya, perekat yang menyatukan seluruh proyek adalah manajer

proyek. Ini adalah orang yang bertugas mengatur proyek dalam hal

jadwal, tim, anggaran, dan hal-hal semacam itu. Dan mereka memiliki

pekerjaan tanpa pamrih dalam mengelola hal-hal seperti tenggat waktu

dan ruang lingkup proyek. Manajer proyek yang baik akan menjaga

proyek tetap pada jalurnya dan memastikan semua orang pergi dengan

perasaan senang tentang hasilnya, serta prosesnya.

Kita akan mulai menggali HTML di pelajaran berikutnya. Tetapi

sebelum kita sampai di sana, saya ingin berbicara sedikit tentang dua

cara di mana tim bekerja sama.

Pengantar Desain Web Modern—Pelajaran 1 8

Metodologi pertama yang ingin saya sentuh adalah metodologi air terjun. Dan dalam

metodologi waterfall, satu orang menyelesaikan bagian proyek mereka dan kemudian

menyerahkannya kepada orang berikutnya dalam proses, dan kemudian orang itu

menyelesaikan pekerjaan mereka dan menyerahkannya kepada orang berikutnya, dan

seterusnya dan seterusnya. Oleh karena itu, air terjun. Sebagian besar organisasi besar

menggunakan proses ini, karena mereka telah menggunakannya selama bertahun-

tahun. Ini sangat mirip dengan model pabrik dari jalur perakitan.

Sekarang, pendekatan alternatif untuk bekerja sama sebagai sebuah tim

adalah apa yang disebut metodologi tangkas. Pada dasarnya, yang

dimaksud dengan tangkas adalah Anda mengulangi dan bekerja sama.

Jadi, alih-alih satu orang melakukan tugas mereka, menyelesaikannya,

menyerahkannya kepada orang berikutnya, dan melarikan diri, orang-

orang yang berbeda dalam tim benar-benar bekerja sama dan mengulangi

halaman tertentu atau antarmuka tertentu atau masalah tertentu untuk

mencoba dan mencari solusi terbaik untuk itu. Dan iterasi itu terjadi

berulang-ulang.

Seiring dengan metodologi ini, Anda akan sering mendengar istilah seperti "gagal"

cepat dan sering gagal,” karena melalui kegagalan kita belajar dari kesalahan dan kemudian beradaptasi.

Dan itu saja untuk bab ini. Dalam bab berikutnya, saya akan menyelami beberapa pendekatan filosofis yang berbeda untuk

pengembangan front-end. Saya berharap untuk melihat Anda dalam beberapa menit.

PENDEKATAN FILSAFAT UNTUK PENGEMBANGAN FRONT-END

Selamat datang kembali. Sejauh ini kita telah belajar sedikit tentang apa yang

dibutuhkan pengembangan frontend dan di mana itu cocok dengan proyek.

Tetapi sebelum kita masuk ke dalam kode, ada baiknya kita berhenti sejenak

untuk membahas filosofi. Pendekatan filosofis untuk pengembangan web

frontend benar-benar dapat diringkas menjadi dua kubu utama. Yang

pertama adalah degradasi yang anggun.

Konsep ini datang ke desain web dari dunia teknik, dan ide umumnya

adalah bahwa Anda dapat memberikan layanan berkualitas rendah

atau rendah, atau tidak ada layanan untuk beberapa orang, selama

Anda tidak menyebabkan kesalahan besar. Mengikuti itu

konsep, komunitas desain web memfokuskan waktu dan energi kami pada browser modern dan tidak terlalu mempedulikan browser lama, sering

kali meninggalkan pengujian pada browser tersebut hingga akhir proyek dan hanya memperbaiki kesalahan yang paling parah. Jika browser

terbukti sangat bermasalah, kami mungkin langsung memblokirnya dan memberikan pesan kepada pengguna yang memberi tahu mereka bahwa

mereka perlu menggunakan browser yang berbeda.

Pengantar Desain Web Modern—Pelajaran 1 9

Percayalah ketika saya mengatakan Anda tidak ingin pelanggan Anda merasa seperti anak kecil ini. Ada begitu banyak contoh di mana

pengguna tidak memiliki kendali atas browser yang mereka gunakan. Bisa jadi karena ketidaktahuan atau sarana keuangan atau

karena perusahaan mereka memiliki kunci browser dan mereka hanya dapat menggunakan yang standar perusahaan. Menolak akses

pengguna ke konten atau kemampuan untuk menyelesaikan tugas-tugas utama, seperti melihat rekening bank mereka hanya karena

browser mereka bukan yang Anda inginkan, sangat tidak sopan. Dalam beberapa kasus, bahkan mungkin menjadi alasan untuk

gugatan.

Bagaimanapun, sekitar tahun 2003, Steve Champion dari Proyek Standar Web mengusulkan cara baru untuk mendekati desain

web. Dan dia menjulukinya "peningkatan progresif." Gagasan di balik peningkatan progresif adalah Anda membuat situs web

yang tidak memiliki batasan teknologi apa pun. Dengan kata lain, Anda memulai dengan baseline dan meningkatkan

pengalaman berdasarkan kemampuan browser. Ini tentang berfokus pada konten dan tugas inti dan kemudian memperluas dan

menambahkan lebih banyak perangkat tambahan karena Anda memiliki kemampuan untuk melakukannya.

Jika Anda seorang penggemar komedi seperti saya, Mitch Hedberg memiliki kutipan yang bagus, "Saya suka eskalator karena

eskalator tidak pernah bisa pecah, itu hanya bisa menjadi tangga." Dalam banyak hal, peningkatan progresif adalah konsep yang

sama. Di sini kita memiliki, sekali lagi, versi IE8 persegi dan versi IE9 sudut membulat, dan ini akan menjadi peningkatan

progresif. Browser IE8 tidak memahami sudut membulat; IE9 melakukannya, jadi IE9 mendapatkan sudut membulat dan IE8

tidak. Dan tidak apa-apa.

Sekarang, saya adalah pendukung besar peningkatan progresif, dan saya

suka menggunakan analogi kontinum dari kacang ke M&M kacang. Di sini di

sebelah kiri kita memiliki kacang, yang merupakan makanan yang kaya dan

lezat. Dan selama Anda tidak memiliki alergi kacang, itu adalah camilan

yang bisa diterima. Jika Anda membungkusnya dengan cokelat, sekarang

tiba-tiba Anda memiliki apa yang kami sebut—setidaknya di Amerika Serikat

—sebagai goober. Dan goober jauh lebih baik daripada hanya kacang biasa

karena ada cokelat di atasnya.

Sekarang, ketika Anda menambahkan cangkang permen untuk mengubahnya menjadi

kacang M&M, itu menjadi luar biasa. Tetapi hal yang perlu diingat di sini adalah bahwa

semua ini adalah pilihan camilan yang valid. Namun dalam langkah-langkah di

sepanjang jalan, berpindah dari kacang ke M&M kacang, kami telah menciptakan

pengalaman yang lebih baik dan lebih baik bagi orang-orang yang memakannya.

Dengan cara yang sama, kita harus berusaha untuk menciptakan pengalaman yang

lebih baik dan lebih baik bagi orang-orang, berdasarkan kemampuan browser atau

kemampuan perangkat mereka.

Sekarang, kedua filosofi ini sebenarnya terkait secara intrinsik karena peningkatan progresif sebenarnya adalah bentuk degradasi anggun yang

sangat khusus. Semua situs web yang ditingkatkan secara progresif akan secara otomatis terdegradasi dengan anggun. Hal yang sama tidak

dapat dikatakan tentang semua situs yang terdegradasi dengan anggun. Tidak semuanya ditingkatkan secara progresif.

Pengantar Desain Web Modern—Pelajaran 1 10

Andrew Wight tweeted bahwa "peningkatan progresif adalah eskalator

yang menjadi tangga," sedangkan, "degradasi anggun membangun lift

dan kemudian harus menambahkan tangga ketika rusak." Dan saya

pikir itu adalah peningkatan yang cukup bagus dari analogi Mitch

Hedberg. Sekarang karena kita berbicara tentang hubungan di sini,

saya juga akan mengemukakan bahwa ketika Anda melihat dua konsep

desain responsif dan mobile-first, di mana keduanya berpotongan

sebenarnya adalah peningkatan progresif juga, karena desain

responsif, didekati dari sudut pandang pertama seluler, semakin

meningkatkan desain visual

situs, berdasarkan jumlah real estat layar yang tersedia bagi pengguna.

Sekarang, hal terakhir yang ingin saya bagikan dengan Anda sehubungan dengan bab ini adalah sedikit cerita. Jadi di sini kami

memiliki dua proyek berbeda yang dikerjakan oleh perusahaan saya, yang pertama kami secara khusus diinstruksikan untuk

menggunakan degradasi yang anggun sebagai pendekatan filosofis kami. Yang kedua, kami diminta untuk menggunakan

peningkatan progresif sebagai pendekatan filosofis kami.

Pada awalnya, kami diminta untuk menargetkan hanya satu browser, dan

itu adalah browser Chrome, karena kami sedang membangun aplikasi

Chrome. Dalam proyek kedua, kami menargetkan empat browser tertentu.

Sekarang setelah proyek-proyek ini selesai dan telah keluar di Internet

untuk sementara waktu, masing-masing klien ini kembali kepada kami

untuk meningkatkan situs guna menambahkan lebih banyak dukungan

browser.

Dalam kasus proyek pertama, mereka ingin menambahkan dua

browser baru. Dalam kasus proyek kedua, mereka menginginkan

untuk menambahkan 1400 browser baru. Sekarang, ketika kami melakukan ini, yang kami temukan adalah bahwa dengan pendekatan degradasi

yang anggun, kami benar-benar membutuhkan 40 persen dari anggaran awal untuk menambahkan dukungan untuk dua browser baru, karena

kami telah membuatnya hanya dengan harapan memiliki satu itu, satu peramban.

Namun, dalam kasus Proyek B, kami telah membangun dengan mempertimbangkan peningkatan progresif, sehingga kami secara

otomatis dapat menjangkau lebih banyak browser dengan lebih sedikit masalah. Jadi kami telah memberi mereka anggaran sekitar

sepertiga dari proyek awal, dan kami akhirnya mendapatkan setengahnya. Jadi dengan seperenam dari biaya proyek asli, kami dapat

menambahkan 1400 lebih banyak perangkat ke matriks dukungan mereka, yang cukup mengagumkan. Peningkatan progresif hanya

berfungsi.

Sekarang, selama kursus ini, saya akan mendekati berbagai hal dari sudut pandang peningkatan progresif karena itu benar-benar

merupakan standar emas tentang bagaimana Anda seharusnya membangun web hari ini.

Pengantar Desain Web Modern—Pelajaran 1 11

Nah, ini mengakhiri Pelajaran Satu dari kursus. Jadi, saya punya tugas untuk

Anda. Untuk memudahkan proses menempatkan file Anda secara online,

kami akan menggunakan GitHub. Jadi yang saya ingin Anda lakukan

sebenarnya adalah membuat halaman GitHub dan menyiapkan semuanya

agar dapat memposting konten Anda dan membagikannya di forum. Anda

bisa mendapatkan akun di GitHub.com, dan jika Anda pergi ke

pages.github.com, mereka memiliki panduan lengkap tentang cara

menggunakan Halaman GitHub untuk hosting.

Tugas lain yang saya miliki untuk Anda adalah untuk mencari tahu apa

subjeknya adalah Anda ingin membangun situs Anda. Dan saya ingin Anda melihat secara khusus di Wikipedia untuk konten itu. Saya ingin Anda

mencari konten yang cukup tentang suatu subjek untuk mengisi setidaknya lima halaman dan memiliki beberapa gambar. Anda dapat melakukan

proyek apa pun yang Anda suka. Saya secara khusus memilih untuk mencari "cumi-cumi", dan saya menemukan harta karun berupa konten

tentang sotong, sekelompok bagian berbeda yang dapat saya gunakan sebagai halaman, dan sekumpulan gambar berbeda dan bahkan beberapa

video.

Seperti yang saya sebutkan sebelumnya dalam pelajaran ini, situs saya aktif dan tersedia di aarongustafson.github.io/i-heart-cuttlefish, dan

Anda dapat melihatnya di browser desktop, atau bahkan di perangkat seluler Anda. Nah, itu membungkusnya untuk Pelajaran Satu. Saya

berharap untuk melihat Anda di Pelajaran Dua, di mana kita akan mulai menggali HTML. Sampai berjumpa lagi.

Pengantar Desain Web Modern—Pelajaran 1 12