Kandungan
- Mengumpulkan inspirasi
- 1. Ketuk Corak
- Buku skrap digital
- 2. Gimme Bar
- 3. Vizuali
- 4. Sambungkan-a-Lakaran
- 5. Burung mengejek
- Reka dan bina
- 6. Sistem Grid Berubah
- 7. Taip Jenis
- 8. Tempat letak.it
- 9. flickrBomb
- 10. Penjana CSS3
- Ujian dan maklum balas
- 11. Pengesah HTML5
- 12. Pengesah CSS W3C
- 13. Penggunaan CSS
- 14. Onotate
- Sambungan penyemak imbas
- 15. Firebug
- 16. Firebug Lite
- 17. Bar alat Pembangun Web
- 18. Colorzilla
- Alat penyahpepijatan
- 19. Pemeriksa Web
- 20. Pepatung
- 21. Alat Pembangun IE
- 22. Alat pembangun Chrome
- Bookmarklet
- 23. WhatFont
- 24. ReCSS
- 25. Xray
- Satu saiz tidak sesuai untuk semua
Artikel ini pertama kali muncul dalam edisi 218 majalah .net - majalah terlaris di dunia untuk pereka dan pembangun web.
Membangun laman web yang dibuat dengan indah dan tidak dapat dilupakan adalah proses yang kompleks yang memerlukan pereka untuk terlibat sepenuhnya - dari mencari percikan inspirasi awal, hingga merancang dan membina secara berulang, hingga menguji dan mendapatkan maklum balas. Kedengarannya seperti kerja keras, dan memang ada, tetapi berita baiknya ialah bantuan ada. Dalam artikel ini kami memberikan pandangan dari alat-alat kerajinan kami, memberikan pilihan yang akan sangat berguna untuk setiap peringkat proses reka bentuk dan pengembangan.
Kami telah mencapai tujuan yang luar biasa dan diharapkan, dengan mempertimbangkan pelbagai alat berasaskan penyemak imbas yang diperlukan untuk memastikan idea anda tidak hanya berbeza, tetapi juga sesuai dengan tujuan. Hasilnya adalah senarai 25 aplikasi yang sangat berguna, yang dirancang berdasarkan aliran kerja biasa dan mempertimbangkan fasa projek asas berikut:
- Mengumpulkan inspirasi
- Merancang dan membina
- Menguji dan mengumpulkan maklum balas
Jadi tanpa basa-basi lagi, mari kita mulai berniaga.
Mengumpulkan inspirasi
Bahagian pertama kami memfokuskan pada permulaan projek: mencari inspirasi, mengembangkan tatabahasa visual melalui buku skrap, menjana idea dan memberi mereka bentuk yang berpotensi melalui sketsa dan wireframing. Adalah mudah untuk terjebak dalam perangkap yang sudah dipakai untuk memulihkan apa yang telah berlaku sebelumnya.Pendekatan yang lebih bijak adalah dengan meninjau landskap visual, mengenal pasti corak reka bentuk yang telah ditetapkan dan mengumpulkan inspirasi visual sebelum meneruskan - dengan idea di tangan - untuk membina prototaip, menguji dan melakukan lelaran. Terdapat banyak alat untuk membantu anda dalam usaha ini; ini adalah beberapa kegemaran kami.
Walaupun kami tidak menganjurkan kaedah ‘Viking’ (menjarah web untuk mendapatkan inspirasi dan menyalin karya orang lain secara tidak masuk akal), kami mendorong pendekatan yang beralasan terhadap
pengenalpastian corak reka bentuk yang mapan dan muncul. Ini adalah penyelesaian yang telah dikenalpasti untuk masalah yang mungkin anda pelajari dan integrasikan sebagai sebahagian daripada tindak balas terhadap tugas yang sedang dilakukan.
1. Ketuk Corak
Pola Tap, milik Matthew Smith dari Squared Eye, memasarkan dirinya sebagai "koleksi reka bentuk web antara muka pengguna yang teratur untuk inspirasi dan idea". Seperti yang dinyatakan oleh Smith, ini adalah "alternatif galeri CSS", dengan penekanan untuk mencari inspirasi dan belajar dari pendekatan orang lain. Apabila digunakan sebagai bahagian proses yang dipertimbangkan, ini adalah alat yang berguna untuk mengatur corak reka bentuk yang membolehkan anda mengumpulkan contoh reka bentuk antara muka, menguruskannya dan menapisnya mengikut teg atau koleksi.
Buku skrap digital
Pada zaman dahulu, para pereka menyimpan buku skrap untuk mengumpulkan inspirasi visual semasa dalam perjalanan. Sekiranya buku skrap kertas kelihatan seperti topi lama bagi anda, maka muncul sejumlah alat untuk buku skrap digital yang membolehkan anda mengumpulkan inspirasi dan membina koleksi bahan rujukan visual menggunakan, bukan kertas, media web.
2. Gimme Bar
Kami adalah pengagum Gimme Bar, alat buku skrap sosial yang indah yang direka oleh Cameron Koczon dari Fictive Kin [juga lihat wawancara kami dengan Cameron]. Seperti yang dinyatakan oleh Koczon, Gimme Bar "akan menghancurkan otak anda menjadi satu juta keping dan kemudian menyebarkan kepingan otak itu ke seluruh alam semesta seperti semacam supernova otak". Setelah menggunakannya, kita dapat membuktikan kebenaran fakta ini.
3. Vizuali
Kami juga berkongsi tempat yang baik untuk Vizuali, alat buku skrap alternatif yang dibuat oleh Kyle Gawley, salah seorang pelajar Master kami di Belfast. Membolehkan anda mengimport inspirasi visual melalui bookmarklet yang berguna dan mengatur kandungan anda mengikut koleksi (misalnya, untuk setiap projek), Vizuali kini dalam versi beta, tetapi akan dilancarkan tidak lama lagi. Kami sangat menggalakkan anda untuk meminta jemputan. Kami juga mencadangkan anda mengawasi Gawley - dia pasti akan memerhatikannya di masa hadapan.
4. Sambungkan-a-Lakaran
Sekiranya anda jenis perancang yang percaya akan bermula di atas kertas, maka Connect-a-Sketch dijamin menarik bagi anda. Idea di sebalik aplikasi itu mudah dan dilaksanakan dengan elegan. Mulakan dengan pen dan kertas, kemudian muat naik gambar anda ke laman web untuk ‘sambungkan lakaran anda’. Seperti namanya, laman web ini membolehkan anda menyeret dan melepaskan lakaran anda dan membuat pautan di antara mereka untuk membuat prototaip kesetiaan rendah dengan cepat dan mudah. Connect- a-Sketch sangat sesuai untuk idea berulang pada awal fasa reka bentuk.
5. Burung mengejek
Mengadopsi pendekatan yang berbeza untuk prototaip cepat, Mockingbird membolehkan anda membuat mockup dengan cepat menggunakan elemen yang telah ditentukan. Dengan membolehkan anda menghubungkan elemen dan halaman bersama, dan berkongsi hasilnya untuk memudahkan kolaborasi yang lancar, ini dapat meringankan beban membuat mockup, mempercepat proses prototaip.
Aplikasi berbayar dengan berbagai tingkatan yang ditawarkan, Mockingbird dihargai berdasarkan penggunaan, jadi Anda dapat menggunakannya berdasarkan setiap projek dan hanya membayar untuk apa yang Anda gunakan. Sekiranya anda berada di tahap awal pembuatan projek, maka perlu dipertimbangkan untuk mengeluarkan idea dengan cepat dan mengumpulkan maklum balas prototaip awal.
Reka dan bina
Dengan idea yang ada, serangkaian prototaip yang dibina dan diuji, dan pembelian dari pelanggan, fasa seterusnya dari sebarang projek adalah menuju ke arah reka bentuk dan pembinaan. Di bahagian ini, kami mempertimbangkan alat yang memudahkan aspek projek ini. Kami mengetengahkan alat yang membolehkan anda memindahkan reka bentuk anda dari kesetiaan rendah, prototaip berfungsi ke produk siap kesetiaan yang lebih tinggi. Cadangan kami merangkumi alat untuk mengembangkan sistem grid, tulang belakang reka bentuk apa pun; tipografi, penting untuk mewujudkan hierarki maklumat; susun atur gambar, sekiranya tidak ada citra (dan mari kita hadapi, kapan anda mengenali pelanggan untuk menyediakan segala-galanya, termasuk imejan, di muka?); dan akhirnya, alat yang menyelamatkan anda mengingati sintaks, membantu menjadikan hidup anda sedikit lebih mudah.
6. Sistem Grid Berubah
Seperti yang diketahui oleh setiap pereka berpengalaman, sistem grid yang kukuh dan boleh dipercayai, yang dipertimbangkan pada permulaan projek, dapat memastikan bahawa reka bentuk terungkap dengan lancar - menjimatkan masa dalam jangka masa panjang. Sistem Grid Berubah, yang direka oleh SprySoft dan berdasarkan Sistem Grid 960, adalah penyelesaian yang lancar untuk menghasilkan grid CSS dengan cepat dan mudah.
Cukup masukkan nilai untuk lebar lajur, jumlah lajur dan lebar talang, dan Sistem Grid Berubah menguruskan selebihnya, menghasilkan grid CSS yang mendasari untuk laman web anda. Mengizinkan lebar tetap dan bendalir, ini adalah titik permulaan yang baik untuk meletakkan asas grid anda di tempat.
7. Taip Jenis
Meskipun saat ini dalam versi beta, Typecast tampaknya akan mempermudah proses merancang fon web dengan banyak, memberikan maklum balas tipografi masa nyata secara asli di penyemak imbas. Dikembangkan oleh orang-orang baik di Front di Belfast, Typecast membantu pereka untuk bekerja dengan kandungan sebenar dan tipografi web yang kaya. Ini memungkinkan keputusan reka bentuk dapat dicapai dalam konteks penyemak imbas dengan ketergantungan yang lebih rendah pada Photoshop atau editor lain, yang ada satu langkah yang dikeluarkan dari konteks akhir di mana jenisnya akan dilihat.
Jika anda ingin melihat pratonton dari kemampuannya, gunakan kata 'ampersand' untuk masuk ke beta undangan sahaja.
8. Tempat letak.it
Kita semua sudah pasti memulakan fasa reka bentuk dan pembinaan sebuah projek dengan janji bahawa citra, tanpa mempedulikan isi kandungannya, "dalam perjalanan, jujur", ketika kita semua tahu ada lebih banyak peluang untuk membeku .
Nah, berita baiknya ialah alat seperti Placehold.it membolehkan anda terus maju dengan reka bentuk anda tanpa perlu menunggu aset projek.
Pada dasarnya perkhidmatan placeholder gambar untuk menyelesaikan susun atur, Placehold.it membolehkan anda, dengan hanya penambahan beberapa markup sederhana, untuk membuat placeholder gambar dalam pelbagai warna, memakan teks placeholder tersuai. Menjana gambar placeholder generik dengan cepat, sangat sesuai sehingga pelanggan yang disebutkan di atas menepati janji kandungan dan memberikan gambaran yang lengkap kepada anda.
9. flickrBomb
Sebagai catatan, jika 'warna' reka bentuk anda memerlukannya dan anda senang menjalankannya dengan sedikit jQuery, anda mungkin juga ingin mencuba flickrBomb, yang menggunakan sedikit sihir penandaan untuk menggantikan penanda tempat greybox yore dengan imejan yang lebih relevan, diambil secara automatik dari Flickr.
10. Penjana CSS3
Kecuali jika anda menggunakan helaian gaya, anda pasti - seperti kita semua - berjuang untuk mengingat kembali pernyataan CSS terkini tanpa kesilapan. Jangan takut: Generator CSS3 adalah alat yang sempurna untuk menyelamatkan anda dari penyusunan semua pernyataan CSS yang tidak menyenangkan itu dari memori.
Dengan sokongan untuk awalan vendor dan, dengan menunjukkan penunjuk sokongan penyemak imbas, bernilai sebagai penanda buku untuk meringankan keperitan dalam menghasilkan pernyataan CSS yang kompleks.
Ujian dan maklum balas
Malah pereka yang paling berpengalaman menghadapi masalah dengan reka bentuk mereka tidak dipaparkan seperti yang diharapkan. Port panggilan pertama anda dalam keadaan ini adalah memastikan HTML dan CSS anda sah. Sekiranya tidak, rendering penyemak imbas tidak akan dapat diramalkan. Dengan munculnya HTML5 dan CSS3, mentaliti ketat hari XHTML mungkin telah berubah, tetapi ini tidak bermaksud anda harus membuang bayi pengesahan dengan air mandi. Di bahagian akhir kami, kami mempertimbangkan alat untuk memastikan bahawa markup anda sah dan untuk membuat projek anda dimatikan.
11. Pengesah HTML5
Menjelang permainan W3C, Validator HTML5, seperti spesifikasi itu sendiri, sedang dijalankan. Dibangunkan dan dikendalikan oleh Henri Sivonen, ini membolehkan anda memastikan bahawa dokumen HTML5 anda adalah struktur yang baik. Pepatah lama bahawa hampir semua masalah dapat diselesaikan dengan lebih mudah dengan dokumen HTML yang sah tetap berlaku, walaupun anda berada di titik pendarahan.
12. Pengesah CSS W3C
Seperti penandaan HTML anda, kebiasaan, pepijat dan ketidakkonsistenan dapat disekat dengan titik pengesahan. Satu-satunya peringatan: Pengesah CSS W3C hanya mengesahkan tahap CSS 2.1, yang bermaksud semua sifat CSS3, awalan vendor, pertanyaan media dan sebagainya anda yang baru akan kelihatan tidak sah.
13. Penggunaan CSS
Memulakan helaian gaya dari awal untuk setiap projek tidak praktikal dan tidak disarankan. Walau bagaimanapun, semasa memulakan projek sebelumnya, anda mungkin mempunyai banyak kerajinan. Penggunaan CSS adalah pelanjutan Firefox yang mengekstrak dan menyimpan semua pemilih CSS pada halaman yang anda lihat, memeriksa lebihan. Ia juga menyimpan data antara halaman, membuat senarai pernyataan yang tidak diperlukan lagi.
14. Onotate
Melakukan pendaftaran pada reka bentuk anda biasanya melibatkan proses mimpi buruk untuk menghantar fail berulang-ulang, surat-menyurat e-mel yang tidak berkesudahan, panggilan telefon putus asa dan menguraikan nota yang sudah lama dilupakan. Onotate, dengan ihsan Belfast studio Rumble Labs, mempermudah prosesnya.
Muat naik tangkapan skrin dan biarkan rakan dan pelanggan anda memberi penjelasan, menyemak dan membincangkan karya anda. Memindahkan proses kelulusan dan pendaftaran dalam talian menjimatkan masa ... bagus.
Sambungan penyemak imbas
Sekiranya penyemak imbas tidak mempunyai apa yang anda perlukan, banyak penyemak imbas membolehkan anda memperluasnya. Salah satu sebab utama mengapa Firefox telah lama menjadi penyemak imbas untuk dikembangkan ialah koleksi peluasannya. Walaupun saingan mengejar ketinggalan, Firefox masih menampilkan beberapa must must klasik.
15. Firebug
Membangunkan laman web tanpa Firebug hampir tidak dapat difahami. Proses penyahpepijatan, penyuntingan dan pemantauan prestasi halaman anda pada hari-hari pra-Firebug lama yang buruk terdiri daripada berjam-jam yang dihabiskan untuk mencari bug tertentu, menyunting, menyimpan dan memuat semula halaman anda - tidak perlu menggunakan alat baris perintah yang tidak jelas untuk periksa prestasi halaman anda. Menggunakan Firebug untuk mengedit HTML, memvisualisasikan CSS, profil JavaScript, dan meneroka DOM - semuanya dalam masa nyata - menjimatkan jam setiap hari.
16. Firebug Lite
Benar-benar alat yang sangat diperlukan, Firebug telah menjelajah di luar Firefox dan tersedia dalam versi ringan untuk pelbagai penyemak imbas lain.
17. Bar alat Pembangun Web
Bar alat Pembangun Web, yang mesti dimiliki, mempunyai banyak alat, semuanya penting semasa merancang dan membangunkan laman web. Hidupkan dan matikan CSS, JavaScript dan gambar, paparkan semua maklumat yang boleh difahami mengenai elemen di halaman anda, isi, aktifkan dan lumpuhkan borang, lihat sumber yang dihasilkan - ini dan kira-kira 100 ciri lain tersedia di hujung jari anda, semua bahagian dari pakej. Alat ini, yang terlalu banyak untuk disenaraikan di sini, adalah iringan sempurna untuk Firebug - sebenarnya, kedua-duanya harus wajib bagi sesiapa sahaja yang terlibat dalam industri ini.
18. Colorzilla
Tidak semua sambungan mempunyai ratusan ciri: beberapa fokus hanya pada satu tugas tertentu. Colorzilla membolehkan anda memilih warna dari mana sahaja di halaman dan menyalinnya dalam pelbagai format untuk digunakan kemudian di helaian gaya CSS atau penyunting gambar pilihan anda. Anda juga boleh memperbesar halaman untuk memilih warna dengan tepat, dan membuat dan menyimpan palet warna yang anda pilih untuk digunakan kemudian.
Alat penyahpepijatan
Pada mulanya, ada Firebug, dan pembuat penyemak imbas melihatnya bagus. Firebug menghasilkan alat serupa, terus ke inti penyemak imbas lain, tidak memerlukan sambungan. Ini adalah ukuran kemajuan besar dalam piawaian web yang kini kebanyakan penyemak imbas mempunyai alat bawaan mereka sendiri untuk membantu pengembangan laman web kami.
19. Pemeriksa Web
Dibangun dalam Safari, Pemeriksa Web lebih cantik daripada pesaingnya, tetapi itu tidak menjadikannya lebih berguna. Walaupun beberapa suara dalam komuniti reka bentuk web nampaknya menyukai Pemeriksa Web, juri masih belum mengetahui apakah keindahannya menjadikannya lebih sukar untuk digunakan, atau sama ada tingkah laku itu berbeza. Timeline Pane - membolehkan anda melihat bagaimana dan kapan Safari memuat CSS, JS dan aset lain - adalah ciri yang bagus yang membantu anda melihat kawasan yang memerlukan peningkatan.
20. Pepatung
Sebagai sebahagian daripada penyemak imbas Opera, Dragonfly adalah persekitaran penyahpepijatan yang menggunakan suspek biasa; ini membolehkan anda menyahpepijat JavaScript, menjelajah DOM, melihat pratonton gambar dan sumber lain, menyiasat storan tempatan, kuki dan banyak lagi, semuanya dalam antara muka yang tidak asing bagi sesiapa sahaja yang menggunakan Firebug. Memandangkan kehadiran mudah alih Opera yang produktif, tidak mengejutkan bahawa Dragonfly juga menyediakan penyahpepijatan jarak jauh untuk platform mudah alih.
21. Alat Pembangun IE
Inti dari semua alat ini adalah penyahpepijatan, dan tidak perlu dikatakan bahawa anda sebaiknya melakukan penyahpepijatan di penyemak imbas di mana anda menemui pepijat. Petunjuk Alat Pembangun IE. Ia tersedia sebagai muat turun untuk versi Internet Explorer yang lebih lama, tetapi dari IE8 dan yang lebih tinggi, ia disertakan dalam penyemak imbas. Menggunakan fungsi yang serupa dengan Firebug, ini adalah alat terbaik di luar sana jika anda perlu menyiasat tingkah laku tertentu terhadap IE.
22. Alat pembangun Chrome
Akhir sekali, pembangun yang menulis aplikasi yang berjalan di Google Chrome atau Chromium versi sumber terbuka mempunyai pelbagai alat debugging hebat yang tersedia di code.google.com/p/chromedevtools/.
Bookmarklet
Pereka berbakat di seluruh dunia sedang mengembangkan bookmarklet untuk menjadikan semua kehidupan kita lebih mudah. Bookmarklet sangat bagus kerana tertumpu pada satu perkara, dan satu perkara sahaja. Ini adalah beberapa kegemaran kami.
23. WhatFont
Berapa kali anda berada di laman web yang menampilkan tipografi mewah, bertanya, "Apa fon itu?" Langkah seterusnya biasanya Lihat Sumber atau menyelidiki alat pembangun web. Tidak lagi. WhatFont memudahkan untuk membongkar rahsia jenis di mana-mana halaman. Dengan hanya satu klik pada bookmarklet, WhatFont mengenal pasti apa yang ada di bawah kursor anda pada waktu tertentu.
24. ReCSS
Bookmarklet dapat melayani kes-kes tepi dengan sangat baik. Anda mungkin tidak berada dalam situasi di mana anda hanya perlu memuatkan semula helaian gaya halaman, tetapi jika anda melakukannya (katakanlah anda sedang mengembangkan aplikasi dinamik), ReCSS adalah apa yang anda perlukan.
25. Xray
Sekiranya anda tidak berpuas hati untuk menjelajahi tipografi halaman, Xray membolehkan anda memeriksa keseluruhan model kotak: lebar, ketinggian, kedudukan, margin, padding dan hierarki pewarisan mana-mana elemen halaman. Walaupun fungsinya tersedia melalui alat yang lebih berkuasa, seperti Pemeriksa Web atau Firebug, ada kes-kes ketika ini berlebihan - ketika bookmarklet hanya yang anda perlukan.
Satu saiz tidak sesuai untuk semua
Dalam artikelnya ‘Aplikasi Web Design Sebenar’, Jason Santa Maria berpendapat perlunya aplikasi reka bentuk web yang “nyata”, dengan menyatakan: “Mereka yang bekerja di sini harus mempunyai alat asli yang canggih untuk melakukan pekerjaan kita.” Ini adalah sentimen yang patut digema. Namun, adakah ini harus menjadi alat satu ukuran untuk semua yang, seperti ubat mujarab, menyelesaikan semua masalah kita dalam satu gerakan?
Kenyataannya adalah bahawa, dalam industri dengan begitu banyak aspek dan bidang spesialisasi yang berbeza, pendekatan satu-ukuran-sesuai-mungkin mungkin terlalu terhad dan tidak realistik.
Kita semua mempunyai keperluan dan web yang berbeza - seperti yang diinginkan secara organik - memenuhi keperluan ini melalui banyak alat, semuanya bebas dijangkau. Setiap pereka atau pembangun mempunyai keperluan yang berbeza; apa yang menggembirakan sekarang ialah tidak ada masa yang lebih baik untuk mencari komponen untuk membina kotak alat reka bentuk web anda sendiri.
Dengan kata lain, alat yang kami senaraikan di sini hanyalah sebahagian kecil dari apa yang ditawarkan. Tempat penyelidikan dan anda akan mempunyai kotak peralatan anda sendiri yang siap pakai dalam masa yang singkat.
