Meningkatkan Program Internet

Di era program asli, pengguna hanya dapat menggunakannya dalam kerangka pengaturan konfigurasi yang diizinkan oleh pengembang. Hari ini, di era aplikasi Internet, pengguna dapat dengan mudah mengubah kebijakannya tidak hanya representasi eksternal dari program, tetapi juga perilakunya.

Artikel ini menjelaskan cara untuk membuat aplikasi web lebih nyaman, indah, memperluas fungsionalitasnya, menyesuaikan sendiri.

Setiap pengguna memiliki program favorit mereka. Sebelumnya, ketika ada beberapa program, pada prinsipnya, dan permintaan kecil. Sekarang pasar penuh dengan dan memilih sesuatu yang nyaman bagi diri Anda telah menjadi jauh lebih sulit.

Ambil, misalnya, manajer Tugas / Yang Harus Dilakukan. Saya memerlukan manajer untuk melakukan proyek pribadi, menyimpan daftar belanja, menyimpan informasi yang diperlukan dalam struktur hierarkis, sehingga dapat disinkronkan dengan semua yang saya bisa, dengan pengingat dengan notifikasi penerimaan, yang berfungsi pada semua sistem dan ringan, cepat, nyaman dan sangat cantik Tidak ada hal seperti itu, tentu saja, dan masalahnya, pada kenyataannya, sudah kuno dan terkenal:

Sangat sulit untuk memutuskan, sangat mudah untuk mengatakan, betapa sulitnya itu! Jika saya meletakkan bibir Nikanor Ivanovich ke hidung Ivan Kuzmich, dan mengambil kesombongan seperti Baltazar Baltazarych, dan, mungkin, menambahkan kesengsaraan lebih lanjut dari Ivan Pavlovich untuk ini, saya akan segera memutuskan. Sekarang pikirkanlah!

Bahkan jika Anda siap membayar untuk fitur yang diperlukan, biasanya tidak mungkin untuk menemukan program yang sudah jadi yang sepenuhnya memuaskan Anda. Tetapi untuk programmer web modern, situasinya lebih sederhana daripada Agafia Tikhonovna - modularitas lengkap dan kemampuan menyesuaikan sehubungan dengan bibir dan hidung. Untuk melakukan ini, Anda dapat menggunakan ekstensi peramban yang memungkinkan Anda untuk menyuntikkan file javascript dan css Anda (saya suka yang ini ) atau menulis yang sederhana dengan tujuan yang sama, untuk dipilih. Setelah ini, programmer mendekati sedikit di level "Tahun".

Hampir semua orang tahu tentang itu, tetapi sedikit yang menggunakannya. Kami menunjukkan contoh sederhana tentang manfaat yang jelas dari suntikan khusus.

to-do.microsoft.com

Manajer kecil yang baik, tetapi menatapnya di monitor besar tidak terlalu nyaman. Saya membutuhkan nama yang lebih besar untuk tugas-tugas tersebut, mengurangi kecerahan "Catatan" di bawahnya, memperluas kolom kanan dan beberapa peningkatan lagi yang dapat ditangani oleh css sederhana:




Kolom kiri. Di sini Microsoft memiliki downshifting penuh ke daftar tugas satu dimensi. Saya butuh pohon. Pada prinsipnya, ini juga dapat diimplementasikan, tetapi di sini, untuk kesederhanaan, kami membangun pohon yang tidak runtuh secara visual.


Ini pohon pseudo:



Sudah ada sesuatu. JQeury perlu terhubung, dan kadang-kadang Anda harus menyalinnya ke dalam tubuh skrip, jika tidak, akan timbul masalah. Hal yang sama dengan penundaan inisialisasi.

Mari kita sekarang melihat perwakilan lain yang lebih maju secara intelektual dari kelompok program ini.

trello.com

Berikut adalah daftar kartu yang diperluas:



Mungkin seseorang menggunakan kartu Trello untuk tujuan yang diinvestasikan pengembang dalam aplikasi ini, tetapi bagi saya pada kartu ini secara visual kurang dari 10% dari informasi yang berguna terlihat, segala sesuatu yang berwarna cerah yang mengalihkan perhatian dari fokus pada yang benar.

Css dan js semua bisa mengarah pada tampilan yang layak. Trello sudah memiliki jQuery, dan ini adalah skrip seperti ini:

 $('.mod-card-detail-icons-smaller .window-module-title h3').bind('click', function(){ $('.mod-comment-type').hide(); }); 

misalnya, menyembunyikan semua komentar saat mengklik "Aktivitas". Untuk melihatnya lagi, cukup klik tautan di sebelah kanan Sembunyikan / Tampilkan perincian.

Dan akhirnya, sesuatu yang lebih menarik.

Saya perlu pengingat pada kartu Trello. Bukan jendela pop-up di layar, tetapi pengingat nyata untuk membawa saya ke mana-mana. Yaitu, notifikasi suara di ponsel. Agar tidak memagari taman dan tidak menghubungkan IFTTTs dan Zapiers, kami hanya membuat acara untuk Kalender Google, yang kemudian di Androide akan melakukan semua yang Anda butuhkan.

Kami akan terhubung ke tanggal jatuh tempo kartu agar tidak memperluas model data Trello (meskipun ini juga merupakan pilihan).



Saat menyimpan tanggal, kami perlu mengirim ke Google Calendar API permintaan untuk membuat acara di kalender kami. Kode itu sendiri cukup sederhana:


Tetapi sebelum itu, Anda perlu membuat aplikasi di Google API Console, dapatkan client_id dan api_key dan buat beberapa langkah standar yang lebih sederhana untuk menghubungkan otentikasi OAuth. Manual di google .

Jika perlu untuk memodifikasi acara kalender, bersama dengan modifikasi tanggal jatuh tempo kartu Trello, Anda harus bekerja lebih banyak, tetapi ini juga layak.

Akhirnya, kami mencatat bahwa semua perbaikan yang sangat berguna untuk situs web dan aplikasi web dapat dirancang sebagai ekstensi dan ditempatkan di toko browser.

Penafian: semua contoh di atas disediakan semata-mata sebagai contoh penggunaan potensi js dan css, dan tidak dengan sendirinya membawa nilai apa pun.

Tambahan untuk Habr

Pada monitor besar, teks artikel tentang Habré mudah dibaca, tetapi gambar (tangkapan layar dengan teks khususnya) agak sulit dibedakan. Skrip ini:

 window.onload = function() { $(function() { $('.post img').each(function() { $(this).wrap('<a target="_blank" href="' + $(this).attr('src') + '"></a>'); }); }); }; 

memungkinkan mengklik pada gambar untuk membuka di jendela baru dalam ukuran penuh.