Skill HTML5 sangat harus kuasai Web Developer untuk melancarkan tugas perkerjaanya. Bahkan, pemula dan non-programmer juga bisa saja memiliki skill HTML5.
Faktanya, Setiap kali Anda mengunjungi sebuah situs web, Anda akan berurusan dengan HTML. Jika Anda terbiasa dengan beberapa skill HTML5 dan pemrograman yang berkaitan, Anda dapat menghemat banyak waktu atau bahkan uang.
Terlebih pada saat anda membuat beberapa penyesuaian mendetail pada situs web atau mengoptimalkan elemen Web dasar.
Karenanya, Labkom99 pada artikel ini telah memilih 10 Skill HTML5 Yang Harus Di Kuasai Web Developer. Sehingga mereka dapat dengan mudah menguasai skill html5 tersebut tanpa menghabiskan terlalu banyak waktu dan energi.
1. Dapat Berinteraksi Dengan Sumber Daya Media Cache Lokal
API FileSystem HTML5 awalnya dianggap sebagai alternatif AppCache untuk mengimplementasikan aset cache dinamis. Tetapi tahukah Anda bahwa Anda sebenarnya dapat menggunakan API FileSystem HTML5 untuk berinteraksi dengan file yang disimpan di perangkat lokal pengguna?
Misalnya, Anda dapat menambahkan fungsi berikut ke aplikasi Anda:
- Pengunggah breakpoint: Salin file ke sandboox lokal dan unggah secara berkelompok. Operasi pengunggahan dapat dimulai kembali setelah koneksi terputus atau browser macet.
- Aktifkan cache lokal untuk aplikasi intensif media seperti game, pemutar musik dan editor foto.
- Buat mode offline untuk melihat konten, seperti video offline, lampiran email dan teks.
Catatan FileSystem API hanya didukung oleh Chrome. Jika Anda ingin mencoba fungsi penyimpanan offline, Anda juga dapat merujuk ke sumber daya dan tutorial kode berikut Belajar HTML5 File API HTML5
2. Melakukan Validasi Formulir Otomatis
Untuk keamanan situs web dan pengalaman pengguna yang lancar, validasi formulir sangat penting. Jadi, anda harus mempermudah pengguna untuk memasukkan berbagai jenis nilai yang benar di situs Anda.
Ada beberapa jenis masukan baru yang tersedia di HTML5, jenis ini telah dikemas ke dalam fungsi validasi yang ditentukan sebelumnya:
- URL
- Telp
Tetapi ketika Anda membutuhkan pengguna untuk memberikan beberapa data yang tidak ditentukan oleh input standar seperti nama pengguna yang mengandung karakter khusus, masalah sering terjadi. Ini adalah saat atribut “pola” yang berguna. Baca Belajar HTML5 Berbagai Bidang Form Dengan HTML5.
Pola memungkinkan Anda untuk menentukan aturan khusus dan kemudian menggunakan ekspresi reguler (RegEx) untuk memvalidasi formulir masukan. RegEx menentukan ekspresi yang akan diperiksa untuk nilai elemen <input>.
Berikut ini adalah contoh penambahan aturan baru. Misalnya, Anda ingin menentukan bahwa kata sandi tidak boleh melebihi 15 karakter dan hanya dapat berisi huruf kecil:
<form action="/action_page.php" method="get">
password= <input type="password" name="pw" pattern="[a.z].{1,15,}">
<input type="submit" value="Submit">
</form>Untuk menggambarkan aturan dengan lebih baik, Anda juga dapat menambahkan pesan khusus untuk memberi tahu pengguna mengapa kata sandi yang mereka masukkan tidak memenuhi persyaratan. Cukup tambahkan baris lain untuk menyesuaikan pesan pop-up:
<form action="/action_page.php" method="get">
password= <input type="password" name="pw" pattern="[a.z].{1,15,} title="Only Number">
<input type="submit" value="Submit">
</form>3. Buat Singkatan Untuk Kode Elemen HTML5
Emmet adalah plugin editor teks yang sangat berguna yang dapat menyederhanakan proses pengkodean HTML / CSS Anda. Alat ini menggunakan sintaks yang mirip dengan pemilih CSS. Memungkinkan Anda membuat berbagai singkatan untuk elemen kode HTML standar.
Di bawah ini adalah contohnya. Jika Anda memasukkan:
div#header>h1.logo>a{website}
Menjadi:
<div id="header"><h1 class="logo"><a href="">website</a></h1></div>Anda dapat menggunakan berbagai kombinasi yang ada di lcheat sheet. Atau Anda dapat membuat kombinasi ubah sesuai untuk sembarang tag HTML, lalu tekan Tab atau Ctrl + E untuk menambahkannya ke editor teks.
4. Menggunakan Tag Video Agar Transmisi Video Lebih Baik
Menggunakan tag video, Anda dapat menyematkan pemutar media yang mendukung pemutaran video ke halaman web dengan mulus. Anda bisa memilih:
- Menggunakan getUserMedia () atau WebRTC untuk mengaktifkan streaming langsung dari kamera.
- Menggunakan atribut src untuk memutar video yang dihosting secara lokal: <video src = “file.avi” />.
Selain itu, Anda harus menentukan kontrol untuk video. Seperti pemutaran, jeda, dan penyesuaian volume. Jika tidak, pengguna tidak akan memiliki kontrol apa pun yang tersedia. Kode contoh di sini adalah sebagai berikut:
<videowidth ="768" height="432" autoplay<source src="video.mp4" type="video/mp4"> </video>Untuk lebih meningkatkan pengalaman pengguna, Anda juga dapat mencoba atribut berikut:
- DisablePictureInPicture: melarang browser menampilkan menu konteks gambar-dalam-gambar atau secara otomatis meminta gambar-dalam-gambar.
- Loop: minta browser untuk memutar ulang video secara otomatis setelah pemutaran selesai.
- Muted: Secara otomatis mematikan audio dalam video.
- Poster: Menampilkan gambar kustom sebagai thumbnail video. Jika tidak, browser akan menampilkan frame pertama video sebagai thumbnail.
- Preload: Menunjukkan ke browser parameter mana yang akan memberikan pengalaman pengguna terbaik. Anda dapat menyetelnya ke tidak ada (tidak ada persyaratan pramuat).
- Metadata: hanya metadata video yang akan diambil di awal.
- Auto: meskipun pengguna tidak ingin menonton keseluruhan video, semua data video harus diunduh. Catatan: Prioritas atribut putar otomatis lebih tinggi dari atribut ini.
5. Skill HTML5 Untuk Perbaiki Cara Gambar Ditampilkan
Tag <picture> membantu mengoptimalkan cara gambar ditampilkan. Biasanya digunakan untuk:
- Gaya: Tentukan bagaimana media harus ditampilkan dalam berbagai kondisi misalnya, memuat versi gambar yang lebih kecil untuk layar yang lebih kecil. Ini adalah kunci untuk menciptakan desain yang responsif.
- Mempercepat: Tentukan ukuran gambar yang harus dimuat sesuai dengan spesifikasi layar pengguna.
- Dukungan browser: Menyediakan format gambar yang berbeda di berbagai jenis browser untuk menampilkan konten yang benar.
Contoh:
<picture> <sourcemedia="(min-width:846px)" srcset="img_1.jpg"> <sourcemedia="(min-width:300px)"srcset="img_2.jpg"> <img src="img_3.jpg "alt="logo"></picture>Tag <picture> berisi dua elemen anak tambahan:
- <source>: Menentukan sumber daya media dari elemen media.
- <img>: Tentukan gambar.
Untuk mengaktifkan opsi gaya lainnya, tambahkan atribut berikut ke elemen <source>:
- srcset (wajib): Digunakan untuk menentukan URL target gambar.
- media (mirip dengan kueri media): adalah kondisi yang dievaluasi oleh agen pengguna untuk setiap elemen <source>.
- Size: Tentukan keterangan lebar.
- type: Menyediakan definisi tipe MIME.
Elemen <img> dapat digunakan untuk memastikan bahwa gambar ditampilkan dengan benar di browser yang tidak mendukung elemen <picture>.
6. Skill Mingkatkan Kecepatan Memuat Halaman HTML5
Jika Anda ingin situs web Anda mendapat peringkat tinggi dalam hasil pencarian dan memberikan pengalaman pengguna yang hebat, maka Anda harus fokus pada kecepatan memuat halaman.
Namun, tidak mudah mendapatkan skor tinggi di Google Page Insights. Meskipun alat ini menunjukkan apa yang harus diperbaiki di situs Anda, alat ini tidak memberikan pedoman pengoptimalan yang tidak begitu jelas cara untuk mengoptimalkannya.
Rekomendasi resmi Google mempercepat loading website
- Menyesuaikan struktur HTML Anda
- Mengurangi jumlah data yang digunakan oleh sumber daya Anda.
Jadi, mari kita pecahkan menjadi beberapa langkah yang dapat ditindaklanjuti:
- Pastikan CSS Anda inline.
- Minimalkan, gabungkan, dan hilangkan file CSS eksternal yang tidak perlu.
- Automatically reduce CSS untuk mengurangi data CSS yang menghalangi rendering.
- Menggunakan jenis media CSS dan kueri media, sumber daya CSS tertentu ditetapkan sebagai jenis pemblokiran non-rendering .
- Letakkan bagian <content> sebelum <sidebar>.
- Tunda pemuatan JavaScript.
- Hasilkan data font yang dapat disematkan untuk mempercepat pemuatan font, dan pilih font yang aman untuk web
Kemudian jalankan lagi tugas pemeriksaan untuk melihat apakah ada yang perlu diperbaiki setelah melakukan perbaikan diatas.
7. Skill Akselerasi HTML5 Pada Situs Web
Mengirim file .zip dan bukan file index.html ke browser dapat menghemat banyak bandwidth dan waktu pengunduhan.
Untuk menyiapkan kompresi .gzip, Anda perlu mencari file htaccess di host web / server dan memodifikasinya dengan kode berikut:
<ifModule mod_gzip.c>mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_include file .(html?|txt|css|js|php|pl)$mod_gzip_item_include handler ^cgi-script$mod_gzip_item_include mime ^text/.*mod_gzip_include mime ^text/.*mod_gzip_include mime. mod_gzip_item_exclude mime ^image/.*mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule>Jika ini tidak berhasil, lihat tutorial berikut untuk jenis server web yang berbeda:
- Apache: https://bit.ly/3uAO8YA
- Litespeed: https://bit.ly/2Q5dtLa
- NGINX: https://bit.ly/33s0ndK
8. Gunakan Microdata Untuk SEO
Anda dapat menggunakan microdata untuk memasukkan konteks tambahan ke dalam halaman web. Kemudian, perayap web dapat merender mikrodata dari laman Anda dan memberikan pengalaman penjelajahan yang lebih baik kepada pengguna.
Mengindeks situs web Anda dengan akurasi yang lebih tinggi dan memberikan peringkat hasil penelusuran yang lebih akurat.
Singkatnya, Microdata terdiri dari pasangan nama / nilai, dan setiap item mendefinisikan satu set nama properti.
Proyek ini memiliki jenis proyek, pengenal global dan daftar atribut. Untuk membuat item baru, menggunakan atribut itemscope.
Atribut memiliki satu atau lebih nilai. Untuk menetapkan atribut ke item, gunakan atribut itemprop.
9. Skill Menggunakan Penyimpanan Lokal HTML5 Sebagai Pengganti Cookie
Penyimpanan Lokal (juga dikenal sebagai penyimpanan DOM) memungkinkan Anda menyimpan data pengguna secara lokal. Sehingga tidak perlu mengirim data melalui permintaan jaringan HTTP.
Ini dapat menghemat bandwidth dan meningkatkan kapasitas penyimpanan data. Bukankah itu terlihat bagus?
Tetapi ada peringatan penting: penyimpanan lokal hanya dapat disimpan di sisi klien, dan cookie dapat disimpan di sisi server atau di sisi klien.
Oleh karena itu, jika situs web Anda menggunakan cookie sisi server untuk menyesuaikan konten berdasarkan preferensi pengguna yang diketahui, migrasi ke penyimpanan lokal mungkin memerlukan perubahan arsitektur yang besar.
Namun dalam kasus yang relatif sederhana misalnya, Anda menggunakan cookie untuk menyimpan beberapa pengaturan dasar. Penyimpanan lokal mungkin merupakan alternatif yang baik. Terutama di area dengan koneksi jaringan yang buruk.
Juga perlu diingat bahwa penyimpanan lokal mungkin tidak ideal untuk data yang sangat sensitif seperti informasi keuangan. Anda disarankan untuk melakukan enkripsi tambahan pada semua data yang disimpan secara lokal. Baca Belajar HTML5 Dan Penyimpanan Data HTML5
10. Menyusun Daftar Menurun Dari Item Bernomor
Artikel Labkom99 10 Skill HTML5 Yang Harus Di Kuasai Web Develope diakhiri dengan teknik yang sangat sederhana: Anda dapat menggunakan atribut <reversed> untuk menambahkan daftar menurun alih-alih daftar menaik.
Berikut ini contoh cuplikan kode:
<ol reversed><li>Ready</li><li>Set</li><li>Go!</li></ol>Ini mungkin tidak masuk akal, tetapi ketika Anda ingin menambahkan beberapa gaya modis ke halaman, mungkin dapat berguna.
Kesimpulan
Sekarang Anda seharusnya sudah mengerti 10 Skill HTML5 Yang Harus Di Kuasai Web Developer ini. Skill HTML5 ini akan membantu Anda membangun situs web yang lebih cepat, lebih ramah pengguna dan lebih menarik. Namun ingatlah untuk membuat cadangan situs web Anda sebelum memulai percobaan.
