Category Archives: TIK & Informatika

HTML5 dan CSS

Leave a reply

Materi selanjutnya adalah pengenalan HTML 5 dan CSS. Pengenalan materi ini diperlukan agar siswa nantinya dapat membuat profil perusahaan yang diantaranya berisi laporan kegiatan usaha dalam bentuk portal web dengan alamat domain sendiri (tidak berbayar).

Di kelas X, siswa dari X MIPA 1 dan MIPA 2 telah memperoleh pengenalan materi ini. Sementara X MIPA 3 dan X MIPA 4 belum memperoleh materi HTML 5 dan CSS. Oleh karena di kelas XI saya mengampu mata pelajaran PKWU untuk seluruh XI MIPA maka saya perlu mengulang materi ini. Nah, sekaligus untuk mengingatkan siswa yang pernah belajar bersama saya, maka saya melakukan metode pembelajaran tutor sebaya. Saya tentu saja akan membantu jika diperlukan 🙂

Berikut adalah foto kegiatan pembelajaran tutor sebaya


Sketsa Desain Web

Leave a reply

Sebelum memulai membuat sebuah website ada baiknya kita merancang sketsa web yang akan dibuat. Sketsa website ini berupa layout website yang berfungsi memudahkan kalian dalam proses penulisan program nantinya.

 

Berikut adalah beberapa contoh desain web



https://bertzzie.com/knowledge/desain-web-dasar/Layout.html



http://roypurbo.blogspot.co.id/2013/03/cara-membuat-membuat-website-dengan.html


http://unietha.blogspot.co.id/2010/11/desain-dan-sketsa-rancangan-web.html

google.com


http://www.tutorial-webdesign.com/3-langkah-dasar-membuat-desain-web-responsive/

http://materidw.blogspot.co.id/


google.com

http://jolbalqis.blogspot.co.id/2015/04/latihan-membuat-layout-web-menggunakan.html

Lainnya dapat kalian searching di internet.

Sementara tampilan tema situs dapat dibaca di sini.

HTML 5 #2

Leave a reply

HTML Style Atribute

<tagname style=”property:value;”>

contoh:

<p style=”color:blue;”>I am Blue</p>

<body style=”background-color:yellow”>

atau

<p style=”font-family:verdana; size:160%; color:blue; text-align:center”>Hello World</p>

keterangan:

size:160%, artinya jika standar browser ukuran huruf =12, berarti 3X12. % menunjukkan perbandingan bukan angka.

Masih ingat penulisan untuk warna? Warna solid (red, green, dstnya), RGB, dan Heksadesimal.

HTML 5 #1

Leave a reply

Di semester sebelumnya kalian telah belajar HTML. Maka di semester genap kita akan melanjutkan pembahasan materi TIK dengan HTML 5, CSS, dan JavaScript.

Materi TIK 1: HTML 5

HTML versi 5 merupakan kelanjutan dari HTML versi sebelumnya. Di HTML 5 diberikan tambahan fitur baru untuk memperbaiki dan melengkapi HTML yang sudah ada sebelumnya. Selain ditambah ada juga beberapa fitur lama yang dihapus, seperti penggunaan center, big, font, dan lainnya.

Penulisan dokumen HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Hasilnya:

My First Heading

My first paragraph.

Keterangan:

  • Tag <!DOCTYPE html> adalah sebuah deklerasi atau untuk mengidentifikasi jenis dokumen HTML yang digunakan agar browser dapat menentukan bagaimana memperlakukan kode tersebut. Proses deklarasi ini cukup dilakukan sekali saja saat dokumen HTML dijalankan.
  • Tag <html> berfungsi sebagai root, yaitu semua tag yang berada di dalam tag <html> merupakan gambaran dari dokumen HTML
  • Tag <head> berguna untuk memberikan informasi tentang dokumen HTML
  • Tag <title> bertugas memberikan informasi berupa judul dokumen HTML
  • Tag <body> memberikan isi dari suatu dokumen yang akan ditampilkan oleh web browser
  • <h1> bertugas untuk menentukan judul (heading atau bab)
  • Tag <p> bertugas untuk membuat paragraf

Rerensi elemen yang masih dapat digunakan antara lain: heading (h1-h6), pre, p, a, dll.

Referensi:

  1. https://www.codepolitan.com/tutorial/pengenalan-html5-belajar-html
  2. http://w3schools.com

Menambahkan Halaman About Us

Leave a reply

Menambahkan halaman About Us sangat penting untuk sebuah toko online. Dengan demikian pengunjung dapat mengetahui informasi mengenai produk dan perusahaanmu. Untuk membuat halaman About Us, ikuti langkah berikut ini:

1. Login ke blogger toko online milikmu.
2. Klik tombol segitiga kecil di samping tombol Daftar Entri. Lalu pilih Pages (atau Laman, untuk bahasa Indonesia).
to1
3. Klik tombol New page (atau Laman baru).
to2
4. Pada kolom Page, ketikkan About Us. Ketikkan juga informasi seputar perusahaanmu. Jika telah selesai, klik Publish.
to3
5. Tunggu sampai muncul gambar seperti di bawah. Selanjutnya, arahkan mouse pada teks About Us.
to4
6. Klik kanan mouse pada pilihan View. Klik Copy link address.
to5
7. Buka tab baru di browser. Klik kanan mouse di address bar lalu klik Paste.
Link untuk halaman About Us akan muncul di address bar.
to6
8. Copy link tersebut untuk kemudian dipindahkan ke tampilan Edit HTML. Caranya, kembali ke menu Dashboard toko online. Pilih menu Template.
to7
9. Selanjutnya, klik Edit HTML.
to8
10. Akan muncul jendela skrip. Klik mouse di dalam kotak, lalu tekan tombol Ctrl+F, untuk memunculkan kotak pencarian (Search).
to9
11. Ketikkan teks About Us di kotak Search (Perhatikan penulisan huruf besar kecil sesuai dengan judul laman yang telah kamu tulis).
12. Teks yang kamu cari akan ditandai dengan blok warna.
to10
13. Perhatikan pada skrip dengan tag . Masih ingat kan dengan tag-tag dalam html? a href adalah tag untuk hyperlink. Hapus tanda pagar (“) diantara kutip. Paste kan url yang tadi telah kamu copy.
to11
14. Klik menu Preview Template untuk memeriksa apakah skrip yang telah kamu masukkan benar. Jika benar maka akan muncul tampilan toko online-mu.
to12
15. Selanjutnya, klik Save template untuk menyimpan perubahan skrip yang telah kita buat.
16. Sekarang cek apakah halaman About Us mu telah berhasil menyimpan informasi. Caranya, buka tab baru dan ketikkan alamat blog toko online mu. Kemudian klik menu About Us.
17. Tadaa, menu About Us mu telah berubah.
18. Kalau tidak berhasil, coba periksa apakah kamu telah memasukkan link menu About Us nya dengan benar.
19. Langkah di atas dapat dilakukan untuk menu-menu lainnya, seperti Contact Us, dll.

Selamat mencoba 🙂

Aplikasi Pilihan

Leave a reply

Tugas akhir semester genap untuk kelas XI MIA adalah membuat aplikasi yang dapat dijalankan oleh Android. Alokasi waktu yang digunakan untuk kegiatan belajar mengajar ini memang tidak banyak dikarenakan saya harus berbagi dengan materi yang ada di buku teks Prakarya dan Kewirausahaan. Namun tak mengapa, saya tetap berkeyakinan bahwa kewajiban saya sebagai Guru adalah mengajarkan ilmu pengetahuan yang sesuai dengan zaman anak-anak kita, karena mereka hidup di zaman mereka bukan pada zaman kita, seperti yang pernah disabdakan oleh Rasulullah saw.

“Ajarilah anak-anakmu sesuai dengan zamannya, karena mereka hidup di zaman mereka bukan pada zamanmu. Sesungguhnya mereka diciptakan untuk zamannya, sedangkan kalian diciptakan untuk zaman kalian.” (Rasulullah saw)

Kalimat di atas adalah panduan saya sebagai pendidik. Saya ingin murid-murid saya memahami kegunaan ilmu pengetahuan yang mereka pelajari, tidak sekadar dihapal apalagi hanya untuk memperoleh nilai tinggi. Nilai tinggi mudah diperoleh tetapi memahami dan mampu mengaplikasikan ilmu yang mereka peroleh akan lebih memberikan kebermanfaatan dalam hidup mereka kelak.

Nah, berikut ini adalah beberapa apikasi pilihan yang akan saya cantumkan di bawah beserta kegunaannya. Aplikasi dapat diunduh secara gratis di sini.
Semoga bermanfaat.
Oya, hak cipta ada pada mereka ya 🙂

1. AkuCintaIndonesia_edit.apk
Dibuat oleh: Septyanti Kartika, Vidya Natalia Eka Putri, Zhafirah Rana Labibah (Kelas XI MIA 1)
Produk: Aplikasi mengenal kebudayaan Indonesia
Deskripsi:
Aplikasi ini dibuat untuk mengenalkan suku-suku yang ada di Indonesia. Aplikasi ini juga dilengkapi dengan peta, lagu daerah, gambar rumah adat, gambar pakaian adat, gambar tari adat, dan gambar senjata tradisional dari masing masing provinsi di Indonesia. Aplikasi ini ditujukan untuk anak anak zaman sekarang supaya bisa lebih mengenal negaranya sendiri.

2. ExploreIndo.apk
Dibuat oleh: Ranty Daniputri, Salsabila Haryuning, Shafira Salsabila (Kelas XI MIA 3)
Deskripsi:
Aplikasi ExplodeIndo adalah aplikasi sederhana sebagai media pengenalan serta pembelajaran mengenai kebudayaan di Indonesia khususnya Pulau Jawa. Di dalam aplikasi ini akan ditampilkan 5 Provinsi di Pulau Jawa dimana jika salah satu tombol Provinsi ditekan, akan menampilkan kebudayaan dari Provinsi tersebut serta disertai gambar dan suara.

Tujuan:
– Sebagai media pengenalan terhadap ragamnya budaya Indonesia.
– Sebagai media pembelajaran agar lebih mendalami kebudayaan Indonesia.
– Sebagai media hiburan bagi anak-anak.

3. project_akhir.apk
Dibuat oleh: M. Syarif Syukron, Pramudityo Ibnu, Rama Widyadhana B (Kelas XI MIA 3).
Produk: Voice Recognition
Deskripsi:
App ini menggunakan bluetooth untuk menghubungkan 2 device. Setelah
terkoneksi, pengguna app dapat mengucapkan perintah agar dijalankan oleh
device. App ini menggunakan Google Voice Recognition untuk mentranslasikan
perintah suara agar dimengerti oleh system.

4. KinderQuiz.apk
Dibuat oleh: Amelia Putri Maharani, Anisa Dwityamirta, Vemby Somadias (Kelas XI MIA 4).

Deskripsi:
Aplikasi untuk menebak lagu anak-anak secara tepat.

5. callthefood.apk
Dibuat oleh: Sulaeman Nurhakim, Irfan Fahmi Saputra, Faisal Alfarisi (Kelas XI MIA 3).
Deskripsi: Aplikasi untuk memudahkan orang-orang yang kelaparan atau ingin memesan makanan tetapi mereka lupa lupa nomor telepom restoran tersebut, dan juga di bulan puasa ini banyak yang ingin memesan makanan untuk berbuka puasa dan sahur.

6. FINAL.apk
Dibuat oleh: Ananda Raka D, Ilham Ibrahim, Yamandhika (XI MIA 1)
Deskripsi: Aplikasi untuk mengetahui lokasi pengguna saat itu

7. Tracknesia.apk
Dibuat oleh: Afiq Dany, Nabilah Nurhijah, Olivia Putri (XI MIA 4)
Deskripsi: Tracknesia merupakan sebuah aplikasi untuk memutar beberapa lagu daerah di Indonesia

8. PYM.apk
Dibuat oleh: M Robbani A, Rakha D, Teuku Reyhan N (XI MIA 2)
Deskripsi: Aplikasi pemutar musik

9. MyApp.apk
Dibuat oleh: Imam Esa, Anggit Fraditya, Wirasatya Aryaguna (XI MIA 2)
Deskripsi:
Aplikasi ini merupakan gabungan dari semua latihan yang pernah saya pelajari. terdiri dari 3 screen aplikasi.
Screen 1 memuat pembuka dari aplikasi ini. terdapat kalimat “CLICK HERE”. ketika kalimat itu ditekan akan menuju screen yang kedua.
Screen 2 terdapat location sensor. ketika location sensor ini terdeteksi maka akan terdengar melodi Photograph by Ed Sheeran. Terdapat aplikasi sms/messaging. ketika menerima sebuah pesan, anda bisa langsung membalas pesan tersebut tanpa mengetik ulang nomor telepon tersebut. ketika anda ingin mengirim pesan lokasi dimana anda berada, anda cukup mengetik “lokasi”/”LOKASI” dikolom pesan. Terdapat button untuk menuju Digital Doodle yang terdapat di Screen 3.
Screen 3
Terdapat aplikasi Digital Doodle untuk coret2an, menggambar, dll. ketika anda selesai menggunakan Digital Doodle, tekan reset untuk menghapus coret2an/gambar yang telah dibuat. Di aplikasi ini ketika anda mengoyang2 hp anda, makan anda akan mendengar suara “Stop Shaking Me!” yang berasal dari aplikasi ini.

10. GuitarTune
Dibuat oleh:

10. Harison_copy.apk

Lanjut besok ya saudara-saudara, daku sudah ngantuk… hehe

Projek Akhir – Membuat Aplikasi di Android

Leave a reply

Projek akhir untuk kelas XI MIA adalah membuat aplikasi digital di Android. Tugas ini sebagai penutup materi semester genap mengenai teknologi tepat guna, yang saya aplikasikan pada bidang teknologi digital.

Sebelumnya siswa dikenalkan cara untuk membuat aplikasi di android, baik melalui situs dan menggunakan tool Appinventor. Pembuatan melalui situs adalah cara paling mudah membuat aplikasi di Android. Untuk pembelajaran tersebut siswa belajar melalui situs Appgeyser di sini. selanjutnya, siswa dikenalkan dengan tool Appinventor, untuk materi yang lebih advance.

Berikut ini adalah beberapa kreasi aplikasi yang dibuat oleh siswa kelas XI MIA. Semoga pengenalan terhadap materi ini dapat membuka wawasan dan pengetahuan serta membukakan jalan bagi mereka untuk mencintai dunia pemrograman. Kelak, siapa tahu, dari mereka akan lahir banyak pengembang aplikasi dari tanah air yang mumpuni yang karyanya dapat memberikan manfaat bagi banyak orang. Semoga ya, Nak :).

Aplikasi dapat diunduh di sini.

Menjalankan App Inventor secara Offline

1 Reply

App Inventor atau AI adalah tool untuk membuat aplikasi android. Kelebihan AI adalah karena berbasis visual block programming sehingga kita bisa membuat aplikasi tanpa harus menuliskan kode program. Disebut block programming karena kita dapat langsung menyusun blok-blok yang berisikan simbol-simbol perintah dan fungsi tertentu dalam membuat aplikasi. Dengan App Inventor kamu dapat menggunakan imajinasi seluas-luasnya, seperti membuat games, tool barcode reader, aplikasi berbasis lokasi, aplikasi toko online, aplikasi untuk mengontrol LEGO robot dan lain-lain.

Selain untuk membuat aplikasi, App Inventor juga dapat digunakan untuk mengasah logika seperti halnya menyusun puzzle. Untuk programmer, App Inventor menyediakan opsi advance.

AI dapat dijalankan secara online dan offline. Untuk online, silakan langsung masuk ke laman AI di sini. Lalu klik Create apps.

Untuk offline, lakukan persiapan seperti di bawah ini.
Siapkan beberapa program aplikasi, sebagai berikut:
1. File Java JDK 1.7 (disarankan untuk menggunakan Java JDK versi 1.7 agar bisa membuka fitur Blocks pada App Inventor). File bisa diunduh di sini (sesuaikan dengan jenis processor PC/Laptop kita)
2. File AI2LiveComplete, unduh di sini
3. aistarter program (optional)
Program ini dibutuhkan ketika kita ingin menggunakan Emulator atau USB cable untuk melakukan uji coba aplikasi yang sedang dibuat. aiStarter berfungsi untuk menghubungkan antara App Inventor yang berjalan di browser dengan perangkat lain, misalnya HP Android atau Emulator.
(Jika kamu menggunakan AI Companion, maka tidak perlu menginstal program ini).

Selanjutnya, install Java Development Kit (JDK 1.7)
Double klik pada file jdk-7u79-windows-x64.exe (untuk komputer 64 bit) atau jdk-7u79-windows-i586.exe (untuk 32 bit). Lakukan instalasi seperti biasa. Jika instalasi berhasil, pada folder c:\program files\java akan terlihat folder jdk1.7.0_79

Kemudian, lakukan pengaturan pada Evironment variables dengan klik kanan This PC. Pilih Properties. Pada kotak dialog System, pilih Advance System Settings. Maka kotak dialog System Properties akan ditampilkan dan pilih Environment variables.

Pada kotak dialog Environment variables, arahkan mouse pada opsi JAVA_HOME. Klik Edit. Periksa apakah variable value berada di direktory yang benar (untuk contoh di komputer kami, file jdk berada di C:\Program Files\Java\jdk1.7.0_79

Jika di menu Edit belum ada atau kosong, maka pilih New dan isikan sebagai berikut:
Variable name : JAVA_HOME
Variable value : Isikan direktory dimana file jdk1.7.0_79 disimpan. Klik OK.

Memasang AI2Livecomplete
Ekstrak file AI2Livecomplete yang telah diunduh.

Menjalankan AI
Buka folder AILiveComplete. Double klik file WinstartAIServer.cmd
Tunggu sampai muncul jendela AiLiveComplete App Inventor

Selanjutnya, double klik file WinStartBuildServerWithHeap.cmd untuk menjalankan Build Server App Inventor, sehingga nanti kamu dapat melakukan compile file project menjadi file .apk

Kemudian, buka browser dan ketikkan http://localhost:888 di address bar untuk menampilkan halaman App Inventor. Ketikkan alamat email (alamat ini hanya sebagai syarat saja). Klik Login. Halaman App Inventor versi offline sudah tampil 🙂