Kehadiran di Dunia merupakan suatu fungsi penggerak jalannya kehidupan karena Alam Nyata diciptakan bukan hanya untuk satu cahaya melainkan untuk bermacam-macam cahaya. Pancaran cahaya di wajahmu hanya perantara fisik semata karena wujud aslimu ada di Hatimu.
Dapatkan link
Facebook
X
Pinterest
Email
Aplikasi Lainnya
Kriteria Desain Web
Dunia Internet penuh dengan web yang di gunakan untuk berbagai macam kebutuhan, dari stalking hingga shopping, dari bikin status galau hingga bikin hoax. Semua kebutuhan itu pasti di gunakan untuk mencapai suatu tujuan. Nah kali ini saya akan menuliskan tentang 2 topik bahasan yang mungkin akan membuat anda tertarik untuk membuat web. Bahasan pertam tentang kriteria good desain web dan bad desain web serta bahasan kedua yaitu tentang Analisis situs web pariwisata, company profile, pemerintahan, dan edukasi.
Bahasan Pertama : Good Desain Web dan Bad Desain Web
Sebelum kita membuat sebuah web kita harus tahu desain yang baik untuk di gunakan di web kita karena setiap web memiliki karakteristik yang berbeda tegantung konten/isi yang di sajikan. Oleh karena itu kita mulai saja pembahan pertama ini.
Good Desain Web
Desain Web yang bagus yaitu memenuhi kriteria seperti berikut :
Memiliki interface yang simple
Maksud dari tema website tersampaikan dengan baik
Tampilan lebih casual
Tidak terlalu banyak tombol yang membingungkan
Warna yang selaras dan font yang simple namun menarik
Website http://www.google.com merupakan website yang tidak hanya digunakan untuk mecari informasi namun terdapat fitur-fitur lainnya.
Desain pada pemilihan fitur lain yang disediakan oleh google sangat baik, karena dipermudah dengan gambar, serta keterangan pada ikonnya, sehingga mempermudah pengguna.
Efektif digunakan karena dipermudah dengan gambar dan keterangannya.
Efisien untuk digunakan karena desainnya sederhana.
Keamanannya sangat baik, karena ada beberapa fungsi yang digunakan dengan memasukan kode keamanan.
Mudah digunakan karena dipermudah dengan tampilan yang sederhana dan menarik.
Rancangan desain sangat sederhana, namun memiliki daya pikat yang sangat menarik dan nyaman dalam menggunaknnya.
Desainnya sangat membuat senang pemakai karena mudah digunakan.Pengguna dibuat dipermudah oleh fitur – fitur yang disediakan.
Peletakan tombol tidak rapi pada kotak yang berwarna abu-abu, tulisan yang ada mengesankan masingmasing tulisan dapat di klik menuju ke halaman yang berbeda. ternyata itu
hanya satu link (menuju satu halaman)
Kotak-kotak berwarna merah yang berjumlah 4 buah, bentuknya seperti tombol
yang bisa di klik, padahal hanya image
Ada beberapa tombol yang tidak jelas fungsinya untuk apa karena penamaannya
diatasnya dan berjarak(namanya tidak dekat dengan tombolnya)
Perwarnaannya yang kontras
Ketika mengklik gambar anak kecil (yang tidak jelas maksudnya), ternyata menuju
ke halaman baru yang tidak ada hubungannya dengan gambar tersebut.
Bahasan ke dua : Analisis Situs Web
Analisis ini di gunakan untuk memahami pola struktur, komposisi, dan perancangan desain web yang berbeda beda dan asik. Saya akan menyampaikan hasil Analisis situs web dari saya dan yang saya dapatkan dari berbagai sumber. Situs yang saya Analisis yaitu web pariwisata, web company profile, web pemerintahan, dan web edukasi. Web Pariwisata Situs web perjalanan wisata adalah sebuah situs web pada world wide web yang didedikasikan untuk perjalanan wisata. Situs ini mungkin bisa berfokus pada ulasan perjalanan, rincian harga perjalanan, atau kombinasi dari keduanya. Sekitar tujuh puluh juta konsumen melakukan penelitian rencana perjalanan secara online. Contoh situs web pariwisata Web yang saya pilih untuk di analisa adalah web yang paling pertama muncul di penelusuran google dengan kata pencarian *web pariwisata http://infowisata.semarangkota.go.id/
Web enggunakan Favicon / ikon utama kota semarang
Menggunakan gaya desain pop dan di sertakan Illustrasi Landmak kota semarang
Arah Scroll ke arah bawah dan ada menu yang bilah di klik akan di arahkan ke halaman web yang yang tidak satu tema dengan halaman beranda. Menu terdiri dari :
WebDinas pariwisata
Info Wisata
Download Aplikasi
Seni dan Budaya
Acara Semarang
Galeri
Hubungi Kami
Scan Wisata
Terdapat video biografi kota Semarang berdurasi 17 menit
Terdapat promosi aplikasi kota semarang dengan desain di HP kurang terlihat profesional karena logo yang di tampilkan terlalu besar.
Di bagian bawah terdapat peta google map, alamat, dan sosial media yang di gunakan
Web di rancang pada tahun 2016
Web Company Profile Website company profile merupakan representasi perusahaan yang berisi informasi lengkap mengenai seluk beluk perusahaan dalam bentuk digital. Ini memberi kesempatan bagi siapapun untuk mengakses, dan itu berarti bagus untuk masa depan perusahaan.
Halaman depan yang berisi sekilas informasi tentang perusahaan, slideshow, berita terkini, promosi perusahaan.
Menu navigasi untuk menuju halaman-halaman website bagian dalam.
Gabungan kombinasi design yang mencerminkan citra perusahaan, bisa berupa logo, warna dasar perusahaan, layout dan foto serta gambar ilustrasi.
Profil Perusahaan dengan pembagian konten sebagai berikut:
Ringkasan sejarah perusahaan, operasional perusahaan, visi dan misi perusahaan Daftar produk dan layanan perusahaan Biografi dari pendiri, pemilik serta eksekutif. Terkadang juga memberikan informasi mengenai sistem ketenaga kerjaan dari perusahaan. Halaman "Berita" yang berisikan rilis pers, katalog berita dan link ke artikel atau berita tentang perusahaan. Halaman "Investor" yang menjelaskan para pemegang saham atau para investor perusahaan. Daftar klien, supplier, pencapaian dan penghargaaan perusahaan, proyek yang sedang dikerjakan, partner dan lainnya.
Halaman Informasi Khusus / Special Interest
Daftar lowongan kerja dimana perusahaan menampilkan posisi yang dicari dan bagaimana cara mendaftarnya.
Halaman investor dengan Laporan Tahunan, Rencana Bisnis, Nilai Saham, Pernyataan Finansial, gambaran struktur perusahaan.
Halaman untuk pegawan, supplier, customer, partner strategis, affiliasi, dan lainnya.
Detail kontak, umumnya dengan disertakan contact form / form feedback, dimana pengunjung dapat mengirimkan pesan via email.
Halaman "Term of Use" atau aturan penggunaan dokumen serta penjelasan mengenai kepemilikan hak intelektual dan aturan mengenai penggunaan situs.
Halaman "Privacy Policy" / Kebijakan Privasi dalam penggunaan situs.
Selain hal-hal utama diatas, Website Profil Perusahaan seringkali menampilkan :
Halaman Slide / Splash Page sebagai penyambut pengunjung di halaman depan website.
Fitur pencarian secara internal untuk mencari konten dalam website atau menggunakan Embedded Search Engine untuk mencari konten melalui mesin pencari seperti Google.
Site Map / Struktur halaman website
Blog berisi berita dengan komentar dari pengunjung mengenai perusahaan, produk dan layanannya.
Halaman Komunitas berupa diskusi Forum yang membahas mengenai lingkungan perusahaan, sisi sosial dan kemasyarakatan serta kebijakan yang berdampak bagi publik.
Lokasi toko, berupa fitur untuk mencari toko retail perusahaan yang dekat dengan lokasi kita.
Download atau halaman media untuk mendownload materi berupa file, software, demo perusahaan, materi promosi, dan lainnya.
Kalender untuk menampilkan acara / event perusahaan.
Halaman Link yang menampilkan link-link penting yang berhubungan dengan perusahaan.
Halaman FAQ untuk menjawab pertanyaan yang sering ditanyakan mengenai produk / kebijakan perusahaan
Berikut umumnya penggunakan navigasi dalam Website Profil Perusahaan (dalam bahasa inggris)
Terms of use, legal, user agreement, privacy policy,
People, the team, employees, biographies, executives
About us, contact us, about the company, history
Community, our values, corporate citizenship, standards of conduct
Employment, jobs, careers, join the team, join us
News, in the news, press, publications, brochure
Contact us, send a message
Investors, ownership
Downloads, media, library
Store locator, find a store, find our products, locations
Dengan informasi ini, kami harapkan para pebisnis, pemilik perusahaan serta eksekutif muda dapat mengerti serta mengetahui manfaat memiliki website perusahaan.
Untuk kebutuhan Website Profil Perusahaan, anda dapat memperoleh informasi lebih detail dengan menghubungi Visigraphic.
Visigraphic membuat website secara efektif dan mengerti kebutuhan anda.
Web Pemerintahan/ E-Government Pemerintahan elektronik atau e-government (berasal dari kata Bahasa Inggris electronics government, juga disebut e-gov, digital government, online government atau dalam konteks tertentu transformational government) adalah penggunaan teknologi informasi oleh pemerintah untuk memberikan informasi dan pelayanan bagi warganya, urusan bisnis, serta hal-hal lain yang berkenaan dengan pemerintahan. e-Government dapat diaplikasikan pada legislatif, yudikatif, atau administrasi publik, untuk meningkatkan efisiensi internal, menyampaikan pelayanan publik, atau proses kepemerintahan yang demokratis
Tahapan E-Government
Tahap E-Government menurut Inpres no.3 Tahun 2003 tentang kebijakan dan strategi nasional pengembangan, bahwa penerapan E-Government dapat dilaksanakan melalui tingkatan sebagai berikut :
1. Tingkat persiapan yang meliputi :
a. Pembuatan situs informasi di setiap lembaga;
b. Penyiapan SDM;
c. Penyiapan sarana akses yang mudah misalnya menyediakan sarana Multipurpose Community Center, Wernet, dll;
d. Sosialisasi situs informasi baik untuk internal maupun untuk publik.
2. Tingkat pematangan yang meliputi :
a. Pembuatan situs informasi publik interaktif;
b. Pembuatan antar muka keterhubungan antar lembaga lain.
3. Tingkat pemantapan yang meliputi :
a. Pembuatan situs transaksi pelayanan publik;
b. Pembuatan interoperabilitas aplikasi maupun data dengan lembaga lain.
4. Tingkat pemanfaatan yang meliputi :
a. Pembuatan aplikasi untuk pelayanan yang bersifat G2G (Government To Government), G2B (Government To Business) dan G2C (Government To Citizen) yang terintegrasi.
Model World Bank
Tahapan yang didefinisikan oleh World Bank merupakan model yang paling sederhana. Model ini mengukur derajat interaksi yang diciptakan dari sistem (situs web) yang dimiliki oleh pemerintah. Bentuk-bentuk keterlibatan ini seragam dengan model tahapan klasik yang banyak dikutip tentang evolusi situs web di dunia komersial. Tiga Tahap tersebut:
(a) Publish, (b) Interact, (c) Transact.
a. Publish
Jenis implementasi termudah ini biasanya berskala kecil dan kebanyakan aplikasinya tidak memerlukan sumber daya yang besar dan beragam. Dalam tahap ini yang terjadi adalah sebuah komunikasi satu arah, dimana pemerintah mempublikasikan berbagai data dan informasi yang dimilikinya untuk dapat secara langsung dan bebas diakses oleh masyarakat dan pihak-pihak lain yang berkepentingan melalui internet. Biasanya kanal akses yang dipergunakan adalah komputer atau handphone melalui medium internet, dimana alat-alat tersebut dapat dipergunakan untuk mengakses situs (website) departemen atau divisi terkait dimana kemudian user dapat melakukan browsing (melalui link yang ada) terhadap data atau informasi yang dibutuhkan. Contoh aplikasi pada tahap ini:
Masyarakat dapat membaca dan mendownload berbagai produk UU maupun peraturan yang ditetapkan Pemerintah (DPR/DPRD), eksekutif (presiden/menteri/gubernur/bupati/walikota) maupun yudikatif (MA).
Para pengusaha dapat mengetahui syarat-syarat mendirikan sebuah perusahaan terbatas seperti yang diatur dalam UU dan bagaimana prosedur pendirian harus dilaksanakan;
Peneliti dapat mengakses berbagai data statistik hasil pengkajian berbagai lembaga pemerintahan untuk dipergunakan sebagai data sekunder;
Ibu-ibu dapat memperoleh informasi mengenai cara hidup sehat dari situs Departemen Kesehatan;
Pelajar sekolah menengah dapat mengetahui berbagai program studi yang ditawarkan oleh perguruan tinggi negeri dan akademik milik pemerintah beserta persyaratannya;
Rakyat secara on-line dan real-time dapat mengetahui hasil sementara pemilihan umum melalui situs yang dimiliki KPU; dll.
b. Interact
Pada tahapan ini terjadi komunikasi dua arah antara pemerintah dengan masyarakat yang berkepentingan. Terdapat dua jenis dalam aplikasi dua arah ini. Pertama, bentuk portal dimana situs memberikan fasilitas searching bagi mereka yang ingin mencari informasi secara spesifik (pada tahap publish, user hanya dapat mengikuti link saja). Kedua, pemerintah memberikan kanal, dimana masyarakat dapat melakukan diskusi secara langsung (chatting, tele-conference, web-TV, dll) maupun tidak langsung (melaui e-mail, frequent ask question, newsletter, mailing list, dll). Contoh aplikasinya:
Pasien dapat berkomunikasi gratis dengan dokter melalui keluhan penyakit yang dideritanya melaui web-TV (konsep tele-medicine);
Departemen-departemen di Pemerintahan dapat melakukan wawancara melalui chatting atau e-mail dalam proses perekrutan calon-calon pegawai negeri baru;
Rakyat dapat berdiskusi secara langsung dengan wakil-wakilnya di DPR atau MPR melalui e-mail atau mailing list tertentu;
Perusahaan-perusahaan swasta dapat melakukan tanya jawab mengenai persyaratan tender untuk berbagai proyek yang direncanakan oleh pemerintah;
Dosen perguruan tinggi dapat menanyakan dan mencari informasi spesifik mengeni beasiswa melanjutkan studi di luar negeri yang dikoordinir oleh Direktorat Jenderal Perguruan Tinggi;dll.
c. Transact
Pada tahapan ini sudah terjadi perpindahan (transfer) uang dari pihak lain sebagai sebuah konsekuensi dari diberikannya layanan jasa oleh pemerintah. Aplikasi ini lebih rumit karena harus memiliki sistem keamanan dan perlindungan terhadap pihak-pihak yang bertransaksi. Contoh aplikasi ini:
Masyarakat dapat mengurus permohonan memperoleh KTP baru atau memperpanjangnya melalui internet;
Para wajib pajak dapat melakukan pembayatan pajak individu atau perusahaan secara on-line melalui internet;
Melalui aplikasi e-Procurement, rangkaian proses tender proyek-proyek pemerintah dapat dilakukan secara on-line melalui internet;
Para praktisi bisnis dapat membeli sejumlah hasil riset yang relevan dengan kebutuhannya yang ditawarkan dan dijual oleh BPS melalui internet (download);
Petani yang baru saja melakukan panen dapat langsung menjual padinya ke Badan Urusan Logistik melalui internet;
Para pengusaha perkebunan, pertanian, maupun kehutanan dapat secara aktif melakukan jual beli produknya melalui bursa berjangka dari komputernya masing-masing; dll.
Menurut Nugroho (2007), Tahapan perkembangan implementasi E-Government di Indonesia dibagi menjadi empat :
Web Presence, yaitu memunculkan website daerah di internet. Dalam tahap ini, informasi dasar yang dibutuhkan masyarakat ditampilkan dalam website pemerintah.
Interaction, yaitu web daerah yang menyediakan fasilitas interaksi antara masyarakat dan Pemerintah Daerah. Dalam tahap ini, informasi yang ditampilkan lebih bervariasi, seperti fasilitas download dan komunikasi E-mail dalam website pemerintah.
Transaction, yaitu web daerah yang selain memiliki fasilitas interaksi juga dilengkapi dengan fasilitas transaksi pelayanan publik dari pemerintah.
Transformation, yaitu dalam hal ini pelayanan pemerintah meningkat secara terintegrasi.
4) Tahap Inisiatif E-Government Washtenaw County
Washtenaw County membagi berbagai inisiatif e-Government yang ada menjadi tiga tahapan besar, yaitu: e-Information, e-Commerce dan e-Democracy (Kinney, 2001). Tiga jenis klasifikasi inisiatif ini merupakan tiga fase besar pengembangan e-Government :
1. e-Information
Konsep e-Information terkait dengan obyektif bagaimana agar seluruh stakeholder pemerintah, terutama yang berhubungan dengan pelayanan masyarakat dapat di satu sisi menyediakan dan di sisi lain mengakses informasi secara cepat dan tepat melalui berbagai kanal akses. Kanal akses tersebut dapat merupakan saluran komunikasi tradisional seperti kantor-kantor, telepon, fax, dan lain sebagianya maupun melalui media teknologi informasi seperti internet, call center, web-TV, PDA (Personal Digital Assistant), dan lain-lain.
Program pembangunan aplikasi e-government dalam tahapan ini biasanya dimulai dengan membangun website yang berisi informasi mengenai berbagai hal yang dibutuhkan oleh masyarakat, yang seyogiyanya merupakan tugas pemerintah untuk menyediakannya. Dengan adanya website ini diharapkan masyarakat dapat secara mandiri mencari data dan informasi yang dibutuhkannya, sekaligus memungkinkan terjadinya komunikasi yang interaktif antara mereka dengan pihak pemerintah yang membangun website tersebut. Pada aplikasi yang lebih kompleks, biasanya website tersebut telah menjadi sebuah portal pengetahuan (knowledge portal) yang di dalamnya tidak sekedar berisi data dan informasi yang dibutuhkan masyarakat, namun lebih jauh lagi berisi berbagai pengetahuan penting yang dapat meningkatkan kualitas hidup masyarakat secara langsung maupun tidak langsung.
2. e-Commerce
Pada tahap e-Commerce, konsep pelayanan yang ada tidak hanya berhenti pada pertukaran informasi antara masyarakat dan pemerintahnya, tetapi lebih jauh sudah melibatkan sejumlah proses transaksi pertukaran barang dan/atau jasa. Masyarakat yang selama ini perlu mendatangi kantor-kantor pemerintahan secara fisik untuk berbagai proses perijinan dan berbagai pembayaran, seperti membuat Kartu Tanda Penduduk, Surat Ijin Mengemudi, Penyetoran Pajak Bumi Bangunan, dan lain-lain saat ini tidak perlu berpergian lagi karena semua hal tersebut dapat dilakukan dari rumah dengan memanfaatkan media internet.
3. e-Democracy
Pada tahap e-Democracy, terjadi suatu lingkungan yang kondusif bagi pemerintah, wakil rakyat, partai politik, dan konstituennya untuk saling berkomunikasi, berkolaborasi, dan berkoopreasi melalui sejumlah proses interaksi melalui media internet. Dalam kaitan ini, masyarakat dapat menyampaikan penilaian dan pandangannya terhadap kinerja pemerintah dan menyampaikan pendapatnya secara bebas kepada para wakil rakyat secara online dengan menggunakan fasilitas semacam e-mail, mailing list, discussion/forum, chatting, dan polling. Arah perkembangan akhirnya adalah bagaimana membangun sistem pemilihan umum yang dapat dilakukan secara online. Dengan adanya komunikasi politik yang intensif dan terbuka ini, maka diharapkan akan dapat membantu mempromosikan proses demokrasi di negara yang bersangkutan.
Ketiga fase ini perlu dijalankan prosesnya satu per satu secara sekuensial karena memang satu fase merupakan landasan bagi pengembangan fase berikutnya. Fase terberat tentu saja adalah fase ketiga, dimana dibutuhkan tidak hanya infrastruktur teknologi informasi yang kuat, tetapi juga dibutuhkan perubahan kultur yang besar di masyarakat (suprastruktur).
Web Edukasi / E-Learning 1. Pengertian E-Learning E-Learning adalah pembelajaran yang menggunakan teknologi komunikasi dan informasi (TIK) untuk mentransformasikan proses pembelajaran antara pengajar dan peserta didik.
2. Karakteristik E-Learning
Berpusat pada peserta didik
Bahan pembelajaran up to date
Bahan Pembelajaran bercirikian multimedia
Belajar secara bebas tanpa merasa tertekan
Dapat di desain untuk menyimpan catatan presentasi (umpan balik, pengayaan, dan evaluasi akhir)
3. Fungsi E-Learning (SCS)
Ada 3 (tiga) fungsi pembelajaran elektronik terhadap kegiatan pembelajaran di dalam kelas (Classroom instruction), yaitu sebagai suplemen yang sifatnya pilihan / optional, pelengkap (komplemen), atau pengganti (substitusi) (Siahaan, 2002).
1. S substitusi
Pembelajaran e-learning, dapat menggantikan pembelajaran dikelas pada saat tidak bisa masuk. Jadi dalam pelaksanaan pembelajaran tidak harus bertatap muka secara langsung dalam kelas.
2. C complemen
Sebagai pelengkap, materi belajar yang tidak disampaikan dikelas dapat disampaikan pada saat e-learnng.
3. S Suplemen
Siswa membaca materi tambahan ataupun tidak terserah siswa, karena sifatnya hanya suplemen.
4. Manfaat E-Learning
Manfaat E-learning ditinjau secara umum, yaitu:
Fleksibel. E-learning memberi fleksibilitas dalam memilih waktu dan tempat untuk mengakses perjalanan.
Belajar Mandiri. E-learning memberi kesempatan bagi pembelajar secara mandiri memegang kendali atas keberhasilan belajar.
Efisiensi Biaya. E-learning memberi efisiensi biaya bagi administrasi penyelenggara, efisiensi penyediaan sarana dan fasilitas fisik untuk belajar dan efisiensi biaya bagi pembelajar adalah biaya transportasi dan akomodasi.
Manfaat E-learning Bagi Siswa :
Membangun interaksi ketika peserta didik melakukan diskusi secara online
Akomodasi perbedaan peserta didik, kemudian akses, dan kapan dimana serta
Dapat mengulang materi yang sulit berkali-kali sampai paham, dan dapat dilakukan kapan saja.
Dapat belajar dalam suasana bebas tanpa tekanan, serta tidak malu untuk bertanya.
Mereduksi waktu dan biaya perjalanan
Mendorong siswa menelusuri informasi ke situs-situs pada world wide web
Manfaat E-learning Bagi Lembaga :
a. Praktis, akutabilitas dalam akreditasi
b. Distance education, memudahkan dalam koordinasi dan pelaksanaan bagi sekolah yang dipisah kelas dan tempatnya
c. Virtual school
d. Menghemat biaya sarana dan prasarana belajar. Dalam pengunaannya tidak mengeluarkan banyak biaya, karena dengan pembelajaran e-learning media yang digunakan adalah akun website, jadi mungkin hanya perlu membayar untuk pembuatan website.
e. Menghemat pemeliharaan dan gedung, karena dalam pelaksanaannya guru dan peserta didik tidak harus bertatap muka secara langsung sehingga dapat menghemat gedung.
4. Kriteria yang perlu diperhatikan dalam pemilihan bahan untuk e-learning adalah
Berbasis komputer
memuat informasi baru
menyatakan tujuan pembelajaran dengan jelas
peserta didik dapat mengetahui kemampuannya (pemahamannya) melalui latihan-latihan secara on line. ada umpan balik terhadap hasil penilaian.
Memperhatikan kaidah media pembelajaran
Pengetahuan : 11% melalui pendengaran dan 83% melalui penglihatan, kemampuan daya ingat : 20% dari pendengaran dan 50% melalui penglihatan
Menarik dan berkesan :variasi teks, warna, grafik, animasi, simulasi, audio, video
Efisiensi biaya
5. Perbedaan antara e-learning Model dan Mobile Learning-Model
The Virtual/Online/E- Learning Model 1. Web-based courses (integrated multimedia) 2. Computer Mediated Communication 3. Computer intelligent system
The Mobile Learning (m-Learning or Palm-E Model) 1. Web-based courses (integrated multimedia) 2. Mobile/Handphone Mediated Communication 3. Computer intelligent system
6. Kelebihan dan Kekurangan dalam penggunaan E-Learning
Kelebihan
Pembelajaran lebih hemat dari segi waktu - Siswa dapat meng-copy pelajaran yang guru berikan melalui media flashdisk atau cd. Atau bisa juga guru mengirimkan email silabus materi pekanan yang dipelajari. Secara langsung, guru pun menjadi lebih ringan karena tidak perlu menuliskan materi pada papan tulis.
Pembelajaran lebih hemat dari segi biaya - Siswa tidak lagi diharuskan mempunyai buku pelajaran, karena buku-buku pegangan itu bisa diperoleh dengan mengunggah buku sekolah elektronik yang ada
Pembelajaran membuat siswa aktif - Siswa yang didampingi orangtua menjadi lebih aktif untuk mencari sendiri buku pelajaran yang dibutuhkan, mengerjakan tugas sekolah seperti kliping dengan bantuan internet.
Pembelaran menjadi lebih mudah untuk diserap - artinya ialah menggunakan fasilitas multimedia yang berupa suatu gambar, teks, animasi, suara, dan juga video
Kekurangan
Dibutuh dana khusus untuk pengadaan elektronik baik siswa dan guru pribadi, maupun juga sekolah
Diperlukan SDM guru yang mumpuni dalam hal teknologi
Tidak semua tempat tersedia fasilitas internet ( mungkin hal ini berkaitan dengan masalah tersedianya listrik, telepon, ataupun komputer).
Kompetensi guru dalam menyelenggarakan model pembelajaran e-learning
Ada tiga kompetensi dasar yang harus dimiliki guru untuk menyelenggarakan model pembelajaran e-learning, antara lain :
Kemampuan untuk membuat desain instruksional (instructional design) sesuai dengan kaedah-kaedah paedagogis yang dituangkan dalam rencana pembelelajaran.
Penguasaan TIK dalam pembelajaran yakni pemanfaatan internet sebagai sumber pembelajaran dalam rangka mendapatkan materi ajar yang up to date dan berkualita.
Penguasaan materi pembelajaran (subject metter) sesuai dengan bidang keahlian yang dimiliki
8. Langkah guru dalam pengembangan bahan ajar E-Learning
mengidentifikasi bahan pelajaran yang akan disajikan setiap pertemuan
menyusun kerangka materi pembelajaran yang sesuai dengan tujuan instruksional dan pencapainnya sesuai dengan indikator-indikator yang telah ditetapkan
Membuat bahan/materi pembelajaran dengan tampilan yang menarik mungkin dalam bentuk power point dengan didukung oleh gambar, video dan bahan animasi lainnya agar siswa lebih tertarik dengan materi yang akan dipelajari serta diberikan latihan-latihan sesuai dengan kaedah-kaedah evaluasi pembelajaran sekaligus sebagai bahan evaluasi kemajuan siswa. Bahan pengayaan (additional matter) dapat diberikan melalui link ke situs-situs sumber belajar yang ada di internet agar siswa mudah mendapatkannya.
Setelah bahan tersebut selesai maka secara teknis guru tinggal meng-upload ke situs e-learning yang telah dibuat.
Layout Desain Web
Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.
Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:
Elemen-elemen Layout pada Dokumen Web
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.
Bagaimana kita dapat membuat layout umum seperti yang tampak pada gambar Elemen-elemen Layout pada Dokumen Webdi atas? Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.
Box Model
Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin, padding, dan border dari elemen tersebut.
Semua elemen juga dapat dikategorikan ke dalam dua cara penampilan, yaitu:
Block Level Element merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh dari elemen block: p, h1, dan blockquote.
Inline Level Elements merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline: span, b, i.
Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.
Kode di bawah memperlihatkan contoh perbedaan block level elemen dengan inline level element:
<h1>Elemen H1</h1><p>Elemen p otomatis membuka baris baru dari elemen h1, tetapi elemen
<b>bold</b> ini tidak</p>
Jalankan kode di atas untuk melihat efeknya!
Seperti yang telah dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak, dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border. Kode berikut menunjukkan contoh total luas sebuah elemen, lakukan simpan kode ke dalam sebuah file HTML dan jalankan untuk melihat hasilnya:
sehingga total dari panjang elemen tersebut yaitu 450px, dan total tinggi elemen ialah 250px.
Mari kita lihat properti-properti CSS yang mempengaruhi box model.
Properti Height dan Width
Setiap elemen yang ada dalam HTML memiliki tinggi dan lebar yang standar, yang didapatkan dengan menyesuaikan ukuran konten. Tergantung kepada tujuan pembuatan dokumen, tinggi dan lebar standar yang diberikan oleh elemen mungkin saja tidak tepat digunakan. Properti height dan weight digunakan untuk mengubah tinggi dan lebar standar ketika dibutuhkan.
Berikut adalah contoh pengunaan kedua properti ini:
div{height:20px;width:30px;}
Kedua properti ini hanya dapat digunakan untuk block level element.
Properti Margin dan Padding
Setiap browser memberkan jarak antar elemen secara standar, agar elemen-elemen HTML dapat ditampilkan dengan optimal. Jarak antar elemen ini berbeda-beda, tergantung kepada browser yang mengimplementasikan. Untuk mengubah jarak antar elemen, kita dapat menggunakan properti margin.
Terkadang kita juga ingin memberikan jarak di dalam elemen sendiri, yaitu jarak dari konten elemen ke pembatas (border) elemen. Jarak ini dikenal dengan nama padding. Padding kerap digunakan untuk memberikan warna latar yang baik pada elemen. Berikut adalah contoh kode pengunaan margin dan padding:
div{margin:10px;padding:15px;}
Untuk lebih jelasnya, lihat juga gambar Pengukuran Box Model pada bagain margin dan padding.
Sedikit catatan tambahan, properti padding dan margin dapat juga ditulis dengan singkat. Penulisan hanya dengan satu nilai seperti pada kode di atas akan menyebabkan nilai padding dan margin diimplementasikan pada keempat sisi elemen:
p{margin:40px;}
Mengisikan dua nilai akan mengisikan nilai padding dan margin atas dan bawah pada nilai pertama, serta kiri dan kanan pada nilai kedua, seperti berikut:
p{/* margin-top: 25px margin-bottom: 25px margin-left: 50px; margin-right: 50px; */margin:25px50px;}
Dan seperti yang dapat ditebak, pengisian empat nilai akan dilakukan secara berurutan pada margin dan padding atas, kanan, bawah, dan kiri:
Selain itu, kita juga dapat mengubah hanya satu bagian dari margin ataupun padding dengan menambahkan kata top, right, bottom, dan left setelah margin atau padding seperti berikut:
Border, sebagai pemberi tanda batas elemen memisahkan margin dan padding. Terdapat tiga properti utama yang membentuk sebuah border, yaitu border-width, border-style, dan border-color.
border-width
Seperti namanya, properti ini menentukan ketebalan border, yang diisikan dengan nilai pixel. Contoh kode adalah sebagai berikut:
div{border-width:10px;}
border-style
Menentukan cara penampilan dari border. Pilihan nilai yang dapat diisikan yaitu: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, dan outset. Ingin mengetahui kegunaan masing-masing nilai? Silahkan coba implementasikan elemen tersebut! Jika tidak diisikan, maka secara otomatis nilai yang dipilih ialah none, sehingga border tidak akan tampak.
Contoh kode:
div{border-style:dotted;}
border-color
Seperti namanya, memberikan warna kepada border. Jika warna tidak diberikan, maka border akan menjadi warna hitam. Contoh kode:
div{border-color:red;}
Ketiga properti di atas seringkali digunakan bersamaan, karena ketergantungan antar properti tersebut dalam membuat border yang indah. Penggabungan ketiga properti dapat ditulis dalam properti border seperti berikut:
div{border:1pxsolidred;}
Dan seperti yang dapat dilihat dari kode di atas, tentunya urutan penulisannya ialah border-widthborder-styleborder-color.
Meskipun seluruh elemen pada dasarnya berbentuk kotak, CSS memungkinkan kita untuk menampilkan elemen dengan sedikit variasi, yaitu memberikan sudut bulat kepada elemen.
Contoh Elemen dengan Sudut Bulat
Kita dapat menggunakan properti border-radius untuk membuat efek sudut bulat, seperti pada kode di bawah:
div{border-radius:10px;}
Selain pengisian dengan satu nilai, tentunya border-radius dapat diisikan dengan banyak nilai. Sayangnya, karena kompleksitas properti ini, maka pembahasan lebih jauh mengenai border-radius tidak akan dilakukan. Jika ingin mengetahui detil dari elemen ini, silahkan baca di sini.
Penyusunan Elemen
Pengukuran elemen dengan mengikut sertakan box model hanya merupakan sebagian pengetahuan yang diperlukan untuk membuat layout halaman yang sempurna. Pengetahuan lain yang harus dimengerti juga ialah cara menyusun elemen-elemen yang ada di dalam dokumen. Bagian ini akan membahas bagaimana menyusun elemen-elemen yang ada dalam dokumen, dengan berbagai teknik yang disediakan oleh HTML dan CSS.
Penampungan Elemen
Apa maksud dari “penampung” sebuah elemen? Elemen penampung ialah elemen yang memiliki banyak elemen-elemen lain di dalamnya. Misalnya, pada kode di bawah:
<p>
Ini adalah sebuah paragraf, yang didalamnya terdapat
elemen <b>bold</b>, <i>italic</i>, <em>emphasis</em>,
dan <strong>strong</strong>.
</p>
Pada kode di atas, elemen p merupakan penampung dari elemen b, i, em, dan strong. Bagaimana jika kita tidak ingin menggunakan p untuk menampung seluruh elemen-elemen yang ada? Untuk menampung elemen-elemen secara generik, kita dapat menggunakan elemen div. Elemen div merupakan elemen yang dirancang sebagai penampung dari elemen lainnya, sehingga elemen ini tidak memiliki makna semantik. Kita dapat menggunakan div untuk menampung berbagai elemen, tanpa batasan, misalnya:
Dapat dilihat bagaimana div.wrapper di atas menampung banyak elemen-elemen blok lainnya. Dengan kode HTML di atas, panjang dari elemen-elemen yang ada di dalam div.wrapper tidak akan pernah lebih panjang dibandingkan dengan div.wrapper itu sendiri. Coba jalankan kode di bawah untuk melihat bagaimana elemen-elemen yang ada di dalam div.wrapper tidak dapat melewati ukuran div.wrapper itu sendiri:
<!DOCTYPE html><html><head><title></title><style type="text/css">.wrapper{background:red;color:white;height:600px;width:800px;}</style></head><body><divclass="wrapper"><p>
Proin nec rhoncus, quis, elementum amet parturient augue
sagittis dictumst in dolor scelerisque pid, sociis enim
porttitor et, porta porttitor. Tincidunt egestas ultricies,
scelerisque.
</p><p>
Dis augue, in elementum lundium lectus porttitor duis turpis
dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
integer enim scelerisque ut amet? Nascetur nisi parturient
lundium augue?
</p>
Odio sagittis cursus et ut ridiculus pulvinar habitasse,
elementum et tristique non, nisi porttitor magna! Tristique
adipiscing penatibus sed nunc. Non pulvinar vut porttitor!
Odio nisi porttitor sit tincidunt dictumst, massa rhoncus.
Sociis enim habitasse enim, nunc nascetur, ridiculus, et mus
nascetur, augue ultricies aliquet mus a adipiscing amet?
</p></div><p>
Proin nec rhoncus, quis, elementum amet parturient augue
sagittis dictumst in dolor scelerisque pid, sociis enim
porttitor et, porta porttitor. Tincidunt egestas ultricies,
scelerisque.
</p><p>
Dis augue, in elementum lundium lectus porttitor duis turpis
dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
integer enim scelerisque ut amet? Nascetur nisi parturient
lundium augue?
</p></body></html>
Ketika kode dijalankan maka hasilnya adalah sebagai berikut:
Hasil Eksekusi Kode div.wrapper
Perhatikan bagaimana paragraf yang berada di luar div.wraapper dapat melewati 800px (panjang dari div.wrapper) sementara paragraf yang berada di dalam div.wrapper harus berpindah baris ketika mencapai ujung dari div.wrapper.
Floating Element
Bagaimana dengan penyusunan elemen yang berada di dalam penampung? Salah satu cara untuk mengorganisasikan posisi elemen yang saling bersisian ialah menggunakan properti float. Properti float memungkinkan kita membuat sebuah elemen “mengapung” pada sisi kiri ataupun kanan dari penampung elemen tersebut. Untuk lebih mudahnya, mari kita lihat cara kerja dari elemen float secara langsung!
dan kemudian jalankan. Anda akan dapat melihat bagaimana paragraf-paragraf di dalam div.wrapper menjadi berukuran kecil, dan “terbang” saling bersisian, ke arah kiri. Paragraf yang paling pertama kali dituliskan akan menjadi paragraf yang paling kiri, dan seterusnya.
Float: Left
Dan hal sebaliknya akan terjadi ketika kita mengubah nilai float menjadi right. Paragraf yang paling pertama kali dituliskan menjadi paragraf yang paling kanan, dan seterusnya.
Float: Right
Hal lainnya yang perlu diperhatikan ialah bahwa properti float merusak alur dari halaman. Apa artinya merusak alur dari halaman? Ketika menggunakan properti ini maka elemen-elemen lain akan menjadi terpaksa mengikuti aturan kanan maupun kiri dari float. Misalnya, jika kita menambahkan sebuah h1 setelah paragraf ketiga, sehingga isi dari div.wrapper adalah sebagai berikut:
<divclass="wrapper"><p>
Proin nec rhoncus, quis, elementum amet parturient augue sagittis
dictumst in dolor scelerisque pid, sociis enim porttitor et, porta
porttitor. Tincidunt egestas ultricies, scelerisque.
</p><p>
Dis augue, in elementum lundium lectus porttitor duis turpis dis.
Nisi vel porta turpis arcu nec diam penatibus, et sit integer enim
scelerisque ut amet? Nascetur nisi parturient lundium augue?
</p><p>
Odio sagittis cursus et ut ridiculus pulvinar habitasse, elementum
et tristique non, nisi porttitor magna! Tristique adipiscing
penatibus sed nunc. Non pulvinar vut porttitor! Odio nisi porttitor
sit tincidunt dictumst, massa rhoncus. Sociis enim habitasse enim,
nunc nascetur, ridiculus, et mus nascetur, augue ultricies aliquet
mus a adipiscing amet?
</p><h1>Ini adalah sebuah judul yang terpengaruh float.</h1></div>
Maka elemen h1 tersebut akan secara otomatis mengikuti alur elemen-elemen p sebelumnya, dan mulai dari akhir elemen p terakhir, seperti pada gambar berikut:
Float: Right dengan H1
Bagaimana jika kita ingin memaksa h1 kembali ke alur halaman yang benar? Untuk menghapus segala “jejak” dari floatdan mengembalikan alur halaman ke alur normal, kita dapat menggunakan properti clear. Tambahkan kode CSS berikut:
.wrapperh1{clear:both;}
maka elemen h1 akan secara otomatis membuka baris baru, sesuai dengan alur halaman yang seharusnya.
Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada sidebar dan content, serta clear pada footer. Perlu diingat juga bahwa pada dokumen web yang sebenarnya, properti height jarang digunakan karena tinggi elemen biasanya ditentukan oleh isi dari elemen itu sendiri.
<!DOCTYPE html><html><head><title>Layout Dasar Dokumen Web</title><style type="text/css">body{width:960px;}header,nav,aside,section,footer{background:#14BCE6;border:1pxsolidwhite;color:white;font-size:2em;font-variant:small-caps;text-align:center;}header,nav,footer{width:100%;}header,footer{height:100px;}nav{height:50px;}aside{float:left;height:250px;width:29.5%;}section#content{float:right;height:250px;width:70%;}footer{clear:both;}</style></head><body><header>Header</header><nav>Navigation</nav><aside>Sidebar</aside><sectionid="content">Content</section><footer>Footer</footer></body></html>
Eksekusi kode, dan kita akan dapat melihat hasil eksekusi sebagai berikut:
Hasil Pembuatan Layout Standar Dokumen Web
Cara membuat teks yang ada di dalam elemen-elemen HTML berada di tengah secara vertikal akan dibiarkan untuk menjadi latihan bagi pembaca.
Perhatikan juga bahwa kode yang digunakan untuk membuat tampilan di atas tidak lagi terurut sesuai dengan penulisan kode, seperti pada gambar di bawah:
Salah satu permasalahan utama dari pengunaan float ialah ketika kita menggunakan sebuah elemen kontainer yang hanya menampung elemen float saja. Karena sifat utama dari float yang “menerbangkan” elemen, maka kontainer menjadi dianggap tidak memiliki tinggi, dan elemen-elemen lain akan langsung berada di bawah elemen kontainer tersebut. Penjelasan mengenai bagaimana menyelesaikan masalah ini telah diberikan sebelumnya, pada bagian Floating Element, di mana kita menggunakan kode CSS berikut:
.wrapperh1{clear:both;}
untuk menyelesaikan masalah. Sayangnya, kode di atas tidak menyelesaikan seluruh masalah yang ada, karena jika kita tidak mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka kode di atas tidak akan dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan menggunakan teknik “clear fix”, yang kodenya dapat dilihat sebagai berikut:
Pada prinsipnya, kode di atas membersihkan float dengan clear:both dan penambahan sebuah tabel “dummy” sebelum dan sesudah elemen penampung.
Grid
Sebuah layout yang baik menyusun elemen-elemen halaman dengan rapi dan mudah diprediksi. Kemudahan prediksi penting agar pembaca / pengguna web anda tidak perlu berpikir dalam menggunakan web anda. Ingat, “Don’t Make Me Think” merupakan salah satu prinsip dasar dalam pembuatan antarmuka web dan aplikasi secara general. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web.
Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Untuk lebih mudahnya, perhatikan gambar berikut:
Contoh Pengunaan Grid pada Drupal
Pada gambar Contoh Pengunaan Grid pada Drupal, kita dapat melihat bagaimana situs Drupal dibangun menggunakan 12 buah Grid, yang masing-masing elemennya disusun berdasarkan Grid tersebuut. Elemen feature Drupal, yang berada di paling atas halaman, mengambil ruang 12 Grid, sementara 3 elemen informasi mengenai drupal masing-masing mengambil 4 Grid. Penyusunan seperti ini kerap kali ditemukan dalam banyak website-website lain, dengan ukuran Grid yang berbeda-beda.
Pembuatan Grid
Pembuatan Grid dapat dilakukan dengan mudah, dengan melakukan pembagian terhadap ukuran halaman web yang ingin dibangun dengan jumlah kolom Grid yang diinginkan, dengan memperhitungkan Box Model juga tentunya. Misalkan, jika ingin membuat halaman berukuran 960px memiliki 12 Grid, kita dapat melakukan perhitungan berikut:
lebar_grid = 960 / 12
lebar_grid = 80 px
dan dengan memperkirakan box model, jika ingin setiap kolom memiliki jarak 20px kita dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah dari jarak yang diinginkan (10px), seperti berikut:
konten_grid = 80 - jarak
= 80 - 20
= 60 px
Sehingga ukuran margin kiri dan kanan dari elemen adalah:
margin_kiri_kanan = jarak / 2
= 20 / 2
= 10 px
Dengan perhitungan yang telah dilakukan, maka kita dapat memperkirakan bentuk dari sebuah Grid adalah sebagai berikut:
Perkiraan Bentuk Sebuah Grid
dan dengan mengurutkan kedua belas Grid tersebut, kita bisa mendapatkan sebuah halaman yang berukuran 960px. Tentunya dengan prinsip yang sama kita juga dapat membuat Grid yang merupakan gabungan dari 2 Grid, 3 Grid, sampai 12 Grid!
Grid, dari 1 Grid sampai gabungan 12 Grid
Pembuatan kode Grid menggunakan CSS sendiri sangatlah sederhana. Kita dapat memulai pembuatan kode dengan memberikan nama kelas, untuk setiap ukuran Grid. Misalnya, kita menggunakan nama kelas “coln” untuk setiap kolom Grid, dengan n adalah lebar kolom yang diinginkan. Misalnya, kolom berukuran 2 Grid akan memiliki nama kelas col2, 4 kolom memiliki nama kelas col4, dan seterusnya.
Untuk mengawali, hilangkan padding, margin atas bawah, dan berikan warna serta float kepada seluruh kolom yang ada:
Untuk melihat efeknya, simpan seluruh kode CSS di atas ke dalam sebuah file bernama grid.css, dan jalankan kode HTML berikut:
<!DOCTYPE html><html><head><title>Contoh Grid pada HTML</title><linkrel="stylesheet"href="grid.css"></head><body><divclass="container"><divclass="row"><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div><divclass="col1">1</div></div><divclass="row"><divclass="col2">2</div><divclass="col2">2</div><divclass="col2">2</div><divclass="col2">2</div><divclass="col2">2</div><divclass="col2">2</div></div><divclass="row"><divclass="col3">3</div><divclass="col3">3</div><divclass="col3">3</div><divclass="col3">3</div></div><divclass="row"><divclass="col4">4</div><divclass="col4">4</div><divclass="col4">4</div></div><divclass="row"><divclass="col5">5</div><divclass="col5">5</div><divclass="col2">2</div></div><divclass="row"><divclass="col6">6</div><divclass="col6">6</div></div><divclass="row"><divclass="col7">7</div><divclass="col5">5</div></div><divclass="row"><divclass="col8">8</div><divclass="col4">4</div></div><divclass="row"><divclass="col9">9</div><divclass="col3">3</div></div><divclass="row"><divclass="col10">10</div><divclass="col2">2</div></div><divclass="row"><divclass="col11">11</div><divclass="col1">1</div></div><divclass="row"><divclass="col12">12</div></div></div></body></html>
Pola desain web responsif berkembang dengan pesat, namun ada beberapa pola yang sudah terbukti bekerja dengan baik di desktop dan perangkat seluler.
Kebanyakan layout yang digunakan oleh laman web responsif bisa dikategorikan ke dalam salah satu dari lima pola ini: mostly fluid, column drop, layout shifter, tiny tweaks dan off canvas. Pada beberapa kejadian, laman mungkin menggunakan kombinasi pola, misalnya column drop dan off canvas. Pola-pola ini, yang awalnya diidentifikasi oleh Luke Wroblewski, memberikan titik awal yang solid untuk setiap laman responsif.
Pola
Agar sederhana serta mudah dipahami, masing-masing contoh di bawah ini dibuat dengan markup sungguhan menggunakan flexbox, biasanya dengan tiga materi div yang ditempatkan dalam kontainer primer div. Setiap contoh tersebut ditulis dimulai dari tampilan terkecil terlebih dahulu, dan ditambahkan breakpoint bila diperlukan. Mode layout flexbox didukung dengan baik untuk browser modern, meskipun mungkin masih memerlukan awalan vendor untuk dukungan optimal.
Mostly Fluid
Pola mostly fluid utamanya terdiri dari grid yang cair. Pada layar besar atau medium, biasanya ukurannya tetap sama, hanya menyesuaikan margin pada layar yang lebih lebar.
Pada layar yang lebih kecil, grid yang cair menyebabkan materi utama untuk meng-ubah posisi/geometri, seiring kolom ditumpuk secara vertikal. Salah satu keuntungan utama dari pola ini adalah bahwa pola ini biasanya hanya membutuhkan satu breakpoint antara layar kecil dan layar besar.
Pada tampilan terkecil, masing-masing div materi ditumpuk secara vertikal. Saat lebar layar menyentuh 600 px, materi div utama tetap berukuran width: 100%, sedangkan div sekunder ditampilkan sebagai dua kolom di bawah div utama. Di atas 800px, lebar kontainer div menjadi konstan dan di tengah layar.
.container {
display:-webkit-flex;
display: flex;-webkit-flex-flow: row wrap;
flex-flow: row wrap;}.c1,.c2,.c3,.c4,.c5 {
width:100%;}@media(min-width:600px){.c2,.c3,.c4,.c5 {
width:50%;}}@media(min-width:800px){.c1 {
width:60%;}.c2 {
width:40%;}/* Using 33.33%, doesn't always work right due to rounding */.c3,.c4 {
width:33%;}.c5 {
width:34%;}}@media(min-width:800px){.container {
width:800px;
margin-left:auto;
margin-right:auto;}}
Kolom drop
Untuk layout multi-kolom lebar-penuh, column drop hanya menumpuk kolom secara vertikal saat lebar jendela terlalu sempit untuk materi.
Pada akhirnya proses ini mengakibatkan semua kolom ditumpuk secara vertikal. Memilih breakpoint untuk pola layout ini bergantung pada materi dan berubah untuk setiap desain.
Seperti kebanyakan contoh fluid, materi ditumpuk secara vertikal pada tampilan terkecil, namun ketika layar diluaskan melebihi 600px, materi div primer dan sekunder akan menggunakan lebar maksimal layar. Urutan div diatur menggunakan properti urutan CSS. Pada 800px ketiga materi div ditampilkan, menggunakan lebar layar penuh.
Pola layout shifter adalah pola yang paling responsif, dengan beberapa breakpoint melintasi beberapa lebar layar.
Kunci layout ini adalah tentang cara materi bergerak, bukan meng-ubah posisi/geometri dan menjatuhkannya di bawah kolom lainnya. Oleh karena perbedaan signifikan antara masing-masing breakpoint utama, itu lebih kompleks untuk mempertahankan dan mungkin melibatkan perubahan dalam elemen, bukan hanya layout materi secara keseluruhan.
Contoh yang disederhanakan ini menunjukkan pola layout shifter, pada layar yang lebih kecil materi ditumpuk secara vertikal, namun berubah secara signifikan ketika layar semakin besar, dengan div kiri dan dua div yang ditumpuk di sebelah kanan.
Tiny tweaks hanya melakukan perubahan kecil ke layout, seperti menyesuaikan ukuran font, mengubah ukuran gambar atau memindahkan materi dengan sangat kecil.
Ini bekerja dengan baik pada layout kolom tunggal seperti situs web linear laman tunggal dan artikel yang mengandung banyak teks.
Sesuai dengan namanya, tidak banyak perubahan yang dilakukan dengan contoh ini ketika ukuran layar berubah. Ketika lebar layar bertambah besar, begitu juga ukuran font dan pengisi.
Bukannya menumpuk materi secara vertikal, pola off canvas menempatkan materi yang lebih jarang digunakan—mungkin navigasi atau menu aplikasi—yang tidak terlihat di layar, dan hanya menampilkannya ketika ukuran layar cukup besar, pada layar yang lebih kecil, materi hanya satu klik jauhnya.
Bukannya menumpuk materi secara vertikal, contoh ini menggunakan deklarasi transform: translate(-250px, 0) untuk menyembunyikan dua div materi dari layar. JavaScript digunakan untuk menampilkan div dengan menambahkan kelas terbuka ke elemen untuk membuatnya terlihat. Ketika layar semakin lebar, posisi off-screen akan dihapus dari elemen dan mereka ditampilkan dalam tampilan yang terlihat.
Perhatikan dalam contoh ini, Safari untuk iOS 6 dan Browser Android tidak mendukung fitur flex-flow: row nowrap dari flexbox, jadi kami terpaksa melakukan fallback ke pemosisian absolut.
body {
overflow-x: hidden;}.container {
display: block;}.c1,.c3 {
position: absolute;
width:250px;
height:100%;/*
This is a trick to improve performance on newer versions of Chrome
#perfmatters
*/-webkit-backface-visibility: hidden;
backface-visibility: hidden;-webkit-transition:-webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
z-index:1;}.c1 {/*
Using translate3d as a trick to improve performance on older versions of Chrome
See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
#perfmatters
*/-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);}.c2 {
width:100%;
position: absolute;}.c3 {
left:100%;}.c1.open {-webkit-transform: translate(0,0);
transform: translate(0,0);}.c3.open {-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);}@media(min-width:500px){/* If the screen is wider then 500px, use Flexbox */.container {
display:-webkit-flex;
display: flex;-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;}.c1 {
position: relative;-webkit-transition: none 0s ease-out;
transition: none 0s ease-out;-webkit-transform: translate(0,0);
transform: translate(0,0);}.c2 {
position:static;}}@media(min-width:800px){
body {
overflow-x:auto;}.c3 {
position: relative;
left:auto;-webkit-transition: none 0s ease-out;
transition: none 0s ease-out;-webkit-transform: translate(0,0);
transform: translate(0,0);}}
Dari Bahasan tersebut dapat kita simpulkan bahwa mendesain web di butuhkan pemahaman dan kebijakan dalam tata letak dan komosisi warna yang di butuhkan demi kenyamanan target audiens yang di tuju. Demikian pembahasan kali ini, kita akan membahas hal menarik lainnya di alam nyata ini.
Ikuti terus Blog ini dan ikuti halaman facebook komik saya https://www.facebook.com/AstraKomik untuk update info terbarunya karena siapa tau saya akan bagi-bagi komik gratis hehehe...
Website http://www.google.com merupakan website yang tidak hanya digunakan untuk mecari informasi namun terdapat fitur-fitur lainnya.
Web yang saya pilih untuk di analisa adalah web yang paling pertama muncul di penelusuran google dengan kata pencarian *web pariwisata
Web yang saya pilih untuk di analisa adalah web yang paling pertama muncul di penelusuran google dengan kata pencarian *web pariwisata
Dari Bahasan tersebut dapat kita simpulkan bahwa mendesain web di butuhkan pemahaman dan kebijakan dalam tata letak dan komosisi warna yang di butuhkan demi kenyamanan target audiens yang di tuju. Demikian pembahasan kali ini, kita akan membahas hal menarik lainnya di alam nyata ini.
Komentar
Posting Komentar