Membuat Antarmuka Web: Tempat Memulai

Iklan

Lebih dari sekadar bata-dan-mortir, kode komputer dan piksel adalah fondasi ekonomi abad ke-21. Jika Anda pernah melihat "Sumber Halaman" atau "Alat Pengembang" di peramban Anda, kemungkinan besar Anda akan menemukan kekacauan teks, dan bertanya-tanya bagaimana hal itu membuat halaman web berfungsi.

Pengembang web memanggil Graphical User sayanterfaces (GUI) secara kolektif paling depan halaman web, berbeda dengan back-end. Front-end adalah apa yang dapat dimanipulasi pengguna, ambil tindakan, dan jika tidak digunakan. Back-end dapat dianggap sebagai infrastruktur yang berisi dan mendukung semua informasi dan tugas yang tersirat dari front-end.

Artikel ini tentang ujung depan. Kami akan memetakan wilayah sehingga Anda bisa mendapatkan pemahaman tentang perbedaan dan kemampuan yang membuat ujung depan apa itu adalah, dan menunjukkan kepada Anda bagaimana untuk mulai masuk akal - dan menggunakan - alat pengembang web untuk membuat web interaktif dan menarik halaman.

Desain Web versus Pengembangan Front-End

Dalam organisasi besar, desain dan pengembangan adalah tugas yang dilakukan oleh tim profesional dengan keahlian yang berbeda. Desainer akan membuat desain visual dan interaksi tertentu; pengembang front-end akan mengimplementasikannya.

Namun, bagi seorang individu, tidak ada alasan untuk membatasi eksplorasi Anda: hanya karena Anda tertarik pada pengembangan, tidak berarti Anda tidak memiliki visi untuk desain, dan sebaliknya. Sejumlah kecil pengetahuan tentang teknologi web dasar atau prinsip-prinsip desain dapat terbukti sangat bermanfaat dalam karier atau bisnis Anda.

Pengembangan front-end lebih dan kurang merupakan kegiatan pengkodean. Lebih dari itu karena lebih dari setengah desain dalam pemikirannya: banyak konsep diambil dari dunia produksi cetak. Lebih sedikit karena saat menggunakan kode komputer, kode itu adalah variasi yang tidak terlalu rumit, lebih pemaaf, dan membutuhkan lebih sedikit pengetahuan dasar pemrograman daripada bahasa pemrograman web lainnya (banyak yang dapat ditemukan di back-end) Bahasa Pemrograman Yang Dipelajari - Pemrograman WebHari ini kita akan melihat berbagai bahasa pemrograman web yang mendukung Internet. Ini adalah bagian keempat dari seri pemrograman pemula. Pada bagian 1, kami mempelajari dasar ... Baca lebih banyak .

Front-End Web: Markup, Style Sheet, dan Bahasa Pemrograman

Sebagian besar halaman web dibangun dengan trio teknologi: hypertext markup language (HTML), cascading style sheets (CSS), dan JavaScript (JS):

• Bahasa markup seperti HTML menandai dokumen dengan tag. Menandai batas konten semantik dan menyusun dokumen. Dokumen terstruktur dapat ditata.
• CSS adalah a bahasa style sheet dan turunan arah gaya cetak ke pembuat komposer halaman (yang menciptakan gambar akhir yang dapat dicetak untuk mesin cetak); di web, CSS menentukan penyajian konten seperti tipografi dan tata letak secara umum, serta menempatkan gambar.
• JavaScript, berbeda dengan dua sebelumnya, adalah a bahasa pemrograman. JS menangani interaksi dan input pengguna, dan berfokus pada peristiwa yang dihasilkan pengguna. Untuk mengisi gambar lebih sedikit, kebalikan dari paradigma yang digerakkan oleh peristiwa adalah paradigma di mana pemrograman dijalankan terlepas dari input pengguna.

HTML

Sudah lebih dari dua puluh tahun, dan tujuan inti HTML tetap sama: untuk memisahkan teks yang dimaksudkan untuk pembaca dari struktur yang diperlukan untuk mengurai dokumen.

Mengapa Anda Membutuhkannya

Mengapa HTML masih penting? Sederhananya, HTML adalah tempat semantik makna konten Anda berada. Itu diperlukan untuk pembaca mesin seperti spider mesin pencari dan pembaca layar (untuk aksesibilitas). Seiring waktu, relevansi memisahkan apa yang semantik versus apa yang struktural telah tumbuh dan bukannya berkurang dari waktu ke waktu. Versi HTML terbaru (5) memperkenalkan tag suka

,

Anatomi Elemen HTML

Elemen HTML, minimal, adalah pasangan membuka dan menutup tag, setiap tag terlampir , seperti tag paragraf, di bawah ini di cyan. Elemen dapat diambil atribut, seperti di bawah ini dalam magenta, seperti "kelas," yang akan membuat elemen anggota grup yang dapat mempengaruhi HTML dan JS. Itu gaya atribut, yang isinya ditulis dengan warna merah di bawah ini, sebenarnya adalah cara untuk membuat aturan CSS sekali saja hanya untuk elemen itu. (CSS paling baik ditulis di level situs atau halaman, seperti yang akan kita diskusikan di bawah ini.)

Hasil markup ini:

Teks paragraf polos di sini.

Kredit Ekstra (Lanjutan)

Pengembang dari semua jenis terobsesi dengan kecepatan eksekusi. Untuk tujuan ini, mereka akan mengoptimalkan bahasa itu sendiri untuk kecepatan menulis dan membuat garis yang dapat dibaca. Ini disebut sugarcoating sintaksis. Komunitas HTML telah menghasilkan beberapa upaya ini.

Mengapa menggunakan pintasan pengembang-sentris saat Anda, mungkin, seorang pemula? Dengan membuat hal-hal dalam markup yang lebih sederhana, Anda dapat fokus pada niat, bukan ekspresi, sambil memvalidasi terhadap standar yang terakhir. File sumber yang Anda hasilkan di markup yang disederhanakan akan dikompilasi ke dalam HTML yang valid, atau kompiler akan melemparkan kesalahan pada nomor baris tertentu. Anda mungkin menemukan itu lebih instruktif daripada berburu melalui "sup tag" untuk braket sudut yang hilang. Mereka masing-masing membutuhkan perangkat lunak perantara untuk mentranskompilasi mereka ke dalam HTML. (Ini tambahan kredit, setelah semua.)

• Haml (HTML Abstraction Markup Language) | Membutuhkan Rubi (yang telah kita tulis sebelumnya 3 Interaktif, Menyenangkan, Cara Gratis Untuk Mulai Belajar Bahasa Pemrograman RubyRuby adalah bahasa scripting ekspresif, sangat tingkat tinggi. Ini digunakan di Web terutama sebagai bagian dari kerangka kerja pengembangan web Ruby on Rails, tetapi juga mandiri. Jika Anda ingin tahu tentang apa itu Ruby (bukan ... Baca lebih banyak ) untuk mengkompilasi
• Jade [URL Rusak Dihapus] | Membutuhkan Node.js (Anda akan menemukan pengantar di sini Apa itu Node? JS dan Mengapa Saya Harus Peduli? [Pengembangan web]JavaScript hanyalah bahasa pemrograman sisi klien yang berjalan di browser, bukan? Tidak lagi. Node.js adalah cara menjalankan JavaScript di server; tapi itu jauh lebih baik. Jika... Baca lebih banyak ) untuk mengkompilasi
• Ramping | Membutuhkan Ruby untuk dikompilasi (seperti di atas)

CSS

CSS memungkinkan konten semantik dan presentasi dokumen ditempatkan secara terpisah, membuat fitur-fitur gaya seperti tata letak, warna, dan tipografi mudah dibawa dan berlaku untuk dokumen yang berbeda. Ketika konten dan desain visual terpisah, pengembang mendapatkan lebih banyak fleksibilitas dan konsistensi dalam desain visual.

Mengapa Anda Membutuhkannya

Situs web tanpa gaya terlihat mengerikan dan tidak menarik. Meskipun dapat dibaca, CSS adalah landasan hierarki informasi visual karena tata letak yang dimungkinkannya. Misalnya, gambar di bawah ini menggambarkan sebagian menu navigasi teratas saat ini makeuseof.com, tanpa CSS yang diterapkan.

Perhatikan bahwa selain tipografi dan warna, menu yang tidak bergaris vertikal karena itulah gaya default browser. Tidak mungkin Anda ingin membuat kembali internet tahun 1990, jadi Anda ingin dosis pengetahuan CSS yang sehat dan berkelanjutan benar-benar kompeten. Selain itu, dengan meningkatnya ukuran dan perangkat yang terhubung berbeda seperti iPhone, tablet, dan lain-lain keterampilan yang paling penting telah menjadi "Desain Responsif," atau halaman web yang beradaptasi dengan layar yang berbeda ukuran. Ini semua dilakukan melalui CSS.

Anatomi Aturan CSS

Aturan CSS ditulis di salah satu dari tiga tempat: a) sebaris dalam suatu elemen, b) dengan membuat a

Idealnya, gaya ditulis dalam lembaran gaya terpisah yang dapat dirujuk oleh beberapa halaman web. Dengan menggunakan seperangkat aturan yang sama, penulis dapat menghemat waktu dan membuat presentasi visual dengan lebih teratur dan konsisten. (Gaya sebaris tidak dapat membantu Anda membentuk lapisan dasar gaya situs atau bahkan lebar halaman - itulah mengapa mereka paling baik digunakan secara hemat untuk memenuhi kebutuhan spesifik.)

Aturan CSS dimulai dengan a pemilih, ditulis dengan warna hijau di bawah. Dalam hal ini, pemilih untuk aturan adalah hal, untuk paragraf: aturan berlaku untuk elemen paragraf. Aturan terlampir dalam {curly braces}, berlawanan dengan . Dalam hal ini, aturannya membuat jenis huruf untuk teks paragraf menjadi normal.

Aturan CSS bisa menjadi lebih kompleks dan rumit dari yang dimungkinkan oleh pengenalan ini. Itu sebabnya, dalam hal waktu yang dijanjikan, Anda dapat mengharapkan CSS akan membutuhkan waktu lebih lama untuk dikuasai daripada HTML.

Kredit Ekstra (Lanjutan)

Sama seperti HTML, CSS memiliki pengoptimalan bagi mereka yang ingin mencapai lebih banyak, lebih cepat.

• KELANCANGAN (dan SCSS) | Membutuhkan Ruby, seperti di atas
• Kurang | Membutuhkan Node.js, seperti di atas

JavaScript

Ketika banyak orang berpikir tentang coding, mereka menganggapnya sebagai menginstruksikan komputer bagaimana caranyamelakukan sesuatu. Ini adalah tugas bahasa pemrograman, tambahan terakhir kami untuk persamaan front-end.

Bahasa pemrograman biasanya diklasifikasikan berdasarkan tingkat abstraksi yang mereka gunakan dalam semantik mereka, bahasa leluhur mereka, bahasa mereka paradigma, dan mereka disiplin mengetik. JavaScript menentang klasifikasi sederhana karena telah diperluas ke dalam begitu banyak kerangka kerja, agar sesuai dengan berbagai tujuan. Ini adalah bunglon hybrid yang fleksibel, samar-samar diturunkan dari keluarga C, multi-paradigma, longgar bermain murai dengan konsep kode. Ini adalah contoh yang bagus dari bahasa tujuan yang sangat umum, atau contoh yang sangat buruk dari berbagai jenis bahasa.

Mengapa Anda Membutuhkannya

Mengapa belajar JavaScript? Seperti yang ditunjukkan oleh rekan saya, JavaScript memiliki champion dan pencela 6 Bahasa Pemrograman termudah untuk Belajar untuk PemulaMempelajari program adalah tentang menemukan bahasa yang tepat, sama halnya dengan proses edifikasi. Berikut adalah enam bahasa pemrograman termudah untuk pemula. Baca lebih banyak , khususnya dalam hal kesesuaiannya untuk pelajar yang baru pertama kali belajar. ini mungkin itu bahasa pemrograman paling populer saat ini. Meskipun tidak memberikan dasar yang kuat untuk memahami bagian lain dari kerajaan pengkodean, ada argumen yang bagus untuk mempelajari JS bersama Ruby atau PHP.

Yang mengatakan, vanilla JS tidak melangkah terlalu jauh - kerangka kerja bertanggung jawab atas halaman web saat ini.

Kerangka Populer

• Angular, kerangka kerja JS Google untuk aplikasi web seperti GMail dan yang lainnya.
• JQuery Menjadikan Web Interaktif: Pengantar Untuk jQueryjQuery adalah perpustakaan skrip sisi klien yang digunakan hampir setiap situs web modern - menjadikan situs web interaktif. Ini bukan satu-satunya perpustakaan Javascript, tetapi itu adalah perpustakaan yang paling maju, paling didukung, dan paling banyak digunakan ... Baca lebih banyak , sudah dicakup oleh MUO di sini Menjadikan Web Interaktif: Pengantar Untuk jQueryjQuery adalah perpustakaan skrip sisi klien yang digunakan hampir setiap situs web modern - menjadikan situs web interaktif. Ini bukan satu-satunya perpustakaan Javascript, tetapi itu adalah perpustakaan yang paling maju, paling didukung, dan paling banyak digunakan ... Baca lebih banyak , yang mendukung WordPress di antara aplikasi lain.
• Reaksi, dibangun oleh legiun rekayasa Facebook, dibuat untuk membuat UI.

Kredit Ekstra (Lanjutan)

Sifat palimpsest JavaScript meminta beberapa struktur. Masing-masing sugarcoats di bawah ini berjalan menuju implementasi

• CoffeeScript | Membutuhkan Node.js, seperti di atas
• Naskah | Membutuhkan Node.js, seperti di atas

Di mana Mulai Belajar

Karena pengembangan front-end sekarang secara luas dianggap sebagai keterampilan kerja yang penting bagi semua pekerja pengetahuan, Anda akan menemukan banyak titik awal dalam bentuk kursus e-learning. Berikut adalah daftar kurasi yang kami buat untuk pembaca kami:

• Coursera (Dibayar)
  Coursera mengumpulkan kursus online dari universitas dan institusi pembelajaran. Kisaran harga turun dari 50-250 USD untuk kursus, tetapi mereka mengiklankan standar tinggi pengetahuan dan hasil kompetensi tinggi.
• Dasbor Majelis Umum (Gratis)
  Majelis Umum adalah pilihan populer untuk pendidikan profesional berbayar. Dash adalah penawaran gratis mereka, dan mencakup HTML / CSS / JS.
• MakeUseOf.com - Bundel Learn to Code 2017 (Dibayar, Pasang)
  Akses seumur hidup ke 10 kelas yang meliputi keseluruhan pengembangan web depan dan belakang, dengan biaya minimal 20 USD.
• Jaringan Pengembang Mozilla (Gratis)
  MDN adalah otoritatif, tetapi mengambil bagian dari gaya dokumentasi lebih dari instruksi kelas-gaya atau penawaran online-gamified.
• Rumah pohon (Dibayar)
  Penawaran daring lain, yang ini dibayar per bulan, bukannya kursus. Ini datang atas rekomendasi Karen X Cheng dalam postingannya yang viral “Cara mendapatkan pekerjaan sebagai desainer tanpa harus pergi ke sekolah desain.”
• Tutorial Desain Web oleh Envato Tuts + (Campuran Konten Gratis dan Berbayar dengan Kualitas Setara)
  Sejumlah artikel satu kali dan serangkaian multi-bagian informasi berkualitas tinggi, spesifik, dan bertarget biasanya pada satu subjek.

Mulai

Salah satu keuntungan yang dimiliki pengembangan front-end untuk pemula adalah, untuk sebagian besar, tidak diperlukan alat eksklusif yang mahal: alat paling dasar untuk pengembangan front-end adalah editor teks yang dipasangkan dengan browser Anda pilihan:

• Editor teks suka Editor teks Atom Git, Teks Sublim (berbayar), atau Kode VS oleh Microsoft
• Peramban seperti Mozilla Firefox atau Google Chrome
• Ini bermanfaat, tetapi di luar ruang lingkup artikel ini, memiliki hosting atau server lokal (seperti XAMPP) mempersiapkan.

Lebih nyaman, jika kurang permanen, alternatifnya adalah editor langsung berbasis web seperti:

• Codepen.io
• JSbin.com

Potongan pendek

Struktur HTML, sebagian besar, dipahami dengan baik, dan tidak layak untuk dikunci ulang dengan frekuensi tinggi. Untuk CSS, style sheet situs rata-rata adalah ribuan baris, dan Anda dapat bertaruh bahwa beberapa yang modern ditulis secara eksklusif dengan tangan. Dan dalam hal interaktivitas, standar-standar tertentu telah muncul. Berdasarkan fakta-fakta itu, Anda akan menemukan bahwa banyak pengembang front-end menggunakan kerangka kerja yang sudah dibangun sebelumnya sebagai tulang punggung, dan kemudian mengubah, menghapus, atau mengganti sesuai kebutuhan.

• Bootstrap, yang dikembangkan awalnya oleh Twitter, berisi templat HTML, CSS, dan JS yang banyak ditemukan di web saat ini. Bootstrap hampir a bahasa pergaulan dalam memulai pengembangan web.
• Dasar tagihan dirinya sebagai kerangka kerja paling maju di dunia, dan dibangun dengan penekanan pada ukuran kecil dan kecepatan.

Materi referensi

• Terlepas dari Daftar - Publikasi A-list, "Untuk Orang yang Membuat Situs Web"
• Bisakah saya menggunakan - “Tabel dukungan untuk HTML5, CSS3, dll”
• Trik CSS - Hub untuk komunitas CSS dan sumber pengetahuan tentang praktik terbaik dan kompatibilitas
• Dokumentasi Standar Hidup HTML - “Standar Hidup - Edisi untuk Pengembang Web”
• Silakan HTML5 - "Gunakan yang baru dan mengkilap secara bertanggung jawab"
• Majalah Hancur - “Untuk Desainer dan Pengembang Web Profesional”

Kesimpulan

Kami harap Anda menikmati orientasi ini ke dunia front-end. Seperti yang Anda lihat, pengembangan front-end adalah bidang yang diisi dengan banyak kemungkinan, tetapi memiliki banyak titik masuk. Mempelajari hal itu akan menambah keterampilan yang mengesankan untuk portofolio Anda, dan memungkinkan Anda untuk mengambil langkah selanjutnya dalam karier Anda, atau beralih ke yang sama sekali baru.

Pengembang: Apa yang ada di tumpukan front-end Anda?

Pemula: Apa lagi yang bisa kami sertakan untuk mengarahkan Anda?