31
Desain Blog & Konten 24 Januari 2012

Desain blog dan kontan Telkomsel FEB UGM 2012

Embed Size (px)

DESCRIPTION

Membahas tentang Desain Blog dan juga Konten yang disampaikan di FEB UGM bekerjasama dengan Telkomsel

Citation preview

Page 1: Desain blog dan kontan   Telkomsel FEB UGM 2012

Desain Blog & Konten24 Januari 2012

Desain Blog & Konten24 Januari 2012

Page 2: Desain blog dan kontan   Telkomsel FEB UGM 2012

http://nurudin.jauhari.netTwitter: @jauhari FB: [email protected]

[email protected]

082135335511

Nurudin Jauhari

Nganggur Itu Anugerah

Page 3: Desain blog dan kontan   Telkomsel FEB UGM 2012

Inti Dari BloggingBagi Kami Inti dari Blogging adalah

Menuangkan “Sesuatu”

Page 4: Desain blog dan kontan   Telkomsel FEB UGM 2012

Mengenal Mesin2 BlogsMengenal Beberapa Mesin Blog

yang banyak dipakai Saat ini

Page 5: Desain blog dan kontan   Telkomsel FEB UGM 2012

Blogger.com / WordPress.org

2 Mesin Blog yang Sangat Populer

Page 6: Desain blog dan kontan   Telkomsel FEB UGM 2012

Blogger.com

• Gratis

• Templates Standar

• Integrasi dengan Google

• Komentar “sedikit” susah

• Sulit Offline Editing

Page 7: Desain blog dan kontan   Telkomsel FEB UGM 2012

WordPress.org

• WordPress.org bukan WordPress.com

• Dukungan Komunitas Bagus

• Ribuan Plugins

• Banyak Pilihan Tema

• Instalasi Mudah

• Server Lokal

Page 8: Desain blog dan kontan   Telkomsel FEB UGM 2012

Apa Hanya Itu?MovableType, Expression Engine, Drupal,

Joomla, TextPattern dan Masih banyak layanan sejenis

Page 9: Desain blog dan kontan   Telkomsel FEB UGM 2012

Kiat-kiatMemulai

Desain Blog

Page 10: Desain blog dan kontan   Telkomsel FEB UGM 2012

• Tujuan Blog?

• Tema Blog?

• Fitur Blog?

• Kemampuan?

Beberapa Poin Sebelum Mulai Desain Blog

Tujuan Blog untuk Apa? Sharing Foto, Tutorial & Panduan, Informasi Umum, Berbagi Video?

Mengenal Kemampuan Diri (Desain, Coding)

Page 11: Desain blog dan kontan   Telkomsel FEB UGM 2012

Beberapa Alat yang dibutuhkan

• Text/HTML Editor Adobe Dreamweaver, Coda, Notepad, Notepad++, TextMate, TextWrangler, vim

• Image Editor Pixelmator, Adobe Flash, Adobe Firework, Adobe Photoshop, Corel Draw, etc

• BrowserApple Safari, Google Chrome, Mozilla Firefox, Internet Explorer

Page 12: Desain blog dan kontan   Telkomsel FEB UGM 2012

Proses Desain

Blog

Page 13: Desain blog dan kontan   Telkomsel FEB UGM 2012

Merancang Dengan Grafis•Memerlukan Pengolah Grafis

•Desain dalam Bentuk Gambar

•Preview bisa langsung dilihat

Page 14: Desain blog dan kontan   Telkomsel FEB UGM 2012

Langsung Koding

•Menuang Ide melalui barisan kode

•Membutuhkan Daya Imajinasi Lebih

•Lebih Cepat

Page 15: Desain blog dan kontan   Telkomsel FEB UGM 2012

Typography

San-Serif

Serif

Page 16: Desain blog dan kontan   Telkomsel FEB UGM 2012

Layout

1 Kolom 2 Kolom 3 Kolom Mixed

Beberapa Contoh Konsep Layout

Page 17: Desain blog dan kontan   Telkomsel FEB UGM 2012

CSS & XHTMLDeskripsi CSS Menurut Wikipedia

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk

mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan

seragam.

Deskripsi XHTML Menurut WikipediaXHTML adalah bahasa markup penerus dan

pengembangan dari HTML yang memiliki kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML

merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat

fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas.

Page 18: Desain blog dan kontan   Telkomsel FEB UGM 2012

Barisan Kode CSS

Page 19: Desain blog dan kontan   Telkomsel FEB UGM 2012

Barisan Kode XHTML

Page 20: Desain blog dan kontan   Telkomsel FEB UGM 2012

Beberapa Contoh Desain Blog

Page 21: Desain blog dan kontan   Telkomsel FEB UGM 2012

Mengenal StrukturTema WordPress

Page 22: Desain blog dan kontan   Telkomsel FEB UGM 2012

Struktur TEMA WordPress

Page 23: Desain blog dan kontan   Telkomsel FEB UGM 2012

style.css

Page 24: Desain blog dan kontan   Telkomsel FEB UGM 2012

Tips bikin Tema

•Gunakan CSS Framework

•Bikin Basic Theme

•Gunakan Struktur Kode yang Baku

•Child Theme

•Back Up

Page 25: Desain blog dan kontan   Telkomsel FEB UGM 2012

Manajamen Konten

Page 26: Desain blog dan kontan   Telkomsel FEB UGM 2012

Konten Apa Adanya

Page 27: Desain blog dan kontan   Telkomsel FEB UGM 2012

Konten Dengan Desain

Page 28: Desain blog dan kontan   Telkomsel FEB UGM 2012

Tips Singkat Desain Konten

•Penekanan Kata

•Sertakan Ilustrasi

•Perlakuan Berbeda

Page 29: Desain blog dan kontan   Telkomsel FEB UGM 2012

Rujukan Utama

•http://codex.wordpress.org/

•http://digwp.com/

•http://wptricks.net

•http://www.google.com

Page 30: Desain blog dan kontan   Telkomsel FEB UGM 2012

Nurudin Jauhari

Seorang Suami @IvaFitria, Abah @YashfaJauhar tinggal di

@DesaPonjong, Gunungkidul, Yogyakarta

Nganggur Itu Anugerah

Aktip sebagai Petani dan beberapa kegiatan Sosial di DESA PONJONG

Yogyakarta 24 Januari 2012http://nurudin.jauhari.net

Twitter: @jauhari FB: [email protected]@me.com 082135335511

Page 31: Desain blog dan kontan   Telkomsel FEB UGM 2012

Sumber sumber media

•Browser Screenshoot

•http://www.flickr.com/photos/kimeunyoung/2970436968/

•http://www.flickr.com/photos/topgold/4068417024/

•http://www.flickr.com/photos/birgerking/3145391821/

•http://www.flickr.com/photos/juhansonin/4734830821/