Web Development

Animasi merupakan suatu tampilan yang ada dalam sebuah website. Animasi dapat memberikan kesan hidup dan interaktif serta menambahkan lapisan tambahan untuk meningkatkan user experience website. Saat ini, semakin banyak website yang menggunakan animasi, baik dalam bentuk GIF, SVG, WebGL, video latar serta lain sebagainya. Dan animasi sendiri dapat digunakan di beberapa fungsi yang merupakan bagian dari website.

Agar lebih mudah kita dapat menggunakan sebuah tag html <marquee>. Tag marquee adalah salah satu fungsi untuk memodifikasi tulisan atau gambar pada website. Marquee ini untuk membuat efek teks atau gambar menjadi bergerak. Tag Marquee ini mempunyai beberapa attribute seperti dibawah ini :

• bgcolor : untuk mengatur background dari gambar marquee
• direction : untuk mengatur gerakan gambar (up,down,left,right)
• scrollamount : untuk mengatur kecepatan gerakan gambar

Bagi kalian yang ingin membuat sebuah animasi pada tampilan website, tidak ada salah nya untuk mencoba tutorial animasi berikut yakni bagaimana cara membuat animasi sederhana menggunakan HTML. Animasi ini sangat simple dimana akan terjadi pergerakan pada gambar yang kita input.

Tutorial sederhana ini dapat diakses melalui link youtube berikut:

Navbar merupakan komponen website yang di dalamnya terdapat menu-menu item. NavBar ini biasa digunakan untuk mengkategorisasi dari halaman halaman website.
Flex
Flexible Box biasa disebut flexbox merupakan mode layout yang digunakan untuk mengatur elemen di suatu halaman web. Flexbox ini akan mengatur ukuran dari elemen anaknya secara otomatis, dan mampu beradaptasi dengan ukuran container-nya.

Video: https://drive.google.com/file/d/1FoPg63oD_mvt-r9MbBrEq-1aOxlpfGlH/view?usp=sharing

Halo Sobat Algos! Bertemu lagi dalam AlgoInfo!
AlgoInfo kali ini akan membahas lagi nih tentang Kotlin. Kali ini kita bahas yuk variable-variable yang terdapat pada kotlin!

Variable merupakan suatu tempat untuk menyimpan data-data. Kotlin mendukung 2 jenis variable, yaitu Mutable (bisa diubah) dan Immutable (tidak bisa di ubah). Untuk membuat variable Mutable, di kotlin bisa menggunakan kata kunci var, akan tetapi Untuk membuat variable Immutable, di kotlin bisa menggunakan kata kunci val.

Deklarasi Variable
“val/var namaVariable : TipeData = data”
Direkomendasikan menggunakan Immutable dibanding Mutable data.

Contoh kode dari Variable Mutable dan Variable Immutable adalah sebagai berikut :
Kode : Variable Mutable

Kode : Variable Immutable

Pengertian Nullable pada Kotlin
Secara standar, variable di Kotlin harus dideklarasikan / diinisialisasikan nilai nya. Jika saat membuat variable tidak diberi nilai, maka akan error
Kotlin mendukung variable yang boleh null (tidak memiliki data). Hal ini dikarenakan Kotlin bisa mengakses Java, dan kebanyakan di Java, semua variable bisa null. Untuk membuat variable bisa bernilai null, di Kotlin bisa menggunakan “?” (tanda tanya) setelah tipe datanya. Penggunaan fitur ini tidak direkomendasikan untuk dilakukan di kotlin, akan tetapi hanya sebagai jalan akhir jika misal mengakses kode Java
Kode : Nullable

Variable Konstan pada Kotlin
Arti kata konstan adalah Immutable data, yang biasanya diakses untuk keperluan global. Global dapat diartikan bisa diakses dimanapun. Untuk menandai bahwa variable tersebut adalah konstan, biasanya menggunakan “UPPER_CASE” dalam pembuatan nama variable Konstan-nya
Kode : Variable Constant

Untuk penjelasan Kotlin lebih lengkapnya dapat dilihat di youtube kami ya!

Sekian dari AlgoInfo kali ini, semoga bermanfaat ya Sobat Algos!

Algomarine, Algorithm for Marine Solutions!

Halo Sobat Algos! Bertemu lagi dalam AlgoInfo!
AlgoInfo kali ini akan membahas tentang Kotlin. Apa sih itu Kotlin? Kotlin adalah bahasa pemrograman modern yang dapat disajikan secara statis. Kotlin diperkenalkan pertama kali oleh JetBrains pada tahun 2011. Kotlin pada mulanya berjalan diatas platform Java Virtual Machine (JVM). Kotlin menggunakan compiler LLVM yang artinya, dapat dikompilasi ke dalam kode JavaScript. Bahasa pemrogaman ini terintigrasi dengan Java. Bahasa pemrograman yang satu ini banyak diminati oleh para developer. Terutama bagi kamu yang ingin jadi developer Android. Kotlin menjadi bahasa pemrogaman utama dalam pengembangan aplikasi Android.

Software Development Kit (SDK)
1.Software untuk proses development
2.Untuk melakukan kompilasi dan menjalankan kode program Kotlin
3.Java Development Kit (JDK) versi 8 keatas

Proses Development Program Kotlin

Integrated Development Environment (IDE)
1.Smart editor untuk editing program Kotlin
2.Untuk otomasi proses kompilasi dan menjalankan program Kotlin
3.JetBrains IntelliJ IDEA

Untuk penjelasan Kotlin lebih lengkapnya dapat dilihat di youtube kami ya!

Sekian dari AlgoInfo kali ini, semoga bermanfaat ya Sobat Algos!

Algomarine, Algorithm for Marine Solutions!

Halo Sobat Algos! Selamat datang lagi dalam AlgoInfo!
AlgoInfo merupakan proker yang berisi tentang informasi informasi yang berhubungan dengan dunia coding. Untuk materi kali ini, kami akan menjelaskan tentang beberapa fungsi dari CSS dan HTML. Di materi AlgoInfo sebelumnya, telah dijelaskan apa itu HTML, CSS, dan JavaScript. CSS merupakan aturan untuk mengendalikan komponen yang telah diatur di HTML. Simplenya CSS digunakan untuk mengatur HTML supaya lebih menarik. Banyak jenis fungsi dari CSS yang dapat digunakan, di materi ini kami akan menjelaskan fungsi seperti hover, dan beberapa cara untuk mengatur box. Nah sekian buat pendahuluanya, kembali ke Laptop!

Di atas ini merupakan contoh dari bentuk HTML dan CSS yang udah kami buat. Untuk temanya kami pilih spongebob karena spongebob warna kuning, saya suka warna kuning. Ngga deng bercanda hehe. Untuk background haru melakukan penyesuaian. Karena gambar konten berisi spongebob, maka kita buat background Bikini Bottom. Jadi, kita buat struktur HTML nya terlebih dahulu. Yang perlu dibuat pertama yaitu header yang tertulis nama Algomarine. Lalu selanjutnya, kita buat isi konten. Dalam isi konten terdapat 2 jenis konten, yaitu gambar seperti gambar diatas dan teks seperti ini

Untuk struktur yang dibuat di HTML dapat berupa

Setelah struktur HTML telah dibuat, maka dapat diatur menggunakan CSS. Pada konten, kami membuat kotak lalu beri background-color yang sesuai. Untuk memberi jarak dari tiap kotak dapat menggunakan perintah margin. Bila cursor diarahkan ke arah gambar, gambar pada konten dapat membesar. Cara untuk mengubah gambar saat ditunjuk cursor dengan menggunakan hover. Selain digunakan untuk memperbesar gambar, hover dapat digunakan juga untuk memunculkan konten teks yang menumpuk dengan gambar. Jika tidak diberi perintah hover, maka pada gambar konten akan tertutup oleh konten tulisan. Untuk penjelasan lebih lengkapnya dapat dilihat pada youtube kami!