CP-A: Etika Digital & Lisensi - WEB STATIS

CP-A: Etika Digital & Lisensi - WEB STATIS
Publish

CP-A: Etika Digital & Lisensi

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa mampu:

  1. Memahami konsep hak cipta (copyright) dan lisensi dalam dunia digital

  2. Menjelaskan berbagai jenis lisensi Creative Commons dan penggunaannya

  3. Menerapkan atribusi yang benar untuk sumber digital

  4. Mengidentifikasi dan menghindari plagiarisme dalam karya digital


1. Pengantar Hak Cipta Digital

Apa itu Hak Cipta (Copyright)?

Hak cipta adalah hak eksklusif pencipta untuk:

  • Memperbanyak karya

  • Mendistribusikan karya

  • Memodifikasi karya

  • Menampilkan karya secara publik

Karya yang Dilindungi Hak Cipta

  • Teks: artikel, blog, buku, copywriting

  • Gambar: foto, ilustrasi, grafik, logo

  • Audio: musik, podcast, sound effect

  • Video: film, animasi, tutorial

  • Kode: software, website, aplikasi

Mitos vs Fakta Hak Cipta

❌ Mitos yang Salah

  • "Jika tidak ada tanda ©, berarti bebas dipakai"

  • "Mengubah 10% sudah tidak melanggar"

  • "Untuk pendidikan boleh pakai tanpa izin"

  • "Kalau gratis di internet, bebas dipakai"

✅ Fakta yang Benar

  • Hak cipta otomatis ada saat karya diciptakan

  • Tidak perlu daftar atau tanda © untuk mendapat perlindungan

  • Fair use sangat terbatas dan kontekstual

  • Gratis ≠ bebas digunakan tanpa izin


2. Lisensi Creative Commons (CC)

Apa itu Creative Commons?

Creative Commons adalah sistem lisensi yang memungkinkan pencipta membagikan karya dengan ketentuan tertentu.

4 Elemen Dasar CC

1. BY (Attribution) - Atribusi ⚠️

  • Wajib menyebutkan nama pencipta

  • Wajib menyebutkan sumber/link

  • Wajib menyebutkan lisensi yang digunakan

2. SA (ShareAlike) - BerbagiSerupa 🔄

  • Karya turunan harus menggunakan lisensi yang sama

  • Tidak boleh mengubah lisensi menjadi lebih ketat

3. NC (NonCommercial) - NonKomersial 🚫💰

  • Tidak boleh digunakan untuk tujuan komersial

  • Tidak boleh menghasilkan keuntungan finansial

4. ND (NoDerivatives) - TanpaDerivasi 🚫✏️

  • Tidak boleh memodifikasi, mengubah, atau membuat turunan

  • Hanya boleh menggunakan persis seperti aslinya

6 Kombinasi Lisensi CC

1. CC BY (Paling Bebas)

  • ✅ Gunakan untuk apapun (termasuk komersial)

  • ✅ Modifikasi bebas

  • ⚠️ Wajib atribusi

  • Contoh: Wikipedia, data pemerintah

2. CC BY-SA

  • ✅ Gunakan untuk apapun (termasuk komersial)

  • ✅ Modifikasi bebas

  • ⚠️ Wajib atribusi

  • 🔄 Hasil modifikasi harus lisensi sama

  • Contoh: Wikipedia content

3. CC BY-NC

  • ✅ Gunakan untuk non-komersial

  • ✅ Modifikasi bebas

  • ⚠️ Wajib atribusi

  • 🚫💰 Tidak boleh komersial

  • Contoh: Foto blog personal

4. CC BY-NC-SA

  • ✅ Gunakan untuk non-komersial

  • ✅ Modifikasi bebas

  • ⚠️ Wajib atribusi

  • 🚫💰 Tidak boleh komersial

  • 🔄 Hasil modifikasi harus lisensi sama

5. CC BY-ND

  • ✅ Gunakan untuk apapun (termasuk komersial)

  • 🚫✏️ Tidak boleh dimodifikasi

  • ⚠️ Wajib atribusi

  • Contoh: E-book, artikel lengkap

6. CC BY-NC-ND (Paling Ketat)

  • ✅ Gunakan untuk non-komersial saja

  • 🚫✏️ Tidak boleh dimodifikasi

  • ⚠️ Wajib atribusi

  • 🚫💰 Tidak boleh komersial

Lisensi Lainnya

Public Domain (CC0)

  • Tidak ada hak cipta

  • Bebas digunakan tanpa pembatasan

  • Tidak wajib atribusi (tapi tetap sopan untuk menyebutkan)

All Rights Reserved (©)

  • Semua hak dilindungi

  • Wajib izin dari pemilik untuk penggunaan apapun

  • Default jika tidak ada lisensi lain


3. Atribusi yang Benar

Format Atribusi Standard (TASL)

Title - Author - Source - License

Contoh Atribusi Lengkap

"Sunset Beach" by John Doe is licensed under CC BY 2.0. 
Source: https://example.com/photo123

Template Atribusi

"[Judul Karya]" by [Nama Pencipta] is licensed under [Jenis Lisensi]. 
Source: [URL sumber]

Contoh Atribusi dalam Berbagai Konteks

1. Atribusi Gambar di Website

<figure>
    <img src="sunset.jpg" alt="Pemandangan sunset di pantai">
    <figcaption>
        "<a href="https://example.com/photo123">Sunset Beach</a>" 
        by <a href="https://photographer.com">John Doe</a> 
        is licensed under 
        <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>
    </figcaption>
</figure>

2. Atribusi dalam Presentasi

Slide footer: Image: "Tech Workspace" by Jane Smith (CC BY-SA 3.0)

3. Atribusi dalam Dokumen

Gambar 1. Diagram alur kerja. Sumber: "Workflow Diagram" oleh Tech Team, 
berlisensi CC BY 4.0. https://example.com/diagram

4. Atribusi Karya yang Dimodifikasi

"Mountain Landscape (Modified)" by [Your Name], based on 
"Original Mountain" by Original Author, licensed under CC BY 2.0.
Source: https://original-source.com

Atribusi untuk Berbagai Media

Font/Typography

/* Font atribusi dalam CSS */
/*
Font: "Open Sans" by Google Fonts
License: Apache License 2.0
Source: https://fonts.google.com/specimen/Open+Sans
*/

Icon Sets

<!-- Icon atribusi -->
<!-- Icons by Feather Icons (MIT License) - https://feathericons.com/ -->
<i data-feather="home"></i>

Audio/Music

Background music: "Peaceful Morning" by Composer Name
Licensed under CC BY 3.0
Source: https://freemusicarchive.org/music/composer/peaceful-morning

4. Menghindari Plagiarisme

Apa itu Plagiarisme?

Plagiarisme adalah penggunaan karya, ide, atau kata-kata orang lain tanpa memberikan kredit yang layak kepada sumber asli.

Jenis-jenis Plagiarisme

1. Plagiarisme Langsung

  • Copy-paste tanpa tanda kutip

  • Menggunakan karya orang lain sebagai karya sendiri

  • Tidak menyebutkan sumber sama sekali

2. Plagiarisme Mosaic/Patchwork

  • Menggabungkan potongan dari berbagai sumber

  • Mengubah beberapa kata tapi struktur sama

  • Parafrase tanpa atribusi

3. Self-Plagiarisme

  • Menggunakan kembali karya sendiri yang sudah dipublikasi

  • Tidak menyebutkan publikasi sebelumnya

Cara Menghindari Plagiarisme

1. Selalu Berikan Atribusi

Menurut penelitian Smith (2023), "desain responsif meningkatkan 
user experience hingga 40%"[^1].

[^1]: Smith, J. (2023). "Responsive Design Impact Study". 
Web Design Journal. https://example.com/study

2. Gunakan Kutipan untuk Teks Langsung

Seperti yang dijelaskan dalam dokumentasi resmi:
> "Semantic HTML provides meaning to web content, making it 
> accessible to all users including those using assistive technologies."
> 
> — MDN Web Docs, "Semantic HTML Guidelines"

3. Parafrase dengan Benar

❌ Salah:
Desain responsif adalah desain yang menyesuaikan tampilan 
berdasarkan ukuran layar. (tanpa atribusi)

✅ Benar:
Berdasarkan prinsip desain web modern, responsivitas 
memungkinkan antarmuka beradaptasi dengan berbagai 
ukuran viewport (Nielsen, 2023).

Tools untuk Cek Plagiarisme

  • Grammarly Plagiarism Checker

  • Turnitin (untuk institusi)

  • Copyscape (untuk web content)

  • PlagiarismDetector.net


5. Sumber Legal untuk Web Development

Gambar & Foto

✅ Sumber Legal Gratis

  • Unsplash (unsplash.com) - CC0/Unsplash License

  • Pexels (pexels.com) - Pexels License

  • Pixabay (pixabay.com) - Pixabay License

  • Wikimedia Commons - Berbagai CC licenses

  • Freepik (freepik.com) - Freepik License (dengan atribusi)

✅ Sumber Legal Berbayar

  • Shutterstock - Royalty-free dengan license

  • Getty Images - Various licenses

  • Adobe Stock - Standard/Extended license

❌ Sumber yang Harus Dihindari

  • Google Images tanpa filter lisensi

  • Pinterest (bukan sumber asli)

  • Instagram tanpa izin

  • Situs web tanpa informasi lisensi jelas

Icon & Illustrations

✅ Sumber Recommended

  • Feather Icons (feathericons.com) - MIT License

  • Heroicons (heroicons.com) - MIT License

  • Font Awesome (fontawesome.com) - SIL OFL/MIT

  • Material Icons (material.io/icons) - Apache 2.0

  • Tabler Icons (tabler-icons.io) - MIT License

Fonts

✅ Font Legal

  • Google Fonts - Open Font License

  • Adobe Fonts (dengan subscription Creative Cloud)

  • Font Squirrel - Commercial use fonts

  • League of Moveable Type - Open source fonts

Audio & Music

✅ Sumber Legal

  • Freesound (freesound.org) - CC licenses

  • Free Music Archive - Various CC licenses

  • YouTube Audio Library - Creative Commons

  • Incompetech (incompetech.com) - CC BY licenses


6. Studi Kasus: Skenario Etika Digital

Kasus 1: Foto untuk Website Sekolah

Situasi: Anda butuh foto siswa belajar untuk website sekolah.


❌ Yang Tidak Boleh:

  • Mengambil foto dari Google Images

  • Screenshot dari Instagram sekolah lain

  • Menggunakan foto stock tanpa lisensi

✅ Yang Benar:

  • Foto sendiri dengan izin siswa/orangtua

  • Foto dari Unsplash dengan lisensi yang sesuai

  • Membeli dari stock photo dengan lisensi komersial

Kasus 2: Icon untuk Aplikasi Mobile

Situasi: Tim development butuh icon set untuk aplikasi.


❌ Yang Tidak Boleh:

  • Copy icon dari aplikasi lain

  • Menggunakan icon berbayar tanpa lisensi

  • Modifikasi sedikit icon yang berlisensi ketat

✅ Yang Benar:

  • Menggunakan Feather Icons (MIT License)

  • Design icon sendiri

  • Membeli icon set dengan lisensi yang sesuai

Kasus 3: Konten Blog Teknologi

Situasi: Menulis artikel tentang tutorial web development.


❌ Yang Tidak Boleh:

  • Copy-paste dari tutorial lain

  • Terjemahkan artikel tanpa izin

  • Gunakan screenshot tanpa atribusi

✅ Yang Benar:

  • Tulis dengan bahasa sendiri

  • Kutip sumber dengan proper attribution

  • Gunakan screenshot dengan izin atau fair use


Aktivitas Praktik

1. Audit Lisensi Website

Instruksi:

  1. Pilih 3 website (berita, e-commerce, portfolio)

  2. Periksa footer/about page untuk informasi copyright

  3. Identifikasi:

    • Jenis lisensi yang digunakan

    • Apakah ada atribusi untuk gambar/content

    • Apakah menggunakan content berlisensi dengan benar

2. Praktik Atribusi

Instruksi:

  1. Cari 5 gambar dari Unsplash dengan lisensi berbeda

  2. Buat atribusi yang benar untuk masing-masing

  3. Format untuk:

    • Penggunaan di website

    • Penggunaan di presentasi

    • Penggunaan di dokumen

3. Analisis Kasus Plagiarisme

Instruksi:

  1. Berikan 3 contoh konten web

  2. Identifikasi potensi plagiarisme

  3. Berikan solusi untuk menghindari masalah tersebut


Checklist Etika Digital

✅ Sebelum Menggunakan Konten Apapun

  • Periksa lisensi atau hak cipta

  • Pastikan penggunaan sesuai dengan lisensi

  • Siapkan atribusi yang benar

  • Dokumentasikan sumber untuk referensi

✅ Saat Membuat Atribusi

  • Sertakan judul karya (jika ada)

  • Sebutkan nama pencipta

  • Cantumkan sumber/URL

  • Sebutkan jenis lisensi

  • Format yang mudah dibaca dan dipahami

✅ Saat Menggunakan dalam Proyek

  • Konsisten dalam format atribusi

  • Letakkan atribusi di tempat yang visible

  • Update atribusi jika mengubah konten

  • Backup dokumentasi lisensi


Template Atribusi Siap Pakai

Template HTML

<div class="attribution">
    <p>
        "<a href="[URL_SUMBER]">[JUDUL_KARYA]</a>" 
        by <a href="[URL_AUTHOR]">[NAMA_AUTHOR]</a> 
        is licensed under 
        <a href="[URL_LISENSI]">[JENIS_LISENSI]</a>
    </p>
</div>

Template CSS untuk Styling Atribusi

.attribution {
    font-size: 0.8em;
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
}

.attribution a {
    color: #0066cc;
    text-decoration: none;
}

.attribution a:hover {
    text-decoration: underline;
}

Template Markdown

**Attribution:**
"[Judul]" by [Author] is licensed under [License]. 
Source: [URL]

Assessment Rubrik

Kriteria

4 (Excellent)

3 (Good)

2 (Fair)

1 (Needs Improvement)

Pemahaman Lisensi

Menjelaskan perbedaan semua jenis CC license dengan contoh

Memahami sebagian besar jenis lisensi

Memahami lisensi dasar

Pemahaman terbatas tentang lisensi

Praktik Atribusi

Atribusi lengkap dan benar sesuai standar

Atribusi baik dengan minor error

Atribusi dasar tapi tidak lengkap

Atribusi tidak sesuai standar

Identifikasi Masalah

Mengidentifikasi semua pelanggaran dan memberikan solusi

Mengidentifikasi masalah utama

Mengidentifikasi beberapa masalah

Kesulitan mengidentifikasi masalah

Penerapan Etika

Menerapkan prinsip etika secara konsisten

Umumnya mengikuti prinsip etika

Kadang mengikuti prinsip etika

Jarang menerapkan prinsip etika


Sumber Pembelajaran Tambahan

Website Referensi

  • Creative Commons: creativecommons.org

  • Copyright.gov: copyright.gov/help/faq

  • Fair Use Guidelines: fairuse.stanford.edu

  • WIPO Copyright: wipo.int/copyright

Tools Praktis

  • CC License Chooser: creativecommons.org/choose

  • Google Advanced Search (dengan filter usage rights)

  • TinEye Reverse Image Search: tineye.com

  • Creative Commons Search: search.creativecommons.org