all about me,, my name Fadila Ulfa. I cant tell you much about me. u should know me to judge me. you have to walk in my shoes to know my self more than just a name hmm. just watch me enjoy my life.

Tutorial Hijab

HARRIS J - Good Life

RAMADAN KAREEM

Let Me Tell You a Little Bit About Myself

My name Fadila Ulfa, 
hmmm.....

Harris J - Salam Alaikum

MAKALAH

PEMBELAJARAN BERBASIS WEB

“Page Layout”

 

Oleh:

FADILA ULFA        15155005

 

DOSEN PENGAMPU:

Dr. Darmansyah, M.Pd

JURUSAN TEKNOLOGI PENDIDIKAN

PROGRAM PASCASARJANA

UNIVERSITAS NEGERI PADANG

2016 M/1437H

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya penulis dapat menyelesaikan makalah tentang “Page Layout” ini dengan baik meskipun banyak kekurangan didalamnya. Dan juga penulis berterima kasih pada Bapak Dr. Darmansyah, M.Pd selaku Dosen mata kuliah Pembelajaran Berbasis Web yang telah memberikan tugas ini kepada penulis.

Penulis sangat berharap makalah ini dapat berguna dalam rangka menambah wawasan serta pengetahuan kita mengenai Kurikulum. Penulis juga menyadari sepenuhnya bahwa di dalam makalah ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, penulis berharap adanya kritik, saran dan usulan demi perbaikan makalah yang akan penulis buat di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun.

Semoga makalah sederhana ini dapat dipahami bagi siapapun yang membacanya. Sekiranya makalah yang telah disusun ini dapat berguna bagi penulis sendiri maupun orang yang membacanya. Sebelumnya penulis mohon maaf apabila terdapat kesalahan kata-kata yang kurang berkenan dan penulis memohon kritik dan saran yang membangun demi perbaikan di masa depan.

Padang,   Februari 2016

Penulis

A.  PENDAHULUAN

Sebuah Informasi tidak dapat hanya sekedar tampil pada layar. Tapi harus diletakkan dalam konteks dalam bingkai windows dan panel yang terikat secara konsisten dan jelas. Tata letak halaman selalu harus terhubung dengan estetik tertentu. Tetapi baru - baru ini, tata letak halaman pada halaman Web telah untuk mengalami masalah teknis termasuk seberapa besar file-file yang bisa ditampilkan dan berapa ukuran piksel yang bisa digunakan untuk tampilan halaman. Bagaimana mengatur teks, gambar, dan ruang kosong pada halaman untuk membuat area fokus utama. Dalam desain web secara khusus, dan masalah estetika teknis tidak boleh mendesain tata letak halaman tanpa pemahaman.

Sesuai dengan itu, makalah ini akan membahasa masalah teknis yang pertama, dan kemudian isu-isu keindahan merancang tampilan halaman, secara visual, konsisten dan terorganisasi pada halaman web. Bila ada pada sebuah rekomendasi, maka akan dirujuk kepada dua belas web yang sangat popular.

B.  PEMBAHASAN

1.    TECHNICAL CONSIDERATION

Untuk mengatasi masalah teknis, pertama-tama harus menentukan kemungkinan dari perspektif pengunjung pada sebuah Web.

■Bagaimana kecepatan komputer pengunjung dan bagaimana kecepatan koneksi internet, dan seberapa cepat server pemilik web?

■ Apa resolusi tampilan yang digunakan pengunjung pada komputer mereka?

Faktor-faktor ini akan menentukan seberapa besar file yang sesuai dengan ukuran resolusi yang digunakan untuk sebuah situs.

a.    File Size Concerns

Semakin besar ukuran total halaman lagi akan semakin lama untuk menampilkannya. Ingatlah bahwa ukuran file merujuk kepada semua file yang membentuk halaman web, termasuk HTML, CSS eksternal, JavaScript, gambar-gambar eksternal, suara, dan video.

b.   Planning for Limited Files Sizes

Berapa hal yang harus diperhatikan dalam memutuskan ukuram file.

1)   Hilangkan sebagian besar dan CSS JavaScript ke file eksternal. Ini hanya diperlukan untuk pertama kali membuka sebuah sebuah situs.

2)   Gunakan kembali grafis, audio, dan video sama dari halaman sebelumnya.

3)   Jangan gunakan gratuitous, animasi grafis, atau suara.

4)   Gunakan gambar dengan ukuran kecil bila memungkinkan, karena, download gambar kecil lebih cepat dari gambar yang besar

5)   Mengurangi jumlah tombol navigasi.

c.    Display Size and Resolution

Salah satu hal penting dalam memadalah dengan buat web adalah mempertimbangkan ukuran tampilan dan resolusi. Resolusi tampilan diukur dalam pixel.  Ingatlah bahwa sejak piksel lebih besar pada sistem dengan resolusi rendah, tulisan akan menjadi lebih jelas.

 d.   Horizonatal Paga Size

Ukuran layar dan unsur ukuran pada halaman berbeda-beda, tergantung pada sistem. Meskipun demikian, sangat perlu memutuskan untuk menggunakan ukuran standar untuk halaman situs. Jika sebuah halaman yang terlalu besar untuk dibaca, tampilan browser secara otomatis menyediakan sebuah baris gulir horizontal.

Ukuran yang paling umum digunakan adalah 800 piksel, karena alasan-alasan berikut:

■   Ukuran tersebut adalah ukuran yang paling umum untuk ukuran halaman web saat ini.

■   Dapat diakses oleh hampir semua orang.

■   Bisa digunakan oleh pengguna yang ingin memiliki beberapa halaman secara bersamaan.

e.    Pages for Printing.

Jika anda ingin memastikan bahwa pengunjung dapat dengan aman mencetak seluruh halaman pada browser, Anda harus memotong ukuran halaman, menjadi 535 piksel secara horizontal. Mungkin alternatif yang lebih baik untuk menggunakan "Cetak Halaman terpisah" link yang memberikan 535 piksel-lebar halaman versi dioptimalkan untuk pencetakan.

f.     Vertical Page Size

Walaupun pengunjung tidak menyukai penggulir horizontal, tapi penggulir vertikal biasanya diterima dengan baik. Sementara beberapa pengunjung akan lebih suka untuk menggulir melalui satu halaman lama daripada untuk menunggu beberapa halaman terpisah untuk mendownload.

 Ingatlah bahwa setiap kali mencapai sebuah tombol "Berikut", Pengguna harus membuat memilih untuk melanjutkan membaca halaman berikutnya atau tidak. Akibatnya, ada kemungkinan dengan membuat halaman berurutan kebawah pengunjung akan lebih bertahan membaca.

 g.    Tools of Page Layout

Jika yang kita butuhkan adalah teks yang dijalankan dari sisi kiri halaman jauh ke tepi kanan, kita tidak memerlukan tag khusus atau CSS tempat untuk unsur-unsur pada halaman. Alat bantu utama dari tata letak halaman adalah <frame> , <table> , dan <div> dan file flash.

1)   Frames

Frame sangat kontroversial, banyak pengguna yang menolak untuk menggunakannya.

2)   Tables

Tabel adalah dua dimensi grid yang diatur secara berasamaan. Misalnya, kita mungkin sisi table yang tidak dilihat sehingga guruf-huruf didalamnya terlihat sejajar. Gambar berikut menunjukkan dua baris sederhana oleh dua table, dengan baris pertama yang ditetapkan sebagai sebuah baris header.

3)   The <div> Tag

Sebuah <div> tag hanyalah sebuah kotak konten yang berguna sebagai penempatan dan format unit. Misalnya, kita dapat menggulung sebuah gambar dan teks yang menggunakan <div> untuk mengelilingi unit dengan perbatasan umum dan warna latar belakang yang sama, atau di tempat untuk seluruh di lokasi tertentu pada halaman.

4)   Adobe Flash

Adobe flash dapat digunakan untuk membuat sebuah situs bukan hanya untuk animasi saja. Flash digunakan mulai dari gambar, teks, link navigasi.

Keuntungan menggunakan Flash untuk keseluruhan situs:

v Sebuah situs yang menggunkan flash akan menjadi lebih mengagumkan.

v Adobe flash terbaru mencakup Adobe Gerak Fleksibel /ActionScript, bahasa berbasis XML yang memfasilitasi klien dan programming.

v Adobe flash dapat dimuat ulang tanpa perlu me “refresh” seluruh halaman.

v Adobe Flash sangat mudah digunakan untuk membuat sebuah situs dengan ukuran dan menampilkan beberapa media, termasuk perangkat mobile.

Kekurangan situs berbasis Flash:

v Walaupun file Flash pada dasarnya lebih kecil dari JPEG dan GIFs dapat memperlambat download.

v Karena Flash bersifat grafis maka “search” menjadi berbasis HTML, sehingga kata-kata yang ada pada situs ini tidak lagi berbentuk kata; ia hanya piksel diatur ke sebuah independen gambar dari sebuah kata.

v Tombol “back and forward” tidak berfungsi sebagai mana mestinya.

v Halaman “Bookmarking” dalam sebuah situs Flash akan menbookmark seluruh situs, bukan hanya halaman yang diinginkan pengunjung.

2.    AESTHETIC ISSUES

Informasi yang tidak terdisorganisasi, kacau-bilau, terlalu penuh permintaan pengunjung akan dengan cepat menganggu sebuah situs dan bisa diblokir.

Sebaliknya, halaman terorganisasi dengan baik dengan ruang kosong yang memadai memberikan pengunjung sebuah ketertarikan. Jadi sangat diperlukan pilihan yang terstruktur untuk membuat pengunjung nyaman.

a.    Filling the Display Window.

Kita sudah tahu bahwa rancangan yang paling awal adalah resolusi layar. Tetapi kemudian apa yang terjadi ketika sebuah halaman dilihat pada sistem tampilan, baik yang ukurannya lebih besar atau lebih kecil? Ada dua cara kita dapat mengakomodasi situasi ini, yaitu solid layout dan tata liquid layout.

1)      Solid Layout

Dengan tata letak solid, maka desain halaman akan pas dengan ukuran jendela terkecil.

2)   Liquid Layout

Liquid layout berarti secara otomatis memperluas halaman untuk mengisi semua area layar yang tersedia, menggunakan expandable <div> s atau <table> s.

3)   Comparison of Solid versus Liquid Layout

Ada keuntungan untuk kedua solid dan liquid. Dengan solid, Anda dapat merasa yakin halaman yang dibuat akan terlihat sama ketika dibaca oleh pengunjung, terlepas dari ukuran layar dan resolusi. Sebaliknya,liquid merangkul sepenuhnya medium tetapi juga banyak web kurang pengeluaran yang dapat diprediksi dan jauh lebih sulit untuk membuat dan tes. Dari situs 12 web populer hanya IMDb Amazon, menggunakan liquid layout.

b.   Building Block of Page Layout

Sebelum membuat halaman yang menarik, pertama-tama kita harus melihat berbagai berinteraksi elemen yang dapat memanipulasi saat membuat layouts.

1)   Line

Garis-garis bisa tebal atau tipis, ketebalan yang seragam atau bervariasi, solid atau terputus terputus, dll. Baris yang anda pilih dapat menciptakan mood.

Line dapat dibagi, gabungkan, dihias, disusun, dan berisi. Contoh garis tidak kelihatan, dengan gambar header di bagian atas.

Contoh yang menggunakan baris yang lebih jelas, yaitu garis besar putih menggariskan antara petakan.

2)   Shape

Garis – garis baik yang kelihatan dan tidak, pada intinya berisi bentuk. Contoh halaman yang didominasi oleh bentuk.

Cara terbaik untuk mengevaluasi bentuk pada sebuah halaman adalah mengadakan cetakan halaman terbalik. Baik, kata-kata dan cara perincian kecil memudar, meninggalkan kesan secara keseluruhan dari bentuk dominan dan arahan dalam yang kelihatannya pindah.

3)      Color

Warna adalah alat bantu paling kuat kita untuk menyampaikan sikap dan momen. Tak dapat disangkal, skema warna akan memberikan kesan yang berbeda. Misalnya, block grup dapat berupa elemen-elemen yang serupa. Perhatian pada area penting. Ditunjukan dengan warna yang berbeda.

 c.       Visual Harmony

Desain yang efektif akan menjadikan halaman yang mudah digunakan dan terlihat elegen. Terlalu banyak ketenangan maka situs menjadi membosankan. Tapi stimulasi terlalu banyak maka situs visualnya akan kacau-bilau.

Anggap gambar pertama terlihat penuh ketegangan dan kekacauan Sedangkan gambar rumah kedua terkesan penuh ketenangan

Ada banyak ruang kosong pada rumah kedua, sementara rumah pertama telah hampir tidak ada ruang karena terpenuhi dengan terlalu banyak elemen-elemen dekoratif pada dinding.

Dalam ringkasan, rumah yang pertama tidak berusaha membuat kesinambungan bentuk. Sebagai hasil, tampak dibuat secara serampangan dan membuat kita tidak nyaman.

Bagaimana semua ini berkaitan dengan tata letak halaman web? Sama seperti seorang arsitek mencoba untuk mengatur bangunan secara visual, harus menyenangkan dan memastikan sebuah halaman tampak sederhana, rapi, selaras dan diatur. Keseimbangan yang tepat antara stimulasi dan ketenangan akan menciptakan sebuah keselarasan visual yang menyenangkan.

d.      Techniques for Providing Visual Harmony

Mari kita lihat teknik-teknik untuk memanipulasi ciri-ciri visual sebuah halaman untuk membuat keselarasan yang sempurna antara ketenangan dan stimulasi.

1)   Limit the number of elements on page.

Menghilangkan grafis dan teks yang tidak benar-benar memberikan kontribusi untuk tujuan situs tersebut.

2)   Repeat elements.

Dalam tiap halaman, ulangi elemen: bentuk, ukuran, proporsi, warna, atau tata letak yang serupa. Pengulangan ukuran yang sama dan bentuk windows menambahkan ketenangan kepada sebuah halaman.

3)   Repeat a standard page layout throughout the site

Untuk membuat kesinambungan, buatlah halaman kosong yang berisi item berulang, seperti logo dan navigasi dan gunakan template sebagai underlayment untuk halaman paling penting pada situs. Namun demikian, tidak setiap halaman harus mutlak identik.

4)   Align elements

Sebaiknya, sejajarkan setiap tepi luar dari berbagai elemen-elemen pada halaman.

Gambar ketiga bisa dilihat memilihi "spacer" kolom yang memastikan "brathing room" antara elemen pada halaman.

5)   Chunk related information

Pertimbangkan untuk menggunakan beberapa jenis visual jika halaman nampaknya kurangnya menarik. Penambahan Visual tools diantaranya adalah:

v Guanakan heading dan subheadings

v Bulleted atau urutan angka.

v Indentasi.

v Gunakan satu spasi dalam kelompok dan spasi ganda dalam kelompok.

v Gunakan style-font, warna, gaya grafis, dan elemen yang mirip.

v Peraturan vertikal dan horizontal.

v Gunakan pembatas tiap – tiap table, cell, dan <div>.

v Beragam warna latar belakang atau gambar pada tabel, cells, dan <div> s.

v Gunakan sidebars dan link ke jendela pop-up.

6)   Manipulate contrast to create a visual hierarchy

Contrast adalah perbedaan dari berbagai elemen seperti baris atau bentuk dan warna. Contrast adalah alat utama untuk membuat visual dan penekanan, halaman lebih bermakna. Kontras yang berbeda-beda antara elemen tidak hanya membuat halaman yang menarik, tetapi juga menciptakan sebuah hirarki visual yang unsur terpenting sebagai kesan pertama oleh pengguna.

Pada gambar pertama tidak terlihat hirarki, maka akan sulit bagi pengunjung untuk mengambil informasi penting, seperti tanggal dan waktu. Gambar yang kedua, menggunakan ukuran jenis, spasi, kepadatan dan pengarah pelurus untuk menyediakan hierarki visual yang jelas yang membuat informasi yang lebih mudah untuk memahami.

7)   Provide white space

Menyertakan banyak white space (ruang yang tidak terpakai), bahkan jika "ruang putih" sebenarnya merah atau biru. White space memberikan mata kelonggaran. Contoh halaman yang menggunakan ruang putih (dalam hal ini, sebenarnya hitam).

8)   Manipulate visual balance

Keseimbangan Visual merujuk kepada penempatan item pada halaman keseimbangan simetris, dimana elemen-elemen serupa ditempatkan sejajar pada kedua sisi sebuah garis tengah, memberikan keseimbangan secara penuh.

Pada gambar pertama keseimbangan simetris terlihar membosankan. Gambar kedua, keseimbangan simetris berfungsi baik karena halaman menggunakan tekstur, dan grafis, dan variasi lainnya untuk memberikan bantuan "visual."

Gambar ketiga sebagian besar, grafis teraasa berat sebelah yang seharusnya bisa diimbangi dengan beberapa grafis yang lebih kecil pada sisi yang lain.

9)   Choose a composition center

Sama seperti keseimbangan simetris yang dapat membosankan, sehingga dapat menjadi pusat komposisi (wilayah fokus) yang sudah yang berada tengah-tengah halaman.

10)    Employ the golden-mean rectangle

Saat membuat bentuk segi empat, ingatlah bahwa golden-mean rectangle yang paling menyenangkan secara visual. Golden-mean rectangle memiliki perkiraan lebar rasio 1 untuk 1,6.

11)    Round out a “rectangle only” layout

Untuk variety, mungkin bisa mencoba untuk menyertakan beberapa lingkaran atau bentuk yang tidak beraturan:

v Menggunakan Sudut Bulat "corner" pada tabel, cells, atau <div>, atau gambar perbatasan yang tidak beraturan.

v Menggunakan sebuah editor gambar ke sekeliling tepi mengaburkan atau dari suatu gambar, atau latar belakang, memasang kembali ia sepenuhnya dengan transparansi.

v Gunakan grafis pada latar belakang tersirat grid

 e.       Striking a Balance

Terlalu banyak ketenangan akan menjadi monoton. Terlalu banyak kontras akan jadi kacau-bilau. Untuk menghindari masalah desain tersebut. Jika diselesaikan dengan lihai, ketegangan antara ketenangan dan stimulasi dapat menawarkan sebuah keselarasan visual yang menyeimbangkan halaman. Secara umum, yang paling efektif untuk membuat semua elemen-elemen itu pada halaman yang seragam, dan kemudian pertama memilih hanya beberapa hal sama atau serasi agar dapat menambahkan kontras.

f.       Required Page Elements.

Tata letak halaman adalah kerangka kerja visual dari konten dan grafik. Kerangka kerja visual yang harus menyertakan elemen-elemen berikut pada setiap halaman:

v Logo dan identifikasi perusahaan

v Identifikasi halaman atau judul.

v Navigasi utama.

v Navigasi Lokal (jika diperlukan) untuk mendapatkan sub-halaman.

v Footer standar, jika diperlukan.

g.    The Home Page

Homepage memiliki beberapa persyaratan unik sendiri. Karena berfungsi sebagai pintu masuk situs, maka homepage harus bertindak sebagai daftar isi untuk situs, secara keseluruhan, serta menunjukkan bagaimana untuk mengakses konten. Area yang lebih penting dari seharusnya, tentu saja konten, memiliki lebih fokus terkemuka. Homepage tidak seharusnya berisi elemen yang tidak mempunyai relevans ke situs secara keseluruhan.

3.    STORYBOARDING: SKETCHING THE LAYOUT

Pada saat yang sama, kita perlu meletakkan layout awal untuk setiap halaman di atas kertas atau ke dalam format digital, hal ini disebut storyboarding . Tahap pertama dari proses ini adalah membuat sebuah sketsa sederhana, tidak berwarna, tidak ada konten dan tidak ada grafis. Versi coretan ini terkadang disebut wire frame

Berikut ini adalah contoh dari page layout  yang masiih dalam bentuk coretan tangan

Tujuan dari greyscale storyboard adalah untuk menunjukkan tata letak dan underlying grid halaman: Di mana logo, navigasi, judul halaman, konten, dan gambar utama akan berada. Setelah itu baru grafis dan warna termasuk yang disebut color comp.

Untuk membuat comp, beberapa designer menggunakan program pengeditan gambar. Metode – metode tersebut adalah:

a.      Using an Image Editor to Create a Comp.

Secara umum, para perancang seniman yang pertama, para pengembang web kedua, sering lebih suka menyapukan gambar dalam menghasilkan COMP pada gambar-program mengedit, daripada membuat halaman HTML rangka.

b.   Using HTML to Create a Comp

Membangun sebuah comp dalam HTML sering lebih disukai oleh perancang web. Walaupun agak lebih memakan waktu dari menyapukan gambar dalam sebuah program pengeditan gambar. Sebagai manfaat terakhir, menciptakan comp dalam hasil HTML dalam rangka file HTML yang dapat berevolusi ke halaman web produksi.

c.    Page Templates

Cara yang baik, setelah tata letak sketsa, adalah membuat template tata letak untuk situs. Template ini, yang menunjukkan layout dan karakteristik desain lain, adalah bebas konten file HTML yang merupakan dasar untuk setiap halaman baru.

Ada dua cara untuk membangun sebuah template:             

v Membuat dan menyimpan halaman HTML standar yang berisi elemen-elemen tata letak tetapi tidak ada konten, dan salinan secara manual yang halaman kosong ke dalam editor HTML setiap kali anda menambahkan sebuah halaman baru ke situs.

v Gunakan template untuk fitur penciptaan banyak lingkungan pengembangan, seperti Dreamweaver.

C.  PENUTUP

Walaupun berbagai kontras adalah hal yang baik, tapi terlalu banyak suara dan visual akan membuat halaman menjadi membingungkan dan melimpah secara visual. Halaman harus tampak lebih bersih dan terorganisasi dengan baik bahkan jika terdapat banyak elemen di dalamnya. Kita harus tetap menjaga keseimbangan antara menyediakan cukup kontras kepada pengunjung, namun tidak begitu menjadi berlebihan. Pada saat yang sama, kita harus menyediakan kesinambungan antara halaman – halaman.

Sangat penting untuk membuah “Design Checklist” atau daftar periksa dalam membuat Layout. Karena bisa berfungsi untuk meringkas poin utama dan "rules", dan untuk membantu memastikan kita telah dilakukan semua hal yang diperlukan sebelum menyelesaikan situs.

D.  DAFTAR RUJUKAN

Mcintire, Penny. 2008. Visual Design for the Modren Web. Berkeley California: New Rides.