Page Loading Effects | Codrops

Satu set kreatif efek loading halaman yang menggunakan animasi SVG dengan Snap.svg. Idenya adalah untuk menunjukkan overlay dengan bentuk animasi yang menarik sedangkan konten baru yang akan dimuat.
Idenya adalah untuk menghidupkan bentuk ke viewport dan menunjukkan indikator aktivitas. Ketika konten baru dimuat, bentuknya akan menghidupkan kembali untuk mengungkapkan halaman. Kami akan menggunakan SVGs animasi dengan Snap.svg untuk efek karena ini memungkinkan kita untuk membuat bentuk yang kompleks dan menarik transisi morphing.  

Cara kita menunjukkan overlay loading dengan mendefinisikan animasi pada jalan yang kita definisikan dalam SVG berikut:

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">

        <path d="M 0,70 80,60 80,80 0,80 0,70"/>

    </svg>

</div><!-- /pageload-overlay -->

Menetapkan pembagian overlay ke posisi tetap, yang mencakup semua halaman, dan menggunakan indikator CSS-hanya memuat dengan styling :: sebelum dan sesudah :: elemen semu divisi.

.pageload-overlay {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    visibility: hidden;

}

.pageload-overlay.show {

    visibility: visible;

}

.pageload-overlay svg {

    position: absolute;

    top: 0;

    left: 0;

}

.pageload-overlay svg path {

    fill: #fff;

}

Kami menggunakan visibilitas di sini karena mereka menggunakan gaya posisi tetap dengan pointer-kejadian tidak ada pada SVG sendiri menyebabkan beberapa masalah pada ponsel, sehingga kita posisi dan memanipulasi div orangtua sebagai gantinya.

Anda mungkin telah memperhatikan bahwa animasi lingkaran juga dilakukan dengan menghidupkan dari satu jalan ke yang lain (tentu saja ada cara lain untuk melakukan hal ini, skala misalnya) tapi kami menggunakan nilai berikut untuk memastikan lingkaran adalah "responsif" tetapi tidak tidak meregang seperti bentuk lain:

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

Menggunakan slice akan mempertahankan aspek rasio tetapi skala gambar sehingga seluruh viewport ditutupi oleh Viewbox.  

Bukan hanya effect ini saja yang ada pada tutorial codrops masih bnyak lagi effect2 yang lebih keren, dan myang masih perlu di pelajariiii..

Terima kasih..
Semoga bermanfaat :)

 

 

Ludei Memamerkan Kekuatan HTML5 Game Development Dengan Simultan Multi-platform Peluncuran iBasket

Ludei , platform pengembangan permainan HTML5 terkemuka di dunia , hari ini mendorong versi HTML5 baru dari hit basket judul iBasket tujuh toko aplikasi utama tanpa perubahan kode tunggal , menunjukkan kekuatan platform untuk menyebarkan kode HTML5 sebagai kinerja tinggi , permainan multi -platform .

Mudahnya Membuat Desain Web Dengan Twitter Bootstrap || layoutit.com

Dengan begitu banyaknya fitur yang dimiliki Twitter Bootstrap ternyata masih ada saja yang kurang puas, manusia memang selalu mencari cara agar semua bisa lebih praktis, walaupun sebenarnya twitter bootstrap sudah lumayan mempersingkat waktu.

Layoutit (http://www.layoutit.com)

Di Website ini  akan semakin mempermudah anda untuk bekerja dengan twitter bootstrap.

Dengan layoutit membuat desigan degan twitter bootstrap terasa semakin mudah, kita tinggal melakukan drag & drop untuk membuat layout yang diinginkan.

Banyak yang sudah mencoba dan ternyata sangat mudah menggunakan layoutit. Kita tinggal buka website http://www.layoutit.com setelah itu tekan tombol Start Now, lalu mulailah dengan melakukan Drag & Drop menu yang ada di kiri dan letakan di kanan sampai desain yang anda inginkan selesai.

Jika sudah selesai tinggal klik tombol Download, anda akan disuguhkan kode yang bisa di download atau sekedar meng-copy code yang sudah di generate.

Sekian Info Menarik ini, semoga semakin memudahkan dalam pembuatan desain website. :)
 

Pengertian PHP dan Fungsi PHP dalam Pemograman Web

Dalam tutorial pertama PHP ini, kita akan membahas pengertian dari PHP, dan apa fungsi PHP dalam pemograman web.

Pengertian PHP

PHP adalah bahasa pemograman web yang digunakan untuk membuat halaman web dinamis (wikipedia). Walaupun pada perkembangannya, PHP saat ini juga dapat digunakan untuk membuat aplikasi selain web, seperti aplikasi desktop.

PHP pertama kali  di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, namun sekarang di ambil oleh oleh The PHP Group.

Pada awalny PHP adalah singkatan dari Personal Home Page, namun dalam perkembangannya, di ubah menjadi PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif.

PHP dirilis dalam lisensi PHP License, yang sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source. Namun penggunaan PHP tetap tidak dikenakan biaya (gratis).

Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia. Dan menurut wikipedia, PHP telah terinstall pada lebih dari 244 juga website dan 2,1 web server hingga saat ini.

Fungsi PHP Dalam Pemograman Web

Dalam membuat halaman web, PHP sebenarnya bukanlah bahasa yang wajib digunakan. Sebuah website sederhana dapat dibuat tanpa menggunakan PHP sama sekali. Anda bisa membuat sebuah website, murni dengan menghubungkan beberapa halaman HTML saja.

Namun jika anda ingin membuat web yang dinamis, bisa menyimpan ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, maka pada saat itulah PHP dibutuhkan.

Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena hal inilah PHP  disebut juga sebagai Scripting Language atau bahasa pemograman script.

Sebagai contoh penggunaan PHP, misalkan anda ingin membuat list dengan no 1 sampai 10, dengan HTML saya bisa membuatnya secara manual, seperti kode berikut:

Halaman HTML tersebut dapat dibuat dengan mudah dengan cara copy-paste tag <li> sebanyak 10 kali dan mengubah sedikit angka-angka no urut di belakangnya. Namun jika yang saya inginkan adalah menambahkan list tersebut menjadi 100 atau 1000 list, cara copy-paste itu akan membuat tangan dan mata menyerah.

Namun jika menggunakan PHP, saya tinggal membuat perulangan for sebanyak 1000 kali sebagai berikut:

Dengan menggunakan kode baris yang bahkan lebih sedikit, saya dapat membuat list tersebut menjadi 1000 kali, bahkan 100.000 kali dengan hanya mengubah sebuah variabel $i.

Namun PHP tidak hanya dapat melakukan pengulangan tersebut, masih banyak hal lain yang bisa anda lakukan dengan PHP, seperti menginput data ke database, menghasilkan gambar, halaman PDF, management cookie dan session, dan hal lainnya.

Sumber : http://www.duniailkom.com

Contoh Mudah Menggunakan jQueryUI

jQuery ini sebenernya keumpulan javaScript yang jlimet dibuat oleh mereka-mereka untuk mempermudah dalam melakukan penulisan untuk java script, seperti misalanya kita membuat sebuah animasi transisi pada layer di HTML, tidak perlu menuliskan dari awal transisinya yang saya yakin sangat panjang, setelah adanya jQuery hal-hal yang panjang tadi dapat dipersingkat kita tinggal menuliskan “.slideDown()”. Apalagi ada turunannya bernama jQueryUI — sangat membantu anda dalam mengindahkan halaman web.

IMPLEMENTASI

Disini saya tidak akan membahas tentang dasar-dasar HTML, CSS dan Java Script ya. Kita langsung mengimplementasikan penggunaan jQuery dan jQueryUI (karena jQueryUI membutuhkan jQuery :P).

ok, saya memiliki sebuah halaman sederhana sebagai berikut:

<html>

<head><title>jQueryUI sample </title></head>

<body>

<h1>Test jQueryUI</h1>

<form action="#" method="post" id="formTest">

Tanggal (dd/mm/yyyy) : <input type="text" id="tanggal" name="tanggal">  <br>

<input type="button" id="Simpan" value="Simpan">

</form>

</body>

</html>

gambar 1:

sekarang kita sudah memiliki halaman tanpa “bumbu”, karena kita menggunakan jQueryUI maka kita harus meng-include-kan file pendukung jQueryUI, seperti jQuery, jQueryUI, dan CSS sehingga kita menambahkan tag seperti berikut setelah tag </head>:

<link rel="Stylesheet" href="pathAnda/page/css/cupertino/jquery-ui-1.8.13.custom.css" type="text/css" />

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-1.5.1.min.js'></script>

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-ui-1.8.13.custom.min.js'></script>

setelah itu tinggal kita gunakan tag-tag jQueryUInya. kita gunakan jQueryUInya seperti javaScript biasa, berikut implementasinya:

<script type="text/javascript">

$(document).ready(function() {

$("#Simpan").button();

});

</script>

gambar 2:

 

perhatikan text #Simpan, itu merupakan ID dari tambolm yang kita buat, anda dapat mengimplementasikannya juga pada tag <div> sesuai dengan kebutuhan. selain ID anda jg dapat menggunakan CLASSnya biasanya pada <div class=”bla-bla”>. setelah itu perhatikan tombol yang kita buat, setidaknya nilai estetikanya lebih daripada sebelumnya. sekarang kita tambahkan lagi date picker untuk textfield tanggal. kita hanya menambahkan :

$("#tanggal").datepicker({

showOn: "button",

buttonImage: 'pathAnda/page/'+"images/calendar.gif",

showAnim:"show",

dateFormat:"dd-mm-yy",

buttonImageOnly:true

});
 

 

 

sekarang di samping text field terdapat gambar kalender yang dapat anda gunakan untuk menentukan tanggal. mudah bukan??? :D

Ini code lengkapnya : 

<html>

<head><title>jQueryUI sample </title></head>

<link rel="Stylesheet" href="pathAnda/page/css/cupertino/jquery-ui-1.8.13.custom-without-tabs.css" type="text/css" />

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-1.5.1.min.js'></script>

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-ui-1.8.13.custom.min.js'></script>

<script type="text/javascript">

$(document).ready(function() {

$("#Simpan").button();

$("#tanggal").datepicker({

showOn: "button",

buttonImage: 'pathAnda/page/'+"images/calendar.gif",

showAnim:"show",

dateFormat:"dd-mm-yy",

buttonImageOnly:true

});

});

</script>

<body>

<h1>Test jQueryUI</h1>

<form action="#" method="post" id="formTest">

Tanggal (dd/mm/yyyy) : <input type="text" id="tanggal" name="tanggal">  <br>

<input type="button" id="Simpan" value="Simpan">

</form>

</body>

</html>

</script>

 

Sumber : http://silverx.wordpress.com/2012/05/09/contoh-mudah-menggunakan-jqueryui/

Pengantar dan Penggunaan jQuery pada Website

Website - jQuery pertama kali dibuat oleh John Resig pada tahun 2005 dan pertama kali dirilis pada tanggal 14 Januari 2006. jQuery merupakan sebuah framework dari Javascript dan cara baru dalam menuliskan kode Javascript. jQuery akan mempercepat dan meringkaskan library Javascript sehingga dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat.

jQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.

Bagaimana Cara Membuatnya ?!

Pertama anda harus menyertakan framework jQuery di file HTML anda silahkan download framework jQuery di sini jQuery Latest.

Sementara anda menunggu file di download, Saya terangkan salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), fungsi load sendiri memiliki tiga parameter yaitu load(url, params, callback).

• url (string), merupakan URL dari file html yang akan di load
• params (object), merupakan pilihan optional yang digunakan untuk mengirim Data ke server
• callback (function), merupakan pilihan optional tentang Fungsi yang akan dijalankan ketika data berhasil di load

Untuk mengimplementasikan fungsi load tersebut, langsung saja praktek dan buat tag HTML seperti dibawah:

<html>

<head>

<title>Fungsi Memuat JQuery</title>

</head>

<body>

    <div>

        <p><a href="fileyangdipanggil.php" class="link"> Klik Di sini </a

        <p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

    </div>

    <div id="HasilJQ"></div>

</body>

</html>

Apabila anda sudah mendownload framework sekarang mari kita hubungkan file jQuery dengan file HTML.

<html>

<head>

<title>Fungsi Memuat JQuery</title>

<script type="text/javascript" src="NamaFileJquery.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

    $("a.link").click(function() {

        var url = $(this).attr("href");

        $("#loadingimg").fadeIn();

        $('#HasilJQ').load(url, function (){

            $('#loadingimg').fadeOut();

        });

    return false;

    });

});

</script>

</head>

<body>

    <div>

        <p><a href="fileyangdipanggil.php" class="link"> Klik Disini </a

        <p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

    </div>

    <div id="HasilJQ"></div>

</body>

</html>

Cuku sript itu yang digunakan untuk memanggil halaman tanpa merefresh content, sangat simple berkat jQuery. dibawah ini akan saya bahas satu persatu bagaimana cara kerja fungsi diatas

sebelum memulai membuat fungsi dalam jQuery maka kita harus terlebih dahulu membuat code sebagai berikut

$(document).ready(function() {

    //tuliskan fungsi disini

    $("a.link").click(function() {

        var url = $(this).attr("href");

        $("#loadingimg").fadeIn();

        $('#HasilJQ').load(url, function (){

            $('#loadingimg').fadeOut();

        });

    return false;

    });

});

$(document).ready(function() berarti kita akan memulai script jQuery dan }); berarti mengakhiri script jQuery, jQuery kemudian akan membaca element html dan attribut yang diberikan, selanjutnya jQuery akan mengeksekusi setiap element dan atrribut bila kita memasukan element dan atribut tersebut kedalam fungsi yang kita buat

("a.link").click(function(); berarti kita memerintahkan jQuery untuk mengeksekusi element a dengan nama atribut class "link" (
var url = $(this).attr("href"); berarti kita mendefinisikan variable url dimana nilai variable didapatkan dari attribut a.link yaitu href ( )

$("#loadingimg").fadeIn(); berarti kita memerintahkan jQuery untuk mengeksekusi element dengan nama attribut id "loadingimg" .fadeIn(); berarti memunculkan sedangkan .fadeOut(); sebaliknya.

('#HasilJQ').load(url); berarti kita memerintahkan jQuery untuk mengeksekusi element dengan nama attribut id "HasilJQ" dimana div dengan id tersebut akan dimanipulasi untuk menampilkan data URL yang telah kita definisikan variabelnya terlebih dahulu

return false; akhiri setiap fungsi dengan return false hal ini untuk mencegah data di refresh oleh browser pada saat element di eksekusi

OK ini merupakan awal dan pengantar jQuery, semoga bermanfaat. Untuk lebih lanjut tentang jQuery silahkan buka situs resminya http://www.jQuery.com

Sumber: http://www.w3function.com/blog/index.php?p=det&idn=32 

Pertemuan keempat matkul Web 2.0 | 8 Maret 2014

Bismillah ....

Pertemuan keempat kali ini, kami di tugaskan untuk memposting apa software yang kami sukai dan kami kuasai,,nah kalo saya sendiri ketika bpk bertanya seperti itu, saya langsung berfikir, klo saya mah semua nya sih biasa2 saja ngak ada yang terlalu saya sukai dan bisanya ya sekedar bisa seperti flash,corell draw,c++,c#,php dan mysql dll. 

Dalam hidup kita sehari-hari, dua hal berbeda yang silih berganti adalah kesenangan dan kesusahan. Bahkan menurut beberapa orang, kalau hidup itu indah karena perbedaan tersebut. Tetapi  dalam  hal ini sesuatu yang saya senangi belum tentu saya kuasai karena kurangnya rasa minat untuk menguasai. begitu juga ketika saya menguasai sesuatu hal kadang2 belum tentu saya sukai. Dan akan menjadi kesusahan ketika seseorang  tidak menyukai dan tidak ingin menguasai hal itu maka akan menjadi sesuatu hal yang membosankan... 

Ketika seseorang bertanya baik itu dosen, temen, atau orang - orang sekitar menanyakan apa bidang yang saya kuasai dan saya sukai , ya saya menjawab saya tidak menguasai satu hal, tapi saya bisa mengerjakan beberapa hal. Mungkin saat ada yang mengasingkan antara orang yang berkeahlian khusus dengan orang yang tidak memiliki keahlian khusus, maka rasa pesimis itu akan terlintas di benak orang yang tidak memiliki keahlian khusus.

Ada keinginan dalam diri saya untuk menguasai sesuatu, tapi bukan salah satu bidang yang telah saya sebutkan di atas. tapi dlm  bidang yang ngak nyambung sama jurusan yang telah saya ambil :D.  Banyak dosen yang menekankan agar kita bisa menguasai 1 bidang tapi harus bener - bener menguasai. tapi lebiih baik lagi apabila kita menguasai banyak bidang karena dapat memudahkan hidup kita..hehehehehehe ..

Semoga ilmu yang udah saya dapat walaupun hanya sekedar bisa dapat bermanfaat buat diri saya dan orang lain..........!

Tutorial WOW Slider

Bismillah ..

Di pertemuan ketiga ini saya akan share bagaimana menginstal wow slider dan cara menggunakan wow slider. Berikut langkah - langkahnya :

1.  Berikut adalah aplikasi WOW Silder 

2.  Pilih I accept the agreemet - Next

3.  Next

4.  Finish :)

Ini  adalah tampilan aplikasi wow slider dan berikut adalah langkah - langkah menggunakan wow slider :

1. Klik tanda plus yang ber warna hijau - Pilih Add Images - Browser bebarapa gambar yang ada di laptop kamu.

2.  Ne tampilan setelah kita Add images ..

3.  Kemudian Klik Images (Pilih template dan effectnya) - Publish

4.  Selesai deh, :)

Gampangkan..

Sekian, semoga bermanfaat :) :)

Framework Kiky Si Kancil

Waktu terus berlalu dan tibalah waktu di mana saatnya kami melanjutkan perkuliahan Matkul Web Thecnology 2.0 tepatnya sabtu 22 februari 2014 jam 10.20 dan berharap semoga hari ini di lancarkan belajarnya dan berkah.. :)

Hari ini adalah pertemuan kedua di matakuliah Web Thecnology 2.0  di pertemuan kali ini kita akan mempelajari tentang framework. Apasih framework itu??...

Framework adalah kerangka kerja. Framework juga dapat diartikan sebagai kumpulanscript (terutama class dan function) yang dapat membantu developer/programmer dalammenangani berbagai masalah-masalah dalam pemrograman seperti koneksi ke database, pemanggilan variabel, file,dll sehingga developer lebih fokus dan lebih cepat membangunaplikasi.

Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan fungsi (libraries),maka seorang programmer tidak perlu lagi membuat fungsi-fungsi (biasanya disebut kumpulanlibrary) dari awal, programmer tinggal memanggil kumpulan library atau fungsi yang sudah ada di dalam framerwork, tentunya cara menggunakan fungsi-fungsi itu sudah ditentukan oleh framework.

Nah Pertemuan kedua ini pak dosen memperkenalkan framework Kiky Si Kancil dan mengajarkan bagaimana cara menggunakan aplikasi tersebut. Aplikasi framework kiky si kancil ini sangat membantu dan mudah di gunakan. Dengan waktu kurang lebih 15 menit, kami sudah menyelesaikan web yang kami buat tanpa harus mengetik ulang codingnya, kerenkan??.. :))

Berikut sekilas tentang framework Kiky Si Kancil 

Cukup sekian cerita perkuliahan hari ini..
Semoga bermanfaat :D :)