Memasang Konektor RJ45 pada Kabel UTP

Hy guys...
sekarang ane mau shar cara memasang konektor RJ-45 pada kabel UTP ato kabel jaringan.

sebenarnya tutorial seperti ini uda sangat banyak dibahas, namun terkadang buat pemula (newbie) susah untuk memahami isi tutorialnya. Disini saya akan membantu anda terutama newbie untuk memasang konektor RJ-45 pada kabel UTP dengan muda, cukup melakukan langkah2 dibawah ini :


Step by step memasang Konektor RJ-45 pada kabel UTP :

Bahan dan Alat yang dibutuhkan :

1) Kabel UTP

(ane saranin beli yang merk Belden atau AMP)

2) Konektor RJ-45













( bagusnya Merk AMP )

3) Krimping













Crimping berguna untuk mengupas kulit kabel, memotong kabel dan mengeratkan konektor saat dipasang pada kabel UTP agar tidak lepas.

4) Kabel Tester














Kabel Tester berguna untuk mengecek kabel yang sudah terpasang konektor apa sudah berfungsi dengan baik ato tidak.

Aturan Pemasangan :

1) Kupas kulit kabel UTP dengan Tang Krimping, hati2 cara mengupasnya jangan sampe kena kabel yg ada didalam kulit kabel.












Setelah Kulit kabel dikupas hasilnya akan sperti gambar dibawah :












2) Susun warna kabel seprti gambar dibawah ini :

klo masi bingung ni ane tuliskan susunan warnanya, susun dari kiri ke kanan yahh...!!!

- Putih Orange
- Orange
- Putih Hijau
- Biru
- Putih Biru
- Hijau
- Putih Coklat
- Coklat


3) kalau warnanya uda sesuai gambar diatas maka anda tinggal luruskan saja kabelnya lalu ratakan ujungnya dengan tang krimping.





















4) kalau ujung kabel sudah diratakan sperti gambar diatas, tinngal memasang konektornya saja.
ambil konektor RJ-45, lihat gambar dibawah cara memegang konektor :













Perhatikan konektornya, pengunci konektor berada dibelakang.
bila pngunci konektor berada didepan segera sesuaikan seprti gambar diatas..!!!

5) Masukkan kabel ke dalam konektor. bila kabel uda masuk tekan2 sedikit agar ujung kabel menyentuh dengan pin yg ada di konektor



















6) Bila konektor sudah terpasang pada kabel, press konektor pake crimping, tekan smpe anda mndengar bunyi klik dan pemasangan pun selesai.














7) Anda tinggal mengulangi langkah2 di atas untuk pemasangan konektor ujung kabel yang satunya.

8) Setelah ke 2 ujung kabel sudah terpasang konektor saatnya anda melakukan tes signal dengan kabel tester, masukkan masing2 ujung kabel ke port yang ada di tester lalu nyalakan testernya dengan menggeser tombol on/off.














bila lampu indikatornya menyala berurutan dari 1 sampai 8, berarti anda telah berhasil membuat kabel straight tapi bila lampu indikator menyala tidak berurutan atau tidak menyala sama sekali berarti terjadi suatu kesalahan, cobalah ulangi lagi.

Kabel Straight biasanya digunakan saat komputer ingin disambungkan ke hub, hub ke modem, modem ke router mikrotik dll.

Sedangkan kabel Cross biasanya digunakan untuk menyambungkan komputer ke komputer.
berikut urutan warna kabel pada kabel Cross :














tag : Cara memasang kabel UTP, Cara memasang Konektor RJ45, Cara memasang Konektor RJ-45, cara membuat kabel straight, cara membuat kabel cross, memasang kabel UTP pada konektor

Read More

Desain HTML5 & CSS3 Dengan Google Web Designer

Google Web Designer merupakan Tool / Software dari Google untuk mendesain sebuah web dengan menggunakan editor seperti Adobe Dreamweaver dan sebagainya yang outputnya langsung generate HTML5 & CSS3. Kita bisa membuat Canvas HTML5, Animasi CSS3, dan sebagainya. Keren kan ? Untuk Penampakannya silahkan lihat gambar dibawah ini.

Tampilannya hampir mirip dengan Adobe Photoshop terbaru. Untuk membuat animasi, kita ditawarkan dengan menu Insert Keyframes dan pilih efek animasi CSS3 komplit bahkan bisa kita custom animasinya. Google Web Designer ini lebih difokuskan untuk membuat sebuah banner animasi dengan menggunakan HTML5 & CSS3. Jadi kita tidak perlu menggunakan Flash Banner untuk membuat banner animasi. Itu menunjukkan bahwa HTML5 & CSS3 dapat meminimalisir penggunaan flash pada website kita.
Google Web Designer ini gratis lho, anda bisa mendownloadnya di website resminya http://www.google.com/webdesigner/. Namun sayangnya, Google Web Designer ini hanya mendukung sistem operasi Windows 7 keatas & Mac OS 10.7.x keatas. Saya masih setia di Mac OS 10.6.x, Windows XP, dan Linux Fedora. Jadi saya belum bisa memakai software ini. Bagi yang ingin mencobanya, langsung aja download. Sementara saya nunggu versi linuxnya keluar dulu aja deh :D

source : http://www.nurulimam.com/2013/12/desain-html5-css3-dengan-google-web-designer.html

Read More

Membuat halaman Web Responsive

Website dengan template responsive itu semakin dibutuhkan mengapa? Saat ini begitu banyak sekali pengguna internet yang mengakses via mobile, menurut data statistik di Indonesia saja pengguna internet via gadget mobile itu jauh lebih banyak ketimbang PC maupun desktop. Akses internet beralih dari suatu yang serius digunakan oleh orang-orang tertentu menjadi kebutuhan bagi semua orang. Kebutuhan mendapatkan informasi, ataupun hiburan menghilangkan kegundahan.
Namun sebelum era ini berjalan, para web designer membuat template menyesuaikan media akses para pengguna internet, dahulu kala kebanyakan menggunakan PC dan Notebook, sehingga tampilan pun menyesuaikan hanya untuk PC dan Notebook, tapi kini eranya berubah. Halaman website yang diperuntukkan PC dan Notebook menyulitkan pengguna mobile dalam melihat informasi yang berada di dalamnya. Tulisannya kecil-kecil, jadi nggak kelihatan, gambarnya itu-itu jadi begitu, layoutnya anu-anu jadi beganu. Dan lain-lain sebagainya.
Sehingga dari sinilah website template responsive datang bak pahlawan menyelamatkan orang-orang yang kesusahan dalam melihat informasi di halaman website. Responsive itu seperti fluid, sifat air yang menyesuaikan wadahnya. Ketika menggunakan PC atau Notebook maka dia menyesuaikan tampilannya, begitu juga ketika mengakses menggunakan tab/ipad, dan begitu juga ketika mengakses menggunakan mobile smartphone. Responsive di picu oleh adanya fitur media, fitur terbaru dari CSS3, meskipun ada juga beberapa yang menggunakan javascript deteksi resolusi layar untuk membuat template responsive.
CSS 3 mempermudah Anda membuat ramuan menghasilkan template yang responsive, namun beberapa developer membuat jadi lebih mudah menggunakan Responsive Framework. Framework yang menjadikan proses pembuatan template responsive jauh lebih cepat dan mudah. Ada 9 framework yang penulis anjurkan.

1. Foundation

Ini adalah salah satu responsive framework favorit saya, karena dengan foundation dari zurb, pembuatan template yang responsive jauh lebih mudah dan jauh lebih cepat. Tidak aneh mereka menyisipkan “It’s now crazy fast for designers and engineers to code and learn too.” di website officialnya. Membuat versi desktop dan mobile jauh lebih optimal dan tidak berantakan. Kunjungi websitenya http://foundation.zurb.com/

2. Gumby

Gumby merupakan framework pembuatan template yang fleksibel, menggunakan luas 960px, jika Anda yang biasanya menggunakan 960grid system dipastikan familiar dengan gumby, dan biasanya memang lebar 960px itu adalah lebar yang paling banyak dipilih oleh para web designer. Gumby menggunakan SASS, pengembangan dari CSS3. Dengan gumby anda bisa membuat template responsive untuk desktop maupun untuk mobile. Patut di coba, kungjungi websitenya langsung di http://gumbyframework.com/

3. Bootstrap

Bootstrap dikenal lebih dekat dengan nama Twitter Bootstrap, mengapa twitter? Karena memang framework ini dibangun oleh para webdesigner yang bernaung dalam perusahaan twitter. Bootstrap menjadi populer dan banyak website yang menggunakan twitter bootstrap ini. Sama dengan framework lainnya dengan bootstrap Anda bisa membuat jenis tampilan website apapun yang Anda inginkan. Silahkan dicoba, http://twitter.github.io/bootstrap/

4. Unsemantic

Unsemantic melanjutkan 960grid system, dibangun menggunakan SASS dan Compas, Dengan bantuan adaptjs membuat tampilan website Anda menjadi responsive. Unsemantic pun support cross browser. Tampilan didesktop sama persis jika dilihat di semua browser. Silahkan mengunjungi websitenya langsung http://unsemantic.com/. Yang jadi nilai tambah adalah Unsemantic fokus kepada SEO, membantu template ini menjadi lebih seo friendly.

5. Skleton

Skleton bukan hanya sebagai framework, tapi benar-benar mendudukan dirinya sebagai kerangka kerja, dan acuan kerja. SEhingga pembuatan halaman website jadi jauh lebih cepat. Tersedia untuk semua tipografi, grid, button, alat-alat yang Anda butuhkan dalam mendesain halaman website. Silahkan kunjungi websitenya http://www.getskeleton.com/

6. HTML5 BoilerPlate

Di tahun 2010, boilerplate menjadi pionir open source dalam pengembangan halaman website, dan tentunya di tahun itu pulalah boilerplate menjadi sangat populer di mata banyak web designer. Dengan boilerplate Anda bisa membuat halaman html5 menjadi sangat cepat dan mudah. Dan disupport oleh banyak browser modern. Boilerplate pun mendukung template mobile responsive. Kunjungi di http://html5boilerplate.com/

7. HTML KickStart

Yang menarik dari HTML Kickstart adalah ringan, dan ramping. Kickstart menjanjikan pekerjaan yang lebih cepat bisa dilakukan oleh para pengembang user interface, yang tidak hanya melulu halaman html biasa. HTML Kickstart sizenya kurang lebih hanya 300kb saja. Berbagai keperluan untuk pengembangan halaman html modern sudah tersedia di sana, silahkan di coba http://www.99lime.com/elements/

8. SproutCore

Sproutcore merupakan kerangka kerja front end, yang berfungsi untuk membangun aplikasi berbasis HTML5 dengan sangat cepat. Uniknya sproutcore mengikuti pola arsitektur MVC, yang biasanya diterapkan kedalam framework server scripting. Silahkan kunjungi http://sproutcore.com/ untuk lebih detil

9. Less Framework

Less framework merupakan sebuah kerangka modern yang berfungsi untuk membangun desain halaman yang responsive, Mirip sekali dengan skleton menggunakan grid sebagai pondasinya. Less framework memiliki 4 jenis responsive yakni Desktop, tablet, handphone, dan mobile pada umumnya. http://lessframework.com/


Kurang lebih itu adalah framework dalam pembuatan template responsive yang populer digunakan oleh para webdesigner. Kedepannya kita akan bahas bagaimana menggunakannya, satu demi satu.

Read More