website design work : Memberi komentar code

Komentar code dalam HTML website

Jika Anda harus membuat atau terbiasa membuka code HTML, PHP, style CSS atau code lainnya pasti Anda memerlukan code komentar. Anda pernah menemukan istilah "comment out" di dunia coding? Istilah itu berarti memberi kode komentar sebagai bagian dari code file template website.

Apa itu komentar kode di halaman HTML atau PHP website?

Comments or comment codes are part of code that helps the designer and the user figure out what is what, which section is which, and what is going on within the tangle of codes.

Komentar atau kode komentar adalah bagian dari kode yang membantu desainer dan user untuk mencari tahu "what is what" - apa sebagai apa, "which section is which" yang bagian mana, dan apa yang terjadi di dalam jalinan kode.

Comments-out pada halaman HTML or PHP (outside of the PHP code)

Contohnya seperti ini:

<!-- comment here about what is going on -->

Komentar kode pada file CSS files :

/* comment here about a style */

Komentar kode di dalam code PHP :

<?php the_excerpt(); // Show excerpt and not full post content ?>

Atau seperti ini :

<?php /* This is my special hack.
         It's so special it requires a comment that spans multiple lines! */

my_special_hack();
?>

Tracking Template Files

Style CSS bisa menyeberang ke file, sehingga melacak bagian mana acuan dalam kode di file template bisa sulit jika tanpa pemberian komentar kode yang baik. Memang bukan keharusan, tetapi akan sangat membantu untuk menambahkan komentar ke opening div atau opening class seperti ini :

<div id="sidebar"><!-- sidebar begins -->

Kebanyakan orang akrab dengan HTML dan CSS mengakui bahwa id adalah awal dari section dan komentar mungkin tidak diperlukan, tetapi tentu akan membantu jika pada awal setiap loop dalam setiap Tema WordPress ada komentar seperti ini :

<!-- WordPress Loop begins here -->

Pada akhir setiap div, khususnya yang file lintas Template sebaiknya memiliki komentar akhir:

</div> <!-- end content -->

Comments in Style Sheets

Kadangkala dalam file template meliputi CSS inline style pada header.php, file index.php atau file single.php - diluar file styles.css untuk tema template.

Jika orang akan memodifikasi tema template, ada anggapan bahwa semua kode style CSS ada dalam file style.css. Maka sebaiknya jika Anda menambahkan style CSS ke file template yang sebenarnya, silahkan membuat komentar tentang hal itu dalam style.css sehingga user tahu di mana menemukannya. Adakah yang menjadikan lebih frustrasi daripada mencoba untuk mengubah style css tanpa hasil, hanya untuk menemukan website desainer menempatkan style utama dalam file header file sebenarnya.

Hanya perlu menambahkan short comment seperti :

/* Styles for the header image are found within the header.php file. */

Sebenarnya sama pentingnya menciptakan desain website yang paling indah dan inovatif, tetapi juga penting untuk membantu user menggunakan desain Anda.

Commenting Out Code

Note: Jika Anda mengirim tema ke direktori (di control Panel), kode komentar tidak boleh digunakan

Ada kalanya Anda menguji tag template, tag Plugin, atau bit yang berbeda dari kode dan Anda perlu untuk mencegah mereka dari menampilkan atau intiating (aktif). Untuk melakukan ini, lakukan "hide" (deactivate) dengan kode komentar. Untuk kembali aktivasi, hanya menghapus kode komentar.

Menyembunyikan atau deactivate  HTML:

<!-- <div class="redblock"><p>This is some HTML in the redblock class.</p></div> -->

Menyembunyikan atau deactivate CSS styles:

/* .redblock {font-size: 80%; font-style: italic; color: red; } */

Menyembunyikan atau deactivate PHP code dalam file template:

<?php // the_content(Continue Reading...); ?>

Atau

<?php /* the_content(Continue Reading...); */ ?>

---

That's all we know - Happy blog blogger - semoga bermanfaat

---

Hidupkan laptop dengan battery tetap terpasang

Bolehkah laptop hidup tanpa battery?

Mungkin Anda pernah menghidupkan laptop tanpa battery, dan supply daya listrik langsung dari jaringan PLN. Apakah tindakan itu dibenarkan?

Kita dihadapkan pada dua pendapat, yaitu bahwa : (semoga tidak membingungkan)

1. Menyalakan laptop pakai AC-power dengan battery terpasang akan memperpendek usia battery. Sebaiknya battery DILEPASKAN ketika menghidupkan laptop pakai listrik di rumah (kantor).
   
   
2. Menyalakan laptop pakai AC power tanpa battery terpasang bisa merusak komponen dalam laptop. Komponen elektronik laptop lebih cepat rusak karena listrik dari power supply lebih besar dari yang seharusnya diterima laptop. Jadi sebaiknya baterai TETAP TERPASANG.

Kedua alasan diatas memang tidak salah, semuanya benar. Menghidupkan laptop dengan battery terpasang dan juga mendapat supply daya listrik dari PLN (AC Power) bisa membuat battery cepat membengkak dan rusak, tetapi sebaliknya menghidupkan laptop dengan AC Power dan tanpa battery terpasang bahayanya jauh lebih besar terhadap laptop Anda.

Berikut ini ekses negatif laptop hidup tanpa battery terpasang dan sumber listrik langsung dari PLN :

1. Maaf saya ulang! Menyalakan laptop dengan AC power dengan TANPA battery terpasang dapat mempercepat KERUSAKAN KOMPONEN elektronik dalam laptop, karena komponen tersebut akan menerima tegangan dan arus listrik berlebihan.
   
   
2. Menyalakan laptop dengan AC power dan TANPA battery, tetapi menggunakan stabilisator/UPS sedikit banyak juga dapat mempercepat  KERUSAKAN KOMPONEN elektronik dalam laptop karena tegangan dan arus listrik langsung menuju ke komponen di dalam laptop tanpa melalui Penyesuai Tegangan (voltage converter) dan sirkuit pengatur (regulator circuit).
   
   
3. Jika listrik dari PLN mendadak mati, dan laptop Anda juga mati mendadak, maka jika terjadi beberapa kali, efeknya adalah Hard-disk, RAM, Processor dapat rusak.
   
   
4. Sebelum listrik mendadak mati laptop sebenarnya sudah terancam, karena jika stop-kontak adapter tidak baik, maka listrik tersebut juga bisa merusak hardware laptop.
   
   Jadi jelas sebaiknya tetap pasang battery laptop apapun keadaannya. Lebih baik battery laptop rusak (drop) tetapi masih dapat melindungi arus listrik langsung ke komponen laptop daripada motherboard, hardware atau data dalam Hard-disk rusak. Biayanya bisa sangat mahal

Lalu kapan Battery laptop boleh dilepaskan?

Battery dilepas HANYA untuk bila laptop tidak digunakan lebih dari 3 hari. Battery juga bisa dilepas HANYA jika pemakaian lebih dari 12 jam nonstop, dengan socket listrik yang menempel. Kalau HANYA untuk pemakaian sehari-hari sebaiknya memakai battery untuk menghindari kehilangan data dan kerusakan system bila listrik PLN mati tiba-tiba. Battery terpasang juga melindungi hardware dan juga modul-modul hardware lain dari lonjakan listrik yang ekstrem, misalnya akibat ada sambaran petir.

Jika pakai AC power sebaiknya battery tetap terpasang

Mungkin ada beberapa laptop canggih dalam mengatasi masalah ini, misalnya dengan menambah komponen penyesuai tegangan dan sirkuit pengatur pada adaptor laptop. Namun Anda pun harus benar-benar yakin jika fitur itu benar-benar ada dan bekerja pada laptop. Jika tidak yakin apakah laptop Anda aman jika dinyalakan tanpa battery silahkan bertanya ke CS dealer laptop. Jika tetap tidak yakin sebaiknya hidupkan laptop dalam keadaan battery terpasang.

---

That's all we know - Happy blog blogger - semoga bermanfaat

Gunakan Pinterest untuk Menaikkan Trafik website

Image menceritakan banyak hal - gambar bisa mewakili ribuan kata - dan dapat menarik perhatian. Jaringan sosial berbasis gambar telah menjadi konsep unik di balik Pinterest. Pinterest merupakan salah satu situs social media (e.g. Facebook, Twitter, Linkedin, Stumbleupon etc), tetapi ada yang istimewa pada social networking ini. Pinterest dimulai dengan konsep unik, yaitu sebagai situs media sosial (jaringan sosial) berbasis gambar. Hal ini menjadikannya salah satu situs paling populer. Gambar pada Pinterest membantu penayang mengarahkan trafik ke website mereka.

Pinterest is an online pinboard.

Organize and share things you love.

Tombol Pinterest di website blog platform Blogger

I) Button code

Opsi code untuk tombol yang disediakan oleh official site Pinterest :

Opsi 1
<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>
Opsi 2
<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a>
Opsi 3
<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a>
Opsi 4
<a href="http://pinterest.com/USERNAME/"><img src="http://s-passets-ec.pinimg.com/images/about/buttons/small-p-button.png" width="16" height="16" alt="Follow Me on Pinterest" /></a>

II) Adding code to blog

Adding to Blogger

1. » Layout > Add A Gadget dan pilih HTML/Javascript.
2. » COPY salah satu opsi code diatas (diantara opsi 1-4) dan PASTE
   ke dalam content box.
3. » Ganti USERNAME dengan Pinterest username (harus submit dulu
   ke PINTEREST).
4. » SAVE.

Make your website blog post pinnable

Pertama, ubah blog bersifat pinnable. Tombol Pinterest di webpage akan memudahkan user untuk pin gambar. Banyak plugin yang dapat kita digunakan - tinggal pilih - sehingga user dengan mudah dapat berbagi foto dan memasangnya di Pinterest board mereka dalam waktu singkat.

Website yang dibuat dengan maksud mendapatkan trafik dari Pinterest, untuk itu pastikan bahwa tombol Pin harus dikaitkan dengan setiap gambar yang diposting. Dengan kata lain, pastikan gambar mudah pinnable.

Ask people to pin images on your Pinterest board

Merupakan gagasan bagus untuk mendorong orang submit di website sehingga mereka langsung mendapat pin gambar di wall mereka. Inilah upaya sederhana berakhir dengan hasil luarbiasa - memungkinkan lebih banyak tamu berkunjung secara teratur dan membuat jaringan grup user. Ada beberapa cara mendapatkan trafik melalui Pinterest, misalnya Anda buat kompetisi dan memberikan hadiah ke pemenang.

Make the Pin Board flashy and lively

Ciptakan Pinterest board semenarik mungkin, ini memicu imajinasi user, mendorong mereka menambahkan berbagai gambar yang pada akhirnya membuat papan Pin akan lebih baik. Papan pin yang dihias dengan baik dan gambar-gambar disematkan dengan cara menarik, pasti orang senang berkunjung dan melakukan kunjungan ulang.

Pelanggaran hukum atas hak cipta gambar di Pinterest board akan menjadi publisitas buruk. maka pastikan kita patuhi terms-and-conditions dan jangan ada pelanggaran hukum. Jika Anda membuat penggunaan terbaik, boleh jadi papan Pinterest akan menjadi alat pemasaran sangat kuat - membantu mendapatkan perhatian client potensial.

source :How to add a Pinterest Follow button

---

That's all we know - Happy blog blogger

---

CMS Template Joomla versi 3.x.x Responsive

Responsive web design merupakan pendekatan baru untuk desain web dimana situs dibuat untuk memberikan ke pengunjung situs pengalaman menonton secara optimal. Kemudahan membaca dan kemudahan navigasi dengan pengubahan size minimal, panning, dan scrolling, untuk berbagai perangkat (e.g. monitor computer desktop, laptop, notebook, iPad, tablet, hingga smartphone). Teknologi Reponsive yang baru ini sekarang menjadi sangat penting, terutama ketika banyak orang bisa mengakses internet atau website tidak hanya dari computer desktop tetapi juga dari ponsel smartphone, tablet dan lainnya. 

Hal ini membuat website dengan teknologi Responsive web design menjadi kebutuhan mutlak untuk sebuah website yang dikembangkan dengan menggunakan template CMS seperti Joomla atau Prestashop. Joomla dianggap CMS yang sangat populer yang pernah dirilis ke publik sebagai solusi open source. Template ini fully responsive artinya secara otomatis akan menyesuaikan lebar layout dari device yang user gunakan (handphone, tablet, PC wide screen).

Responsive website : CMS Template Joomla mulai versi 3.x.x

Responsive Website punya fitur luarbiasa, yaitu tampilan website akan menyesuaikan pada berbagai macam ukuran layar. Namun dibalik kehebatannya ada beberapa hambatan yaitu :

1. Kemampuan penyesuaian pada berbagai ukuran layar tersebut tidak semua dimiliki oleh tampilan website responsive. Seperti tampilan template CMS Joomla hampir semuanya dibangun di atas framework. Belum tentu framework tersebut memiliki fasilitas mendalam untuk setting tampilan pada setiap jenis ukuran layar pembuka.
   
2. Template Joomla 3 sudah didukung dengan fitur responsive, sehingga website Joomla 3 tidak lagi memerlukan versi khusus untuk tampilan versi mobile (Cellular). Namun dalam praktek, ternyata tidak semua website Joomla yang sudah punya fitur responsive memperhatikan kecepatan akses ketika dibuka pada versi mobile (cellular).
   
   
   Apa yang harus dilakukan?
   
   
   Harus membongkar code template yang digunakan, kemudian lakukan pengecekan kecepatan website ketika dibuka pada versi mobile (cellular). File code yang dibuka ada di :
   
   
   root\templates\nama_template_Anda\script.responsive.js

Umumnya setiap tampilan website Joomla Responsive (Joomla terbaru versi 3.3) memiliki short code yang berfungsi mengaktifkan maupun menonaktifkan modul-modul Joomla dengan memasangnya pada kotak "module_suffix." Jika framework joomla tersebut ada diatas twitter bootsrap maka short code tersebut adalah sebagai berikut :

1. Hidden-phone : berfungsi menonaktifkan modul di ukuran layar lebih kecil (biasanya untuk layar dengan lebar 320 pixel)
2. Hidden-dekstop: berfungsi menonaktifkan modul di ukuran layar yang sering digunakan user (biasanya berukuran 800 pixel atau lebih)

Namun fungsi tersebut hanya menyembunyikan modul-modul joomla pada ukuran layar tertentu dan bukan menonaktifkan modul-modul tersebut. Kelemahannya adalah besar website versi standar dengan versi responsive akan sama, sehingga beban website tersebut ketika dibuka di perangkat dengan layar kecil akan sangat berat.

Ekstensi Joomla berikut ini akan menambah performa situs Joomla responsive Anda lebih cepat, karena ekstensi tersebut memiliki fasilitas menonaktifkan modul berdasarkan jenis perangkat pembukanya, bukan berdasarkan ukuran layar.

Sebagai contoh, jika anda pakai ekstensi tersebut, Anda dapat mengatur setiap modul untuk jenis perangkatnya, Misalnya pada perangkat dengan sistem operasi android modul tersebut aktif, sedangkan pada perangkat dengan sistem operasi blackberry modul tersebut tidak aktif.

source

---

That's all we know - Happy blog blogger - semoga bermanfaat

---

Title post Blogger otomatis muncul di tab bar browser

Kita bisa modifikasi teks di belakang Favicon menjadi judul artikel yang saat dibuka atau membuat moving-teks atau marquee dengan teks milik sendiri.  Bagaimana cara menampilkan judul posting blogger sehingga muncul title di bagian tab browser (tepat di belakang Favicon)?

Sebelumnya pada bagian tersebut diatas dalam sembarang tampilan blog blogger saya "Website Design" selalu dengan sederetan nama website diikuti beberapa keyword utama seperti setting di halaman code HTML template, yaitu :

<title><data:blog.pageTitle/>|SEO|website|blog|toko online|prestashop</title>

Dan ditampilkan sebagai teks di depan Favicon untuk homepage dan innerpages ebagai berikut :

Website Design | SEO|website|blog|toko online|prestashop

Sehingga tampilan title sesudah favicon-image blog blogger (lihat baris paling atas tampilan browser atau bagian tab browser) adalah :

JUDUL ARTIKEL | SEO|website|blog|toko online|prestashop

Untuk homepage tetap ditampilkan :

Website Design | SEO|website|blog|toko online|prestashop

Title posting di belakang Favicon website blog Blogger

Beberapa waktu lalu saya ingin mengganti tampilan tersebut dengan judul posting artikel yang sedang dibuka. Lalu apa yang harus dilakukan?

PERINGATAN!

Sebelum mencoba tip ini, SANGAT disarankan membuat backup file template dengan cara :

Dashboard >> Template  >> klik tombol CADANGKAN / PULIHKAN (sudut kanan-atas)

Tujuannya, jika terjadi sesuatu yang tidak dikehendaki bisa mengembalikan template seperti semula.

Lalu apa yang harus dilakukan?

1. Dashboard >> Template  >>  Edit HTML
2. Letakkan (paste) code CSS style berikut ini pada bagian header
   
   
   .post-outer div.post{
   position: relative;
   padding-left: 200px !important;
   }
   
   
3. Klik Simpan Template

Aplikasi pada blog saya seperti gambar berikut :

Hasilnya bisa dilihat title artikel ada sesudah favicon :  pada blog ini.
Menggantikan tampilan bar tab URL artikel sebelum saya lakukan tip ini :

Website Design | SEO|website|blog|toko online|prestashop

(Text sesudah favicon di atas hanya muncul pada Homepage SAJA)

Membuat teks bergerak di belakang Favicon website blog

Masih berkaitan dengan teks pada bar tab (teks di belakang Favicon). Kali ini kita membuat sembarang teks yang bergerak dari kanan ke kiri sebagaimana fungsi "marquee"

Apa yang harus dilakukan? Masih pada halaman edit HTML (template blogger), :

1. Gunakan kombinasi tombol Ctrl - F untuk mencari </head>
2. Paste kode berikut ini tepat dibawah </head>
   
   
   <script type="text/javascript">
   //<![CDATA[
   msg = "SELAMAT DATANG DI BLOG SAYA WEBSITE DESIGN";+ msg;pos = 0;
   function scrollMSG() {
   document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
   if (pos > msg.length) pos = 0
   window.setTimeout("scrollMSG()",150);
   }
   scrollMSG();
   //]]>
   </script>
3. Ganti teks warna merah (di antara 2 tanda petik ganda) dengan teks Anda sendiri.
4. Klik tombol Simpan Template.

Source

---

Selamat mencoba - Happy blog blogger

---

Solusi Missing required field updated dan hCard author

Missing field updated dan missing hCard author

Boleh jadi website blog platform blog blogspot Anda mengandung "error" seperti :

Hilang: author
Hilang: updated.

Atau kesalahan "missing required field update" dan "missing required hcard author" (untuk kesalahan ”hcard errors = Missing required field "name (fn)"" untuk solusinya silahkan buka artikel : Rich snippets : Uji coba data terstruktur website blog)

Penyebab munculnya peringatan tersebut tidak lain adalah karena robot Googlebot tidak mampu mendeteksi siapa pembuat artikel dan tidak bisa mendeteksi siapa yang update artikel tersebut.

Berikut ini cara untuk memeriksa kesalahan diatas :

• Buka Google Webmaster Tools >> Pilih blog >> Tampilan Penelusuran >> Data Terstruktur
• Atau kita periksa error diatas melalui :
  
  Google tool richsnippet >> Masukkan URL homepage atau URL webpage

Berikut ini potongan gambar Google tool rich-snippet untuk blog dengan kesalahan "missing required field update" dan "missing required hcard author"

Daftar missing-field-author dan missing-author pada Google-Structured-Data

Missing-field-author dan missing-author pada Google-Structured-Data

Solusi Hilang: author dan Hilang: updated

Untuk mengatasi masalah tersebut anda bisa menambahkan kode dibawah ini TEPAT DIBAWAH kode <b:if cond='data:post.hasJumpLink'> pada Code HTML blog Anda. untuk mencari kode tersebut masuk ke menu template blog kemudian pilih "Edit HTML." Gunakan Ctrl + F untuk mempermudah pencarian kode tersebut.

<div class='vcard' id='hcard- NAMA BLOG Anda'>

<span class='fn n'> <span class='given-name'>Posted by: NAMA Anda</span> </span>

<a class='updated' href='ALAMAT URL Blog' rel='bookmark'>NAMA BLOG Anda</a>

Updated at : <abbr class='published' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr>
</div>

Ganti variabel-variabel diatas sesuai dengan nama Anda, nama blog dan URL homepage blog Anda. Maka contoh hasil akhir modifikasi code HTML menjadi seperti berikut ini :

Klik Simpan dan SELESAI

Source

Related post :
Rich snippets : Uji coba data terstruktur website blog

---

That's all we know - happy blog blogger

---

Memasang modul CS Content Marquee pada Joomla 3

Marquee ialah penulisan code HTML untuk memberikan efek rangkaian kata atau kalimat menjadi bergerak atau berjalan dari kiri ke kanan atau dari kanan ke kiri atau dari atas ke bawah dan sebaliknya. Efek teks Marquee ini merupakan salah satu bentuk modifikasi tulisan di website (blog blogger) termasuk diaplikasikan pada template Joomla. Marquee sangat baik digunakan karena merupakan animasi bersifat "eye-chatching" bagi pengunjung, Penggunaan marquee juga menghemat tempat pada website ketika Anda ingin menampilkan demo pesan khusus pada teks berjalan.

Atribut setting Marquee untuk tampilan website

Memang tetap ada kekurangan ketika kita menggunakan efek teks berjalan (marquee), yaitu saat content marquee melebihi kapasitas ruang (height atau width), sehingga ketika loading website (blog) belum selesai maka seluruh isi marquee akan terlihat sehingga tampilan webpage tampak jelek.

Berikut atribut sering dipakai untuk setting marquee dengan tujuan efek-teks-berjalan terlihat menarik :

• bgcolor : Digunakan untuk mengatur background text yang akan diberi efek marquee.
• direction : Digunakan untuk mengatur gerakan dari text tersebut (up, down, left right).
• scrollamount : Mengatur speed gerakan text (angka dalam px), semakin tinggi angkanya, maka semakin cepat gerakan dari text.
• behaviour : Untuk mengatur efek dari gerakan (slide, scroll, alternate).
• width : Untuk mengatur lebar dari area text (dinyatakan dalam px atau %).
• height : Untuk mengatur tinggi dari area text (dinyatakan dalam px atau %).
• align : Untuk mengatur posisi (center, left, right).
• onmouseover : Untuk memberhentikan efek ketika disorot (hover) mouse.
• onmouseout : Untuk melanjutkan efek bila mouse sudah tidak menyorot (hover) text.

Modul CS Content Marquee website Joomla

Modul ini sifatnya sederhana dan portabel untuk menampilkan marquee (efek teks bergerak) dari list judul-judul artikel yang paling baru diterbitkan. Modul ini ditawarkan untuk template Joomla versi 2.5 dan versi 3.x (Joomla terbaru versi 3.3). Modul ini bersifat Responsive untuk versi 3 keatas. Setting marquee mudah dan tidak banyak pilihan setting seperti : pilihan untuk memilih arah (LTR dan RTL), pilihan untuk memilih kecepatan, pilihan untuk memilih kategori posting, pilihan untuk memilih message, pilihan untuk memilih count dan pilihan untuk memilih warna.

Demo modul ini bisa dilihat DISINI
Download modul KLIK CS Content Marquee

Penggunaan

Install melalui halaman Administrator Joomla.

1. Extention >> Extention Manager >> Upload berkas paket (file ekstensi .zip) >> Choose file (browsing file di computer) >> Upload dan Install
2. Extention >> Module Manager >> pilih modul CS Continue Joomla
3. Klik tombol "Terbit" dan klik tombol "Edit"
4. Silahkan lakukan setting seperti contoh berikut :
   
   
   
   
   
   
5. Klik tombol "Simpan & Tutup"

---

That's all we know - Happy blog blogger

Content Management System : CMS website JOOMLA!

Apa itu yang dimaksud dengan CMS atau Content Management System? Anda akan menemukan jawabannya disini.

CMS adalah software yang memungkinkan orang atau banyak pihak, walau tidak punya basic pengetahuan HTML, CSS atau script, secara kolaboratif menambahkan dan/atau mengubah, update isi website (blog), termasuk didalamnya webstore (toko online).

CMS terdiri dua elemen :

1. Aplikasi manajemen isi (Content Management Application, [CMA])
   Elemen CMA memungkinkan admin content - yang mungkin tidak punya pengetahuan dasar HTML (Protokol Transfer Hiperteks) - untuk mengelola membuat, mengubah, dan menghapus isi website tanpa perlu keahlian webmaster.
   
   
2. Aplikasi pengiriman isi (content delivery application [CDA])
   Elemen CDA memakai dan menghimpun informasi yang sebelumnya ditambah, dikurangi atau diubah oleh admin content untuk memperbaharui website

Kemampuan (fitur) CMS berbeda-beda. Meski demikian, kebanyakan software CMS punya fitur publikasi berbasis Web, manajemen format, kontrol revisi, pembuatan indeks, pencarian, dan pengarsipan.

Sejarah singkat website template Joomla!

Joomla berasal dari bahasa Swahili (salah satu bahasa di Afrika Selatan) "jumla" yang mengandung makna "kebersamaan" Joomla! adalah salah satu Sistem manajemen konten (CMS) gratis (free open source), ditulis menggunakan PHP dan basis-data MySQL untuk keperluan di internet maupun di intranet (localhost). Versi pertamanya Joomla! versi 1.0.0 release 17 September 2005.

Fitur-fitur Joomla! diantaranya sistem caching untuk peningkatan performance website, RSS, blog, polling et cetera. Joomla! menggunakan lisensi GPL.

Sama seperti template website Prestashop atau template lain, Joomla! terdiri 3 elemen dasar:

1. Web server
   Web-server terhubung ke Internet atau Intranet (localhost atau server lokal dalam computer) yang berfungsi sebagai penyedia layanan situs. Joomla menggunakan Apache sebagai web-server.
   
   
2. Script PHP
   Script PHP terdiri dari kode program dalam bahasa PHP
   
   
3. Database MySQL
   Basis-data (database) merupakan tempat penyimpanan content website. Adapun basis-data yang digunakan adalah database MySQL

Pertama, user meminta akses terhadap halaman Joomla dengan mengeksekusi URL di web-browser yang kemudian terhubung ke web-server. Permintaan ini secara teknis disebut query string (selain terdapat URL juga mengandung parameter content (section, category, ID article etc)).

Berdasarkan parameter tersebut, sistem script Joomla melakukan kontak dengan database dan mengambil konten yang dimaksud berdasarkan parameternya. Terakhir, konten dan template Joomla digabung bersama dan hasilnya adalah halaman html, gambar, css dan javascript.

Paket Joomla! terdiri dari beberapa bagian terpisah dan termodul yang sangat fleksibel (mudah ddikembangkan dan diintegrasikan). Sebagai contoh "plugins" WikiBot yang memperbolehkan Super Administrator (penulis) di Joomla menggunakan "Wikitags" pada bagian artikel yang secara otomatis membuat pranala dinamis ke artikel Wikipedia pada saat ditampilkan.

Ada lebih dari 1,700 "plugins" yang secara resmi didelegasikan oleh OpenSource Matters, tersedia di http://extensions.joomla.org/ Dan kini secara resmi dipindahkan ke http://joomlacode.org dengan dukungan server lebih lengkap.

Joomla versi awal yaitu versi 1.0.0 merupakan versi alias dari Mambo 4.5.2.3 yang telah dikembangkan oleh "Pengembang Inti Mambo hingga Agustus 2005" sebelum hengkang dari Mambo.

Pemimpin Tim saat itu Andrew Eddie (dikenal dengan sebutan "MasterChief") menulis surat terbuka masalah hengkangnya di komunitas Mambo dan diumumkan di forum mamboserver.com. Tim pengembang ini kemudian membuat situs OpenSourceMatters untuk mendistrubusikan informasi ke user, developer, desainer web dan komunitas lain pada umumnya.

Perkembangan Joomla berawal dari Joomla 1.0.0 hingga ke tahap luarbiasa yaitu Joomla 1.0.15. Sekitar tahun 2007 mulai ada pengembangan Joomla 1.5.x yang memiliki beberapa persamaan dan perbedaan cukup signifikan disbanding versi sebelumnya. Pengembangan berlanjut ke Joomla 1.5.20. Kemudian ke Joomla 1.6 versi beta dan dapat diunduh diwww.joomla.org. Semakin baru versi Joomla memiliki penyempurnaan dari versi-versi sebelumnya.

Masing-masing punya daya tarik, Joomla 1.5.9 menawarkan nuansa baru dan lebih modern termasuk dalam system. Joomla 1.0.15 lebih stabil dan terdukung oleh banyak aplikasi dan developer. Kemudian dikembangkan Joomla versi 2.5.x dan versi terbaru sejak April 2014 adalah Joomla versi 3.3.

Seiring dengan semakin meratanya penggunaan smartphone, maka mulai Joomla! Versi 3.x ada tambahan fitur baru yang sangat penting, yaitu fitur Responsive. Dengan fitur ini halaman front-ends situs yang menggunakan template platform Joomla secara otomatis dapat menyesuaikan (customized) dengan lebar layer smartphone, iPad, notebook atau perangkat lain.

Elemen dasar website dengan template Joomla!

Ada 3 hal cakupan dasar yang harus ada untuk membangun website berbasis Joomla!

PHP (Personal HomePage)

PHP atau lebih dikenal dengan sebutan Hypertext Preprocessor merupakan bahasa pemrograman atau scripting yang bersifat server side. Hasil coding (pembuatan sintaks) atau program kode PHP ini akan dieksekusi oleh web-server, dan kemudian akan dikirim dalam bentuk HTML ke browser client.

Kode PHP tersebut tidak dapat dilihat oleh pengunjung, melainkan kode HTML yang merupakan hasil eksekusi kode PHP tersebut yang dapat dilihat oleh pengunjung. Untuk mengubah kode PHP tersebut menjadi kode HTML diperlukan aplikasi yaitu Engine PHP yang akan digunakan bersama-sama dengan aplikasi web-server.

Database

Tampilan kode HTML Joomla! Yang dapat dilihat oleh pengunjung diciptakan dengan menggunakan bahasa pemrograman atau scripting PHP dan penggunaan database MySQL. Database ini digunakan untuk menampung data-data Joomla! milik Anda, seperti user, password, modul, extention, image, text dan data-data lain. Jika anda ingin download aplikasi MySQL, buka http://mysql.com

Web server

PHP dan Database merupakan 2 unsur dasar yang harus ada dalam membangun situs dengan platform Joomla!, Namun ada bagian terpenting yang juga harus ada dalam website, YAITU web-server.

Web-server ini berfungsi sebagai pusat control dari pengolahan data website. Jadi input yang dilakukan oleh user internet akan diolah, kemudian dikembalikan lagi kepada pemakainya. Salah satu web-server yang paling banyak digunakan adalah Apache, karena telah banyak mendukung format file server tanpa perlu tambahan komponen aplikasi lagi.

Website dengan template platform Joomla! akan berjalan baik bila menggunakan software web-server Apache. Jika Anda ingin download aplikasi web-server Apache buka http://apache.org.

Download Joomla: http://www.joomla.org/download.html

---

That's all we know - Happy blog blogger

Setting tumpukan elemen div dengan style CSS z-index

Tutorial singkat pada website design kali ini tentang penggunaan properti z-index oleh admin pengelola situs (website master). Dengan setting position: absolute kita dapat membuat elemen yang bertumpuk-tumpuk. Tentu saja kita akan mengatur tumpukan-tumpukan tersebut mana yang di depan dan di belakang. Pada CSS kita mengatur tumpukan ini dengan menggunakan z-index.

Definisi dan penggunaan z-index (arsip website design)

Properti z-index menentukan susunan tumpukan sebuah elemen. Bentuk sintaks dasar prperti z-index adalah seperti berikut ini: 

z-index: auto|number|initial|inherit;

Perhatikan variasi nilai untuk properti tersebut, terdiri : auto, angka, initial dan inherit.

Atau perhatikan tabel nilai properti z-index di bawah ini.

Pedoman penggunaan untuk content website

1. An element with greater stack order is always in front of an element with a lower stack order.
2. Note : z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Ilustrasi penggunaan style CSS menggunakan properti z-index

Gambar ilustrasi diatas dapat dituangkan dalam coding seperti snippet berikut :

Perhatikan gambar:

• Dalam penggunaannya selalu di kombinasikan dengan penggunaan properti "position: absolute" (nama prperti position dan nilai properti )
• Makin besar nilai z-index maka akan ditampilkan makin depan dan untuk coding gambar tersebut dapat dilihat pada code diatas.

---

That's all we know - Happy blog blogger

Tip trik website Joomla : Pentingnya urutan plugin

Cara kerja website Joomla Memproses Plugin

Kita perlu memahami cara kerja plugin pada Joomla, khususnya bagaimana CMS Joomla memproses urutan plugin. Banyak newbie pembuat website Joomla yang masih amatiran kurang memperhatikan Plugin Manager.

Penginstalan plugin baru pada awalnya tidak banyak menimbulkan masalah, namun kadang ada kasus dimana plugin yang baru dipasang tidak bekerja dengan semestinya atau bahkan merusak plugin lain. Seperti kasus saya saat memasang modul JO K2 Slidershow untuk Joomla versi Responsive (versi 3.3), meski sudah saya install Content Construction Kit (CCK) atau lebih populer dikenal sebagai K2 untuk versi Joomla terbaru tersebut.

Plugin pada Joomla diproses satu-per-satu. Urutan di mana mereka akan diproses ditunjukkan pada kolom Order (kolom nomor empat dari kiri) pada Plugin Manager. Untuk mengubah urutan plugin tersebut, dapat dilakukan dengan cara klik judul kolom “Urutan” atau “Order” hingga muncul tanda panah atas dan bawah. Silahkan klik tanda panah ke atas atau ke bawah yang terletak di samping nomor urut plugin. Atau, Anda juga bisa mengetikkan nomor urutan yang diinginkan dan klik icon disc di bagian atas kolom “Order” atau “Urutan” tersebut.

Pedoman website Joomla mengeksekusi Plugin

1. Plugin diproses dari angka kecil ke angka berikutnya yang besar. Artinya, plugin nomor urut 1 akan diproses terlebih dahulu, diikuti plugin nomor urut 2, 3 dan seterusnya
2. Angka-angka tersebut tidak perlu berurutan secara mutlak. Sebagai contoh, Anda dapat memasukan angka 10, 20, 30, dan 40 di kolom “Order”. Trik ini perlu dilakukan agar kita bisa memasukkan beberapa plugin di antara plugin
3. Jika memasukan angka urutan sama pada beberapa plugin, misalnya ada 4 plugin dengan dengan angka 3 (sama), maka Joomla akan memproses ke-4 plugin tersebut secara acak

Bagaimana urutan Plugin website Joomla yang Benar?

Kebanyakan masalah website Joomla yang ditimbulkan oleh plugin biasanya disebabkan oleh plugin-plugin SEF/SEO dan Cache Plugin. Solusinya adalah dengan mengganti urutan plugin tersebut melalui Plugin Manager. Berikut ini pedoman urutan plugin yang benar :

1. Plugin-plugin utama (plugin-plugin pertama yang diproses)
2. SEF/SEO Plugin
3. Cache Plugin (plugin terakhir yang diproses).

Logikanya simpel. Jika kita tempatkan Cache plugins sebagai plugin pertama untuk dieksekusi, maka plugin-plugin lain tidak akan merubah content website selama plugin-plugin tersebut menggunakan caching. Dengan kata lain, content yang ditampilkan adalah data caching website Joomla, bukan data dari plugin itu sendiri. Karena Cache plugin dieksekusi terlebih dahulu.

---

That's all we know - Happy blog blogger