. .

PEMROGRAMAN NETBEANS DENGAN CSS STYLE SHEETS DALAM APLIKASI HTML5

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Rabu, November 02, 2016 No comments

ATM, Amati (Attention) - Tiru (Transcript) - Modifikasi (Modification). Metode ini digunakan dalam Learning Blog ini, mengamati dan mempelajari artikel sumber, kemudian meniru dengan metode sendiri dilanjutkan dengan memodifikasinya yang menghasilkan artikel post pembelajaran kita bersama yang kemudian menjadi ciri karakter Learning Blog ini.
BERSAMA-SAMA KITA ber-ATM 
Seperti pada kesempatan ini, kita akan mempelajari bagaimana menerapkan format style web programming di Netbeans Java dengan CSS Style Sheets dalam aplikasi HTML5 yang sesungguhnya sudah dituliskan dalam pembelajaran di Netbeans.org/Docs/Webclient, Learning Blog ini menuliskannya kembali dalam Bahasa Indonesia dengan METODE ATM yang sudah disebutkan diatas.
METODE ATM = Amati - Tiru - Modifikasi

Bekerja Dengan CSS Style Sheets Dalam Aplikasi HTML5
Aplikasi HTML5 biasanya menggabungkan HTML, CSS dan JavaScript untuk membuat aplikasi yang dijalankan di browser dan yang ditampilkan pada berbagai perangkat, termasuk smartphone, tablet dan laptop. Dokumen ini menunjukkan bagaimana IDE menyediakan alat yang dapat membantu kita bekerja dengan aturan CSS untuk memodifikasi tata letak aplikasi. IDE juga menyediakan dukungan untuk menciptakan dan menggunakan Sass dan LESS CSS Preprosesor dalam aplikasi kita.

Ekstensi NetBeans Connector untuk browser Chrome dapat membantu kita melihat aplikasi seperti yang ditampilkan pada berbagai perangkat. ekstensi memungkinkan browser Chrome dan IDE untuk berkomunikasi satu sama lain. Inspect dalam mode NetBeans dapat membantu kita menemukan elemen dalam kode sumber kita dengan memilih mereka dalam browser. Setelah kita memilih elemen di browser kita dapat menggunakan IDE untuk melihat aturan CSS dan sifat yang diterapkan pada elemen. 
Menggunakan Browser Chrome Ekstensi akan kita bahas dan dijelaskan dalam kesempatan dibawah ini
Untuk rincian tentang cara menginstal ekstensi NetBeans Connector untuk browser Chrome, lihat pembelajaran Memulai dengan Aplikasi HTML5.
Untuk menonton screencast pembelajaran ini, lihat Video dari Bekerja dengan Sheets CSS Style Aplikasi HTML5.
Dalam artikel pembelajaran ini kita akan membahas dan mempelajari :

Untuk menyelesaikan pembelajaran ini, kita akan membutuhkan aplikasi berikut yang sudah terinstall pada komputer kita.
Software or ResourceVersion Required
NetBeans IDE, Java7.4, 8.0
Java Development Kit (JDK)7 or 8
Chrome Browser--
NetBeans Connector Extension for Chrome1.1 or newer
HTML5DemoSiteTemplate.zip--
CSS preprocessorSass or
LESS
Catatan:
  • HTML5DemoSiteTemplate.zip (download) adalah template situs yang akan kita gunakan ketika kita membuat proyek.
  • Jika kita ingin membandingkan proyek kita dengan solusi bekerja, kita dapat men-download situs template dari proyek selesai.
  • Dokumen ini mengasumsikan kita memiliki pengetahuan dasar (jangan takut untuk mencoba, langkah-demi langkah akan kita pelajari bersama) tentang, atau pengalaman pemrograman dengan HTML, CSS, dan JavaScript.
Membuat Aplikasi HTML5
Dalam pembelajaran ini kita menggunakan situs template untuk membuat proyek HTML5. Template situs yang kita gunakan dalam pembelajaran ini adalah template yang sama yang disimpan sebagai template situs di mulai dengan pembelajaran Aplikasi HTML5. Jika kita melakukan langkah-langkah dalam pembelajaran kita mulai dengan menggunakan situs template yang sudah kita simpan (HTML5DemoSiteTemplate.zip Template).
Lakukan langkah-langkah berikut untuk membuat aplikasi dari template situs :
  • Download  HTML5 site template (HTML5DemoSiteTemplate) simpan dalam satu folder sebagai ruang kerja kita.
  • Pada Aplikasi Netbeans yang sudah terbuka pilih File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) pada menu utama untuk membuka  New Project wizard.
  • Pilih kategori HTML5/Javascript kemudian pilih HTML5/JS Application. Click Next.
  • Tulis HTML5DemoCss5 untuk nama proyek dan pilih lokasi folder kerja. Click Next.
  • Pilih Select Template option dan click Browse ke site template (HTML5DemoSiteTemplate.zip). yang sudah kita download tadi lalu Click Finish.
HASILNYA :
Ketika kita klik Finish IDE menciptakan proyek dan membuka file index.html di editor. Pada jendela Proyek kita dapat melihat bahwa proyek berisi index.html, style sheet CSS, beberapa perpustakaan JavaScript dan beberapa gambar. Aturan-aturan CSS dan Navigator jendela juga terbuka dalam Netbeans IDE.
Melihat Aplikasi di Berbagai Perangkat
Dalam pembelajaran ini kita akan menjalankan aplikasi di browser Chrome dengan ekstensi NetBeans Connector diinstal. Ketika ekstensi diinstal kita dapat menggunakan menu NetBeans di browser untuk dengan mudah mengubah ukuran jendela browser untuk melihat aplikasi karena akan muncul pada beberapa perangkat umum.
Catatan.
Untuk pembelajaran ini dianjurkan bahwa kita menggunakan browser Chrome dan menginstal ekstensi NetBeans untuk Chrome. Lihat tutorial Memulai dengan Aplikasi HTML5 untuk rincian tentang cara menginstal ekstensi NetBeans Connector. (click untuk memasang ekstensi Netbeans Connector).

Lakukan langkah-langkah berikut untuk menjalankan aplikasi di browser Chrome.

  1. Mengkonfirmasi bahwa Chrome dengan NetBeans Integrasi dipilih dalam daftar dropdown di Toolbar.
  2. Klik tombol Run pada toolbar untuk menjalankan proyek di browser Chrome.
  3. Dalam browser kita dapat melihat menu diperluas sederhana.
  4. Kita akan melihat bahwa ada bar kuning di tab browser yang memberitahu kita bahwa NetBeans Connector adalah debugging tab. IDE dan browser yang terhubung dan dapat berkomunikasi satu sama lain ketika bar kuning terlihat. Ketika kita menjalankan aplikasi HTML5 dari IDE debugger JavaScript secara otomatis diaktifkan. Bila kita menyimpan perubahan ke file atau membuat perubahan pada style sheet CSS kita tidak perlu memuat ulang halaman karena jendela browser secara otomatis diperbarui untuk menampilkan perubahan.
  5. Jika kita menutup bar kuning atau klik Cancel kita akan mematahkan hubungan antara IDE dan browser. Jika kita memutuskan sambungan kita akan perlu untuk memulai aplikasi HTML5 dari IDE.
  6. Kita juga akan melihat bahwa ikon NetBeans terlihat di URL bidang lokasi browser. kita dapat mengklik ikon untuk membuka menu yang menyediakan berbagai pilihan untuk mengubah ukuran tampilan browser dan untuk memungkinkan Periksa dalam mode NetBeans.
  7. Klik ikon Buka NetBeans Action di bidang URL dari browser untuk membuka menu NetBeans dan pilih Tablet Portrait dalam menu jendela mengubah ukuran dengan ukuran browser tablet dalam modus potret. Menu membentang untuk mengisi sisi kanan dan seluruh menu terlihat. 
Jika kita memilih salah satu perangkat standar dalam menu jendela browser akan mengubah ukuran dengan dimensi perangkat. Hal ini memungkinkan kita untuk melihat bagaimana aplikasi akan terlihat pada perangkat yang dipilih. aplikasi HTML5 biasanya dirancang untuk merespon dengan ukuran layar dari perangkat yang mereka dilihat. kita dapat menggunakan JavaScript dan CSS aturan yang merespon dengan ukuran layar dan mengubah bagaimana aplikasi ditampilkan sehingga tata letak dioptimalkan untuk perangkat.
Klik ikon NetBeans lagi dan pilih Smartphone Landscape di menu NetBeans.
Untuk ukuran smartphone dalam orientasi landscape dan kita dapat melihat bahwa bagian bawah menu tidak terlihat tanpa bergulir. Pada bagian berikutnya kita akan memodifikasi style sheet sehingga dimungkinkan untuk melihat seluruh menu tanpa scrolling pada smartphone dalam tampilan landscape.
Memodifikasi Layout
Kita harus membuat beberapa perubahan kecil untuk elemen halaman sehingga tidak ada bergulir (tanpa scrolling). Perubahan ini harus diterapkan hanya bila ukuran browser adalah ukuran sebuah smartphone atau lebih kecil. Ketika berorientasi pada tampilan lanskap, jendela browser dari smartphone adalah 480 piksel lebar dan 320 pixel tinggi.
Buat Lembar Media Style
Dalam latihan ini kita akan membuat sebuah style sheet baru dan menambahkan aturan media perangkat yang memiliki layar smartphone, kemudian akan menambahkan beberapa Aturan CSS dengan aturan media :

  • Klik kanan node folder css di jendela Proyek dan pilih New> Cascading Style Sheet dalam menu popup.
  • Ketik mycss sebagai File Name. Klik Finish, ketika kita klik Finish style sheet baru akan terbuka di editor.


  • Tambahkan aturan media berikut pada style sheet. Aturan CSS yang kita tambahkan antara kurung untuk aturan ini hanya akan diterapkan ketika dimensi browser adalah 480 piksel lebar atau kurang. Membuat kode template untuk potongan kode yang mungkin sering kita gunakan. Kita dapat membuat kode CSS template di tab Kode Template di kategori Editor jendela Options.

/*My rule for smartphone*/
@media (max-width: 480px) {

}

  • Simpan perubahan.
  • Buka index.html di editor.
  • Menambahkan link berikut pada style sheet antara <head> ...  </head> tag di index.html.

<link type="text/css" rel="stylesheet" href="css/mycss.css">

  • Simpan perubahan.

Kita dapat menggunakan kode selesai pada editor untuk membantu kita menambahkan link ke style sheet.
Menambahkan Aturan CSS
Di browser Chrome, klik ikon NetBeans dan pilih Inspect di NetBeans Mode menu.
Klik gambar di browser. Sebuah elemen disorot ketika ia dipilih dalam mode Periksa. Dalam screenshot ini kita dapat melihat bahwa gambar disorot dengan warna biru.
Dalam IDE kita dapat melihat bahwa aturan CSS dan sifat yang berlaku untuk img tercantum di jendela CSS Styles. Tab Pemilihan jendela CSS Styles memiliki tiga panel yang memberikan rincian tentang elemen yang dipilih.
Upper Pane
Di panel Properties atas jendela kita dapat melihat bahwa enam pasangan properti-nilai yang diterapkan pada elemen img. Tiga dari pasangan (border, float dan margin) yang diterapkan melalui aturan CSS untuk elemen img. Tiga pasangan yang tersisa diterapkan karena unsur img mewarisi sifat-sifat dari pemilih kelas yang diterapkan untuk benda-benda yang mengandung unsur img. Kita dapat dengan jelas melihat struktur DOM di jendela Navigator. Properti border sedang dipilih di panel Properties. dari jendela CSS Styles.
Middle Pane
Di tengah Styles Diterapkan panel kita dapat melihat bahwa properti perbatasan dan nilai yang ditentukan dalam aturan CSS yang mendefinisikan elemen img. Aturan ini terletak pada baris 12 di file basecss.css. Kita dapat mengklik lokasi di panel untuk membuka style sheet dalam editor.
Lower Pane
Panel bawah menampilkan semua properti yang didefinisikan dalam aturan CSS untuk aturan yang dipilih pada panel tengah. Dalam hal ini Kita dapat melihat bahwa aturan untuk img mendefinisikan border, float dan sifat margin-right.
Sedangkan pada versi Netbeans IDE 8.1 tampilannya menjadi :

  • Klik tab Dokumen di jendela CSS Styles.
  • Pilih node css / css.css dan klik tombol Edit Aturan CSS (tombol Ubah CSS Aturan) jendela untuk membuka kotak dialog Rule Mengedit CSS.


  • Ketika kita mengklik OK, IDE menciptakan aturan CSS untuk img di css / mycss.css style sheet antara kurung aturan media yang. Aturan baru sekarang terdaftar di Styles panel Terapan.
  • Klik tab Selection di jendela CSS Styles.
  • kita dapat melihat bahwa ada dua aturan CSS untuk img. Salah satu aturan terletak di mycss.css dan satu terletak di basecss.css.
  • Pilih aturan img baru (didefinisikan dalam mycss.css) di Styles panel Terapan dari jendela CSS Styles.
  • Di panel bawah jendela kita dapat melihat bahwa aturan tidak memiliki property.
  • Klik Add Properti di kolom sebelah kiri di panel bawah jendela CSS Styles dan jenis lebar / width.
  • ketik 90px di kolom sebelah kanan properti lebar dan tekan Kembali pada keyboard kita.


  • Ketika kita mulai mengetik di kolom nilai kita dapat melihat bahwa daftar drop-down menampilkan nilai-nilai umum untuk properti lebar.
  • Ketika kita menekan tombol Kembali gambar di browser secara otomatis diubah ukurannya menjadi lebar 90 pixel. IDE menambahkan properti untuk aturan CSS dalam gaya mycss.css sheet. Dalam editor style sheet sekarang harus berisi aturan berikut.

/*My rule for smartphone*/
@media (max-width: 480px) {

    img {
        width: 90px;
    }

}
HASILNYA pada jendela editor :
Beberapa perubahan tambahan perlu dilakukan untuk style sheet karena menu masih tidak sesuai dalam jendela.

  • Pilih daftar unordered (<ul>) elemen dalam jendela browser.
  • Bila kita memilih elemen kita dapat melihat bahwa <ul> dipilih dalam Browser jendela DOM dan kita dapat melihat gaya yang diterapkan untuk unsur yang di jendela CSS Styles.
Jika kita memilih font-family di jendela CSS Styles kita dapat melihat bahwa properti font-family dan nilai didefinisikan dalam pemilih ui-widget class selector..
Klik di file index.html di editor dan kemudian klik tab Dokumen di jendela CSS Styles.
Memperluas node css / mycss.css di jendela CSS Styles.

  • Klik Edit CSS Rules button (tombol Ubah CSS Aturan) di jendela CSS Styles untuk membuka Edit CSS Rules dialog box
  • Pilih Class sebagai Type Selector dan jenis ui-widget as the Selector.
  • Pilih css / mycss.css sebagai Style Sheet dan (max-width: 480px) sebagai At-Rule. Klik OK.
  • Ketika kita mengklik OK IDE menambahkan aturan baru untuk style sheet mycss.css dan membuka file dalam editor. Jika file tidak terbuka di editor kita dapat mendoblle klik  aturan ui-widget di bawah node css / mycss.css di jendela CSS Styles untuk membuka style sheet. kursor ditempatkan di baris yang berisi aturan dalam style sheet.
  • Tambahkan properti berikut dan nilai (dalam huruf tebal) untuk aturan untuk ui-widget.
.ui-widget {
    font-size: 0.9em;
}
Ketika kita mengubah nilai dalam style sheet halaman otomatis update di jendela browser.
Kita dapat mengetik properti dan nilai dalam editor dan menggunakan kode penyelesaian untuk membantu kita. Atau, kita dapat memilih aturan Ui-widget di panel atas dan klik tombol Add Properti di panel bawah untuk membuka Add Properti kotak dialog.
Klik ikon NetBeans di browser dan pilih Tablet Portrait dalam menu. Ketika jendela browser mengubah ukuran kita dapat melihat bahwa perubahan pada style sheet tidak mempengaruhi layar bila ukuran layar lebih besar dari 480 pixel.
Menggunakan Preprocessor CSS
Selain alat untuk mengedit file CSS standar, IDE juga mendukung menggunakan Sass dan LESS CSS preprosesor   untuk menghasilkan stylesheet untuk aplikasi kita. IDE menyediakan wizard untuk menghasilkan file CSS preprocessor dan untuk menentukan direktori menonton. Jika kita menentukan direktori menyaksikan file CSS akan dihasilkan secara otomatis setiap kali kita mengubah file CSS preprocessor dalam direktori.
Untuk menggunakan preprocessor CSS Anda perlu menginstal perangkat lunak preprocessor dan menentukan lokasi executable. Anda dapat menentukan lokasi eksekusi di jendela Options.
  • Instal CSS software preprocessor pada sistem lokal Anda.
IDE mendukung Sass dan LESS CSS preprosesor. pembelajaran ini menunjukkan cara menggunakan Sass untuk menghasilkan file CSS, tetapi konfigurasi untuk LESS mirip.
  • Expand proyek HTML5 Demo di Files window.
  • Klik kanan folder public_html di jendela Files dan pilih New> Folder di menu popup.
  • Jika Folder bukanlah pilihan dalam menu popup, pilih Lainnya, lalu pilih jenis file Folder dalam kategori lain dari File Wizard New.
  • Jenis SCSS untuk File Name. Klik Finish.
  • Ketika Anda klik Finish IDE menghasilkan folder baru di folder public_html.
  • Klik kanan node folder SCSS di jendela Proyek dan pilih New> Sass Berkas di menu popup.
  • Ketik mysass sebagai File Name.
  • Klik Configure untuk membuka tab CSS Preprocessor di jendela Options.
  • Ketik path ke executable Sass atau klik Browse untuk mencari executable pada sistem lokal Anda. Klik OK untuk menutup jendela Options.
  • Ketika Anda mengklik OK baru Sass berkas sass.scss terbuka di editor.
  • Tambahkan berikut untuk mysass.scss dan menyimpan perubahan.
img {
    margin-right: 20px;
    float:left;
    border: 1px solid;

    @media (max-width: 480px) {
        width: 90px;
    }
}


.ui-widget {
    @media (max-width: 480px) {
        font-size: 0.9em;
        li {
            color: red;
        }
    }
}
Ketika kita menyimpan file preprocessor Sass menghasilkan mysass.css file CSS baru di folder css. Jika kita membuka mysass.css di editor kita dapat melihat aturan yang dihasilkan dari file SCSS.
Secara default, informasi CSS debug dihasilkan dalam mysass.css. Bila kita tidak ingin lagi informasi debug yang dihasilkan kita dapat menonaktifkan generasi di tab CSS Preprocessor di jendela Options.
Bila Anda ingin memodifikasi aturan CSS Anda harus mengedit Sass berkas preprocessor berkas mysass.scss dan bukan gaya mysass.css sheet karena style sheet dibuat ulang setiap kali file preprocessor dimodifikasi dan disimpan.
Untuk dokumentasi tentang sintaks Sass dan fitur lainnya Sass, melihat referensi Sass.
Buka index.html dan membuat perubahan berikut untuk mengubah link ke stylesheet dari css.css ke sass.css. Simpan perubahan.

<link type="text/css" rel="stylesheet" href="css/mysass.css">

Ketika Anda menyimpan file halaman dalam browser secara otomatis diperbarui. Anda dapat melihat bahwa unsur-unsur item daftar sekarang merah.
Ringkasan
Dalam pembelajaran ini, kita belajar bagaimana untuk menambah dan memodifikasi aturan CSS dari sebuah aplikasi HTML5 untuk meningkatkan bagaimana aplikasi ditampilkan pada perangkat dengan ukuran layar yang lebih kecil. kita melihat aplikasi di browser yang ukurannya dengan sebuah smartphone standar. Anda menggunakan Inspect di NetBeans Mode browser Chrome untuk membantu kita menemukan aturan gaya CSS dan kemudian dimodifikasi aturan untuk mengoptimalkan tata letak untuk ukuran layar yang lebih kecil.

Sulit memang kalau belum mencoba, tetapi dengan terjadi banyak error/kesalahan kita belajar memperbaikinya.
Terimakasih pada sumber pembelajaran ini :

0 komentar:

Posting Komentar