Kandungan
- Faedah merancang dengan kod
- Data terlebih dahulu
- Kebaikan mudah alih secara percuma
- Mencari bahasa yang sama
- Belajar dengan lebih pantas
- Pengulangan cepat
- Masa lebih pantas untuk dilancarkan
- Mengapa HTML5?
- Atribut data ajaib
- CSS3 - ini adalah Photoshop baru
- Sass + Kompas: sedap secara ajaib
- jQuery: oh, ya anda boleh
- Kerangka kerja
- Pemikiran terakhir
Artikel ini pertama kali muncul dalam edisi 235 majalah .net - majalah terlaris di dunia untuk pereka dan pembangun web.
Saya tidak pernah menjadi peminat besar dalam melakukan lebih banyak pekerjaan daripada yang diperlukan. Saya cenderung menilai kaedah dan alat berdasarkan kemampuan mereka menjadikan saya, atau pasukan saya, lebih berkesan. Seberapa cepat mereka membawa kita ke produk yang berfungsi? Sejauh mana keberkesanan mereka dalam berkomunikasi? Adakah mereka tidak menghiraukan kita?
Selama bertahun-tahun, saya telah menyesuaikan proses dan alat reka bentuk saya. Saya bayangkan saya akan terus melakukannya. Itulah sifat merancang teknologi dan web. Industri ini sentiasa berkembang; proses dan alat kami juga perlu berkembang.
HTML5 dan CSS3 mempermudah peralihan lebih banyak proses reka bentuk ke hulu - jauh dari Photoshop dan lebih ke arah reka bentuk bernafas yang hidup. Alat seperti Foundation, Bootstrap, dan jQuery menjadikan pemindahan lebih banyak proses reka bentuk anda ke kod yang lebih mudah didekati.
Faedah merancang dengan kod
Pertama, saya tidak menganjurkan penurunan Photoshop, atau penyunting reka bentuk visual lain dari aliran kerja anda. Sebagai gantinya, saya akan memfokuskan pada faedah memindahkan reka bentuk itu ke dalam kod lebih awal daripada yang kemudian.
Data terlebih dahulu
Perkara yang selalu saya gemari ketika merancang dengan HTML ialah mendorongnya berfikir dari perspektif pertama data. Sebaliknya, dengan menggunakan program menggambar seperti Illustrator, OmniGraffle, atau Balsamiq, anda memulakan dengan kotak dan mengisinya dengan data.
Dalam HTML anda membina DOM (model objek dokumen), seperti membina jadual kandungan. Ini adalah kembali kepada reka bentuk maklumat yang benar dengan hierarki yang bermakna. HTML5 melangkah lebih jauh dengan penambahan elemen semantik baru: artikel, bahagian, tajuk, samping, footer dan sebagainya. Pendekatan data-pertama ini sesuai dengan reka bentuk responsif pertama mudah alih.
Kebaikan mudah alih secara percuma
Sekiranya anda membaca ini, anda mungkin merancang untuk mudah alih. Dan kemungkinan anda perlu merancang satu atau dua borang. Dengan HTML5, anda bernasib baik. Sebelum HTML5, jenis input anda adalah bidang teks atau kata laluan. HTML5 memperkenalkan sejumlah jenis input tambahan, termasuk:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "tarikh-waktu">
Apa yang sangat mengagumkan mengenai jenis input tambahan dan unik ini ialah penyemak imbas mudah alih di iOS dan Android mengenalinya dan menukar papan kekunci yang disedari secara automatik secara automatik - tanpa diperlukan pemalam atau peretasan khas jQuery. Oh, dan jika penyemak imbas anda tidak tahu apa itu jenis input = "e-mel"> adalah, lalai dari input teks.
Mencari bahasa yang sama
"Hebat bagaimana pereka dan pembangun kami dapat bekerja dalam bahasa yang sama" - John Drago, pembangun aplikasi di Inflection.
Lihat apakah ini terdengar biasa. Saya berada di bilik persidangan dengan setengah-setengah devs aplikasi sisi pelayan yang dapat membuat kod kalangan di sekitar saya di Ruby, Python, Java atau .NET. Saya satu-satunya pereka. Beberapa cadangan saya pada mulanya ditolak kerana terlalu rumit untuk dilaksanakan. Saya berjalan ke papan putih dan mula menulis beberapa HTML dan CSS di papan untuk bagaimana reka bentuk dapat dilaksanakan. Tiba-tiba nada perbualan berubah dan salah seorang pembangun dengan enggan berkata, "Baiklah - jika kita melakukannya dengan cara itu, ia akan berjaya."
Memindahkan lebih banyak proses reka bentuk saya ke dalam kod telah meningkatkan perbualan dengan pembangun. Terdapat lapisan penghormatan tambahan yang diperoleh dengan mengetahui cara membuat reka bentuk anda dalam kod. Anda tidak perlu menjadi pakar untuk mendapatkan penghormatan itu. Walaupun kemahiran HTML dan CSS saya sangat mantap, kemahiran JavaScript saya biasa-biasa saja. Dan saya tidak malu untuk mengakuinya. Namun, ketika bekerja dengan pemaju depan, atau pelayan, kenyataan bahawa kita dapat berbicara dalam bahasa yang sama, atau bertemu di tengah jalan, adalah kelebihan besar.
Belajar dengan lebih pantas
Walaupun rangka dawai dan komposit visual dapat membantu dalam merancang, artifak statik ini bersifat teori. Berapa kali anda cuba menjelaskan interaksi kepada seseorang, hanya untuk membuat mereka bertindak balas, "Saya rasa saya mesti melihatnya." Semakin cepat anda mendapatkan prototaip, sesuatu yang dapat berinteraksi dengan orang lain, semakin cepat anda dapat merangka reka bentuk dan melihat apakah idea berfungsi.
Pengulangan cepat
Bilakah kali terakhir reka bentuk akhir yang dihantar ke produksi sepadan dengan kompak Photoshop anda? Hampir tidak pernah. Dengan reka bentuk produk digital, perubahan berlaku secara berterusan. Selain itu, perubahan seperti meningkatkan ukuran tajuk anda dari 22pt hingga 24pt pada beberapa layar boleh memakan masa berjam-jam di Photoshop. Objek Pintar memberi anda beberapa tahap reka bentuk berorientasikan objek di Photoshop. Malangnya, kebanyakan pereka visual yang saya tahu tidak menggunakan Objek Pintar dengan cukup. Dengan CSS, kerana mendorong pendekatan yang lebih sistematik untuk merancang, perubahan tipografi memerlukan beberapa minit dan bukannya berjam-jam.
Bagaimana dengan mengubah kecerunan linear pada semua butang anda? Atau ukuran sempadan? Bagaimana dengan menukar dari sudut kuadrat menjadi sudut bulat 2px? Di Photoshop, ini boleh memakan masa berjam-jam dan anda masih perlu mengkodnya. Keupayaan untuk merancang dalam kod membantu mengelakkan perjalanan pergi balik ke Photoshop untuk mengulangi reka bentuk visual. Apabila anda memindahkan perubahan tersebut ke hulu ke dalam kod, menggunakan CSS3 dan Sass (yang akan saya bahas nanti dalam artikel ini) perubahan tersebut boleh berlaku dalam masa nyata dan hanya memerlukan beberapa minit.
Masa lebih pantas untuk dilancarkan
Selama bertahun-tahun, ketika saya menukar lebih banyak aliran kerja reka bentuk saya ke hulu ke kod, saya mengalami peningkatan yang nyata - sekitar 20 hingga 30 peratus pengurangan masa untuk memasarkan. Semakin saya melakukan ini, semakin sedikit masa saya menghabiskan usaha pendua. Saya menghabiskan lebih sedikit kitaran untuk masuk ke Photoshop atau Fireworks dan kemudian mengulangi kerja dalam kod.
Pada satu ketika, reka bentuk harus bersambung dengan beberapa jenis backend, sama ada itu aplikasi CMS, Rails atau yang lain. Oleh kerana sebahagian besar karya reka bentuk saya ada dalam kod, integrasi berlaku lebih cepat daripada yang kemudian. Beberapa tahun yang lalu, salah seorang pelanggan saya, PointRoll, beralih dari prototaip ke pengeluaran dalam lima hari.
Mengapa HTML5?
HTML5 lebih mudah daripada versi HTML sebelumnya. Contohnya perisytiharan jenis dokumen. Dalam versi HTML sebelumnya, DOCTYPE kelihatan seperti ini:
! DOCTYPE html AWAM "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Terdapat enam versi berbeza. Nasib baik HTML5 DOCTYPE kelihatan seperti ini:
! DOCTYPE HTML>
Serius. Itu sahaja. Sangat mengejutkan.
Semasa membuat halaman HTML standard, ada sejumlah elemen umum, seperti header, area kandungan utama, bar sisi dan footer. Saya pasti anda pernah melihat perkara seperti ini sebelum ini:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Tidak ada yang luar biasa di sana. Tetapi setelah diisi dengan kandungan, templat ini bertukar menjadi sup sup. Sebaliknya, dengan elemen semantik baru HTML5, anda mendapat sesuatu yang lebih mudah dan senang untuk diimbas, seperti ini:
header> nav> / nav> / header> artikel> samping> / samping> / artikel> footer> / footer>
Lihatlah itu. Sesuatu yang masuk akal.
Atribut data ajaib
HTML5 dilengkapi dengan cangkuk hebat lain yang memberi anda keupayaan untuk membuat makna semantik anda sendiri: data-. Sebelum ini, jika anda ingin memberikan sesuatu yang bermakna pada elemen DOM, anda terhad kepada ID, kelas dan peranan.
Malangnya, ID mestilah unik. Kelas bersifat universal (yippee!), Tetapi menggunakannya boleh berubah menjadi cepat. Peranan adalah aset yang kurang digunakan yang memberi makna yang signifikan bagi ARIA. Baru-baru ini, saya menggunakan data- untuk platform analisis pelacakan peristiwa yang kami kembangkan di Inflection.Kami peminat besar menguji reka bentuk kami. Semasa mengusahakan aplikasi atau halaman yang mempunyai banyak interaktiviti, kami ingin mendapatkan pandangan yang lebih terperinci mengenai penglibatan pelanggan dalam halaman.
Masuk ke data-. Dengan itu, anda boleh menetapkan, menyebarkan, dan menghubungkan model makna 'tentukan sendiri'. Jadi, sebagai contoh, anda boleh melakukan ini:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "daftar "> input type =" button "data-id =" Linkedin "dataregion =" main "data-event =" register ">
Kami dapat melampirkan pendengar dengan JavaScript ke halaman dan setiap kali pelanggan melayang, atau mengklik butang ini, kami dapat mengesan aktiviti tersebut. Daripada hanya dapat mengesan seseorang yang mendaftar melalui OAuth dengan Twitter, kita dapat melihat bahawa mereka berlegar di Facebook, kemudian Twitter, kemudian LinkedIn, dan akhirnya memutuskan untuk memilih Twitter untuk model OAuth mereka.
Bayangkan meluaskannya ke laman web seperti Pinterest, atau reka bentuk Myspace baru di mana pelanggan menyeret dan melepaskan jubin untuk menyusun semula berdasarkan minat. Atau mungkin menyembunyikan jubin yang tidak mereka minati data- atribut membolehkan anda melampirkan atau memberikan lapisan makna semantik tambahan kepada perkara-perkara yang dapat anda tentukan. Untuk laman web dan aplikasi yang sangat bergantung pada Ajax, ia membuka peluang tanpa had.
CSS3 - ini adalah Photoshop baru
CSS3 menghadirkan tahap baru untuk merancang tampilan dan nuansa yang biasanya memerlukan gambar latar belakang, potongan, dan teknik ‘pintu gelangsar’ yang terkenal. Syukurlah, itu semua perkara masa lalu.
Mari kita lihat membuat butang mewah dengan kecerunan linier, sudut bulat, bayangan teks yang memberikan kesan penekanan huruf yang bagus, dan cahaya di hover. Mempelajari teknik-teknik ini akan banyak membantu. Masing-masing daripadanya dapat digunakan secara bebas, atau dalam pelbagai kombinasi untuk menarik semua kehebatan visual semasa yang sedang tren di web hari ini.
Pertama, mari buat beberapa penyesuaian pada lalai butang> dan jenis input = "submit"> unsur. Dengan andaian anda menggunakan salah satu set semula CSS standard, kami hanya akan menambah sedikit ruang dan ruang bernafas.
/ * Butang butang, yang mempunyai butang. ======================================= * * / butang, masukan [type = "submit"] {tinggi: 2.7em; padding: .4em .7em; ketinggian garisan: 1.9; }
Protip: Butang dan input yang dihantar boleh menjadi sukar untuk disusun semula. Saya dapati dengan menyesuaikan ketinggian garis ke 1.6 atau lebih besar, anda dapat mengelakkan peretasan memerlukan div atau rentang tambahan di dalam butang> teg.
Sekarang kita telah 'membetulkan' masalah butang kita, kita dapat membuat .btn kelas untuk memberi kita butang bersih yang bagus dengan sudut bulat, kecerunan linier, garis besar, dan paparan huruf.
.btn {paparan: sebaris-blok; sempadan: 1px pepejal # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; sempadan-jejari: 4px; padding: .4em .7em; latar belakang: # edeff2; latar belakang: -webkit-gradient (linear, 0% 0%, 0% 100%, dari (#fefefe), warna-stop (0.55, # edeff2), hingga (# e4e6e9)); latar belakang: -moz-linear-gradient (bahagian atas tengah, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; kotak-bayangan: rgba (160,172,187, .7) 0 0 .2em 0; warna: # 6c7786; saiz fon: 1.1em; teks-bayangan: #fefefe 1px 0 1px; ketinggian garisan: 1.375em; kursor: penunjuk; }
Dan kemudian kesan hover yang bagus dengan cahaya halus menggunakan bayangan kotak kaedah:
.btn: hover, .btn: fokus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; kotak-bayangan: # 129ceb 0 0 2px; latar belakang: # e6e9eb; latar belakang: -webkit-gradient (linear, 0% 0%, 0% 100%, dari (# f7f7f7), warna-stop (0.55, # f6f6f7), hingga (# e6e9eb)); latar belakang: -moz-lineargradient (bahagian atas tengah, # f7f7f7, # f6f6f7 55%, # e6e9eb); warna: # 45484b; teks-bayangan: rgb (255,255,255) 1px 1px 0; warna sempadan: # c9c9c0; }
Sekarang, saya bukan peminat menulis kod kecerunan linear. Ia panjang dan membingungkan. Seperti yang anda lihat, saya hanya menyertakan versi untuk -moz, -webkit, dan model standard. Sekiranya anda ingin memasukkan versi -o dan -ms, anda perlu menggandakan kodnya.
Terdapat dua pilihan lain. Salah satunya ialah penjana CSS3; terdapat beberapa yang terdapat di web, termasuk ColorZilla. Tetapi jika anda ingin meningkatkan permainan anda, pertimbangkan untuk menyelami Sass: digabungkan dengan Compass, itu adalah anugerah.
Sass + Kompas: sedap secara ajaib
Anda boleh berhenti berharap untuk edisi unicorn CSS4. Di sini dan dipanggil Sass + Kompas. Sass adalah singkatan dari Stylesheets Stylesheets: anda mewarisi semua faedah tradisional CSS3 dengan keseronokan pemboleh ubah, mixin, extender dan barang lain.
Saya baru-baru ini membuat semula fail CSS 5,000 baris yang mempunyai lebih daripada 30 variasi pada warna biru yang sama. Dengan Sass, saya mengganti setiap variasi dengan kod ini:
warna: $ biru;
Dengan menentukan $ biru di saya _variables.scss fail, saya boleh membuat warna lalai yang boleh dirujuk oleh setiap fail CSS atau SCSS. Sesiapa sahaja yang menulis CSS boleh menggunakan $ biru dan tidak perlu risau menggunakan eyedropper, mencari kod hex, atau warna RGB, RGBA atau HSL.
Ingat bahawa kod kecerunan linear? Daripada menulis beberapa baris kod, bagaimana dengan ini:
@ sertakan latar belakang (linear-gradient (# b1cfdc, # 7a9cac));
Biarkan Sass dan Compass melakukan pengangkatan berat dan menghasilkan sintaks yang betul untuk anda: selesai. Katakan anda mahukan versi warna yang lebih gelap atau lebih terang. Anda boleh menggerakkan eyedropper di Photoshop, atau hanya menggunakan perintah meringankan / menggelapkan di Sass:
@ sertakan latar belakang (linear-gradient (gelap ($ litegray, 2%), gelap ($ off-white, 5%)));
Itu akan mewujudkan kecerunan linear dengan 2% gelap $ lite-kelabu dan 5% gelap berwarna putih. Kerosakan! Anda bahkan tidak memerlukan kod HEX atau RGB.
jQuery: oh, ya anda boleh
Saya mempunyai pengakuan untuk dibuat. JavaScript digunakan untuk menakut-nakutkan saya. Kemudian saya menjumpai jQuery. Saya tidak akan mengaku sebagai guru JavaScript, tetapi saya cukup yakin bahawa saya boleh melakukan peralihan, atau fungsi yang saya perlukan untuk menggunakan jQuery.
Ambil, misalnya, kemampuan untuk menampilkan input nombor telefon sekunder di layar dengan mengklik pautan Tambahkan nombor baru. Dengan menggunakan jQuery, anda hanya menulis ini:
// - Pendedahan progresif - // $ ('. New-number'). Klik (fungsi () {$ ('. Alt-number'). FadeIn ('fast');});
Mencari sesuatu yang lebih maju? Mungkin ada pemalam untuknya. Tingkah laku asas mudah dan kompleks boleh didekati dengan jQuery.
Kerangka kerja
Dua kerangka kerja yang paling kuat hari ini ialah Foundation and Bootstrap. Sekarang, sebelum anda menolak kerangka kerja CSS, izinkan saya bertanya sesuatu kepada anda. Adakah anda menggunakan jQuery? Ruby on Rails? Django? Semua kerangka kerja.
Sama seperti jQuery dan RoR, Foundation dan Bootstrap dilahirkan kerana menyedari bahawa terdapat banyak perkara yang kita lakukan berulang kali (seperti set semula, tipografi, grid, borang, butang, navigasi dan senarai). Foundation dan Bootstrap kedua-duanya menawarkan sokongan untuk reka bentuk responsif melalui penggunaan kelas penolong. Kedua-duanya didokumentasikan dengan baik dan telah diuji jalan, jadi anda boleh menggunakannya dengan yakin.
Satu perbezaan utama antara keduanya: Bootstrap didasarkan pada sistem KURANG untuk pemprosesan CSS, sedangkan Foundation didasarkan pada Sass. Saya lebih suka Sass daripada KURANG kerana kemampuan tambahannya, tetapi kedua-dua Sass dan LESS memadamkan CSS tradisional.
Satu pemikiran terakhir mengenai kerangka kerja. Bagi mereka yang tidak mahu mewarisi kerangka kerja tambahan orang lain, pertimbangkan untuk memilih yang sedia ada dan melucutkannya ke tulang kosong, atau memilih ceri dari beberapa untuk menggulung sendiri. Walau apa pun, sebenarnya tidak ada alasan untuk bermula dari awal setiap masa.
Pemikiran terakhir
Mahukan kawalan yang lebih besar mengenai bagaimana reka bentuk anda akhirnya berubah? Pindahkan lebih banyak proses ke hulu ke kod. HTML5 akhirnya memberi sedikit makna kepada DOM. Riddance baik untuk tidak masuk akal DOCTYPEs dan divitis. CSS3 adalah Photoshop baru: kecerunan linier, borderradius, dan bayangan kotak FTW! Dengan alat seperti Bootstrap, Foundation, Sass dan jQuery, reka bentuk hulu ke kod tidak pernah semudah ini.
Ketahui 55 contoh HTML5 yang hebat di Creative Bloq.
