“Kewargaan Digital tidak sekadar mengajarkan menggunakan sebuah alat, melainkan sebuah cara untuk mempersiapkan diri menjadi bagian dari warga digital dalam memanfaatkan teknologi. ”
Lingkungan Digital
Jumat, 07 Februari 2025
Selasa, 04 Februari 2025
Desain Landing Page HTML dan CSS di Figma
JOBSHEET
Membuat Desain Landing Page HTML di Figma
A. TUJUAN
- Memahami konsep desain UI/UX untuk landing page.
- Mendesain tampilan landing page yang menarik dan fungsional di Figma.
- Menggunakan komponen dasar Figma seperti frame, text, image, dan auto layout.
- Menyiapkan desain yang siap dikonversi ke HTML & CSS.
B. ALAT DAN BAHAN
✅ Laptop/PC dengan koneksi internet
✅ Akun Figma (www.figma.com)
✅ Aset gambar/icon (opsional)
✅ Referensi desain (dribbble, behance, atau web favorit)
C. LANGKAH KERJA
1. Membuat Project Baru
- Buka Figma dan login ke akun Anda.
- Klik New File untuk membuat proyek baru.
- Atur ukuran frame dengan memilih Desktop (1440px width) atau sesuai kebutuhan.
2. Menentukan Struktur Landing Page
Landing page umumnya memiliki:
✅ Header → Logo, Navigasi, CTA (Call to Action)
✅ Hero Section → Gambar utama, headline, subheadline, tombol aksi
✅ Fitur/Benefit → Daftar keunggulan produk/jasa
✅ Testimoni → Ulasan dari pengguna
✅ CTA Section → Formulir pendaftaran atau tombol ajakan
✅ Footer → Informasi kontak, link sosial media
3. Mendesain Komponen Landing Page di Figma
-
Header
- Gunakan Text Tool (T) untuk menambahkan logo dan navigasi.
- Buat tombol CTA dengan Rectangle (R) dan berikan warna mencolok.
-
Hero Section
- Tambahkan headline dan subheadline menggunakan Text Tool.
- Masukkan gambar dengan Place Image (Shift + Ctrl + K).
-
Fitur/Benefit
- Buat 3-4 kolom dengan Auto Layout untuk daftar fitur.
- Tambahkan ikon menggunakan plugin Material Icons atau Feather Icons.
-
Testimoni
- Gunakan Ellipse Tool (O) untuk foto pelanggan.
- Tambahkan teks ulasan dan nama pelanggan.
-
CTA Section
- Desain tombol atau form sederhana untuk pengisian email.
-
Footer
- Tambahkan informasi kontak, link ke sosial media, dan copyright.
4. Finishing dan Prototyping
- Gunakan warna yang sesuai dengan branding (Gunakan plugin Coolors untuk palet warna).
- Pastikan teks memiliki kontras yang baik agar mudah dibaca.
- Atur Padding & Spacing agar desain rapi dan nyaman dipandang.
- Gunakan fitur Prototype untuk melihat interaksi dasar (misal: hover pada tombol).
5. Export Desain untuk Coding HTML
- Klik Export di panel kanan untuk menyimpan gambar aset (PNG/SVG).
- Copy kode CSS dari Figma (Inspect > CSS).
- Siapkan desain untuk dikonversi ke HTML & CSS.
D. PENILAIAN
| No | Kriteria Penilaian | Skor (1-5) |
|---|---|---|
| 1 | Struktur halaman sesuai standar landing page | |
| 2 | Penggunaan warna, font, dan elemen UI yang konsisten | |
| 3 | Kerapihan layout dan kesesuaian ukuran elemen | |
| 4 | Fungsi tombol CTA jelas dan menonjol | |
| 5 | File siap digunakan untuk pengkodean HTML & CSS |
📌 Catatan:
- Pastikan desain responsif untuk tampilan mobile dan desktop.
- Simpan file Figma dengan nama yang sesuai, misalnya 1. Nama_LandingPage
🚀 Selamat Mencoba dan Berkreativitas! 🎨💻
Lihat link youtube berikut untuk lebih jelasnya.
Tutorial Membuat Desain Halaman Website Landing Page Dengan Figma
Senin, 03 Februari 2025
Poster Tata Tertib Penggunaan Laboratorium RPL
Buatlah desain poster tata tertib penggunaan laboratorium RPL menggunakan Coreldraw!
Kumpulkan tugasnya pada link yang sudah disediakan!
Berikut adalah isi posternya.
TATA TERTIB
PENGGUNAAN LABORATORIUM RPL (REKAYASA PERANGKAT LUNAK)
A. KETENTUAN UMUM
- Laboratorium RPL hanya boleh digunakan
untuk kegiatan belajar mengajar, praktik, dan penelitian yang berkaitan
dengan pemrograman dan teknologi informasi.
- Pengguna laboratorium harus mendapatkan
izin dari guru atau teknisi sebelum menggunakan fasilitas.
- Setiap pengguna wajib mengisi daftar hadir
sebelum menggunakan laboratorium.
- Pengguna diharapkan menjaga kebersihan,
ketertiban, dan keamanan selama berada di laboratorium.
B. KESELAMATAN DAN
KETERTIBAN
- Dilarang membawa makanan dan minuman ke
dalam laboratorium.
- Tidak diperbolehkan menyentuh atau
mengutak-atik perangkat tanpa izin dari guru atau teknisi.
- Dilarang mencabut, mengubah, atau
memindahkan kabel dan perangkat tanpa izin.
- Dilarang membawa peralatan laboratorium
keluar tanpa seizin pihak yang berwenang.
- Tidak diperkenankan bermain game atau
membuka situs yang tidak berhubungan dengan pembelajaran.
- Pengguna wajib menggunakan komputer atau
perangkat dengan hati-hati dan bertanggung jawab.
- Tidak diperbolehkan menginstal atau
menghapus software tanpa izin.
- Apabila terjadi kerusakan pada komputer
atau perangkat lainnya, segera laporkan kepada guru atau teknisi.
C. KEAMANAN DATA
DAN JARINGAN
- Dilarang menggunakan perangkat
laboratorium untuk kegiatan yang melanggar hukum, seperti hacking dan
penyebaran virus.
- Setiap pengguna wajib menyimpan data
pribadi atau tugasnya di media penyimpanan sendiri (flashdisk, cloud
storage, dll.), karena data yang tersimpan di komputer laboratorium dapat
dihapus sewaktu-waktu.
- Tidak diperbolehkan mengakses atau
mengubah file pengguna lain tanpa izin.
- Jaringan internet laboratorium hanya boleh
digunakan untuk kegiatan akademik.
D. SANKSI
PELANGGARAN
- Peringatan lisan bagi pelanggaran ringan.
- Teguran tertulis dan pembatasan akses
laboratorium bagi pelanggaran berulang.
- Penggantian perangkat yang rusak jika
terbukti akibat kelalaian atau kesengajaan.
- Pemberian sanksi sesuai kebijakan sekolah
untuk pelanggaran berat.
E. PENUTUP
Tata tertib ini dibuat
untuk menciptakan lingkungan belajar yang aman, nyaman, dan kondusif di
Laboratorium RPL. Semua pengguna diharapkan menaati peraturan ini dengan penuh
tanggung jawab.
📌 "Jaga fasilitas, gunakan dengan bijak, dan belajar dengan semangat!"
---------
🖥️ TATA TERTIB LABORATORIUM RPL 🖥️
📢 Gunakan dengan Bijak, Belajar dengan Nyaman
📌 KETENTUAN UMUM
✅ Laboratorium hanya untuk belajar, praktik, dan penelitian RPL.
✅ Wajib izin guru/teknisi sebelum menggunakan fasilitas.
✅ Isi daftar hadir sebelum masuk.
✅ Jaga kebersihan, ketertiban, dan keamanan.
⚠️ KESELAMATAN & KETERTIBAN
🚫 DILARANG:
❌ Membawa makanan & minuman.
❌ Mengutak-atik perangkat tanpa izin.
❌ Mencabut atau memindahkan kabel & alat.
❌ Bermain game atau membuka situs tidak edukatif.
❌ Menginstal atau menghapus software tanpa izin.
💡 WAJIB:
✔ Gunakan komputer dengan hati-hati.
✔ Laporkan jika ada kerusakan.
🌐 KEAMANAN DATA & JARINGAN
🔒 Tidak boleh hacking atau menyebar virus.
📂 Simpan data pribadi di flashdisk/cloud.
🚫 Dilarang mengakses atau mengubah file orang lain.
🌍 Internet hanya untuk keperluan belajar.
⚖️ SANKSI PELANGGARAN
🚨 Peringatan bagi pelanggaran ringan.
📜 Teguran & pembatasan akses bagi yang melanggar berulang.
💰 Ganti rugi jika merusak alat akibat kelalaian.
⛔ Sanksi sesuai aturan sekolah untuk pelanggaran berat.
📢 "JAGA FASILITAS – GUNAKAN DENGAN BIJAK – BELAJAR DENGAN SEMANGAT!" 🎯
Jumat, 10 Januari 2025
SISTEM KOMPUTER
Komputer merupakan sebuah sistem atau berupa seperangkat unsur yang secara teratur saling berkaitan sehingga membentuk kesatuan utuh untuk menyelesaikan berbagai permasalahan.
Sistem komputer merupakan kombinasi dari perangkat keras (hardware) dan perangkat lunak (software) yang mampu melakukan pekerjaan tertentu. Dan pemakai komputer disebut user atau brainware.
Selasa, 07 Januari 2025
Input User HTML
Input User
Input. Apakah Anda tahu makna dari
istilah tersebut? Jika dicari pada kamus, input memiliki arti masukan. Artinya,
kita dapat menangkap dan memanfaatkan data-data yang user berikan. HTML
memiliki elemen input untuk melakukan hal tersebut.
Saya yakin, pembaca semua pasti
sudah pernah memberikan input pada aplikasi web. Dengan kata lain, hingga detik
ini, kita semua sudah pernah bersinggungan dengan formulir dalam aplikasi web,
meskipun hanya satu hingga dua kali. Buktinya, Anda membuat akun di social
media dan login untuk menjelajahinya. Semua itu dilewati melalui input. Ini
merupakan salah satu penerapan dari sebuah input.
Hampir seluruh website memiliki
elemen input. Data yang dimasukkan akan diproses untuk kebutuhan operasional
website dalam menunjang pekerjaan manusia. Ada banyak sekali macam-macam input
di dunia ini. HTML menyediakan beragam input yang dapat dimanfaatkan.