Desain Responsif, Gambar Retina, dan Debugging untuk Google Maps API

() translation by (you can also view the original English article)

Bagian terakhir dari seri Google Maps API For Designers dengan melihat desain responsif, gambar retina, dan berbagai alat pengujian dan debugging yang membuat hidup jauh lebih mudah. Ini memberikan a whistle-stop tour melalui berbagai macam area, yang dapat Anda telusuri lebih lanjut dalam proyek Anda sendiri.

Desain Responsif dan Pertanyaan Media

Home page Left - mobile style Right - laptopdesktoptablet style — Halaman beranda responsif. Kiri - gaya seluler. Kanan - laptop / desktop / gaya tablet.

Kecuali Anda pernah tidur di bawah semak belukar selama beberapa tahun terakhir, Anda akan tahu bahwa desain responsif adalah tentang membuat perubahan situs web dan menyesuaikan sesuai dengan perangkat yang ditonton.

Halaman beranda demo ini (di atas) juga menggunakan desain responsif untuk menghadirkan orang-orang dengan versi peta yang diubah tergantung pada perangkat, atau lebih khusus lagi lebar layar, yang mereka gunakan.

Langkah pertama sebelum kami melakukan hal lain adalah memastikan tag meta viewport diatur di bagian head pada halaman Anda.

1	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Catatan: Tepatnya atribut viewport yang Anda gunakan untuk mengatur segalanya terserah Anda. Baca panduan kami untuk lebih jelasnya.

Pendekatan populer untuk menangani desain responsif yang akan kami gunakan di sini adalah menerapkan media queries dalam CSS. Media queries adalah cara mengelompokkan CSS dan menerapkan gaya yang berbeda tergantung pada, misalnya, lebar viewport situs web yang sedang dilihat.

Daftar kode di bawah ini cukup panjang, tetapi sangat berguna untuk melihat apa yang sedang terjadi. Untuk melihat kode ini beraksi, lihat halaman beranda. Jika Anda melihatnya di layar yang lebih besar, seret sisi browser untuk membuatnya lebih sempit. Ketika lebar browser Anda mencapai di bawah 640px, desain harus berubah.

<!--Setting up the CSS styles-->
<style type="text/css">

html {
 height: 100%;
 }

 #gears{
 width:50%;
 }

 img {
 border:none;
 }

body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background: none;
 }

 #overall_wrapper {
 height: 100%;
 width: 100%;
 margin:0px;
 padding:0px;
 border:none;
 background:none;
 }

 #title_box{
 width: 100%;
 background-color:#89cbed;
 text-align:center;
 margin:0px;
 padding-top:5px;
 padding-bottom:10px;
 border:none;
 }

 #yellow_line_and_arrow{
 display:none;
 }

 #button_to_map_standard{
 width: 100%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:none;
 }

 #button_to_map_mobile {
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0px;
 display:block;
 }

 #blurb_about_demo_wrapper{
 width: 100%;
 background: #09F;
 margin:0px;
 padding:0px;
 border:none;
 }

 #blurb_about_demo_content{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 margin-top:5px;
 padding-top:5px;
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.8em;
 line-height: 2em;
 text-align:center;
 color:#ffffff;
 }

 #footer_box_wrapper{
 width: 100%;
 background-color:#89cbed;
 text-align:center;
 margin:0px;
 padding:0px;
 border:none;
 border-top-width:2px;
 border-top-style:solid;
 border-top-color:#ffffff;
 }

 #footer_box_content{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.1em;
 line-height: 1.4em;
 color:#ffffff;
 }

/*The media query. This CSS overwrites the corosponding elements (above) when the screen is over 641px in width. */
@media (min-width: 641px) {

 body {
 height: 100%;
 margin: 0px;
 padding: 0px;
 background-image: url('background9.jpg');
 background-color: #B3CDE6;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 background-size: cover;
 }

 #overall_wrapper {

 height: 100%;
 width: 40%;
 margin-left: auto;
 margin-right: auto;
 margin-top:0px;
 margin-bottom:0px;
 padding-left: 5%;
 padding-right: 5%;
 padding-top: 2%;
 padding-bottom: 2%;
 border-right-width: 2px;
 }

 #title_box{
 width: 400px;
 background-color:#89cbed;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-bottom:2px;
 padding-top:10px;
 padding-bottom:10px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 }

 #yellow_line_and_arrow{
 width: 400px;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top:2px;
 display:block;
 }

 #button_to_map_standard{
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:block;
 }

 #button_to_map_mobile {
 width: 95%;
 background: none;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 2px;
 margin-bottom: 5px;
 padding: 0px;
 display:none;
 }

 #blurb_about_demo_wrapper{
 width: 95%;
 background:#ffffff;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top: 10px;
 margin-bottom: 0px;
 padding-top:5px;
 padding-left:5px;
 padding-right:5px;
 padding-bottom:15px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 }

 #blurb_about_demo_content{
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 1.4em;
 line-height: 1.6em;
 color:#09C;
 }

 #footer_box_wrapper{
 width: 95%;
 background-color:#89cbed;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 margin-top:0px;
 margin-bottom:30px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 1px;
 padding-bottom: 2px;
 border-radius: 20px;
 border-top-left-radius:0px;
 border-top-right-radius:0px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
 border-width:0px;
 }

 #footer_box_content{
 font-family:Tahoma, Geneva, sans-serif;
 font-size: 0.9em;
 line-height: 1.3em;
 color:#ffffff;
 }
}

</style>

Kueri media dalam kasus ini adalah kode @media (min-width: 641px) pada baris 101, dan CSS berikutnya dalam kurung kurawal. Kueri media ini memeriksa lebar perangkat.

Desain Pertama Seluler

Sebaiknya gunakan pendekatan seluler pertama; ini adalah gagasan bahwa gaya default ditujukan untuk perangkat seluler, dan kemudian pengecualian secara progresif ditambahkan menggunakan kueri media saat viewport bertambah besar Pendekatan ini membantu situs web memuat lebih cepat di perangkat seluler. Misalnya, hal-hal seperti gambar latar belakang besar yang kami gunakan hanya dimuat untuk perangkat layar yang lebih besar.

Jadi dalam kode di atas, bagian pertama dari kode (yaitu di atas kueri media - @media (min-width: 641px)) akan memuat secara default di setiap perangkat. Kemudian kueri media @media (min-width: 641px) memuat gaya dalam kurung kurawal untuk perangkat dengan lebar lebih dari 641px lebar.

Breakpoints

Pertanyaan umum adalah:

"Di mana seharusnya breakpoint di desain?"

Breakpoint dalam contoh ini adalah 641px. Demo ini hanya menggunakan satu breakpoint, tetapi seringkali Anda menginginkan lebih dari satu. Ini dapat sangat bergantung pada konten Anda, dan juga pada berbagai perangkat yang Anda targetkan dan pada resolusi layar yang populer di pasar.

Dalam contoh ini, iPhone (lebar 640px) akan menampilkan gaya seluler default, sedangkan iPad2 (lebar adalah 768) akan menampilkan versi desktop. Breakpoint yang kami pilih sesuai untuk peta ini, karena gambarnya terlalu besar untuk telepon. Namun, situs web berbasis teks lainnya mungkin menemukan bahwa itu hanya ketika Anda turun ke ukuran layar yang jauh lebih kecil dimana gaya perlu diubah secara signifikan, dan sehingga titik pemisah mungkin lebih rendah.

Catatan: Ketika memilih breakpoints, sering kali lebih bijaksana untuk hanya mempertimbangkan desain, mengamati di mana ia rusak, daripada mengarah pada resolusi perangkat tertentu. Ukuran layar sangat luas dan beragam, ditambah perubahan seiring waktu, bahwa tidak ada cara untuk melacaknya secara akurat.

Mengarahkan Pengguna ke Versi Peta yang Berbeda

Terkadang tepat untuk menghadirkan pengguna dengan versi konten yang sepenuhnya berbeda, tergantung pada keadaan menontonnya.

Dalam kasus kami, ini dilakukan menggunakan dua tag div (yaitu button_to_map_mobile dan button_to_map_standard), masing-masing berisi tautan yang berbeda dan tombol 'visit map' hijau yang sedikit berbeda. Jika Anda menggunakan laptop atau komputer desktop, lihat halaman beranda dan seret sisi browser Anda ke dalam hingga desain berubah ke tata letak mobile. Anda harus memperhatikan bahwa tombol hijau 'visit map' sedikit berubah untuk menyertakan kata ‘seluler’. Jika Anda mengeklik tombol ini sekarang, Anda akan mendapatkan versi seluler dari peta.

Kueri media digunakan untuk mengganti div yang saat ini terlihat. Yaitu. jika Anda melihat daftar kode di atas, Anda dapat melihat bahwa button_to_map_standard memiliki display: none; diterapkan padanya ketika gaya ponsel standar digunakan, tetapi ketika permintaan media mendeteksi lebar layar lebih dari 641 piksel itu berlaku display: blok; ke button_to_map_standard. (Kueri media melakukan kebalikan dari div button_to_map_mobile).

Jika Anda mengikuti tutorial ini saat membuat halaman web Anda sendiri, perhatikan baik-baik kode sumber yang tersedia dari tautan di bagian atas halaman ini. Saya pribadi merasa lebih mudah untuk mendapatkan sesuatu yang pekerjaan awalnya menggunakan pendekatan ‘seluler pertama’ dan satu breakpoint, sebelum mengembangkannya ke desain yang lebih kompleks.

Perlu dicatat bahwa pilihan antara konten alternatif dan konten yang responsif adalah sesuatu yang harus Anda pertimbangkan, ketika Anda mengembangkan situs web untuk beberapa perangkat

Gambar retina

Mudah-mudahan Anda baru saja melihat sepintas versi peta seluler yang baru. Kami akan kembali hanya dalam satu menit. Tetapi pertama-tama, ada baiknya melihat bagaimana laman beranda menggunakan gambar yang dirancang untuk layar retina.

Retina (dan kepadatan hi-pixel lainnya) layar memiliki begitu banyak piksel, begitu berdekatan, sehingga hampir tidak mungkin bagi retina di mata manusia untuk membedakan piksel individu. Layar Retina dianggap sebagai layar generasi berikutnya, dan semakin banyak perangkat yang memilikinya, seperti iPhone 4 dan 5 serta beberapa MacBook Pro berspesifikasi tinggi. Namun, sisi negatifnya adalah bahwa grafik yang tidak siap dengan layar ini dalam pikiran benar-benar akan terlihat sedikit buram.

Untungnya ada beberapa cara untuk mengatasi hal ini. Pendekatan yang Anda lakukan tergantung pada sifat dari gambar itu sendiri. Demo ini menggunakan dua pendekatan; perpustakaan retina.js dan grafis SVG.

Retina.js

Retina.js adalah pustaka JavaScript ringan, yang gratis untuk diunduh. Anda hanya perlu menyimpan file JavaScript yang berdekatan dengan situs web Anda di server Anda, dan tambahkan baris kode berikut tepat sebelum tag body penutup.

1	<script type="text/javascript" src="/scripts/retina.js"></script>

Anda kemudian menyimpan dua versi dari setiap gambar; satu gambar memiliki ukuran dua kali lipat saat Anda melihat gambar pada layar standar,sedangkan yang lainnya pada ukuran normal. Trik untuk membuat pustaka ini berfungsi adalah Anda harus menyimpan gambar Anda di folder yang sama di server Anda dan mengikuti konvensi penamaan yang ketat -

emilysypic.jpg = versi resolusi normal
emilyspic@2x.jpg = versi resolusi tinggi

Anda kemudian menambahkan gambar Anda ke markup halaman Anda seperti biasa, cukup tambahkan versi resolusi standar -

1	<img src="/images/my_image.png" />

Ketika seseorang melihat situs web Anda di layar retina, keberadaan skrip retina.js memberi tahu situs web Anda untuk memeriksa apakah ada versi resolusi tinggi yang tersedia.

Meskipun retina.js memiliki batasan waktu yang diperlukan untuk menyimpan dua versi untuk setiap gambar, itu bisa sangat berguna untuk foto-foto jenis fotografi atau jenis gambar none-vektor.

Tombol ' visit map' berwarna hijau di beranda menggunakan plugin retina.js. Untuk melihat ini dalam aksi, coba lihat situs di perangkat retina, mis. iPhone 4 atau 5, dan lihat betapa tajam teks pada tombol hijau. Jika Anda telah mengunduh salinan kode Anda sendiri, hapus plugin retina.js dan lihat situs web di perangkat retina lagi. Anda harus memperhatikan bahwa kualitas tombol (misalnya garis putih di dalam teks) lebih buruk.

Saya akan merekomendasikan menggunakan retina.js untuk foto-foto kunci atau gambar jenis none- vektor yang tidak sering berubah, di homepage Anda, atau dibangun ke dalam template Anda. Namun, jika, misalnya, Anda menjalankan blog dengan banyak penulis, mungkin tidak realistis untuk mengharapkan mereka membuat dua versi untuk setiap gambar.

SVGs

Pendekatan lain untuk menciptakan grafis yang tajam untuk layar retina adalah dengan menggunakan gambar SVG. SVG sebenarnya adalah singkatan dari Scalable Vector Graphics. Seperti namanya, gambar SVG cocok untuk gambar jenis vektor (yaitu bukan foto!)

As vector graphics are enlarged they retain their crispness — Ketika grafik vektor diperbesar, mereka mempertahankan kerenyahannya.

Untuk melihat contoh, lihat beranda. Ikon roda gigi dan kunci pas adalah grafik SVG. Lebarnya diatur hingga 50%. Ketika Anda mengubah ukuran browser Anda, Anda harus dapat melihat bahwa itu selalu tetap sempurna. Ini juga harus tetap sempurna renyahnya jika Anda memperbesar peramban (mis. Di telepon).

1	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
2	<circle cx="100" cy="100" r="90" stroke="red" stroke-width="9" fill="yellow" />
3	</svg>

Grafik SVG sebenarnya adalah format vektor berbasis XML. Ini berarti Anda dapat mengeditnya secara langsung, jika Anda mau, menggunakan editor teks dasar. Kode di atas akan membuat gambar lingkaran kuning di bawah ini.

Simple SVG demo screetshot — Demo SVG sederhana (screenshot).

Anda dapat menyisipkan gambar SVG ke halaman web Anda dengan cara yang sama seperti Anda memasukkan jpg atau gambar lainnya.

<img src="yellowcircle.svg" width="70" height="70">

SVG didukung oleh semua browser modern, termasuk yang digunakan pada perangkat retina seperti iPhone 4 dan 5. Namun demikian, masih penting untuk memberikan dukungan bagi browser lama yang tidak mendukungnya, misalnya IE 8. Jika Anda menggunakan Modernizr (lihat di bawah) sudah untuk sisa situs Anda, maka ini adalah pendekatan yang masuk akal. Namun, ada juga plugin JavaScript khusus yang tersedia, SVGeezy, yang akan menangani ini.

Untuk menggunakan plugin ini, unduh skrip dan simpan di samping situs web Anda di server Anda. Kemudian tambahkan baris kode berikut sebelum tag body tutup.

1	<script type="text/javascript" src="svgeezy_plugin/svgeezy.js"></script>
2	<script type="text/javascript">
3	svgeezy.init(false, 'png'); // this will let the plugin check all images
4	</script>

Demikian pula untuk plugin retina yang dibahas di atas, Anda sebenarnya akan menyediakan dua gambar setiap kali; file SVG dan fall-back jpeg atau file png. Keduanya harus disimpan di tempat yang sama di server Anda. Ketika plugin SVGeezy memberitahu browser Anda tidak mendukung file SVG, maka akan menggunakan versi alternatif dari gambar.

Jika Anda mengunduh file sumber untuk demo dari tautan di bagian atas laman ini, lihatlah pada file SVG refresh.svg dan bagaimana file tutorial4_index.html menggunakan gambar ini.

Ketika datang untuk membuat file SVG, ide manual pengkodean file gambar sudah cukup untuk membuat geekest geek berlari satu mil! Untungnya, Anda dapat menyimpan gambar sebagai file SVG dari Adobe Illustrator (Klik File> Save> SVG) atau perangkat lunak pengeditan gambar vektor open source, Inkscape. Dengan mengatakan itu, saya sarankan melakukan beberapa uji coba untuk memastikan desain Anda muncul seperti yang diharapkan di browser.

Ada juga banyak situs web di sekitar yang menawarkan ikon SVG gratis untuk diunduh. Ikon roda gigi yang digunakan dalam demo ini adalah dari Game icons. Situs web lain yang bagus adalah Icon Finder, yang mencantumkan format yang tersedia di samping semua hasil pencarian. Icon Finder juga cukup berguna untuk merasakan apa jenis gambar yang dapat diproduksi sebagai file SVG.

Meskipun file SVG hanya akan berfungsi untuk beberapa jenis gambar, jika dieksploitasi dengan hati-hati dapat memberikan cara yang kuat untuk mengirimkan gambar tajam ke semua perangkat. Sebelum melanjutkan, perlu disebutkan bahwa ada cara lain untuk menerapkan gambar retina yang tidak diterapkan dalam demo ini, seperti menggunakan solusi PHP sisi server yang menggunakan cookie dan file.htacces modifikasi, atau menggunakan icon fonts.

Satu Set Data: Dua Versi Peta

.Demo ini memiliki dua versi peta; versi laptop / desktop / tablet dan versi seluler.

Both mobile and desktop maps use the same data ie photos stored on Flickr — Baik peta seluler dan desktop menggunakan data yang sama (yaitu foto) yang disimpan di Flickr.

Membuat dua versi mungkin tampak sedikit curang. Dan, untuk sebagian besar situs web saya tidak akan merekomendasikan versi seluler dan desktop terpisah karena biaya pemeliharaan yang jelas. Namun, jenis baru peta Google yang kami buat adalah kasus ketika mempunyai dua versi yang masuk akal.

Yang penting, kami tidak akan menduplikasi data. Sebagai gantinya, kedua versi peta menggambar dari kumpulan data yang sama pada Flickr Ini berarti overhead memiliki minimal dua versi dan kami memiliki fleksibilitas untuk menyesuaikan tampilan peta tergantung pada perangkat.

Saya telah memperluas contoh dari tutorial terakhir. Tutorial menarik data dari akun Flickr baru ini (id pengguna: 99915664 @ N08). (Pengingat - masing-masing Flickr memiliki nama (ish) yang mudah untuk mengingat nama pengguna, dalam hal ini bennett1671, dan nomor ID pengguna, dalam hal ini 99915664 @ N08.) Jadi jika Anda mengikuti di bawah membangun apa yang Anda lakukan di tutorial terakhir, Anda perlu mengarahkan peta Anda ke akun Flickr baru ini.

Akun Flickr baru ini menyertakan foto untuk semua festival, termasuk acara yang lebih kecil dan even utama. Akun Flickr yang digunakan dalam tutorial sebelumnya hanya menyertakan foto untuk festival yang lebih kecil. Foto-foto untuk acara utama tidak disimpan di Flickr.

Menandai di Flickr

Memberi tag pada foto Anda di Flickr adalah kunci untuk menjadikan ini berfungsi. Setiap foto dalam Flickr ditandai untuk menunjukkan apakah mereka adalah mainevent atau smallevent (tag ini diperlukan untuk versi laptop / desktop / tablet) dan apakah mereka adalah englandevent, scotlandevent, walesevent atau irelandevent (tag ini diperlukan untuk versi ponsel ).

Panggilan API Flickr

Ketika tombol Oranye Smaller Events diklik pada laptop / desktop / versi tablet, panggilan API Flickr berikut dibuat. Ini memanggil akun Flickr 99915664 @ N08 dan menyaring hasil dengan tag smallevent.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoncallback=?

Pada versi seluler, saya telah mengelompokkan penanda sesuai dengan negara dan mewarnai ikon sesuai dengan itu. Jadi, misalnya, saat Anda mengeklik penanda Inggris putih, panggilan API Flickr berikutnya dibuat. Panggilan API ini sama dengan yang sebelumnya, kecuali itu memfilter hasil berdasarkan pada tag englandevent.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=json&json&jsoncallback=?

Silakan lihat tutorial sebelumnya untuk deskripsi lengkap tentang bagaimana hasil dari panggilan API Flickr ini diproses. Mereka berdua menggunakan metode flickr.photos.search dari Flickr API.

File SVG dan Versi Seluler

Semua penanda peta pada versi seluler adalah file SVG (lihat di atas). Oleh karena itu, meskipun mereka sedikit lebih sederhana daripada ikon pada laptop / desktop / versi tablet, mereka selalu tetap renyah ketika dilihat di layar retina, seperti iPhone 4 atau 5.

Pengujian dan Debugging

.Untuk mengakhiri seri tutorial ini, saya hanya ingin menyoroti beberapa alat yang saya anggap berguna ketika mengembangkan peta, atau apa pun secara online dalam hal ini. Saya tahu ada ratusan, mungkin ribuan alat, dan ini tidak dimaksudkan untuk menjadi daftar yang lengkap dengan cara apa pun. Sebaliknya, ini adalah 'alat bantu' yang saya gunakan untuk menguji berbagai hal, dan mencari tahu mengapa sesuatu belum berjalan sesuai rencana.

.Alat-alat ini berguna, mungkin penting, untuk menghindari mimpi buruk mendapatkan situs web berfungsi dengan sempurna di komputer Anda sendiri, hanya untuk menemukan itu melakukan sesuatu yang tidak terduga pada klien atau mesin pelanggan.

Alat Pengembang Google Chrome

Untuk mengakses alat pengembang Chrome, buka Chrome dan klik Tombol Menu di kanan atas lalu Tools, lalu Developer Tools

The Elements tab in the Google Chrome Developers tools lets you click on parts of your web page to reveal information about how it has been rendered by the browser — Tab Elemen di alat Pengembang Google Chrome memungkinkan Anda mengklik bagian-bagian dari halaman web Anda untuk mengungkapkan informasi tentang bagaimana itu telah diberikan oleh browser.

Ini melakukan banyak hal; cukup untuk mengisi seluruh tutorial sendiri! Beberapa bit yang sering saya gunakan adalah: -

Tab Elemen (di atas) - Memungkinkan Anda mengeklik area di laman web Anda dan melihat kode yang mendasarinya. Ini juga memungkinkan Anda bermain-main dengan CSS dan melihat perubahan 'live' di halaman web Anda. Ini berguna ketika bereksperimen dengan desain-desain yang berbeda.
Tab Konsol - Ini akan memunculkan kesalahan. Terkadang mereka tidak berbahaya, di lain waktu (terutama ketika membangun situs!) Mereka membutuhkan perhatian.
Tab Jaringan (di bawah) - Memungkinkan Anda melihat semua sumber daya dimuat dan (di sebelah kiri) menyertakan garis waktu (kanan) dengan kecepatan pemuatan sehingga Anda dapat mengidentifikasi apa yang mungkin memperlambat situs Anda.

Network tab tells you how long each part of a web page takes to load — Tab jaringan memberitahu Anda berapa lama yang diperlukan untuk memuat setiap bagian dari halaman web.

Dukungan Browser

Tidak semua browser mendukung semua fitur HTML dan CSS. Ini bisa menjadi masalah ketika Anda ingin memanfaatkan fitur-fitur yang lebih menarik dari HTML5 dan CSS3, sementara juga memastikan orang-orang dengan salinan IE yang paling kuno juga dapat mengakses situs web Anda.

Tetapi kecuali Anda memiliki memori yang luar biasa (saya belum!), Hampir tidak mungkin untuk mengingat browser yang mana yang keberatan dengan fitur apa Di sinilah situs web caniuse sangat berguna. Situs web ini memberikan ringkasan fitur HTML, CSS, SVG dll mana yang kompatibel dengan versi browser mana.

Juga, jika Anda ingin menggunakan fitur baru tetapi browser yang lebih lama tidak mendukungnya, maka Anda dapat menggunakan perpustakaan JavaScript Modernizr. Ketika mereka menjelaskan di situs web mereka:

“Memanfaatkan teknologi web baru yang keren sangat menyenangkan, sampai Anda harus mendukung browser yang tertinggal. Modernizr memudahkan Anda menulis JavaScript dan CSS bersyarat untuk menangani setiap situasi, apakah browser mendukung fitur atau tidak. ”

Jika browser pengguna tidak mendukung fitur tertentu, Modernizr memungkinkan Anda juga menentukan fitur fall-back. Ini sangat mirip dengan plugin SVGeezy yang dijelaskan di atas.

Pengujian Lintas browser

Selain merencanakan dukungan browser dan fall-backs saat membangun situs Anda, penting juga untuk mengujinya di berbagai browser. Browserstack adalah cara yang efisien untuk melakukan hal ini. Ini memungkinkan Anda mengirimkan URL dan kemudian melihat bagaimana situs itu berfungsi di berbagai browser. Satu-satunya kekurangannya adalah bahwa ini melibatkan biaya berlangganan. Meskipun ini bisa dibilang lebih murah daripada memiliki bank mesin sungguhan dan perangkat yang tersedia untuk pengujian. Uji coba gratis juga tersedia sehingga Anda dapat melihat dan melihat apa yang Anda pikirkan.

Alat penguji peramban lain yang berguna ketika datang ke misteri untuk membuat segala sesuatu bekerja di IE, adalah situs web Modern.IE. Seperti namanya, itu hanya untuk IE. Tetapi itu gratis dan masih merupakan sumber yang sangat berguna.

Sebelum melihat situs web Anda di Browserstack atau ModernIE, penting untuk memvalidasi kode Anda untuk merapikan kesalahan sintaks apa pun.

Memvalidasi HTML, CSS, dan Javascript

Validator adalah aplikasi web gratis yang memeriksa kode Anda terhadap standar saat ini. Standar penting untuk memastikan fungsi situs web Anda dapat diprediksi di berbagai peramban dan perangkat yang berbeda.

Ada juga sejumlah alat di sekitar yang akan membantu Anda memeriksa sintaks JavaScript Anda. Closure Compiler sebenarnya adalah alat untuk mengompresi JavaScript Anda (yang mungkin juga ingin Anda lakukan jika ukuran file Anda sangat besar), tetapi juga berguna untuk memeriksa kesalahan sintaks. misalnya sial kehilangan semi-colons yang menangkap kita semua! Jika Anda menyalin dan menempelkan kode Anda dan menekan Kompilasi, kesalahan apa pun akan disorot di bawah tab Kesalahan. Situs lain yang berguna untuk memeriksa kode adalah JSHint.

Unduh Pengujian Kecepatan

Kecepatan halaman penting karena bukan hanya pengunjung yang akan diusir jika waktu yang lama untuk memuat situs Anda, Google dapat mempertimbangkan hal ini saat memesan hasil pencarian.

Analyzing the loading speed of the website using Google Pagespeed — Menganalisis kecepatan pemuatan situs web menggunakan Google Pagespeed.

Ada sejumlah alat yang akan memungkinkan Anda menguji ini, termasuk -

Alat-alat ini juga muncul dengan saran peningkatan kinerja yang dapat Anda buat. Misalnya, peningkatan umum yang dapat Anda lakukan adalah mengompres gambar Anda lebih jauh. Anda dapat menggunakan alat-alat ini sehubungan dengan tab Jaringan di Alat Pengembang Google Chrome (di atas) untuk menyelidiki potensi masalah.

Kesimpulan

Oke - itu saja! Seperti yang saya katakan di awal tutorial ini, itu akan menjadi a whistle stop tour! Semoga setelah seri tutorial ini Anda sekarang dilengkapi untuk membuat kreasi peta Google Anda sendiri. Selamat bersenang-senang!

Kredit Gambar

Kredit untuk sebagian besar gambar (mis. Foto festival) dapat ditemukan di akhir tutorial sebelumnya 1 dan 3. Ini adalah bit baru untuk tutorial ini: