Permana Jayanta

Web Developer

Category: Browser (page 1 of 2)

Chrome ternyata sudah ada extension

Baru tahu ternayta sekarang chrome sudah support extension. Memang fitur extension sudah ada dari dulu di Chrome tapi dengan settingan khusus. Tidak diaktifkan secara default. Pada Google Chrome yang sekarang ini, fitur extension sudah diaktifkan secara default.

Continue reading

Google Chrome portable

Google Chrome adalah browser buatan Google. Chrome yang terbaru adalah Chrome versi 2. Buat yang ingin mencoba Chrome tanpa harus install Google Chrome, berikut ada aplikasi Google Chrome portable yang bisa dicoba.

Continue reading

Google Chrome versi 2

Kemarin sempet lihat di feed bahwa web browser dari Google yang namanya Chrome sudah ada versi 2.0. Begitu selesai baca, langsung aja saya update versi Google Chrome ke versi 2. Selain karena updatenya mudah (tinggal klik icon tang di kanan atas trus pilih About Google Chrome), saya juga memang ingin mencoba fitur dan pembaruan yang dilakukan oleh developernya Google Chrome.

Continue reading

Transfer gambar website ke layanan Image Hosting

Kalau kalian sering melihat gambar pada sebuah website dan ingin untuk men-transfer gambar tersebut ke website yang menyediakan layanan image hosting, mungkin extension untuk browser Mozilla Firefox yang bernama Image Transloader layak untuk kalian coba.
Extention ini berguna sekali untuk kalian yang ingin untuk menampilkan gambar pada sebuah website tanpa melakukan link langsung ke gambar sumber.

Continue reading

Browser Security Handbook dari Google

Setelah kemarin Google merilis ebook tentang Panduan SEO, sekarang Google merilis sebuah panduan tentang keamanan browser.  Tapi yang sekarang ini bukan dalam bentuk ebook, melainkan bisa dibaca langsung di Google Code. Jadi tidak perlu repot-repot download lagi.

Disini dibahas perbandingan fitur keamanan yang umum digunakan oleh browser-browser terkeneal seperti Internet Explorer (versi 6 dan 7), Mozilla Firefox (versi 2 dan 3), Safari, Opera, Chrome dan Browser yang di-embed di Android.

Continue reading

Mengedit xHTML dengan Web Developer

Setelah sebelumnya saya membuat tulisan tentang salah satu yang bisa kita perbuat dengan plugin Web Developer ( Firefox), sekarang saya bikin satu lagi. Fitur yang ini baru saya sadari ada setelah iseng-iseng ngutak-ngatik menu-menu yang ada di Web Developer.

Sebelumnya, apa kalian pernah mendesain template web ? kalau pernah, buat desainnya pake apa ? Dreamweaver ? ato apa ? memang banyak sekali tool untuk mendesain web, kalau belum mungkin tulisan ini bisa menambah wawasan (semoga Praying). Saya biasa sih pake Dreamweaver untuk merubah desain dari Photoshop ke format HTML dan phpDesigner klo sudah mau ngubah ke bentuk XML blogger, dan saya biasanya preview di browser Firefox.

Nah, kalau hasil preview di firefox kurang mantap … maka akan saya edit lagi kode HTML-nya di Dreamweaver dan saya refresh (F5) halaman di Firefox untuk meng-update tampilan.  Kalau masih kuang mantap, maka saya ubah lagi dan begitu seterusnya Whew. Capek ? Iya lah … tapi sekarang sudah dimudahkan dengan bantuan web developer.

Dengan web developer ini, cukup dengan memilih menu Miscellaneous | Edit HTML, setelah itu sebuah sidebar akan muncul (biasanya di sebelah kiri) yang berisi kode HTML dari halaman tersebut. Edit kode HTML yang ada di sidebar tersebut, maka tampilannya langsung terupdate saat itu juga. Istilah kerennya on-the-fly.

Sebagai contoh, saya edit kode HTML-nya Majalahweb.com. Saya buka blog tersebut kemudian saya edit tag linenya.

Saat itu juga saya lihat dihalaman langsung berubah menjadi seperti ini

Website manapun bisa dipakai percobaan. Dan jangan khawatir, perubahan ini cuma bisa anda lihat di browser anda saja, orang lain akan tetap melihat website yang anda edit seperti tampilan normalnya.

Sebenarnya banyak sekali ada plugin menarik di Firefox. Saya sempat bikin plugin firefox yang saya install disini.

Melihat style blog lain dengan Web Developer

Saat lagi blogwalking, ada beberapa blog yang mempunyai desain yang keren banget. Ingin sekali membuat yang seperti itu, tapi bingung bagaimana caranya. Tapi beberapa saat kemudian baru sadar kalau sudah terinstall plugin WebDeveloper di FireFox-ku.

Memangnya kenapa dengan plugin WebDeveloper ? Dengan plugin ini kita bisa mengetahui apa nama element suatu halaman web dan style CSS yang seperti apa yang digunakan. Sebenarnya ada cara yang lain tanpa menginstall plugin ini. Cara yang biasa saya lakukan adalah :

  • Melihat kode halaman web tersebut dengan klik kanan View Page Source.
  • Membuka file CSS halaman tersebut.
  • Mencari tahu nama elemen dari suatu halaman web yang ingin kita tahu style CSSnya.
  • Melihat di style elemen tersebut di file CSS.

Tapi melakukan hal diatas berulang-ulang setiap kali melihat tampilan yang menarik sangatlah melelahkan. Maka dari itu, bagi yang suka iseng-iseng ngintip style CSS orang, wajib install plugin Web Developer disini. Plugin ini memang bagus banget, maka tidak heran siapa tahu anda sudah pakai plugin ini dan sudah sering mempraktekan cara yang saya jelasin dibawah.

Misalnya sewaktu saya membuka blog webdesignerwall.com, Disitu saya lihat caranya menampilkan potongan kode dengan quoted code. Seperti gambar dibawah ini.

quoted-code

Kemudian klik kanan pada halamannya sorot ke menu Web Developer > CSS > View Style Information. Sekarang, setiap elemen halaman web tersebut bisa disorot dan untuk memperjelas, diberi border warna merah.

show2

Klik elemen itu dan informasi style CSS akan muncul (secara default) di bagian kiri browser.

show3

Sekarang bisa dilihat style CSS halamannya.

  1. Menunjukkan kode CSSnya.
  2. Susunan elemennya.

Yang diatas cuma contohnya saja. Bisa diterapkan di berbagai halaman web. Misalnya saja dihalaman profile friendster orang. Misal orang tersebut mempunyai desain profile friendster yang bagus banget, tinggal lihat saja kode CSSnya seperti apa trus tinggal copy-paste deh style nya Hee hee.

Itu hanya sebagian kecil dari fiturnya web developer. Cuma CSS -> View Style Information saja. Banyak hal yang bisa dilakukan denga plugin tersebut.

Older posts

© 2017 Permana Jayanta

Theme by Anders NorenUp ↑