Silabus Web Designer

Silabus Web Designer Basic

Durasi Pembelajaran

Durasi Pembelajaran level Basic adalah sebanyak 10 x pertemuan, setiap pertemuan yaitu @120 menit (2 jam) tergantung daya tangkap Peserta/siswa. Setelah melewati 10 x pertemuan Peserta/siswa ingin belajar lebih dalam (tingkat lanjut) bisa mengambil layanan level Advanced atau Mahir dengan cara menghubungi Creative Media.

Standar Kompetensi (SK), Kompetensi Dasar (KD) dan Indikator.

A. Standar Kompetensi

User/siswa memiliki pemahaman mengenai Dasar Pemrograman HTML dan Cascading Style Sheets (CSS3). Membuat website statis Company Profile yang responsive untuk berbagai tampilan (Tablet & Smartphone)

B. Kompetensi Dasar & Indikator

Pertemuan 1

Introdution website, pemahaman mengenai desain web yang responsive, dan pengenalan dasar-dasar HTML.

Indikator :

  • Introduction website
  • Perkenalan sejarah, perkembangan & jenis-jenis website
  • Pemahaman website responsive
  • Instalasi Sublime Text dan Dreamweaver
  • Pengenalan dasar-dasar HTML
Pertemuan 2

user/siswa menerapkan dan mengimplemtasikan sintaks pada HTML5

Indikator :

  • Menampilkan Text di HTML5
  • Menampilkan Link di HTML5
  • Menampilkan List di HTML5
  • Menampilkan Image di HTML5
  • Menampilkan Color di HTML
  • Table di HTML5
  • Form dan systematic local storage di HTML5
Pertemuan 3

user/siswa mampu mengerti bagaimana menggunakan sintaks CSS serta mengimplementasikan CSS pada HTML

Indikator :

  • Mengerti istilah dasar CSS (selector, property dan value)
  • Membuat sintaks CSS
  • 3 cara mengimplementasikan CSS pada HTML
Pertemuan 4

user/siswa mampu memahami dan menerapkan media Query (using media queries) di CSS

Indikator :

  • Syntax, logical operators
  • Media features (color, color-index, aspect-ratio, device-height, grid,etc)
  • Mozilla-specific media features
Pertemuan 5

user/siswa mampu memahami dan menerapkan Semantic Content Markup dan Tag tag baru pada HTML5

Indikator :

  • New Semantic Elements in HTML5 (header, nav, section, aside, articel, footer, etc)
  • Penerapan Tag tag baru pada HTML5 (basic, formating, style/section, meta info, etc)
Pertemuan 6

user/siswa mampu bekerja dengan audio dan video, menggunakan web storage, form untuk input type

Indikator :

  • Bekerja dengan audio dan video
  • Menggunakan web storage
  • Penggunaan form untuk input type
Pertemuan 7

user/siswa mampu membuat kontent page dengan menggunakan Struktur Cascading Style Sheets (CSS3) meliputi syntac, modul, border, background, gradient, efek text, dll.

Indikator :

  • Sintaks CSS3, modul CSS3, border
  • Background, gradient, efek teks
  • Web font, transformasi 2D , transformasi 3D
  • Transisi, multi kolom, user interface
Pertemuan 8

user/siswa mampu menggunakan layout fluid untuk desain web yang

Indikator :

  • Membuat header dan footer website
  • Tipe layout, desain responsif dengan layout Fluid
  • Membangun desain fluid menggunakan grid CSS
  • Membangun grid dgn CSS
  • Memberikan spasi, pengaturan panjang teks
Pertemuan 9

user/siswa mampu membuat layout responsive website untuk berbagai tampilan tablet, smartphone

Indikator :

  • Membuat layout responsif
  • Framework di desain responsif
  • Framework di CSS
Pertemuan 10

Pembuatan tugas akhir, user/siswa mampu membuat desain website responsive untuk tampilan tablet dan smartphone

Indikator :

  • Review pembelajaran
  • Penyusunan konsep tugas akhir siswa
  • Pembuatan tugas akhir
  • Pengumpulan tugas akhir siswa

Silabus Web Designer Advanced

Durasi Pembelajaran

Durasi Pembelajaran level Advanced adalah sebanyak 8 x pertemuan, setiap pertemuannya yaitu @120 menit (2 jam). Jika masih membutuhkan bimbingan secara ekslusif bisa mengajukan tambahan paket Animasi level Advanced ke Creative Media dengan cara menghubungi pihak kantor atau langsung datang ke kantor Creative Media.

Standar Kompetensi (SK), Kompetensi Dasar (KD) dan Indikator.

A. Standar Kompetensi

User/siswa memiliki pemahaman mendalam pada Cascading Style Sheets (CSS) tingkat lanjut dan pemahaman java script serta mengimplementasikan bootstrap untuk menghasilkan template website yang responsive untuk tampilan mobile.

B. Kompetensi Dasar & Indikator

Pertemuan 1

user/siswa mampu memahami konsep UX (User Experience).

Indikator :

  • Memahami pengertian User
  • Mampu mendeteksi jenis user yang aka berinteraksi dengan design yang akan
  • Mampu melakukan research tentang design yang dibuat oleh berbagai macam model bisnis.
  • Mampu menganalisa dan menentukan design yang sederhana (user friendly) tetapi tidak meninggalkan sisi fungsionalitas yang harus ada.
Pertemuan 2

user/siswa mampu memahami konsep UI (User Interface)

Indikator :

  • Mampu memahami karakteristik GUI (Graphical User Interface).
  • Mampu memahami prinsip-prinsip User Interface
  • Mampu memahami tipe-tipe User
  • Mampu memahami cara penyajian informasi kepada
  • Mampu memahami pengertian dan kegunaan User Guidance
Pertemuan 3

user/siswa mampu memahami konsep Document Object Model (DOM).

Indikator :

  • Memahami konsep, pengertian, serta struktur DOM
  • Mampu memahami bagaimana mengakses elemen-elemen
  • Mampu memanipulasi tampilan elemen DOM dengan kelas
  • Mampu menggunakan Event menggunakan HTML DOM.
Pertemuan 4

user/siswa mampu membuat elemen-elemen web dan media query yang responsive.

Indikator :

  • Mampu mengerti CSS Media Query
  • Membuat CSS hover (efek bercahaya saat cursor menyentuh objek
  • Membuat padding responsive berdasarkan ukuran device
  • Mengubah navigasi – navigasi dengan memanfaatkan css media query
  • Mengubah gambar – gambar dengan memanfaatkan css media query.
  • Mengubah ukuran video dengan memanfaatkan css media query
  • Membuat tombol css3 bercahaya ketika proses loading
Pertemuan 5

user/siswa mampu memahami framework Bootstrap.

Indikator :

  • Pengenalan dan penggunaan boostrap pada HTML.
  • Pengenalan font awesome library da cara penerapannya.
  • Pengenalan assets library boostrap.
  • Pengenalan grid di boostrap.
  • Pengenalan dan membuat main container page.
  • Membuat slider dengan menggunakan framework boostrap.
Pertemuan 6

user/siswa mampu membuat Layout Responsive.

Indikator :

  • Pengenalan kolom yang ada pada Framework Bootstrap
  • Membuat tampilan page dengan memanfaatkan kolom yang ada pada Framework Bootstrap.
  • Pengenalan tipe-tipe Button yang ada pada Framework Bootstrap.
  • Membuat input controll (button, textfield, checkbox, radio button, dropdown list dan toggle).
  • Membuat validasi inputan form menggunakan javascript.
  • Membuat smooth transition (transisi yang halus) pada layout.
Pertemuan 7

user/siswa mampu membuat UI (User Interface) menggunakan bootstrap  dan jQuery.

Indikator :

  • Membuat image gallery filter menggunakan Framework Bootstrap.
  • Membuat komponen navigasi (menu website) dengan menggunakan framework Bootstrap
  • Membuat pop up efek (modal bootstrap) sederhana menggunakan framework Bootstrap
  • Membuat komponen informasi seperti tooltip, icon, message box, dll
  • Membuat container accordion.
Pertemuan 8

pembuatan tugas akhir siswa yaitu HTML 5 Template baik dari sisi Front End atau Back End dilengkapi dengan Bootstrap dan Jquery serta plugin-plugin pendukung berupa Javascript.

Indikator :

  • Membuat Halaman Utama HTML
  • Membuat Template Pages antara lain :
    • About Us dan Contact Us
    • Blog dan Gallery
    • Image Slider
    • Form Validation (Login dan Sign Up)
    • Google Maps
    • Chart, Datatable, UI Element dan Widget