Penerapan HTML5 pada Dunia Teknologi

Penerapan HTML5 pada Dunia Teknologi - Dunia Teknologi terutama dalam bidang web development mengalami perkembangan yang sangat pesat  akhir-akhir ini. Hal ini terjadi tidak hanya diseabkan oleh hadirnya banyak framework Front-end untuk Web Design maupun framework Back-end untuk Web Service. Teknologi yang paling memberikan pengaruh besar adalah hadirnya HTML5 sebagai versi terbaru dari HTML (Hypertext Markup Language).

Source Gambar : http://www.ohgizmo.com/wp-content/uploads/2016/07/pic-740x416.jpg

HTML5 merupakan pengembangan kelima dari HTML. Melalui Bahasa Markup ini, pengembangan HTML4 dan XHTML yang awalnya terpisah serta diimplementasikan dalam bentuk yang berbeda kini dapat diimplementasikan menjadi bentuk tunggal dalam pengembangan sebuah website. Tujuan utama dari hadirnya HTML5 adalah agar para developer web dapat dengan mudah mengimplementasikan unsur multimedia dalam websitenya. 

Web yang Dinamis

Dengan didukungnya teknologi multimedia oleh HTML5, membuat sebuah website yang dinamis bukanlah suatu hal yang sulit. Hal ini dikarenakan sebuah set kode pada HTML5 dapat digunakan diberbagai macam perangkat sehingga pemeliharaan dan pengembangan web untuk kedepannya lebih teratur. Hal ini tentu akan sangat bermanfaat terutama dalam hal finansial karena tidak memerlukan berbagai kode untuk mendukung berbagai perangkat karena fitur pada HTML5 dapat diterpkan pada berbagai perangkat. Pengaksesan berkas pendukung website juga dapat dilakukan dalam mode offline atau tanpa koneksi internet dengan memanfaatkan cache aplikasi yang akan tersimpan pada memori. HTML5 juga sangat mendukung dalam hal lokasi yang mana hal ini akan sangat bermanfaat dalam segi bisnis yang semakin berkembang dengan memanfaatkan teknologi. 

Game Online berbasis Web

Sebelum HTML5 hadir, banyak game online berbasis web yang menggunakan Teknologi Flash. Teknologi Flash hanya mampu menghasilkan game online dengan animasi 2D sehingga hal ini dirasa kurang. Kemudian HTML5 hadir sebagai solusi yang mana Teknologi WebGL yang ada saat ini dapat menampilkan animasi 3D dengan berbasis HTML5. Contoh game online yang menggunakan teknologi berbasis HTML5 adalah Wormate.io dan Agar.io. 

Fitur lain yang didukung oleh HTML5

Selain mendukung dalam dua hal diatas, berikut ini adalah fitur-fitur yang didukung oleh HTML5 :

- Canvas 2D dan 3D                                   - Cross Document Messaging

- Geolocation                                              - Audio dan Video

- Forms                                                       - MathML

-Microdata                                                  - Server send events

- Scalable Vector Grapich (SVG)               - WebSocket API dan Protocol

- Web Origin Concept                                - Web Storage

- Indexed Database                                     - Application Cache (Offline Web Apps)

- Web Worked                                            - Drag dan Drop

-XMLHtttpRequest Level 2

 Bagi para developer yang selalu mengikuti perkembangan Teknologi Web Development tentu sangatlah bersyukur dengan adanya kemudahan yang ditawarkan. HTML5 merupakan sebuah teknologi yang efektif dan tepat untuk membuat sebuah applikasi berbasis web baik online maupun offline. Memperlajari HTML5 juga tidak sesulit yang dibayangkan. Kita bisa belajar tentang HTML5 di Tutorial Web HTML. Demikianlah beberapa Penerapan HTML pada Dunia Teknologi. Semoga bermanfaat. Salam Belajar !

Macam-Macam Cara Pewarnaan dalam CSS

Macam-Macam Cara Pewarnaan dalam CSS - Pewarnaan merupakan unsur yang paling penting dalam hal apapun jika dilihat dari unsur tampilan dan seni. Website yang bagus adalah website yang selain powerfull pada sisi sitem juga mempunyai tampilan atau User Interface (UI) yang bagus. Hal ini perlu perhatian khusus agar user sebagai pelanggan dari website yang akan kita buat nanti menjadi betah berlama-lama dalam mengunjungi atau menggunakan layanan website kita. Oleh karena itu dalam web development terdapat seorang developer yang khusus untuk menangani atau merancang User Interface pada website yang sedang dikembangkan yang biasa disebut dengan Front-end Developer.

Source gambar : http://www.webdschool.com/images/thumbs/webdesign-courses.jpg

Bagi seorang Front-end Developer penguasaan terhadap design adalah keahlian yang harus dimiliki olehnya, termasuk menguasai bagaimana memadukan pewarnaan yang sesuai antar satu elemen HTML dengan elemen yang lainnya. Lalu bagaimanakah cara memberikan warna pada elemen tertentu dengan menggunakan CSS? Mari kita bahas lebih lanjut.

Pemberian warna pada elemen tertentu pada HTML dapat dilakukan sesuai kebutuhan. Contoh property yang digunakan untuk memberikan warna pada teks, tentu akan berbeda dengan property yang digunakan untuk memberikan warna pada gambar. Sehingga memiliki pemahaman terhadap setiap kegunaan property dalam CSS sangatlah penting. Bagi temen-temen yang masih bingung dengan apa itu properti temen-temen bisa membaca Tutorial CSS sebelumnya tentang Pengertian CSS dan Kegunaanya dalam Web Development . 

Disini yang akan saya bahas bukan tentang propertinya terlebih dahulu namun cara memberikan pewarnaanya. Untuk penggunaan setiap properti akan dibahas pada tutorial berikutnya. Cara memberikan warna pada CSS ada beberapa cara. Mari kita bahas satu persatu.

Valid Color Name

Cara yang pertama ini merupakan cara yang paling mudah yang mana pemberian value dilakukan dengan memberikan nama warna dalam Bahasa Inggris. Contohnya red untuk warna merah, yellow untuk kuning dan lain sebagainya. Agar lebih jelas, yuk perhatikan baris kode berikut.

Perhatikan pada pemberian style pada baris kode ke-6. Terdapat property background yang diberikan value red. Nah pewarnaan seperti inilah yang disebut dengan cara pewarnaan dengan menggunakan Valid Color Name.

Hasil yang tampak pada Browser :

RGB (Red, Green, Blue)

Cara ini perpaduan dari unsur warna merah, hijau, dan biru dengan formula rgb(red,green,blue). Setiap parameter dapat diberikan intensitas warna antara 0 - 255. sebagai contoh rgb(255,0,0) yang artinya intensitas 255 untuk warna merah, 0 untuk hijau dan biru sehingga warna yang tampak adalah merah. Perhatikan baris kode berikut.

Terlihat jelas pada baris kode ke-6 bahwa property background diberikan pewarnaan dengan menggunakan rgb(0,255,0) sehingga akan tampak warna hijau sebagai background dari area tag <div>.

Hasil yang tampak pada Browser :

Hex 

Cara Hex merupakan cara pemberian value pada pewarnaan dengan menggunakan bilangan Heksa yang diawali dengan tanda #. Cara ini yang kebanyakan dipakai oleh para web developer pemula karena dapat dengan mudah didapatkan dengan pilihan warna yang sangat beragam. Untuk mendapatkan kode Heksa dari warna yang kita inginkan, kita bisa menggunakan tool Color Picker.

Hasil yang tampak pada Browser :

Selain ketiga cara diatas, CSS3 hadir dengan empat cara baru dalam pewarnaan suatu elemen HTML. Berikut adalah cara pewarnaan baru yang ditawarkan oleh CSS3 :

a. RGBA merupakan pengembangan dari RGB yang memiliki tambahan parameter yaitu alpha. Sehingga formula baru yang terbentuk adalah rgba(red, greeen, blue, alpha) yang mana nilai dari alpha antara 0.0 sampai 1.0 yang merupakan transparansi dari warna hasil parameter red,green dan blue didepannya.

b. HSL merupakan singkatan dari Hue, Saturation, dan Lightness. Hue adalah derajat warna antara 0 sampai 360 yang mana 0 atau 360 adalah merah, 120 adalah hijau dan 240 adalah biru. Saturation adalah persentase dari warna Hue yang berkisar antara 0% sampai 100% yang mana semakin besar persentasenya maka semakin jelas warna yang tampak. Lightness juga merupakan persentase dari warna namun dalam segi yang berbeda yaitu unsur pencahayaan yang mana 0% adalah hitam, dan 100% adalah putih. Formula dari HSL adalah hsl(hue, saturation, lightness).

c. HSLA merupakan pemberian tambahan parameter alpha pada formula HSL sehingga terdapat unsur transparansi. Formula dari HSLA adalah hsla(hue, saturation, lightness, alpha). 

d. Opacity sebenarnya bukan sebuah cara untuk memberikan value warna pada sebuah property warna melainkan ia sendiri adalah sebuah property yang dapat digunakan untuk memberikan transparansi terhadap sebuah elemen tertentu sehingga elemen tersebut dapat menjadi lebih bervariasi. Value dari property opacity berkisar antara 0.0 sampai 1.0 yang mana value 0.0 akan membuat sebuah elemen tidak tampak atau transparan.

Baris kode berikut akan merupakan penerapan dari keempat cara yang dihadirkan oleh CSS3 :

Hasil yang tampak pada Browser :

Dari semua cara pewarnaan yang telah dibahas sebelumnya, semua cara masih dapat digunakan sampai saat ini dalam web design. Temen-temen dapat memilih cara pewarnaan sesuai dengan selera masing-masing mempertimbangkan kebutuhan juga sehingga website yang dihasilkan menarik dan dengan pewarnaan yang sesuai. Demikianlah pembahasan tentang Macam-Macam Cara Pewarnaan dalam CSS. Semoga bermanfaat, tetep semangat terus buat temen-temen belajarnya, Salam Belajar !

Jenis-Jenis List pada HTML

Jenis-Jenis List pada HTML - Bagi seorang developer web pasti sudah tidak asing lagi dengan hal-hal yang terkit dengan list atau daftar. Untuk membuat sebuah daftar barang misalnya pada HTML tidaklah sulit. Namun sebelum mempelajari lebih lajut tentang bagaimana cara membuatnya, alangkah baiknya kita memahami terlebih dahulu jenis dan tipe-tipe list pada HTML. Mari kita perhatikan gambar berikut :

Gambar Jenis List HTML

Ordered List

List jenis ini merupakan list yang memiliki urutan tertentu. Ada lima jenis tipe list yang dapat digunakan diantaranya menggunakan angka arab, huruf abjad kapital, huruf abjad kecil, angka romawi besar, dan angka romawi kecil.

Contoh penerapan pada baris kode :

Baris kode disamping merupakan salah satu contoh cara membuat list dengan urutan menggunakan angka arab. Untuk tipe yang lainnya kita hanya perlu mengganti value pada attribut type. Untuk membuat sebuah Ordered List harus dimulai dengan tag <ol>. Seluruh anggota list dituliskan masing-masing diantara tag <li>. dan diakhiri dengan penutup tag </ol>. Default dari Ordered List adalah list dengan type angka arab 1,2,3 . . dst yang artinya apabila baris kode hanya menggunakan tag <ol> tanpa memberikan attribut type maka type angka arab lah yang akan tampak pada browser.

Hasil yang tampak pada Browser :

UnOrdered List

List jenis ini merupakan list yang tidak memiliki aturan urutan tertentu. Ada empat type yang dapat digunakan diantaranya disc, circle, square dan none. 

Baris kode disamping merupakan salah satu contoh cara membuat UnOrdered List dengan type circle. Untuk type yang lainya hampir sama dengan Ordered List, kita hanya perlu mengganti value dari property list-style-type. Perlu diperhatikan bahwa tag untuk membuat Unordered list adalah tag <ul> berbeda dengan Ordered List yang menggunakan tag <ol>. Default dari UnOrdered List adalah list dengan type disc yang artinya apabila baris kode hanya menggunakan tag <ol> tanpa memberikan attribut style dan properti list-style-type maka type disc lah yang akan tampak pada browser.

Hasil yang tampak pada browser :

Selain kedua jenis list tersebut masih ada lagi jenis list namun tidak termasuk keduanya yaitu Description List. List tipe ini digunakan untuk membuat daftar deskripsi pada setiap anggota List.

Mari kita Lihat baris kode berikut :

Description List dibangun dengan tag <dl> yang mana setiap anggotanya dibuat dengan tag <dt> dan setiap deskripsi dari anggota tersebut dibuat dengan tag <dd>.




Hasil yang tampak pada Browser :

Sebuah anggota dalam list dapat berupa list baru yang mana memiliki beberapa anggota sendiri. Kondisi seperti itu biasa disebut dengan Nested List. Masih Bingung ? yuk langsung kita perhatikan baris kode berikut :

Baris kode ke-11 sampai baris kode ke-15 merupakan sebuah list sendiri yang disisipkan pada salah satu anggota dari list utama sehingga tampak seperti sebuah list didalam list, itulah yang disebut Nested List.

 Hasil yang tampak pada Browser :

Bagaimana temen-temen, mudah sekali bukan cara membuat list di HTML? Semoga Tutorial Jenis-Jenis List pada HTML kali ini dapat dengan mudah dipahami ya. Salam Belajar, Tetap Semangat !

Indonesia Android Kejar Batch 3 Surabaya 2017

Indonesia Android Kejar Batch 3 Surabaya 2017 - Indonesia Android Kejar atau biasa disingkat IAK adalah suatu program yang diiniasi oleh Google Developers untuk mengasah kemampuan developer Indonesia dalam mengembangkan aplikasi mobile. Saya sendiri baru mengetahui adanya event ini setelah saya berkuliah di Surabaya. Berawal dari niat iseng saya mencoba mendaftar ketika waktu itu saya mendapat informasi dari salah seorang teman, padahal sebelumya saya belum pernah belajar pemrograman android.

Oh iya pada waktu saya mendaftar, event IAK yang saya ikuti sudah masuk Batch 3 yang artinya event tersebut sudah ketiga kalinya diadakan oleh Google Developers. Perlu temen-temen ketahui bahwa IAK batch 3 ini hadir di 10 kota besar di Indonesia loh salah satunya adalah Surabaya. Dalam event ini kita terbagi dalam beberapa kelas, ada kelas Beginner bagi para pemula yang baru memiliki niatan untuk belajar membuat sebuah aplikasi android, ada kelas intermediet bagi para developer yang pengen menambah skill programmingnya dibidang android dan ada pula kelas advanced yang merupakan kelas bagi para mastah-mastah yang uda jago banget ngodingnya. Pasti temen-temen sudah pada tau kan kelas mana yang saya ikuti? Yaps betul sekali saya mengikuti kelas beginner. 

Saya yang pakai kemeja biru gan, hihi

Metode pelatihan dalam event Indonesia Android Kejar adalah para peserta terbagi dalam sebuah kelompok belajar yang akan diajak diskusi dan dibimbing oleh seorang fasilitator. Namun, sebelum pelatihan dalam kelas dilaksanakan, setiap peserta dihimbau untuk menyelesaikan kursus online yang ada di udacity sehingga paling tidak sebelum kelas dimulai, kami para peserta sudah memiliki sedikit pemahaman tentang pemrograman android. Untuk kelas beginner sendiri diadakan dalam 2 x 8jam.

Pada pelatihan hari pertama dimulai pada pukul 08.00, kami sebagai peserta mulai dikenalkan tentang pemrograman android oleh Fasilitator. Kemudian kami diajak sedikit berdiskusi tentang perkembangan Android saat ini. Setelah itu kami bersama-sama belajar bagaimana cara membuat tampilan aplikasi android yang baik dan menarik. Kelas yang kami ikuti begitu seru. Terkadang ada peserta yang terlihat kebinguangan karena mungkin ia bernasib sama seperti saya yang baru mulai belajar pemrogaman android. Ada juga peserta yang mencoba mengusili peserta lain yang berujung pada tertawa bersama. Keseruan yang kami alami membuat kami lupa bahwa sudah memasuki waktu istirahat. Maka dengan senang hati kami rehat sejenak untuk sholat dan makan bersama. Oh iya pada event ini kita dapat konsumsi loh, tuh banyak banget kan manfaatnya selain nambah ilmu, nambah teman, juga bisa bikin hemat karena mengurangi jatah pengeluaran buat makan siang, hehe. 

Proses belajar dan diskusi pun dilanjutkan sampai tiba saatnya untuk mengakhiri sesi di hari pertama. Para peserta termasuk saya pun berkemas untuk pulang kerumah masing-masing dengan perasaan yang puas karena terlalu asik belajar dan mendapatkan pengalaman baru. 

Di hari kedua pelatihan saya sudah mulai faham nih dengan pemrograman android. Begitu pula dengan peserta yang lain jadi pelatihan dihari itu berlangsung sedikit lebih cepat dibandingkan dengan  hari pertama. Sebelum sesi pelatihan berakhir, fasilitator memberikan informasi bahwa setiap peserta akan dinyatakan lulus dalam pelatihan Indonesia Android Kejar ketika telah menyelesaikan kursus online di Udacity, hadir dalam pelatihan di kelas dan menyelesaikan project yang merupakan implementasi dari ilmu yang telah didapat selama pelatihan. Pengerjaan projectnya pun dibatasi oleh waktu yaitu 5 hari setelah pelatihan berakhir project harus selesai dikerjakan dan dikumpulkan ke fasilitator. Bagi kami para peserta, ini adalah tantangan sekaligus langkah awal bagi kami untuk mulai mewujudkan keinginan kami untuk memiliki aplikasi android buatan kami sendiri.

Setelah saya merenung dan berfikir akhirnya saya menemukan ide yang cocok untuk saya jadikan sebagai proyek aplikasi android. Saya pun mulai berusaha mengerjakanya sedikit demi sedikit. Setelah melalui proses dan perjuangan yang sedikit membutuhkan perhatian lebih, akhirnya ide saya sudah berwujud aplikasi yang kemudian saya beri nama Ayo Menghafal.

Berikut ini adalah screenshoot dari aplikasi yang saya buat :

a. Tampilan ketika Aplikasi dibuka

Ini merupakan tampilan SplashScreen saat pertama kali aplikasi dibuka.

b. Tampilan Menu

Terdapat 3 button yang mana masing-masing ketika di klik akan mengarah ke fitur dari aplikasi.

c. Tampilan dari tombolTentang Aplikasi

Menampilkan informasi tentang aplikasi itu sendiri.

d. Tampilan dari tombol Pancasila

Menampilkan gambar Garuda pancasila serta sila-sila dalam pancasila yang mana ketika sebuah sila di klik akan terdengar bunyi dari sila tersebut.

e. Tambilan tombol Rukun Islam

Menampilkan gambar-gambar lucu ilustrasi dari rukun-rukun Islam dan sama dengan menu pancasila ketika gambar pada salah satu rukun Islam di klik akan terdengar bunyi dari rukun Islam tersebut.

Ide aplikasi tersebut berasal dari keinginan saya untuk membantu anak-anak Indonesia usia dini untuk belajar menghafal pancasila agar menumbuhkan semangat nasionalitas dalam dirinya serta belajar menghafal Rukun Islam agar muncul sifat religius dalam diri anak tersebut. Itu sekilas tentang aplikasi yang saya buat dalam rangka menyelesaikan tugas dalam rangka mengikuti Event Indonesia Android Kejar. 

Sebentar lagi akan diadakan Indonesia Android Kejar Batch 4. Bagi temen-temen yang ingin memulai belajar pemrograman android saya sangat menyarankan untuk ikut dalam program ini. Temen-temen bisa langsung daftar di Link daftar Indonesia Android Kejar .Selain temen-temen bakalan dapet ilmu yang bermanfaat, temen-temen juga bakal bertemu dengan orang-orang hebat yang selalu haus akan ilmu pengetahuan dan memiliki semangat yang tinggi untuk belajar sehingga temen-temen akan merasa termotivasi untuk terus upgrade pengetahuan dan skill. Salam belajar, Ayo terus Belajar, Semangattt . . .

Perkembangan Sistem Operasi pada Android

Perkembangan Sistem Operasi pada Android - Android merupakan sebuah Sistem operasi pada Smartphone yang dikembangkan oleh Google yang beberapa tahun terakhir mengalami perkembangan yang sangat pesat. Sistem Operasi sendiri adalah sebuah sistem yang mengatur sumber daya dari perangkat keras dan perangkat lunak. Bagi sebuah Smartphone, menggunakan Sistem operasi yang terupdate akan memberikan pengalaman penggunaan yang lebih menyenangkan dari pada menggunakan smartphone yang menggunakan sistem operasi versi yang belum upgrade.

source : https://cnet4.cbsistatic.com/img/QJcTT2ab-sYWwOGrxJc0MXSt3UI=/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg

Berikut adalah Perkembangan Sistem Operasi Android yang telah dikembangkan oleh Google dari masa ke masa :

a. Android 1.0

Android versi ini dirilis pada tanggal 23 September 2008 dan masih belum memiliki nama dan masih tampak sangat sederhana. Pada versi ini mulai dikenalkan fitur pull-down notification untuk pertama kalinya yang saat ini sering kali kita gunakan untuk melihat pemberitahuan yang masuk pada smartphone android kita. Terdapat juga fitur Android Marrket yang saat ini lebih familiar dikenal dengan istilah Google Play dimana di Android Market inilah aplikasi Android yang berjalan pada versi ini dapat didownload layaknya aplikasi pada Google Play saat ini.

b. Android 1.1

Sistem Android yang dirilis pada tanggal 9 Februari 2009 ini merupakan penyempurnaan dari Android versi 1.0 yang memiliki fitur dapat menampilkan rincian atau tinjauan saat penggunanya mencari lokasi bisnis pada peta. Tak hanya itu Android versi ini juga dapat menampilkan atau menyembunyikan tombol panggilan, dapat menyimpan lampiran pada pesan, serta menambah dukungan pada tata ruang sistem sehingga menjadi lebih baik dari versi sebelumnya.

c. Android 1.5 Cupcake

Android versi ini untuk pertama kalinya memiliki brand nama yaitu Cupcake yang dirilis tidak lama setelah android versi sebelumnya yaitu pada tanggal 30 April 2009.Beberapa fitur unggulan dari versi ini diantaranya adalah dukungan terhadap papan ketik virtual pihak ketiga dengan prediksi teks dan kamus pengguna. Mulai mengenalkan widget yang merupakan tampilan aplikasi miniatur yang tertanam pada aplikasi lain serta kemampuanya untuk merekam dan memutar video berformat MPEG4 dan 3GP.

d. Android 1.6 Donut

Versi ini rilis pada tanggal 15 September 2009 dengan fitur andalan yaitu mesin sintesis pengucapan multi bahasa yang memungkinkan aplikasi android tertentu mampu mengucapkan teks dan kemampuan untuk menghapus banyak foto sekaligus serta beberap fitur lainnya.

e. Android 2.0 Eclair

Android Eclair berbasis kernel Linux 2.6.29 yang dirilis pada tanggal 26 Oktober 2009 ini merupakan versi Android yang pertama kali mendukung HTML5. Pada versi ini pula terjadi peningkatan Google Maps 3.1.2 serta penambahan fitur live wallpaper yang dapat menampilkan animasi pada latar belakang layar depan.

f. Android 2.2 Froyo

Berbasis kernel linux 2.6.32 dan dirilis pada tanggal 20 Mei 2010. Android versi Froyo menghadirkan banyak perubahan termasuk peningkatan kecepatan, penyimpanan, dan pengoptimalan kerja. Padda versi ini juga terdapat peningkatan fungsionalitas USB thetering dan Hotspot Wi-Fi serta pembaharuan fitur Android Market dengan menambahkan fitru pembaharuan otomatis dan beberapa fitur tambahan lainnya.

g. Android 2.3 Gingerbread

Versi Gingerbread dirilis pada tanggal 6 Desember 2010. Pada versi ini terdapat pembaharuan design antarmuka pengguna dan meningkatkan kecepatan serta kesederhanaan. Peningkatan juga terjadi pada fungsi salin/tempel yang memungkinkan pengguna untuk memilih kata dengan menekan dan menahan layar serta beberapa peningkatan lainya.

h. Android 3.0 Honeycomb

Android versi Honeycomb dibangun berdasarkan kernel linux 2.6.36 yang  dirilis pada tanggal 22 Februari 2011. Pada versi ini terdapat penambahan fitur yaitu System Bar yang memberikan kemudahan serta akses cepat pada notifikasi, status dan tombol navigasi lunak yang terdapat tepat dibawah layar. Terdapat pula Multi-tugas sederhana yang memungkinkan pengguna untuk melihat cuplikan aplikasi yang sedang berjalan serta dapat berpindah dengan cepat dari suatu aplikasi ke aplikasi yang lain dan peningkatan fitur-fitur pada versi sebelumya.

i. Android 4.0 Ice Cream Sandwich

Versi yang dirilis pada tanggal 19 Oktober 2011 dengan berdasar pada kernel Linux 3.0.1 ini lebih fokus pada perubahan fitur tampilan. Perubahan yang terjadi yaitu pemisahan widget di tab baru yang terletak pada layar bersebelahan dengan aplikasi, pembuatan folder yang lebih mudah dengan adanya gaya drag-and-drop, serta Launcher yang bisa dicustomisasi oleh pengguna.



j. Android 4.1 Jellybean
Pembaharuan antarmuka yang lebih halus terjadi padda versi Jellybean yang dirilis pada tanggal 9 Juli 2012. Fitur andalannya yaitu teks dua bahasa serta dukungan terhadap bahasa yang lainnya serta kemampuan untuk menonaktifkan notifikasi dari aplikasi tertentu dan pembaharuan fitur-fitur lainnya.



k. Android 4.4 Kitkat
Android Kitkat dirilis pada tanggal 31 Oktober 2013 hadir dengan tujuan utama yaitu optimasi kinerja dengan perangkat berspesifikasi yang lebih rendah. Peningkatan juga terjadi pada unsur visual seperti penyeimbang audio dan peningkatan suara audio serta perekam aktifitas layar yang terintegrasi.




l. Android 5.0 Lolipop
Android versi ini pertama kali diperkenalkan pada 25 Juni 2014pada persentasi keynote dalam konferensi pengembang Google I/O. Perubahan yang paling mencolok dari Android versi ini adalah Design antarmuka yang disebut Material Design serta proyek volta yang berguna untuk meningkatkan daya hidup baterai 30%lebih tahan lama.



m. Android 6.0 Marshmallow
Versi Marshmallow pertama kali diperkenalkan pada event Google I/O tahun 2015 tepatnya pada tanggal 28 Mei 2015. Android versi ini memiliki skema manajemen daya baru bernama Doze yang mengurangi tingkat aktivitas aplikasi latar belakang. Pengembanganya yang lain yaitu memberikan dukungan asli untuk pengenalan sidik jari.



n. Android 7.0 Nougat
Android Nougat merupakan versi Terbaru dari Android yang dirilis pada tanggal 22 Agustus 2016. Pada versi ini meskipun tidak banyak berubah pada antarmuka namun banyak terjadi pembaharuan pada sisi sistem yang bertujuan untuk menggabungkan efisiensi dan pengalaman pengguna yang lebih baik. Segi keamanan juga turut serta ditingkatkan pada Android versi 7.0 ini.


Demikianlah pembahasan tentang Perkembangan Sistem Operasi pada Android yang merupakan platform paling populer saat ini yang dikembangkan oleh Google. Semoga bermanfaat . . .

Source : https://id.wikipedia.org/wiki/Daftar_versi_Android

Pengertian CSS dan Kegunaanya dalam Web Development

Pengertian CSS dan Kegunaanya dalam Web Development - CSS merupakan bagian yang tak bisa dipandang sebelah mata pada web development terutama bagi para Web Front-End Developer. Pertanyaan yang sering muncul difikiran para pemula atau biasa disebut para beginner (red:newbie) adalah apa sih CSS itu? nah kali ini sebagai sesi awal dari Tutorial CSS saya akan mengulas sedikit tentang gambaran umum dari CSS beserta bagaimana ia digunakan oleh para web developer untuk membuat website nya tampil dengan menakjubkan.

source gambar : http://www.codingdojo.com/blog/wp-content/uploads/css.jpg

Apa itu CSS ?

Kita mulai pembahasanya dari pengertian CSS. CSS merupakan singkatan dari Cascading Style Sheet yang merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman (source:wikipedia). Jadi CSS ini lah yang akan memberikan style atau gaya pada setiap elemen HTML yang kita buat. Ibarat sebuah rumah CSS ini adalah tool seperti cat, gergaji, dll yang digunakan oleh Pak Tukang sebagai web developer untuk mengatur sedemikian rupa agar website yang berhasil dibuat terlihat indah dan sempurna. Bagaimana sudah sedikit faham bukan? Yuk lanjut!

Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan yang kemudian membentuk hubungan saling terkaitpada setiap style (source:wikipedia).

Perkembangan CSS

Perkembangan CSS sendiri dimulai dari versi CSS1 kemudian berubah menjadi CSS2 dan versi terbaru dari CSS saat ini adalah CSS3. Dari setiap perkembangan pasti memberikan kemudahan yang lebih baik kepada para web developer. CSS3 sebagai versi dari CSS yang terbaru saat ini memberikan banyak fitur kemudahan dalam web design bahkan kini membuat animasi dalam website pun dapat dilakukan dengan menggunakan CSS3 murni tanpa perlu bantuan dari JavaScript.

Penulisan CSS
Penulisan CSS dalam Web Development ada tiga cara namun sebelum menginjak ke tiga cara tersebut alangkah lebih baiknya kita mengenal lebih dulu syntax atau format penulisan dari CSS. Mari kita perhatikan gambar berikut :

source : https://www.w3schools.com/css/selector.gif

Pada gambar diatas terdapat selektor yang berarti elemen HTML yang dipilih untuk diberikan style tertentu. kemudian tanda kurung kurawal buka serta kurung kurawal tutup sebagai pembungkus dari style yang diberikan. Diantara tanda kurung kurawal dapat kita tuliskan deklarasi-deklarasi style yang terdiri dari property dan nilainya yang akan diberikan kepada elemen yang ditunjuk oleh selektor.

Berikut ketiga cara dalam menuliskan CSS dalam Web Development:
a. Inline Style Sheet merupakan cara penulisan CSS yang dituliskan langsung beserta tag dari elemen HTML yang akan diberikan style. untuk lebih jelasnya mari perhatikan gamabar dibawah ini.

Hasil yang tampak pada Browser :
Keterangan : Pemberian properti pada style boleh lebih dari satu dan tidak dibatasi tergantung dari kebutuhan.


b. Internal Style Sheet merupakan cara penulisan CSS yang dituliskan dalam satu file dengan baris kode HTML namun dikelompokkan menjadi satu di dalam tag <style>. contohnya pada gambar dibawah ini.
  Baris kode disamping memeberikan hasil tampilan web yang sama dengan baris kode pada cara penulisan Inline Style Sheet. CSS diberikan dengan menuliskannya di dalam tag <style> yang dibungkus oleh tag <head>.






c. Eksternal Style Sheet merupakan cara penulisan CSS yang dituliskan dalam file berbeda dari file HTMLnya. namun pada file HTML diberikan pemanggilan file CSS agar style yang dibuat dapat diterapkan oleh elemen-elemen pada file HTML.

Pada file Belajar.html baris kode ke-5 terdapat pemanggilan file Belajar.css sehingga penulisan dengan cara Eksternal Style Sheet akan membuat baris kode kita menjadi rapi dan mudah dibaca karena file HTML dan File CSS terpisah.





Dari ketiga cara tersebut terdapat pertanyaan jika ada satu elemen yang dipengaruhi oleh tiga style yang berbeda namun selektor menunjuk pada elemen yang sama maka style manakah yang akan memberikan efek pada elemen tersebut? jawabanya adalah tingkat kekuatan style sendiri secara berurutan dimulai dari yang paling kuat adalah Inline Style Sheet , Internal Style Sheet, kemudian baru Eksternal Style Sheet. Sehingga ketika ada style yang menunjuk pada elemen yang sama dan property yang diberikan juga sama namun nilanya berbeda style yang akan diberikan adalah menganut urutan tersebut.  Sekian pembahasan tentang Pengertian CSS dan Kegunaanya dalam Web Development tetap semangat belajarnya.

Dasar-Dasar HTML

Dasar-Dasar HTML - Setelah mengenal dan memahami postingan saya sebelumnya tentang Pengertian dan Perkenalan HTML sekarang saya akan membahas mengenai Dasar-Dasar HTML yang mana akan membahas tentang Elemen Bertingkat, Attribut, Heading, Paragraf, Format Teks, Quote, Komentar, Link dan Gambar. Yuk langsung saja ke pembahasanya.

Elemen Bertingkat

Struktur kode pada HTML merupakan struktur kode yang bertingkat yang mana suatu elemen dapat dibentuk dengan menggabungkan elemen-elemen yang lain baik beberapa elemen yang sama maupun elemen yang berbeda. Contoh logika sederhananya seperti cerita berikut ini "Ibaratkan sebuah website adalah sebuah rumah. Rumah dibangun dengan elemen seperti lantai, tembok, atap, dan lain sebagainya. Elemen-elemen tersebut tidak berdiri sendiri alias dibangun dengan cara menyatukan beberapa elemen lain. Elemen tembok misalnya, ia dibangun dengan beberapa elemen yang berbeda yaitu batu batako, pasir, semen, kapur dan sebagainya. Sedangkan elemen atap dibentuk dengan beberapa elemen yang sama yaitu genteng yang disusun rapi". Bagaimana sudah ada gambaran bukan??? Masih belum ya. Oke langsung aja ke baris kode dibawah ini.
Pada baris kode disamping dapat kita lihat bahwa elemen <body> dibangun oleh satu elemen judul dengan tag <h1> dan dua elemen paragraf dengan tag <p>. Hal demikian lah yang disebut Elemen bertingkat karena elemen <body> tidak dapat berdiri sendiri.

Attribut

Attribut pada HTML merupakan pelengkap yang menempel pada tag layaknya kancing yang menempel pada baju meskipun tidak semua baju wajib ada kancingnya. Begitu pula dengan attribut pada HTML yang tidak selalu menempel pada tag. Penggunaan attribut sendiri dapat dituliskan dengan format nama Attribut = "isi attribut" . Berikut adalah beberapa contoh attribut pada HTML :

a. Attribut title yang merupakan attribut yang dapat menempel pada banyak tag yang berfungsi untuk menampilkan sebuah judul tersembunyi dan hanya akan muncul ketika pointer menunjuk pada elemen tersebut. Lebih jelasnya mari kita lihat baris kode berikut ini.

Hasilnya ketika dibuka di Browser :

Tulisan "Aku Cupuh"  muncul pada saat pointer menunjuk ke tulisan "Developer Cupuh" kaena pada tah <h1> diberikan attribut tittle.

b. Attribut href  merupakan attribut yang melekat pada tag <a> yang berfungsi untuk link. untuk penjelasanya akan dijelaskan pada bagian elemen link.

c. Attribut height dan width yang merupakan attribut untuk mengatur ukuran panjang dan lebar suatu elemen. attribut ini biasanya lebih sering melekat pada tag <img>. 

d. Attribut alt yang merupakan attribut yang melekat pada tag <img>. attribut ini akan dibahas lebih lanjut pada  elemen gambar.

Heading

Heading pada HTML merupakan format penulisan judul yang bertujuan agar pemberian judul pada halaman website dapat memiliki standard hierarki. tag untuk heading sendiri dimulai dari yang paling besar yaitu tag <h1> sampai tag <h6>.

Hasilnya ketika dibuka di Browser :

Paragraf

Paragraf pada HTML dibentuk dengan menggunakan tag <p>dan ditutup dengan tag </p>.

Format Teks

Dalam HTML ada beberapa tag yang dapat digunakan untuk menampilkan format teks yang berbeda dengan teks normalnya. Hal ini sangat perlu untuk diperhatikan karena terkadang kita pasti ingin memberikan efek teks yang berbeda pada sebagian teks tertentu. Beberapa Format Teks yang dapat digunakan sebagai berikut ini:

a. Teks Efek Tebal efek ini dapat dibuat dengan menggunakan tag <b>.

b. Teks Efek Strong efek ini hampir sama dengan efek tebal namun efek ini berfungsi sebagai penekanan pada kata tertentu misalnya dan dibuat dengan tag <strong>.

c. Teks Miring yang merupakan hasil dari tag <i>.

d. Empesize Teks yang merupakan efek yang hampir sama dengan Teks Miring namun efek ini hasil dari tag <em>.

e. Marked Teks yang merupakan penandaan teks agar dapat memperoleh perhatian khusus. Efek ini dibuat dengan teg <mark>.

f. Small Teks dapat dibuat dengan menggunakan tag <small>.

dan masih ada beberapa efek Teks lain yang bisa dilihat disini.

Quote

Membuat quote pada html dapat dengan menggunakan tag <q>. Contoh pada baris kode berikut ini .

Hasil pada Browser :

Komentar

Komentar pada baris kode HTML berfungsi untuk memberikan penjlasan terkait dengan baris kode yang ingin diberikan komentar yang mana komentar ini akan diabaikan oleh browser dan tidak akan tampil di laman browser. Komentar pada HTML ditulis diantara tanda <!-- komentar -->.

Masih belum kepikiran ??? Yuk diperhatikan gambar berikut.

Hasil yang muncul di browser :

Keterangan : baris kode ke 7 tidak akan tampil pada browser karena baris tersebut merupakan komentar yang dibuat oleh si pembuat website agar orang lain dapat dengan mudah memahami baris kode yang dibuatnya.

Link

Sebuah link pada HTML dapat dibuat dengan menggunakan tag <a> dan dengan bantuan attribut href  yang mana href disini berisi url dari website yang akan dituju. Contoh penggunaanya dapat dilihat pada gambar berikut ini.

Hasil pada browser :

Keterangan : tulisan link ini pada browser dapat di klik dan akan mengarah ke url yang ditautkan pada attribut href.

Gambar

Gambar dapat ditampilkan pada laman web dengan menggunakan tag <img> dengan bantuan attribut src yang mana attribut ini diberi nilai sumber dari gambar yang ingin ditampilkan. Gambar dapat bersumber dari file kita sendiri maupun dari website lain. Contoh berikut akan lebih menjelaskan.

Hasil pada Browser :

Source gambar : http://9gambar.blogspot.co.id/2015/02/gambar-kartun-lucu-lengkap.html

Keterangan : untuk mengatur ukuran gambar dapat dengan menggunakan attribut width untuk lebarnya dan attribut height untuk panjang gambar. baris kode ke 7 adalah contoh sumber gambar yang berasal dari website lain sedangkan baris kode ke 8 adalah contoh gambar yang bersumber dari file yang berada di komputer.

Demikian pembahasan tentang Dasar-Dasar HTML yang dapat kita pelajari untuk kali ini. Tetap semangat untuk temen-temen belajar websitenya.