Sejarah WEB Design (Infografis)

Sejarah web design — Tahun 2014 dalam hitungan hari sudah akan berganti dengan tahun 2015, tentu ada semangat baru di tahun 2015 nanti. Pada tahun 2014 ini Internet sudah berusia 25 tahun atau 1/4 Abad, wah sudah sangat dewasa ya Internet. Banyak sejarah terjadi selama kurun waktu 25 tahun tersebut, termasuk didunia web desain.

Pada tulisan kali ini kita akan mencoba melihat teknologi dan tren yang berdampak pada dunia desain web dari tahun ke tahun. Sulit di percaya bahwa hanya dalam 25 tahun yang singkat kehidupan kita telah berevolusi sesuai dengan kemajuan, integrasi dan gabungan kombinasi hardware dansoftware.

Sejarah mungkin dimulai pada saat web masih berupa teks semua dan belum support gambar yaitu sekitar tahun 1993, ada juga munculnya facebook di tahun 2004, youtube ditahun 2006, dan HTML5 pertama kali diajukan sebagai draft pada tahun 2008 atau pada tahun 2011 CSS3 pertama kali di rilis.

Sebagai desainer, kita adalah front liners, orang terdepan, wajah dari apa yang sudah terjadi dan apa yang akan terjadi nanti. Pada infografis dibawah ini kita bisa belajar dari masa lalu kita dan menerapkan keterampilan dan teknik untuk membuat web jadi tempat yang lebih baik unutk masa depan masyarakat. Mari simak..

History of web design

* Klik gambar untuk memperbesar

Infografis diatas dibuat oleh AmeriCommerce yang serius dalam bidang jasa pembuatan e-commerce, semoga apa yang kami share ini berguna untuk anda dan semoga memperkaya pengetahuan anda dibidang web desain.

Salam web design Indonesia.

Tuturial Membuat Infinite Scroll dengan PHP MySQL, Jquery

Infinite Scroll atau halaman website yang ketika di scroll tidak ada batasnya karena dibuat otomatis mengambil (load) data baru untuk ditampilkan dalam satu halaman tersebut sampai data tersebut terunduh semua. Infinite scroll ini menggantikan fungsi paging (penomoran halaman) yang sejak awal sering kita lihat di berbagai website.

Pada tulisan kali ini Tutorial-webdesign.com akan membahas bagaimana cara membuat infinite scroll sederhana untuk website anda, dimana kita akan mencoba membuatnya dalam sebuah halaman gallery sederhana.

Seperti kita ketahui, beberapa website yang menerapkan model infinite scroll ini yaitu Twitter, Facebook, Pinterest, Mashable, dll.

Langkah Awal: Membuat Database SQL

Pertama kita perlu menyiapkan sebuah database, disini sebagai contoh kita hanya membuat satu table untuk menampung nama-nama file gambar yang ingin ditampilkan, nama database nya adalah infinitescroll.

CREATE TABLE `scroll_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `order` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Membuat Halaman Index.php

Dihalaman index.php ini kita tidak terlalu membutuhkan banyak tag HTML, kalau dilihat kita hanya perlu membuat 3 div dengan ID yang berbeda-beda, tentunya dengan struktur HTML standar, letakan div tersebut didalam body.

        <div id='more' >Loading More Content</div>
        <div id='no-more' >No More Content</div>
        <div id='result'></div>

Kita akan menampilkan 2 gambar pada halaman index.php dengan meletakan kode PHP untuk query sql berikut ini pada bagian paling atas index.php

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 2");

$row_object = mysql_query("Select Found_Rows() as rowcount");
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;

Ajax dengan Jquery

Masih di file index.php, kita akan menambahkan Javascript / Ajax dengan framework jquery untuk me-load data lain setalah 2 gambar yang kita load pada awal website dijalankan, script javascript ini di letakan di [head] dan [/head], sebelumnya jangan lupa menyertakan script jquery yang bisa didownload langsung dari website jquery.com

var page = 1;


$(window).scroll(function () {
    $('#more').hide();
    $('#no-more').hide();

    if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        $('#more').css("top","400");
        $('#more').show();
    }
    if($(window).scrollTop() + $(window).height() == $(document).height()) {

        $('#more').hide();
        $('#no-more').hide();

        page++;

        var data = {
            page_num: page
        };

        var actual_count = "<?php echo $actual_row_count; ?>";

        if((page-1)* 2 > actual_count){
            $('#no-more').css("top","400");
            $('#no-more').show();
        }else{
            $.ajax({
                type: "POST",
                url: "data.php",
                data:data,
                success: function(res) {
                    $("#result").append(res);
                    console.log(res);
                }
            });
        }

    }


});

Disitu kita bisa melihat kalau script diatas difungsikan untuk menentukan halaman dengan trigger yaitu ketika halaman sudah mencapai posisi tertentu, dengan ajax kita mengambil data gambar lainnya yang diproses di file data.php, berikut ini script php untuk melakukan query sql untuk mengambil data gambar tersebut

Data.php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 2) . ",12";

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");


$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");



$html = '';

while ($row = mysql_fetch_array($result)) {
    $html .= "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
}


echo $html;
exit;

Script diatas digunakan untuk memproses pengambilan data dari database dan mengembalikan hasil (return a result) berupa data-data gambar yang sudah di susun dengan tag html seperti berikut <div><img></div> untuk ditampilkan di dalam div dengan ID #result.

Mempercantik Dengan CSS

Agar tampilan menjadi lebih cantik kita perlu memoleskan sedikit script CSS, berikut css yang digunakan

#result{
 width: 660px;
 margin: 20px auto;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc;
 overflow: hidden;
}

#result div{
 width: 620px;
 margin: 10px;
 float: left;
}

#result div img{
 width: 640px;
 height: auto;
}
#result div img:hover{
    opacity: .8;
}



#more{
    background: none repeat scroll 0 0 #666;
    color: #fff;
    display: none;
    font-weight: bold;
    left: 1000px;
    padding: 10px;
    position: fixed;
    bottom: 100px;
    z-index: 99999;
}
#no-more{
    background: none repeat scroll 0 0 #666;
    color: #fff;
    display: none;
    font-weight: bold;
    left: 1000px;
    padding: 10px;
    position: fixed;
    bottom: 100px;
    z-index: 99999;
}

Script css diatas digunakan untuk menempatkan tampilan loading di kanan bawah saat kita melakukan scroll pada halaman website.

HASIL

DEMO | DOWNLOAD

Untuk hasil yang lebih optimal, mungkin untuk desain front-end nya bisa digabungkan dengan masonry atau isotop.

Sekian tutorial membuat infinite scroll dengan menggunakan PHP, MySQL, dan Jquery ini, semoga berguna untuk anda yang sedang ingin mengimplementasikan model desain serupa. Salam web design indonesia

1. 
   

Pengertian JavaScript

Pengertian Javascript

JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan di sisi Client.

JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan di sisi Client

Misalnya, jam ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer. JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer daripada bahasa yang memerlukan server untuk melakukan pengolahan.

Sejarah Javascript

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.[6] JavaScript adalah bahasa yang digunakan untuk AJAX

Beberapa contoh menggunakan adalah:

• berputar atau bergulir teks.
• membuat bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh, dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang “menyampaikan kepada alamat yang berbeda”, bagian ekstra dengan kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat terlihat.
• drop down menu.
• mengambil informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
• memvalidasi input pengguna pada formulir.
• perhitungan tanpa perlu kembali ke server.
• menentukan jenis browser.

jelas beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari bot.

Bahasa server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi halaman sebelum loading, meskipun ada beberapa kasus Server-JavaScript (SJS). Tidak semua browser memiliki juru JavaScript (seperti browser hanya teks Lynx), atau menjalankan versi terbaru. Selain itu, beberapa pengguna mematikan kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus menggunakan JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya. Hal ini sering disebut sebagai degradasi anggun (yaitu jika pengguna telah dimatikan JavaScript, halaman harus selalu masih beban, menyajikan informasi yang sama tetapi tanpa fungsi tambahan yang disediakan oleh JavaScript.)

Hubungan ke Java

Meskipun nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari sintaks antara dua bahasa. Bahkan mereka dikembangkan oleh dua perusahaan yang sama sekali berbeda, dengan tujuan dan pemikiran yang berbeda: Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java. Hanya saja kedua nama tersebut membingungkan bagi orang yang belum tau.

JavaScript dapat diinterpretasikan oleh browser yang paling  langsung dan cepat, sementara Java memerlukan terpisah “Java Virtual Machine” harus dimulai sebelum menjalankan. JavaScript dan Java sama-sama menggunakan sintaks yang mirip (berdasarkan bahasa C) tetapi perintah yang digunakan banyak yang sangat berbeda. Ada juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan deklarasi semua variabel dan jenis mereka (misalnya integer, string atau boolean). Sebaliknya, Javascript adalah “longgar” bahasa diketik, memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya.

Sebagai contoh, membandingkan dua metode penulisan ke tampilan (halaman).
Di Java, untuk menulis “Halo dunia!”, Kode akan membaca: System.out.println(“Halo dunia!”);
Sedangkan dalam JavaScript (di browser), akan berkata: document.write (“Halo dunia! “);

Untuk lebih jelasnya dibawah contoh penulisan javascript,

Penulisan JavaScript

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag

<script type=”teks/javascript”>.
<script type=”teks/javascript”>
alert(“Halo Dunia!”);
</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type=”teks/javascript” src=”alamat.js”>
</script>

Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).

<html>
<head>
<script type=”teks/javascript”>
…
</script>
</head>
</html>

Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>
<script type=”teks/javascript”>
…
</script>
</body>
</html>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js document.write(“pesan ini tampil ketika halaman diload”);
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman HTML-nya.

<html>
<head>
</head>
<body>
<script src=”xxx.js”>
</script>
<p>Script di atas berada di berkas “xx.js” (eksternal) </p>
</body>
</html>

Itu yang dapat saya sampaikan setelah membaca dari beberap