MockUp?

baru dengar istilah 'mockup'? atau pernah dengar selintasan tapi gak tahu artinya? apakah mockup ada hubungannya dengan webdesign?
berikut ini penjelasannya ...

In manufacturing and design, a mockup is a scale or full-size model of a design or device, used for teaching, demonstration, evaluating a design, promotion, and other purposes. ...
en.wikipedia.org/wiki/Mockup

This is how your website designer will give you an idea of what the finished website will look like. This is normally achieved by using a graphics program, so it is a representation of the finished item. Generally depicting the look of the home or index page.
www.theforge.co.za/tag/web-terms/

• 10 Tips For Creating Website Mockups In Photoshop


• Website Design Mockup Tips


• 5 Aplikasi Web Untuk Membuat Mockup dan Wireframe


• Seven website mockup tools

Dewplayer lecteur mp3 en Flash - Alsacréations

Dewplayer lecteur mp3 en Flash - Alsacréations.

file flash untuk memainkan file MP3 di weblog, silahkan dicoba

Mantra "Lorem Ipsum"

Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.

Sejarah mantra "Lorem Ipsum"

Konsep Dasar Desain Web

Sebuah lukisan yang indah selalu dimulai dari sebuah coretan sederhana di atas kanvas, tetapi ingat … sebelumnya pelukis pasti sudah mempunyai ide atau paling tidak dasar style yang akan dipakai untuk melukis. Tanpa ide dasar, berapa kalipun mencoretkan kuasnya pelukis tidak akan bisa menghasilkan lukisan yang indah (setidaknya lukisan yang indah bagi orang awam seperti saya dan Anda). Jadi mulailah dengan KONSEP.

Desain website harus mempunyai fungsi.
Hal ini berarti semua bagiannya harus memainkan peran dalam menyediakan informasi kepada pengunjung tentang siapa Anda, produk Anda atau layanan Anda.
Jangan membuat website hanya untuk “sekedar” ikut-ikutan, tentukan fungsinya terlebih dahulu baik untuk (perusahaan) Anda sendiri maupun bagi calon pengunjung website Anda. [keterangan selengkapnya baca artikel Dion Aji Pradipta]

Pencil, program gratis untuk menggambar sketsa layout website

Pencil adalah sebuah program gratis yang ditujukan untuk membantu para designer dalam membuat sketsa antarmuka (interface) program yang akan dibuat. Selain itu juga bisa digunakan untuk membuat sketsa layout/tampilan website yang akan dibuat.
Contoh pembuatan sketsa yang dibuat dengan menggunakan program Pencil bisa dilihat di sini.

Licensing and Versions:
Pencil will always be free as it is released under the GPL version 2 and is available for virtually all platforms that Firefox 3 can run. The first version of Pencil is tested against GNU/Linux 2.6 (Fedora, Ubuntu and Arch) with GTK+, Windows XP and Windows Vista/7.

Cara penginstalan, di samping bisa dipasang sebagai addon dari browser Firefox 3, Pencil juga bisa diinstal sebagai program mandiri (standalone)

mengubah favicon (gambar kecil) pada address bar - blogspot tutorial

berikut ini cara mengubah favicon (gambar kecil) pada address bar

• login ke blogspot


• upload gambar ke postingan artikel [postingan ini cukup disaving saja, jangan diterbitkan] yang khusus untuk menampung gambar2 yang akan digunakan dalam "mempermak" layout blogger, copy alamatnya


• masuk ke rancangan - edit html


• cari tag <link ..... dan pastekan alamat gambar tadi ke atribut hrefnya
  jika kebingungan berlanjut silahkan hubungi saya

contoh weblog yang bagus [untuk muridku SMP & SMK]

apapun mesin weblog kalian (blogger atau wordpress) yang penting adalah bagaimana membuat dan merawatnya. masing-masing mesin weblog memiliki kelebihan dan kekurangan, tidak ada yang sempurna. berikut ini akan saya tayangkan contoh weblog yang menurut saya cukup bagus sebagai referensi dalam membuat weblog baik itu dari segi desain layout/tampilan maupun konten/isi artikelnya. melalui 2 contoh weblog berikut ini saya harapkan murid-murid saya yang di smp dan smk bisa bahkan mampu membuat weblog yang lebih bagus dari mereka ;)
SEMOGA MENGINSPIRASI!!!

[caption id="attachment_359" align="aligncenter" width="300" caption="http://dhimasnugraha.wordpress.com/"][/caption]

WebLog seorang pelajar TKJ SMK Turen, good job!

[caption id="attachment_360" align="aligncenter" width="300" caption="http://livingdaisy.blogspot.com/"][/caption]

Kalau yang ini contoh dari weblog seorang yang profesional di bidang animasi

Belajar Cascading Style Sheet ... yuuuk

• http://www.globalguideline.com/CSSGuide/index.php


• http://webdevelopmenttutorials.com/freecssxhtmltutorials.php


• http://cita.disability.uiuc.edu/presentations/2006-01-css/index.html


• http://xhtml.com/en/css/reference/


• http://csshtmltutorial.com/csshtmltutorial-introductiontocss.php

kenapa sih harus belajar CSS? karena CSS adalah bagian interior dari sebuah halaman web. Kalau HTML diibaratkan sebagai pembentuk sebuah bangunan maka CSS adalah bagian yang mempercantik sebuah bangunan (bagian interiornya). So kalau kamu ingin bangunan yang telah kamu buat (halaman web) terlihat bagus (eye catching) maka kamu harus mempelajari CSS ... OK!

Membuat tampilan blockquote berbeda

ini adalah blockquote yang memiliki tampilan yang berbeda dengan blockquote yang lainnya, untuk bisa membuat seperti ini dibutuhkan pengetahuan tentang CSS ;)

sumber : http://css-tricks.com/examples/Blockquotes/

Kumpulan Webdesigner Indonesia

Bingung mencari inspirasi untuk layout website? Ingin membandingkan hasil karya website kamu dengan hasil karya orang lain khususnya dari Indonesia? Ingin mencari contoh layout website? kalau jawabannya iahhhh ... silahkan mengunjungi website berikut ini

[caption id="attachment_388" align="aligncenter" width="640" caption="http://www.pickfolio.com/"][/caption]

 

Panduan membuat quiz dengan flash

Salah satu materi Ujian Praktek SMK-TI kompetensi keahlian multimedia tahun 2011 adalah "Membuat CD Pembelajaran Interaktif, yang berisikan materi pelajaran dan soal-soal latihan".
Bagi siswa-siswi kami, membuat CD interaktif dengan menggunakan flash sudah bisa dan 'biasa' dilakukan tetapi untuk membuat soal-soal latihan dengan menggunakan flash 'belum pernah dicoba' sehingga mereka yang memilih materi ini sedikit 'kesulitan'.
Sebetulnya di flash sendiri sudah disediakan template khusus untuk membuat quiz. Panduannya bisa dibaca di http://dzaizen.wordpress.com/2010/02/27/membuat-kuis-dari-flash/. Selain melalui menu template, kita juga bisa membuat quiz dengan cara yang sangat sederhana [download panduannya]. Untuk membuat soal yang lebih interaktif (ada timernya, soal dan jawaban diacak) silahkan baca tutorialnya di http://multimedia2.multiply.com/journal/item/5

semoga membantu ;)

Menggambar layout website

pekerjaan pertama sebelum membuat layout website dengan menggunakan alat bantu komputer adalah menggambar dengan tangan dulu (scratch -> sketch), berikut ini sumber bacaan yang saya dapatkan ketika gugling :

• The Complete No-Nonsense, Step-by-Step Guide to Designing Websites


• From sketch to screen - how to get results you'll be proud of


• 18 Great Examples of Sketched UI Wireframes and Mockups


• bacaan tambahan untuk menambah wawasan : Understanding the HTML Basics , Planning and Organizing Your Site

tutorial membuat layout website dengan photoshop

silahkan klik gambar di atas untuk meluncur ke situs tutorial Membuat layout website dengan menggunakan photoshop ;)

shoppin' windows : Fine Icons

Fine crafted stock icons. Small, simple and sharp. Download FREE for personal and commercial use.

silahkan 'liak-liak dulu, balangkali ada yang cocok untuk mengerjakan tugas' ;)
untuk menuju websitenya cukup klik gambar-gambar ikon di atas

Belajar membuat, menambahkan CSS - create and add CSS

Apa Itu CSS?

[caption id="" align="alignright" width="240" caption="Image by marc_buehler via Flickr"][/caption]

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

dicopas dari http://www.belajarcss.com/panduan-css/pengenalan-css/

Related Articles

• Belajar CSS


• Cara mudah belajar CSS


• CSS Grids (solutionset.com)


• Where you have to save the css file (wiki.answers.com)

css-tutorial-01
css-tutorial-02
css-tutorial-03
css-tutorial-03_2
css-tutorial-04
css-tutorial-05
css-tutorial-06
css-tutorial-07
css-tutorial-08
css-tutorial-09
css-tutorial-10
css-tutorial-11
css-tutorial-12
css-tutorial-12_2
css-tutorial-13
css-tutorial-14
css-tutorial-15
css-tutorial-16
css-tutorial-17
css-tutorial-18
css-tutorial-19
css-tutorial-20

Tips memodifikasi template layout webpage

prinsip ATM : Amati Tiru Modifikasi digunakan hampir di semua bidang pekerjaan, tidak terkecuali di bidang pengembangan web (web development). Di bidang biokimia pun juga berlaku pameo "Kalau sudah ada yang membuat kenapa harus bersusah payah untuk mensintesa zat tersebut, lebih baik diekstraksi saja"

Berikut ini Tips Memodifikasi Template Layout Webpage :

• Tambahkan logo pada template


• Ubah gambar yang ada, sesuaikan gambar/foto dengan tema website yang akan dibuat


• Ganti komposisi warna yang digunakan


• Sesuaikan bilah pranala (navigation links)


• Tambahkan script dan elemen desain

disadur dari Customizing Templates

contoh template website bisa dilihat di http://templates.entheosweb.com/

Memecah isi tulisan/halaman

kadang kala kita membuat tulisan yang begitu panjangnya untuk menjelaskan sesuatu. kalau tulisan tersebut berupa hardcopy tentunya tidak masalah tapi kalau tulisan tersebut dalam bentuk blog tentunya akan menjadi masalah, karena pengunjung akan melakukan scrolling mouse yang sangat melelahkan hanya untuk membaca isi satu tulisan tersebut dan hal ini juga melanggar kaidah dalam pembuatan web.
Untuk mengatasi masalah ini wordpress telah membuat tag khusus yang berfungsi untuk memecah isi tulisan menjadi beberapa bagian (halaman).
Ingin tahu tag apa tersebut dan bagaimana cara menuliskannya? simak penjelasannya di halaman berikutnya ... ;)


ternyata wordpress menciptakan tag
<!--nextpage-->
untuk memecah isi tulisan untuk menjadi 'beberapa halaman' ;)
cara penggunaannya pun cukup mudah, tuliskan kode tersebut pada bagian tulisan yang ingin dijadikan sebuah 'halaman baru'. Penulisan tag/kode tersebut tentunya dalam mode HTML, bukan mode Visual
cara ini mengilhami saya 'bagaimana kalau diterapkan dalam halaman portofolio atau halaman gallery?', tentunya dengan cara ini kita bisa membuat 'halaman-halaman' tersebut berdasarkan kategori tertentu bukan?


sangat menginspirasi bukan ;)

Website penyedia font ukuran supermini

pernah kebingungan bagaimana mengecilkan tampilan ukuran font tapi masih bisa terbaca dengan jelas? kalau ya ... silahkan download font jenis ukuran supermini di http://bitmapmania.m78.com/ , font-nya lucu-lucu n keren-keren lho, cucok untuk membuat file flash maupun miniflash game