Persiapan Yang Harus Dilakukan Sebelum Membuat Sebuah Website

Persiapan Yang Harus Dilakukan Sebelum Membuat Sebuah Website

HTML Other PHP

Membuat sebuah website itu gampang-gampang susah karena banyak tahapan-tahapan agar website tersebut bisa berjalan dengan sesuai keinginan kita.

Saya sudah sering membuat sebuah website dan saya selalu memperbaiki langkah-langkah saya sebelum membuat sebuah website. Karena persiapan awal itu sangat berpengaruh dalam proses pembuatannya.

Agar anda ketika membuat website sesuai dengan keinginan anda maka saya akan membagikan tentang artikel Persiapan Yang Dilakukan Sebelum Membuat Sebuah Website.

1. Tujuan pembuatan website

Apa tujuan anda ingin membuat sebuah website? Untuk mendapatkan pelanggan atau untuk mengkampanyekan perusahaan anda tersebut?
Apapun tujuan anda membuat website anda harus menjabarkan nya dengan terperinci. Biasanya website dibuat dengan lebih dari satu tujuan. Tapi meskipun anda mempunyai banyak tujuan tapi untuk poin terpenting nya harus ditekankan dari segi desain dan konten.

2. Target pengunjung website anda

Sebelum anda menentukan target pengunjung anda, sebaiknya anda harus tahu terlebih dahulu karakteristik target pelanggan anda. Apakah pelanggan anda orang awam, menengah ataupun para profesional.

3. Menentukan Konten yang mau dibuat pada website

Sebuah website harus menyediakan sebuah konten yang mengubah pengunjung menjadi pembeli jika website yang anda buat adalah toko online atau market place.
Jika website yang anda buat hanya sebuah company profile mungkin konten utama atau deskripsi dari perusahaan anda hanya dilihat sesekali oleh pengunjung website anda. Agar konten utama yang anda buat sering dilihat oleh pengunjung sebaiknya anda juga membuat halaman untuk artikel / blog agar website anda mempunyai banyak pengunjung dan tidak hilang dari google.

4. Hal apa yang perlu dilakukan oleh pengunjung website anda

Apa yang anda inginkan untuk pengunjung website anda lakukan di website anda? Membeli produk anda? Mendaftarkan akun? Membagikan konten ke social media? Apapun yang anda inginkan, pastinya hal tersebut sangat berkaitan dengan tujuan di buatnya website tersebut.


5. Teknologi / Bahasa pemrograman apa yang akan anda gunakan

Majunya perkembangan teknologi memaksa anda agar tidak tertinggal zaman. Mungkin anda juga sudah tahu website sekarang bisa di akses juga menggunakan perangkat mobile. Jadi website yang anda buat juga minimal harus sudah mengakomodasi konsep tersebut.
Untuk bahasa pemrogramannya anda bisa menggunakan PHP, Ruby, Phyton dan lain-lain tergantung kebutuhan dari clientnya itu sendiri. Sekarang juga sudah banyak yang menggunakan CMS (Content Management System) untuk mempermudah anda dalam membuat sebuah website.

6. Strategi marketing yang akan anda gunakan

Website yang anda buat tidak bisa mendapatkan pengunjung dengan sendirinya. Banyak strategi online yang anda bisa lakukan agar website anda banyak dikunjungi pengunjung. Diantaranya melalui advertising di google namanya adalah google adwords. Ada cara yang gratis juga yaitu dengan membuat banyak artikel yang dibutuhkan oleh orang-orang. Tapi cara ini butuh waktu yang lama jika dibandingkan dengan memasang iklan.

7. Pembentukan tim untuk mengurus website

Agar website anda terurus sebaiknya anda harus membentuk tim-tim untuk mengurus website tersebut. Jika anda membuat website portal berarti minimal anda harus mempunyai tim direksi untuk mencari artikel dan tim copy writer untuk menulis artikel.

8. Menentukan budget pembuatan website

Untuk masalah budget tergantung dari tingkat kesulitan. Jika anda mendapatkan project yang besar dan tingkat kesulitannya pun tinggi. Anda jangan malu-malu untuk memberikan penawaran yang tinggi juga karena dari tingkat kesulitannya juga butuh banyak para programmer yang sudah ahli dibidangnya untuk membuat project website tersebut.

Demikianlah artikel tentang Persiapan Yang Harus Dilakukan Sebelum Membuat Sebuah Website mudah-mudahan bisa bermanfaat bagi kita semua

Terima kasih telah mengunjungi blog Dewa Coding 21

Unknown Pada 16:04:00 Komentar

Free CSS HTML Slider

Free CSS HTML Slider

HTML

Slider adalah informasi yang berjalan (sliding) di website anda. Biasanya informasi yang ditempatkan di slider adalah informasi inti dari sebuah website tersebut. Jadi user akan lebih mudah memahami isi dari website anda.

Dengan informasi singkat, jelas dan mudah dimengerti tentu akan memudahkan customer untuk memahami produk atau service apa yang anda tawarkan dalam waktu yang relatif singkat. Jadi anda tunggu apa lagi untuk membuat website menggunakan slider karena banyak sekali manfaatnya.

Maka dari itu karna kebutuhan para front end developer sangat banyak untuk kebutuhan dalam men design sebuah website maka kita memberikan source code secara gratis untuk membuat slider dengan menggunakan HTML dan CSS. berikut adalah macam-macam slider nya

1. Fade In Slider
Fade In Slider adalah slider yang dibuat dengan cara menggunakan fitur opacity yah mungkin slider ini terlihat biasa saja tapi tetap banyak juga yang memakai slider seperti ini



Untuk file dan source codenya bisa anda download disini/here

2. Slide In Left Slider
Slide In Left Slider adalah slider yang dibuat dengan cara menggunakan fitur left pada css.



Untuk file dan source codenya bisa anda download disini/here

3. Zoom In Slider
Zoom In Slider adalah slider yang dibuat dengan cara menggunakan fitur transform scale pada css.



Untuk file dan source codenya bisa anda download disini/here

Demikian lah slider slider yang kita telah bagikan berikut source codenya, semoga bermanfaat yah postingan kita kali ini.

Terima kasih telah mengunjungi blog Dewa Coding 21 :)

Unknown Pada 15:08:00 Komentar

Tutorial / Cara membuat animasi loading pada website

Tutorial / Cara membuat animasi loading pada website

HTML

Kita sering menemukan sebuah website yang memiliki salah satu fitur ini yaitu terdapat animasi loading sebelum menampilkan tampilan websitenya. Mungkin anda-anda sekalian pun sering bertanya apa fungsi dari website-website yang mempunyai animasi loading bukan?

Sebenarnya animasi loading ini hanya untuk mempercantik sebuah tampilan website dan membuat si user atau orang yang melihat website anda tidak kesal menunggu karena disuguhkan dengan tampilan animasi loading. Dan saya yakin anda pun pasti lebih menyukai website yang terdapat animasi loadingnya dari pada yang tidak ada. Betul bukan?

Baik, kita langsung saja ke tutorialnya tentang Cara membuat animasi loading pada website. untuk demonya anda bisa lihat diatas.

Langkah pertama silahkan anda buat file index.html, dan isikan kode berikut.

<html>
<head>
    <link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
    <div id="preloader">
<div id="loading"></div>
    </div>
   
<div class='content'>
<img src='logo.png' />
</div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
$(window).load(function() {
$("#content").fadeOut();
$("#preloader").delay(500).fadeOut("slow");
})
    </script>
</body>
</html>

Setelah anda selesai membuat dan memindahkan kode diatas kedalam file index.html, maka langkah selanjutnya adalah membuat file style.css yang berfungsi untuk mempercantik atau membuat indah animasi loading tersebut. Dan silahkan masukan kode berikut.

body {

padding: 0;

margin: 0;

background-image: url('http://michaelleadbetter.com.au/portfolio/Landscape-Photography-Brisbane.jpg');

background-repeat:no-repeat;

background-position:center;

background-size: 100% 100%;

}

#preloader {

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

background-color:#fff; 

z-index:99; 

}

#loading {

width:200px;

height:200px;

position:absolute;

top: 40%;

left:50%;

background-image:url(http://content.iress.co.uk/hubfs/wemakeithappen/img/Preloader.gif); 

background-repeat:no-repeat;

background-position:center;

margin:-100px 0 0 -100px; 

}

.content {

width: 500px;

margin: 10px auto;

}

.content img {

width: 500px;

margin: 100px auto;

}

Selesai sudah tutorial kali ini, cukup mudah bukan cara membuat animasi loading pada website. 

Untuk source code / semua file nya anda bisa download disini / here

Terima kasih telah mengunjungi blog Dewa Coding 21 dan jangan lupa berkomentar yah :)

Unknown Pada 12:40:00 Komentar

Tutorial / Cara mengambil data tanpa reload dengan Ajax

Tutorial / Cara mengambil data tanpa reload dengan Ajax

AJAX HTML

Dapat dikatakan, kata kunci dari Ajax adalah pemrosesan tanpa reload (refresh). Artinya, pemrosesan yang lazimnya melibatkan reloading dapat dilakukan tanpa perlu me-reload halama web. Konsep pemrosesan tanpa reload inilah yang merupakan salah satu fitur menarik untuk diimplementasikan.

Sekedar ilustrasi, bagian ini akan menjelaskan pengambilan data dari file kemudian menampilkannya ke browser dengan tanpa reloading. Berikut ini kode Javascript yang kita beri nama test.js

var xmlHttp = createXmlHttpRequest();
var obj = '';

function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}

function getData(source, divID) {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
obj = divID;
xmlHttp.open("GET", source);
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}

function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(obj).innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}

Langkah selanjutnya adalah mengimplementasikan kode di atas pada dokumen HTML

<html>
<head>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<form>
<input type='button' value='Get Data' onclick="getData('test.txt', 'target')">
</form>

<!-- untuk menampilkan hasil -->
<div id='target'>
<p>Data Akan ditampilkan disini</p>
</div>
</body>

Perlu sekali diperhatikan, keberadaan elemen <div> dengan atribut id bernilai target memiliki arti penting guna mendukung keberhasilan aplikasi, Singkatnya, di elemen inilah nantinya hasil request atau respon dari server akan kita letakkan. Sebagai tambahan, sebelum anda menguji kode di atas, pastikan anda sudah menyiapkan file bernama test.txt di direktori yang sama

Untuk file lengkap atau source code nya berikut design dari tampilannya bisa anda download Disini

Terima kasih telah berkunjung ke blog Dewa Coding 21 . Jangan lupa ber komentar :)

Unknown Pada 11:42:00 1 Komentar

CSS Modal Popup

CSS Modal Popup

HTML

Selamat datang kembali di blog Dewa Coding 21 :)

Sudah 2 hari yah admin tidak posting sebuah artikel lagi hehe maaf yah biasa admin juga kan karyawan jadi kadang ada masa sibuk sama engga hehe

okey buat pertemuan sekarang admin mau nge share lagi nih source code tentang Cara membuat modal popup dengan full css, jadi kita juga bisa tahu lah tentang cara bikinnya gimana tidak selalu mengandalkan frame work hehe
Disini admin mau kasih 3 source code modal full css.

1. untuk modal popup pertama admin membuat animasi modalnya dibuat dari berbagai arah, yang pertama admin membuat modalnya dari atas, yang kedua dari kanan, yang ketiga dari bawah, dan yang keempat dari kiri, jadi pada saat tombol modalnya di klik maka akan muncul lah sebuah popup berdasarkan tombol apa yang nanti kalian klik. untuk gambar dari tampilannya seperti berikut.

 
Untuk source codenya bisa di Download Disini / Here

2. Untuk modal popup yang kedua admin membuat animasi modalnya dengan 3 animasi, yaitu yang pertama ZoomIn jadi ketika si modalnya di klik animasi modalnya itu nge zoom, yang kedua Fade modal ini hanya bermainnya opacity nya saja aja, dan yang terakhir ZoomOut animasinya hampir sama seperti ZoomIn cuma yang membedakan kalo ZoomOut dari besar ke kecil.



Untuk source codenya bisa di download Disini / Here

3. Dan ini modal popup yang terakhir yaitu modal popup rotate, jadi animasi modal ini hanya bermain pada putaran/rotasi tiap tombol modal berbeda berapa kali rotasinya, sebagai contoh untuk yang pertama berputar selama 360 derajat, yang kedua 720 derajat, dan yang ketiga 1080 derajat.



Untuk source codenya bisa di download Disini / Here

Mungkin segitu dulu postingan admin tentang cara membuat modal popup dengan css, jadi kalian juga bisa tahu cara membuatnya gimana jangan selalu download, mudah-mudah ko scriptnya :)

Terima kasih telah berkunjung di blog kami, Jangan lupa berkomentar yah :)

Unknown Pada 17:01:00 Komentar

Responsive Menu CSS

Responsive Menu CSS

HTML

Hello semuanya.. Terima kasih telah mengunjungi blog kita kembali :)

Buat sekarang admin mau nge posting source code untuk membuat menu responsive full css jadi gak perlu pake jquery juga udh bisa loh bikin menu responsivenya :D dan sekaligus admin kasih juga buat bikin multi level menu yang banyak dropdown hehe

Kita langsung saja yah ke tampilannya dulu abis itu kalo misalnya agan2 suka silahkan di download

1. Untuk yang pertama menu responsive nya ada di atas, Jadi kan biasanya kita bikin responsive menunya itu ke bawah tapi sekarang yang ke atas :D

Untuk Source Code nya bisa di download Disini


2. Dan yang kedua yaitu menu responsivenya ada di kiri, dari design sih admin ngikutin facebook buat menu responsivenya karna ada dikiri hehe gapapa kan yah :D yang penting dari coding admin bikin sendiri

Untuk source code nya bisa di download Disini

3. Untuk Yang kedua menu responsive nya sama seperti yang ke dua cuman bedanya untuk yang ketiga menu responsivenya muncul dari kanan bukan dari kiri. Jarang-jarang kan dari yang kanan hehe

Untuk Source code nya bisa di download Disini

4. Dan ini yang terakhir menu responsive nya yang biasa kita kunjungi yaitu yang kebawah tapi kan disini kita bukan melihat bagus atau engganya. yang penting cara membuat menu responsive full css itu kya gimana dan kita bisa bikin sendiri.

Untuk source code nya bisa di download Disini

mungkin segitu dulu postingan dari admin tentang Responsive Menu CSS. terima kasih telah mengunjungi blog kami. dan tunggu yah postingan-postingan kami selanjutnya. 

Jangan lupa komentar yah :)

Unknown Pada 16:42:00 2 Komentar

HTML Login Form

HTML Login Form

HTML

Hai semuanya.. selamat datang kembali di Blog Dewa Coding 21. semoga betah yah kalian di blog kami. karna ini postingan blog saya yang pertama maka sebagai promo saya kasih source code html secara gratis :D tapi buat kedepannya juga saya bakal kasih lagi kooo. kalem aja :D

Okey kita langsung ke intinya aja. saya sudah membuat 3 design halaman login dan berikut saya kasih juga loh source code nya. kalian pasti mau kan yah yang namanya gratis pasti orang-orang pada mau lah :D 

Baik langsung saja kita melihat design-design nya dulu yah jangan pada langsung download :D tapi itu terserah kalian mau langsung download juga gapapa hehe

1. Form Login pertama saya buat hanya menggunakan 2 warna saja. karna bagi saya kalo kebanyakan warna itu terlalu norak yah :D bener gak temen2?

Untuk file nya bisa di download Disini


2. Untuk Form Login yang kedua saya membuat background form loginnya bisa berubah. tidak statis melainkan dinamis. Waaaahhh .... makin keren kan postingan kami pada bagus2 designnya hehe tapi kan itu menurut kami belum tentu menurut kalian :D

Untuk filenya bisa di download Disini

3. Dan ini yang terakhir Form login dengan design simple but beautiful hehe emang sih design form nya simpel tapi kalian pasti tidak akan bosan melihat tampilannya karna saya sendiri juga langsung terpesona melihatnya :D

Untuk filenya bisa di download Disini

Mungkin segitu dulu postingan dari kami mudah2an bisa bermanfaat khususnya buat admin dan umumnya buat kita smua. wassalam

eh kaya ceramah aja yah admin kwkwkw

Jangan lupa berkomentar yah. karna dengan berkomentar kalian udah menghargai hasil dari tulisan admin. Terima kasih

Unknown Pada 15:42:00 2 Komentar