Apa itu SEO ?

 

SEO merupakan salah satu istilah dalam bidang web site. Adapun kepanjangan dari SEO adalah Search Engine Optimization, secara singkat SEO adalah kumpulan proses untuk meningkatkan rangking sebuah website agar muncul pada poisisi paling atas atau halaman awal dalam sebuah mesin pencarian. Ada banyak mesin pencarian di internet, namun yang paling populer adalah google.

Pentingkah SEO digunakan dalam pengembangan dalam sebuah website ? jika ingin alamat website kita muncul di halaman pertama mesin pencarian seperti google, maka SEO harus jadi perhatian yang penting.

Bagi yang memiliki website jualan online atau ecommerce, sudah pasti banyak dikunjungi. Jika ingin banyak dikunjungi, maka websitenya harus muncul dihalaman pertama . Karena pengunjung biasanya malas untuk membuka halaman selanjutnya di mensin pencarian.

Terus bagamana caranya menggunakan SEO, agar website kita muncul dihalaman awal mesin pencarian ? hal ini yang tidak mudah, butuh proses dan waktu yang tidak sedikit hingga sampai web yang dibangun bisa mendapatkan rangking yang bagus.

Kalau bingung caranya, anda bisa menggunakan jasa SEO, sekarang sudah banyak penyedia jasa ini (anda bisa cari di google). Apakah dengan menggunakan jasa SEO ini akan berhasil ? belum tentu juga, karena tidak ada jaminan website kita akan berhasil, karena banyak faktor hal lainnya diluar itu, namun tentunya lebih baik dicoba dari pada tidak ada usaha sama sekali.

Website sama halnya ibarat toko atau warung, bedanya tak berwujud fisik atau tidak nampak tokonya secara langsung, namun wujud toko aslinya adanya di belakang layar, jadi si empunya toko tidak akan kelihatan cakep atau cantiknya,karena ga nongol. Nah kalau di perhatikan, secara logis penerapan SEO di website sama dengan upaya kita untuk mengusahaakan agar toko kita banyak pengunjung dan membeli tentunya (mudah-mudahan terbayang walau sedikit). to be continue…

 

 

 

Trend Design Website 2016

1. Gambar Layar Penuh

Posisi di simpan dibawah header menu navigasi, untuk mempercantik pada gambar ditambahkan sinematografi, animasi sedikit agar terlihat hidup.

2. Layout terbagi dua (split-screen)

Selain gambar full, pada bagian ini dalam satu layar terbagi dari dua gambar, dimana masing-masing gambar tampil secara bergantian.

3. Warna Monochromatic

Warna yang cerah dengan background gambar gelap, sehingga terlihat cerah dan jelas pada text dan tombol.

4. Menu Navigasi

Petunjuk navigasi berada diatas menjadi prioritas. Simpan pada posisi yang biasa di pergunakan pada umumnya agar mudah user mencari, dan tampilan yang sederhana namun menarik.

5. Minimalis Tampilan

Untuk interaksi dengan website, agar tidak terlihat ngejelimet, tampilan usahakan minimalis atau lebih disederhanakan. Penggunaannya seperti pada pengisian form input pedaftaran atau semacamnya.

6. Video

Untuk lebih menarik website ditambahkan video pada halaman. Kebutuhan seperti untuk demo video dan semacamnya.

7. Sticky Component Web

Agar mempermudah user melakukan aksi, ada componen seperti menu navigasi yang selalu muncul walaupun di scorll kebawah.

8. Card Model

Model seperti gambar dimana terdapat gambar, judul dan text.

9. Single Colomn

Bagian ini biasanya terdiri dari judul, sub judul dan tombol.

10. User Experience

Pada website ditambahkan fungsi untuk menyimpan informasi kebiasaan-kebiasaan user dan mengolahnya agar bisa memberikan nilai lebih dan tepat berdasarkan kebutuhan user tersebut. contoh web seperti amazon dot com.

Kode untuk membuat posisi box pencarian agar tetap di atas

 

Betikut cara untuk membuat kode pencarian berada diatas tidak ikut scroll dan tetap berada diatas.

 

Kode HTML

< div class="wrap" id="wrap"> 
  
  < header class="top-header"> 
    < span class="menu-icon"> ☰< /span> 
  < /header> 
  
  < div class="search"> 
    < input type="search" placeholder="Search or type URL" /> 
  < /div> 
  
  < div class="top"> 
    < div class="hero"> < /div> 
  < /div> 
  
  < main> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
  < /main> 
  
< /div> 

Kode CSS

* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

Kode JS/ Jquery

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

3 Komponen untuk membuat desain web yang mengesankan

Ada tiga komponen yang dapat dijadikan acuan dalam membuat sebuah website agar terlihat begus, yaitu typography (font), warna (color), dan trend design terkini.

 

 

Typography (fonts) adalah bagaimana kita menggunakan jenis huruf yang sesuai dengan sebuah tema website yang akan di bangun. biasanya terdapat 2-3 jenishuruf yang digunakan dalam sebuah website. satu jenis untuk judul, satu untuk button, dan satunya untuk content.

 

Warna (color) adalah bagaimana mengatur komposisi warna agar dapat menyampaikan pesan dan kesan yang tepat terhadap pengunjung. warna dapat menimbulkan emosi psikologi terhadap pengunjung web. sebagai contoh warna biru meninggalkan kesan corporasi dan kalem, pink meninggalkan kesan kehangatan atau bisa juga kasih sayang, hijau untuk kesan natural, organic atau kesehatan, dst.

 

 

Trend design adalah menggunakan model-model website terbaru yang uptodate saat ini, dengan demikian website yang akan dibangun tidak terlihat kadaluarsa. saat ini model trend design adalah tidak hanya untuk pc atau komputer , namun harus dapat mencakup device handpohone, atau istilah kekinian adalah responsive. dimana responsive merupakan proses dimana tampilan akan dapat menyesuaikan dengan sendirinya berdasarkan ukuran layar.

 

 

Demikian untuk gambaran konsep componen yang bisa kita jadikan perhatian pada saat membangun sebuah website.

Terimakasih.

 

Pendekatan Tiga Prinsip Dalam Web Design

 

Sebetulnya tidak ada rumus formula yang dapat digunakan untuk membuat sebuah website yang bagus. Namun, ada beberapa usaha pendekatan yang dapat kita gunakan agar sebuah design web tersebut lebih baik, seperti pendekatan tiga prinsip dalam mendesign sebuah web berikut :

Mudah di gunakan
Mudah untuk menemukan apa yang di cari dan dibutuhkan oleh pengujung.

Berfungsi dengan baik
Feature yang terdapat dalam sebuah website dapat digunakan dan tidak bermasalah.

Dibuat bagus dan dapat menginspirasi
Web bisa menarik dan disukai pengunjung.

point diatas mungkin hanya sebagian kecil dari point-point lainnya. demikian semoga bisa menjadi pengetahuan anda.

wassalam.

Coretan Seputar Web Design

Web design adalah usaha untuk membuat user pengunjung merasakan nyaman ketika menggunakan website anda. Siapa saja bisa membuat website, namun untuk hasil yang bagus belum tentu bisa.

Proses pembuatan sebuah web site untuk user interface yang bagus tidak lah mudah dan di perlukan beberapa proses atau tahapan, yang masing-masing biasanya di lakukan oleh orang-orang yang berbeda dengan keahlian-kehalian tertentu. Semakin banyak tenaga ahli yang terlibat dalam pembuatan sebuah website, maka kemungkinan semakin bagus pula kemungkinan hasilnya.

Namun tidak menutup kemungkinan pembuatan sebuah website atau web design dilakukan oleh satu orang dan belum tentu hasilnya tidak baik. Kembali kepada hasil karyanya.

Menangani Ajax PHP Cross-Origin Request Blocked

CORS (Cross-Origin Resource Sharing) merupakan protokol yang dibangun di atas HTTP untuk memberikan akses Javascript yang terdapat di sebuah halaman sebuah situs untuk mengakses metode di situs lain.

Dalam skema diatas,untuk dapat menjalankan proses CORS, supaya permintaan ajax jquery untuk Cross-Origin tidak di block, pada bagian server php harus ada kode yang ditambahkan dibagian paling atas kode.

Penulisan kode tambahan di php agar semua situs bisa mengakses adalah sebagai berikut.

<?php
header(“Access-Control-Allow-Origin: *”);
header(‘Access-Control-Allow-Methods: GET, POST’);

Sedangkan penulisan kode tambahan di php agar hanya situs tertentu bisa mengakses adalah sebagai berikut.

<?php
header(“Access-Control-Allow-Origin: http://example.com&#8221;);
header(‘Access-Control-Allow-Methods: GET, POST’);

Kurang lebih seperti itu, jika masih terdapat kesalahan silahkan dikoreksi. Terimakasih.

Kode untuk memperbaiki style css pencarian google custom

Kode css berikut untuk . dimana tampilan button google terlihat abu dan ceper, aneh tapi nyata tapi memang bawaannya seperti itu. Akhirnya harus ditambahkan kode berikut untuk membenahi style css button tersebut.

<style>
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
height: 26px !important;
margin-top: 0 !important;
min-width: 13px !important;
padding: 5px 26px !important;
width: 68px !important;
}
</style>

tambahkan di html didalam tag <head>…</head>, sederhana namun semoga bermanfaat. wassalam.

Contoh kode android untuk menampilkan data json array di listview multi column dari php dengan volley library

Berikut kode android untuk menampilkan data json array di listview multi column dari php dengan volley library.

File Proses .java

package com.example.test;

import java.util.ArrayList;
import java.util.HashMap;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonArrayRequest;
import com.android.volley.toolbox.Volley;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;


public class Penjualan extends Activity {
	String server_url = "http://192.168.1.11/api/penjualan.php";
	
	private ListView list_view;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.penjualan);
		
		makeJsonArrayRequest();		
	}

	private void makeJsonArrayRequest() {
		 
		final RequestQueue requestQueue = Volley.newRequestQueue(Penjualan.this);
 
        JsonArrayRequest req = new JsonArrayRequest(server_url,
		    new Response.Listener<JSONArray>() {
	        @Override
	        public void onResponse(JSONArray response) {
	            try {

                	list_view = (ListView) findViewById(R.id.lv_id_penjualan);
                	
                	ArrayList<HashMap<String, String>> feedList= new ArrayList<HashMap<String, String>>();
                    HashMap<String, String> map = new HashMap<String, String>();
                    
                    for (int i = 0; i < response.length(); i++) {                    	
                   		JSONObject person = (JSONObject) response.get(i);
	            		//al_nama_customer.add(person.getString("nama_customer"));
                    	map = new HashMap<String, String>();
	            		map.put("penjualan_id", person.getString("penjualan_id"));
	                    map.put("nama_customer", person.getString("nama_customer"));
	                    feedList.add(map);
                    }                    
                     
                    SimpleAdapter simpleAdapter = new SimpleAdapter(Penjualan.this, feedList, 
                    		R.layout.penjualanlist, 
                    		new String[]{"penjualan_id", "nama_customer"}, 
                    		new int[]{R.id.tv_id_penjualan_id, R.id.tv_id_nama_customer});

                    list_view.setAdapter(simpleAdapter);
                    
                	list_view.setAdapter(simpleAdapter);
                	list_view.setOnItemClickListener(new OnItemClickListener() {
            			@Override
            			public void onItemClick(AdapterView<?> parent, View view,
            				int position, long id) {
            				// TODO Auto-generated method stub
            				String value = ((TextView) view.findViewById(R.id.tv_id_penjualan_id)).getText().toString(); 
            						//(String) list_view.getItemAtPosition(position);
            				Toast.makeText(Penjualan.this, "Position : " + position + " Value : " + value, 
            						Toast.LENGTH_LONG).show();
            			}    		
            		});                
	 				
                	
                } catch (JSONException e) {
                    e.printStackTrace();
                    Toast.makeText(getApplicationContext(),
                            "Error: " + e.getMessage(),
                            Toast.LENGTH_LONG).show();
                }

            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {                        
                Toast.makeText(getApplicationContext(),
                        error.getMessage(), Toast.LENGTH_SHORT).show();                        
            }
        });
		 
        // Adding request to request queue        
        requestQueue.add(req);
    }
 
}

File Layout Utama .xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top">

    <TextView
        android:id="@+id/tv_id_penjualan"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/tv_penjualan"
        android:textSize="20sp" 
    />

    <ListView
        android:id="@+id/lv_id_penjualan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_id_penjualan" >
    </ListView>

</RelativeLayout>

 

File Layout List.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
 
    <TextView
        android:id="@+id/tv_id_penjualan_id"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:layout_weight="1"
          android:gravity="center" 
        android:textAppearance="?android:attr/textAppearanceMedium"  />
  
     <TextView
        android:id="@+id/tv_id_nama_customer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:layout_weight="1"
        android:gravity="center" 
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
</LinearLayout>

 

Contoh kode untuk mengambil data jsonArray dari android ke PHP dengan menggunakan library volley

Berikut contoh untuk mengambil data jsonArray dari android ke PHP dengan menggunakan library volley, silahkan di pelajari dan dikembangkan. Awalnya sulit kesananya mudah.

File MainActivity.java

package com.example.test;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonArrayRequest;
import com.android.volley.toolbox.Volley;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;


public class MainActivity extends Activity {
	String server_url = "http://192.168.1.101/api/user.php";
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.penjualantambah);
		
		makeJsonArrayRequest();		
	}

	private void makeJsonArrayRequest() {
		 
		final RequestQueue requestQueue = Volley.newRequestQueue(PenjualanTambah.this);
 
        JsonArrayRequest req = new JsonArrayRequest(server_url,
		    new Response.Listener<JSONArray>() {
	        @Override
	        public void onResponse(JSONArray response) {
	    		
	            try {
	                // Parsing json array response
	            	// loop through each json object                            
                   for (int i = 0; i < response.length(); i++) {

                        JSONObject person = (JSONObject) response.get(i);

                        String username = person.getString("username");
                        Toast.makeText(PenjualanTambah.this, username, Toast.LENGTH_LONG).show();
                    
                    }                            
	 
                } catch (JSONException e) {
                    e.printStackTrace();
                    Toast.makeText(getApplicationContext(),
                            "Error: " + e.getMessage(),
                            Toast.LENGTH_LONG).show();
                }

            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {                        
                Toast.makeText(getApplicationContext(),
                        error.getMessage(), Toast.LENGTH_SHORT).show();                        
            }
        });
		 
        // Adding request to request queue        
        requestQueue.add(req);
    }
 
}

Josh smoga bermanfaat gan.