Pemenang Lomba Programming Stikom 2016

Lomba Internal Programming Stikom Surabaya

Lomba dibidang pemrograman banyak diadakan di berbagai tempat, baik itu diadakan oleh kampus, baik itu diadakan oleh instansi dan juga komunitas. Di bulan November 2016 lalu Institut Bisnis dan Informatika Stikom Surabaya tidak mau ketinggalan kalau hanya masalah lomba seperti ini. Lomba dibidang pemrograman juga diadakan di kampus saya saat itu. Lomba Internal Programming yang diadakan di Stikom Surabaya dibantu oleh Himpunan Mahasiswa Sistem Informasi ini bertema "Develop an Innovative Application To Get The Better Education" hmm ribet amat temanya ya haha. Intinya begini, kita diharuskan untuk membuat aplikasi dengan tema pendidikan.

Aturan Lomba

Ketika Anda mendaftarkan lomba, pasti ada aturan yang harus dipatuhi. Nah aturan lomba Internal Programming Stikom ini adalah 1 team maksimal 3 orang. Sendiri boleh? ya boleh saja tapi masa mau sendirian, itu mau ikut lomba apa uji nyali hehe. Lalu kita juga harus membuat aplikasi yang sesuai dengan tema yang sudah ditentukan oleh panitia.

Setiap team juga harus membuat proposal yang berisi penjelasan - penjelasan seputar aplikasi yang dibuat mulai dari rumusan masalah, ide, tujuan dan manfaat lengkap dengan dokumen power point untuk presentasi terbuka saat penjurian. 

Penjurian dilakukan di tempat terpisah antara web dan mobile dengan juri masing - masing yaitu 2 orang.

Kategori Lomba

Lomba ini dibagi menjadi 2 kategori yaitu website dan mobile (android). Kalau Anda ikut website berarti harus membuat aplikasi berbasis website tapi kalau Anda pilih mobile berarti harus? Yep membuat aplikasi Android. Saat itu, saya dan team (Andi dan Alif) mendaftarkan diri untuk kategori website.

Untuk masalah juara hanya diambil juara 1 dan 2 saja di masing - masing kategori.

Web Apllication I-syarat

Kami berencana membuat website semacam Youtube tapi khusus untuk video - video yang berisi tutorial berbahasa isyarat. Ide ini kami ambil dari akun Instagram bernama Kamu Harus Tau yang saat itu memposting foto bahwa ada komunitas non komersil dari Jombang yang mengajar ke beberapa orang supaya bisa berbahasa isyarat. Dengan alasan itulah kami membuat aplikasi berbasis website bernama I-syarat. Maaf ya fotonya saya cari di laptop nggak ketemu, maklum orang kaya. Kaya file - file yang gak penting hehe..

Jadi dengan aplikasi ini Anda bisa daftar sama seperti daftar Youtube. Ada form - form data yang harus Anda isi. Setelah itu Anda bisa memilih apa yang akan Anda pelajari dengan cara memilih pilihan materi yang sudah kami sediakan. Setiap mmateri yang kami sediakan berisi kumpulan video lebih dari satu. Misal Anda mau belajar berbahasa isyarat alphabet dari A - Z, maka Anda klik judul materinya dan mulai belajar.

Selain itu Anda juga bisa berkontribusi untuk upload video tutorial karangan Anda sendiri dan bisa diakses orang lain juga. Jadi selain Anda belajar, Anda juga bisa berbagi ilmu disini.

Penjurian

Tidak seperti yang saya perkirakan sebelumnya bahwa akan ada banyak peserta yang hadir untuk penjurian, ternyata yang banyak malah pemirsanya hmm padahal saat pendaftaran berlangsung, saya tanya ke panitia kalau yang daftar sampai lebih dari 7 team, tapi yang hadir tidak sampai 6 team. Tapi yasudahlah bodo amat. 

Penjurian ini dilaksanakan di gedung auditorium dan dihadiri oleh 2 orang juri yaitu pak Vallen dan pak Teguh. Untungnya kami dapat giliran maju terakhir sehingga saya sebagai juru bicara kala itu bisa menentukan kira - kira model penyampaian saya ke juri dan pemirsa seperti apa, kalau cuma masalah power point sudah kami siapkan dan memang sudah jadi ketentuan lomba bahwa setiap team harus menyiapkan.

Setiap team diberi waktu hanya 10 menit saja untuk presentasi. Di dalam perlombaan, ini sudah jadi hal yang biasa dan setiap team harus membuat presentasi yang padat, singkat tapi menarik. Saya sampaikan dengan padat dan jelas lengkap dengan demonstrasi aplikasi yang kami buat. Setelah itu hal yang bikin jantung dredeg mulai bermunculan. Dua orang juri selevel S2 mengajukan pertanyaan - pertanyaan yang oohhhh seram. Tapi untungnya saya bisa beri jawaban yang pas dan sesuai.

Pengumuman Pemenang

Setelah semua peserta menyelesaikan presentasinya, kami diberi waktu break selama 30 menit karena juri akan berkumpul untuk mendiskusikan siapa pemenang Internal Programming di masing - masing kategori.

Semua team pasti berdoa untuk menjadi yang terbaik dalam perlombaan begitu juga dengan team saya. Tapi saya pribadi tidak begitu memperdulikan menang atau tidak tapi lebih penting portofolio yang saya dapatkan setelah mengikuti lomba ini, syukur kalau menang berarti ya lumayanlah.

30 menit berlalu, semua juri di masing - masing kategori sudah berkumpul menjadi satu di ruang auditorium  dan kami para peserta untuk masing - masing kategori juga sudah siap untuk mendengarkan siapa saja pemenangnya.

Dari hasil penjurian kategori web di dapat juara 1 adalah team saya dan juara 2 adalah team dari Wahyu. Untuk kategori mobile, juara 1 diraih oleh team dari Hasan dan juara 2 diraih oleh team dari Fadly.

Ini penampakannya

Foto bersama saat lomba internal programming Stikom
Juara 1 lomba internal programming Stikom

Makasih ya Stikom Surabaya dan Himpunan Mahasiswa Sistem Informasi sudah mau mengadakan lomba semacam ini. Tolong adakan secara rutin setahun sekali minimal supaya Stikom tetap jadi Institut Berkualitas, Unggul dan Terkenal dengan mahasiswanya yang jago - jago.


Belajar HTML Part 6: HTML Style

Belajar HTML style Dasar untuk Pemula

Sebelum Anda meneruskan untuk praktek pada tutorial HTML Style, sebaiknya Anda pelajari dulu tutorial sebelumnya yaitu HTML Paragraf, karena disini kita akan menghias paragraf yang sudah kita buat sebelumnya.

HTML Style


Seperti yang sudah saya beritahukan kepada Anda tentang pengenalan HTML bahwa HTML tidak berdiri sendiri tetapi bisa dikombinasikan dengan bahasa pemrograman lain untuk membuat website yang bagus. Nah di pembahasan tutorial kali ini kita akan pelajari bagaimana HTML bisa dikombinasikan dengan bahasa pemrograman lain. Saat ini kita akan kombinasikan dengan CSS dasar untuk pengenalan ya.

Atribut HTML Style


Untuk menghias suatu elemt HTML seperti <p>, <b>, <strong>, kita perlu atribut bernama style. Lalu Anda bertanya fungsinya apa? Fungsinya untuk mengubah tampilan. Lebih jelasnya tentang atribut style, Anda bisa lihat anatomi berikut :

<tag_pembuka style="property:value;"> Ini adalah text untuk tampil di browser </tag_penutup>

Property adalah CSS Property seperti warna background, warna text dan sebagainya.
Values adalah nilai dari CSS Property.

Begini, kalau ada text "Aku belajar HTML di klikfadhil.blogspot.com" lalu Anda ingin mengganti warna tulisan menjadi merah, maka Property yang digunakan adalah color dan nilai value-nya adalah red;

HTML Warna Background


Properti CSS yang digunakan untuk mengubah warna background adalah background-color.

Contoh

Silakan Anda coba di Notepad dan buka di browser, maka background tampilan akan berubah menjadi merah muda. Bisu gita ya? hehe

HTML Warna Text


Kalau tadi kita sudah coba mengganti warna background, sekarang kita coba mengganti warna tulisan "Belajar HTML di klikfadhil.blogspot.com" dari hitam menjadi hijau ya. Untuk mengganti warna pada text, maka properti CSS yang digunakan adalah color.



Silakan anda coba di Notepad dan lihat perubahan warnanya di browser. Anda juga bisa mengganti warna pada tulisan "Dipandu oleh Ganfadhil" dengan warna lain terserah Anda.

HTML Font


Nah tadi Anda sudah pelajari bagaimana cara mengganti warna background dan warna text, sekarang saya akan beri sedikit materi tentang mengubah font text. Untuk mengubah front pada suatu text, properti CSS yang digunakan adalah font-family.



Silakan Anda coba di Notepad dan lihat perbedaan font pada kedua text tersebut.

Lalu bagaiaman cara mengganti font dan warna text secara bersamaan?

Anda bisa lakukan dengan cara seperti ini

<style="font-family:courier;color:red">Dipandu oleh Ganfadhil</p>

Anda bisa menambahkan properti lain setelah tanda ; (titik koma). Titik koma disini gunanya untuk memisahkan antar properti dan value yang satu dengan lainnya. Jadi ayo inget - inget ya.


HTML Ukuran Font


Selain mengganti warna dan font pada text, kita juga bisa memperbesar dan memperkecil tulisan kita di HTML. Caranya cukup mudah, sama seperti sebelumnya tapi untuk properti ukuran text, kita menggunakan font-size.



Silakan Anda coba di Notepad dan lihat perbedaan ukuran text di browser. Semakin besar ukuran pixel yang Anda beri, jelas ukuran text akan semakin besar.



HTML Text Alignment


Nah ini materi perkenalan bonus deh buat Anda hehe.. Disini, kita akan mengatur alinea pada paragraf atau tulisan. Properti CSS untuk mengatur alinea adalah text-alignment dengan beberapa value yaitu left, center, right dan justify.




Silakan Anda coba di Notepad dan lihat di browser maka alineanya akan berubah. Untuk values justify silakan Anda coba dengan membuat banyak paragraf dan menggunakan value justify untuk text-alinment nya.


Kesimpulan


Di tutorial HTML Style ini ada beberapa hal yang bisa kita simpulkan.
  1. Untuk menghias element HTML, perlu atribut style lengkap dengan properti dan value dari CSS.
  2. Mengganti warna background dengan properti background-color
  3. Mengganti warna text dengan properti color
  4. Mengganti font text dengan properti font-family
  5. Mengganti ukuran text dengan properti font-size
  6. Mengatur alinea tulisan dengan properti text-alignment
Sekian tutorial HTML Style yang saya berikan disini, yang jelas sekarang Anda sudah pelajari dasar untuk mempercantik tampilan HTML dengan CSS dasar. Di tutorial selanjtnya kita akan bahas HTML Quotation berupa tag khusus untuk menangani kutipan - kutipan.

Belajar HTML Part 5: HTML Paragraf

Belajar HTML Paragraf untuk Pemula

Setelah sebelumya Anda pelajari tentang HTML heading sekarang kita akan bahas tentang HTML paragraf untuk membuat paragraf atau deretan kalimat yang digabung menjadi satu untuk membahas topik tertentu.

HTML Paragraf


Untuk membuat paragraf di HTML, Anda cukup menggunakan tag <p>.

Contoh:



Silakan Anda coba di Notepad lalu buka di browser. Anda akan melihat ada 2 buah paragraf disitu. Secara default, browser akan memberi jarak antara paragraf satu dengan paragraf yang lainnya.

Perbedaan Bentuk Paragraf


Mungkin muncul pertanyaan di dalam diri Anda, bagaimana tampilan paragraf di browser jika pengetikan paragraf di acak atau diberi enter seperti ini.


Meskipun cara Anda mengetik paragraf seperti itu, HTML paragraf yang ditampilkan di browser tidak akan mengikuti cara penulisan Anda. Browser akan menghapus tambahan spasi atau enter yang Anda lakukan di HTML paragraf.

HTML Line Break


Solusi kalau Anda ingin memberi jarak atau meng-enter kalimat yang masih menjadi satu paragraf adalah dengan menambah HTML line break yang memiliki tag khusus yaitu <br/>. <br/> adalah tag kosong, jadi tolong diingat - ingat untuk menutupnya dengan / (slash). 

Disini Anda bisa membuat baris baru tanpa mengetik paragraf baru.


Silakan Anda coba menambahkan tag <br/> dan lihat perbedaan dengan sebelumnya.

Tag Untuk Menebalkan dan Memiringkan


Dalam pembuatan paragraf, HTML sudah menyedia tag untuk menebalkan dan memiringkan huruf, kata, kalimat sampai paragraf. Saya akan memberi contoh satu per satu supaya Anda paham. Urutannya begini :
  1. Menebalkan dan memiringkan huruf
  2. Menebalkan dan memiringkan kata
  3. Menebalkan dan memiringkan kalimat
  4. Menebalkan dan memiringkan paragraf



Silakan Anda coba dan lihat perbedaannya masing - masing. Anda bisa coba untuk mengganti - ganti mana yang akan Anda ubah format penulisannya. Tapi hasil akhir kira - kira akan seperti ini.


Penting !
 Anda akan menemukan bahwa HTML memiliki tag <i> untuk memiringkan tulisan dan tag <b> untuk menebalkan tulisan, fungsinya sama seperti <em> dan <strong>. Sebetulnya untuk memformat suatu huruf, kata, kalimat atau paragraf tidak disarankan menggunakan tag - tag ini.
Para pakar HTML lebih menyarankan untuk mengubah format penulisan menggunakan CSS. Meski begitu empat tag ini <i><em><b><strong> akan memberi efek yang sama kalau Anda gunakan. Silakan coba saja agar lebih paham

setelah Anda peajari membuat paragraf dengan menggunakan HTML paragraf, di tutorial selanjutnya akan kita bahas tentang HTML style yang berguna untuk menghias elemen HTML.

Popular Posts