Contoh Web yang User Friendly

Nama Kelompok :

Salman ( Saya )

Joshua H

Andri Nivadina

Ade Cecep

 

contoh web yang user friendly

 

Ciri-Ciri Web User Friendly di atas

1. Fast Loading
Menurut Google, idealnya kecepatan loading blog itu di bawah 4 detik! Menurut sebuah penelitian, sebanyak 75 % pengunjung tidak akan kembali lagi ke blog yang loadingnya lebih dari empat detik.

 
2. Memiliki Menu Navigasi & Link yang Baik
 Web harus memiliki navigasi menu atau internal link yang memudahkan pengunjung untuk mengeksplorasi isi web.

Navigasi Menu diletakkan di posisi yang mudah dilihat user, misalnya di atas atau di bawah Header.

Internal link juga harus ada di sidebar blog, seperti Posting Terbau, Posting Terpopuler, dan Random Posts (Optional).

Di bawah tiap postingan "wajib" ada Related Posts untuk memandu pengunjung ke posting sejenis atau setema.

3. Social Share
tersedia tombol Share ke Facebook, Twitter, Google Plus, dll wajib ada di bawah postingan untuk memudahkan user membagikan posting berkualitas di web Anda ke media sosial. Minimal buat kepentingan admin web sendiri untuk share ke sosmednya.

4. Scannable!
Ciri-ciri web yang user friendly yang menyajikan tulisan yang scannable, yakni:

• Ukuran huruf tidak terlalu kecil, juga tidak terlalu besar, antara 13px s.d. 16px, tergantung jenis huruf yang digunakan.
• Jenis huruf yang baik yaitu kelompok Sans-Serif, seperti Arial, Verdana, Tahoma, Helvetica. Hindari jenis huruf yang "indah" namun sulit dibaca di layar monitor.
• Menggunakan alinea/paragraf pendek. Idealnya maksimal 5 baris per alinea.
• Ada jarak antar-alinea. Istilahnya: White Space! Jangan bertumpuk tanpa jarak!
• Align left. Rata kiri, bukan justify. Rata kiri lebih mudah dibaca, terkesan rileks, dan menyisakan banyak ruang untuk istirahat mata. Align Text "Justify" alias rata kiri-kanan kesannya "formal", "kaku", mirip surat resmi, dan gaya media cetak.

5. Tidak Kumuh

Banyak blogger yang terlalu banyak "memainkan" warna di blognya. Akibatnya, blognya terkesan "kumuh". Gunakan template web yang simple, minimalis, bersih, sehingga bikin nyaman user juga menjadikan web Fast Loading.

sumber : http://www.contohblog.net/2015/02/7-ciri-template-blog-user-friendly.html 

Contoh Web yang Tidak User Friendly

Nama Kelompok :

Salman ( Saya )

Joshua H

Andri Nivadina

Ade Cecep

berikut adalah contoh web design yang tidak user friendly :

contoh web yang tidak user friendly

desain web tersebut tidak termasuk user friendly karena penempatan menu bar yang salah, seharusnya menu bar di letakan di bawa heading dari web dan di letakkan secata horizontal bukannya di letakan di kanan blog secara vertikal

selain itu penempatan link terkait juga salah seharusnya link terkait di letakan di kanan atau kiri blog agar terlihat lebih rapih, tulisan dari webnya pun harusnya di justify agar kiri dan kanan terlihat rata bukannya malah di left

selanjutnya tidak tersedianya tombol share ke osial media seperti Facebook, Twitter, Google Plus, dll wajib ada di bawah postingan untuk memudahkan user membagikan posting berkualitas di web Anda ke media sosial. Minimal buat kepentingan admin web sendiri untuk share ke sosmednya.

( Tugas ) HTML

Nama Kelompok :

Salman ( Saya )

Joshua H

Andri Nivadina

Ade Cecep

Pengertian HTML

HTML yang  singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.

HTML sendiri terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table, gambar dan lain- lain yang disebut tag atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.  Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute. Dibawah ini sebagian contoh tag dan attributenya:

<html>
<head>
<title>cuma nyoba aja</title>
</head>
<body bgcolor=”red”>
<font face=”arial black” color=”yellow” size=”5″ >Ngung Xi Yuk Choi</font>
</body>
</html>

Sejarah HTML

HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).

Konsep ini pada tahun 1986 disetujui oleh ISO (International Standard Organization) sebagai standar bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language).

Dasar dan Perkembangan HTML

DASAR HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

• Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
• Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

PERKEMBANGAN HTML

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat.
Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.

• HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).

• HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.

• HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.

• HTML versi 4.0

HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini diambil. HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.

Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .

• HTML 5

HTML 5 merupakan perkembangan html generasi saat ini dan merupakan generasi terakhir dan mungkin akan berkembang lagi mengikuti perkembangan jaman.

Kelebihan dan Kekurangan HTML

Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan. Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia browser.

Kelebihan-kelebihan HTML antara lain:

• Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.
• Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.
• Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).
• Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

Adapun kekurangan dari HTML ini adalah:

• Menghasilkan halaman yang statis, yang saya tahu untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.
• Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
• Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

Sumber :

http://mkr-site.blogspot.com/2012/07/apa-pengertian-html-dan-penggunaannya.html

http://ngemasfizar.ilearning.me/2013/09/05/sejarah-html-dan-kelebihan-serta-kekurangannya/

( Tugas ) Web Science

Nama Kelompok :

- Salman ( Saya )

- Joshua H

- Andri Novadina

- Ade Cecep

Definisi Web Science

Web Science terdiri atas kata “Web” dan kata “Science”, dimana kedua kata tersebut memiliki arti yang berbeda. Berikut merupakan penjelasan dari definisi kedua kata tersebut sehingga dapat membentuk suatu istilah baru yang disebut dengan “Web Science”.

Web atau Website merupakan suatu halaman informasi yang disediakan melalui jalur Internet, sehingga web dapat diakses di mana saja selama web tersebut terhubung atau terkoneksi dengan jaringan internet. Web merupakan alat komunikasi online yang menggunakan media internet dalam pendistribusian atau penyebarannya. Web merupakan kumpulan halaman yang menampilkan informasi dengan berbagai macam jenis. Diantaranya berupa data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik web tersbut bersifat statis maupun bersifat dinamis yang akan membentuk suatu rangkaian yang saling terkait dimana masing-masing rangkaian tersebut dihubungkan dengan jaringan-jaringan halaman yang disebut dengan hyperlink.

Berikutnya pengertian tentang Science. Science atau sains sangat erat hubungannya denga Ilmu Pengetahuan, banyak yang mendefinisikan bahwa sains itu sama dengan Ilmu Pengetahuan. Namun menurut bahasa, sains adalah aktivitas pemecahan masalah yang dilakukan oleh manusia yang dimotivasi oleh rasa ingin tahu tentang dunia sekitar mereka dan keinginan untuk memahami suatu hal atau kejadian tersebut

Sedangkan yang dimaksud dengan Web Science adalah ilmu yang mempelajari tentang efisiensi atau pemanfaatan dari sebuah web, agar dapat dirasakan manfaat dan kegunaannya pada banyak bidang di dalam kehidupan sehari-hari. Di dalam web science kita belajar bagaimana memberdayakan suatu sumber daya virtual sebagai media komunikasi praktis. Dengan tampilan web yang menarik dan abtraktik agar memunculkan minat orang banyak untuk membaca web tersebut.Contoh-contoh nyata yang sudah diterapkan dapat dilihat pada bidang komersil atau bidang ekonomi, bidang sosial dan bidang pendidikan.

Sejarah Web

Penemu situs web adalah Sir Timothy John ¨Tim¨ Berners-Lee, sedangkan situs web yang tersambung dengan jaringan pertamakali muncul pada tahun 1991. Maksud dari Tim ketika merancang situs web adalah untuk memudahkan tukar menukar dan memperbarui informasi pada sesama peneliti di tempat ia bekerja. Pada tanggal 30 April 1993, CERN (tempat dimana Tim bekerja) mengumumkan bahwa WWW dapat digunakan secara gratis oleh publik.

Situs web biasanya ditempatkan pada server web. Sebuah server web umumnya telah dilengkapi dengan perangkat-perangkat lunak khusus untuk menangani pengaturan nama ranah, serta menangani layanan atas protokol HTTP yang disebut sebagai Server HTTP (bahasa Inggris: HTTP Server) seperti Apache HTTP Server, atau Internet Information Services (IIS).

Jenis Teknologi Web 

• Web 1.0 

Merupakan teknologi Web generasi pertama yang merupakan revolusi baru di dunia Internet karena telah mengubah cara kerja dunia industri dan media. Pada dasarnya, Website yang dibangun pada generasi pertama ini secara umum dikembangkan untuk pengaksesan informasi dan memiliki sifat yang sedikit interaktif. sejak tahun 1992 mulai memperkenalkan beragam web browser, serta mendorong pertumbuhan pemanfaatan Web sebagai penyedia informasi. Pada tingkat ini web masih bersifat read only.

Contoh dari jenis web ini, biasanya masih bersifat HTML dan hanya berisi tentang tulisan pribadi.

• Web 2.0 

Web 2.0 Istilah Web 2.0 pertama kalinya diperkenalkan oleh O’Reilly Media pada tahun 2004 sebagai teknologi Web generasi kedua yang mengedepankan kolaborasi dan sharing informasi secara online. Menurut Tim O’Reilly, Web 2.0 dapat didefinisikan sebagai berikut: “Web 2.0 adalah revolusi bisnis di industri komputer yang disebabkan oleh penggunaan internet sebagai platform, dan merupakan suatu percobaan untuk memahami berbagai aturan untuk mencapai keberhasilan pada platform baru tersebut. Web 2.0 mulai menjadi trend pada tahun 1997, ini memperkaya sifat yang read only menjadi read write. Aplikasi berbasis Web semakin banyak diterapkan.

Contoh dari jenis web ini,seperti Wikipedia, Blog, Friendster. Yang sudah mulai mengenal dengan web interaktif social network.

• Web 3.0 

definisi untuk Web 3.0 merupakan rancangan untuk memperkaya Web 2.0, dimana pada Web 2.0 baru memperhatikan pertukaran data antara manusia, pada Web 3.0 pertukaran data antar manusia-mesin, mesin-mesin dan manusia-manusia disempurnakan. Sangat beragam mulai dari pengaksesan broadband secara mobile sampai kepada layanan Web berisikan perangkat lunak bersifat on-demand [Joh07]. Namun, menurut John Markoff, Web 3.0 adalah sekumpulan teknologi yang menawarkan cara baru yang efisien dalam membantu komputer mengorganisasi dan menarik kesimpulan dari data online. Berdasarkan definisi yang dikemukakan tersebut, maka pada dasarnya Semantic Web memiliki tujuan yang sama karena Semantic Web memiliki isi Web yang tidak dapat hanya diekpresikan di dalam bahasa alami yang dimengerti manusia, tetapi juga di dalam bentuk yang dapat dimengerti, diinterpretasi dan digunakan oleh perangkat lunak (software agents) .Teknologi Web 3.0 atau Web Semantik ini secara teknik dalam pencarian di mesin pencari akan mencari hasil yang dicari. Sebagai contoh, di dalam web 2.0 jika ingin mencari informasi di mesin pencari dengan keyword “Kapan Tanggal Kemerdekaan Republik Indonesia” maka hasil yang dikeluarkan adalah web dengan informasi yang mengandung keyword “Kapan Tanggal Kemerdekaan Republik Indonesia“, sedangkan di Web 3.0 ini nanti hasil yang ditampilkan adalah berupa hasil yang dicarinya yaitu “17 Agustus 1945“. Semantic web mempunyai kelebihan mampu untuk membuat aplikasi komputer yang dapat memahami bahasa manusia, bukan bahasa yang baku dari para penguna tetapi juga bahasa yang lebih kompleks. Jadi bahasa yang digunakan tidak lagi bersifat teknis tapi sudah seperti bahasa dalam percakapan sehari-hari , sehingga dapat mempermudah interaksi dan komunikasi dengan mesin atau komputer. Tidak seperti web 2.0 yang terasa sulit untuk melakukan hal-hal diatas, mungkin web 3.0 merupakan sebuah terobosan dalam dunia web untuk mempermudah semua aktivitas. 

Arsitektur Web

Arsitektur Website adalah suatu pendekatan terhadap desain dan perencanaan situs yang, seperti arsitektur itu sendiri, melibatkan teknis, kriteria estetis dan fungsional. Seperti dalam arsitektur tradisional, fokusnya adalah benar pada pengguna dan kebutuhan pengguna. Hal ini memerlukan perhatian khusus pada konten web, rencana bisnis, kegunaan, desain interaksi, informasi dan desain arsitektur web. Untuk optimasi mesin pencari yang efektif perlu memiliki apresiasi tentang bagaimana sebuah situs Web terkait dengan World Wide Web.

Sejak web perencanaan isi, desain dan manajemen datang dalam lingkup metode desain, Vitruvian tradisional tujuan komoditas, keteguhan dan kesenangan dapat memandu arsitektur situs, seperti yang mereka lakukan arsitektur fisik dan disiplin desain lainnya. Website arsitektur akan datang dalam ruang lingkup estetika dan teori kritis dan kecenderungan ini dapat mempercepat dengan munculnya web semantik dan web 2.0. Kedua ide menekankan aspek struktur informasi. Strukturalisme adalah sebuah pendekatan untuk pengetahuan yang telah dipengaruhi sejumlah disiplin akademis termasuk estetika, teori kritis dan postmodernisme. Web 2.0, karena melibatkan user-generated content, mengarahkan perhatian arsitek website untuk aspek-aspek struktur informasi.

Bagian-bagian dari arsitektur web antara lain :

• Hypertext Transfer Protocol (HTTP)
• World Wide Web (WWW)
• Universal Resource Locator (URL)
• Extensible Markup Language (XML)
• Javascript
• Ajax

Sumber :

http://muhammadyusuf-gunadarma.blogspot.com/2013/03/definisi-dan-sejarah-web-science.html

http://andrew-jonathan.blogspot.com/2013/04/definisi-web-science-dan-sejarah.html

http://legaiabay.blogspot.com/2015/03/tugas-web-science.html

Tutorial : Program Hitung Nilai

Pada form pertama terdapat :

- 3 Label        : Berfungsi untuk menampilkan Judul dan Informasi

- 2 GroupBox  : berfungsi  mengelompokkan menu antara input dan perintah

- 3 Textbox   : Berfungsi untuk tempat input nilai dan yang lainnya berfungsi sebagai tempat output setelah data yang di input diolah

- 4 CommandButton : Berfungsi untuk memproses data yang telah di input, merubah warna huruf pada textbox, membersihkan textbox dan keluar dari program.

Langkah selanjutnya adalah memasukkan coding ke dalam form2.Klik 2x tombol Proses dan masukkan peritah sebagai berikut :

Perintah diatas adalah untuk melakukan percabangan pada masing-masing nilai yang diinput. Hasil Percabangan nya antara lain:

- Jika Nilai <= 30 maka Gradenya E dan Tidak Lulus

- Jika Nilai >30 dan <=40 maka Gradenya D dan Tidak Lulus

- Jika Nilai >40dan <=60 maka Gradenya C dan Lulus

- Jika Nilai >60dan <=75 maka Gradenya B dan Lulus

- Jika Nilai >75dan <=100 maka Gradenya A dan Lulus

- Jika Nilai yang diinput tidak sesuai makan akan muncul pesan : “Input Error”, “Coba Lagi!”

 
Memasukkan perintah pada tombol Ubah Warna :

Pada perintah di atas adalah merubah warna output yang telah di input seblumnya. Untuk output nilai text akan berubah warna menjadi biru, HasilNilai berwarna hijau, dan Keterangan berwarna Merah. Mamsukkan perintah pada tombol Bersihkan :

Pada perintah di atas adalah untuk mereset inputan yang telah di proses sehingga kolom inputan menjadi kosong seperti sebelum di input. Bukan hanya text yang kosong tetapi merubah warna dari text menjadi warna standarnya kembali (hitam).Memasukkan peritah pada tombol Keluar:

Perintah diatas adalah perintah untuk menutup program jika dieksekusi.Sepertiya hal nya pada VB untuk merupah nama dari ikon kotrol kita dapat menggunkan menu Properties dan  Object Inspector pada Delphi > Caption > ubah nama yang diinginkan

Setelah selesai membuat project, save project yang telah kita buat dengan memilih Menu File >> Save Project As. Pilih lah nama project yang anda inginkan dan juga juga lokasi penyimpanannya, lalu klik Save.

Selanjutnya , maka tes program tersebut dengan mengklik icon  (Start) di toolbar. Jika tidak ada masalah, maka program tersebut sudah selesai dan bisa digunakan.

Hasil jadinya seperti gambar berikut