Pengintip yang menyelinap dalam Foundation Berikutnya untuk Aplikasi

Indonesian (Bahasa Indonesia) translation by Muhlis Tirowali (you can also view the original English article)

ZURB selalu mengerjakan alat besar berikutnya untuk membantu para perancang web dan pengembang. Mereka membuat hari memrogram kita sedikit lebih mudah dan lebih menyenangkan. Kerangka Foundation bisa dibilang paling terkenal, dan segera akan ada anggota baru untuk keluarga ini : Foundation untuk Aplikasi.

Dengan jadwal rilis pada hari Selasa tanggal 2 Desember, sekarang adalah saat yang tepat untuk melihat apa yang Foundation untuk Aplikasi tawarkan, fitur utamanya dan apa yang dapat kami harapkan dalam waktu dekat. Baru-baru ini saya diberi kesempatan untuk mengobrol dengan Brandon Arnold, perancang utama, dan Geoff Kimball, perancang produk di ZURB. Mereka menunjukkan kepada saya beberapa fitur canggihnya, dan hari ini saya akan menunjukkan kepada anda apa yang dapat anda lakukan dengannya.

Fitur

Tujuan utama Foundation untuk aplikasi adalah menyediakan sarana untuk membuat bentuk dasar aplikasi web dan kerangka kerja yang cepat untuk membangun aplikasi web tersebut. Untuk membuat semua itu mungkin, ia datang dengan beberapa fitur yang sangat berguna, terutama:

1. Motion UI

Era baru desain datar, dalam banyak hal, mengambil sesuatu dari antarmuka kita: hierarki dan struktur karena kurangnya gradien, elemen skeuomorfik, bayangan dan kedalaman. Foundation untuk aplikasi menangani masalah ini dengan menggunakan perpustakaan Motion UI yang kaya dengan banyak animasi dan transisi yang siap anda gunakan. Anda tidak perlu berkutat dengan Sass atau JavaScript, karena ZURB telah melakukan pekerjaan keras untuk anda.

Inilah yang bisa kita harapkan:

Animasi: animasi keyframe CSS akan memungkinkan anda menambahkan gerakan dan efek halus ke aplikasi anda. Ini akan memberi masukan kepada pengguna yang memberi tahu mereka bagaimana aplikasi anda terstruktur dan bagaimana mereka berinteraksi dengannya. Rincian seperti ini sangat bagus untuk memberi perhatian ekstra pada pemberitahuan, kesalahan, atau ajakan bertindak.

Transisi: Transisi dapat digunakan untuk segala macam barang mewah, mulai dari memindahkan benda dari satu posisi ke posisi lainnya dengan mulus, untuk mengganti konten dan menampilkan konten baru, seperti kanvas navigasi dan turun-bawah.

Pemodifikasi Motion: Ini digunakan untuk mempengaruhi arah, kecepatan, perulangan, kemudahan dan keterlambatan objek anda. Bersama dengan animasi anda memiliki kemungkinan besar untuk menciptakan pengalaman pengguna yang lancar.

Penggabungan, semua komponen ini membuat pengalaman yang mendalam dan hidup bagi pengguna anda, semuanya dengan kemudahan pengelompokan yang telah ditentukan. Mereka akan menghemat banyak pekerjaan dan membuat bentuk dasarnya berjalan dan berjalan dalam waktu singkat.

2. Flexbox Grid.

Foundation untuk aplikasi akan menggunakan Flexbox CSS untuk menentukan ini Grib. Flexbox menyediakan cara untuk memesan elemen anda di HTML, tetap saja, terlepas dari penambahannya. Anda dapat menempatkan konten anda secara literal di manapun, dari atas ke bawah, kiri ke kanan, tengah dan tengah. Menggunakan Flexbox membawa beberapa keuntungan:

Tidak ada lagi kebutuhan untuk penentuan posisi tetap, yang seringkali tidak dapat diandalkan pada perangkat telepon selular.
Terlepas dari penambahan anda dapat menempatkan konten anda di manapun anda inginkan.
Alih-alih hanya menumpuk konten anda secara vertikal, anda dapat membuat aplikasi web halaman penuh, dengan bagian menggulung yang terpisah saat dibutuhkan lebih banyak konten.
Tidak perlu membersihkan yang mengambang.
Anda dapat membuat tata letak aplikasi web yang rumit dalam hitungan menit.

Sintaks yang berbeda akan dibutuhkan untuk grid, karena baris dan kolom tidak masuk akal saat menggunakan pengguliran vertikal dari bagian konten yang berbeda dalam tata letak anda. Inilah yang akan anda gunakan untuk membuat tata letak aplikasi web anda sendiri:

Grup: Grup akan digunakan sebagai objek tata letak yang dapat berisi lebih banyak grup atau blok. Mereka agak mirip dengan baris di Foundation 5.
Blok: Hanya berisi konten. Anda tidak akan menggunakannya untuk tata letak anda, namun mereka akan mengandung unsur dan komponen lain. Bayangkan mereka seperti kolom di Foundation 5.
Bingkai: Dengan bingkai anda bisa mengukir layar menjadi beberapa bagian, karena bingkai berukuran 100% dan tinggi layar. Ini memungkinkan anda membuat area yang mudah digulir secara terpisah.

3. Aplikasi Halaman Tunggal

Masa depan aplikasi web akan melibatkan negara bagian dan bukan halaman baru, dan menunjukkan bahwa telah menjadi salah satu tujuan utama kami untuk Foundation untuk aplikasi - Brandon Arnold, kepala perancang

Dengan Foundation untuk aplikasi, kami dapat melihat perubahan dalam cara kami menyajikan konten kepada pengguna kami. Alih-alih hanya memuat ulang halaman setelah setiap tindakan yang dilakukan pengguna, konten dapat ditampilkan atau disembunyikan tergantung pada apa yang pengguna ingin lihat.

Pendekatan ini akan membuat aplikasi web anda terasa lebih mirip aplikasi asli; pengguna akan mendapatkan konten mereka lebih cepat dan mereka akan tahu secara intuitif dari mana asalnya. Terserah anda untuk memutuskan konten apa yang relevan, apa yang harus ditunjukkan dan apa yang harus dihapus bila tidak dibutuhkan.

4. Template AngularJS Routes

Foundation untuk aplikasi akan menggunakan Angular sebagai kerangka kerja MVC untuk melakukan pengangkatan berat. Mari kita cari tahu bagaimana caranya:

Dengan Foundation untuk aplikasi, kami juga berusaha membuat Angular diakses oleh perancang dan pengembang - Brandon Arnold, Lead Design

Saat menggunakan Foundation untuk aplikasi untuk proyek anda yang akan datang, anda sebenarnya tidak perlu banyak tahu tentang Angular sama sekali. Untuk menyederhanakan hal-hal seperti menggunakan animasi yang berbeda dan menentukan URL template anda, Foundation untuk aplikasi menggunakan UI routing. Anda dapat menentukan URL dan animasi anda di file HTML anda dan dengan bantuan keajaiban Gulp kecil, label template diurai dan potongan kode yang benar ditambahkan ke template anda.

Dengan cara ini anda dapat membuat aplikasi web satu halaman tanpa harus menyentuh satu baris JavaScript. Misalnya, inilah yang akan anda tulis di template anda:

---
name: home
url: /home
animationIn: bounceIn
animationOut: bounceOut
---

Dan inilah yang diajarkan semua keajaiban Foundation untuk aplikasi untuk anda:

var routerApp = angular.module(’routerApp’, [’ui.router’]);
 
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise(’/home’);
 
    $stateProvider
        .state(’home’, {
        url: ’/url’,
        templateUrl: ’partial-home.html’,
        controller: ’PageController’, //default controller
        data: { vars: {
            name: home,
            url: /home,
            animationIn: bounceIn,
            animationOut: bounceOut
        }}
    });
});

Hal ini tidak hanya akan menghemat banyak waktu saat anda ketika mengembangkan bentuk dasar atau produk aktual anda, bahkan membuat aplikasi web dapat diakses oleh orang-orang yang tidak nyaman dengan pengembangan depan-belakang yang lebih kompleks.

5. Komponen Pengendali Kode

Alih-alih menggunakan kode seperti <div class="modal" data-modal>, Foundation for Apps akan menggunakan arahan Sudut, untuk memutar barang dan membuat sesuatu mudah diingat darinya. Sebagai gantinya, Anda akan menulis sesuatu seperti <fa-modal>, untuk mendapatkan hasil yang sama.

Ini membuat penambahan bersih, yang memungkinkan konsistensi yang lebih baik dalam alur kerja anda dan tim anda. Alih-alih memikirkan apakah label seharusnya berupa header, footer, div atau section misalnya, anda hanya akan menulis <fa-yourtag>. Mudah kan?

Selain itu, Komponen Pengendali Kode ini, memungkinkan untuk mengintegrasikan pengelompokan Foundation Motion UI untuk membangun animasi dan menerapkannya pada pandangan anda yang berbeda.

Fitur lainnya

Simak beberapa fitur lainnya yang akan disertakan dalam Foundation untuk aplikasi:

Off-canvas
Panels
Block lists
Popup menus
Icon bar
Modals
Alerts
Forms
Interchange

Hal yang bisa kita Harapkan

Pertama, kami dapat mengharapkan Foundation untuk aplikasi menjadi cicilan berikutnya yang menarik dan berguna dari keluarga Foundation. Orang-orang di ZURB berada di atas setiap teknologi dan tren baru dan dengan pengalaman bertahun-tahun dalam desain produk, mereka kembali memberikan produk hebat untuk masyarakat gunakan. Sama seperti Foundation untuk situs dan segera diberi nama Foundation untuk surat elektronik, Foundation untuk aplikasi benar-benar terbuka sumber dan, akan terus dioptimalkan oleh ZURB dan masyarakat untuk mengerjakan beberapa perangkat.

Masa Depan Foundation

Dengan Foundation untuk aplikasi segera hadir dan Ink menjadi Foundation untuk Surat Elektronik, kita bisa melihat permulaan seperangkat alat yang sesuai dengan kebutuhan berbagai pekerjaan yang kita miliki sebagai perancang web dan pengembang. Segera kita akan membicarakan tiga produk berbeda ini:

Foundation untuk Situs: Kita semua tahu yang ini! Foundation untuk situs ini dan akan selalu bagus untuk konten dan situs pemasaran. Ini adalah alat pembentukn dasar yang cepat dan kerangka kerja yang benar-benar mengagumkan untuk membangun situs web seluler pertama yang responsif.
Foundation untuk Aplikasi: Anak baru di blok ini, sesuai dengan kebutuhan kita akan tren aplikasi web yang akan datang yang mengambil alih web! Dengan jaringannya yang fleksibel, animasi yang kuat dan desain satu halaman, Foundation untuk aplikasi menyediakan alat yang diperlukan untuk (membangun) dengan cepat dan membuat bentuk dasar aplikasi web anda.
Foundation untuk Surat Elektronik: Surat Elektronik yang responsif selalu menjadi penyebab sakit kepala yang hebat. Dengan Foundationuntuk surat elektronik, ZURB menawarkan alat untuk basis yang baik untuk membangun template surat elektronik.

Foundation untuk aplikasi akan diluncurkan pada hari Selasa tanggal 2 Desember, jadi pastikan untuk terus mengetahuinya!

Kesimpulan

Sebenarnya, Foundation menjadi solusi semua-dalam-satu untuk pengembangan web depan-belakang anda. Foundation untuk aplikasi akan membiarkan perancang dan pengembang membuat bentuk dasar multi-tampilan dengan mudah, lengkap dengan penukaran dan animasi parsial (sebagian), bagus untuk menyiapkan demo untuk memberi kesan tim dan klien anda.